feat(project): update project to use React 18

.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,7 +42,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 == 18 }}
+        run: npm install --legacy-peer-deps
+
       - name: Install dependencies
+        if: ${{ matrix.react == 17 }}
         run: npm ci
 
       - name: Build
@@ -48,6 +60,10 @@ jobs:
         run: npm run test -- --coverage
 
   type-check:
+    strategy:
+      fail-fast: false
+      matrix:
+        react: [17, 18]
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -58,7 +74,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 == 18 }}
+        run: npm install --legacy-peer-deps
+
       - name: Install dependencies
+        if: ${{ matrix.react != 18 }}
         run: npm ci
 
       - name: Type check

script/set-react-version.js

@@ -0,0 +1,88 @@
+'use strict'
+
+const fs = require('node:fs/promises')
+const os = require('node:os')
+const path = require('node:path')
+
+const versions = new Map([
+  [
+    '17',
+    {
+      devDependencies: [
+        {
+          name: 'react',
+          version: '17.0.2',
+        },
+        {
+          name: 'react-dom',
+          version: '17.0.2',
+        },
+        {
+          name: 'react-test-renderer',
+          version: '17.0.2',
+        },
+        {
+          name: '@testing-library/react',
+          version: '12.1.5',
+        },
+      ],
+    },
+  ],
+  [
+    '18',
+    {
+      devDependencies: [
+        {
+          name: '@types/react',
+          version: '18.0.26',
+        },
+        {
+          name: '@types/react-dom',
+          version: '18.0.9',
+        },
+        {
+          name: 'react',
+          version: '18.2.0',
+        },
+        {
+          name: 'react-dom',
+          version: '18.2.0',
+        },
+        {
+          name: 'react-test-renderer',
+          version: '18.2.0',
+        },
+        {
+          name: '@testing-library/react',
+          version: '13.4.0',
+        },
+      ],
+    },
+  ],
+])
+
+async function main(version = 17) {
+  if (!versions.has(version)) {
+    throw new Error(`No React version defined for input: ${version}`)
+  }
+
+  const {devDependencies} = versions.get(version)
+  const packageJsonPath = path.resolve(__dirname, '..', 'package.json')
+  const packageJson = JSON.parse(await fs.readFile(packageJsonPath, 'utf8'))
+
+  for (const dependency of devDependencies) {
+    packageJson.devDependencies[dependency.name] = dependency.version
+  }
+
+  const contents = `${JSON.stringify(packageJson, null, 2)}${os.EOL}`
+  await fs.writeFile(packageJsonPath, contents)
+}
+
+const [version] = process.argv.slice(2)
+
+// eslint-disable-next-line github/no-then
+main(version).catch(error => {
+  // eslint-disable-next-line no-console
+  console.log(error)
+  process.exit(1)
+})