build(deps-dev): Bump the eslint group across 1 directory with 9 updates

.github/workflows/publish-next.yml

@@ -22,7 +22,7 @@ jobs:
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
-      - uses: actions/cache@v2
+      - uses: actions/cache@v4
         id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}

eslint.config.cjs

@@ -0,0 +1,110 @@
+const _import = require('eslint-plugin-import');
+const typescriptEslint = require('@typescript-eslint/eslint-plugin');
+const jsxA11Y = require('eslint-plugin-jsx-a11y');
+const react = require('eslint-plugin-react');
+const reactHooks = require('eslint-plugin-react-hooks');
+const noOnlyTests = require('eslint-plugin-no-only-tests');
+const security = require('eslint-plugin-security');
+const vitest = require('eslint-plugin-vitest');
+const globals = require('globals');
+const tsParser = require('@typescript-eslint/parser');
+const js = require('@eslint/js');
+const { FlatCompat } = require('@eslint/eslintrc');
+const {
+    fixupConfigRules,
+    fixupPluginRules,
+} = require('@eslint/compat');
+
+
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+module.exports = [
+    ...fixupConfigRules(compat.extends(
+        'eslint:recommended',
+        'plugin:import/errors',
+        'plugin:import/warnings',
+        'plugin:import/typescript',
+        'plugin:react/recommended',
+        'plugin:jsx-a11y/recommended',
+        'plugin:security/recommended-legacy',
+        'plugin:storybook/recommended',
+        'prettier',
+    )), {
+        plugins: {
+            import: fixupPluginRules(_import),
+            '@typescript-eslint': typescriptEslint,
+            'jsx-a11y': fixupPluginRules(jsxA11Y),
+            react: fixupPluginRules(react),
+            'react-hooks': fixupPluginRules(reactHooks),
+            'no-only-tests': noOnlyTests,
+            security: fixupPluginRules(security),
+            vitest: fixupPluginRules(vitest),
+        },
+
+        ignores: [
+            'node_modules/*'
+        ],
+
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+                ...globals.commonjs,
+                ...globals.node,
+            },
+
+            ecmaVersion: 2018,
+            sourceType: 'module',
+
+            parserOptions: {
+                ecmaFeatures: {
+                    jsx: true,
+                },
+
+                requireConfigFile: false,
+            },
+        },
+
+        settings: {
+            react: {
+                version: 'detect',
+            },
+        },
+
+        rules: {
+            'no-only-tests/no-only-tests': 'error',
+            'react/prop-types': 'off',
+            '@typescript-eslint/no-unused-expressions':  ['error', { 'allowShortCircuit': true}]
+        },
+    }, ...compat.extends('plugin:@typescript-eslint/recommended', 'prettier').map(config => ({
+        ...config,
+        files: ['**/*.ts?(x)'],
+    })), {
+        files: ['**/*.ts?(x)'],
+
+        plugins: {
+            '@typescript-eslint': typescriptEslint,
+        },
+
+        languageOptions: {
+            parser: tsParser,
+            ecmaVersion: 2018,
+            sourceType: 'module',
+
+            parserOptions: {
+                ecmaFeatures: {
+                    jsx: true,
+                },
+
+                warnOnUnsupportedTypeScriptVersion: true,
+            },
+        },
+
+        rules: {
+            'import/no-unresolved': 'off',
+        },
+    }
+];

package.json

@@ -49,8 +49,8 @@
     "build": "vite build && yarn run build:uswds && yarn run test:bundles",
     "build:uswds": "vite build --mode uswds",
     "build:watch": "vite dev",
-    "lint": "tsc && eslint --ext js,jsx,ts,tsx src && stylelint \"src/**/*.{css,scss}\"",
-    "lint:fix": "tsc && eslint --ext js,jsx,ts,tsx src --fix && stylelint \"src/**/*.{css,scss}\" --fix",
+    "lint": "tsc && eslint src && stylelint \"src/**/*.{css,scss}\"",
+    "lint:fix": "tsc && eslint src --fix && stylelint \"src/**/*.{css,scss}\" --fix",
     "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,css,scss,json,md}\"",
     "format:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,scss,json,md}\"",
     "prepare": "husky && yarn build",
@@ -76,6 +76,9 @@
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
+    "@eslint/compat": "^1.2.7",
+    "@eslint/eslintrc": "^3.3.0",
+    "@eslint/js": "^9.22.0",
     "@laynezh/vite-plugin-lib-assets": "^0.5.14",
     "@storybook/addon-a11y": "^8.0.4",
     "@storybook/addon-essentials": "^8.0.4",
@@ -96,26 +99,27 @@
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@types/react-test-renderer": "^18.0.7",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^7.1.1",
+    "@typescript-eslint/eslint-plugin": "^8.26.1",
+    "@typescript-eslint/parser": "^8.26.1",
     "@uswds/uswds": "3.7.1",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-istanbul": "^2.0.4",
     "all-contributors-cli": "^6.24.0",
     "babel-loader": "^9.1.3",
     "classnames": "^2.3.2",
     "danger": "^12.1.0",
-    "eslint": "^8.25.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-no-only-tests": "^3.0.0",
-    "eslint-plugin-react": "^7.31.10",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-security": "^2.1.0",
-    "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-vitest": "^0.3.21",
-    "focus-trap-react": "^10.2.3",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-no-only-tests": "^3.3.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-security": "^3.0.1",
+    "eslint-plugin-storybook": "^0.11.4",
+    "eslint-plugin-vitest": "^0.5.4",
+    "focus-trap-react": "^11.0.3",
+    "globals": "^16.0.0",
     "happo-plugin-storybook": "^4.1.0",
     "happo.io": "^9.1.2",
     "husky": "^9.0.10",
@@ -130,7 +134,7 @@
     "stylelint-config-css-modules": "^4.4.0",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-recommended": "^14.0.0",
-    "stylelint-config-sass-guidelines": "^12.0.0",
+    "stylelint-config-sass-guidelines": "^12.1.0",
     "stylelint-config-standard-scss": "^13.0.0",
     "stylelint-prettier": "^5.0.0",
     "typescript": "^5.1.6",
@@ -143,15 +147,13 @@
     "yarn": "^1.22.22"
   },
   "resolutions": {
-    "loader-utils": "2.0.4",
     "parse-url": "8.1.0",
-    "jackspeak": "2.1.1",
     "json-schema": "0.4.0",
-    "glob-parent": "5.1.2",
     "trim": "0.0.3",
     "trim-newlines": "3.0.1",
     "@types/react": "18.2.48",
-    "@types/react-dom": "18.2.18"
+    "@types/react-dom": "18.2.18",
+    "@typescript-eslint/utils": "8.26.1"
   },
   "packageManager": "yarn@1.22.22"
 }

src/components/Footer/FooterExtendedNavList/FooterExtendedNavList.test.tsx

@@ -1,4 +1,4 @@
-/*  eslint-disable jsx-a11y/anchor-is-valid, react/jsx-key */
+/*  eslint-disable jsx-a11y/anchor-is-valid */
 
 import React from 'react'
 import { render } from '@testing-library/react'

src/components/Footer/FooterExtendedNavList/FooterExtendedNavList.tsx

@@ -91,7 +91,7 @@ const Section = ({
   )
 
   return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-static-element-interactions
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <section className={classes} onClick={onToggle} onKeyPress={onToggle}>
       <h4 className="usa-footer__primary-link">{primaryLinkOrHeading}</h4>
       <NavList type="footerSecondary" items={secondaryLinks} />

src/components/Footer/FooterNav/FooterNav.test.tsx

@@ -1,4 +1,4 @@
-/*  eslint-disable jsx-a11y/anchor-is-valid, react/jsx-key */
+/*  eslint-disable jsx-a11y/anchor-is-valid */
 
 import React from 'react'
 import { render } from '@testing-library/react'

src/components/Footer/SocialLinks/SocialLinks.stories.tsx

@@ -1,4 +1,3 @@
-/*  eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react'
 import { SocialLinks, SocialLink } from './SocialLinks'
 

src/components/Footer/SocialLinks/SocialLinks.tsx

@@ -1,4 +1,3 @@
-/*  eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react'
 import classnames from 'classnames'
 import { Icon } from '../../Icon/Icons'

src/components/Identifier/Identifier/Identifier.stories.tsx

@@ -1,4 +1,3 @@
-/*  eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react'
 
 import { Identifier } from './Identifier'

src/components/Identifier/IdentifierIdentity/IdentifierIdentity.test.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react'
 import { render } from '@testing-library/react'
 

src/components/Link/Link.test.tsx

@@ -87,7 +87,6 @@ describe('Link component', () => {
           Click Me
         </Link>
       )
-      expect
       expect(getByTestId('customComponent')).toHaveTextContent('Click Me')
       expect(getByTestId('customComponent')).toHaveAttribute(
         'href',

src/components/Modal/ModalWrapper/ModalWrapper.tsx

@@ -27,7 +27,7 @@ export const ModalWrapperForwardRef: React.ForwardRefRenderFunction<
   )
 
   /* eslint-disable jsx-a11y/click-events-have-key-events */
-  /* eslint-disable jsx-a11y/no-static-element-interactions */
+
   return (
     <div {...divProps} ref={ref} id={id} className={classes} role="dialog">
       <div

src/components/SiteAlert/SiteAlert.stories.tsx

@@ -1,5 +1,3 @@
-/*  eslint-disable jsx-a11y/anchor-is-valid */
-
 import React from 'react'
 
 import { SiteAlert } from './SiteAlert'

src/components/SiteAlert/SiteAlert.test.tsx

@@ -1,4 +1,3 @@
-/*  eslint-disable jsx-a11y/anchor-is-valid, react/jsx-key */
 import React from 'react'
 import { render } from '@testing-library/react'
 

src/components/card/Card.stories.tsx

@@ -289,7 +289,7 @@ export const CardTest = (): React.ReactElement => (
         </p>
       </CardHeader>
       <CardMedia imageClass="add-aspect-16x9">
-        {/* eslint-disable-next-line jsx-a11y/img-redundant-alt */}
+        {}
         <img
           src={sparklerImage}
           alt="An image's description"

src/deprecation.ts

@@ -1,7 +1,6 @@
 export const deprecationWarning =
   process.env.NODE_ENV !== 'production'
     ? console.warn
-    : // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-      () => {
+    : () => {
         // do nothing in production
       }