feat(eslint-config): update config for react and react app

packages/eslint-config/README.md

@@ -34,16 +34,15 @@ Custom ESLint configuration for streamlined linting across projects.
   Install dependencies:
 
   ```sh
-  npm i -D @prefabs.tech/eslint-config @typescript-eslint/eslint-plugin@8.14.0 @typescript-eslint/parser@8.14.0 eslint@8.57.1 eslint-config-prettier@9.1.0 eslint-import-resolver-alias@1.1.2 eslint-import-resolver-typescript@3.6.3 eslint-plugin-import@2.31.0 eslint-plugin-prettier@5.2.1 eslint-plugin-unicorn@56.0.1 prettier@3.3.3 typescript
+  pnpm i -D @prefabs.tech/eslint-config eslint prettier typescript
   ```
 
-  Create a `.eslintrc.js` file:
+  Create a `eslint.config.js` file:
 
   ```js
-  module.exports = {
-    root: true,
-    extends: ["@prefabs.tech/eslint-config/react"],
-  };
+  import reactConfig from "@prefabs.tech/eslint-config/react.js";
+
+  export default reactConfig;
   ```
 
 * ### For react apps:
@@ -53,17 +52,16 @@ Custom ESLint configuration for streamlined linting across projects.
   Install dependencies:
 
   ```sh
-  npm i -D @prefabs.tech/eslint-config @typescript-eslint/eslint-plugin@8.14.0 @typescript-eslint/parser@8.14.0 eslint@8.57.1 eslint-config-prettier@9.1.0 eslint-config-react-app@7.0.1 eslint-import-resolver-alias@1.1.2 eslint-import-resolver-typescript@3.6.3 eslint-plugin-cypress@3.6.0 eslint-plugin-import@2.31.0 eslint-plugin-prettier@5.2.1 eslint-plugin-unicorn@56.0.1 prettier@3.3.3 typescript
+  pnpm i -D @prefabs.tech/eslint-config eslint prettier typescript
   ```
 
-  Create a `.eslintrc.js` file:
+  Create a `eslint.config.js` file:
 
-  ```js
-  module.exports = {
-    root: true,
-    extends: ["@prefabs.tech/eslint-config/react-app"],
-  };
-  ```
+    ```js
+    import reactConfig from "@prefabs.tech/eslint-config/react-app.js";
+
+    export default reactConfig;
+    ```
 
 * ### For vue apps and libraries:
 
@@ -72,7 +70,7 @@ Custom ESLint configuration for streamlined linting across projects.
   Install dependencies:
 
   ```sh
-  pnpm i -D @prefabs.tech/eslint-config eslint
+  pnpm i -D @prefabs.tech/eslint-config eslint prettier typescript
   ```
 
   Create a `eslint.config.js` file:
@@ -114,7 +112,6 @@ Custom ESLint configuration for streamlined linting across projects.
 
   export default config;
   ```
-  ```
 
 ## Adding linting scripts
 In your `package.json`, add the following commands to the `scripts` section:

packages/eslint-config/package.json

@@ -27,9 +27,12 @@
     "eslint-import-resolver-alias": "1.1.2",
     "eslint-import-resolver-typescript": "4.4.4",
     "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-n": "17.20.0",
     "eslint-plugin-prettier": "5.5.5",
     "eslint-plugin-promise": "7.2.1",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "7.0.1",
     "eslint-plugin-unicorn": "62.0.0",
     "eslint-plugin-vue": "10.7.0",
     "globals": "17.3.0",

packages/eslint-config/react-app.js

@@ -1,82 +1,47 @@
-module.exports = {
-  env: {
-    node: true,
-  },
-  extends: [
-    "eslint:recommended",
-    "react-app",
-    "react-app/jest",
-    "plugin:prettier/recommended",
-  ],
-  overrides: [
-    {
-      extends: ["plugin:cypress/recommended"],
-      files: ["cypress/integration/**.spec.{js,ts,jsx,tsx}"],
-    },
-  ],
-  parserOptions: {
-    parser: "@typescript-eslint/parser",
-  },
-  plugins: ["prettier", "unicorn"],
-  root: true,
-  rules: {
-    "brace-style": ["error", "1tbs"],
-    curly: ["error", "all"],
-    "import/order": [
-      1,
-      {
-        alphabetize: {
-          order: "asc",
-          caseInsensitive: true,
-        },
-        groups: [
-          "builtin",
-          "external",
-          "internal",
-          ["parent", "sibling"],
-          "index",
-          "object",
-          "type",
-        ],
-        "newlines-between": "always",
-      },
-    ],
-    "no-console": process.env.NODE_ENV === "production" ? "error" : "warn",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "warn",
-    "prettier/prettier": "error",
-    "unicorn/filename-case": [
-      "error",
-      {
-        cases: {
-          kebabCase: true,
-          pascalCase: true,
-        },
+import jsxA11yPlugin from "eslint-plugin-jsx-a11y";
+import reactPlugin from "eslint-plugin-react";
+import reactHooksPlugin from "eslint-plugin-react-hooks";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+
+import baseReactConfig from "./react.js";
+
+export default [
+  ...baseReactConfig,
+
+  {
+    files: ["**/*.{js,jsx,ts,tsx}"],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.es2021,
+        ...globals.node,
       },
-    ],
-    "unicorn/numeric-separators-style": [
-      "error",
-      {
-        number: {
-          minimumDigits: 6,
-          groupLength: 3,
-        },
+      ecmaVersion: "latest",
+      parser: tseslint.parser,
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
       },
-    ],
-    "unicorn/prevent-abbreviations": [
-      "error",
-      {
-        allowList: {
-          db: true,
-          docs: true,
-          env: true,
-          err: true,
-          i: true,
-          param: true,
-          params: true,
-          req: true,
-          res: true,
-        },
+      sourceType: "module",
+    },
+    plugins: {
+      react: reactPlugin,
+      "react-hooks": reactHooksPlugin,
+      "jsx-a11y": jsxA11yPlugin,
+    },
+    rules: {
+      ...jsxA11yPlugin.configs.recommended.rules,
+      ...reactPlugin.configs.recommended.rules,
+      ...reactHooksPlugin.configs.recommended.rules,
+      "jsx-a11y/click-events-have-key-events": "off",
+      "react/no-children-prop": "off",
+      "react/prop-types": "off",
+      "react/react-in-jsx-scope": "off",
+    },
+    settings: {
+      react: {
+        version: "detect",
       },
-    ],
+    },
   },
-};
+];