✨ add react conf

Author: dudeofawesome

eslint-config-react/base.yaml

@@ -1,3 +1,19 @@
 extends:
   - '@dudeofawesome/browser'
   - 'plugin:react/recommended'
+  - 'plugin:react-hooks/recommended'
+  - 'plugin:jsx-a11y/recommended'
+
+rules:
+  # limit max element nesting to reduce component complexity
+  react/jsx-max-depth: 'error'
+
+  # prefer ES6 classes
+  react/prefer-es6-class: 'error'
+
+  # prefer functional components
+  react/prefer-stateless-function: 'error'
+
+  react/no-children-prop: 'off'
+
+  react/jsx-key: 'error'

eslint-config-react/package.json

@@ -20,10 +20,16 @@
     "test": "node --require ts-node/register --test test/index.ts"
   },
   "dependencies": {
-    "eslint-plugin-react": "^7.33.2"
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0"
   },
   "peerDependencies": {
     "@dudeofawesome/eslint-config": "^1.3.0",
     "eslint": "^8.49.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.23",
+    "react": "^18.2.0"
   }
 }

eslint-config-react/test/index.ts

@@ -12,10 +12,10 @@ describe('eslint-config-react', () => {
   defaultTestSet(linter);
 
   describe('passes', () => {
-    it(`should pass radix`, async () =>
+    it(`should parse jsx`, async () =>
       testNoFail({
         linter,
-        code: `parseInt('10');\n`,
+        code: `import React from 'react';\n\nexport const A = () => <div></div>;\n`,
         file_path: 'index.jsx',
       }));
   });
@@ -36,5 +36,17 @@ describe('eslint-config-react', () => {
         ruleId: 'no-console',
         file_path: 'index.jsx',
       }));
+
+    it(`should fail react/jsx-key`, () =>
+      testRuleFail({
+        linter,
+        code: `import React from 'react';
+
+export const Foo = (props) => <div>{props}</div>;
+export const Bar = (props) => props.list.map((l) => <Foo text={l}></Foo>);
+`,
+        ruleId: 'react/jsx-key',
+        file_path: 'index.jsx',
+      }));
   });
 });