refactor(eslint): enhance eslint config type safety (#127)

* refactor(eslint): enhance eslint config type safety

* chore(eslint): add type definitions for eslint-plugin-react-hooks

* chore(eslint): install eslint type safety dev dependencies

* chore(eslint): add react version detect setting

* chore(storybook): remove addon-onboarding from addons each component

* chore(storybook): remove chromatic storybook from addon

* chore(storybook): format main.ts

.templates/component/.storybook/main.ts

@@ -2,12 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-onboarding',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-vite',
     options: {},

eslint.config.ts

@@ -1,21 +1,24 @@
+import { FlatCompat } from '@eslint/eslintrc';
 import eslint from '@eslint/js';
 import reactPlugin from 'eslint-plugin-react';
-import storybook from 'eslint-plugin-storybook';
+import hooksPlugin from 'eslint-plugin-react-hooks';
+import globals from 'globals';
 import tseslint from 'typescript-eslint';
 
-// @ts-ignore
-import hooksPlugin from 'eslint-plugin-react-hooks';
+const compat = new FlatCompat();
 
 // ? https://typescript-eslint.io/getting-started#step-2-configuration
 export default tseslint.config(
+  // * Base ESLint recommended configuration
   eslint.configs.recommended,
+  // * TypeScript ESLint recommended configuration
   tseslint.configs.recommended,
+  // * Custom rules configuration
   {
     rules: {
       '@typescript-eslint/ban-ts-comment': 'off',
       '@typescript-eslint/no-unused-vars': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
-
       'no-duplicate-imports': 'off',
       'no-unused-expressions': 'off',
       '@typescript-eslint/no-unused-expressions': [
@@ -28,15 +31,22 @@ export default tseslint.config(
     },
   },
 
+  // * React plugin configuration
   {
-    files: ['**/*.ts', '**/*.tsx'],
+    files: ['**/*.{ts,tsx}'],
     plugins: {
       react: reactPlugin,
-      'react-hooks': hooksPlugin,
+    },
+    languageOptions: {
+      globals: {
+        ...globals.serviceworker,
+        ...globals.browser,
+      },
     },
     rules: {
-      ...reactPlugin.configs['jsx-runtime'].rules,
-      ...hooksPlugin.configs.recommended.rules,
+      ...reactPlugin.configs.recommended.rules,
+      'react/react-in-jsx-scope': 'off',
+      'react/prop-types': 'off',
     },
     settings: {
       react: {
@@ -45,12 +55,26 @@ export default tseslint.config(
     },
   },
 
-  ...(storybook.configs['flat/recommended'] as any),
+  // * React Hooks plugin configuration
+  ...compat.extends('plugin:react-hooks/recommended'),
+  {
+    files: ['**/*.{ts,tsx}'],
+    plugins: {
+      'react-hooks': hooksPlugin,
+    },
+    rules: {
+      ...hooksPlugin.configs.recommended.rules,
+    },
+  },
+
+  // * Storybook plugin configuration
+  ...compat.extends('plugin:storybook/recommended'),
   {
     files: ['**/*.stories.@(ts|tsx|js|jsx|mjs|cjs)'],
+    rules: {},
   },
 
-  // ignore files
+  // Ignore files configuration
   {
     ignores: ['**/*/dist/', '**/node_modules/', '*.config.*'],
   },

package.json

@@ -23,6 +23,7 @@
     "@commitlint/config-conventional": "^19.6.0",
     "@commitlint/cz-commitlint": "^19.6.1",
     "@commitlint/types": "^19.5.0",
+    "@eslint/eslintrc": "^3.2.0",
     "@storybook/addon-docs": "^8.4.7",
     "@storybook/addon-essentials": "catalog:",
     "@storybook/addon-interactions": "catalog:",
@@ -34,6 +35,7 @@
     "@storybook/test": "catalog:",
     "@storybook/theming": "^8.4.7",
     "@tsconfig/strictest": "^2.0.5",
+    "@types/eslint__eslintrc": "^2.1.2",
     "@types/node": "^22.8.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
@@ -42,10 +44,11 @@
     "chromatic": "^11.19.0",
     "clipanion": "4.0.0-rc.4",
     "commitizen": "^4.3.1",
-    "eslint": "^9.18.0",
+    "eslint": "^9.20.0",
     "eslint-plugin-react": "^7.37.3",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-storybook": "^0.11.2",
+    "globals": "^15.14.0",
     "husky": "^9.1.7",
     "knip": "catalog:",
     "lint-staged": "^15.3.0",

packages/Input/.storybook/main.ts

@@ -2,13 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-onboarding',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@chromatic-com/storybook',
-    '@storybook/addon-interactions',
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-vite',
     options: {},

packages/avatar/.storybook/main.ts

@@ -2,13 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-onboarding',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@chromatic-com/storybook',
-    '@storybook/addon-interactions',
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-vite',
     options: {},

packages/button/.storybook/main.ts

@@ -2,13 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-onboarding',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@chromatic-com/storybook',
-    '@storybook/addon-interactions',
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-vite',
     options: {},

packages/checkbox/.storybook/main.ts

@@ -2,12 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-onboarding',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-vite',
     options: {},

packages/divider/.storybook/main.ts

@@ -2,13 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-onboarding',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@chromatic-com/storybook',
-    '@storybook/addon-interactions',
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-vite',
     options: {},

packages/flex/.storybook/main.ts

@@ -2,12 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-onboarding',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-vite',
     options: {},

packages/grid/.storybook/main.ts

@@ -2,12 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-onboarding',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-vite',
     options: {},

packages/grid/src/Grid.stories.tsx

@@ -63,14 +63,7 @@ export const Basic: Story = {
   args: {
     templateColumns: 'repeat(3, 1fr)',
     gap: '1rem',
-    children: [
-      <Box key="1" />,
-      <Box key="2" />,
-      <Box key="3" />,
-      <Box key="4" />,
-      <Box key="5" />,
-      <Box key="6" />,
-    ],
+    children: [<Box key="1" />, <Box key="2" />, <Box key="3" />, <Box key="4" />, <Box key="5" />, <Box key="6" />],
   },
 };
 
@@ -104,11 +97,7 @@ export const GridTemplateAreas: Story = {
 
 export const SpanningColumns: Story = {
   render: () => (
-    <Grid.Root
-      templateColumns="repeat(4, 1fr)"
-      templateRows="repeat(2, 1fr)"
-      gap="1rem"
-    >
+    <Grid.Root templateColumns="repeat(4, 1fr)" templateRows="repeat(2, 1fr)" gap="1rem">
       <Grid.Item rowSpan={2}>
         <Box>rowSpan 2</Box>
       </Grid.Item>

packages/grid/src/Grid.test.tsx

@@ -20,9 +20,7 @@ describe('Grid', () => {
 
   it('should apply additional className when provided', () => {
     const customClassName = faker.word.noun();
-    render(
-      <Grid.Root data-testid="grid-container" className={customClassName} />,
-    );
+    render(<Grid.Root data-testid="grid-container" className={customClassName} />);
     expect(screen.getByTestId('grid-container')).toHaveClass(customClassName);
   });
 
@@ -146,21 +144,18 @@ describe('Grid', () => {
             [prop]: value,
             expectedValue: expectedValues?.[index] ?? value,
           })),
-        )(
-          `should apply ${style} when ${prop} prop is $${prop}`,
-          ({ [prop]: value, expectedValue }) => {
-            render(
-              <Grid.Root>
-                <Grid.Item data-testid="grid-item" {...{ [prop]: value }}>
-                  item 1
-                </Grid.Item>
-              </Grid.Root>,
-            );
-
-            const gridItem = screen.getByTestId('grid-item');
-            expect(gridItem).toHaveStyle({ [style]: expectedValue });
-          },
-        );
+        )(`should apply ${style} when ${prop} prop is $${prop}`, ({ [prop]: value, expectedValue }) => {
+          render(
+            <Grid.Root>
+              <Grid.Item data-testid="grid-item" {...{ [prop]: value }}>
+                item 1
+              </Grid.Item>
+            </Grid.Root>,
+          );
+
+          const gridItem = screen.getByTestId('grid-item');
+          expect(gridItem).toHaveStyle({ [style]: expectedValue });
+        });
       });
     }
   });

packages/icon/.storybook/main.ts

@@ -2,12 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-onboarding',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-vite',
     options: {},

packages/radio-group/.storybook/main.ts

@@ -2,13 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-onboarding',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@chromatic-com/storybook',
-    '@storybook/addon-interactions',
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-vite',
     options: {},

packages/reset/.storybook/main.ts

@@ -2,12 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-onboarding',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-vite',
     options: {},

packages/skeleton/.storybook/main.ts

@@ -2,13 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-onboarding',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@chromatic-com/storybook',
-    '@storybook/addon-interactions',
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-vite',
     options: {},

packages/switch/.storybook/main.ts

@@ -2,12 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-onboarding',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-vite',
     options: {},

packages/tooltip/.storybook/main.ts

@@ -2,13 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-onboarding',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@chromatic-com/storybook',
-    '@storybook/addon-interactions',
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-vite',
     options: {},