beta: React 18 + 19 compatibility

.eslintrc.js

@@ -10,6 +10,21 @@ module.exports = {
 
   ignorePatterns: ['packages/code-connect/**/*'],
 
+  settings: {
+    'import/parsers': {
+      [require.resolve('@typescript-eslint/parser')]: [
+        '.ts',
+        '.cts',
+        '.mts',
+        '.tsx',
+        '.js',
+        '.jsx',
+        '.mjs',
+        '.cjs',
+      ],
+    },
+  },
+
   rules: {
     'gamut/prefer-themed': 'error',
     'gamut/no-css-standalone': 'error',
@@ -38,6 +53,13 @@ module.exports = {
       // being applied to subsequent plugin imports/extensions. Wild.
       files: ['*.tsx', '*.ts'],
       rules: {
+        '@typescript-eslint/no-empty-object-type': [
+          'error',
+          {
+            allowInterfaces: 'with-single-extends',
+            allowObjectTypes: 'always',
+          },
+        ],
         'no-void': ['error', { allowAsStatement: true }],
         // These rules could be useful, but we haven't gotten around to enabling them here
         // See WEB-2 for general tracking.

.nx/version-plans/version-plan-1775236316343.md

@@ -0,0 +1,12 @@
+---
+eslint-plugin-gamut: major
+gamut-illustrations: major
+gamut-patterns: major
+gamut-styles: major
+gamut-icons: major
+gamut-tests: major
+variance: major
+gamut: major
+---
+
+React 18+19 compatibility: workspace on React 19; peers support React 18.3 and 19. Includes eslint-plugin-gamut and core Gamut packages (major bumps per plan).

jest.config.base.ts

@@ -1,6 +1,7 @@
-import type { Config } from 'jest';
 import path from 'node:path';
 
+import type { Config } from 'jest';
+
 const COVERAGE_PATH_IGNORE_PATTERNS = [
   '<rootDir>/node_modules/',
   '<rootDir>/dist/',

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": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-helmet-async": "^2.0.5"
   },
   "devDependencies": {
@@ -19,7 +19,7 @@
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@codecademy/eslint-config": "8.0.0",
+    "@codecademy/eslint-config": "8.2.0",
     "@codecademy/prettier-config": "^0.2.0",
     "@codecademy/tsconfig": "^0.3.0",
     "@commander-js/extra-typings": "^14.0.0",
@@ -42,27 +42,27 @@
     "@svgr/cli": "5.5.0",
     "@swc-node/register": "^1.11.1",
     "@swc/core": "^1.15.18",
-    "@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": "^16.0.0",
     "@testing-library/react-hooks": "^7.0.2",
     "@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/react-test-renderer": "^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": "^8.57.0",
+    "@typescript-eslint/parser": "^8.57.0",
     "babel-jest": "29.6.4",
-    "babel-plugin-macros": "3.0.1",
+    "babel-plugin-macros": "^3.0.1",
     "commander": "^14.0.3",
     "component-test-setup": "^0.3.1",
     "cpy-cli": "^4.1.0",
-    "eslint": "^8.11.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-gamut": "workspace:*",
     "eslint-plugin-local-rules": "^1.1.0",
     "eslint-plugin-lodash": "^7.4.0",
@@ -82,7 +82,7 @@
     "onchange": "^7.0.2",
     "playwright": "^1.49.1",
     "prettier": "^2.8.7",
-    "react-test-renderer": "18.3.1",
+    "react-test-renderer": "^19.0.0",
     "start-server-and-test": "^2.1.5",
     "storybook": "^10.3.1",
     "storybook-addon-deep-controls": "^0.9.5",
@@ -113,13 +113,14 @@
   "repository": "git@github.com:Codecademy/gamut.git",
   "resolutions": {
     "@react-aria/interactions": "3.25.0",
-    "@types/react": "18.3.27",
-    "@types/react-dom": "18.3.1",
-    "@typescript-eslint/utils": "^5.15.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/react-test-renderer": "^18.2.0",
+    "@typescript-eslint/utils": "^8.57.0",
     "axios": "1.14.0",
     "error-ex": "1.3.4",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "scripts": {
     "build": "nx run-many --target=build --all",

packages/eslint-plugin-gamut/package.json

@@ -4,7 +4,7 @@
   "version": "2.4.3",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
-    "@typescript-eslint/utils": "^5.15.0"
+    "@typescript-eslint/utils": "^8.57.0"
   },
   "files": [
     "dist"

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

@@ -59,7 +59,6 @@ export default createRule({
   meta: {
     docs: {
       description: 'Ensure Gamut import statements have proper module paths.',
-      recommended: 'error',
     },
     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,6 @@ export default createRule({
   meta: {
     docs: {
       description: 'Ensure no standalone .css or .scss files.',
-      recommended: 'error',
     },
     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

@@ -1,10 +1,15 @@
+import { AST_NODE_TYPES } from '@typescript-eslint/utils';
+
 import { createRule } from './createRule';
 
 export default createRule({
   create(context) {
     return {
       JSXAttribute(node) {
-        if (node.name.type === 'JSXIdentifier' && node.name.name === 'style') {
+        if (
+          node.name.type === AST_NODE_TYPES.JSXIdentifier &&
+          node.name.name === 'style'
+        ) {
           context.report({
             messageId: 'noInlineStyle',
             node,
@@ -17,7 +22,6 @@ export default createRule({
   meta: {
     docs: {
       description: 'Disallow inline style props on JSX elements.',
-      recommended: 'error',
     },
     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

@@ -1,10 +1,15 @@
+import { AST_NODE_TYPES } from '@typescript-eslint/utils';
+
 import { createRule } from './createRule';
 
 export default createRule({
   create(context) {
     return {
       JSXOpeningElement(node) {
-        if (node.name.type === 'JSXIdentifier' && node.name.name === 'kbd') {
+        if (
+          node.name.type === AST_NODE_TYPES.JSXIdentifier &&
+          node.name.name === 'kbd'
+        ) {
           context.report({
             messageId: 'noKbdElement',
             node,
@@ -18,7 +23,6 @@ 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',
     },
     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

@@ -1,5 +1,3 @@
-import { AST_NODE_TYPES } from '@typescript-eslint/utils';
-
 import { createRule } from './createRule';
 import {
   checkArrowFuncBodyTypesAndReturnThemeVars,
@@ -10,15 +8,14 @@ export default createRule({
   create(context) {
     return {
       TaggedTemplateExpression(node) {
-        if (node.tag.type === AST_NODE_TYPES.MemberExpression) {
+        /* eslint-disable @typescript-eslint/no-unsafe-enum-comparison -- @typescript-eslint/types use string enums; literals match ESTree */
+        if (node.tag.type === 'MemberExpression') {
           if (node.tag.object.type !== 'Identifier') return;
           const expressionVariable = node.tag.object.name;
           const arrowFuncExpression = node.quasi.expressions[0];
 
-          if (
-            arrowFuncExpression?.type !== AST_NODE_TYPES.ArrowFunctionExpression
-          )
-            return;
+          if (arrowFuncExpression?.type !== 'ArrowFunctionExpression') return;
+          /* eslint-enable @typescript-eslint/no-unsafe-enum-comparison */
 
           if (!isNamedVariableTheme(arrowFuncExpression)) return;
 
@@ -48,7 +45,6 @@ export default createRule({
   meta: {
     docs: {
       description: 'Prefer themed style utility',
-      recommended: 'error',
     },
     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": "^17.0.2 || ^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": "^17.0.2 || ^18.3.0 || ^19.0.0",
+    "react-dom": "^17.0.2 || ^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": "^17.0.2 || ^18.3.0 || ^19.0.0",
+    "react-dom": "^17.0.2 || ^18.3.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/gamut-styles/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@codecademy/variance": "0.26.1",
     "@emotion/is-prop-valid": "^1.1.0",
-    "framer-motion": "^11.18.0",
+    "framer-motion": "^12.0.0",
     "get-nonce": "^1.0.0",
     "polished": "^4.1.2"
   },
@@ -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": "^17.0.2 || ^18.3.0 || ^19.0.0",
     "stylis": "^4.0.7"
   },
   "publishConfig": {