chore: updated ESLint to v9 with flat config

.github/workflows/lint-and-tests.yml

@@ -82,7 +82,6 @@ jobs:
             .turbo/cache
             node_modules/.cache
             .eslintmdcache
-            .eslintjscache
             .stylelintcache
             .prettiercache
           # We want to restore Turborepo Cache and ESlint and Prettier Cache
@@ -136,7 +135,6 @@ jobs:
             .turbo/cache
             node_modules/.cache
             .eslintmdcache
-            .eslintjscache
             .stylelintcache
             .prettiercache
           key: cache-lint-${{ hashFiles('package-lock.json') }}-${{ hashFiles('.turbo/cache/**') }}

.gitignore

@@ -24,7 +24,6 @@ build-storybook.log
 cache
 
 # Cache Files
-.eslintjscache
 .eslintmdcache
 .stylelintcache
 .prettiercache

.prettierignore

@@ -26,7 +26,6 @@ build-storybook.log
 cache
 
 # Cache Files
-.eslintjscache
 .eslintmdcache
 .stylelintcache
 .prettiercache

apps/site/.storybook/main.ts

@@ -1,5 +1,5 @@
-import classNames from 'classnames';
 import type { StorybookConfig } from '@storybook/nextjs';
+import classNames from 'classnames';
 
 const rootClasses = classNames(
   // note: this is hard-coded sadly as next/font can only be loaded within next.js context

apps/site/.storybook/preview.tsx

@@ -1,11 +1,10 @@
-import { NextIntlClientProvider } from 'next-intl';
-
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
-import { NotificationProvider } from '@/providers/notificationProvider';
-import { STORYBOOK_MODES, STORYBOOK_SIZES } from '@/.storybook/constants';
 import type { Preview, ReactRenderer } from '@storybook/react';
+import { NextIntlClientProvider } from 'next-intl';
 
+import { STORYBOOK_MODES, STORYBOOK_SIZES } from '@/.storybook/constants';
 import englishLocale from '@/i18n/locales/en.json';
+import { NotificationProvider } from '@/providers/notificationProvider';
 
 import '../next.fonts';
 import '../styles/index.css';

apps/site/components/withChangelogModal.tsx

@@ -62,7 +62,7 @@ const WithChangelogModal: FC<WithChangelogModalProps> = ({
             }
           );
         }
-      } catch (_) {
+      } catch {
         throw new Error(`Failed to fetch changelog for, ${versionWithPrefix}`);
       }
     };

apps/site/components/withDownloadCategories.tsx

@@ -13,6 +13,7 @@ const WithDownloadCategories: FC<PropsWithChildren> = async ({ children }) => {
   const t = await getTranslations();
   const releases = await getReleaseData();
 
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const { pathname } = useClientContext();
   const { page, category, subCategory } = getDownloadCategory(pathname);
 

apps/site/eslint.config.js

@@ -0,0 +1,146 @@
+import { fixupPluginRules } from '@eslint/compat';
+import { FlatCompat } from '@eslint/eslintrc';
+import js from '@eslint/js';
+import importX from 'eslint-plugin-import-x';
+import * as mdx from 'eslint-plugin-mdx';
+import noRelativeImportPaths from 'eslint-plugin-no-relative-import-paths';
+import react from 'eslint-plugin-react';
+import storybook from 'eslint-plugin-storybook';
+import tseslint from 'typescript-eslint';
+
+const compat = new FlatCompat();
+const pluginToPatch = '@next/next';
+
+const compatConfig = compat
+  .config({
+    extends: [
+      // https://github.com/vercel/next.js/discussions/49337
+      'plugin:@next/eslint-plugin-next/core-web-vitals',
+
+      // https://github.com/facebook/react/issues/28313
+      'plugin:react-hooks/recommended',
+    ],
+  })
+  .map(entry => {
+    if (Object.hasOwn(entry.plugins, pluginToPatch)) {
+      entry.plugins[pluginToPatch] = fixupPluginRules(
+        entry.plugins[pluginToPatch]
+      );
+    }
+
+    return entry;
+  });
+
+export default tseslint.config(
+  {
+    ignores: [
+      '.next',
+      '.swc',
+      '.turbo',
+      'build',
+      'coverage',
+      'global.d.ts',
+      'junit.xml',
+      'storybook-static/**',
+    ],
+  },
+  {
+    extends: [
+      js.configs.recommended,
+      importX.flatConfigs.recommended,
+      importX.flatConfigs.typescript,
+      react.configs.flat['jsx-runtime'],
+      ...tseslint.configs.recommended,
+      ...compatConfig,
+    ],
+    files: ['**/*.{js,md,mdx,mjs,ts,tsx}'],
+    plugins: {
+      'no-relative-import-paths': noRelativeImportPaths,
+    },
+    rules: {
+      '@typescript-eslint/array-type': ['error', { default: 'generic' }],
+      '@typescript-eslint/consistent-type-imports': 'error',
+      '@typescript-eslint/no-require-imports': 'off',
+      'import-x/namespace': 'off',
+      'import-x/no-named-as-default-member': 'off',
+      'import-x/no-unresolved': 'off',
+      'import-x/order': [
+        'error',
+        {
+          groups: [
+            'builtin',
+            'external',
+            'internal',
+            ['sibling', 'parent'],
+            'index',
+            'unknown',
+          ],
+          'newlines-between': 'always',
+          alphabetize: {
+            order: 'asc',
+            caseInsensitive: true,
+          },
+        },
+      ],
+      'no-relative-import-paths/no-relative-import-paths': [
+        'warn',
+        { allowSameFolder: true, prefix: '@' },
+      ],
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+  {
+    files: ['**/*.{md,mdx}'],
+    extends: [mdx.configs.flat],
+    rules: {
+      'no-irregular-whitespace': 'off',
+      '@next/next/no-img-element': 'off',
+
+      // https://github.com/typescript-eslint/typescript-eslint/issues/9860
+      '@typescript-eslint/consistent-type-imports': 'off',
+    },
+  },
+  {
+    files: ['**/*.{mdx,tsx}'],
+    rules: {
+      '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
+      'react/no-unescaped-entities': 'off',
+      'react/function-component-definition': [
+        'error',
+        {
+          namedComponents: 'arrow-function',
+          unnamedComponents: 'arrow-function',
+        },
+      ],
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector:
+            "ImportDeclaration[source.value='react'][specifiers.0.type='ImportDefaultSpecifier']",
+          message:
+            'Default React import not allowed since we use the TypeScript jsx-transform. If you need a global type that collides with a React named export (such as `MouseEvent`), try using `globalThis.MouseHandler`',
+        },
+        {
+          selector:
+            "ImportDeclaration[source.value='react'] :matches(ImportNamespaceSpecifier)",
+          message:
+            'Named * React import is not allowed. Please import what you need from React with Named Imports',
+        },
+      ],
+    },
+  },
+  {
+    files: ['.storybook/**', '**/*.mjs', '**/*.test.*'],
+    rules: {
+      'no-relative-import-paths/no-relative-import-paths': 'off',
+    },
+  },
+  {
+    files: ['components/**/*.stories.tsx'],
+    extends: [...storybook.configs['flat/recommended']],
+  }
+);

apps/site/layouts/Download.tsx

@@ -10,6 +10,7 @@ import styles from './layouts.module.css';
 const DownloadLayout: FC<PropsWithChildren> = async ({ children }) => {
   const {
     frontmatter: { title, subtitle },
+    // eslint-disable-next-line react-hooks/rules-of-hooks
   } = useClientContext();
 
   return (

apps/site/package.json

@@ -23,7 +23,7 @@
     "start": "cross-env NODE_NO_WARNINGS=1 next start",
     "deploy": "cross-env NEXT_PUBLIC_STATIC_EXPORT=true npm run build",
     "check-types": "tsc --noEmit",
-    "lint:js": "eslint \"**/*.{js,mjs,ts,tsx}\" --cache --cache-strategy=content --cache-location=.eslintjscache",
+    "lint:js": "eslint \"**/*.{js,mjs,ts,tsx}\"",
     "lint:md": "eslint \"**/*.md?(x)\" --cache --cache-strategy=content --cache-location=.eslintmdcache",
     "lint:css": "stylelint \"**/*.css\" --allow-empty-input --cache --cache-strategy=content --cache-location=.stylelintcache",
     "lint": "turbo run lint:md lint:js lint:css",
@@ -89,6 +89,8 @@
     "vfile-matter": "~5.0.0"
   },
   "devDependencies": {
+    "@eslint/compat": "^1.1.1",
+    "@next/eslint-plugin-next": "^14.2.8",
     "@storybook/addon-controls": "~8.2.7",
     "@storybook/addon-interactions": "~8.2.7",
     "@storybook/addon-themes": "~8.2.7",
@@ -101,14 +103,16 @@
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/semver": "~7.5.8",
-    "@typescript-eslint/eslint-plugin": "7.11.0",
-    "@typescript-eslint/parser": "7.11.0",
-    "eslint": "8.57.0",
+    "eslint": "^9.9.1",
     "eslint-config-next": "~14.2.3",
     "eslint-config-prettier": "9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-plugin-import-x": "^4.2.1",
     "eslint-plugin-mdx": "3.1.5",
     "eslint-plugin-no-relative-import-paths": "^1.5.3",
-    "eslint-plugin-storybook": "0.8.0",
+    "eslint-plugin-react": "^7.35.2",
+    "eslint-plugin-react-hooks": "5.1.0-rc-4c58fce7-20240904",
+    "eslint-plugin-storybook": "0.9.0--canary.156.da7873a.0",
     "handlebars": "4.7.8",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
@@ -120,6 +124,10 @@
     "stylelint-config-standard": "36.0.0",
     "stylelint-order": "6.0.4",
     "stylelint-selector-bem-pattern": "4.0.0",
+    "typescript-eslint": "^8.4.0",
     "user-agent-data-types": "0.4.2"
+  },
+  "overrides": {
+    "eslint": "$eslint"
   }
 }