feat: add support for React v18 (#2481)

![image](https://github.com/dnbexperience/eufemia/assets/1359205/64113a11-6e6b-4296-8c53-a63fc0fdc11e) Tasks left: - [x] Search for `React v18` in our code, it exists a few comments about what to do when we get v18, and do what's needed. - [x] Evaluate or Fix Minified React errors ([JIRA](https://jira.tech.dnb.no/browse/EDS-476)) #2481 (comment) - [x] Fix linting run in CI #2481 (comment) - [x] Fix remaining TS errors in our stories. - [x] Fix screenshot tests, it seems like screenshot tests are more unstable(?), now that we are using React v18. - [x] Look into supporting React v17 as well, this is related to the "v18 changes" done in [TooltipPortal](https://github.com/dnbexperience/eufemia/blob/1e8021ccea7b03f9a60c78cc6760388ac36b55b1/packages/dnb-eufemia/src/components/tooltip/TooltipPortal.tsx#L8) which uses `react-dom/client` - @tujoworker 👀 #2511 --------- Co-authored-by: Joakim Bjerknes <[email protected]> Co-authored-by: Tobias Høegh <[email protected]>
dnbexperience · Jul 5, 2023 · 31a2d2b · 31a2d2b · vercel · Jul 5, 2023
1 parent 5d2011e
commit 31a2d2b
Show file tree

Hide file tree

Showing 39 changed files with 1,730 additions and 1,527 deletions.
diff --git a/packages/dnb-design-system-portal/gatsby-browser.tsx b/packages/dnb-design-system-portal/gatsby-browser.tsx
@@ -5,6 +5,7 @@
 
 import { applyPageFocus } from '@dnb/eufemia/src/shared/helpers'
 import { rootElement, pageElement } from './src/core/PortalProviders'
+import ReactDOM from 'react-dom/client'
 
 if (typeof window !== 'undefined') {
   setIsTest(window.location)
@@ -17,6 +18,15 @@ function setIsTest(location) {
   }
 }
 
+export const replaceHydrateFunction = () => {
+  // Added to solve the following errors, which prevented us from running screenshot tests
+  // https://github.com/gatsbyjs/gatsby/discussions/36232
+  return (element: React.ReactElement, container: HTMLElement) => {
+    const root = ReactDOM.createRoot(container)
+    root.render(element)
+  }
+}
+
 export const wrapRootElement = rootElement('browser')
 export const wrapPageElement = pageElement()
 

diff --git a/packages/dnb-design-system-portal/package.json b/packages/dnb-design-system-portal/package.json
@@ -45,15 +45,17 @@
     "algoliasearch": "4.12.0",
     "classnames": "2.3.1",
     "history": "5.1.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-live-ssr": "workspace:*"
   },
   "devDependencies": {
     "@babel/core": "7.22.5",
     "@babel/eslint-parser": "7.22.5",
     "@babel/node": "7.22.5",
     "@emotion/cache": "11.11.0",
+    "@types/react": "18.2.13",
+    "@types/react-dom": "18.2.6",
     "@typescript-eslint/parser": "5.60.0",
     "babel-jest": "29.5.0",
     "camelcase": "6.2.0",
@@ -70,25 +72,25 @@
     "eslint-plugin-workspaces": "0.8.0",
     "front-matter": "4.0.2",
     "fs-extra": "10.0.0",
-    "gatsby": "4.25.6",
-    "gatsby-plugin-algolia": "0.26.0",
+    "gatsby": "5.11.0",
+    "gatsby-plugin-algolia": "1.0.3",
     "gatsby-plugin-babel-react-live": "1.4.2",
-    "gatsby-plugin-catch-links": "4.25.0",
-    "gatsby-plugin-emotion": "8.9.0",
+    "gatsby-plugin-catch-links": "5.11.0",
+    "gatsby-plugin-emotion": "8.11.0",
     "gatsby-plugin-eufemia-theme-handler": "workspace:*",
-    "gatsby-plugin-gatsby-cloud": "4.25.0",
-    "gatsby-plugin-manifest": "4.25.0",
-    "gatsby-plugin-mdx": "4.4.0",
+    "gatsby-plugin-gatsby-cloud": "5.11.0",
+    "gatsby-plugin-manifest": "5.11.0",
+    "gatsby-plugin-mdx": "5.11.0",
     "gatsby-plugin-meta-redirect": "1.1.1",
-    "gatsby-plugin-offline": "5.25.0",
-    "gatsby-plugin-page-creator": "4.25.0",
+    "gatsby-plugin-offline": "6.11.0",
+    "gatsby-plugin-page-creator": "5.11.0",
     "gatsby-plugin-remove-serviceworker": "1.0.0",
-    "gatsby-plugin-sass": "5.25.0",
+    "gatsby-plugin-sass": "6.11.0",
     "gatsby-plugin-scroll-position": "1.2.1",
-    "gatsby-plugin-sharp": "4.25.1",
-    "gatsby-react-router-scroll": "5.25.0",
-    "gatsby-remark-images": "6.25.0",
-    "gatsby-source-filesystem": "4.25.0",
+    "gatsby-plugin-sharp": "5.11.0",
+    "gatsby-react-router-scroll": "6.11.0",
+    "gatsby-remark-images": "7.11.0",
+    "gatsby-source-filesystem": "5.11.0",
     "github-slugger": "1.4.0",
     "is-absolute-url": "4.0.1",
     "jest": "29.3.1",

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/helpers/classes/visual-tests.js b/packages/dnb-design-system-portal/src/docs/uilib/helpers/classes/visual-tests.js
@@ -12,7 +12,7 @@ export default function VisualTests() {
   // Selects/marks some of the text in SelectionExample on second render tick
   // For comparing screenshots
   React.useEffect(() => {
-    window.requestAnimationFrame(() => {
+    setTimeout(() => {
       try {
         const range = new Range()
         const textNode = document.querySelector(
@@ -26,7 +26,7 @@ export default function VisualTests() {
       } catch (e) {
         warn(e)
       }
-    })
+    }, 10)
   }, [])
 
   return (

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/bundles.mdx b/packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/bundles.mdx
@@ -46,8 +46,8 @@ Requires React and ReactDOM to be loaded. Supports `ES5`.
         console.log('on_click', params)
       },
     })
-
-    ReactDOM.render(MyButton, document.getElementById('app'))
+    const root = createRoot(document.getElementById('app'))
+    root.render(MyButton)
   </script>
 </body>
 ```
@@ -102,7 +102,8 @@ Because `importmap` is still not supported by the majority of browsers, we use a
       }
     )
 
-    ReactDOM.render(MyButton, document.getElementById('app'))
+    const root = createRoot(document.getElementById('app'))
+    root.render(MyButton)
   </script>
 </body>
 ```

diff --git a/packages/dnb-design-system-portal/src/shared/parts/ListComponents.tsx b/packages/dnb-design-system-portal/src/shared/parts/ListComponents.tsx
@@ -16,7 +16,10 @@ export default function ListComponents() {
             }
           }
         }
-        sort: { fields: [frontmatter___order, frontmatter___title] }
+        sort: [
+          { frontmatter: { order: ASC } }
+          { frontmatter: { title: ASC } }
+        ]
       ) {
         edges {
           node {

diff --git a/packages/dnb-design-system-portal/src/shared/parts/ListElements.tsx b/packages/dnb-design-system-portal/src/shared/parts/ListElements.tsx
@@ -12,7 +12,10 @@ export default function ListElements() {
           frontmatter: { title: { ne: "" }, draft: { ne: true } }
           internal: { contentFilePath: { glob: "**/uilib/elements/*" } }
         }
-        sort: { fields: [frontmatter___order, frontmatter___title] }
+        sort: [
+          { frontmatter: { order: ASC } }
+          { frontmatter: { title: ASC } }
+        ]
       ) {
         edges {
           node {

diff --git a/packages/dnb-design-system-portal/src/shared/parts/ListFragments.tsx b/packages/dnb-design-system-portal/src/shared/parts/ListFragments.tsx
@@ -14,7 +14,10 @@ export default function ListFragments() {
             contentFilePath: { glob: "**/uilib/components/fragments/*" }
           }
         }
-        sort: { fields: [frontmatter___order, frontmatter___title] }
+        sort: [
+          { frontmatter: { order: ASC } }
+          { frontmatter: { title: ASC } }
+        ]
       ) {
         edges {
           node {

diff --git a/packages/dnb-eufemia/package.json b/packages/dnb-eufemia/package.json
@@ -111,8 +111,8 @@
     "what-input": "5.2.10"
   },
   "peerDependencies": {
-    "react": "^17",
-    "react-dom": "^17"
+    "react": "^17 || ^18",
+    "react-dom": "^17 || ^18"
   },
   "devDependencies": {
     "@babel/cli": "7.22.5",
@@ -154,10 +154,9 @@
     "@svgr/core": "6.5.1",
     "@svgr/plugin-jsx": "6.5.1",
     "@svgr/plugin-svgo": "6.5.1",
-    "@testing-library/dom": "8.11.0",
-    "@testing-library/react": "12.1.2",
-    "@testing-library/react-hooks": "7.0.2",
-    "@testing-library/user-event": "13.5.0",
+    "@testing-library/dom": "9.3.1",
+    "@testing-library/react": "14.0.0",
+    "@testing-library/user-event": "14.4.3",
     "@types/fs-extra": "11.0.1",
     "@types/jest": "29.2.6",
     "@types/jest-axe": "3.5.5",
@@ -227,8 +226,8 @@
     "prettier-package-json": "2.6.0",
     "process": "0.11.10",
     "prop-types": "15.7.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-to-typescript-definitions": "3.1.1",
     "regenerator-runtime": "0.13.9",
     "repo-utils": "workspace:*",

diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.screenshot.test.ts b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.screenshot.test.ts
@@ -12,6 +12,10 @@ describe('Autocomplete', () => {
   setupPageScreenshot({
     each: true,
     url: '/uilib/components/autocomplete/demos',
+    pageViewport: {
+      width: 1280,
+      height: 1024, // The height influences this test: data-visual-test="autocomplete-drawer-search"
+    },
   })
 
   it('have to match different sizes', async () => {

diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.tsx b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.tsx
@@ -2121,44 +2121,27 @@ describe('Autocomplete component', () => {
       'one more item',
     ]
 
-    render(<Autocomplete data={mockData} {...mockProps} />)
-
-    // open
-    keydown(40) // down
+    render(<Autocomplete {...mockProps} data={mockData} />)
 
-    document.querySelector('input').focus()
+    fireEvent.focus(document.querySelector('input'))
 
     // focus the first item
     keydown(40) // down
 
     // focus the second item
     keydown(40) // down
 
-    const runTabs = () => {
-      userEvent.tab()
-
-      expect(Array.from(document.activeElement.classList)).toContain(
-        'first-anchor'
-      )
-
-      userEvent.tab()
+    await userEvent.tab()
 
-      expect(Array.from(document.activeElement.classList)).toContain(
-        'second-anchor'
-      )
-
-      userEvent.tab()
-
-      expect(Array.from(document.activeElement.classList)).toContain(
-        'dnb-input__input'
-      )
-    }
+    expect(Array.from(document.activeElement.classList)).toContain(
+      'first-anchor'
+    )
 
-    // run first round
-    runTabs()
+    await userEvent.tab()
 
-    // run second round
-    runTabs()
+    expect(Array.from(document.activeElement.classList)).toContain(
+      'second-anchor'
+    )
   })
 
   it('will keep focus on input when opening', () => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,7 +16,10 @@ export default function ListComponents() { @@
                 }
               }
             }
-            sort: { fields: [frontmatter___order, frontmatter___title] }
+            sort: [
+              { frontmatter: { order: ASC } }
+              { frontmatter: { title: ASC } }
+            ]
           ) {
             edges {
               node {
@@ Expand Down @@