feat: #158 upgrade to React 18

Wip of #158

devtool/package.json

@@ -7,13 +7,13 @@
     "@morfeo/preset-default": "^0.5.1",
     "@morfeo/react": "^0.5.1",
     "@svgr/webpack": "5.5.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.0.1",
+    "@testing-library/user-event": "^14.1.0",
     "@types/jest": "^26.0.24",
     "@types/node": "^12.20.27",
-    "@types/react": "^17.0.27",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.0.3",
+    "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^4.5.0",
     "@typescript-eslint/parser": "^4.5.0",
     "babel-eslint": "^10.1.0",
@@ -68,7 +68,7 @@
     "style-loader": "1.3.0",
     "terser-webpack-plugin": "4.2.3",
     "ts-pnp": "1.2.0",
-    "typescript": "^4.4.3",
+    "typescript": "^4.6.3",
     "url-loader": "4.1.1",
     "web-vitals": "^1.1.2",
     "webextension-polyfill": "^0.8.0",
@@ -79,8 +79,8 @@
     "write-file-webpack-plugin": "4.5.1"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "scripts": {
     "start": "node scripts/start.js",

devtool/src/_shared/components/Accordion/index.tsx

@@ -1,16 +1,16 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { Color } from '@morfeo/react';
 import { Icon } from '../Icon';
 import styles from './style.module.css';
 import clsx from 'clsx';
 import { IconName } from '../Icon/icons';
 
-type Props = {
+type Props = PropsWithChildren<{
   label: string;
   icon?: IconName;
   open?: boolean;
   setOpen: (isOpen: boolean) => void;
-};
+}>;
 
 export const Accordion: React.FC<Props> = ({
   label,

devtool/src/_shared/components/Grid/Item/index.tsx

@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import styles from './style.module.css';
 
-export const Item: React.FC = ({ children }) => {
+type Props = PropsWithChildren<{}>;
+
+export const Item: React.FC<Props> = ({ children }) => {
   return <div className={styles.item}>{children}</div>;
 };

devtool/src/_shared/components/Grid/index.tsx

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import styles from './style.module.css';
 export { Item } from './Item';
 
-export const Grid: React.FC = ({ children }) => {
+type Props = PropsWithChildren<{}>;
+
+export const Grid: React.FC<Props> = ({ children }) => {
   return <div className={styles.section}>{children}</div>;
 };

devtool/src/_shared/components/Route/index.tsx

@@ -1,11 +1,11 @@
-import React, { CSSProperties, useCallback } from 'react';
+import React, { CSSProperties, PropsWithChildren, useCallback } from 'react';
 import { Transition, TransitionStatus } from 'react-transition-group';
 import { RouteName } from '../../contexts';
 import { useRouter } from '../../hooks';
 
-type Props = {
+type Props = PropsWithChildren<{
   name: RouteName;
-};
+}>;
 
 const defaultStyle = {
   width: '100%',
@@ -60,6 +60,11 @@ export const Route: React.FC<Props> = ({ name, children }) => {
   );
 
   return (
+    /**
+     * Exception needed because of a different version of @types/react inside react-transition-group package.
+     * It should be removed as soon as react-transition-group will be updated.
+     */
+    // @ts-expect-error
     <Transition
       appear
       unmountOnExit

devtool/src/_shared/components/Slices/Components/MorfeoComponent.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { component, Component, getStyles } from '@morfeo/react';
 import clsx from 'clsx';
 
@@ -19,11 +19,11 @@ const SELF_CLOSING_TAGS = [
   'wbr',
 ];
 
-type Props = {
+type Props = PropsWithChildren<{
   name: Component;
   variant?: string;
   applyDefaultStyle?: boolean;
-};
+}>;
 
 type TagName = keyof HTMLElementTagNameMap;
 

devtool/src/_shared/contexts/Routing/Routing.tsx

@@ -1,4 +1,9 @@
-import React, { createContext, useState, useMemo } from 'react';
+import React, {
+  useMemo,
+  useState,
+  createContext,
+  PropsWithChildren,
+} from 'react';
 import { RouteName, RoutingContextType, RouteType } from './types';
 import { routes } from './routes';
 
@@ -9,7 +14,9 @@ export const routingContext = createContext<RoutingContextType>({
 
 const { Provider } = routingContext;
 
-export const RoutingProvider: React.FC = ({ children }) => {
+type Props = PropsWithChildren<{}>;
+
+export const RoutingProvider: React.FC<Props> = ({ children }) => {
   const [current, setCurrent] = useState<RouteType>(routes.index);
   const [history, setHistory] = useState<RouteType[]>([]);
 

devtool/src/_shared/template/Layout.tsx

@@ -1,15 +1,16 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, PropsWithChildren } from 'react';
 import clsx from 'clsx';
 import { RoutingProvider } from '../contexts';
-import { SideBar } from './SideBar';
-import { Header } from './Header';
-
-import styles from './style.module.css';
+import { t } from '../utils';
 import { Icon } from '../components';
 import { useIsUsingMorfeo } from '../hooks';
-import { t } from '../utils';
+import { Header } from './Header';
+import { SideBar } from './SideBar';
+import styles from './style.module.css';
+
+type Props = PropsWithChildren<{}>;
 
-export const Layout: React.FC = ({ children }) => {
+export const Layout: React.FC<Props> = ({ children }) => {
   const [open, setOpen] = useState(false);
   const shouldRender = useIsUsingMorfeo();
 

devtool/src/_shared/template/Page/index.tsx

@@ -1,14 +1,15 @@
-import styles from './page.module.css';
 import clsx from 'clsx';
-import { noCase, capitalCase } from 'change-case'
+import { noCase, capitalCase } from 'change-case';
+import { PropsWithChildren } from 'react';
+import styles from './page.module.css';
 
-type Props = {
+type Props = PropsWithChildren<{
   breadcrumb?: string[];
   title?: string;
-};
+}>;
 
 function capitalize(string: string) {
-  return capitalCase(noCase(string))
+  return capitalCase(noCase(string));
 }
 
 export const Page: React.FC<Props> = ({ children, title, breadcrumb }) => {

devtool/src/_shared/template/SideBar/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, PropsWithChildren } from 'react';
 import { Color } from '@morfeo/react';
 import clsx from 'clsx';
 import browser from 'webextension-polyfill';
@@ -13,9 +13,9 @@ type Props = {
   setOpen: (open: boolean) => void;
 };
 
-type ExternalLinkProps = {
+type ExternalLinkProps = PropsWithChildren<{
   to: string;
-};
+}>;
 
 export const ExternalLink: React.FC<ExternalLinkProps> = ({ to, children }) => {
   const onClick = useCallback(() => {
@@ -75,10 +75,7 @@ export const SideBar: React.FC<Props> = ({ open, setOpen }) => {
           className={clsx('morfeo-button-side', styles.toggle)}
           onClick={toggle}
         >
-          <Icon
-            name="doubleChevron.right"
-            color={'invertedText' as Color}
-          />
+          <Icon name="doubleChevron.right" color={'invertedText' as Color} />
         </button>
       </div>
       <div className={styles.sidebarFooter}>

devtool/src/devtool/index.tsx

@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import browser from 'webextension-polyfill';
 import { resetCss, MorfeoProvider } from '@morfeo/react';
 import { getThemeFromAppAndInitMorfeo } from '../_shared/utils';
@@ -15,9 +15,13 @@ browser.devtools.panels.create(
   ASSETS_PATHS.devtool.view,
 );
 
-ReactDOM.render(
-  <MorfeoProvider>
-    <Devtool />
-  </MorfeoProvider>,
-  document.getElementById('devtool'),
-);
+const container = document.getElementById('devtool');
+
+if (container) {
+  const root = createRoot(container);
+  root.render(
+    <MorfeoProvider>
+      <Devtool />
+    </MorfeoProvider>,
+  );
+}

devtool/src/index.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
+import { createRoot } from 'react-dom/client';
 import Popup from './popup';
+import './index.css';
+
+const container = document.getElementById('root');
 
-ReactDOM.render(
-  <React.StrictMode>
-    <Popup />
-  </React.StrictMode>,
-  document.getElementById('root'),
-);
+if (container) {
+  const root = createRoot(container);
+  root.render(
+    <React.StrictMode>
+      <Popup />
+    </React.StrictMode>,
+  );
+}

devtool/src/options/index.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import Options from './Options';
 import '../_shared/css/index.css';
 
-ReactDOM.render(
-  <React.StrictMode>
-    <Options />
-  </React.StrictMode>,
-  document.getElementById('options'),
-);
+const container = document.getElementById('options');
+
+if (container) {
+  const root = createRoot(container);
+  root.render(
+    <React.StrictMode>
+      <Options />
+    </React.StrictMode>,
+  );
+}