[core] Migrate to eslint 9

mantinedev · Sep 2, 2024 · e5f3a53 · e5f3a53
1 parent 133b7bf
commit e5f3a53
Show file tree

Hide file tree

Showing 202 changed files with 1,785 additions and 1,171 deletions.
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/apps/help.mantine.dev/src/components/MdxLayout/TableOfContents/get-headings.ts b/apps/help.mantine.dev/src/components/MdxLayout/TableOfContents/get-headings.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-loop-func */
 export interface Heading {
   depth: number;
   content: string;

diff --git a/...ombobox-examples/examples/AutocompleteSelectFirstOption/AutocompleteSelectFirstOption.tsx b/...ombobox-examples/examples/AutocompleteSelectFirstOption/AutocompleteSelectFirstOption.tsx
@@ -28,7 +28,7 @@ export function AutocompleteSelectFirstOption() {
   ));
 
   useEffect(() => {
-    // we need to wait for options to render before we can select first one
+    // We need to wait for options to render before we can select first one
     combobox.selectFirstOption();
   }, [value]);
 

diff --git a/apps/mantine.dev/src/components/CssVariablesList/CssVariablesList.tsx b/apps/mantine.dev/src/components/CssVariablesList/CssVariablesList.tsx
@@ -5,21 +5,27 @@ import { CssVariableColorSwatch } from './CssVariableColorSwatch/CssVariableColo
 export function CssVariablesList() {
   const resolvedVariables = defaultCssVariablesResolver(DEFAULT_THEME);
   const variables = keys(resolvedVariables.variables).map((key) => [
-    <Code style={{ whiteSpace: 'nowrap' }}>{key}</Code>,
+    <Code style={{ whiteSpace: 'nowrap' }} key="code">
+      {key}
+    </Code>,
     resolvedVariables.variables[key],
-    <CssVariableColorSwatch variable={resolvedVariables.variables[key]} />,
+    <CssVariableColorSwatch variable={resolvedVariables.variables[key]} key="swatch" />,
   ]);
 
   const lightVariables = keys(resolvedVariables.light).map((key) => [
-    <Code style={{ whiteSpace: 'nowrap' }}>{key}</Code>,
+    <Code style={{ whiteSpace: 'nowrap' }} key="code">
+      {key}
+    </Code>,
     resolvedVariables.light[key],
-    <CssVariableColorSwatch variable={resolvedVariables.light[key]} />,
+    <CssVariableColorSwatch variable={resolvedVariables.light[key]} key="swatch" />,
   ]);
 
   const darkVariables = keys(resolvedVariables.dark).map((key) => [
-    <Code style={{ whiteSpace: 'nowrap' }}>{key}</Code>,
+    <Code style={{ whiteSpace: 'nowrap' }} key="code">
+      {key}
+    </Code>,
     resolvedVariables.dark[key],
-    <CssVariableColorSwatch variable={resolvedVariables.dark[key]} />,
+    <CssVariableColorSwatch variable={resolvedVariables.dark[key]} key="swatch" />,
   ]);
 
   return (

diff --git a/apps/mantine.dev/src/components/CssVariablesTable/CssVariablesTable.tsx b/apps/mantine.dev/src/components/CssVariablesTable/CssVariablesTable.tsx
@@ -9,7 +9,9 @@ export function CssVariablesTable({ variables }: CssVariablesTableProps) {
   const resolvedVariables = defaultCssVariablesResolver(DEFAULT_THEME);
 
   const data = variables.map((variable) => [
-    <Code style={{ whiteSpace: 'nowrap' }}>{variable}</Code>,
+    <Code style={{ whiteSpace: 'nowrap' }} key="code">
+      {variable}
+    </Code>,
     resolvedVariables.variables[variable as keyof typeof resolvedVariables.variables],
   ]);
 

diff --git a/apps/mantine.dev/src/components/MdxProvider/MdxLink/MdxLink.tsx b/apps/mantine.dev/src/components/MdxProvider/MdxLink/MdxLink.tsx
@@ -3,9 +3,9 @@ import { Anchor } from '@mantine/core';
 import classes from './MdxLink.module.css';
 
 export function MdxLink({ href, ...others }: React.ComponentPropsWithoutRef<'a'>) {
-  const replaced = href?.replace('https://mantine.dev', '')!;
+  const replaced = href?.replace('https://mantine.dev', '');
 
-  if (!replaced?.startsWith('http') && replaced.trim().length > 0) {
+  if (replaced && !replaced?.startsWith('http') && replaced.trim().length > 0) {
     return <Anchor className={classes.link} component={Link} href={replaced} {...others} />;
   }
 

diff --git a/apps/mantine.dev/src/components/Shell/Navbar/NavbarLinksGroup/NavbarLinksGroup.tsx b/apps/mantine.dev/src/components/Shell/Navbar/NavbarLinksGroup/NavbarLinksGroup.tsx
@@ -51,7 +51,7 @@ interface NavbarLinksGroupProps {
 export function NavbarLinksGroup({ data, onNavbarClose }: NavbarLinksGroupProps) {
   const router = useRouter();
   const [opened, setOpened] = useState(hasActiveLink(data, router.pathname));
-  // const [opened, setOpened] = useState(true);
+  // Const [opened, setOpened] = useState(true);
   const itemRefs = useRef<Record<string, HTMLAnchorElement>>({});
 
   const scrollToLink = (pathname: string) => {

diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,138 @@
+// @ts-check
+
+const eslint = require('@eslint/js');
+const jest = require('eslint-plugin-jest');
+const jsxA11y = require('eslint-plugin-jsx-a11y');
+const react = require('eslint-plugin-react');
+const tseslint = require('typescript-eslint');
+
+module.exports = tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  jsxA11y.flatConfigs.recommended,
+  {
+    languageOptions: {
+      parserOptions: {
+        project: './tsconfig.eslint.json',
+      },
+    },
+  },
+  { ignores: ['**/*.{mjs,cjs,js,d.ts,d.mts}'] },
+  {
+    // ESLint specific rules
+    // https://eslint.org/docs/latest/rules/
+    rules: {
+      'array-callback-return': 'error',
+      'no-duplicate-imports': 'error',
+      'no-var': 'error',
+      'no-self-compare': 'error',
+      'no-template-curly-in-string': 'error',
+      'capitalized-comments': ['error', 'always', { ignorePattern: 'prettier' }],
+      curly: 'error',
+      'default-case': 'off',
+      'default-case-last': 'error',
+      'dot-notation': 'error',
+      'no-alert': 'error',
+      'no-console': 'warn',
+      'no-else-return': 'error',
+      'no-eval': 'warn',
+      'no-lonely-if': 'error',
+      'no-multi-assign': 'error',
+      'no-multi-str': 'error',
+      'no-param-reassign': 'error',
+      'no-return-assign': 'error',
+      'no-script-url': 'error',
+      'no-sequences': 'error',
+      'no-throw-literal': 'error',
+      'no-unneeded-ternary': 'error',
+      'no-useless-call': 'error',
+      'no-useless-constructor': 'error',
+      'no-useless-return': 'error',
+      'object-shorthand': 'error',
+      'operator-assignment': ['error', 'always'],
+      'prefer-arrow-callback': 'error',
+      'prefer-const': 'error',
+      'prefer-exponentiation-operator': 'error',
+      'prefer-object-has-own': 'error',
+      'prefer-promise-reject-errors': 'error',
+      'prefer-object-spread': 'error',
+      'prefer-template': 'error',
+      yoda: 'error',
+      radix: 'error',
+      eqeqeq: ['error', 'smart'],
+      'no-undef': 'off',
+    },
+  },
+  {
+    // TypeScript ESLint specific rules
+    // https://typescript-eslint.io/rules/
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/ban-ts-comment': 'off',
+      '@typescript-eslint/consistent-generic-constructors': 'error',
+      '@typescript-eslint/method-signature-style': ['error', 'property'],
+      '@typescript-eslint/no-unused-expressions': 'off',
+      '@typescript-eslint/lines-between-class-members': 'off',
+      '@typescript-eslint/indent': 'off',
+      '@typescript-eslint/naming-convention': 'off',
+      '@typescript-eslint/comma-dangle': 'off',
+      '@typescript-eslint/no-redeclare': 'off',
+      '@typescript-eslint/no-use-before-define': 'off',
+      '@typescript-eslint/no-loop-func': 'off',
+      '@typescript-eslint/no-empty-object-type': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          args: 'all',
+          argsIgnorePattern: '^_',
+          caughtErrors: 'none',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+    },
+  },
+  {
+    // React specific rules
+    plugins: { react },
+    settings: { react: { version: 'detect' } },
+    rules: {
+      'react/button-has-type': 'error',
+      'react/jsx-boolean-value': 'error',
+      'react/jsx-curly-brace-presence': ['error', 'never'],
+      'react/jsx-fragments': ['error', 'syntax'],
+      'react/jsx-no-comment-textnodes': 'error',
+      'react/jsx-no-duplicate-props': 'error',
+      'react/jsx-no-target-blank': 'error',
+      'react/no-children-prop': 'error',
+      'react/no-deprecated': 'error',
+      'react/no-find-dom-node': 'error',
+      'react/no-string-refs': 'error',
+      'react/self-closing-comp': 'error',
+      'react/void-dom-elements-no-children': 'error',
+    },
+  },
+  {
+    // Jest specific rules
+    plugins: { jest },
+    rules: {
+      ...jest.configs['flat/recommended'].rules,
+      'jest/no-export': 'off',
+      'jest/expect-expect': 'off',
+      'jest/valid-title': 'off',
+    },
+  },
+  {
+    // JSX A11y specific rules
+    rules: {
+      'jsx-a11y/no-autofocus': 'off',
+      'jsx-a11y/control-has-associated-label': 'off',
+      'jsx-a11y/mouse-events-have-key-events': 'off',
+      'jsx-a11y/label-has-for': 'off',
+      'jsx-a11y/anchor-is-valid': 'off',
+      'jsx-a11y/label-has-associated-control': 'off',
+      'jsx-a11y/anchor-has-content': 'off',
+    },
+  }
+);
diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
     "jest": "jest",
     "typecheck": "tsc --noEmit && cd apps/mantine.dev && npm run typecheck && cd ../help.mantine.dev && npm run typecheck",
     "lint": "npm run eslint && npm run stylelint",
-    "eslint": "eslint packages apps/mantine.dev/src apps/help.mantine.dev/src scripts --ext .ts,.tsx --cache",
+    "eslint": "eslint packages apps/mantine.dev/src apps/help.mantine.dev/src scripts --cache",
     "stylelint": "stylelint \"**/*.css\" --cache",
     "syncpack": "syncpack list-mismatches",
     "syncpack:format": "syncpack format",
@@ -114,6 +114,7 @@
     "@babel/preset-env": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
+    "@eslint/js": "^9.9.1",
     "@hello-pangea/dnd": "^16.3.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
     "@rollup/plugin-alias": "^5.0.1",
@@ -127,6 +128,7 @@
     "@testing-library/react": "15.0.6",
     "@testing-library/user-event": "14.5.2",
     "@types/chroma-js": "^2.4.3",
+    "@types/eslint": "^9",
     "@types/fs-extra": "^11.0.4",
     "@types/gh-pages": "^5.0.1",
     "@types/jest": "^29.5.8",
@@ -139,23 +141,16 @@
     "@types/rimraf": "^3.0.2",
     "@types/signale": "^1",
     "@types/yargs": "^17.0.31",
-    "@typescript-eslint/eslint-plugin": "^6.8.0",
-    "@typescript-eslint/parser": "^6.8.0",
     "babel-loader": "^9.1.3",
     "chalk": "^5.3.0",
     "css-loader": "^6.8.1",
     "cssnano": "^6.0.1",
     "esbuild": "^0.19.5",
     "esbuild-jest": "^0.5.0",
-    "eslint": "^8.51.0",
-    "eslint-config-airbnb": "19.0.4",
-    "eslint-config-airbnb-typescript": "^17.1.0",
-    "eslint-config-mantine": "3.1.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jest": "^27.6.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint": "^9.9.1",
+    "eslint-plugin-jest": "^28.8.2",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-react": "^7.35.0",
     "execa": "^8.0.1",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.1.1",
@@ -193,6 +188,7 @@
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "tsx": "^4.7.3",
     "typescript": "5.3.3",
+    "typescript-eslint": "^8.3.0",
     "version-next": "^1.0.2",
     "webpack": "^5.89.0",
     "wrangler": "^3.34.2",

diff --git a/packages/@docs/demos/src/demos/carousel/Carousel.demo.progress.tsx b/packages/@docs/demos/src/demos/carousel/Carousel.demo.progress.tsx
@@ -58,7 +58,9 @@ function Demo() {
   const [embla, setEmbla] = useState<Embla | null>(null);
 
   const handleScroll = useCallback(() => {
-    if (!embla) return;
+    if (!embla) {
+      return;
+    }
     const progress = Math.max(0, Math.min(1, embla.scrollProgress()));
     setScrollProgress(progress * 100);
   }, [embla, setScrollProgress]);

diff --git a/packages/@docs/demos/src/demos/charts/AreaChart/AreaChart.demo.customTooltip.tsx b/packages/@docs/demos/src/demos/charts/AreaChart/AreaChart.demo.customTooltip.tsx
@@ -56,7 +56,9 @@ interface ChartTooltipProps {
 }
 
 function ChartTooltip({ label, payload }: ChartTooltipProps) {
-  if (!payload) return null;
+  if (!payload) {
+    return null;
+  }
 
   return (
     <Paper px="md" py="sm" withBorder shadow="md" radius="md">

diff --git a/packages/@docs/demos/src/demos/charts/BarChart/BarChart.demo.customTooltip.tsx b/packages/@docs/demos/src/demos/charts/BarChart/BarChart.demo.customTooltip.tsx
@@ -55,7 +55,9 @@ interface ChartTooltipProps {
 }
 
 function ChartTooltip({ label, payload }: ChartTooltipProps) {
-  if (!payload) return null;
+  if (!payload) {
+    return null;
+  }
 
   return (
     <Paper px="md" py="sm" withBorder shadow="md" radius="md">

diff --git a/packages/@docs/demos/src/demos/charts/LineChart/LineChart.demo.customTooltip.tsx b/packages/@docs/demos/src/demos/charts/LineChart/LineChart.demo.customTooltip.tsx
@@ -55,7 +55,9 @@ interface ChartTooltipProps {
 }
 
 function ChartTooltip({ label, payload }: ChartTooltipProps) {
-  if (!payload) return null;
+  if (!payload) {
+    return null;
+  }
 
   return (
     <Paper px="md" py="sm" withBorder shadow="md" radius="md">

diff --git a/packages/@docs/demos/src/demos/charts/ScatterChart/ScatterChart.demo.customTooltip.tsx b/packages/@docs/demos/src/demos/charts/ScatterChart/ScatterChart.demo.customTooltip.tsx
@@ -47,7 +47,9 @@ interface ChartTooltipProps {
 }
 
 function ChartTooltip({ payload }: ChartTooltipProps) {
-  if (!payload) return null;
+  if (!payload) {
+    return null;
+  }
 
   return (
     <Paper px="md" py="sm" withBorder shadow="md" radius="md">

diff --git a/packages/@docs/demos/src/demos/core/Combobox/Combobox.demo.selectFirstOption.tsx b/packages/@docs/demos/src/demos/core/Combobox/Combobox.demo.selectFirstOption.tsx
@@ -83,7 +83,7 @@ function Demo() {
   ));
 
   useEffect(() => {
-    // we need to wait for options to render before we can select first one
+    // We need to wait for options to render before we can select first one
     combobox.selectFirstOption();
   }, [value]);
 

diff --git a/packages/@docs/demos/src/demos/core/Menu/Menu.demo.navigation.tsx b/packages/@docs/demos/src/demos/core/Menu/Menu.demo.navigation.tsx
@@ -27,7 +27,7 @@ function Demo() {
 function Demo() {
   const menus = Array(4)
     .fill(0)
-    .map((e, i) => (
+    .map((_, i) => (
       <Menu
         key={i}
         trigger="click-hover"