Update to [email protected]

docs/assets/js/admin/widgets/genericPreviewTemplate.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { ReactLiquid, liquidEngine } from 'react-liquid';
 import template from '../../../../_includes/generic-content.html';
-// eslint-disable-next-line import/namespace
+
 import { marked } from '../../../../../node_modules/marked/lib/marked.esm.js';
 
 export default class Preview extends Component {

docs/assets/js/admin/widgets/pagePreviewTemplate.js

@@ -9,7 +9,7 @@ import Tabs from '../../../../assets/js/tabs.js';
 import { encode } from 'html-entities';
 import slugify from 'slugify';
 import template from '../../../../_includes/variation-content.html';
-// eslint-disable-next-line import/namespace
+
 import { marked } from '../../../../../node_modules/marked/lib/marked.esm.js';
 
 // react-liquid (https://github.com/aquibm/react-liquid/) isn't able to `include` other files so we
@@ -71,7 +71,7 @@ export default class Preview extends Component {
     };
     return (
       // TODO: We're breaking some a11y here by making the whole page clickable.
-      // eslint-disable-next-line
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
       <div ref={this.containerRef} onClick={(event) => this.handleClick(event)}>
         <ReactLiquid template={templateWithIcons} data={data} html />
       </div>

eslint.config.js

@@ -0,0 +1,73 @@
+// Run `npx @eslint/config-inspector` to inspect the config.
+
+import globals from 'globals';
+import js from '@eslint/js';
+import importPlugin from 'eslint-plugin-import';
+import jsdoc from 'eslint-plugin-jsdoc';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import reactPlugin from 'eslint-plugin-react';
+import pluginCypress from 'eslint-plugin-cypress/flat';
+import eslintConfigPrettier from 'eslint-config-prettier';
+
+export default [
+  {
+    ignores: [
+      '.yarn/',
+      'docs/_site/',
+      'docs/dist/',
+      'test/unit-test-coverage/',
+      'packages/cfpb-design-system/dist/',
+    ],
+  },
+  js.configs.recommended,
+  importPlugin.flatConfigs.recommended,
+  jsdoc.configs['flat/recommended'],
+  jsxA11y.flatConfigs.recommended,
+  reactPlugin.configs.flat.recommended,
+  pluginCypress.configs.recommended,
+  eslintConfigPrettier,
+  {
+    languageOptions: {
+      ecmaVersion: 2023,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.jest,
+      },
+    },
+    settings: {
+      'import/resolver': {
+        node: {
+          paths: ['src'],
+          extensions: ['.js', '.ts', '.d.ts', '.tsx'],
+        },
+      },
+      react: {
+        version: 'detect',
+      },
+    },
+    // Some plugins are automatically included.
+    // plugins: {},
+    rules: {
+      'jsdoc/require-hyphen-before-param-description': 'warn',
+      'no-console': ['warn'],
+      'no-use-before-define': ['error', 'nofunc'],
+      'no-unused-vars': [
+        'error',
+        {
+          vars: 'all',
+          args: 'after-used',
+          ignoreRestSiblings: false,
+        },
+      ],
+      'no-var': ['error'],
+      'prefer-const': ['error'],
+      radix: ['error'],
+    },
+  },
+];

lighthouserc.cjs

@@ -24,7 +24,7 @@ if (!urlsSpecified) {
       "No HTML files found; build the docs first with 'yarn build-decap'.",
     );
 
-    // eslint-disable-next-line no-process-exit
+     
     process.exit(1);
   }
 

package.json

@@ -60,14 +60,15 @@
     "cypress": "13.15.1",
     "esbuild": "0.24.0",
     "esbuild-plugin-liquid": "0.2.0",
-    "eslint": "8.57.0",
+    "eslint": "9.13.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-cypress": "3.2.0",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jsdoc": "48.2.3",
-    "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-react": "7.34.1",
+    "eslint-plugin-cypress": "4.1.0",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jsdoc": "50.4.3",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-react": "7.37.2",
     "glob": "11.0.0",
+    "globals": "15.11.0",
     "http-server": "14.1.1",
     "jest": "29.7.0",
     "jest-cli": "29.7.0",

packages/cfpb-design-system/src/components/cfpb-expandables/summary-minimal.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-use-before-define */
 import {
   add as addDataHook,
   checkDom,

packages/cfpb-design-system/src/components/cfpb-expandables/summary.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-use-before-define */
 import {
   add as addDataHook,
   checkDom,

packages/cfpb-design-system/src/utilities/behavior/behavior.js

@@ -45,7 +45,6 @@ function _findElements(behaviorSelector, baseElement) {
     behaviorElements.length === 0 &&
     behaviorSelector.indexOf(BEHAVIOR_PREFIX) === -1
   ) {
-    // eslint-disable-next-line no-use-before-define
     behaviorElements = find(behaviorSelector, baseElement);
   }
 

packages/cfpb-design-system/src/utilities/behavior/flyout-menu.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-use-before-define */
 import {
   BEHAVIOR_PREFIX,
   JS_HOOK,

packages/cfpb-design-system/src/utilities/breakpoint-state.js

@@ -53,7 +53,7 @@ function getBreakpointState(width) {
   width = width || window.innerWidth;
 
   let rangeKey;
-  // eslint-disable-next-line guard-for-in
+
   for (rangeKey in varsBreakpoints) {
     breakpointState[rangeKey] = _inBreakpointRange(
       varsBreakpoints[rangeKey],

packages/cfpb-design-system/src/utilities/type-checkers.js

@@ -121,7 +121,7 @@ function isFunction(value) {
 }
 
 // TODO Fix complexity issue
-/* eslint-disable complexity, no-mixed-operators */
+
 /**
  * @name isEmpty
  * @kind function
@@ -138,7 +138,6 @@ function isEmpty(value) {
     /^\s*$/.test(value)
   );
 }
-/* eslint-enable complexity, no-mixed-operators */
 
 // Expose public methods.
 export {

scripts/lint.sh

@@ -4,7 +4,7 @@
 yarn prettier "./**/*.{js,jsx,ts,tsx,md,css,less}" --write
 
 ## Run JS linting. See ignored path in .eslintignore.
-yarn eslint ./{.,test,docs,packages} --fix
+yarn eslint "./{.,test,docs,packages}/**/*.js" --fix
 
 ## Run CSS linting. See ignored path in .stylelintignore.
 yarn stylelint "{docs,packages}/**/*.scss" --fix

scripts/svgo-plugin-add-classes-to-svg-element.cjs

@@ -5,7 +5,7 @@ const path = require('path');
 exports.name = 'addClassesToSVGElement';
 exports.description = 'adds classnames to an outer <svg> element';
 
-var ENOCLS = `Error in plugin "addClassesToSVGElement": absent parameters.
+const ENOCLS = `Error in plugin "addClassesToSVGElement": absent parameters.
 It should have a list of classes in "classNames" or one "className".
 Config example:
 plugins: [
@@ -42,52 +42,50 @@ plugins: [
  * Add classnames to an outer <svg> element. Example config:
  *
  * plugins: [
- *   {
- *     name: "addClassesToSVGElement",
- *     params: {
- *       className: "mySvg"
- *     }
- *   }
+ * {
+ * name: "addClassesToSVGElement",
+ * params: {
+ * className: "mySvg"
+ * }
+ * }
  * ]
  *
  * plugins: [
- *   {
- *     name: "addClassesToSVGElement",
- *     params: {
- *       classNames: ["mySvg", "size-big"]
- *     }
- *   }
+ * {
+ * name: "addClassesToSVGElement",
+ * params: {
+ * classNames: ["mySvg", "size-big"]
+ * }
+ * }
  * ]
  *
  * Use the suffixPattern parameter to add an arbitrary suffix to
  * the class names.
  *
  * plugins: [
- *   {
- *     name: "addClassesToSVGElement",
- *     params: {
- *       classNames: ["mySvg"],
- *       suffixPattern: "__$FILENAME"
- *     }
- *   }
+ * {
+ * name: "addClassesToSVGElement",
+ * params: {
+ * classNames: ["mySvg"],
+ * suffixPattern: "__$FILENAME"
+ * }
+ * }
  * ]
  *
  * Use the boolean doesPreserveClasses parameter to preserve any
  * existing classes on the SVG element, otherwise any existing
  * classes will be removed.
  *
  * plugins: [
- *   {
- *     name: "addClassesToSVGElement",
- *     params: {
- *       classNames: ["mySvg"],
- *       doesPreserveClasses: true
- *     }
- *   }
+ * {
+ * name: "addClassesToSVGElement",
+ * params: {
+ * classNames: ["mySvg"],
+ * doesPreserveClasses: true
+ * }
+ * }
  * ]
- *
  * @author April Arcus, Anselm Bradford
- *
  * @type {import('./plugins-types').Plugin<'addClassesToSVGElement'>}
  */
 exports.fn = (root, params, info) => {
@@ -114,7 +112,7 @@ exports.fn = (root, params, info) => {
     let suffixPattern = params.suffixPattern;
     const filename = path.basename(info.path, '.svg');
     suffixPattern = suffixPattern.replace('$FILENAME', filename);
-    for (var i = 0, len = classNames.length; i < len; i++) {
+    for (let i = 0, len = classNames.length; i < len; i++) {
       classNames.push(classNames[i] + suffixPattern);
     }
   }

test/cypress/e2e/docs/decap-cms.cy.js

@@ -1,6 +1,3 @@
-/* eslint-disable handle-callback-err */
-/* eslint-disable no-undef */
-
 const getIframeBody = () => {
   // Get the iframe > document > body
   // and retry until the body element is not empty