migrate react config (#245)

* migrate react config

Signed-off-by: Kangrui Johann Ye <kangrui.ye@cloudflight.io>

* migrate react hooks config

Signed-off-by: Kangrui Johann Ye <kangrui.ye@cloudflight.io>

* migrate jsx a11y config

Signed-off-by: Kangrui Johann Ye <kangrui.ye@cloudflight.io>

* fix typescript version for internal types

Signed-off-by: Kangrui Johann Ye <kangrui.ye@cloudflight.io>

* bump version

Signed-off-by: Kangrui Johann Ye <kangrui.ye@cloudflight.io>

---------

Signed-off-by: Kangrui Johann Ye <kangrui.ye@cloudflight.io>

Author: strawberry-choco

eslint.config.mjs

@@ -15,7 +15,6 @@ export default tseslint.config(
         // until we are done with migrating everything to v9
         ignores: [
             'packages/eslint-plugin-angular/src/configs/format-template.ts',
-            'packages/eslint-plugin-react/*',
             'packages/eslint-plugin-typescript/src/configs/index.ts',
             'packages/eslint-plugin-typescript/src/configs/json.ts',
             'packages/eslint-plugin-typescript/src/configs/package.ts',

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudflight/eslint-plugin",
-    "version": "1.0.0-rc7",
+    "version": "1.0.0-rc8",
     "private": true,
     "volta": {
         "node": "20.12.2",
@@ -44,11 +44,11 @@
         "eslint-import-resolver-typescript": "3.6.3",
         "eslint-plugin-import-x": "4.3.1",
         "eslint-plugin-json-es": "1.6.0",
-        "eslint-plugin-jsx-a11y": "6.8.0",
+        "eslint-plugin-jsx-a11y": "6.10.0",
         "eslint-plugin-n": "17.10.3",
         "eslint-plugin-no-unsanitized": "4.1.2",
-        "eslint-plugin-react": "7.34.1",
-        "eslint-plugin-react-hooks": "4.6.2",
+        "eslint-plugin-react": "7.37.1",
+        "eslint-plugin-react-hooks": "5.0.0",
         "eslint-plugin-rxjs": "5.0.3",
         "eslint-plugin-security": "3.0.1",
         "eslint-plugin-vue": "9.28.0",

packages/eslint-plugin-angular/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudflight/eslint-plugin-angular",
-    "version": "1.0.0-rc7",
+    "version": "1.0.0-rc8",
     "description": "Cloudflight eslint-plugin & eslint-config for angular",
     "volta": {
         "extends": "../../package.json"

packages/eslint-plugin-angular/src/index.ts

@@ -14,6 +14,7 @@ export const cloudflightAngularTypescriptConfig = tseslint.config(
             ...angular.configs.tsRecommended,
         ],
         processor: angular.processInlineTemplates,
+        name: 'cloudflight/angular/typescript/rules',
         rules: {
             ...eslintRules,
             ...typescriptEslintRules,
@@ -29,6 +30,7 @@ export const cloudflightAngularTemplateConfig = tseslint.config(
             ...angular.configs.templateRecommended,
             ...angular.configs.templateAccessibility,
         ],
+        name: 'cloudflight/angular/template/rules',
         rules: {
             ...angularTemplateEslintRules,
             // todo: this should be its own config

packages/eslint-plugin-node/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudflight/eslint-plugin-node",
-    "version": "1.0.0-rc7",
+    "version": "1.0.0-rc8",
     "description": "Cloudflight eslint-plugin & eslint-config for node",
     "volta": {
         "extends": "../../package.json"

packages/eslint-plugin-node/src/index.ts

@@ -16,6 +16,7 @@ export const cloudflightNodeConfig = tseslint.config(
             nounsanitized.configs.recommended,
             pluginSecurity.configs.recommended,
         ],
+        name: 'cloudflight/node/rules',
         rules: {
             ...nodeRules,
             ...securityRules,

packages/eslint-plugin-react/README.md

@@ -9,7 +9,6 @@ You can find the directory of all rules including their reasoning [here](src/con
 The following dependencies are required:
 
 ```
-"@cloudflight/eslint-plugin-typescript": ">=0.26.0",
 "eslint": ">=9.0.0 < 10.0.0"
 ```
 
@@ -25,19 +24,40 @@ In your `package.json` add the following:
   }
 ```
 
-The plugin provides 1 configuration:
-
--   @cloudflight/react/recommended
-    -   Contains rules for React files
-
-Now open your `.eslintrc.js` and add one of the configurations:
-
+Now open your `eslint.config.mjs` and add one of the configurations:
+
+```ts
+import { cloudflightReactConfig } from '@cloudflight/eslint-plugin-react';
+import { includeIgnoreFile } from '@eslint/compat';
+import { dirname, normalize, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const directory = dirname(fileURLToPath(import.meta.url));
+const gitignorePath = normalize(resolve(directory, '.gitignore'));
+
+export default [
+    includeIgnoreFile(gitignorePath),
+    ...cloudflightReactConfig,
+    {
+        languageOptions: {
+            parserOptions: {
+                project: ['tsconfig*(.*).json'],
+                tsconfigRootDir: import.meta.dirname,
+            },
+        },
+        settings: {
+            'import-x/resolver': {
+                typescript: {
+                    alwaysTryTypes: true,
+                    project: ['tsconfig*(.*).json'],
+                },
+            },
+            react: {
+                version: 'detect',
+            },
+        },
+    },
+];
 ```
-require('@rushstack/eslint-patch/modern-module-resolution');
 
-module.exports = {
-    ...
-    extends: ['plugin:@cloudflight/react/recommended'],
-    ...
-};
-```
+When executing your next `eslint .` it will now validate your code against the cloudflight-recommended rules.

packages/eslint-plugin-react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudflight/eslint-plugin-react",
-    "version": "1.0.0-rc7",
+    "version": "1.0.0-rc8",
     "description": "Cloudflight eslint-plugin & eslint-config for React",
     "volta": {
         "extends": "../../package.json"
@@ -22,20 +22,22 @@
     "publishConfig": {
         "access": "public"
     },
-    "private": true,
     "scripts": {
-        "build-packagex": "tsc"
+        "build-package": "tsc"
     },
     "dependencies": {
-        "eslint-plugin-jsx-a11y": "^6.8.0",
-        "eslint-plugin-react": "^7.34.1",
-        "eslint-plugin-react-hooks": "^4.6.2"
+        "@cloudflight/eslint-plugin-typescript": "workspace:*",
+        "@typescript-eslint/parser": "^8.8.0",
+        "eslint-plugin-jsx-a11y": "^6.10.0",
+        "eslint-plugin-react": "^7.37.1",
+        "eslint-plugin-react-hooks": "^5.0.0"
     },
     "peerDependencies": {
-        "@cloudflight/eslint-plugin-typescript": "workspace:*",
         "eslint": ">=9.0.0 < 10.0.0"
     },
     "devDependencies": {
+        "@types/eslint-plugin-jsx-a11y": "workspace:*",
+        "@types/eslint-plugin-react-hooks": "workspace:*",
         "typescript": "5.5.4"
     }
 }

packages/eslint-plugin-react/src/configs/index.ts

@@ -0,0 +1,22 @@
+import {TSESLint} from '@typescript-eslint/utils';
+
+export const reactRules: TSESLint.Linter.RulesRecord = {
+    'react/static-property-placement': ['error', 'static public field'],
+    'react/jsx-fragments': ['error', 'element'],
+    'react/sort-comp': [
+        1,
+        {
+            order: [
+                'type-annotations',
+                'static-variables',
+                'instance-variables',
+                'lifecycle',
+                'static-methods',
+                'instance-methods',
+                'everything-else',
+                'render',
+            ],
+        },
+    ],
+    'react/no-array-index-key': ['error'],
+};