chore(npm/react): migrate to @packages/eslint-config (#33426)

* chore: eslint migration for npm/react framework

* fix cursor feedback

* updates

guides/eslint-migration.md

@@ -9,7 +9,7 @@
 - [x] npm/cypress-schematic ✅ **COMPLETED** 
 
 ### Batch 2: Framework adapters
-- [ ] npm/react
+- [x] npm/react ✅ **COMPLETED**
 - [ ] npm/vue
 - [ ] npm/svelte
 

npm/react/.eslintignore

@@ -1,5 +0,0 @@
-**/dist
-**/*.d.ts
-**/package-lock.json
-**/tsconfig.json
-**/cypress/fixtures

npm/react/.eslintrc

@@ -1,30 +0,0 @@
-{
-  "plugins": [
-    "cypress",
-    "@cypress/dev"
-  ],
-  "extends": [
-    "plugin:@cypress/dev/general",
-    "plugin:@cypress/dev/tests",
-    "plugin:@cypress/dev/react"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "env": {
-    "cypress/globals": true
-  },
-  "root": true,
-  "rules": {
-    "no-console": "off",
-    "mocha/no-global-tests": "off",
-    "react/jsx-filename-extension": [
-      "warn",
-      {
-        "extensions": [
-          ".js",
-          ".jsx",
-          ".tsx"
-        ]
-      }
-    ]
-  }
-}

npm/react/cypress/component/advanced/renderless/mouse-movement.jsx

@@ -1,5 +1,5 @@
 // https://medium.com/@pierrehedkvist/renderless-components-in-react-8d663746314c
-// eslint-disable-next-line no-unused-vars
+
 import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 

npm/react/cypress/component/basic/document/document.cy.jsx

@@ -12,8 +12,7 @@ const DocumentTest = ({ reportHeight }) => {
             document.documentElement.clientHeight,
             document.body.clientHeight,
           )
-        }
-        }
+        }}
       >
       Report height
       </button>

npm/react/eslint.config.ts

@@ -0,0 +1,55 @@
+import { baseConfig } from '@packages/eslint-config'
+
+// Root config files outside tsconfig may use the default project (no ** globs allowed).
+const allowDefaultProject = [
+  'babel.config.js',
+  'cypress.config.js',
+  'eslint.config.ts',
+  'rollup.config.mjs',
+  'vite.config.ts',
+]
+
+// Only enable projectService for files in tsconfig or allowDefaultProject so cypress/** is linted without type-aware rules.
+const projectServiceFiles = [
+  'src/**/*.ts',
+  'babel.config.js',
+  'cypress.config.js',
+  'eslint.config.ts',
+  'rollup.config.mjs',
+  'vite.config.ts',
+]
+
+export default [
+  { ignores: ['**/dist', '**/*.d.ts', '**/package-lock.json', '**/tsconfig.json', '**/cypress/fixtures'] },
+  ...baseConfig,
+  {
+    files: ['**/*.js', '**/*.ts', '**/*.jsx', '**/*.tsx'],
+    rules: {
+      'no-console': 'off',
+      'mocha/no-global-tests': 'off',
+      'react/prop-types': 'off',
+      'react/display-name': 'off',
+    },
+  },
+  {
+    files: projectServiceFiles,
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        projectService: {
+          allowDefaultProject,
+        },
+      },
+    },
+  },
+  {
+    files: ['cypress/**/*.js', 'cypress/**/*.ts', 'cypress/**/*.jsx', 'cypress/**/*.tsx'],
+    languageOptions: {
+      globals: {
+        Cypress: 'readonly',
+        cy: 'readonly',
+        expect: 'readonly',
+      },
+    },
+  },
+]

npm/react/package.json

@@ -11,12 +11,15 @@
     "cy:open:debug": "node --inspect-brk ../../scripts/start.js --component-testing --run-project ${PWD}",
     "cy:run": "node ../../scripts/cypress.js run --component",
     "cy:run:debug": "node --inspect-brk ../../scripts/start.js --component-testing --run-project ${PWD}",
-    "lint": "eslint --ext .js,.jsx,.ts,.tsx,.json, .",
+    "lint": "eslint",
     "test": "yarn cy:run",
     "watch": "yarn build --watch --watch.exclude ./dist/**/*"
   },
   "devDependencies": {
+    "@packages/eslint-config": "0.0.0-development",
     "@cypress/mount-utils": "0.0.0-development",
+    "eslint": "^9.31.0",
+    "jiti": "^2.4.2",
     "@vitejs/plugin-react": "4.6.0",
     "axios": "1.8.2",
     "cypress": "0.0.0-development",
@@ -102,5 +105,8 @@
       "cy",
       "expect"
     ]
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": "eslint --fix"
   }
 }