feat(project): update project to use React 18

.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}'],