feat(react): BREAKING CHANGE Upgrade to React 18 (#3556)

[BREAKING CHANGES] Upgrade to React 18
box · Jul 12, 2024 · 91e0978 · 91e0978
1 parent 76d20e1
commit 91e0978
Show file tree

Hide file tree

Showing 104 changed files with 1,675 additions and 2,547 deletions.
diff --git a/.flowconfig b/.flowconfig
@@ -20,6 +20,7 @@
 <PROJECT_ROOT>/node_modules/react-styleguidist*
 <PROJECT_ROOT>/node_modules/immer*
 <PROJECT_ROOT>/.*/__tests__/.*
+<PROJECT_ROOT>/.*/*.stories.*
 # ignoring the flow check for this component specifically because it increased the scope too much when we are planning to switch to typescript anyways
 <PROJECT_ROOT>/src/components/pill-selector-dropdown/PillSelectorDropdown.stories.js
 

diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,9 +1,20 @@
+/* eslint-disable */
+// @ts-nocheck
+
 import path from 'path';
 
 const language = process.env.LANGUAGE;
 
-const config: { webpackFinal: (config: any) => Promise<any>; staticDirs: string[]; stories: string[]; framework: { name: string }; addons: (string | { name: string; options: { sass: { implementation: any } } } | { name: string; options: { mdxPluginOptions: { mdxCompileOptions: { remarkPlugins: any[] } } } })[] } = {
-    stories: ['../src/**/*.mdx','../src/**/*.stories.@(js|jsx|ts|tsx)'],
+const config: {
+    stories: string[];
+    addons: (string | { name: string; options: { sass: { implementation: any } } })[],
+    framework: { name: string };
+    staticDirs: string[];
+    webpackFinal: (config: any) => Promise<any>;
+    typescript: any
+} = {
+    stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
     addons: [
         '@storybook/addon-links',
         '@storybook/addon-essentials',
@@ -17,11 +28,18 @@ const config: { webpackFinal: (config: any) => Promise<any>; staticDirs: string[
             },
         },
         '@storybook/addon-styling-webpack',
+        '@storybook/addon-docs',
+        '@storybook/addon-webpack5-compiler-babel',
+        '@chromatic-com/storybook',
+        'storybook-react-intl'
     ],
+
     framework: {
         name: '@storybook/react-webpack5',
     },
+
     staticDirs: ['public'],
+
     webpackFinal: async (config: any) => {
         // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
         // You can change the configuration based on that.
@@ -39,6 +57,9 @@ const config: { webpackFinal: (config: any) => Promise<any>; staticDirs: string[
 
         return config;
     },
+    typescript: {
+        reactDocgen: 'react-docgen-typescript'
+    }
 };
 
 export default config;
diff --git a/.storybook/manager.ts b/.storybook/manager.ts
@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import customTheme from './customTheme';
 
 addons.setConfig({

diff --git a/.storybook/typings.d.ts b/.storybook/typings.d.ts
@@ -1,3 +1,6 @@
+/* eslint-disable */
+// @ts-nocheck
+
 declare module '*.md' {
     const content: string;
     export = content;

diff --git a/DEVELOPING.md b/DEVELOPING.md
@@ -138,7 +138,7 @@ Most hooks can be tested with `shallow` rendering except for lifecycle hooks suc
 To test a `useEffect` hook, you must use `act()` from `react-dom/test-utils` and `mount()` from `enzyme`.
 
 ```jsx
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
 
 test('something happens', () => {
     let wrapper;
@@ -164,7 +164,7 @@ test('something happens', () => {
 
     // Assert
     expect(wrapper...);
-}
+})
 ```
 
 See [React Testing Recipes](https://reactjs.org/docs/testing-recipes.html) for more examples.

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -1,3 +1,4 @@
+/* eslint-disable */
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import js from "@eslint/js";

diff --git a/examples/src/SelectorDropdownExamples.js b/examples/src/SelectorDropdownExamples.js
@@ -68,6 +68,7 @@ class SelectorDropdownContainer extends Component {
 
         return (
             <div style={{ paddingBottom: '330px' }}>
+                {/* eslint-disable-next-line react/no-unknown-property */}
                 <label labelFor="title-check">
                     <input
                         type="checkbox"

diff --git a/package.json b/package.json
@@ -136,6 +136,8 @@
         "@box/frontend": "^10.0.0",
         "@box/languages": "^1.0.0",
         "@box/react-virtualized": "9.22.3-rc-box.7",
+        "@cfaester/enzyme-adapter-react-18": "^0.8.0",
+        "@chromatic-com/storybook": "^1.6.1",
         "@commitlint/cli": "^8.3.5",
         "@commitlint/config-conventional": "^8.3.4",
         "@eslint/eslintrc": "^3.1.0",
@@ -144,47 +146,45 @@
         "@formatjs/intl-relativetimeformat": "^4.5.9",
         "@formatjs/intl-unified-numberformat": "^3.2.0",
         "@hapi/address": "2.1.1",
-        "@storybook/addon-actions": "^7.5.3",
-        "@storybook/addon-docs": "^8.0.8",
-        "@storybook/addon-essentials": "^7.5.3",
-        "@storybook/addon-interactions": "^7.5.3",
-        "@storybook/addon-knobs": "^7.0.2",
-        "@storybook/addon-links": "^7.5.3",
-        "@storybook/addon-storyshots": "^7.5.3",
+        "@storybook/addon-actions": "^8.1.11",
+        "@storybook/addon-docs": "^8.1.11",
+        "@storybook/addon-essentials": "^8.1.11",
+        "@storybook/addon-interactions": "^8.1.11",
+        "@storybook/addon-knobs": "^8.0.1",
+        "@storybook/addon-links": "^8.1.11",
         "@storybook/addon-styling": "^1.3.7",
-        "@storybook/addon-styling-webpack": "^0.0.5",
-        "@storybook/addons": "^7.5.3",
-        "@storybook/blocks": "^7.6.11",
-        "@storybook/preview-api": "^7.6.11",
-        "@storybook/react-webpack5": "^7.5.3",
-        "@storybook/testing-library": "^0.2.2",
-        "@storybook/theming": "^7.5.3",
+        "@storybook/addon-styling-webpack": "^1.0.0",
+        "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+        "@storybook/blocks": "^8.1.11",
+        "@storybook/preview-api": "^8.1.11",
+        "@storybook/react-webpack5": "^8.1.11",
+        "@storybook/test": "^8.1.11",
+        "@storybook/theming": "^8.1.11",
         "@svgr/core": "^5.0.1",
         "@svgr/plugin-prettier": "^5.0.1",
         "@svgr/plugin-svgo": "^5.1.0",
-        "@testing-library/jest-dom": "^6.4.2",
-        "@testing-library/react": "12.1.5",
+        "@testing-library/jest-dom": "^6.4.6",
+        "@testing-library/react": "^16.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@types/classnames": "^2.2.9",
         "@types/color": "^3.0.2",
-        "@types/enzyme": "^3.10.4",
+        "@types/enzyme": "^3.10.18",
         "@types/history": "^4.7.5",
         "@types/jest": "^29.5.11",
         "@types/jest-image-snapshot": "^2.11.0",
         "@types/lodash": "^4.14.149",
         "@types/node": "^13.5.2",
         "@types/pikaday": "^1.7.4",
         "@types/puppeteer": "^2.0.1",
-        "@types/react": "^16.9.18",
+        "@types/react": "18.3.0",
         "@types/react-beautiful-dnd": "^13.1.8",
-        "@types/react-dom": "^16.9.5",
+        "@types/react-dom": "18.3.0",
         "@types/react-measure": "^2.0.6",
         "@types/react-router-dom": "^5.1.3",
         "@types/sinon": "^7.5.1",
         "@types/webpack": "^4.41.3",
         "@typescript-eslint/eslint-plugin": "^7.3.1",
         "@typescript-eslint/parser": "^7.3.1",
-        "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
         "autoprefixer": "^9.7.4",
         "axios": "0.25.0",
         "babel-core": "^7.0.0-bridge.0",
@@ -258,7 +258,7 @@
         "mini-css-extract-plugin": "^2.9.0",
         "mousetrap": "^1.6.3",
         "msw": "^2.1.5",
-        "msw-storybook-addon": "2.0.0-beta.0",
+        "msw-storybook-addon": "^2.0.2",
         "mutationobserver-shim": "^0.3.3",
         "npm-run-all": "^4.1.3",
         "nsp": "^3.2.1",
@@ -272,21 +272,21 @@
         "puppeteer": "^2.0.0",
         "query-string": "5.1.1",
         "raf": "^3.4.1",
-        "react": "^17.0.1",
-        "react-animate-height": "^2.0.8",
+        "react": "^18.3.1",
+        "react-animate-height": "^3.2.3",
         "react-beautiful-dnd": "^13.1.1",
         "react-docgen-typescript": "^1.16.1",
         "react-docgen-typescript-loader": "^3.6.0",
-        "react-dom": "^17.0.1",
-        "react-draggable": "^3.3.0",
+        "react-dom": "^18.3.1",
+        "react-draggable": "^4.4.6",
         "react-immutable-proptypes": "^2.1.0",
-        "react-intl": "6.4.2",
+        "react-intl": "^6.6.8",
         "react-measure": "^2.3.0",
         "react-modal": "^3.8.1",
         "react-popper": "^1.3.4",
         "react-process-string": "^1.2.0",
-        "react-responsive": "8.2.0",
-        "react-router-dom": "^5.0.0",
+        "react-responsive": "^10.0.0",
+        "react-router-dom": "5.3.4",
         "react-scrollbars-custom": "^4.0.21",
         "react-styleguidist": "12.0.1",
         "react-test-renderer": "^16.13.1",
@@ -304,7 +304,8 @@
         "sinon": "^2.3.7",
         "source-map-loader": "^0.2.4",
         "start-server-and-test": "^1.10.8",
-        "storybook": "^7.6.11",
+        "storybook": "^8.1.11",
+        "storybook-react-intl": "^3.0.1",
         "string-replace-loader": "^2.2.0",
         "style-loader": "^1.0.0",
         "styled-components": "5.0.0",
@@ -314,7 +315,7 @@
         "stylelint-order": "^3.1.1",
         "tabbable": "^1.1.3",
         "ts-loader": "^6.2.1",
-        "typescript": "^5.2.2",
+        "typescript": "5.2.2",
         "uniqid": "^5.2.0",
         "uuid": "^8.3.2",
         "wait-on": "^3.3.0",
@@ -346,21 +347,21 @@
         "mousetrap": "^1.6.3",
         "pikaday": "^1.8.0",
         "query-string": "5.1.1",
-        "react": "^17.0.1",
-        "react-animate-height": "^2.0.8",
+        "react": "^17.0.1 || ^18.0.0",
+        "react-animate-height": "^3.2.3",
         "react-beautiful-dnd": "^13.1.1",
-        "react-dom": "^17.0.1",
-        "react-draggable": "^3.3.0",
+        "react-dom": "^17.0.1 || ^18.0.0",
+        "react-draggable": "^4.4.6",
         "react-immutable-proptypes": "^2.1.0",
         "react-intl": ">=2.9.0",
         "react-measure": "^2.3.0",
         "react-modal": "^3.8.1",
         "react-popper": "^1.3.4",
         "react-process-string": "^1.2.0",
-        "react-responsive": "8.2.0",
-        "react-router-dom": "^5.0.0",
+        "react-responsive": "^10.0.0",
+        "react-router-dom": "5.3.4",
         "react-scrollbars-custom": "^4.0.21",
-        "react-tether": "^1.0.0",
+        "react-tether": "1.0.5",
         "react-textarea-autosize": "^8.5.3",
         "regenerator-runtime": "^0.13.2",
         "sanitize-html": "1.21.1",
@@ -376,8 +377,7 @@
         }
     },
     "resolutions": {
-        "ip": "1.1.8",
-        "**/react-intl/**/@types/react": "^16.9.18"
+        "ip": "1.1.8"
     },
     "overrides": {
         "draft-js": {

diff --git a/scripts/jest/enzyme-adapter.js b/scripts/jest/enzyme-adapter.js
@@ -4,7 +4,7 @@ import 'core-js/es/set';
 import 'raf/polyfill';
 import 'mutationobserver-shim';
 import Enzyme, { mount, shallow } from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Adapter from '@cfaester/enzyme-adapter-react-18';
 
 Enzyme.configure({ adapter: new Adapter() });
 

diff --git a/scripts/jest/jest-setup.ts b/scripts/jest/jest-setup.ts
@@ -1,6 +1,11 @@
 // @ts-nocheck override setImmediate to use setTimeout
 import '@testing-library/jest-dom';
+import util from 'util';
 
 global.setImmediate = cb => {
     setTimeout(cb, 0);
 };
+
+Object.defineProperty(global, 'TextEncoder', {
+    value: util.TextEncoder,
+});
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable react/button-has-type */
+
 import * as React from 'react';
 import classNames from 'classnames';
 import omit from 'lodash/omit';
@@ -90,7 +92,6 @@ class Button extends React.Component<ButtonProps> {
         );
 
         let button = (
-            // eslint-disable-next-line react/button-has-type
             <button
                 ref={element => {
                     this.btnElement = element;