chore: Multi-react version tests setup

.github/workflows/build-lint-test.yml

@@ -20,15 +20,30 @@ permissions:
 
 jobs:
   build:
+    strategy:
+      matrix:
+        include:
+          - react: 16
+            label: build
+          - react: 18
+            label: build (React 18)
     uses: cloudscape-design/actions/.github/workflows/build-lint-test.yml@main
     secrets: inherit
     with:
       artifact-path: pages/lib/static-default
-      artifact-name: dev-pages
+      artifact-name: dev-pages-react${{ matrix.react }}
+      react-version: ${{ matrix.react }}   
   deploy:
     needs: build
+    strategy:
+      matrix:
+        include:
+          - react: 16
+            label: deploy
+          - react: 18
+            label: deploy (React 18)
     uses: cloudscape-design/actions/.github/workflows/deploy.yml@main
     secrets: inherit
     with:
-      artifact-name: dev-pages
+      artifact-name: dev-pages-react${{ matrix.react }}
       deployment-path: pages/lib/static-default

build-tools/tasks/integ.js

@@ -8,14 +8,14 @@ const { parseArgs } = require('node:util');
 
 module.exports = task('test:integ', async () => {
   const options = {
-    shard: {
-      type: 'string',
-    },
+    shard: { type: 'string' },
+    reactVersion: { type: 'string' },
   };
-  const shard = parseArgs({ options, strict: false }).values.shard;
+  const { shard, reactVersion = '16' } = parseArgs({ options, strict: false }).values;
   const devServer = execa('webpack', ['serve', '--config', 'pages/webpack.config.integ.cjs'], {
     env: {
       NODE_ENV: 'development',
+      REACT_VERSION: reactVersion,
     },
   });
   await waitOn({ resources: ['http://localhost:8080'] });

build-tools/tasks/motion.js

@@ -4,11 +4,17 @@ const execa = require('execa');
 const glob = require('glob');
 const waitOn = require('wait-on');
 const { task } = require('../utils/gulp-utils.js');
+const { parseArgs } = require('node:util');
 
 module.exports = task('test:motion', async () => {
+  const options = {
+    reactVersion: { type: 'string' },
+  };
+  const { reactVersion = '16' } = parseArgs({ options, strict: false }).values;
   const devServer = execa('webpack', ['serve', '--config', 'pages/webpack.config.integ.cjs'], {
     env: {
       NODE_ENV: 'development',
+      REACT_VERSION: reactVersion,
     },
   });
   await waitOn({ resources: ['http://localhost:8080'] });