@mikey-pro/eslint-config-react 8.1.0 → 9.0.1

package/README.md

@@ -18,9 +18,16 @@ A preset ESLint React configuration
 npm i -D mikey-pro @mikey-pro/eslint-config-react
 ```
 
-### Configure
+### Configure (Flat ESLint v9+ Recommended)
 
-Extend to ESLint in `package.json`:
+```js
+// eslint.config.js
+import reactConfig from '@mikey-pro/eslint-config-react/flat';
+
+export default reactConfig;
+```
+
+### Legacy Configuration (still supported)
 
 ```json
 {

package/flat.js

@@ -0,0 +1,3 @@
+// Modern React ESLint 9 Flat Configuration for Mikey Pro
+
+export { default } from './index.js';

package/index.js

@@ -1,256 +1,285 @@
-import baseConfig from '@mikey-pro/eslint-config';
-import reactAppConfig from 'eslint-config-react-app-bump';
-import jestDomPlugin from 'eslint-plugin-jest-dom';
-import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
-import reactPlugin from 'eslint-plugin-react';
-import reactHooksPlugin from 'eslint-plugin-react-hooks';
-import reactPerformancePlugin from 'eslint-plugin-react-perf';
-import reactRefreshPlugin from 'eslint-plugin-react-refresh';
-import testingLibraryPlugin from 'eslint-plugin-testing-library';
+// Modern React ESLint configuration for Mikey Pro
+import { baseConfig } from '@mikey-pro/eslint-config/base-config.js';
+import { baseOverrides } from '@mikey-pro/eslint-config/overrides.js';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactPerf from 'eslint-plugin-react-perf';
+import reactRefresh from 'eslint-plugin-react-refresh';
 
-const reactConfig = [
-  ...baseConfig,
-  {
-    plugins: {
-      react: reactPlugin,
-      'react-hooks': reactHooksPlugin,
-      'jsx-a11y': jsxA11yPlugin,
-      'react-perf': reactPerformancePlugin,
-      'testing-library': testingLibraryPlugin,
-      'jest-dom': jestDomPlugin,
-      'react-refresh': reactRefreshPlugin,
-    },
-    languageOptions: {
-      parserOptions: {
-        ...baseConfig.languageOptions.parserOptions,
-        ecmaVersion: 'latest',
-        sourceType: 'module',
-        ecmaFeatures: {
-          jsx: true,
-        },
-        babelOptions: {
-          ...baseConfig.languageOptions.parserOptions.babelOptions,
-          presets: [
-            ...baseConfig.languageOptions.parserOptions.babelOptions.presets,
-            [
-              '@babel/preset-react',
-              {
-                runtime: 'automatic',
-              },
-            ],
-          ],
-        },
+// React-specific configuration
+const reactConfig = {
+  files: ['**/*.{js,jsx,ts,tsx}'],
+  languageOptions: {
+    ecmaVersion: 'latest',
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
       },
     },
-    rules: {
-      ...reactAppConfig.rules,
-      ...baseConfig.rules,
-
-      // Hooks
-      'react-hooks/rules-of-hooks': 'error',
-      'react-hooks/exhaustive-deps': [
-        'error',
-        {
-          additionalHooks: '(useAsync|useAsyncCallback|useMemoizedCallback)',
-          enableDangerousAutofixThisMayCauseInfiniteLoops: false,
-        },
-      ],
-
-      // Accessibility
-      'jsx-a11y/alt-text': 'error',
-      'jsx-a11y/anchor-has-content': 'error',
-      'jsx-a11y/aria-props': 'error',
-      'jsx-a11y/aria-role': 'error',
-      'jsx-a11y/role-has-required-aria-props': 'error',
-
-      // Modern React
-      'react/hook-use-state': 'warn',
-      'react/jsx-no-leaked-render': 'warn',
-      'react/jsx-no-useless-fragment': 'warn',
-      'react/no-array-index-key': 'warn',
-
-      // Performance
-      'react-perf/jsx-no-new-object-as-prop': 'warn',
-      'react-perf/jsx-no-new-array-as-prop': 'warn',
-      'react-perf/jsx-no-new-function-as-prop': 'warn',
-
-      // Modern Patterns
-      'react/prefer-stateless-function': 'error',
-      'react/no-unused-prop-types': 'warn',
-      'react/no-unstable-nested-components': ['error', {
-        allowAsProps: true,
-        customValidators: ['memo', 'Suspense'],
-      }],
-      'react/jsx-no-constructed-context-values': ['error', {
-        allowObjectLiteral: false,
-        checkFragmentShorthand: true,
-      }],
-
-      // Existing rules...
-      'react/display-name': ['warn', { ignoreTranspilerName: false }],
-      'react/function-component-definition': [
-        'off',
-        { namedComponents: 'arrow-function' },
-      ],
-      'react/jsx-curly-spacing': 'warn',
-      'react/jsx-key': ['warn', { checkFragmentShorthand: true }],
-      'react/jsx-no-bind': [
-        'error',
-        {
-          allowArrowFunctions: true,
-          allowFunctions: false,
-          allowBind: false,
-        },
-      ],
-      'react/jsx-no-comment-textnodes': 'warn',
-      'react/jsx-no-duplicate-props': 'warn',
-      'react/jsx-no-target-blank': 'warn',
-      'react/jsx-no-undef': 'warn',
-      'react/jsx-tag-spacing': ['warn', { beforeSelfClosing: 'always' }],
-      'react/jsx-uses-vars': 'warn',
-      'react/no-danger': 'warn',
-      'react/no-deprecated': 'warn',
-      'react/no-did-mount-set-state': 'warn',
-      'react/no-did-update-set-state': 'warn',
-      'react/no-find-dom-node': 'warn',
-      'react/no-is-mounted': 'warn',
-      'react/no-string-refs': 'warn',
-      'react/prefer-es6-class': 'warn',
-      'react/prefer-stateless-function': 'warn',
-      'react/require-render-return': 'warn',
-      'react/self-closing-comp': [
-        'error',
-        {
-          component: true,
-          html: false,
-        },
-      ],
-      'react/state-in-constructor': 'off',
+    sourceType: 'module',
+  },
+  plugins: {
+    'jsx-a11y': jsxA11y,
+    react,
+    'react-hooks': reactHooks,
+    'react-perf': reactPerf,
+    'react-refresh': reactRefresh,
+  },
+  rules: {
+    // React rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+    ...reactHooks.configs.recommended.rules,
+    ...jsxA11y.configs.recommended.rules,
 
-      // Testing Library
-      'testing-library/await-async-queries': 'error',
-      'testing-library/no-await-sync-queries': 'error',
-      'testing-library/prefer-screen-queries': 'warn',
-      'testing-library/no-node-access': 'error',
-      'testing-library/prefer-presence-queries': 'error',
-      'testing-library/prefer-user-event': 'error',
-      'testing-library/prefer-query-by-disappearance': 'error',
-      'testing-library/prefer-find-by': 'error',
-
-      // Testing Best Practices
-      'jest-dom/prefer-checked': 'error',
-      'jest-dom/prefer-in-document': 'error',
-      'jest-dom/prefer-to-have-attribute': 'error',
-      'jest-dom/prefer-enabled-disabled': 'error',
-      'jest-dom/prefer-required': 'error',
-
-      // Additional Performance
-      'react/no-object-type-as-default-prop': 'warn',
-      'react-perf/jsx-no-jsx-as-prop': ['error', {
-        allowDestructuredProps: true,
-      }],
-
-      // Advanced React Performance
-      'react/jsx-handler-names': ['warn', {
+    // JSX A11y rules
+    'jsx-a11y/alt-text': 'error',
+    'jsx-a11y/anchor-has-content': 'error',
+    'jsx-a11y/anchor-is-valid': 'error',
+    'jsx-a11y/aria-activedescendant-has-tabindex': 'error',
+    'jsx-a11y/aria-props': 'error',
+    'jsx-a11y/aria-proptypes': 'error',
+    'jsx-a11y/aria-role': 'error',
+    'jsx-a11y/aria-unsupported-elements': 'error',
+    'jsx-a11y/autocomplete-valid': 'error',
+    'jsx-a11y/click-events-have-key-events': 'error',
+    'jsx-a11y/control-has-associated-label': 'error',
+    'jsx-a11y/heading-has-content': 'error',
+    'jsx-a11y/html-has-lang': 'error',
+    'jsx-a11y/iframe-has-title': 'error',
+    'jsx-a11y/img-redundant-alt': 'error',
+    'jsx-a11y/interactive-supports-focus': 'error',
+    'jsx-a11y/label-has-associated-control': 'error',
+    'jsx-a11y/lang': 'error',
+    'jsx-a11y/media-has-caption': 'error',
+    'jsx-a11y/mouse-events-have-key-events': 'error',
+    'jsx-a11y/no-access-key': 'error',
+    'jsx-a11y/no-aria-hidden-on-focusable': 'error',
+    'jsx-a11y/no-autofocus': 'error',
+    'jsx-a11y/no-distracting-elements': 'error',
+    'jsx-a11y/no-interactive-element-to-noninteractive-role': 'error',
+    'jsx-a11y/no-noninteractive-element-interactions': 'error',
+    'jsx-a11y/no-noninteractive-element-to-interactive-role': 'error',
+    'jsx-a11y/no-noninteractive-tabindex': 'error',
+    'jsx-a11y/no-redundant-roles': 'error',
+    'jsx-a11y/no-static-element-interactions': 'error',
+    'jsx-a11y/role-has-required-aria-props': 'error',
+    'jsx-a11y/role-supports-aria-props': 'error',
+    'jsx-a11y/scope': 'error',
+    'jsx-a11y/tabindex-no-positive': 'error',
+    // React Hooks rules
+    'react-hooks/exhaustive-deps': 'warn',
+    'react-hooks/rules-of-hooks': 'error',
+    // React Performance rules
+    'react-perf/jsx-no-new-array-as-prop': 'warn',
+    'react-perf/jsx-no-new-function-as-prop': 'warn',
+    'react-perf/jsx-no-new-object-as-prop': 'warn',
+    // React Refresh rules
+    'react-refresh/only-export-components': [
+      'warn',
+      {
+        allowConstantExport: true,
+        allowExportNames: ['default'],
+      },
+    ],
+    // React-specific overrides
+    'react/boolean-prop-naming': [
+      'error',
+      {
+        message:
+          'Boolean prop names should start with "is", "has", "should", "can", "will", or "did"',
+        propTypeNames: ['bool'],
+        rule: '^(is|has|should|can|will|did)[A-Z]([A-Za-z0-9]?)+',
+      },
+    ],
+    'react/button-has-type': 'error',
+    'react/function-component-definition': [
+      'error',
+      {
+        namedComponents: 'arrow-function',
+        unnamedComponents: 'arrow-function',
+      },
+    ],
+    'react/hook-use-state': 'error',
+    'react/iframe-missing-sandbox': 'error',
+    'react/jsx-boolean-value': ['error', 'never'],
+    'react/jsx-curly-brace-presence': [
+      'error',
+      {
+        children: 'never',
+        props: 'never',
+      },
+    ],
+    'react/jsx-fragments': ['error', 'syntax'],
+    'react/jsx-handler-names': [
+      'error',
+      {
+        checkInlineFunction: true,
+        checkLocalVariables: true,
         eventHandlerPrefix: 'handle',
         eventHandlerPropPrefix: 'on',
-        checkLocalVariables: true,
-      }],
-      'react/jsx-no-script-url': 'error',
-      'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
-
-      // React 18+ Features
-      'react/prefer-read-only-props': 'warn',
-      'react/no-unused-class-component-methods': 'error',
-      'react/no-arrow-function-lifecycle': 'error',
-
-      // Testing Best Practices
-      'testing-library/no-container': 'error',
-      'testing-library/no-node-access': ['error', { allowContainerFirstChild: true }],
-      'testing-library/prefer-explicit-assert': 'warn',
-      'jest-dom/prefer-focus': 'error',
+      },
+    ],
+    'react/jsx-key': [
+      'error',
+      {
+        checkFragmentShorthand: true,
+        checkKeyMustBeforeSpread: true,
+        warnOnDuplicates: true,
+      },
+    ],
+    'react/jsx-no-bind': [
+      'error',
+      {
+        allowArrowFunctions: true,
+        allowBind: false,
+        allowFunctions: false,
+        ignoreDOMComponents: true,
+        ignoreRefs: true,
+      },
+    ],
 
-      // React 18.2+ Features
-      'react/hook-use-state': ['error', {
-        allowDestructuredState: true,
-        allowStatefulImports: false
-      }],
-      'react/no-unstable-default-props': ['error', {
-        forbidAllDefaults: true
-      }],
-      'react/prefer-exact-props': 'error',
+    'react/jsx-no-constructed-context-values': 'error',
+    'react/jsx-no-leaked-render': 'error',
 
-      // Enhanced Testing
-      'testing-library/no-render-in-lifecycle': 'error',
-      'testing-library/prefer-wait-for': 'error',
-      'testing-library/no-wait-for-empty-callback': 'error',
+    'react/jsx-no-script-url': 'error',
+    'react/jsx-no-target-blank': 'error',
+    'react/jsx-no-undef': 'error',
+    'react/jsx-no-useless-fragment': [
+      'error',
+      {
+        allowExpressions: true,
+      },
+    ],
+    'react/jsx-pascal-case': [
+      'error',
+      {
+        allowAllCaps: true,
+        allowNamespace: true,
+        ignore: [],
+      },
+    ],
+    'react/jsx-sort-props': [
+      'error',
+      {
+        callbacksLast: true,
+        ignoreCase: true,
+        noSortAlphabetically: false,
+        reservedFirst: true,
+        shorthandFirst: true,
+      },
+    ],
+    'react/no-array-index-key': 'warn',
+    'react/no-danger': 'warn',
+    'react/no-deprecated': 'error',
+    'react/no-direct-mutation-state': 'error',
+    'react/no-find-dom-node': 'error',
+    'react/no-invalid-html-attribute': 'error',
+    'react/no-is-mounted': 'error',
+    'react/no-namespace': 'error',
+    'react/no-object-type-as-default-prop': 'error',
+    'react/no-render-return-value': 'error',
+    'react/no-string-refs': 'error',
+    'react/no-unescaped-entities': 'error',
+    'react/no-unknown-property': 'error',
+    'react/no-unsafe': 'error',
+    'react/no-unstable-nested-components': 'error',
+    'react/no-unused-class-component-methods': 'error',
+    'react/no-unused-prop-types': 'error',
+    'react/no-unused-state': 'error',
+    'react/prefer-es6-class': 'error',
+    'react/prefer-stateless-function': 'error',
+    'react/prop-types': 'off', // Handled by TypeScript
+    'react/react-in-jsx-scope': 'off', // Not needed with new JSX transform
+    'react/require-default-props': 'off', // Handled by TypeScript
+    'react/require-render-return': 'error',
+    'react/self-closing-comp': 'error',
+    'react/sort-comp': [
+      'error',
+      {
+        order: [
+          'static-methods',
+          'instance-variables',
+          'lifecycle',
+          '/^on.+$/',
+          'everything-else',
+          'render',
+        ],
+      },
+    ],
+    'react/sort-default-props': 'error',
+    'react/sort-prop-types': 'error',
 
-      // Performance Guards
-      'react/forbid-dom-props': ['error', { forbid: ['style'] }],
-      'react-perf/jsx-no-new-function-as-prop': ['error', {
-        allowInlineArrows: true,
-        allowMethods: true
-      }],
-      'react/jsx-no-constructed-context-values': ['error', {
-        allowObjectLiteral: false
-      }],
+    'react/state-in-constructor': 'error',
 
-      // Strict Mode Optimizations
-      'react/jsx-no-leaked-render': ['error', {
-        validStrategies: ['ternary', 'coalescing', 'suspense']
-      }],
+    'react/static-property-placement': 'error',
+    'react/style-prop-object': 'error',
+    'react/void-dom-elements-no-children': 'error',
+  },
+  settings: {
+    'import/resolver': {
+      typescript: {
+        alwaysTryTypes: true,
+      },
+    },
+    react: {
+      version: 'detect',
+    },
+  },
+};
 
-      // Advanced Testing
-      'testing-library/prefer-user-event': ['error', {
-        allowedMethods: ['type', 'click', 'keyboard', 'upload']
-      }],
-      'testing-library/render-result-naming-convention': ['error', {
-        prefix: 'render'
-      }],
+// Export the complete React configuration
+export default [
+  // Global ignores
+  {
+    ignores: [
+      '**/dist/**/*',
+      '**/vendor/**/*',
+      '**/node_modules/**/*',
+      '**/coverage/**/*',
+      '**/.next/**/*',
+      '**/.nuxt/**/*',
+      '**/.output/**/*',
+      '**/.vite/**/*',
+      '**/build/**/*',
+      '**/out/**/*',
+      '*.properties',
+      '*.cclibs',
+      '*.svg',
+      '*.png',
+      '*.jpg',
+      '*.jpeg',
+      '*.gif',
+      '*.ico',
+      '*.webp',
+      '*.aco',
+      '*.psd',
+      '*.ai',
+      '*.ase',
+      '*.sh',
+      '*.bat',
+      '*.cmd',
+      'package-lock.json',
+      'yarn.lock',
+      'pnpm-lock.yaml',
+      'LICENSE',
+      'CNAME',
+      '*.min.js',
+      '*.min.css',
+    ],
+  },
 
-      // Concurrent Mode
-      'react/no-unstable-nested-components': ['error', {
-        allowAsProps: true,
-        customValidators: ['memo', 'Suspense']
-      }],
-      'react/jsx-no-constructed-context-values': ['error', {
-        allowObjectLiteral: false,
-        checkFragmentShorthand: true
-      }],
+  // Base configuration
+  baseConfig,
 
-      // Error Boundaries
-      'react/no-unstable-default-props': ['error', {
-        forbidAllDefaults: true
-      }],
-      'react/iframe-missing-sandbox': 'error',
-      'react/jsx-no-leaked-render': ['error', {
-        validStrategies: ['ternary', 'coalescing', 'suspense']
-      }],
+  // React-specific configuration
+  reactConfig,
 
-      // Testing
-      'testing-library/no-global-regexp-flag-in-query': 'error',
-      'testing-library/prefer-query-matchers': 'error',
-      'testing-library/no-manual-cleanup': 'error'
-    },
-    settings: {
-      ...baseConfig.settings,
-      react: {
-        version: 'detect',
-        formComponents: ['Form'],
-        linkComponents: ['Link', 'NavLink', 'RouterLink'],
-        'import/resolver': {
-          typescript: {
-            alwaysTryTypes: true,
-            project: ['./tsconfig.json', './tsconfig.*.json']
-          }
-        },
-        'jsx-runtime': 'automatic'
-      }
-    }
-  }
+  // File-specific overrides
+  ...baseOverrides,
 ];
 
-export default reactConfig;
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = reactConfig;
-}
+// Export individual components for advanced usage
+export { baseConfig } from '@mikey-pro/eslint-config/base-config.js';
+export { baseOverrides } from '@mikey-pro/eslint-config/overrides.js';

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@mikey-pro/eslint-config-react",
-  "version": "8.1.0",
-  "description": "Mikey Pro ESLint React configuration",
+  "version": "9.0.1",
+  "description": "Mikey Pro ESLint React configuration - Ultimate React coding style guide",
   "type": "module",
   "main": "index.js",
   "dependencies": {
-    "@babel/preset-react": "^7.26.3",
-    "@mikey-pro/eslint-config": "^8.1.0",
+    "@babel/preset-react": "^7.28.0",
+    "@mikey-pro/eslint-config": "^9.0.0",
     "eslint-config-react-app-bump": "^1.0.25",
     "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-perf": "^3.3.3",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "eslint-plugin-testing-library": "^7.1.1"
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-testing-library": "^7.6.8"
   },
   "peerDependencies": {
-    "@mikey-pro/eslint-config": "^8.1.0"
+    "@mikey-pro/eslint-config": "^9.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -29,6 +29,7 @@
   },
   "files": [
     "index.js",
+    "flat.js",
     "README.md",
     "LICENSE"
   ],
@@ -42,7 +43,7 @@
   },
   "license": "MIT",
   "keywords": [
-    "@mikey-pro/eslint-config",
+    "@mikey-pro/eslint-config-react",
     "@mikey-pro",
     "mikey-pro",
     "mikey",
@@ -51,15 +52,32 @@
     "eslintconfig",
     "eslint",
     "config",
+    "react",
+    "jsx",
     "style-guide",
     "style",
-    "guide"
+    "guide",
+    "eslint-9",
+    "flat-config"
   ],
   "author": "Mikl Wolfe <wolfe@mikl.io> (https://mikl.io)",
   "browserslist": [
     "defaults"
   ],
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=18.0.0",
+    "npm": ">=9.0.0",
+    "pnpm": ">=8.0.0",
+    "yarn": ">=4.0.0"
+  },
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.js"
+    },
+    "./flat": {
+      "import": "./flat.js",
+      "require": "./flat.js"
+    }
   }
 }