HCRC-156 | Upgrade to Eslint v9

eslint.config.mjs

@@ -0,0 +1,197 @@
+import js from '@eslint/js';
+import stylisticPlugin from '@stylistic/eslint-plugin';
+import tseslint from 'typescript-eslint';
+import tsParser from '@typescript-eslint/parser';
+import importPlugin from 'eslint-plugin-import';
+import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
+import prettierPlugin from 'eslint-plugin-prettier';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import globals from 'globals';
+
+const files = [
+  '**/*.js',
+  '**/*.jsx',
+  '**/*.ts',
+  '**/*.tsx',
+  '**/*.cjs',
+  '**/*.mjs',
+];
+
+export default [
+  // Ignores
+  {
+    ignores: [
+      'src/common/eventsService/__generated__.ts',
+      'src/common/headlessService/__generated__.ts',
+      'src/common/venuesService/__generated__.ts',
+    ],
+  },
+
+  js.configs.recommended,
+  tseslint.configs.eslintRecommended,
+  ...tseslint.configs.recommended,
+
+  // react config
+  {
+    files,
+    plugins: { react: reactPlugin },
+    rules: {
+      ...reactPlugin.configs.recommended.rules,
+      'react/jsx-filename-extension': ['error', { extensions: ['.tsx'] }],
+      'react/jsx-props-no-spreading': 'off',
+      'react/prop-types': 'off',
+      'react/require-default-props': 'off',
+      'react/react-in-jsx-scope': 'off',
+      // Extra
+      'react/jsx-no-target-blank': 'warn',
+      'react/jsx-no-useless-fragment': 'warn',
+      'react/function-component-definition': ['error'],
+      'react/no-array-index-key': 'error',
+    },
+  },
+
+  // react-hooks config
+  {
+    files,
+    plugins: { 'react-hooks': reactHooksPlugin },
+    rules: reactHooksPlugin.configs.recommended.rules,
+  },
+
+  // jsx-a11y config
+  {
+    files,
+    plugins: { 'jsx-a11y': jsxA11yPlugin },
+    rules: {
+      ...jsxA11yPlugin.flatConfigs.recommended.rules,
+      'jsx-a11y/label-has-associated-control': [
+        2,
+        {
+          required: {
+            some: ['nesting', 'id'],
+          },
+        },
+      ],
+    },
+  },
+
+  // import config
+  {
+    files,
+    plugins: { import: importPlugin },
+    rules: {
+      ...importPlugin.flatConfigs.errors.rules,
+      ...importPlugin.flatConfigs.warnings.rules,
+      ...importPlugin.flatConfigs.typescript.rules,
+      'import/no-extraneous-dependencies': [
+        'error',
+        {
+          devDependencies: [
+            'src/common/utils/customRender.tsx', // Used by tests only
+            '**/*.test.ts*',
+            '**/__mocks__/*.ts*',
+            '**/mocks/**/*.ts*',
+            '**/*.stories.ts*',
+            'rollup.config.*',
+          ],
+        },
+      ],
+      'import/extensions': 'off',
+      'import/order': [
+        'error',
+        {
+          groups: [
+            'builtin',
+            'external',
+            'internal',
+            ['parent', 'sibling', 'index'],
+          ],
+          'newlines-between': 'always',
+        },
+      ],
+      'import/prefer-default-export': 'off',
+    },
+  },
+
+  // Stylistic rules
+  {
+    files,
+    plugins: { '@stylistic': stylisticPlugin },
+    rules: {
+      '@stylistic/brace-style': ['error', '1tbs', { allowSingleLine: true }],
+      'array-bracket-spacing': ['warn', 'never'],
+      'object-curly-spacing': ['warn', 'always'],
+    },
+  },
+
+  // prettier config
+  {
+    files,
+    plugins: { prettier: prettierPlugin },
+    rules: {
+      ...prettierPlugin.configs.recommended.rules,
+      'prettier/prettier': 'error',
+      // Turn off rules that may cause problems, see
+      // https://github.com/prettier/eslint-plugin-prettier/issues/65
+      'arrow-body-style': 'off',
+      'prefer-arrow-callback': 'off',
+    },
+  },
+
+  // General rules
+  {
+    files,
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        ecmaVersion: 2018,
+        ecmaFeatures: { jsx: true },
+        projectService: true, // For enabling types
+        tsconfigRootDir: import.meta.dirname,
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.jest,
+      },
+    },
+    settings: {
+      react: { version: 'detect' },
+      'import/resolver': {
+        node: {
+          extensions: ['.js', '.jsx', '.ts', '.tsx'],
+          paths: ['src'],
+        },
+      },
+    },
+    linterOptions: {
+      reportUnusedDisableDirectives: true,
+    },
+    rules: {
+      'consistent-return': 'error',
+      'func-names': ['error', 'always'],
+      'no-bitwise': 'error',
+      'no-console': 'warn',
+      'no-nested-ternary': 'error',
+      'no-plusplus': 'error',
+      'no-shadow': 'off',
+      'no-undef': 'warn',
+      'no-underscore-dangle': 'error',
+      'no-unused-vars': 'off',
+    },
+  },
+
+  // Overrides for typescript files
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    rules: {
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/consistent-type-imports': 'error',
+      '@typescript-eslint/no-unused-vars': ['error'],
+      '@typescript-eslint/no-shadow': ['error'],
+      'no-undef': 'off',
+      'no-empty-function': 'off', // Disable base rule to avoid conflicts
+      '@typescript-eslint/no-empty-function': 'warn', // Enable TS version
+    },
+  },
+];

package.json

@@ -10,8 +10,8 @@
     "dev": "yarn storybook",
     "dev:no-open": "yarn storybook --no-open",
     "typecheck": "tsc --project ./tsconfig.json --noEmit",
-    "lint": "yarn eslint \"src/**/*.{ts,tsx}\" && yarn prettier ./src -c",
-    "lint-fix": "yarn eslint \"src/**/*.{ts,tsx}\" --fix && yarn prettier ./src -w",
+    "lint": "yarn eslint src && yarn prettier ./src -c",
+    "lint-fix": "yarn eslint src --fix && yarn prettier ./src -w",
     "test": "jest",
     "test:staged": "jest --findRelatedTests --passWithNoTests",
     "test-storybook": "test-storybook",
@@ -82,6 +82,7 @@
     "@chromatic-com/storybook": "^4.1.3",
     "@commitlint/cli": "^20.2.0",
     "@commitlint/config-conventional": "^20.2.0",
+    "@eslint/js": "^9.39.2",
     "@graphql-codegen/cli": "^5.0.7",
     "@graphql-codegen/typescript": "^4.1.6",
     "@graphql-codegen/typescript-operations": "^4.6.1",
@@ -97,6 +98,7 @@
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react-webpack5": "^10.1.6",
     "@storybook/test-runner": "^0.24.2",
+    "@stylistic/eslint-plugin": "^5.6.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
@@ -106,23 +108,22 @@
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.3.27",
     "@types/react-dom": "18.3.7",
-    "@typescript-eslint/eslint-plugin": "^8.49.0",
-    "@typescript-eslint/parser": "^8.49.0",
     "axe-playwright": "^2.2.2",
     "babel-jest": "^30.2.0",
     "babel-loader": "^9.2.1",
     "cross-env": "^7.0.3",
     "crypto-browserify": "^3.12.1",
     "css-loader": "^6.11.0",
     "edit-json-file": "^1.8.1",
-    "eslint": "^8.57.1",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^9.1.2",
+    "eslint": "^9.39.2",
+    "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "git-rev-sync": "^3.0.2",
+    "globals": "^16.5.0",
     "graphql": "^16.12.0",
     "hds-react": "4.8.1",
     "husky": "^9.1.7",
@@ -152,6 +153,7 @@
     "style-loader": "^4.0.0",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
+    "typescript-eslint": "^8.49.0",
     "webpack": "^5.103.0"
   },
   "dependencies": {

rollup.config.js

@@ -1,5 +1,4 @@
 /* eslint-disable no-use-before-define */
-/* eslint-disable import/no-extraneous-dependencies */
 import path from 'path';
 
 import babel from '@rollup/plugin-babel';

src/apollo/apollo-custom-template.stories.tsx

@@ -59,9 +59,10 @@ const CustomPageContentLayout: typeof PageContentLayout = ({
   </div>
 );
 
-const getTemplate =
-  (dataSource: keyof typeof CmsEndpoint): StoryFn<typeof Page> =>
-  (args) => {
+function getTemplate(
+  dataSource: keyof typeof CmsEndpoint,
+): StoryFn<typeof Page> {
+  return function ApolloCustomTemplate(args) {
     const {
       apolloClient,
       eventsApolloClient,
@@ -99,6 +100,7 @@ const getTemplate =
       </HelmetProvider>
     );
   };
+}
 
 export default {
   title: 'Apollo examples/Custom template',