chore(deps): update all dependencies (major)

eslint.config.mjs

@@ -0,0 +1,134 @@
+import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
+import prettier from "eslint-plugin-prettier";
+import cypress from "eslint-plugin-cypress";
+import testingLibrary from "eslint-plugin-testing-library";
+import babelParser from "@babel/eslint-parser";
+import path from "node:path";
+import tseslint from "typescript-eslint";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+import react from "eslint-plugin-react";
+import hooksPlugin from "eslint-plugin-react-hooks";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  ...fixupConfigRules(
+    compat.extends("plugin:cypress/recommended", "plugin:prettier/recommended"),
+  ),
+  ...tseslint.configs.recommended,
+  react.configs.flat.recommended,
+  {
+    plugins: {
+      "react-hooks": fixupPluginRules(hooksPlugin),
+    },
+    rules: hooksPlugin.configs.recommended.rules,
+  },
+  {
+    plugins: {
+      prettier: fixupPluginRules(prettier),
+      cypress: fixupPluginRules(cypress),
+      "@typescript-eslint": tseslint.plugin,
+    },
+    languageOptions: {
+      parser: babelParser,
+      ecmaVersion: 2018,
+      sourceType: "module",
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+    rules: {
+      "react/forbid-component-props": [
+        "error",
+        {
+          forbid: [
+            {
+              propName: "data-test",
+              message: "Use `data-testid` instead of `data-test` attribute",
+            },
+          ],
+        },
+      ],
+      "react/forbid-dom-props": [
+        "error",
+        {
+          forbid: [
+            {
+              propName: "data-test",
+              message: "Use `data-testid` instead of `data-test` attribute",
+            },
+          ],
+        },
+      ],
+      "react/display-name": "off",
+      "react/prop-types": "off",
+      "react/no-unescaped-entities": "off",
+      "@typescript-eslint/no-empty-object-type": "off",
+      "@typescript-eslint/no-unused-expressions": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          argsIgnorePattern: "^_",
+          destructuredArrayIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+        },
+      ],
+    },
+  },
+  ...fixupConfigRules(compat.extends("plugin:prettier/recommended")).map(
+    (config) => ({
+      ...config,
+      files: ["**/*.ts?(x)"],
+    }),
+  ),
+  {
+    files: ["**/*.ts?(x)"],
+    languageOptions: {
+      parser: tseslint.parser,
+      ecmaVersion: 2018,
+      sourceType: "module",
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+    rules: {
+      "prettier/prettier": "error",
+    },
+  },
+  {
+    plugins: {
+      "testing-library": fixupPluginRules({
+        rules: testingLibrary.rules,
+      }),
+    },
+    files: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
+    rules: {
+      ...testingLibrary.configs["flat/react"].rules,
+      "testing-library/no-node-access": "off",
+      "testing-library/no-container": "off",
+      "testing-library/no-render-in-lifecycle": "off",
+    },
+  },
+];

package.json

@@ -27,7 +27,12 @@
   "devDependencies": {
     "@babel/cli": "7.25.6",
     "@babel/eslint-parser": "7.25.1",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/preset-react": "7.24.7",
     "@babel/preset-typescript": "7.24.7",
+    "@eslint/compat": "1.1.1",
+    "@eslint/eslintrc": "3.1.0",
+    "@eslint/js": "9.9.1",
     "@percy/cli": "1.29.3",
     "@percy/storybook": "6.0.2",
     "@semantic-release/changelog": "6.0.3",
@@ -44,11 +49,9 @@
     "@testing-library/cypress": "10.0.2",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.5.0",
-    "@testing-library/react": "15.0.7",
+    "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
     "@types/lodash.isequal": "4",
-    "@typescript-eslint/eslint-plugin": "7.18.0",
-    "@typescript-eslint/parser": "7.18.0",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "babel-plugin-module-resolver": "5.0.2",
@@ -57,29 +60,29 @@
     "css-loader": "7.1.2",
     "cypress": "13.14.1",
     "deepmerge": "4.3.1",
-    "eslint": "8.57.0",
+    "eslint": "9.9.1",
     "eslint-config-prettier": "9.1.0",
-    "eslint-config-react-app": "7.0.1",
     "eslint-plugin-cypress": "3.5.0",
     "eslint-plugin-flowtype": "8.0.3",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsx-a11y": "6.9.0",
     "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "7.35.1",
+    "eslint-plugin-react": "7.35.2",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-testing-library": "6.3.0",
     "formik": "2.4.6",
     "jest": "29.7.0",
-    "npm-package-json-lint": "7.1.0",
+    "npm-package-json-lint": "8.0.0",
     "prettier": "3.3.3",
     "react": "18.3.1",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "18.3.1",
     "sass": "1.77.8",
-    "sass-loader": "14.2.1",
-    "semantic-release": "23.1.1",
+    "sass-loader": "16.0.1",
+    "semantic-release": "24.1.0",
     "storybook": "8.2.9",
+    "strip-ansi": "7.1.0",
     "style-loader": "4.0.0",
     "stylelint": "16.9.0",
     "stylelint-config-prettier": "9.0.5",
@@ -89,8 +92,9 @@
     "ts-jest": "29.2.5",
     "tsc-alias": "1.8.10",
     "typescript": "5.5.4",
+    "typescript-eslint": "8.4.0",
     "vanilla-framework": "4.15.0",
-    "wait-on": "7.2.0",
+    "wait-on": "8.0.0",
     "webpack": "5.94.0"
   },
   "dependencies": {
@@ -110,7 +114,8 @@
     "@types/react": "18.3.5",
     "@types/react-dom": "18.3.0",
     "postcss": "^8.3.11",
-    "jackspeak": "2.3.6"
+    "jackspeak": "2.1.1",
+    "strip-ansi": "6.0.1"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",
@@ -145,9 +150,6 @@
     "semantic-release": "semantic-release",
     "semantic-release-dry-run": "semantic-release --dry-run --no-ci"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": {
     "production": [
       ">0.2%",

src/components/Accordion/AccordionSection/AccordionSection.test.tsx

@@ -29,7 +29,6 @@ describe("AccordionSection ", () => {
       />,
     );
     // Query for the specific element as defined in the titleElement prop.
-    // eslint-disable-next-line testing-library/no-node-access
     const title = screen.getByRole("heading");
     expect(title.tagName).toBe("H4");
     expect(title).not.toHaveAttribute("aria-level");

src/components/ActionButton/ActionButton.test.tsx

@@ -31,15 +31,13 @@ describe("ActionButton", () => {
     expect(screen.getByLabelText(Label.WAITING)).toBeInTheDocument();
     const icon = ".p-icon--spinner";
     // Check for the visual element.
-    // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelector(icon)).toBeInTheDocument();
     // Move on to the success state.
     rerender(<ActionButton success>Click me</ActionButton>);
     act(() => {
       jest.advanceTimersByTime(LOADER_MIN_DURATION);
     });
     expect(screen.queryByLabelText(Label.WAITING)).not.toBeInTheDocument();
-    // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelector(icon)).not.toBeInTheDocument();
   });
 
@@ -54,13 +52,11 @@ describe("ActionButton", () => {
     expect(screen.getByLabelText(Label.SUCCESS)).toBeInTheDocument();
     const icon = ".p-icon--success";
     // Check for the visual element.
-    // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelector(icon)).toBeInTheDocument();
     act(() => {
       jest.advanceTimersByTime(SUCCESS_DURATION + 1);
     });
     expect(screen.queryByLabelText(Label.SUCCESS)).not.toBeInTheDocument();
-    // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelector(icon)).not.toBeInTheDocument();
   });
 });

src/components/Card/Card.test.tsx

@@ -19,7 +19,6 @@ describe("Card ", () => {
   it("can display a header", () => {
     render(<Card thumbnail="test.png"></Card>);
     // Find the visible image in the DOM.
-    // eslint-disable-next-line testing-library/no-node-access
     const image = document.querySelector(".p-card__thumbnail");
     expect(image).toBeInTheDocument();
     expect(image).toHaveAttribute("src", "test.png");

src/components/CheckboxInput/CheckableInput/CheckableInput.test.tsx

@@ -30,7 +30,6 @@ describe("CheckableInput ", () => {
         required
       ></CheckableInput>,
     );
-    // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelector("label")).toHaveClass("is-required");
   });
 
@@ -42,7 +41,6 @@ describe("CheckableInput ", () => {
         inline
       ></CheckableInput>,
     );
-    // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelector("label")).toHaveClass("p-radio--inline");
   });
 
@@ -65,7 +63,6 @@ describe("CheckableInput ", () => {
         labelClassName="label-class-name"
       />,
     );
-    // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelector("label")).toHaveClass("label-class-name");
   });
 });