feat: add react config

eslint.config.js

@@ -1,6 +1,13 @@
-import baseConfig from './src/base.js';
+import configs from './src/index.js';
 
 export default [
-  ...baseConfig,
-  { ignores: ['**/tests/base', '**/tests/typescript', '**/dist'] },
+  ...configs.configs.base,
+  {
+    ignores: [
+      '**/tests/base',
+      '**/tests/typescript',
+      '**/tests/react',
+      '**/dist',
+    ],
+  },
 ];

package.json

@@ -55,18 +55,29 @@
     "@jest/globals": "^29.7.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
+    "@types/react": "^18.3.8",
     "conventional-changelog-conventionalcommits": "^8.0.0",
     "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-react": "^7.36.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.12",
     "husky": "^9.1.6",
     "jest": "^29.7.0",
     "prettier": "^3.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rollup": "^3.29.5",
     "semantic-release": "^24.1.1",
     "typescript": "^5.6.2",
     "typescript-eslint": "^8.6.0"
   },
   "peerDependencies": {
     "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-react": "^7.36.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.12",
     "typescript-eslint": "^8.6.0"
   },
   "prettier": "@nimec/prettier-config",

src/index.js

@@ -1,9 +1,11 @@
 import baseConfig from './base.js';
+import reactConfig from './react.js';
 import typescriptConfig from './typescript.js';
 
 export default {
   configs: {
     base: baseConfig,
     typescript: typescriptConfig,
+    react: reactConfig,
   },
 };

src/react.js

@@ -0,0 +1,45 @@
+import baseConfig from './base.js';
+
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+
+export default [
+  ...baseConfig,
+  jsxA11y.flatConfigs.recommended,
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      react: react,
+    },
+    rules: {
+      ...react.configs.flat.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/react-in-jsx-scope': 'off',
+    },
+  },
+  {
+    files: ['**/*.{jsx,tsx}'],
+    plugins: {
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+];

tests/react.test.js

@@ -0,0 +1,79 @@
+import { expect, test } from '@jest/globals';
+import { ESLint } from 'eslint';
+import config from '../src/index';
+
+test('react flavor should be linted correctly', async () => {
+  const eslint = new ESLint({
+    overrideConfigFile: true,
+    overrideConfig: [...config.configs.typescript, ...config.configs.react],
+    fix: false,
+  });
+
+  const results = await eslint.lintFiles(['tests/react']);
+
+  expect(results).toBeDefined();
+  expect(results.length).toBe(3);
+
+  expect(results.at(0).messages.length).toBe(5);
+  expect(results.at(0).messages).toEqual(
+    expect.arrayContaining([
+      expect.objectContaining({
+        ruleId: 'react-refresh/only-export-components',
+        line: 1,
+        column: 1,
+      }),
+      expect.objectContaining({
+        ruleId: 'react/display-name',
+        line: 1,
+        column: 16,
+      }),
+      expect.objectContaining({
+        ruleId: 'react/prop-types',
+        line: 1,
+        column: 19,
+      }),
+      expect.objectContaining({
+        ruleId: 'unicorn/no-anonymous-default-export',
+        line: 1,
+        column: 24,
+      }),
+      expect.objectContaining({
+        ruleId: 'sonarjs/jsx-no-useless-fragment',
+        line: 2,
+        column: 10,
+      }),
+    ])
+  );
+
+  expect(results.at(1).messages.length).toBe(2);
+  expect(results.at(1).messages).toEqual(
+    expect.arrayContaining([
+      expect.objectContaining({
+        ruleId: 'no-console',
+        line: 9,
+        column: 5,
+      }),
+      expect.objectContaining({
+        ruleId: 'react-hooks/exhaustive-deps',
+        line: 10,
+        column: 6,
+      }),
+    ])
+  );
+
+  expect(results.at(2).messages.length).toBe(2);
+  expect(results.at(2).messages).toEqual(
+    expect.arrayContaining([
+      expect.objectContaining({
+        ruleId: 'react-refresh/only-export-components',
+        line: 1,
+        column: 14,
+      }),
+      expect.objectContaining({
+        ruleId: 'sonarjs/no-empty-function',
+        line: 1,
+        column: 26,
+      }),
+    ])
+  );
+});

tests/react/app.jsx

@@ -0,0 +1,3 @@
+export default ({ a }) => {
+  return <>{a}</>;
+};

tests/react/hooks.tsx

@@ -0,0 +1,13 @@
+import React, { useEffect } from 'react';
+
+type Properties = {
+  name: string;
+};
+
+export default function Test({ name }: Properties) {
+  useEffect(() => {
+    console.log('Hello', name);
+  }, []);
+
+  return <div>Test</div>;
+}

tests/react/refresh.jsx

@@ -0,0 +1,2 @@
+export const foo = () => {};
+export const Bar = () => <></>;