18/19

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

@@ -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",
     "@emotion/babel-plugin": "11.11.0",
@@ -53,19 +53,19 @@
     "@types/invariant": "2.2.29",
     "@types/konami-code-js": "^0.8.0",
     "@types/lodash": "4.17.23",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@types/react-test-renderer": "^19.0.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",
     "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.57.0",
     "eslint-plugin-gamut": "^2.0.0",
     "eslint-plugin-local-rules": "^1.1.0",
     "eslint-plugin-lodash": "^7.4.0",
@@ -93,7 +93,7 @@
     "ts-jest": "29.1.1",
     "ts-node": "10.9.1",
     "tslib": "2.4.0",
-    "typescript": "5.1.3"
+    "typescript": "5.9.3"
   },
   "engines": {
     "node": "^22.13.1",
@@ -114,9 +114,9 @@
   "repository": "git@github.com:Codecademy/gamut.git",
   "resolutions": {
     "@react-aria/interactions": "3.25.0",
-    "@typescript-eslint/utils": "^5.15.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
+    "@typescript-eslint/utils": "^8.57.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "error-ex": "1.3.4"

packages/eslint-plugin-gamut/package.json

@@ -4,7 +4,7 @@
   "version": "2.4.2",
   "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

@@ -11,7 +11,7 @@
     return {
       TaggedTemplateExpression(node) {
         if (node.tag.type === AST_NODE_TYPES.MemberExpression) {
           if (node.tag.object.type !== 'Identifier') return;
           const expressionVariable = node.tag.object.name;
           const arrowFuncExpression = node.quasi.expressions[0];
 
@@ -48,7 +48,6 @@
   meta: {
     docs: {
       description: 'Prefer themed style utility',
-      recommended: 'error',
     },
     fixable: 'code',
     messages: {

packages/gamut/package.json

@@ -21,7 +21,7 @@
     "polished": "^4.1.2",
     "react-aria-components": "1.7.1",
     "react-focus-on": "3.10.0",
-    "react-hook-form": "^7.65.0",
+    "react-hook-form": "^7.71.2",
     "react-player": "^2.16.0",
     "react-select": "^5.2.2",
     "react-truncate-markup": "^5.1.2",

packages/gamut/src/AccordionButtonDeprecated/ButtonDeprecated/index.tsx

@@ -21,7 +21,7 @@ export const buttonPresetThemes = {
   royalblue: 'brand-purple',
 } as const;
 
-const themes = [
+const _themes = [
   'hyper',
   'navy',
   'red',
@@ -39,7 +39,7 @@ const themes = [
 
 export type ButtonDeprecatedThemes =
   | keyof typeof buttonPresetThemes
-  | (typeof themes)[number];
+  | (typeof _themes)[number];
 
 const propKeys = [
   'theme',

packages/gamut/src/ConnectedForm/ConnectedForm.tsx

@@ -181,7 +181,7 @@ export const ConnectedForm = forwardRef(
       </PropsProvider>
     );
   }
-) as React.ForwardRefExoticComponent<
-  ConnectedFormProps<FormValues<Record<string, unknown>>> &
+) as <Values extends FormValues<Values>>(
+  props: React.PropsWithoutRef<ConnectedFormProps<Values>> &
     React.RefAttributes<HTMLFormElement>
->;
+) => React.ReactElement;

packages/gamut/src/ConnectedForm/utils.tsx

@@ -71,7 +71,7 @@ export const useConnectedForm = <
     () => ({
       ConnectedFormGroup:
         ConnectedFormGroup as ConnectedGroupStrictProps<Values>,
-      ConnectedForm: ConnectedForm as unknown as ConnectedFormStrictProps<
+      ConnectedForm: ConnectedForm as ConnectedFormStrictProps<
         Values,
         ValidationRules
       >,

packages/gamut/src/FeatureShimmer/__tests__/FeatureShimmer.test.tsx

@@ -18,6 +18,7 @@ describe('FeatureShimmer', () => {
     mockIntersectionObserver.mockReturnValue({
       observe: jest.fn(),
       disconnect: jest.fn(),
+      unobserve: jest.fn(),
     });
     window.IntersectionObserver = mockIntersectionObserver;
   });

packages/gamut/src/Form/SelectDropdown/SelectDropdown.tsx

@@ -274,7 +274,7 @@ export const SelectDropdown: React.FC<SelectDropdownProps> = ({
         isDisabled={disabled}
         isMulti={multiple}
         isOptionDisabled={(option: OptionStrict & { disabled?: boolean }) =>
-          option.disabled
+          option.disabled ?? false
         }
         isSearchable={isSearchable}
         menuAlignment={menuAlignment}

packages/gamut/src/Form/SelectDropdown/elements/controls.tsx

@@ -102,7 +102,7 @@ export const RemoveAllButton = (props: SizedIndicatorProps) => {
       role="button"
       tabIndex={0}
       {...restInnerProps}
-      ref={removeAllButtonRef}
+      ref={removeAllButtonRef as React.Ref<HTMLDivElement>}
       // eslint-disable-next-line gamut/no-inline-style
       style={style}
       onKeyDown={onKeyPress}

packages/gamut/src/Form/SelectDropdown/elements/multi-value.tsx

@@ -121,7 +121,7 @@ export const RemoveAllButton = (props: SizedIndicatorProps) => {
       role="button"
       tabIndex={0}
       {...restInnerProps}
-      ref={removeAllButtonRef}
+      ref={removeAllButtonRef as React.Ref<HTMLDivElement>}
       // eslint-disable-next-line gamut/no-inline-style
       style={style}
       onKeyDown={onKeyPress}

packages/gamut/src/Form/SelectDropdown/utils.tsx

@@ -1,3 +1,4 @@
+import { isDefined } from '../../utils/nullish';
 import { SelectOptionBase } from '../utils';
 import {
   BaseOnChangeProps,
@@ -18,8 +19,9 @@ export const isSingleSelectProps = (
 ): props is SingleSelectDropdownProps => !props.multiple;
 
 export const isOptionGroup = (obj: unknown): obj is SelectDropdownGroup =>
-  obj != null &&
+  isDefined(obj) &&
   typeof obj === 'object' &&
+  obj !== null &&
   'options' in obj &&
   obj.options !== undefined;
 

packages/gamut/src/Form/__tests__/__snapshots__/utils.test.tsx.snap

@@ -2,39 +2,63 @@
 
 exports[`parseSelectOptions creates an option list 1`] = `
 [
-  <option
-    data-testid="test-val"
-    label="Value"
-    value="val"
-  >
-    Value
-  </option>,
-  <option
-    data-testid="test-val2"
-    label="Value 2"
-    value="val2"
-  >
-    Value 2
-  </option>,
+  {
+    "$$typeof": Symbol(react.transitional.element),
+    "_owner": null,
+    "_store": {},
+    "key": "test-val",
+    "props": {
+      "children": "Value",
+      "data-testid": "test-val",
+      "label": "Value",
+      "value": "val",
+    },
+    "type": "option",
+  },
+  {
+    "$$typeof": Symbol(react.transitional.element),
+    "_owner": null,
+    "_store": {},
+    "key": "test-val2",
+    "props": {
+      "children": "Value 2",
+      "data-testid": "test-val2",
+      "label": "Value 2",
+      "value": "val2",
+    },
+    "type": "option",
+  },
 ]
 `;
 
 exports[`parseSelectOptions creates an option list 2`] = `
 [
-  <option
-    data-testid="test-val"
-    label="val"
-    value="val"
-  >
-    val
-  </option>,
-  <option
-    data-testid="test-val2"
-    label="val2"
-    value="val2"
-  >
-    val2
-  </option>,
+  {
+    "$$typeof": Symbol(react.transitional.element),
+    "_owner": null,
+    "_store": {},
+    "key": "test-val",
+    "props": {
+      "children": "val",
+      "data-testid": "test-val",
+      "label": "val",
+      "value": "val",
+    },
+    "type": "option",
+  },
+  {
+    "$$typeof": Symbol(react.transitional.element),
+    "_owner": null,
+    "_store": {},
+    "key": "test-val2",
+    "props": {
+      "children": "val2",
+      "data-testid": "test-val2",
+      "label": "val2",
+      "value": "val2",
+    },
+    "type": "option",
+  },
 ]
 `;