[chore] Upgrade to react 18 (keplergl#2323)

.eslintrc

@@ -20,7 +20,7 @@
     "jestPuppeteer": true
   },
   "parser": "@typescript-eslint/parser",
-  "plugins": ["babel", "prettier", "react", "@typescript-eslint"],
+  "plugins": ["babel", "prettier", "react", "@typescript-eslint", "enzyme-deprecation"],
   "rules": {
     "valid-jsdoc": 0,
     "no-var": 0,
@@ -43,7 +43,9 @@
     "no-undef": 0,
     "camelcase": 0,
     "consistent-return": 0,
-    "comma-dangle": 1
+    "comma-dangle": 1,
+    "enzyme-deprecation/no-shallow": 2,
+    "enzyme-deprecation/no-mount": 2
   },
   "overrides": [
     {

bindings/kepler.gl-jupyter/js/package.json

@@ -68,11 +68,11 @@
     "kepler.gl": "^2.5.5",
     "node-polyfill-webpack-plugin": "^1.1.2",
     "querystring": "0.2.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.0.2",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-helmet": "^5.2.0",
-    "react-intl": "^3.12.0",
+    "react-intl": "^6.3.0",
     "react-redux": "^7.1.3",
     "redux": "^3.7.2",
     "redux-actions": "^2.2.1",

contributing/DEVELOPERS.md

@@ -65,11 +65,7 @@ export MapboxAccessToken=<insert_your_token>
 yarn start
 ```
 
-An demo app will be served at
-
-```text
-http://localhost:8080/
-```
+An demo app will be served at `http://localhost:8080/`
 
 This is the demo app we hosted on [http://kepler.gl/#/demo][demo-app]. By default, it serves non-minified source code inside the src directory.
 
@@ -112,7 +108,7 @@ yarn test-headless
 1. add `.only` to errored tests to only run 1 test at a time
 ```js
 test.only('MapContainerFactory', t => {
-  // tests 
+  // tests
 }
 ```
 
@@ -131,6 +127,22 @@ To generate a coverage report
 yarn cover
 ```
 
+## Test React components
+
+Enzyme is no longer supported therefore we are now transitioning to [testing library](https://testing-library.com/).
+
+We have introduced an eslint rule to deprecate the usage of enzyme so if you attempt to create new tests using enzyme
+it will throw an error when running lint.
+
+In order to create new tests cases please take advantage of [Testing Library](https://testing-library.com/).
+All necessary dependencies are already installed, you can start testing your React components by following this
+[doc](https://testing-library.com/docs/react-testing-library/intro);
+
+### Migrating enzyme to React testing library
+
+If you are interested in migrating enzyme tests to RTL (react testing library) feel free to check
+the [official migration guidelines](https://testing-library.com/docs/react-testing-library/migrate-from-enzyme/)
+
 ## Coding Rules
 
 To ensure consistency throughout the source code, keep these rules in mind as you are working:
@@ -276,7 +288,7 @@ Netlify is connected to the following github triggers:
 A new production version of kepler.gl website is automatically created and deployed every time a PR is merged onto master.
 
 In order to support testing environment, Netlify is setup to generate build every time a PR is created or updated.
-By generating builds for new and updated PRs we support CI/CD so developers can test their own build in a production like environment 
+By generating builds for new and updated PRs we support CI/CD so developers can test their own build in a production like environment
 
 ### Publish kepler.gl package to NPM
 
@@ -314,16 +326,16 @@ The documentation layout is defined by __SUMMARY.md__ file where the table of co
 * [ENTRY_LABEL](FILE_PATH)
 e.g.
 * [Welcome](README.md)
-``` 
+```
 
-The above file is used by Gitbook to generate the doc navigation visible on the left-hand side of Kepler.gl doc website. 
+The above file is used by Gitbook to generate the doc navigation visible on the left-hand side of Kepler.gl doc website.
 Gitbook also has the ability to show description for each folder/section of the documentation by creating an entry in __SUMMARY.md__
 and create a new __README.md__ file within said folder. The README.md file is a Gitbook convention that treats README files as if they were the main entry file for each folder.
 
 The following is an example of doc section in SUMMARY.md file:
 ```markdown
 * [User guides](docs/user-guides/README.md)
-``` 
+```
 
 ### Update Documentation
 The integration with Gitbook allows to update the documentation in two different ways:

examples/custom-map-style/index.html

@@ -10,6 +10,7 @@
     </style>
   </head>
   <body>
+    <div id="root" />
     <script src='bundle.js'></script>
   </body>
 </html>

examples/custom-map-style/package.json

@@ -7,8 +7,8 @@
     "global": "^4.3.0",
     "@kepler.gl/components": "^3.0.0-alpha.0",
     "@kepler.gl/reducers": "^3.0.0-alpha.0",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-palm": "^3.3.6",
     "react-redux": "^7.1.3",
     "react-virtualized": "^9.21.0",
@@ -28,4 +28,4 @@
     "webpack-dev-server": "^3.1.14",
     "webpack-hot-middleware": "^2.24.3"
   }
-}
+}

examples/custom-map-style/src/main.tsx

@@ -19,9 +19,9 @@
 // THE SOFTWARE.
 
 import React from 'react';
+import ReactDOM from 'react-dom/client';
 import document from 'global/document';
 import {Provider} from 'react-redux';
-import {render} from 'react-dom';
 import store from './store';
 import App from './app';
 
@@ -31,4 +31,6 @@ const Root = () => (
   </Provider>
 );
 
-render(<Root />, document.body.appendChild(document.createElement('div')));
+const root = ReactDOM.createRoot(document.getElementById('root'));
+
+root.render(<Root />);

examples/custom-reducer/index.html

@@ -10,6 +10,7 @@
     </style>
   </head>
   <body>
+    <div id="root" />
     <script src='bundle.js'></script>
   </body>
 </html>

examples/custom-reducer/package.json

@@ -8,8 +8,8 @@
     "@kepler.gl/actions": "^3.0.0-alpha.0",
     "@kepler.gl/components": "^3.0.0-alpha.0",
     "@kepler.gl/reducers": "^3.0.0-alpha.0",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-palm": "^3.3.6",
     "react-redux": "^7.1.3",
     "react-virtualized": "^9.21.0",

examples/custom-reducer/src/main.js

@@ -19,9 +19,9 @@
 // THE SOFTWARE.
 
 import React from 'react';
+import ReactDOM from 'react-dom/client';
 import document from 'global/document';
 import {Provider} from 'react-redux';
-import {render} from 'react-dom';
 import store from './store';
 import App from './app';
 
@@ -31,4 +31,6 @@ const Root = () => (
   </Provider>
 );
 
-render(<Root />, document.body.appendChild(document.createElement('div')));
+const root = ReactDOM.createRoot(document.getElementById('root'));
+
+root.render(<Root />);

examples/custom-theme/index.html

@@ -10,6 +10,7 @@
     </style>
   </head>
   <body>
+    <div id="root" />
     <script src="/bundle.js"></script>
   </body>
 </html>

examples/custom-theme/package.json

@@ -7,8 +7,8 @@
     "global": "^4.3.0",
     "@kepler.gl/components": "^3.0.0-alpha.0",
     "@kepler.gl/reducers": "^3.0.0-alpha.0",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-palm": "^3.3.6",
     "react-redux": "^7.1.3",
     "react-virtualized": "^9.21.0",

examples/custom-theme/src/main.js

@@ -19,16 +19,18 @@
 // THE SOFTWARE.
 
 import React from 'react';
+import ReactDOM from 'react-dom/client';
 import document from 'global/document';
-import {render} from 'react-dom';
 import {Provider} from 'react-redux';
-import App from './app';
 import store from './store';
+import App from './app';
 
 const Root = () => (
   <Provider store={store}>
     <App />
   </Provider>
 );
 
-render(<Root />, document.body.appendChild(document.createElement('div')));
+const root = ReactDOM.createRoot(document.getElementById('root'));
+
+root.render(<Root />);

examples/demo-app/index.html

@@ -10,6 +10,7 @@
     </style>
   </head>
   <body>
+    <div id="root" />
     <script src="/bundle.js"></script>
   </body>
 </html>

examples/demo-app/package.json

@@ -23,9 +23,9 @@
     "@kepler.gl/styles": "^3.0.0-alpha.0",
     "lodash.debounce": "^4.0.8",
     "lodash.get": "^4.4.2",
-    "react": "^16.8.4",
+    "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dom": "^16.8.4",
+    "react-dom": "^18.2.0",
     "react-markdown": "^4.2.2",
     "react-palm": "^3.3.6",
     "react-redux": "^7.1.3",

examples/demo-app/src/actions.js

@@ -197,7 +197,7 @@ export function loadSample(options, pushRoute = true) {
   return (dispatch, getState) => {
     const {routing} = getState();
     if (options.id && pushRoute) {
-      dispatch(push(`/demo/${options.id}${routing.locationBeforeTransitions.search}`));
+      dispatch(push(`/demo/${options.id}${routing.locationBeforeTransitions?.search ?? ''}`));
     }
     // if the sample has a kepler.gl config file url we load it
     if (options.keplergl) {

examples/demo-app/src/cloud-providers/dropbox/dropbox-error-modal.js

@@ -23,7 +23,7 @@ import ReactDOM from 'react-dom';
 
 const WIDTH = 400;
 const HEIGHT = 800;
-const style = {borther: 0};
+const style = {border: 0};
 
 export default class Frame extends Component {
   componentDidMount() {
@@ -34,7 +34,7 @@ export default class Frame extends Component {
   }
 
   componentWillUnmount() {
-    ReactDOM.unmountComponentAtNode(this.root.current.contentDocument);
+    this.root.current.unmount();
   }
 
   root = createRef();

examples/demo-app/src/main.js

@@ -19,11 +19,11 @@
 // THE SOFTWARE.
 
 import React from 'react';
+import ReactDOM from 'react-dom/client';
 import document from 'global/document';
 import {Provider} from 'react-redux';
 import {browserHistory, Router, Route} from 'react-router';
 import {syncHistoryWithStore} from 'react-router-redux';
-import {render} from 'react-dom';
 import store from './store';
 import App from './app';
 import {buildAppRoutes} from './utils/routes';
@@ -42,4 +42,6 @@ const Root = () => (
   </Provider>
 );
 
-render(<Root />, document.body.appendChild(document.createElement('div')));
+const root = ReactDOM.createRoot(document.getElementById('root'));
+
+root.render(<Root />);

examples/node-app/index.html

@@ -10,6 +10,7 @@
     </style>
   </head>
   <body>
+    <div id="root" />
     <script src='/bundle.js'></script>
   </body>
 </html>

examples/node-app/package.json

@@ -8,8 +8,8 @@
     "global": "^4.3.0",
     "@kepler.gl/components": "^3.0.0-alpha.0",
     "@kepler.gl/reducers": "^3.0.0-alpha.0",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-palm": "^3.3.6",
     "react-redux": "^7.1.3",
     "react-virtualized": "^9.21.0",

examples/node-app/src/main.js

@@ -19,9 +19,9 @@
 // THE SOFTWARE.
 
 import React from 'react';
+import ReactDOM from 'react-dom/client';
 import document from 'global/document';
 import {Provider} from 'react-redux';
-import {render} from 'react-dom';
 import store from './store';
 import App from './app';
 
@@ -31,4 +31,6 @@ const Root = () => (
   </Provider>
 );
 
-render(<Root />, document.body.appendChild(document.createElement('div')));
+const root = ReactDOM.createRoot(document.getElementById('root'));
+
+root.render(<Root />);

examples/open-modal/index.html

@@ -10,6 +10,7 @@
     </style>
   </head>
   <body>
+    <div id="root" />
     <script src='bundle.js'></script>
   </body>
 </html>

examples/open-modal/package.json

@@ -8,8 +8,8 @@
     "@kepler.gl/actions": "^3.0.0-alpha.0",
     "@kepler.gl/components": "^3.0.0-alpha.0",
     "@kepler.gl/reducers": "^3.0.0-alpha.0",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-modal": "^3.1.10",
     "react-palm": "^3.3.6",
     "react-redux": "^7.1.3",

examples/open-modal/src/main.js

@@ -19,9 +19,9 @@
 // THE SOFTWARE.
 
 import React from 'react';
+import ReactDOM from 'react-dom/client';
 import document from 'global/document';
 import {Provider} from 'react-redux';
-import {render} from 'react-dom';
 import store from './store';
 import App from './app';
 
@@ -31,4 +31,6 @@ const Root = () => (
   </Provider>
 );
 
-render(<Root />, document.body.appendChild(document.createElement('div')));
+const root = ReactDOM.createRoot(document.getElementById('root'));
+
+root.render(<Root />);

examples/replace-component/index.html

@@ -10,6 +10,7 @@
     </style>
   </head>
   <body>
+    <div id="root" />
     <script src='bundle.js'></script>
   </body>
 </html>

examples/replace-component/package.json

@@ -10,8 +10,8 @@
     "@kepler.gl/reducers": "^3.0.0-alpha.0",
     "@kepler.gl/schemas": "^3.0.0-alpha.0",
     "@kepler.gl/styles": "^3.0.0-alpha.0",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-palm": "^3.3.6",
     "react-redux": "^7.1.3",
     "react-virtualized": "^9.21.0",