feat(project): update project to use React 18 (#2661)

* chore(project): add script to set react version

* chore: add ci check for test and type-check

* chore: update workflow syntax

* chore: update install step

* chore: add fail-fast option

* chore: add types packages to set-react-version

* refactor(project): update TypeScript definitions for React 18

* chore: update slots types

* chore: add ts-ignore for package that needs to be updated for react 18

* chore: add changeset

* chore: update ActionMenu story to use React.createElement

* chore: update unused import

* test(ThemeProvider): update test to use userEvents

* test(helpers): add TextEncoder for useMedia

* test(MarkdownEditor): update tests for MarkdownEditor

* test: update TextInputWithTokens test

* test(MarkdownEditor): enable skipped tests

* chore: add spy for console.error() in test

* chore: add globals for react version

* chore: remove storybook-addon-html

* chore: update storybook deps

* chore: remove conditional install step from ci.yml

* Revert "chore: remove conditional install step from ci.yml"

This reverts commit c5778d8.

* feat(project): update to React 18 for development

* ci: update install step to use 18 by default

* chore: update lockfile

* chore: update eslint to warn on useSSRSafeId

* feat(project): add useId hook

* feat(project): update useSSRSafeId to useId

* chore: disable eslint violations

* test: map useId() to useSSRSafeId() in test

* test(storybook): update interaction tests for UnderlineNav

* chore: add changeset

* fix(PageHeader): add PropsWithChildren to ParentLinkProps

* chore: update workflow file

* chore(eslint): remove inferred type annotation

Co-authored-by: Josh Black <[email protected]>

Author: joshblack

.changeset/eight-peas-tan.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Update to React.useId() when using React 18

.changeset/strong-dolls-divide.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Update types for components to work for React 17 and 18

.eslintrc.json

@@ -104,6 +104,19 @@
           {
             "ts-ignore": "allow-with-description"
           }
+        ],
+        "no-restricted-imports": [
+          "error",
+          {
+            "paths": [
+              {
+                "name": "@react-aria/ssr",
+                "importNames": ["useSSRSafeId"],
+                "message": "Please use the `useId` hook from `src/hooks/useId.ts` instead"
+              }
+            ],
+            "patterns": []
+          }
         ]
       }
     },

.github/workflows/ci.yml

@@ -28,6 +28,10 @@ jobs:
         run: npm run lint
 
   test:
+    strategy:
+      fail-fast: false
+      matrix:
+        react: [17, 18]
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -38,16 +42,30 @@ jobs:
         with:
           node-version: 16
 
+      - name: Set React version
+        run: node script/set-react-version.js ${{ matrix.react }}
+
+      - name: Install dependencies
+        if: ${{ matrix.react == 17 }}
+        run: npm install --legacy-peer-deps
+
       - name: Install dependencies
+        if: ${{ matrix.react == 18 }}
         run: npm ci
 
       - name: Build
         run: npm run build
 
       - name: Test
         run: npm run test -- --coverage
+        env:
+          REACT_VERSION_17: ${{ matrix.react == 17 }}
 
   type-check:
+    strategy:
+      fail-fast: false
+      matrix:
+        react: [17, 18]
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -58,7 +76,15 @@ jobs:
         with:
           node-version: 16
 
+      - name: Set React version
+        run: node script/set-react-version.js ${{ matrix.react }}
+
+      - name: Install dependencies
+        if: ${{ matrix.react == 17 }}
+        run: npm install --legacy-peer-deps
+
       - name: Install dependencies
+        if: ${{ matrix.react != 17 }}
         run: npm ci
 
       - name: Type check

.storybook/main.js

@@ -12,29 +12,26 @@ module.exports = {
     {
       name: 'storybook-addon-turbo-build',
       options: {
-        optimizationLevel: 2
-      }
+        optimizationLevel: 2,
+      },
     },
-    ...(process.env.NODE_ENV === 'production' && process.env.GITHUB_JOB !== 'chromatic'
-      ? ['@whitespace/storybook-addon-html']
-      : [])
   ],
   core: {
     builder: {
       name: 'webpack5',
       options: {
-        fsCache: true
-      }
-    }
+        fsCache: true,
+      },
+    },
   },
   features: {
     interactionsDebugger: true,
     storyStoreV7: true,
-    buildStoriesJson: true
+    buildStoriesJson: true,
   },
   framework: '@storybook/react',
   reactOptions: {
     fastRefresh: true,
-    strictMode: true
-  }
+    strictMode: true,
+  },
 }

jest.config.js

@@ -1,5 +1,17 @@
 /* eslint-disable github/unescaped-html-literal */
+
+'use strict'
+
+const {REACT_VERSION_17} = process.env
+
+/**
+ * @type {import('jest').Config}
+ */
 module.exports = {
+  globals: {
+    REACT_VERSION_LATEST: REACT_VERSION_17 ? REACT_VERSION_17 !== 'true' : true,
+    REACT_VERSION_17: REACT_VERSION_17 === 'true',
+  },
   testEnvironment: 'jsdom',
   cacheDirectory: '.test',
   collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/stories/**', '!**/*.stories.{js,jsx,ts,tsx}'],