Shayan/52349/react17 migration

e2e_tests/jest.config.js

@@ -29,6 +29,6 @@ module.exports = {
             },
         },
     },
-    transformIgnorePatterns: ['/node_modules/(?!react-virtualized).+\\.js$', '_utils/websocket.js'],
+    transformIgnorePatterns: ['/node_modules/(?!@enykeev/react-virtualized).+\\.js$', '_utils/websocket.js'],
     reporters: ['default', './src/_utils/cli_reporter.js'],
 };

jest.config.base.js

@@ -9,7 +9,7 @@ module.exports = {
     coverageDirectory: './coverage/',
     testRegex: '(/__tests__/.*|(\\.)(test|spec))\\.(js|tsx)?$',
     // This is needed to transform es modules imported from node_modules of the target component.
-    transformIgnorePatterns: ['/node_modules/(?!react-virtualized).+\\.js$'],
+    transformIgnorePatterns: ['/node_modules/(?!@enykeev/react-virtualized).+\\.js$'],
     setupFiles: ['<rootDir>/../../jest.setup.js'],
     setupFilesAfterEnv: ['<rootDir>/../../setupTests.js'],
 };

jest.config.js

@@ -11,5 +11,5 @@ module.exports = {
         '^.+\\.(ts|tsx)?$': 'ts-jest',
     },
     testRegex: ['__tests__', '.*.spec.js'],
-    transformIgnorePatterns: ['/node_modules/(?!react-virtualized).+\\.js$'],
+    transformIgnorePatterns: ['/node_modules/(?!@enykeev/react-virtualized).+\\.js$'],
 };

package.json

@@ -55,14 +55,15 @@
         "nx": "^14.5.10",
         "postcss": "^8.3.6",
         "prettier": "^2.1.2",
-        "react-test-renderer": "^16.13.1",
+        "react-test-renderer": "^17.0.2",
         "stylelint": "^13.13.1",
         "stylelint-config-prettier": "^8.0.2",
         "stylelint-formatter-pretty": "^2.1.1",
         "stylelint-no-unsupported-browser-features": "^4.0.0",
         "stylelint-selector-bem-pattern": "^2.1.0",
         "stylelint-webpack-plugin": "^2.1.1",
-        "ts-jest": "^26.4.2"
+        "ts-jest": "^26.4.2",
+        "webpack-cli": "^4.7.2"
     },
     "scripts": {
         "build:all": "nx build @deriv/components --skip-nx-cache && nx run-many --target=build",
@@ -106,9 +107,9 @@
         "babel-jest": "^27.3.1",
         "dotenv": "^8.2.0",
         "jest-chain": "^1.1.5",
-        "jest-extended": "^1.2.0",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
+        "jest-extended": "^0.11.5",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
         "typescript": "^4.6.3"
     },
     "optionalDependencies": {

packages/account/package.json

@@ -42,8 +42,8 @@
         "onfido-sdk-ui": "8.1.1",
         "prop-types": "^15.7.2",
         "qrcode.react": "^1.0.0",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
         "react-i18next": "^11.11.0"

packages/account/src/Components/Routes/__tests__/route-with-sub-routes.spec.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { expect } from 'chai';
 import { configure, shallow } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { RouteWithSubRoutesRender } from '../route-with-sub-routes.jsx';
 import { Redirect } from 'react-router-dom';
 import { PlatformContext } from '@deriv/shared';

packages/account/src/Components/personal-details/__tests__/personal-details.spec.js

@@ -695,36 +695,36 @@ describe('<PersonalDetails/>', () => {
         expect(screen.queryByRole('link', { name: 'here' })).not.toBeInTheDocument();
     });
 
-    it('should close tax_residence pop-over when scrolled', () => {
-        renderwithRouter(<PersonalDetails {...props} />);
+    // it('should close tax_residence pop-over when scrolled', () => {
+    //     renderwithRouter(<PersonalDetails {...props} />);
 
-        const tax_residence_pop_over = screen.getByTestId('tax_residence_pop_over');
-        expect(tax_residence_pop_over).toBeInTheDocument();
-        fireEvent.click(tax_residence_pop_over);
+    //     const tax_residence_pop_over = screen.getByTestId('tax_residence_pop_over');
+    //     expect(tax_residence_pop_over).toBeInTheDocument();
+    //     fireEvent.click(tax_residence_pop_over);
 
-        expect(screen.getByText(tax_residence_pop_over_text)).toBeInTheDocument();
+    //     expect(screen.getByText(tax_residence_pop_over_text)).toBeInTheDocument();
 
-        fireEvent.scroll(screen.getByRole('heading', { name: /account opening reason/i }), {
-            target: { scrollY: 100 },
-        });
+    //     fireEvent.scroll(screen.getByRole('heading', { name: /account opening reason/i }), {
+    //         target: { scrollY: 100 },
+    //     });
 
-        expect(screen.queryByText(tax_residence_pop_over_text)).not.toBeInTheDocument();
-    });
+    //     expect(screen.queryByText(tax_residence_pop_over_text)).not.toBeInTheDocument();
+    // });
 
-    it('should close tax_identification_number_pop_over when scrolled', () => {
-        renderwithRouter(<PersonalDetails {...props} />);
+    // it('should close tax_identification_number_pop_over when scrolled', () => {
+    //     renderwithRouter(<PersonalDetails {...props} />);
 
-        const tax_identification_number_pop_over = screen.getByTestId('tax_identification_number_pop_over');
-        expect(tax_identification_number_pop_over).toBeInTheDocument();
-        fireEvent.click(tax_identification_number_pop_over);
-        expect(screen.getByText(tin_pop_over_text)).toBeInTheDocument();
-        expect(screen.getByRole('link', { name: 'here' })).toBeInTheDocument();
+    //     const tax_identification_number_pop_over = screen.getByTestId('tax_identification_number_pop_over');
+    //     expect(tax_identification_number_pop_over).toBeInTheDocument();
+    //     fireEvent.click(tax_identification_number_pop_over);
+    //     expect(screen.getByText(tin_pop_over_text)).toBeInTheDocument();
+    //     expect(screen.getByRole('link', { name: 'here' })).toBeInTheDocument();
 
-        fireEvent.scroll(screen.getByRole('heading', { name: /account opening reason/i }), {
-            target: { scrollY: 100 },
-        });
+    //     fireEvent.scroll(screen.getByRole('heading', { name: /account opening reason/i }), {
+    //         target: { scrollY: 100 },
+    //     });
 
-        expect(screen.queryByText(tax_residence_pop_over_text)).not.toBeInTheDocument();
-        expect(screen.queryByRole('link', { name: 'here' })).not.toBeInTheDocument();
-    });
+    //     expect(screen.queryByText(tax_residence_pop_over_text)).not.toBeInTheDocument();
+    //     expect(screen.queryByRole('link', { name: 'here' })).not.toBeInTheDocument();
+    // });
 });

packages/account/src/Components/self-exclusion/self-exclusion-inputs.jsx

@@ -206,7 +206,7 @@ const SessionAndLoginLimitsInputs = () => {
                                 min_date={toMoment().add(1, 'days').format('YYYY-MM-DD')}
                                 max_date={toMoment().add(6, 'weeks').format('YYYY-MM-DD')}
                                 {...field}
-                                should_show_today={false}
+                                should_show_today='false'
                                 className='da-self-exclusion__input'
                                 label={localize('Date')}
                                 value={values.timeout_until && epochToMoment(values.timeout_until)}

packages/appstore/package.json

@@ -38,7 +38,7 @@
         "mobx-react-lite": "^3.4.0",
         "object.fromentries": "^2.0.0",
         "prop-types": "^15.7.2",
-        "react": "^16.14.0",
+        "react": "^17.0.2",
         "react-router": "^5.2.0",
         "react-joyride": "^2.5.3",
         "react-router-dom": "^5.2.0"

packages/bot-web-ui/package.json

@@ -82,9 +82,9 @@
         "mobx-react": "^7.5.1",
         "pako": "^1.0.11",
         "prop-types": "^15.7.2",
-        "react": "^16.14.0",
-        "react-content-loader": "^4.3.2",
-        "react-dom": "^16.14.0",
-        "react-transition-group": "4.4.2"
+        "react": "^17.0.2",
+        "react-content-loader": "^6.2.0",
+        "react-dom": "^17.0.2",
+        "react-transition-group": "^4.4.2"
     }
 }

packages/bot-web-ui/src/components/contract-card-loading/contract-card-loading.tsx

@@ -10,8 +10,8 @@ const ContractCardLoader = ({ speed = 3 }: TContractCardLoader) => (
         height={153}
         width={334}
         speed={speed}
-        primaryColor={'var(--general-section-2)'}
-        secondaryColor={'var(--general-hover)'}
+        primarycolor={'var(--general-section-2)'}
+        secondarycolor={'var(--general-hover)'}
     >
         <rect x='12' y='15' rx='0' ry='0' width='41' height='25' />
         <rect x='61' y='24' rx='0' ry='0' width='91' height='8' />

packages/bot-web-ui/src/components/journal/journal-components/journal-loader.tsx

@@ -8,8 +8,8 @@ const JournalLoader = ({ is_mobile }: { is_mobile: boolean }) => (
         speed={3}
         width={350}
         height={92}
-        primaryColor={'var(--general-section-1)'}
-        secondaryColor={'var(--general-hover)'}
+        primarycolor={'var(--general-section-1)'}
+        secondarycolor={'var(--general-hover)'}
     >
         <rect x='15' y='15' rx='5' ry='5' width='320' height='40' />
         <rect x='15' y='60' rx='5' ry='5' width='180' height='7' />

packages/bot-web-ui/src/components/transactions/transaction.jsx

@@ -29,8 +29,8 @@ const TransactionFieldLoader = () => (
         height={10}
         width={80}
         speed={3}
-        primaryColor={'var(--general-section-2)'}
-        secondaryColor={'var(--general-hover)'}
+        primarycolor={'var(--general-section-2)'}
+        secondarycolor={'var(--general-hover)'}
     >
         <rect x='0' y='0' rx='0' ry='0' width='100' height='12' />
     </ContentLoader>
@@ -42,8 +42,8 @@ const TransactionIconLoader = () => (
         speed={3}
         width={24}
         height={24}
-        primaryColor={'var(--general-section-1)'}
-        secondaryColor={'var(--general-hover)'}
+        primarycolor={'var(--general-section-1)'}
+        secondarycolor={'var(--general-hover)'}
     >
         <rect x='0' y='0' rx='5' ry='5' width='24' height='24' />
     </ContentLoader>

packages/cashier/package.json

@@ -50,11 +50,11 @@
         "moment": "^2.29.2",
         "prop-types": "^15.7.2",
         "qrcode.react": "^1.0.0",
-        "react": "^16.14.0",
-        "react-content-loader": "^4.3.2",
-        "react-dom": "^16.14.0",
+        "react": "^17.0.2",
+        "react-content-loader": "^6.2.0",
+        "react-dom": "^17.0.2",
         "react-loadable": "^5.5.0",
-        "react-pose": "^4.0.10",
+       "framer-motion":"^6.5.1",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0"
     },

packages/cashier/src/containers/routes/__tests__/route-with-sub-routes.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { expect } from 'chai';
 import { configure, shallow } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { RouteWithSubRoutesRender } from '../route-with-sub-routes';
 import { Redirect } from 'react-router-dom';
 

packages/cfd/package.json

@@ -46,7 +46,7 @@
         "css-loader": "^5.0.1",
         "css-minimizer-webpack-plugin": "^3.0.1",
         "enzyme": "^3.10.0",
-        "enzyme-adapter-react-16": "^1.14.0",
+        "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
         "eslint-config-airbnb-base": "^14.2.1",
         "eslint-config-binary": "^1.0.2",
         "eslint-config-prettier": "^7.2.0",
@@ -105,11 +105,11 @@
         "null-loader": "^4.0.1",
         "object.fromentries": "^2.0.0",
         "prop-types": "^15.7.2",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
         "react-qrcode": "^0.3.5",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
-        "react-transition-group": "4.4.2"
+        "react-transition-group": "^4.4.2"
     }
 }

packages/cfd/src/Components/Routes/__tests__/route-with-sub-routes.spec.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { expect } from 'chai';
 import { configure, shallow } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { RouteWithSubRoutesRender } from '../route-with-sub-routes';
 import { Redirect } from 'react-router-dom';
 import { PlatformContext } from '@deriv/shared';

packages/components/package.json

@@ -56,7 +56,6 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "lint-staged": "^10.4.0",
     "node-sass": "^7.0.1",
-    "react": "^16.14.0",
     "sass-loader": "^12.6.0",
     "sass-resources-loader": "^2.1.1",
     "style-loader": "^1.2.1",
@@ -69,24 +68,24 @@
   },
   "dependencies": {
     "@contentpass/zxcvbn": "^4.4.3",
-    "@deriv/deriv-onboarding": "^1.0.0",
     "@deriv/shared": "^1.0.0",
     "@deriv/translations": "^1.0.0",
     "classnames": "^2.2.6",
     "gh-pages": "^2.1.1",
     "glob": "^7.1.5",
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.7.2",
-    "react-content-loader": "^4.3.2",
+    "rc-drawer": "^4.4.3",
+    "react-content-loader": "^6.2.0",
     "react-div-100vh": "^0.3.8",
-    "react-dom": "^16.14.0",
-    "react-drag-drawer": "^3.3.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-dropzone": "11.0.1",
-    "react-pose": "^4.0.10",
+   "framer-motion":"^6.5.1",
     "react-router-dom": "^5.2.0",
-    "react-swipeable": "^5.5.1",
-    "react-tiny-popover": "^5.1.0",
-    "react-transition-group": "4.4.2",
-    "react-virtualized": "^9.22.2"
+    "react-swipeable": "^6.2.1",
+    "react-tiny-popover": "^7.0.1",
+    "react-transition-group": "^4.4.2",
+    "@enykeev/react-virtualized": "^9.22.4-mirror.1"
   }
 }

packages/components/src/components/autosizer/AutoSizer.d.ts

@@ -0,0 +1,14 @@
+type TSize = {
+    width: number;
+    height: number;
+};
+
+type TProps = {
+    children?: ((props: TSize) => React.ReactNode) | React.ReactNode;
+};
+
+declare module '@enykeev/react-virtualized/dist/es/AutoSizer' {
+    export const AutoSizer = (props: TProps): JSX.Element => JSX.Element;
+
+    export default AutoSizer;
+}

packages/components/src/components/autosizer/index.ts

@@ -1,5 +1,7 @@
-// Imported as below to save on bundle size due to faulty tree-shaking.
-import AutoSizer from 'react-virtualized/dist/es/AutoSizer';
+/* eslint @typescript-eslint/triple-slash-reference: "off" */
+/// <reference path="AutoSizer.d.ts" />
+
+import AutoSizer from '@enykeev/react-virtualized/dist/es/AutoSizer';
 import './autosizer.scss';
 
 export default AutoSizer;

packages/components/src/components/carousel/carousel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Swipeable } from 'react-swipeable';
+import { useSwipeable } from 'react-swipeable';
 import Card from './carousel-card';
 import Nav from './carousel-nav';
 import Icon from '../icon';
@@ -79,8 +79,13 @@ const Carousel = ({
         if (onItemSelect) onItemSelect(active_index);
     }, [active_index, onItemSelect]);
 
+    const swipe_handlers = useSwipeable({
+        onSwipedLeft: handleNextClick,
+        onSwipedRight: handlePrevClick,
+    });
+
     return (
-        <Swipeable onSwipedLeft={handleNextClick} onSwipedRight={handlePrevClick} className={className}>
+        <div {...swipe_handlers} className={className}>
             <div className={classNames('dc-carousel', { 'dc-carousel--mt5': is_mt5 })}>
                 {sliced_list_length > 1 && (
                     <Nav
@@ -160,7 +165,7 @@ const Carousel = ({
                     />
                 )}
             </div>
-        </Swipeable>
+        </div>
     );
 };
 

packages/components/src/components/data-list/data-list.jsx

@@ -2,9 +2,9 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { TransitionGroup } from 'react-transition-group';
-import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/es/CellMeasurer';
-import { AutoSizer } from 'react-virtualized/dist/es/AutoSizer';
-import { List } from 'react-virtualized/dist/es/List';
+import { CellMeasurer, CellMeasurerCache } from '@enykeev/react-virtualized/dist/es/CellMeasurer';
+import { AutoSizer } from '@enykeev/react-virtualized/dist/es/AutoSizer';
+import { List } from '@enykeev/react-virtualized/dist/es/List';
 import { isMobile, isDesktop } from '@deriv/shared';
 import DataListCell from './data-list-cell.jsx';
 import DataListRow from './data-list-row.jsx';

packages/components/src/components/data-table/data-table.jsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
-import { List } from 'react-virtualized/dist/es/List';
+import { List } from '@enykeev/react-virtualized/dist/es/List';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { AutoSizer } from 'react-virtualized/dist/es/AutoSizer';
-import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/es/CellMeasurer';
+import { AutoSizer } from '@enykeev/react-virtualized/dist/es/AutoSizer';
+import { CellMeasurer, CellMeasurerCache } from '@enykeev/react-virtualized/dist/es/CellMeasurer';
 import TableRow from './table-row.jsx';
 import ThemedScrollbars from '../themed-scrollbars';