refactor!: migrate from eslint-plugin-react to eslint-react

change/@rightcapital-eslint-config-typescript-react-51af7e30-c913-49c4-bb69-c7c8c0fbf666.json

@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "refactor!: migrate from eslint-plugin-react to eslint-react",
+  "packageName": "@rightcapital/eslint-config-typescript-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/eslint-config-typescript-react/package.json

@@ -27,19 +27,19 @@
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-jsx-a11y": "6.7.1",
-    "eslint-plugin-react": "7.34.2",
-    "eslint-plugin-react-hooks": "4.6.2"
+    "eslint-plugin-react-hooks": "4.6.2",
+    "@eslint-react/eslint-plugin": "1.5.16"
   },
   "devDependencies": {
     "@rightcapital/tsconfig": "workspace:*"
   },
   "peerDependencies": {
-    "eslint": "^8.23.1",
+    "eslint": "^8.57.0",
     "typescript": "^5.0.0"
   },
   "packageManager": "[email protected]",
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=18.18.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

packages/eslint-config-typescript-react/src/index.ts

@@ -4,25 +4,20 @@ require('@rushstack/eslint-patch/modern-module-resolution');
 
 const config: Linter.Config = {
   extends: [
-    require.resolve('eslint-config-airbnb/rules/react'),
-    require.resolve('eslint-config-airbnb/rules/react-a11y'),
-    require.resolve('eslint-config-airbnb/hooks'),
     require.resolve('@rightcapital/eslint-config-typescript'),
+    require.resolve('eslint-config-airbnb/hooks'),
+    require.resolve('eslint-config-airbnb/rules/react-a11y'),
     'plugin:@rightcapital/recommended-react',
+    "plugin:@eslint-react/recommended-legacy",
   ],
   plugins: ['@rightcapital'],
   reportUnusedDisableDirectives: true,
   rules: {
     'jsx-a11y/anchor-is-valid': 'off',
     'jsx-a11y/click-events-have-key-events': 'off',
-    'react/function-component-definition': 'off',
-    'react/jsx-filename-extension': ['warn', { extensions: ['.jsx', '.tsx'] }],
-    'react/jsx-key': ['error'],
-    'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
-    'react/jsx-uses-react': 'off',
-    'react/react-in-jsx-scope': 'off',
-    // We are using TypeScript, so it's not necessary to use React's defaultProps
-    'react/require-default-props': 'off',
+    '@eslint-react/naming-convention/filename-extension': ['warn', { extensions: ['.jsx', '.tsx'] }],
+    '@eslint-react/jsx/no-missing-key': ['error'],
+    '@eslint-react/jsx/no-useless-fragment': ['error'],
   },
 };