chore: enable @eslint-react/eslint-plugin

Author: JounQin

eslint.config.js

@@ -1,6 +1,7 @@
 // @ts-check
 
 import eslint from '@eslint/js'
+import react from '@eslint-react/eslint-plugin'
 import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript'
 import { importX } from 'eslint-plugin-import-x'
 import * as reactHooks from 'eslint-plugin-react-hooks'
@@ -13,10 +14,15 @@ export default config(
   eslint.configs.recommended,
   importX.flatConfigs.recommended,
   importX.flatConfigs.typescript,
+  react.configs.recommended,
   reactHooks.configs['recommended-latest'],
   {
     files: ['**/*.{ts,tsx}'],
-    extends: [configs.eslintRecommended, configs.strictTypeChecked],
+    extends: [
+      configs.eslintRecommended,
+      configs.strictTypeChecked,
+      react.configs['recommended-type-checked'],
+    ],
     languageOptions: {
       parserOptions: {
         projectService: true,

src/global/VersionsNav/index.tsx

@@ -120,6 +120,7 @@ const VersionsNav_ = () => {
     })
     const newNavMenu = getNavMenu()
     if (newNavMenu !== navMenu) {
+      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
       setNavMenu(newNavMenu)
     } else if (navMenu.parentNode) {
       observer.observe(navMenu.parentNode, { childList: true })

src/runtime/components/K8sCrd.tsx

@@ -41,6 +41,7 @@ export const K8sCrdSchemaPart = ({
   }, [])
 
   useEffect(() => {
+    // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
     setOpen(expandAll)
   }, [expandAll])
 

src/runtime/components/OpenAPIPath.tsx

@@ -53,10 +53,19 @@ export const OpenAPIParameters = ({
           typeNode = <RefLink $ref={type.$ref} />
         }
         return (
+          // eslint-disable-next-line @eslint-react/no-array-index-key
           <X.li key={index}>
-            <code>{paramObj.name}</code>(<em>in {paramObj.in}</em>): {typeNode}
-            {paramObj.required && <Badge>required</Badge>}
-            <Markdown>{paramObj.description}</Markdown>
+            <code>{paramObj.name}</code> (<em>in {paramObj.in}</em>): {typeNode}
+            {paramObj.required && (
+              <>
+                {' '}
+                <Badge>required</Badge>
+              </>
+            )}
+            <>
+              {' '}
+              <Markdown>{paramObj.description}</Markdown>
+            </>
           </X.li>
         )
       })}

src/runtime/components/OpenAPIRef.tsx

@@ -106,8 +106,8 @@ export const OpenAPIProperties = ({
   const [X] = useState(getCustomMDXComponent)
   return (
     <X.ul>
-      {Object.entries(properties).map(([name, property], index) => (
-        <X.li key={index}>
+      {Object.entries(properties).map(([name, property]) => (
+        <X.li key={name}>
           <OpenAPIProperty name={name} property={property} openapi={openapi} />
         </X.li>
       ))}

src/runtime/components/Tabs.tsx

@@ -1,21 +1,19 @@
 import { Tabs as Tabs_ } from '@rspress/core/theme'
-import {
-  Children,
-  forwardRef,
-  type ForwardRefExoticComponent,
-  type RefAttributes,
-} from 'react'
+import { Children, type RefAttributes } from 'react'
 
 import { useIsPrint } from '../hooks/index.js'
 
-export const Tabs: ForwardRefExoticComponent<
-  Parameters<typeof Tabs_>[0] & RefAttributes<HTMLDivElement>
-> = forwardRef(({ children, ...props }, ref) => {
+export type TabsProps = Parameters<typeof Tabs_>[0] &
+  RefAttributes<HTMLDivElement>
+
+export const Tabs = ({ ref, children, ...props }: TabsProps) => {
   const isPrint = useIsPrint()
   return (
     <div className="doom-tabs" ref={ref}>
       {isPrint ? (
+        // eslint-disable-next-line @eslint-react/no-children-map
         Children.map(children, (child, index) => (
+          // eslint-disable-next-line @eslint-react/no-array-index-key
           <Tabs_ key={index} {...props}>
             {child}
           </Tabs_>
@@ -25,6 +23,6 @@ export const Tabs: ForwardRefExoticComponent<
       )}
     </div>
   )
-})
+}
 
 export default Tabs

src/runtime/components/TermsTable.tsx

@@ -20,6 +20,7 @@ export const TermsTable = ({ terms }: TermsTableProps) => {
     list?.length ? (
       <X.ul>
         {list.map((item, index) => (
+          // eslint-disable-next-line @eslint-react/no-array-index-key
           <X.li key={index}>{item}</X.li>
         ))}
       </X.ul>

src/runtime/components/_HeadingTitle.tsx

@@ -25,6 +25,7 @@ export const HeadingTitle = ({
   const HeadingComponent = HeadingComponents[level]
   const slugFromChildren = useMemo(
     () =>
+      // eslint-disable-next-line @eslint-react/no-children-to-array
       Children.toArray(children)
         .filter((it) => typeof it === 'string')
         .join(''),