just react 19 test

.eslintrc.js

@@ -49,6 +49,11 @@ module.exports = {
         '@typescript-eslint/no-unsafe-return': 'off',
         '@typescript-eslint/restrict-plus-operands': 'off',
         '@typescript-eslint/restrict-template-expressions': 'off',
+        // v7 recommended rules we keep off for now
+        '@typescript-eslint/no-unsafe-enum-comparison': 'off',
+        '@typescript-eslint/no-duplicate-type-constituents': 'off',
+        '@typescript-eslint/no-base-to-string': 'off',
+        '@typescript-eslint/no-redundant-type-constituents': 'off',
         'import/no-cycle': 'off',
         'react/no-unknown-property': [
           'error',
@@ -81,5 +86,27 @@ module.exports = {
         'gamut/no-kbd-element': 'error',
       },
     },
+    {
+      files: ['script/**/*.js'],
+      env: { node: true, es2020: true },
+      rules: {
+        'no-console': 'off',
+        'no-plusplus': 'off',
+      },
+    },
+    {
+      files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
+      rules: {
+        'no-restricted-syntax': [
+          'error',
+          {
+            selector:
+              "MemberExpression[object.type='Identifier'][object.name='JSX']",
+            message:
+              'Use React.JSX.* instead of global JSX namespace for React 19 compatibility.',
+          },
+        ],
+      },
+    },
   ],
 };

.github/workflows/test.yml

@@ -74,3 +74,54 @@ jobs:
           fail_ci_if_error: false
           directory: ./coverage
           report_type: test_results
+
+  test-react-18:
+    name: Test suite (React 18)
+    runs-on: ubuntu-24.04
+    timeout-minutes: 30
+    env:
+      # Allow lockfile update after resolution change (hardened mode forbids it on public PRs)
+      YARN_ENABLE_IMMUTABLE_INSTALLS: false
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          fetch-depth: 0
+      - name: Fetch main branch
+        run: git fetch origin main:main
+        if: github.event_name == 'pull_request'
+      - name: Setup Node.js
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        with:
+          node-version-file: .nvmrc
+      - name: Enable Corepack and prepare Yarn 4
+        run: corepack enable
+        shell: bash
+      - name: Set React 18 resolutions
+        run: node script/set-react-resolutions.js 18
+      - name: Install dependencies
+        run: yarn install
+        shell: bash
+      - name: Patch React 18 ref types
+        run: node script/patch-react-18-ref-types.js
+        shell: bash
+      - name: Build all packages
+        run: yarn build
+        shell: bash
+      - name: Typecheck Gamut (React 18)
+        run: yarn nx run gamut:verify
+        shell: bash
+      - name: Run test suite
+        run: |
+          if [ "${{ github.ref_name }}" == "main" ]; then
+            npx nx run-many --target=test --all --parallel=4 --ci --coverage --runInBand --skip-nx-cache
+          else
+            npx nx affected --target=test --parallel=4 --ci --coverage --runInBand
+          fi
+        shell: bash
+      - name: Upload test results (React 18)
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        if: ${{ !cancelled() }}
+        with:
+          name: test-results-react-18
+          path: ./coverage
+          retention-days: 30

.gitignore

@@ -51,6 +51,9 @@ tmp
 dist/storybook
 dist/docs
 
+# ESLint cache
+.eslintcache
+
 # NX
 dist/out-tsc
 *.tsbuildinfo

package.json

@@ -9,8 +9,8 @@
     "@vidstack/react": "^1.12.12",
     "core-js": "3.7.0",
     "lodash": "^4.17.23",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "react-helmet-async": "^2.0.5"
   },
   "devDependencies": {
@@ -44,28 +44,26 @@
     "@storybook/react-webpack5": "^8.6.15",
     "@storybook/theming": "^8.6.15",
     "@svgr/cli": "5.5.0",
-    "@testing-library/dom": "^8.11.1",
+    "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "15.0.6",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/classnames": "2.2.10",
     "@types/invariant": "2.2.29",
     "@types/konami-code-js": "^0.8.0",
     "@types/lodash": "4.17.23",
-    "@types/react": "18.3.27",
-    "@types/react-dom": "18.3.1",
-    "@types/react-test-renderer": "18.3.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@types/stylis": "^4.2.0",
-    "@typescript-eslint/eslint-plugin": "^5.15.0",
-    "@typescript-eslint/parser": "^5.15.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
     "babel-jest": "29.6.4",
     "babel-plugin-macros": "3.0.1",
     "component-test-setup": "^0.3.1",
     "conventional-changelog-cli": "^2.0.34",
     "conventional-changelog-conventionalcommits": "^4.3.0",
     "cpy-cli": "^4.1.0",
-    "eslint": "^8.11.0",
+    "eslint": "^8.56.0",
     "eslint-plugin-gamut": "^2.0.0",
     "eslint-plugin-local-rules": "^1.1.0",
     "eslint-plugin-lodash": "^7.4.0",
@@ -83,8 +81,8 @@
     "nx": "21.4.0",
     "nx-cloud": "^19.1.0",
     "onchange": "^7.0.2",
+    "patch-package": "^8.0.0",
     "prettier": "^2.8.7",
-    "react-test-renderer": "18.3.1",
     "storybook": "^8.6.15",
     "storybook-addon-deep-controls": "^0.9.5",
     "style-loader": "^4.0.0",
@@ -113,15 +111,17 @@
   "private": true,
   "repository": "git@github.com:Codecademy/gamut.git",
   "resolutions": {
-    "@react-aria/interactions": "3.25.0",
-    "@typescript-eslint/utils": "^5.15.0",
-    "@types/react": "18.3.27",
-    "@types/react-dom": "18.3.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "error-ex": "1.3.4"
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "@typescript-eslint/utils": "^7.0.0",
+    "error-ex": "1.3.4",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
   },
   "scripts": {
+    "postinstall": "patch-package",
     "build": "nx run-many --target=build --all",
     "build-all": "yarn build",
     "build-storybook": "nx run styleguide:build-storybook",
@@ -131,12 +131,16 @@
     "deploy": "rm -rf ./dist/docs && mv ./dist/storybook/styleguide ./dist/docs && cp -r ./dist/static/* ./dist/docs && gh-pages -b gh-pages -d dist",
     "format": "yarn lint:fix && yarn prettier --write",
     "format:verify": "yarn prettier --check",
-    "lint": "eslint --ignore-path .eslintignore \"./**/*.{mdx,js,ts,tsx,json}\" --max-warnings 0",
+    "lint": "eslint --cache --cache-location .eslintcache --ignore-path .eslintignore \"./**/*.{mdx,js,ts,tsx,json}\" --max-warnings 0",
     "lint:fix": "yarn lint --fix",
     "prettier": "prettier --ignore-path .prettierignore \"./**/*.{mdx,js,ts,tsx,json,css,scss}\"",
     "start": "yarn && yarn start:storybook",
     "start:storybook": "nx storybook styleguide",
     "test": "nx run-many --target=test --all",
+    "test:gamut": "jest --config=packages/gamut/jest.config.ts",
+    "test:gamut:react18": "node script/test-gamut-react-version.js 18",
+    "test:gamut:react19": "node script/test-gamut-react-version.js 19",
+    "test:gamut:all": "yarn test:gamut:react18 && yarn test:gamut:react19",
     "verify": "nx run-many --target=verify --parallel=3 --all",
     "verify-all": "yarn verify"
   },

packages/eslint-plugin-gamut/package.json

@@ -6,6 +6,9 @@
   "dependencies": {
     "@typescript-eslint/utils": "^5.15.0"
   },
+  "devDependencies": {
+    "@typescript-eslint/rule-tester": "^7.0.0"
+  },
   "files": [
     "dist"
   ],

packages/eslint-plugin-gamut/src/gamut-import-paths.ts

@@ -59,7 +59,7 @@ export default createRule({
   meta: {
     docs: {
       description: 'Ensure Gamut import statements have proper module paths.',
-      recommended: 'error',
+      recommended: 'recommended',
     },
     fixable: 'code',
     messages: {

packages/eslint-plugin-gamut/src/no-css-standalone.test.ts

@@ -1,9 +1,9 @@
-import { ESLintUtils } from '@typescript-eslint/utils';
+import { TSESLint } from '@typescript-eslint/utils';
 
 import rule from './no-css-standalone';
 
-const ruleTester = new ESLintUtils.RuleTester({
-  parser: '@typescript-eslint/parser',
+const ruleTester = new TSESLint.RuleTester({
+  parser: require.resolve('@typescript-eslint/parser'),
 });
 
 ruleTester.run('no-css-standalone', rule, {

packages/eslint-plugin-gamut/src/no-css-standalone.ts

@@ -15,7 +15,7 @@ export default createRule({
   meta: {
     docs: {
       description: 'Ensure no standalone .css or .scss files.',
-      recommended: 'error',
+      recommended: 'recommended',
     },
     messages: {
       noCssStandalone:

packages/eslint-plugin-gamut/src/no-inline-style.test.ts

@@ -1,9 +1,9 @@
-import { ESLintUtils } from '@typescript-eslint/utils';
+import { TSESLint } from '@typescript-eslint/utils';
 
 import rule from './no-inline-style';
 
-const ruleTester = new ESLintUtils.RuleTester({
-  parser: '@typescript-eslint/parser',
+const ruleTester = new TSESLint.RuleTester({
+  parser: require.resolve('@typescript-eslint/parser'),
   parserOptions: {
     ecmaFeatures: {
       jsx: true,

packages/eslint-plugin-gamut/src/no-inline-style.ts

@@ -17,7 +17,7 @@ export default createRule({
   meta: {
     docs: {
       description: 'Disallow inline style props on JSX elements.',
-      recommended: 'error',
+      recommended: 'recommended',
     },
     messages: {
       noInlineStyle:

packages/eslint-plugin-gamut/src/no-kbd-element.test.ts

@@ -1,9 +1,9 @@
-import { ESLintUtils } from '@typescript-eslint/utils';
+import { TSESLint } from '@typescript-eslint/utils';
 
 import rule from './no-kbd-element';
 
-const ruleTester = new ESLintUtils.RuleTester({
-  parser: '@typescript-eslint/parser',
+const ruleTester = new TSESLint.RuleTester({
+  parser: require.resolve('@typescript-eslint/parser'),
   parserOptions: {
     ecmaFeatures: {
       jsx: true,

packages/eslint-plugin-gamut/src/no-kbd-element.ts

@@ -18,7 +18,7 @@ export default createRule({
     docs: {
       description:
         'Intended to be used in Storybook docs to disallow use of the `kbd` HTML element in favor of the `KeyboardKey` component for styling purposes.',
-      recommended: 'error',
+      recommended: 'recommended',
     },
     messages: {
       noKbdElement: 'Please use the `KeyboardKey` component instead.',

packages/eslint-plugin-gamut/src/prefer-themed.test.ts

@@ -1,9 +1,9 @@
-import { ESLintUtils } from '@typescript-eslint/utils';
+import { TSESLint } from '@typescript-eslint/utils';
 
 import rule from './prefer-themed';
 
-const ruleTester = new ESLintUtils.RuleTester({
-  parser: '@typescript-eslint/parser',
+const ruleTester = new TSESLint.RuleTester({
+  parser: require.resolve('@typescript-eslint/parser'),
 });
 
 ruleTester.run('prefer-themed', rule, {

packages/eslint-plugin-gamut/src/prefer-themed.ts

@@ -48,7 +48,7 @@ export default createRule({
   meta: {
     docs: {
       description: 'Prefer themed style utility',
-      recommended: 'error',
+      recommended: 'recommended',
     },
     fixable: 'code',
     messages: {

packages/gamut-icons/package.json

@@ -17,7 +17,7 @@
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "lodash": "^4.17.23",
-    "react": "^17.0.2 || ^18.3.0"
+    "react": "^18.3.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/gamut-illustrations/package.json

@@ -18,8 +18,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "react": "^17.0.2 || ^18.3.0",
-    "react-dom": "^17.0.2 || ^18.3.0"
+    "react": "^18.3.0 || ^19.0.0",
+    "react-dom": "^18.3.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/gamut-patterns/package.json

@@ -19,8 +19,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "react": "^17.0.2 || ^18.3.0",
-    "react-dom": "^17.0.2 || ^18.3.0"
+    "react": "^18.3.0 || ^19.0.0",
+    "react-dom": "^18.3.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/gamut-styles/package.json

@@ -6,8 +6,8 @@
   "dependencies": {
     "@codecademy/variance": "0.26.0",
     "@emotion/is-prop-valid": "^1.1.0",
-    "framer-motion": "^11.18.0",
     "get-nonce": "^1.0.0",
+    "motion": "^12.0.0",
     "polished": "^4.1.2"
   },
   "files": [
@@ -26,7 +26,7 @@
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "lodash": "^4.17.23",
-    "react": "^17.0.2 || ^18.3.0",
+    "react": "^18.3.0 || ^19.0.0",
     "stylis": "^4.0.7"
   },
   "publishConfig": {

packages/gamut-styles/src/GamutProvider.tsx

@@ -5,8 +5,8 @@ import {
   Theme,
   ThemeProvider,
 } from '@emotion/react';
-import { MotionConfig } from 'framer-motion';
 import { setNonce } from 'get-nonce';
+import { MotionConfig } from 'motion/react';
 import { useContext, useEffect, useMemo, useRef } from 'react';
 import * as React from 'react';