Updated eslint package, migrated to the new eslint config system

eslint.config.mjs

@@ -0,0 +1,147 @@
+import { fixupPluginRules } from '@eslint/compat'
+import { FlatCompat } from '@eslint/eslintrc'
+import js from '@eslint/js'
+import typescriptEslint from '@typescript-eslint/eslint-plugin'
+import tsParser from '@typescript-eslint/parser'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import testingLibrary from 'eslint-plugin-testing-library'
+import globals from 'globals'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+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 [
+  {
+    ignores: ['src/assets/*', 'src/stories/assets/*']
+  },
+  ...compat.extends(
+    'eslint:recommended',
+    'plugin:prettier/recommended',
+    'plugin:react/recommended',
+    'plugin:storybook/recommended',
+    'plugin:vitest-globals/recommended'
+  ),
+  {
+    plugins: {
+      react,
+      'testing-library': testingLibrary,
+      'react-hooks': fixupPluginRules(reactHooks)
+    },
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.es2021,
+        'vitest-globals/env': true
+      },
+      ecmaVersion: 2021,
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true
+        }
+      }
+    },
+    settings: {
+      react: {
+        version: 'detect'
+      }
+    },
+    rules: {
+      'prefer-arrow-callback': ['error'],
+      'react/jsx-boolean-value': 'error',
+      'react/jsx-closing-bracket-location': 'error',
+      'react/jsx-equals-spacing': 'error',
+      'react/jsx-first-prop-new-line': 'error',
+      'react/jsx-handler-names': 'error',
+      'react/jsx-key': 'error',
+      'react/react-in-jsx-scope': 'off',
+      'react/jsx-pascal-case': 'error',
+      'react/jsx-sort-props': 'error',
+      'react/jsx-no-useless-fragment': [
+        'error',
+        {
+          allowExpressions: true
+        }
+      ],
+      'react/jsx-max-depth': [
+        'error',
+        {
+          max: 6
+        }
+      ],
+      'react/jsx-wrap-multilines': [
+        'error',
+        {
+          declaration: 'parens',
+          assignment: 'parens',
+          return: 'parens-new-line',
+          arrow: 'parens',
+          condition: 'parens',
+          logical: 'parens',
+          prop: 'ignore'
+        }
+      ],
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+      'react/prop-types': 'off'
+    }
+  },
+  ...compat
+    .extends(
+      'plugin:@typescript-eslint/recommended',
+      'plugin:@typescript-eslint/recommended-requiring-type-checking'
+    )
+    .map((config) => ({
+      ...config,
+      files: ['**/*.ts', '**/*.tsx']
+    })),
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    plugins: {
+      '@typescript-eslint': typescriptEslint
+    },
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 5,
+      sourceType: 'script',
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: './tsconfig.eslint.json'
+      }
+    },
+    rules: {
+      '@typescript-eslint/no-restricted-imports': [
+        'warn',
+        {
+          name: 'react-redux',
+          importNames: ['useSelector', 'useDispatch'],
+          message:
+            'Use typed hooks `useAppDispatch` and `useAppSelector` instead.'
+        }
+      ]
+    }
+  },
+  {
+    files: ['**/tests/**/*.*.js', '**/tests/**/*.js'],
+    languageOptions: {
+      globals: {
+        ...globals.jest
+      }
+    }
+  },
+  {
+    files: ['**/*.stories.*'],
+    rules: {
+      'import/no-anonymous-default-export': 'off'
+    }
+  }
+]

package.json

@@ -40,6 +40,9 @@
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",
+    "@eslint/compat": "^1.1.1",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.7.0",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-interactions": "^6.5.16",
@@ -68,15 +71,16 @@
     "c8": "^8.0.1",
     "cross-env": "^7.0.3",
     "css-mediaquery": "^0.1.2",
-    "eslint": "^8.52.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.1",
-    "eslint-plugin-testing-library": "^6.1.0",
+    "eslint": "^9.7.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-testing-library": "^6.2.2",
     "eslint-plugin-typescript": "^0.14.0",
-    "eslint-plugin-vitest-globals": "^1.4.0",
+    "eslint-plugin-vitest-globals": "^1.5.0",
+    "globals": "^15.8.0",
     "husky": "^8.0.3",
     "jsdom": "^22.1.0",
     "lint-staged": "^15.0.2",

tsconfig.eslint.json

@@ -3,6 +3,6 @@
   "compilerOptions": {
     "esModuleInterop": true
   },
-  "include": ["src", "vite.config.ts", "vitest.config.ts", ".eslintrc.js"],
+  "include": ["src", "vite.config.ts", "vitest.config.ts", "eslint.config.mjs"],
   "exclude": ["node_modules", "dist", "coverage", "tests"]
 }