@perfective/eslint-config-react 0.16.0 → 0.17.0

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) 2020-2024 Andrey Mikheychik (https://github.com/amikheychik)
+Copyright (c) 2020-2026 Andrey Mikheychik (https://github.com/amikheychik)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.adoc

@@ -2,75 +2,99 @@
 
 `@perfective/eslint-config-react` provides
 a https://eslint.org/docs/latest/developer-guide/shareable-configs[shareable ESLint configuration]
-for developing the `@perfective` https://reactjs.org[React] packages.
-This package extends the
-`link:https://www.npmjs.com/package/@perfective/eslint-config[@perfective/eslint-config]` package.
+for https://reactjs.org[React] development.
 
-`@perfective/eslint-config-react` uses the following ESLint plugins:
+`@perfective/eslint-config-react` adds the following ESLint plugins to the
+`link:https://www.npmjs.com/package/@perfective/eslint-config[@perfective/eslint-config]` configuration:
 
 * `link:https://github.com/jsx-eslint/eslint-plugin-react[eslint-plugin-react]`;
 * `link:https://www.npmjs.com/package/eslint-plugin-react-hooks[eslint-plugin-react-hooks]`;
-* `link:https://github.com/correttojs/eslint-plugin-react-hooks-ssr[eslint-plugin-react-hooks-ssr]`;
 * `link:https://github.com/cvazac/eslint-plugin-react-perf[eslint-plugin-react-perf]`;
 * `link:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y[eslint-plugin-jsx-a11y]`.
 
 
 == Setup
 
-. Require `@perfective/eslint-config-react` and its peer dependencies as dev dependencies:
+. Require `@perfective/eslint-config-react`:
++
+[source,bash]
+----
+npm install --save-dev @perfective/eslint-config-react
+----
++
+Required peer dependencies are installed automatically.
++
+. Import `perfectiveEslintReactConfig` to `eslint.config.js`:
++
+[source,javascript]
+----
+import { perfectiveEslintReactConfig } from '@perfective/eslint-config-react';
+
+export default perfectiveEslintReactConfig();
+----
++
+. _Optional_ Install optional peer dependencies to add tool-specific linting rules.
 +
 [source,bash]
 ----
 npm install --save-dev \
-    @perfective/eslint-config-react \
-    @babel/eslint-parser \
-    @typescript-eslint/eslint-plugin \
-    @typescript-eslint/parser \
-    eslint \
-    eslint-import-resolver-typescript \
-    eslint-plugin-array-func \
     eslint-plugin-cypress \
-    eslint-plugin-eslint-comments \
-    eslint-plugin-import \
     eslint-plugin-jest \
     eslint-plugin-jest-dom \
-    eslint-plugin-jsdoc \
-    eslint-plugin-jsx-a11y \
-    eslint-plugin-n \
-    eslint-plugin-prefer-arrow \
-    eslint-plugin-promise \
-    eslint-plugin-react \
-    eslint-plugin-react-hooks \
-    eslint-plugin-react-hooks-ssr \
-    eslint-plugin-react-perf \
-    eslint-plugin-rxjs \
-    eslint-plugin-security \
-    eslint-plugin-simple-import-sort \
-    eslint-plugin-sonarjs \
-    eslint-plugin-testing-library \
-    eslint-plugin-unicorn
+    eslint-plugin-rxjs-x \
+    eslint-plugin-testing-library
 ----
 +
-. Require the configuration in your root `.eslintrc.js`.
+Import configurations to `eslint.config.js`.
 +
 [source,javascript]
 ----
-module.exports = {
-    extends: ['@perfective/eslint-config-react'],
-}
+import { perfectiveEslintReactConfig } from '@perfective/eslint-config-react';
+
+// Optional dependencies.
+import { cypressConfig } from '@perfective/eslint-config/cypress';
+import { jestConfig, jestTypescriptConfig } from '@perfective/eslint-config/jest';
+import { jestDomConfig } from '@perfective/eslint-config/jest-dom';
+import { rxjsConfig } from '@perfective/eslint-config/rxjs';
+import { testingLibraryConfig } from '@perfective/eslint-config-react/testing-library';
+
+export default perfectiveEslintReactConfig([
+    cypressConfig,
+    jestConfig,
+    jestTypescriptConfig,
+    jestDomConfig,
+    rxjsConfig,
+    testingLibraryConfig,
+]);
 ----
++
+NOTE: `*.d.ts` files and `dist` directories are ignored by the configuration.
+`node_modules` and dot-files are ignored by the `eslint`.
+If more directories or file types need to be ignored, see the
+`link:https://eslint.org/docs/latest/use/configure/ignore#the-eslintignore-file[.eslintignore]` file docs.
+
+
+== Packages
+
+The following is the list of available packages and their exports.
+
+=== `@perfective/eslint-config-react`
 
+* `perfectiveEslintReactConfig(configs: Linter.Config[] = []): Linter.Config[]`
+— creates a list of flat configs.
 
-== Rules Configuration Extension Functions
+=== `@perfective/eslint-config-react/typescript-eslint`
 
-This package re-exports
-https://github.com/perfective/eslint-config#rules-configuration-extension-functions[rules configuration functions],
-including overrides with additional React customizations:
+* `typescriptEslintNamingConvention(extensions: TypescriptEslintNamingConvention[] = []): TypescriptEslintNamingConvention[]`
+— creates a React-compatible configuration with the given extensions
+for the `@typescript-eslint/naming-convention` rule.
 
-* `typescriptEslintNamingConvention(extensions)`;
-* `unicornPreventAbbreviations(replacements, options)`.
+=== `@perfective/eslint-config-react/testing-library`
 
+* `testingLibraryConfig(files: Glob[] = jestFiles): Linter.Config`
+— creates a flat config for `eslint-plugin-testing-library` for a given list of files globs.
 
-== Roadmap
+=== `@perfective/eslint-config-react/unicorn`
 
-* Research more ESLint React plugins.
+* `unicornPreventAbbreviations(replacements: UnicornPreventAbbreviationReplacements = {}, options: Partial<Pick<UnicornPreventAbbreviations, 'checkProperties'>> = {}): UnicornPreventAbbreviations`
+— adds React-specific abbreviations for the `unicorn/prevent-abbreviations` rule.

package/README.md

@@ -2,59 +2,71 @@
 
 `@perfective/eslint-config-react` provides
 a [shareable ESLint configuration](https://eslint.org/docs/latest/developer-guide/shareable-configs)
-for developing the `@perfective` [React](https://reactjs.org) packages.
-This package extends the
-[`@perfective/eslint-config`](https://www.npmjs.com/package/@perfective/eslint-config) package.
+for [React](https://reactjs.org) development.
 
-`@perfective/eslint-config-react` uses the following ESLint plugins:
+`@perfective/eslint-config-react` adds the following ESLint plugins to the
+[`@perfective/eslint-config`](https://www.npmjs.com/package/@perfective/eslint-config) configuration:
 
--   [`eslint-plugin-react`](https://github.com/jsx-eslint/eslint-plugin-react);
--   [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks);
--   [`eslint-plugin-react-hooks-ssr`](https://github.com/correttojs/eslint-plugin-react-hooks-ssr);
--   [`eslint-plugin-react-perf`](https://github.com/cvazac/eslint-plugin-react-perf);
--   [`eslint-plugin-jsx-a11y`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y).
+- [`eslint-plugin-react`](https://github.com/jsx-eslint/eslint-plugin-react);
+- [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks);
+- [`eslint-plugin-react-perf`](https://github.com/cvazac/eslint-plugin-react-perf);
+- [`eslint-plugin-jsx-a11y`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y).
 
 ## Setup
 
-1. Require `@perfective/eslint-config-react` and its peer dependencies as dev dependencies:
-
-```bash
-npm install --save-dev \
-    @perfective/eslint-config-react \
-    @babel/eslint-parser \
-    @typescript-eslint/eslint-plugin \
-    @typescript-eslint/parser \
-    eslint \
-    eslint-import-resolver-typescript \
-    eslint-plugin-array-func \
+1. Require `@perfective/eslint-config-react`:
+
+    ```bash
+    npm install --save-dev @perfective/eslint-config-react
+    ```
+
+    Required peer dependencies are installed automatically.
+
+2. Import `perfectiveEslintReactConfig` to `eslint.config.js`:
+
+    ```javascript
+    import { perfectiveEslintReactConfig } from '@perfective/eslint-config-react';
+
+    export default perfectiveEslintReactConfig();
+    ```
+
+3. _Optional_ Install optional peer dependencies to add tool-specific linting rules.
+
+    ```bash
+    npm install --save-dev \
     eslint-plugin-cypress \
-    eslint-plugin-eslint-comments \
-    eslint-plugin-import \
     eslint-plugin-jest \
     eslint-plugin-jest-dom \
-    eslint-plugin-jsdoc \
-    eslint-plugin-jsx-a11y \
-    eslint-plugin-n \
-    eslint-plugin-node \
-    eslint-plugin-prefer-arrow \
-    eslint-plugin-promise \
-    eslint-plugin-react \
-    eslint-plugin-react-hooks \
-    eslint-plugin-react-hooks-ssr \
-    eslint-plugin-react-perf \
-    eslint-plugin-rxjs \
-    eslint-plugin-simple-import-sort \
-    eslint-plugin-sonarjs \
-    eslint-plugin-testing-library \
-    eslint-plugin-unicorn
-```
-
-2. Require the configuration in your root `.eslintrc.js`.
-
-```javascript
-module.exports = {
-    extends: ['@perfective/eslint-config-react'],
-};
-```
-
-3. Configure your `.eslintignore` file.
+    eslint-plugin-rxjs-x \
+    eslint-plugin-testing-library
+    ```
+
+    Import configurations to `eslint.config.js`.
+
+    ```javascript
+    import { perfectiveEslintReactConfig } from '@perfective/eslint-config-react';
+
+    // Optional dependencies.
+    import { cypressConfig } from '@perfective/eslint-config/cypress';
+    import { jestConfig, jestTypescriptConfig } from '@perfective/eslint-config/jest';
+    import { jestDomConfig } from '@perfective/eslint-config/jest-dom';
+    import { rxjsConfig } from '@perfective/eslint-config/rxjs';
+    import { testingLibraryConfig } from '@perfective/eslint-config-react/testing-library';
+
+    export default perfectiveEslintReactConfig([
+        cypressConfig,
+        jestConfig,
+        jestTypescriptConfig,
+        jestDomConfig,
+        rxjsConfig,
+        testingLibraryConfig,
+    ]);
+    ```
+
+    > **Note:** `*.d.ts` files and `dist` directories are ignored by the configuration.
+    > `node_modules` and dot-files are ignored by the `eslint`.
+    > If more directories or file types need to be ignored, see the
+    > [`.eslintignore` file](https://eslint.org/docs/latest/use/configure/ignore#the-eslintignore-file) docs.
+
+Read the [full documentation](https://github.com/perfective/estlint-config-react/blob/main/README.adoc)
+in the repository.

package/config/jsx-a11y/jsx-a11y-config.d.ts

@@ -0,0 +1,2 @@
+import { Linter } from 'eslint';
+export declare function jsxA11yConfig(): Linter.Config;

package/config/jsx-a11y/jsx-a11y-config.js

@@ -0,0 +1,81 @@
+import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
+export function jsxA11yConfig() {
+  return {
+    plugins: {
+      'jsx-a11y': jsxA11yPlugin
+    },
+    rules: {
+      'jsx-a11y/accessible-emoji': 'error',
+      'jsx-a11y/alt-text': 'error',
+      'jsx-a11y/anchor-has-content': ['error', {
+        components: []
+      }],
+      'jsx-a11y/anchor-is-valid': ['error', {
+        components: [],
+        specialLink: [],
+        aspects: ['noHref', 'invalidHref', 'preferButton']
+      }],
+      'jsx-a11y/aria-activedescendant-has-tabindex': 'error',
+      'jsx-a11y/aria-props': 'error',
+      'jsx-a11y/aria-proptypes': 'error',
+      'jsx-a11y/aria-role': ['error', {
+        allowedInvalidRoles: [],
+        ignoreNonDOM: false
+      }],
+      'jsx-a11y/aria-unsupported-elements': 'error',
+      'jsx-a11y/autocomplete-valid': ['error', {
+        inputComponents: []
+      }],
+      'jsx-a11y/click-events-have-key-events': 'error',
+      'jsx-a11y/heading-has-content': ['error', {
+        components: []
+      }],
+      'jsx-a11y/html-has-lang': 'error',
+      'jsx-a11y/iframe-has-title': 'error',
+      'jsx-a11y/img-redundant-alt': ['error', {
+        components: [],
+        words: []
+      }],
+      'jsx-a11y/interactive-supports-focus': ['error', {
+        tabbable: []
+      }],
+      'jsx-a11y/label-has-associated-control': ['error', {
+        labelComponents: [],
+        labelAttributes: [],
+        controlComponents: [],
+        assert: 'either',
+        depth: 2
+      }],
+      'jsx-a11y/lang': 'error',
+      'jsx-a11y/media-has-caption': ['error', {
+        audio: [],
+        video: [],
+        track: []
+      }],
+      'jsx-a11y/mouse-events-have-key-events': ['error', {
+        hoverInHandlers: ['onMouseOver'],
+        hoverOutHandlers: ['onMouseOut']
+      }],
+      'jsx-a11y/no-access-key': 'error',
+      'jsx-a11y/no-aria-hidden-on-focusable': 'error',
+      'jsx-a11y/no-autofocus': ['error', {
+        ignoreNonDOM: false
+      }],
+      '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-onchange': 'error',
+      'jsx-a11y/no-redundant-roles': ['error', {
+        nav: ['navigation']
+      }],
+      'jsx-a11y/no-static-element-interactions': 'error',
+      'jsx-a11y/prefer-tag-over-role': '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'
+    }
+  };
+}

package/config/perfective-eslint-react-config.d.ts

@@ -0,0 +1,7 @@
+import { Linter } from 'eslint';
+/**
+ * Creates a list of flat configs.
+ *
+ * @since v0.17.0
+ */
+export declare function perfectiveEslintReactConfig(configs?: Linter.Config[]): Linter.Config[];

package/config/perfective-eslint-react-config.js

@@ -0,0 +1,24 @@
+import { perfectiveEslintConfig, typescriptFiles } from '@perfective/eslint-config';
+import { jsxA11yConfig } from "./jsx-a11y/jsx-a11y-config.js";
+import { reactConfig } from "./react/react-config.js";
+import { reactHooksConfig } from "./react-hooks/react-hooks-config.js";
+import { reactPerfConfig } from "./react-perf/react-perf-config.js";
+import { typescriptEslintNamingConvention } from "./typescript-eslint/rules/typescript-eslint.js";
+import { unicornPreventAbbreviations } from "./unicorn/rules/unicorn.js";
+export function perfectiveEslintReactConfig(configs = []) {
+  return perfectiveEslintConfig([jsxA11yConfig, reactConfig, reactHooksConfig, reactPerfConfig, {
+    rules: {
+      '@stylistic/indent': ['warn', 4, {
+        SwitchCase: 1,
+        ignoredNodes: ['TSTypeParameterInstantiation']
+      }],
+      'unicorn/prevent-abbreviations': ['warn', unicornPreventAbbreviations()]
+    }
+  }, {
+    files: typescriptFiles,
+    rules: {
+      '@typescript-eslint/naming-convention': ['error', ...typescriptEslintNamingConvention()],
+      'prefer-arrow/prefer-arrow-functions': 'off'
+    }
+  }, ...configs]);
+}

package/config/react/jsx.d.ts

@@ -0,0 +1 @@
+export declare const reactJsxRules: Record<string, unknown>;

package/config/react/jsx.js

@@ -0,0 +1,88 @@
+export const reactJsxRules = {
+  'react/jsx-boolean-value': ['warn', 'always'],
+  'react/jsx-child-element-spacing': 'off',
+  'react/jsx-closing-bracket-location': 'off',
+  'react/jsx-closing-tag-location': 'off',
+  'react/jsx-curly-brace-presence': 'off',
+  'react/jsx-curly-newline': 'off',
+  'react/jsx-curly-spacing': 'off',
+  'react/jsx-equals-spacing': 'off',
+  'react/jsx-filename-extension': ['error', {
+    allow: 'always',
+    extensions: ['.jsx', '.tsx'],
+    ignoreFilesWithoutCode: false
+  }],
+  'react/jsx-first-prop-new-line': 'off',
+  'react/jsx-fragments': ['warn', 'element'],
+  'react/jsx-handler-names': ['error', {
+    eventHandlerPrefix: 'handle',
+    eventHandlerPropPrefix: 'on',
+    checkLocalVariables: true,
+    checkInlineFunction: true
+  }],
+  'react/jsx-indent': 'off',
+  'react/jsx-indent-props': 'off',
+  'react/jsx-key': ['error', {
+    checkFragmentShorthand: true,
+    checkKeyMustBeforeSpread: true,
+    warnOnDuplicates: true
+  }],
+  'react/jsx-max-depth': ['error', {
+    max: 4
+  }],
+  'react/jsx-max-props-per-line': 'off',
+  'react/jsx-newline': 'off',
+  'react/jsx-no-bind': ['error', {
+    ignoreDOMComponents: false,
+    ignoreRefs: false,
+    allowArrowFunctions: false,
+    allowFunctions: false
+  }],
+  'react/jsx-no-comment-textnodes': 'error',
+  'react/jsx-no-constructed-context-values': 'error',
+  'react/jsx-no-duplicate-props': ['error', {
+    ignoreCase: true
+  }],
+  'react/jsx-no-leaked-render': ['warn', {
+    validStrategies: ['ternary']
+  }],
+  'react/jsx-no-literals': ['error', {
+    noStrings: false,
+    allowedStrings: [],
+    ignoreProps: true,
+    noAttributeStrings: false
+  }],
+  'react/jsx-props-no-spread-multi': 'error',
+  'react/jsx-no-script-url': ['error', {
+    includeFromSettings: false
+  }],
+  'react/jsx-no-target-blank': ['warn', {
+    allowReferrer: false,
+    enforceDynamicLinks: 'always',
+    forms: true,
+    links: true,
+    warnOnSpreadAttributes: true
+  }],
+  'react/jsx-no-undef': ['error', {
+    allowGlobals: false
+  }],
+  'react/jsx-no-useless-fragment': ['warn', {
+    allowExpressions: true
+  }],
+  'react/jsx-one-expression-per-line': 'off',
+  'react/jsx-pascal-case': 'off',
+  'react/jsx-props-no-multi-spaces': 'off',
+  'react/jsx-props-no-spreading': ['error', {
+    html: 'enforce',
+    custom: 'enforce',
+    explicitSpread: 'enforce',
+    exceptions: []
+  }],
+  'react/jsx-sort-default-props': 'off',
+  'react/jsx-sort-props': 'off',
+  'react/jsx-space-before-closing': 'off',
+  'react/jsx-tag-spacing': 'off',
+  'react/jsx-uses-react': 'error',
+  'react/jsx-uses-vars': 'error',
+  'react/jsx-wrap-multilines': 'off'
+};

package/config/react/react-config.d.ts

@@ -0,0 +1,2 @@
+import { Linter } from 'eslint';
+export declare function reactConfig(): Linter.Config;

package/config/react/react-config.js

@@ -0,0 +1,139 @@
+import react from 'eslint-plugin-react';
+import globals from 'globals';
+import { javascriptFiles, typescriptFiles } from '@perfective/eslint-config';
+import { reactJsxRules } from "./jsx.js";
+export function reactConfig() {
+  return {
+    files: [...javascriptFiles, ...typescriptFiles],
+    plugins: {
+      react: react
+    },
+    languageOptions: {
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true
+        }
+      },
+      globals: Object.assign({}, globals.browser)
+    },
+    rules: Object.assign(Object.assign({}, reactJsxRules), {
+      'react/boolean-prop-naming': ['error', {
+        propTypeNames: ['bool'],
+        rule: '^(is|has)[A-Z]([A-Za-z0-9]?)+',
+        validateNested: true
+      }],
+      'react/button-has-type': ['error', {
+        button: true,
+        submit: true,
+        reset: true
+      }],
+      'react/checked-requires-onchange-or-readonly': 'error',
+      'react/default-props-match-prop-types': 'error',
+      'react/destructuring-assignment': ['error', 'never'],
+      'react/display-name': ['error', {
+        checkContextObjects: true,
+        ignoreTranspilerName: false
+      }],
+      'react/forbid-component-props': 'error',
+      'react/forbid-dom-props': ['error', {
+        forbid: []
+      }],
+      'react/forbid-elements': ['error', {
+        forbid: []
+      }],
+      'react/forbid-foreign-prop-types': 'error',
+      'react/forbid-prop-types': ['error', {
+        forbid: ['any', 'array', 'object'],
+        checkContextTypes: true,
+        checkChildContextTypes: true
+      }],
+      'react/forward-ref-uses-ref': 'error',
+      'react/function-component-definition': ['warn', {
+        namedComponents: 'function-declaration',
+        unnamedComponents: 'function-expression'
+      }],
+      'react/hook-use-state': ['error', {
+        allowDestructuredState: false
+      }],
+      'react/iframe-missing-sandbox': 'error',
+      'react/no-access-state-in-setstate': 'error',
+      'react/no-adjacent-inline-elements': 'error',
+      'react/no-array-index-key': 'error',
+      'react/no-arrow-function-lifecycle': 'warn',
+      'react/no-children-prop': ['error', {
+        allowFunctions: false
+      }],
+      'react/no-danger': 'error',
+      'react/no-danger-with-children': 'error',
+      'react/no-deprecated': 'error',
+      'react/no-did-mount-set-state': ['error', 'disallow-in-func'],
+      'react/no-did-update-set-state': ['error', 'disallow-in-func'],
+      'react/no-direct-mutation-state': 'error',
+      'react/no-find-dom-node': 'error',
+      'react/no-invalid-html-attribute': 'warn',
+      'react/no-is-mounted': 'error',
+      'react/no-multi-comp': ['error', {
+        ignoreStateless: false
+      }],
+      'react/no-namespace': 'error',
+      'react/no-object-type-as-default-prop': 'error',
+      'react/no-redundant-should-component-update': 'error',
+      'react/no-render-return-value': 'error',
+      'react/no-set-state': 'off',
+      'react/no-string-refs': ['error', {
+        noTemplateLiterals: true
+      }],
+      'react/no-this-in-sfc': 'error',
+      'react/no-typos': 'error',
+      'react/no-unescaped-entities': ['error', {
+        forbid: ['>', '}']
+      }],
+      'react/no-unknown-property': ['warn', {
+        ignore: [],
+        requireDataLowercase: true
+      }],
+      'react/no-unsafe': 'error',
+      'react/no-unstable-nested-components': ['error', {
+        allowAsProps: false
+      }],
+      'react/no-unused-prop-types': 'error',
+      'react/no-unused-state': 'error',
+      'react/no-will-update-set-state': ['error', 'disallow-in-func'],
+      'react/prefer-es6-class': ['error', 'always'],
+      'react/prefer-exact-props': 'off',
+      'react/prefer-read-only-props': 'warn',
+      'react/prefer-stateless-function': 'off',
+      'react/prop-types': 'error',
+      'react/react-in-jsx-scope': 'error',
+      'react/require-default-props': 'error',
+      'react/require-optimization': ['error', {
+        allowDecorators: []
+      }],
+      'react/require-render-return': 'error',
+      'react/self-closing-comp': ['warn', {
+        component: true,
+        html: true
+      }],
+      'react/sort-comp': ['error', {
+        order: ['static-methods', 'lifecycle', 'everything-else', 'render'],
+        groups: {
+          lifecycle: ['displayName', 'propTypes', 'contextTypes', 'childContextTypes', 'mixins', 'statics', 'defaultProps', 'constructor', 'getDefaultProps', 'state', 'getInitialState', 'getChildContext', 'getDerivedStateFromProps', 'componentWillMount', 'UNSAFE_componentWillMount', 'componentDidMount', 'componentWillReceiveProps', 'UNSAFE_componentWillReceiveProps', 'shouldComponentUpdate', 'componentWillUpdate', 'UNSAFE_componentWillUpdate', 'getSnapshotBeforeUpdate', 'componentDidUpdate', 'componentDidCatch', 'componentWillUnmount']
+        }
+      }],
+      'react/sort-default-props': ['error', {
+        ignoreCase: false
+      }],
+      'react/sort-prop-types': ['error', {
+        ignoreCase: false,
+        callbacksLast: true,
+        requiredFirst: true,
+        sortShapeProp: true,
+        noSortAlphabetically: false
+      }],
+      'react/state-in-constructor': ['error', 'always'],
+      'react/static-property-placement': ['error', 'static public field'],
+      'react/style-prop-object': 'error',
+      'react/void-dom-elements-no-children': 'error'
+    })
+  };
+}

package/config/react-hooks/react-hooks-config.d.ts

@@ -0,0 +1,2 @@
+import { Linter } from 'eslint';
+export declare function reactHooksConfig(): Linter.Config;

package/config/react-hooks/react-hooks-config.js

@@ -0,0 +1,14 @@
+import { configs } from 'eslint-plugin-react-hooks';
+import { javascriptFiles, typescriptFiles } from '@perfective/eslint-config';
+export function reactHooksConfig() {
+  return {
+    files: [...javascriptFiles, ...typescriptFiles],
+    plugins: {
+      'react-hooks': configs['recommended-latest'].plugins['react-hooks']
+    },
+    rules: {
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn'
+    }
+  };
+}

package/config/react-perf/react-perf-config.d.ts

@@ -0,0 +1,2 @@
+import { Linter } from 'eslint';
+export declare function reactPerfConfig(): Linter.Config;

package/config/react-perf/react-perf-config.js

@@ -0,0 +1,14 @@
+import reactPerfPlugin from 'eslint-plugin-react-perf';
+export function reactPerfConfig() {
+  return {
+    plugins: {
+      'react-perf': reactPerfPlugin
+    },
+    rules: {
+      'react-perf/jsx-no-jsx-as-prop': 'error',
+      'react-perf/jsx-no-new-array-as-prop': 'error',
+      'react-perf/jsx-no-new-function-as-prop': 'error',
+      'react-perf/jsx-no-new-object-as-prop': 'error'
+    }
+  };
+}