v1.x: @next - React v17 Support

.npmignore

@@ -21,6 +21,7 @@ stories
 .travis.yml
 
 yarn.lock
+yarn-error.log
 
 .nvmrc
 .eslintrc
@@ -34,4 +35,3 @@ coverage
 
 CHANGELOG
 .github
-

CHANGELOG.md

@@ -8,6 +8,9 @@
 - *dev changes*: prettier changes: `singleQuote: true`, `arrowParens: avoid`. `prettier` upgraded to `v2`
 - *dev changes*: `jest v26`
 
+## 1.0.0-rc.0
+- First `1.0` Release candidate with `React 17` support
+
 ## 0.13.1
 - ignore `coverage` folder from npm bundle
 

README.md

@@ -1,6 +1,8 @@
 # react-d3-speedometer
 
-**react-d3-speedometer** is a react component library for showing speedometer like gauge using d3.
+> React library for showing speedometer like gauge using d3.
+
+![react-d3-speedometer](https://raw.githubusercontent.com/palerdot/react-d3-speedometer/master/speedo.gif)
 
 [![Build Status](https://travis-ci.org/palerdot/react-d3-speedometer.svg?branch=master)](https://travis-ci.org/palerdot/react-d3-speedometer)
 [![Codecov](https://img.shields.io/codecov/c/gh/palerdot/react-d3-speedometer)](https://codecov.io/gh/palerdot/react-d3-speedometer)
@@ -9,18 +11,35 @@
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 
 
+**Note**: `v1.x` is compatible with `React 17`. Please use latest `v0.x` (`v0.14.1` at the time of writing) if you are using `React 16`.
 
 [![NPM](https://nodei.co/npm/react-d3-speedometer.png)](https://npmjs.org/package/react-d3-speedometer)
 
-![react-d3-speedometer](https://raw.githubusercontent.com/palerdot/react-d3-speedometer/master/speedo.gif)
 
-## Usage:
+# `react-d3-speedometer`
+
+- [Getting Started](#getting-started)
+- [Configuration Options](#configuration-options)
+- [Examples](#examples)
+- [FAQ](#faq)
+- [Ports](#ports)
+
+## Getting Started:
+
+Install with `yarn` or `npm`.
 
 **Yarn:**
-`yarn add react-d3-speedometer` 
+```
+yarn add react-d3-speedometer
+```
 
-**NPM:**
-`npm install --save react-d3-speedometer` 
+**npm:**
+
+```
+npm install --save react-d3-speedometer
+``` 
+
+And, use it like
 
 ```javascript
 // import the component
@@ -29,17 +48,6 @@ import ReactSpeedometer from "react-d3-speedometer"
 <ReactSpeedometer />
 ```
 
-`react-d3-speedometer` uses [lodash-es](https://www.npmjs.com/package/lodash-es) dependency for better tree shaking. 
-For [nextjs](https://nextjs.org/), please use [next-transpile-modules](https://www.npmjs.com/package/next-transpile-modules), so that ES module exports from `lodash-es` package is properly transpiled.
-
-## Ports:
-- Vue: [vue-speedometer](https://github.com/palerdot/vue-speedometer)
-- Svelte: [svelte-speedometer](https://github.com/palerdot/svelte-speedometer)
-
-## Examples:
-
-[Live Examples](https://palerdot.in/react-d3-speedometer/)
-
 ## Configuration Options:
 
 | prop        | type           | default  | comments |
@@ -249,6 +257,27 @@ You can give a value between `0` and `1` to control the needle height.
 />
 ```
 
+### FAQ:
+
+
+1) How to use with [nextjs](https://nextjs.org/)?
+
+    `react-d3-speedometer` uses [lodash-es](https://www.npmjs.com/package/lodash-es) dependency for better tree shaking. For [nextjs](https://nextjs.org/), please use [next-transpile-modules](https://www.npmjs.com/package/next-transpile-modules), so that ES module exports from `lodash-es` package is properly transpiled.
+
+2) How to use with `React 17`?
+
+    Please use latest `v1.x` (`v1.0.0` at the time of writing). `v1.x` is compatible with `React 17`.
+
+3) How to use with `React 16`?
+
+    Please use latest `v0.x` (`v0.14.x` at the time of writing). `v0.x` is compatible with `React 16`.
+
+---
+
+## Ports:
+- Vue: [vue-speedometer](https://github.com/palerdot/vue-speedometer)
+- Svelte: [svelte-speedometer](https://github.com/palerdot/svelte-speedometer)
+
 ---
 
 ### Todos:
@@ -280,22 +309,25 @@ npm test
 - [`v0.7.0`] Custom segment stops. [Live Example](https://palerdot.in/react-d3-speedometer/?path=/story/react-d3-speedometer--custom-segment-stops)
 - [`v0.6.0`] Custom segment colors. [Live Example](https://codesandbox.io/s/relaxed-silence-c3qkb)
 
+---
+
 #### Changelog:
 
 [View Changelog](CHANGELOG.md)
 
 ---
 
 #### Credits:
-`react-d3-speedometer` was started as a react port of the following d3 snippet - [http://bl.ocks.org/msqr/3202712](http://bl.ocks.org/msqr/3202712). Component template bootstrapped with [React CDK](https://github.com/storybooks/react-cdk). Also, many thanks to `d3` and `react` ecosystem contributors.
+`react-d3-speedometer` was started as a react port of the following d3 snippet - [http://bl.ocks.org/msqr/3202712](http://bl.ocks.org/msqr/3202712). Component template was initially bootstrapped with [React CDK](https://github.com/storybooks/react-cdk). Also, many thanks to `react` and `d3` ecosystem contributors.
 
 ---
 
 #### Contributing:
-PRs are welcome. Please create a issue/bugfix/feature branch and create an issue with your branch details. Probably I will create a similar branch in the upstream repo so that PRs can be raised against that branch instead of `master`.
+PRs are welcome. Please create a issue/bugfix/feature branch and create an issue with your branch details. Probably I will create a similar branch in the upstream repo so that PRs can be raised against that branch instead of `master`. `master-v0.x` is the main branch for `React 16` compatible changes.
 
 #### Notes
-- `0.x` versions are compatible with React & React DOM Versions (16.x)
+- `1.x` versions are compatible with React & React DOM Versions `v17.x`
+- `0.x` versions are compatible with React & React DOM Versions `v16.x`
 For every subsequent major react upgrade, `react-d3-speedometer` will be bumped to next major versions. For example `1.x` will be compatible with `React 17.x` so on and so forth ...
 
 For similar library for VueJS, please check out [vue-speedometer](https://github.com/palerdot/vue-speedometer)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-d3-speedometer",
-  "version": "0.14.1",
-  "description": "react-d3-speedometer is a react component library for showing speedometer like gauge using d3.",
+  "version": "1.0.0-rc.0",
+  "description": "React library for showing speedometer like gauge using d3.",
   "author": {
     "name": "palerdot",
     "email": "palerdot@gmail.com"
@@ -45,13 +45,14 @@
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-react": "^7.9.1",
     "@babel/register": "^7.9.0",
-    "@storybook/addon-docs": "^5.3.17",
-    "@storybook/addon-info": "^5.3.17",
-    "@storybook/addon-knobs": "^5.3.17",
-    "@storybook/addon-storysource": "^5.3.17",
-    "@storybook/react": "^5.3.17",
-    "@storybook/theming": "^5.3.17",
-    "babel-jest": "^26.5.0",
+    "@storybook/addon-docs": "^6.1.0-alpha.17",
+    "@storybook/addon-info": "^6.0.0-alpha.2",
+    "@storybook/addon-knobs": "^6.0.22",
+    "@storybook/addon-storysource": "^6.1.0-alpha.17",
+    "@storybook/react": "^6.1.0-alpha.17",
+    "@storybook/theming": "^6.1.0-alpha.17",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.1.1",
+    "babel-jest": "^26.3.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
@@ -69,20 +70,20 @@
     "jest": "^26.5.0",
     "jsdom": "^14.0.0",
     "prettier": "^2.1.2",
-    "react": "^16.8.4",
+    "react": "^17.0.1",
     "react-addons-test-utils": "^15.6.2",
-    "react-dom": "^16.8.4",
+    "react-dom": "^17.0.1",
     "react-test-renderer": "^16.8.4",
     "webpack": "^4.42.0"
   },
   "peerDependencies": {
     "prop-types": "^15.7.2",
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0"
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.9.0",
-    "d3": "^5.9.2",
+    "d3": "^6.2.0",
     "lodash-es": "^4.17.15",
     "memoize-one": "^5.0.5"
   },

src/__tests__/index.js

@@ -1,13 +1,14 @@
 import React from 'react'
 import isEmpty from 'lodash-es/isEmpty'
-// ref: https://github.com/airbnb/enzyme/blob/master/docs/guides/migration-from-2-to-3.md
+
+// ref: https://github.com/enzymejs/enzyme/issues/2429
 import Enzyme from 'enzyme'
-import Adapter from 'enzyme-adapter-react-16'
+// NOTE: to be replaced with official adapter once released
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
 Enzyme.configure({ adapter: new Adapter() })
 
-import { shallow, mount, render } from 'enzyme'
+import { shallow, mount } from 'enzyme'
 
-// import Button from '../index';
 import ReactSpeedometer from '../index'
 
 // import validators