@hatem427/code-guard-ci 3.2.0 → 3.4.0

package/dist/config/react.config.js

@@ -1,282 +1,20 @@
 "use strict";
 /**
  * ============================================================================
- * react.config.ts — React-specific coding rules (v19+)
+ * react.config.ts — React-specific coding rules
  * ============================================================================
  *
  * Registers rules that only apply to React projects:
- *   - React 19 hooks (use(), useActionState(), useTransition(), useOptimistic())
- *   - Server Components patterns
+ *   - Hook usage patterns
  *   - Props/state typing
- *   - Performance optimization
- *   - Security best practices
+ *   - Component patterns
+ *   - Performance anti-patterns
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.reactRules = void 0;
 const guidelines_config_1 = require("./guidelines.config");
 const reactRules = [
-    // ── NEW: React 19+ Features ────────────────────────────────────────────
-    // ─────────────────────────────────────────
-    // RULE: react-use-hook
-    // ROLE: Recommend React 19 use() hook for promise/context unwrapping
-    // PURPOSE: use() replaces .then() chains and useContext() with a
-    //          single API that works in both Server and Client Components.
-    //          It suspends the component until the promise resolves.
-    // EXAMPLE:
-    //   WRONG:
-    //     const data = await fetchData().then(res => res.json());
-    //     const theme = useContext(ThemeContext);
-    //   RIGHT:
-    //     import { use } from 'react';
-    //     const data = use(fetchData());
-    //     const theme = use(ThemeContext);
-    // ─────────────────────────────────────────
-    {
-        id: 'react-use-hook',
-        label: 'Use use() hook for unwrapping promises and context',
-        description: 'React 19 introduces use() hook to unwrap promises directly in components and access context in Server Components. Example: const data = use(fetchData())',
-        severity: 'warning',
-        fileExtensions: ['tsx', 'jsx'],
-        pattern: null,
-        customCheck: (file) => {
-            const violations = [];
-            if (/\.then\s*\(|async\s*\(\s*\).*=>.*=>/.test(file.content) &&
-                !file.content.includes('use(')) {
-                violations.push({
-                    line: null,
-                    message: 'Found promise handling. Use React 19 use() hook to unwrap promises directly.',
-                });
-            }
-            return violations;
-        },
-        applicableTo: ['react', 'nextjs'],
-        category: 'React 19',
-    },
-    // ─────────────────────────────────────────
-    // RULE: react-use-action-state
-    // ROLE: Enforce React 19 form handling pattern
-    // PURPOSE: useActionState() eliminates manual pending/error state
-    //          management for forms. It handles submission state, errors,
-    //          and progressive enhancement automatically.
-    // EXAMPLE:
-    //   WRONG:
-    //     const [pending, setPending] = useState(false);
-    //     const handleSubmit = async (e) => {
-    //       setPending(true);
-    //       await submitForm();
-    //       setPending(false);
-    //     };
-    //   RIGHT:
-    //     const [state, formAction, isPending] = useActionState(submit, initialState);
-    //     <form action={formAction}>
-    //       <button disabled={isPending}>{isPending ? 'Loading...' : 'Submit'}</button>
-    //     </form>
-    // ─────────────────────────────────────────
-    {
-        id: 'react-use-action-state',
-        label: 'Use useActionState() for form handling',
-        description: 'React 19 useActionState() replaces form submission logic. It handles pending states, actions, and errors automatically.',
-        severity: 'warning',
-        fileExtensions: ['tsx', 'jsx'],
-        pattern: null,
-        customCheck: (file) => {
-            const violations = [];
-            if (/use\(["']use client['"], \{.*\}|<form\s+onSubmit|useState.*pending|useState.*loading/.test(file.content) &&
-                !file.content.includes('useActionState') &&
-                file.content.includes("'use client'")) {
-                violations.push({
-                    line: null,
-                    message: 'Form with manual state management detected. Use useActionState() for simpler form handling in React 19.',
-                });
-            }
-            return violations;
-        },
-        applicableTo: ['react', 'nextjs'],
-        category: 'React 19',
-    },
-    // ─────────────────────────────────────────
-    // RULE: react-use-transition
-    // ROLE: Recommend non-blocking UI updates for expensive operations
-    // PURPOSE: useTransition() marks state updates as low-priority so the
-    //          UI stays responsive during expensive re-renders (filtering,
-    //          sorting, searching large datasets).
-    // EXAMPLE:
-    //   WRONG:
-    //     const [query, setQuery] = useState('');
-    //     const handleChange = (e) => setQuery(e.target.value);
-    //     // UI freezes during expensive filtering
-    //   RIGHT:
-    //     const [isPending, startTransition] = useTransition();
-    //     const handleChange = (e) => {
-    //       startTransition(() => setQuery(e.target.value));
-    //     };
-    //     // UI stays responsive, shows pending state
-    // ─────────────────────────────────────────
-    {
-        id: 'react-use-transition',
-        label: 'Use useTransition() for non-blocking updates',
-        description: 'Use useTransition() to mark updates as non-blocking (lower priority). Good for search boxes, filters, and heavy computations.',
-        severity: 'info',
-        fileExtensions: ['tsx', 'jsx'],
-        pattern: null,
-        customCheck: (file) => {
-            const violations = [];
-            if (/filter|search|sort|debounce/.test(file.content) &&
-                /useState\s*\(/.test(file.content) &&
-                !file.content.includes('useTransition')) {
-                violations.push({
-                    line: null,
-                    message: 'Found filter/search logic. Use useTransition() to keep UI responsive during expensive updates.',
-                });
-            }
-            return violations;
-        },
-        applicableTo: ['react', 'nextjs'],
-        category: 'React 19',
-    },
-    // ─────────────────────────────────────────
-    // RULE: react-use-optimistic
-    // ROLE: Recommend optimistic UI updates for async actions
-    // PURPOSE: useOptimistic() shows instant feedback to the user while
-    //          the server processes the request. If the server fails, the
-    //          state automatically rolls back.
-    // EXAMPLE:
-    //   WRONG:
-    //     const handleLike = async () => {
-    //       await api.like(postId); // User waits...
-    //       refetch();
-    //     };
-    //   RIGHT:
-    //     const [optimisticLikes, addOptimistic] = useOptimistic(
-    //       likes,
-    //       (state, newLike) => [...state, newLike]
-    //     );
-    //     const handleLike = async () => {
-    //       addOptimistic(newLike); // Instant feedback
-    //       await api.like(postId);
-    //     };
-    // ─────────────────────────────────────────
-    {
-        id: 'react-use-optimistic',
-        label: 'Use useOptimistic() for optimistic updates',
-        description: 'React 19 useOptimistic() enables optimistic UI updates before server confirmation. Great for forms and instant feedback.',
-        severity: 'info',
-        fileExtensions: ['tsx', 'jsx'],
-        pattern: null,
-        customCheck: (file) => {
-            const violations = [];
-            const hasAsyncHandler = /const\s+handle\w+\s*=\s*async\s*\(|async\s+function\s+handle/i.test(file.content);
-            const hasOptimistic = /useOptimistic/i.test(file.content);
-            if (hasAsyncHandler && !hasOptimistic) {
-                for (let i = 0; i < file.lines.length; i++) {
-                    if (/const\s+handle\w+\s*=\s*async|async\s+function\s+handle/i.test(file.lines[i])) {
-                        violations.push({
-                            line: i + 1,
-                            message: `Async form handler found. Use useOptimistic() for instant UI feedback.`,
-                        });
-                        break;
-                    }
-                }
-            }
-            return violations;
-        },
-        applicableTo: ['react', 'nextjs'],
-        category: 'React 19',
-    },
-    // ── Server Components (Next.js 13+, React Canary) ────────────────────
-    // ─────────────────────────────────────────
-    // RULE: react-server-functions
-    // ROLE: Recommend "use server" directive for secure server logic
-    // PURPOSE: Server Functions run entirely on the server, enabling
-    //          direct database access, secret handling, and mutations
-    //          without creating API routes.
-    // EXAMPLE:
-    //   WRONG:
-    //     // pages/api/user.ts (API route approach)
-    //     export async function POST(req) {
-    //       const data = await req.json();
-    //       await db.users.create(data);
-    //     }
-    //   RIGHT:
-    //     // actions/user.ts
-    //     'use server';
-    //     export async function createUser(formData: FormData) {
-    //       await db.users.create(Object.fromEntries(formData));
-    //       revalidatePath('/users');
-    //     }
-    // ─────────────────────────────────────────
-    {
-        id: 'react-server-functions',
-        label: 'Use Server Functions with "use server" directive',
-        description: 'Define async functions with "use server" to run on the server. Enables secure database access and secret handling without API routes.',
-        severity: 'info',
-        fileExtensions: ['ts', 'tsx'],
-        pattern: null,
-        applicableTo: ['nextjs'],
-        category: 'React Server Functions',
-    },
-    // ─────────────────────────────────────────
-    // RULE: react-server-client-boundary
-    // ROLE: Validate "use client" boundary placement
-    // PURPOSE: Unnecessarily marking components as "use client" prevents
-    //          server-side rendering optimizations and increases the
-    //          JavaScript bundle sent to the browser.
-    // EXAMPLE:
-    //   WRONG:
-    //     'use client'; // No hooks, no interactivity!
-    //     export default function StaticCard({ title }) {
-    //       return <div>{title}</div>;
-    //     }
-    //   RIGHT:
-    //     // No directive needed — Server Component by default
-    //     export default function StaticCard({ title }) {
-    //       return <div>{title}</div>;
-    //     }
-    // ─────────────────────────────────────────
-    {
-        id: 'react-server-client-boundary',
-        label: 'Verify "use client" boundaries',
-        description: 'Interleave Server and Client Components properly. Only mark Client Components with "use client" to minimize JavaScript.',
-        severity: 'warning',
-        fileExtensions: ['tsx', 'jsx', 'ts'],
-        pattern: null,
-        customCheck: (file) => {
-            const violations = [];
-            const hasUseClient = file.content.includes("'use client'") || file.content.includes('"use client"');
-            const hasHooks = /use(State|Effect|Context|Reducer|Callback|Memo|Ref|Transition|OptimisticOptimistic)\s*\(/.test(file.content);
-            const hasExport = /export\s+(default\s+)?function|export\s+(default\s+)?const/.test(file.content);
-            if (hasUseClient && !hasHooks && hasExport) {
-                violations.push({
-                    line: 1,
-                    message: '"use client" found but no hooks detected. This component might work as a Server Component for better performance.',
-                });
-            }
-            return violations;
-        },
-        applicableTo: ['nextjs'],
-        category: 'React Server Components',
-    },
     // ── Hooks ──────────────────────────────────────────────────────────────
-    // ─────────────────────────────────────────
-    // RULE: react-no-useeffect-no-deps
-    // ROLE: Block useEffect without dependency array
-    // PURPOSE: Missing dependency array causes useEffect to run after
-    //          EVERY render, leading to infinite loops, stale closures,
-    //          and severe performance issues.
-    // EXAMPLE:
-    //   WRONG:
-    //     useEffect(() => {
-    //       fetchData();
-    //     }); // Runs on every render!
-    //   RIGHT:
-    //     useEffect(() => {
-    //       fetchData();
-    //     }, []); // Runs once on mount
-    //     // With dependencies:
-    //     useEffect(() => {
-    //       fetchData(id);
-    //     }, [id]); // Runs when id changes
-    // ─────────────────────────────────────────
     {
         id: 'react-no-useeffect-no-deps',
         label: 'useEffect must have dependency array',
@@ -289,7 +27,9 @@ const reactRules = [
             const lines = file.lines;
             for (let i = 0; i < lines.length; i++) {
                 const line = lines[i];
+                // Detect useEffect( without a closing bracket on subsequent lines containing dependency array
                 if (/useEffect\s*\(\s*\(\s*\)\s*=>\s*\{/.test(line)) {
+                    // Look ahead for the closing of useEffect — find , [] or , [deps])
                     let foundDeps = false;
                     let parenDepth = 0;
                     for (let j = i; j < Math.min(i + 50, lines.length); j++) {
@@ -299,6 +39,7 @@ const reactRules = [
                             if (ch === ')')
                                 parenDepth--;
                         }
+                        // Check if the dependency array is present
                         if (/\]\s*\)\s*;?\s*$/.test(lines[j]) || /,\s*\[/.test(lines[j])) {
                             foundDeps = true;
                             break;
@@ -319,18 +60,6 @@ const reactRules = [
         applicableTo: ['react', 'nextjs'],
         category: 'React Hooks',
     },
-    // ─────────────────────────────────────────
-    // RULE: react-no-inline-styles
-    // ROLE: Block inline style objects in JSX
-    // PURPOSE: Inline style={{ }} creates a new object on every render,
-    //          preventing React's reconciliation from skipping unchanged
-    //          elements. Use Tailwind or CSS modules instead.
-    // EXAMPLE:
-    //   WRONG:
-    //     <div style={{ color: 'red', fontSize: '1rem' }}>Hello</div>
-    //   RIGHT:
-    //     <div className="text-red-500 text-base">Hello</div>
-    // ─────────────────────────────────────────
     {
         id: 'react-no-inline-styles',
         label: 'No inline style objects',
@@ -341,21 +70,6 @@ const reactRules = [
         applicableTo: ['react', 'nextjs'],
         category: 'Styling',
     },
-    // ─────────────────────────────────────────
-    // RULE: react-no-direct-dom
-    // ROLE: Block direct DOM manipulation in React components
-    // PURPOSE: React maintains a virtual DOM — direct DOM manipulation
-    //          bypasses React's reconciliation and causes state
-    //          inconsistencies, hydration errors, and bugs.
-    // EXAMPLE:
-    //   WRONG:
-    //     document.getElementById('input').value = 'hello';
-    //     document.querySelector('.modal').classList.add('open');
-    //   RIGHT:
-    //     const inputRef = useRef<HTMLInputElement>(null);
-    //     const [isOpen, setIsOpen] = useState(false);
-    //     inputRef.current!.value = 'hello';
-    // ─────────────────────────────────────────
     {
         id: 'react-no-direct-dom',
         label: 'No direct DOM manipulation',
@@ -367,63 +81,16 @@ const reactRules = [
         category: 'React Patterns',
     },
     // ── Component patterns ─────────────────────────────────────────────────
-    // ─────────────────────────────────────────
-    // RULE: react-no-react-fc
-    // ROLE: Block deprecated React.FC type
-    // PURPOSE: React.FC implicitly includes children, has issues with
-    //          generics, and doesn't work well with defaultProps. Direct
-    //          prop typing is cleaner and more explicit.
-    // EXAMPLE:
-    //   WRONG:
-    //     const UserCard: React.FC<Props> = ({ name }) => { ... };
-    //   RIGHT:
-    //     function UserCard({ name }: Props): React.ReactNode { ... }
-    //     // Or:
-    //     const UserCard = ({ name }: Props) => { ... };
-    // ─────────────────────────────────────────
     {
-        id: 'react-no-react-fc',
-        label: 'Do not use React.FC',
-        description: 'React.FC is deprecated. Type props parameter directly: export default function MyComponent(props: Props) { ... } or use const style with explicit return type.',
-        severity: 'warning',
+        id: 'react-prefer-fc-typing',
+        label: 'Type component props explicitly',
+        description: 'Define a Props interface/type and use it. Avoid React.FC — type props parameter directly.',
+        severity: 'info',
         fileExtensions: ['tsx'],
         pattern: /React\.FC/g,
         applicableTo: ['react', 'nextjs'],
         category: 'TypeScript',
     },
-    // ─────────────────────────────────────────
-    // RULE: react-explicit-return-types
-    // ROLE: Recommend explicit return types for component functions
-    // PURPOSE: Explicit return types catch accidental non-JSX returns,
-    //          prevent undefined leaks, and improve code documentation.
-    // EXAMPLE:
-    //   WRONG:
-    //     export function UserCard(props: Props) { ... }
-    //   RIGHT:
-    //     export function UserCard(props: Props): React.ReactNode { ... }
-    // ─────────────────────────────────────────
-    {
-        id: 'react-explicit-return-types',
-        label: 'Add explicit return types for components',
-        description: 'Export function components with explicit return type: (props: Props): React.ReactNode => { ... } for better type safety.',
-        severity: 'info',
-        fileExtensions: ['tsx', 'jsx'],
-        pattern: /export\s+(?:default\s+)?function\s+\w+\s*\(\s*props/g,
-        applicableTo: ['react', 'nextjs'],
-        category: 'TypeScript',
-    },
-    // ─────────────────────────────────────────
-    // RULE: react-no-prop-spreading
-    // ROLE: Discourage prop spreading for API clarity
-    // PURPOSE: Spreading props ({...props}) hides the component API,
-    //          passes unintended props, and breaks TypeScript strictness.
-    //          Explicitly passing required props is safer and self-documenting.
-    // EXAMPLE:
-    //   WRONG:
-    //     <Button {...props} />
-    //   RIGHT:
-    //     <Button onClick={props.onClick} disabled={props.disabled} label={props.label} />
-    // ─────────────────────────────────────────
     {
         id: 'react-no-prop-spreading',
         label: 'Avoid prop spreading ({...props})',
@@ -437,20 +104,6 @@ const reactRules = [
     // ── Security Rules ─────────────────────────────────────────────────────
     // NOTE: 'react-no-dangerously-set-html' removed — covered by ESLint 'react/no-danger' rule
     // NOTE: 'no-eval' removed — covered by ESLint 'no-eval' rule
-    // ─────────────────────────────────────────
-    // RULE: no-hardcoded-credentials
-    // ROLE: Block hardcoded secrets in source code
-    // PURPOSE: Hardcoded API keys, passwords, and tokens get committed to
-    //          git, leaked in public repos, and exposed in client bundles.
-    //          Always use environment variables (.env).
-    // EXAMPLE:
-    //   WRONG:
-    //     const apiKey = 'sk-1234567890abcdef';
-    //     const password = 'admin123';
-    //   RIGHT:
-    //     const apiKey = process.env.API_KEY;
-    //     const password = process.env.ADMIN_PASSWORD;
-    // ─────────────────────────────────────────
     {
         id: 'no-hardcoded-credentials',
         label: 'No hardcoded credentials',
@@ -485,20 +138,6 @@ const reactRules = [
         applicableTo: ['react', 'nextjs', 'angular'],
         category: 'Security',
     },
-    // ─────────────────────────────────────────
-    // RULE: require-https
-    // ROLE: Block insecure HTTP URLs in source code
-    // PURPOSE: HTTP transmits data in plain text — passwords, tokens, and
-    //          user data can be intercepted. HTTPS is mandatory for all
-    //          production API calls and external resources.
-    // EXAMPLE:
-    //   WRONG:
-    //     fetch('http://api.example.com/users');
-    //   RIGHT:
-    //     fetch('https://api.example.com/users');
-    //     // localhost is exempt:
-    //     fetch('http://localhost:3000/api');
-    // ─────────────────────────────────────────
     {
         id: 'require-https',
         label: 'Require HTTPS URLs',
@@ -510,46 +149,20 @@ const reactRules = [
         category: 'Security',
     },
     // ── Performance Rules ──────────────────────────────────────────────────
-    // ─────────────────────────────────────────
-    // RULE: react-no-anonymous-functions-in-render
-    // ROLE: Block anonymous functions in JSX event handlers
-    // PURPOSE: Arrow functions in props create a new function reference on
-    //          every render, defeating React.memo and causing child
-    //          components to re-render unnecessarily.
-    // EXAMPLE:
-    //   WRONG:
-    //     <Button onClick={() => handleClick(id)} />
-    //   RIGHT:
-    //     const handleButtonClick = useCallback(() => handleClick(id), [id]);
-    //     <Button onClick={handleButtonClick} />
-    // ─────────────────────────────────────────
     {
         id: 'react-no-anonymous-functions-in-render',
-        label: 'No anonymous functions in JSX props',
-        description: 'Anonymous functions in JSX props cause unnecessary re-renders. Use useCallback, named functions, or extract to constants.',
+        label: 'No anonymous functions in JSX',
+        description: 'Anonymous functions in JSX props cause unnecessary re-renders. Use useCallback or define functions outside render.',
         severity: 'warning',
         fileExtensions: ['tsx', 'jsx'],
-        pattern: /onClick\s*=\s*\{\s*\(\s*\)\s*=>|onSubmit\s*=\s*\{\s*\(\s*\)\s*=>/g,
+        pattern: /onClick\s*=\s*\{\s*\(\s*\)\s*=>/g,
         applicableTo: ['react', 'nextjs'],
         category: 'Performance',
     },
-    // ─────────────────────────────────────────
-    // RULE: react-missing-key-prop
-    // ROLE: Block list rendering without key props
-    // PURPOSE: React uses key to identify which items changed, were added,
-    //          or removed. Missing keys cause UI bugs and poor performance.
-    //          Array index as key causes issues with reordering.
-    // EXAMPLE:
-    //   WRONG:
-    //     items.map(item => <Card title={item.name} />);
-    //     items.map((item, i) => <Card key={i} title={item.name} />);
-    //   RIGHT:
-    //     items.map(item => <Card key={item.id} title={item.name} />);
-    // ─────────────────────────────────────────
     {
         id: 'react-missing-key-prop',
         label: 'Missing key prop in list',
-        description: 'When rendering lists with .map(), always provide a unique key prop. Never use array index as key.',
+        description: 'When rendering lists with .map(), always provide a unique key prop for optimal reconciliation.',
         severity: 'error',
         fileExtensions: ['tsx', 'jsx'],
         pattern: null,
@@ -558,7 +171,9 @@ const reactRules = [
             const lines = file.lines;
             for (let i = 0; i < lines.length; i++) {
                 const line = lines[i];
+                // Detect .map( with JSX but no key prop nearby
                 if (/\.\s*map\s*\(/.test(line)) {
+                    // Look ahead for JSX opening tag
                     let foundKey = false;
                     for (let j = i; j < Math.min(i + 10, lines.length); j++) {
                         if (/key\s*=/.test(lines[j])) {
@@ -566,6 +181,7 @@ const reactRules = [
                             break;
                         }
                     }
+                    // Check if there's JSX in the map
                     let hasJsx = false;
                     for (let j = i; j < Math.min(i + 10, lines.length); j++) {
                         if (/<[A-Z]/.test(lines[j]) || /<[a-z]/.test(lines[j])) {
@@ -576,7 +192,7 @@ const reactRules = [
                     if (hasJsx && !foundKey) {
                         violations.push({
                             line: i + 1,
-                            message: 'List items rendered with .map() must have a key prop. Never use index as key.',
+                            message: 'List items rendered with .map() must have a key prop',
                         });
                     }
                 }
@@ -586,20 +202,6 @@ const reactRules = [
         applicableTo: ['react', 'nextjs'],
         category: 'Performance',
     },
-    // ─────────────────────────────────────────
-    // RULE: no-large-bundle-imports
-    // ROLE: Block large library wildcard imports
-    // PURPOSE: Importing entire lodash (~70KB) or moment (~290KB) when
-    //          you only need one function wastes bandwidth. Use specific
-    //          imports for tree-shaking support.
-    // EXAMPLE:
-    //   WRONG:
-    //     import _ from 'lodash';
-    //     import moment from 'moment';
-    //   RIGHT:
-    //     import get from 'lodash/get';
-    //     import { format } from 'date-fns';
-    // ─────────────────────────────────────────
     {
         id: 'no-large-bundle-imports',
         label: 'Avoid large library imports',
@@ -612,19 +214,6 @@ const reactRules = [
     },
     // NOTE: 'require-alt-text' removed — covered by ESLint 'jsx-a11y/alt-text' rule
     // ── Accessibility Rules ────────────────────────────────────────────────
-    // ─────────────────────────────────────────
-    // RULE: require-button-type
-    // ROLE: Enforce type attribute on all button elements
-    // PURPOSE: Buttons default to type="submit", which triggers form
-    //          submission unexpectedly. Always specify type explicitly
-    //          to prevent accidental form submissions.
-    // EXAMPLE:
-    //   WRONG:
-    //     <button onClick={handleClick}>Click me</button>
-    //   RIGHT:
-    //     <button type="button" onClick={handleClick}>Click me</button>
-    //     <button type="submit">Submit</button>
-    // ─────────────────────────────────────────
     {
         id: 'require-button-type',
         label: 'Buttons must have type attribute',
@@ -650,21 +239,6 @@ const reactRules = [
         category: 'Accessibility',
     },
     // ── Additional Performance Rules ───────────────────────────────────────
-    // ─────────────────────────────────────────
-    // RULE: react-prefer-lazy-loading
-    // ROLE: Recommend code splitting for route components
-    // PURPOSE: Eagerly importing all page components increases the initial
-    //          bundle size. React.lazy() + Suspense splits code by route,
-    //          loading pages only when navigated to.
-    // EXAMPLE:
-    //   WRONG:
-    //     import Dashboard from '../pages/Dashboard';
-    //     import Settings from '../pages/Settings';
-    //   RIGHT:
-    //     const Dashboard = lazy(() => import('../pages/Dashboard'));
-    //     const Settings = lazy(() => import('../pages/Settings'));
-    //     <Suspense fallback={<Spinner />}><Dashboard /></Suspense>
-    // ─────────────────────────────────────────
     {
         id: 'react-prefer-lazy-loading',
         label: 'Consider lazy loading for routes',
@@ -675,22 +249,6 @@ const reactRules = [
         applicableTo: ['react', 'nextjs'],
         category: 'Performance',
     },
-    // ─────────────────────────────────────────
-    // RULE: react-memo-expensive-components
-    // ROLE: Recommend React.memo for large render trees
-    // PURPOSE: Components with expensive render logic (>500 chars of JSX)
-    //          should be wrapped in React.memo to skip re-renders when
-    //          props haven't changed.
-    // EXAMPLE:
-    //   WRONG:
-    //     export function DataTable({ rows }) {
-    //       // ... 500+ lines of complex rendering
-    //     }
-    //   RIGHT:
-    //     export const DataTable = memo(function DataTable({ rows }) {
-    //       // ... 500+ lines of complex rendering
-    //     });
-    // ─────────────────────────────────────────
     {
         id: 'react-memo-expensive-components',
         label: 'Consider React.memo for expensive renders',
@@ -701,21 +259,6 @@ const reactRules = [
         applicableTo: ['react', 'nextjs'],
         category: 'Performance',
     },
-    // ─────────────────────────────────────────
-    // RULE: no-object-array-in-deps
-    // ROLE: Block unstable references in hook dependency arrays
-    // PURPOSE: Objects and arrays create new references on every render.
-    //          Putting them in dependency arrays triggers hooks on every
-    //          render, defeating the purpose of the dependency array.
-    // EXAMPLE:
-    //   WRONG:
-    //     useEffect(() => { ... }, [{ id: 1 }]);
-    //     useMemo(() => { ... }, [[1, 2, 3]]);
-    //   RIGHT:
-    //     useEffect(() => { ... }, [id]);
-    //     const configRef = useRef(config); // stable reference
-    //     useEffect(() => { ... }, [configRef]);
-    // ─────────────────────────────────────────
     {
         id: 'no-object-array-in-deps',
         label: 'Avoid objects/arrays in dependency arrays',
@@ -727,18 +270,6 @@ const reactRules = [
         category: 'Performance',
     },
     // ── Additional Best Practice Rules ────────────────────────────────────
-    // ─────────────────────────────────────────
-    // RULE: react-use-fragments
-    // ROLE: Recommend React fragments over wrapper divs
-    // PURPOSE: Unnecessary wrapper <div>s add DOM nodes, break CSS layouts
-    //          (flexbox, grid), increase memory usage, and cause
-    //          accessibility issues with screen readers.
-    // EXAMPLE:
-    //   WRONG:
-    //     return (<div><Header /><Content /></div>);
-    //   RIGHT:
-    //     return (<><Header /><Content /></>);
-    // ─────────────────────────────────────────
     {
         id: 'react-use-fragments',
         label: 'Use React fragments instead of divs',
@@ -749,18 +280,6 @@ const reactRules = [
         applicableTo: ['react', 'nextjs'],
         category: 'Best Practices',
     },
-    // ─────────────────────────────────────────
-    // RULE: prefer-optional-chaining
-    // ROLE: Recommend modern null-safe access patterns
-    // PURPOSE: Chained && checks are verbose and error-prone. Optional
-    //          chaining (?.) is built into the language, more readable,
-    //          and handles null/undefined safely.
-    // EXAMPLE:
-    //   WRONG:
-    //     user && user.profile && user.profile.name
-    //   RIGHT:
-    //     user?.profile?.name
-    // ─────────────────────────────────────────
     {
         id: 'prefer-optional-chaining',
         label: 'Use optional chaining',
@@ -771,18 +290,6 @@ const reactRules = [
         applicableTo: [],
         category: 'Modern Syntax',
     },
-    // ─────────────────────────────────────────
-    // RULE: prefer-nullish-coalescing
-    // ROLE: Recommend ?? over || for default values
-    // PURPOSE: || treats 0, '', and false as falsy and replaces them.
-    //          ?? only replaces null/undefined, preserving valid falsy
-    //          values like 0 (count) and '' (empty string).
-    // EXAMPLE:
-    //   WRONG:
-    //     const count = data.count || 10; // 0 becomes 10!
-    //   RIGHT:
-    //     const count = data.count ?? 10; // 0 stays 0
-    // ─────────────────────────────────────────
     {
         id: 'prefer-nullish-coalescing',
         label: 'Use nullish coalescing (??)',
@@ -793,24 +300,6 @@ const reactRules = [
         applicableTo: [],
         category: 'Modern Syntax',
     },
-    // ─────────────────────────────────────────
-    // RULE: react-error-boundary-usage
-    // ROLE: Recommend error boundaries for crash prevention
-    // PURPOSE: Without error boundaries, a single thrown error crashes
-    //          the entire React app. Error boundaries catch render errors
-    //          and display fallback UI instead.
-    // EXAMPLE:
-    //   WRONG:
-    //     <App>
-    //       <BuggyComponent /> {/* Crash kills entire app */}
-    //     </App>
-    //   RIGHT:
-    //     <App>
-    //       <ErrorBoundary fallback={<ErrorPage />}>
-    //         <BuggyComponent /> {/* Crash is contained */}
-    //       </ErrorBoundary>
-    //     </App>
-    // ─────────────────────────────────────────
     {
         id: 'react-error-boundary-usage',
         label: 'Consider error boundaries',
@@ -821,19 +310,6 @@ const reactRules = [
         applicableTo: ['react', 'nextjs'],
         category: 'Error Handling',
     },
-    // ─────────────────────────────────────────
-    // RULE: no-sync-external-calls
-    // ROLE: Block synchronous external API calls
-    // PURPOSE: Synchronous fetch/XHR blocks the main thread, freezing
-    //          the UI completely. Always use async/await for API calls,
-    //          file operations, and external services.
-    // EXAMPLE:
-    //   WRONG:
-    //     const data = fetch('/api/data'); // No await!
-    //   RIGHT:
-    //     const data = await fetch('/api/data');
-    //     const json = await data.json();
-    // ─────────────────────────────────────────
     {
         id: 'no-sync-external-calls',
         label: 'Avoid synchronous external calls',
@@ -844,18 +320,6 @@ const reactRules = [
         applicableTo: [],
         category: 'Async Patterns',
     },
-    // ─────────────────────────────────────────
-    // RULE: react-prefer-controlled-inputs
-    // ROLE: Recommend controlled components over uncontrolled
-    // PURPOSE: Controlled components (value + onChange) keep React as the
-    //          single source of truth. Uncontrolled (defaultValue + ref)
-    //          creates two sources of truth and makes validation harder.
-    // EXAMPLE:
-    //   WRONG:
-    //     <input defaultValue="hello" ref={inputRef} />
-    //   RIGHT:
-    //     <input value={name} onChange={(e) => setName(e.target.value)} />
-    // ─────────────────────────────────────────
     {
         id: 'react-prefer-controlled-inputs',
         label: 'Prefer controlled components',
@@ -867,23 +331,6 @@ const reactRules = [
         category: 'Forms',
     },
     // NOTE: 'no-index-as-key' removed — covered by ESLint 'react/no-array-index-key' rule
-    // ─────────────────────────────────────────
-    // RULE: react-cleanup-effects
-    // ROLE: Enforce cleanup functions in side-effect hooks
-    // PURPOSE: useEffect with subscriptions, timers, or event listeners
-    //          must return a cleanup function. Without it, listeners
-    //          accumulate on every re-render, causing memory leaks.
-    // EXAMPLE:
-    //   WRONG:
-    //     useEffect(() => {
-    //       window.addEventListener('resize', handleResize);
-    //     }, []);
-    //   RIGHT:
-    //     useEffect(() => {
-    //       window.addEventListener('resize', handleResize);
-    //       return () => window.removeEventListener('resize', handleResize);
-    //     }, []);
-    // ─────────────────────────────────────────
     {
         id: 'react-cleanup-effects',
         label: 'Cleanup side effects',
@@ -894,20 +341,6 @@ const reactRules = [
         applicableTo: ['react', 'nextjs'],
         category: 'Memory Management',
     },
-    // ─────────────────────────────────────────
-    // RULE: prefer-const-assertion
-    // ROLE: Recommend const assertions for literal types
-    // PURPOSE: "as const" narrows types to literal values and makes
-    //          objects/arrays readonly, improving type safety and
-    //          enabling discriminated unions.
-    // EXAMPLE:
-    //   WRONG:
-    //     const ROLES: string[] = ['admin', 'user', 'viewer'];
-    //     // Type: string[] — loses literal type info
-    //   RIGHT:
-    //     const ROLES = ['admin', 'user', 'viewer'] as const;
-    //     // Type: readonly ['admin', 'user', 'viewer']
-    // ─────────────────────────────────────────
     {
         id: 'prefer-const-assertion',
         label: 'Use const assertions for literal types',