react-code-smell-detector 1.4.2 → 1.5.1

package/dist/guide.js

@@ -0,0 +1,922 @@
+import chalk from 'chalk';
+import fs from 'fs/promises';
+import path from 'path';
+import readline from 'readline';
+/**
+ * Interactive guide for React Code Smell Detector
+ */
+export async function runGuide() {
+    const rl = readline.createInterface({
+        input: process.stdin,
+        output: process.stdout,
+    });
+    const ask = (question) => {
+        return new Promise((resolve) => {
+            rl.question(question, (answer) => resolve(answer.trim()));
+        });
+    };
+    console.clear();
+    printHeader();
+    let running = true;
+    while (running) {
+        console.log('\n' + chalk.cyan('What would you like to learn about?') + '\n');
+        console.log(chalk.white('  1. ') + 'Quick Start - Basic usage');
+        console.log(chalk.white('  2. ') + 'Output Formats - JSON, Markdown, HTML');
+        console.log(chalk.white('  3. ') + 'Auto-Fix - Fix simple issues automatically');
+        console.log(chalk.white('  4. ') + 'Watch Mode - Real-time analysis');
+        console.log(chalk.white('  5. ') + 'Git Integration - Analyze only changed files');
+        console.log(chalk.white('  6. ') + 'CI/CD Integration - Pipelines & PR comments');
+        console.log(chalk.white('  7. ') + 'Performance Budget - Enforce quality thresholds');
+        console.log(chalk.white('  8. ') + 'Custom Rules - Define your own rules');
+        console.log(chalk.white('  9. ') + 'Advanced Features - AI, Graphs, Bundle Analysis');
+        console.log(chalk.white(' 10. ') + 'Configuration - All config options');
+        console.log(chalk.white(' 11. ') + 'Create Demo Project');
+        console.log(chalk.white('  0. ') + 'Exit\n');
+        const choice = await ask(chalk.yellow('Enter your choice (0-11): '));
+        switch (choice) {
+            case '1':
+                showQuickStart();
+                break;
+            case '2':
+                showOutputFormats();
+                break;
+            case '3':
+                showAutoFix();
+                break;
+            case '4':
+                showWatchMode();
+                break;
+            case '5':
+                showGitIntegration();
+                break;
+            case '6':
+                showCICD();
+                break;
+            case '7':
+                showPerformanceBudget();
+                break;
+            case '8':
+                showCustomRules();
+                break;
+            case '9':
+                showAdvancedFeatures();
+                break;
+            case '10':
+                showConfiguration();
+                break;
+            case '11':
+                rl.close();
+                await createDemoProject(process.cwd());
+                return;
+            case '0':
+                running = false;
+                break;
+            default:
+                console.log(chalk.red('\nInvalid choice. Please enter a number from 0-11.'));
+        }
+        if (running && choice !== '0') {
+            await ask(chalk.dim('\nPress Enter to continue...'));
+        }
+    }
+    console.log(chalk.green('\nHappy coding! 🚀\n'));
+    rl.close();
+}
+function printHeader() {
+    console.log(chalk.cyan.bold(`
+╔═══════════════════════════════════════════════════════════════╗
+║           🔍 React Code Smell Detector Guide 🔍               ║
+║                    Interactive Tutorial                        ║
+╚═══════════════════════════════════════════════════════════════╝
+`));
+    console.log(chalk.white('Welcome! This guide will help you learn all features of'));
+    console.log(chalk.white('React Code Smell Detector with practical examples.\n'));
+}
+function showQuickStart() {
+    console.log(chalk.cyan.bold('\n═══ Quick Start ═══\n'));
+    console.log(chalk.white('1. Analyze current directory:'));
+    console.log(chalk.green('   $ react-smell .'));
+    console.log(chalk.white('\n2. Analyze a specific directory:'));
+    console.log(chalk.green('   $ react-smell ./src'));
+    console.log(chalk.white('\n3. Show code snippets with issues:'));
+    console.log(chalk.green('   $ react-smell ./src -s'));
+    console.log(chalk.white('\n4. Use a configuration file:'));
+    console.log(chalk.green('   $ react-smell ./src -c .smellrc.json'));
+    console.log(chalk.white('\n5. Create default configuration:'));
+    console.log(chalk.green('   $ react-smell init'));
+    printBox('Example Output', `
+📊 Analysis Summary
+├── Files analyzed: 24
+├── Components found: 45
+├── Code smells: 12
+└── Technical Debt Grade: B (82/100)
+
+🔴 Error (2)
+├── security-xss: Avoid dangerouslySetInnerHTML
+└── missing-key: Add key prop to list items
+
+🟡 Warning (7)
+├── useEffect-overuse: Too many effects
+└── prop-drilling: Props passed through 4 levels
+  `);
+}
+function showOutputFormats() {
+    console.log(chalk.cyan.bold('\n═══ Output Formats ═══\n'));
+    console.log(chalk.white('1. Console (default) - Colored terminal output:'));
+    console.log(chalk.green('   $ react-smell ./src'));
+    console.log(chalk.white('\n2. JSON - Machine-readable for CI/CD:'));
+    console.log(chalk.green('   $ react-smell ./src -f json'));
+    console.log(chalk.green('   $ react-smell ./src -f json -o report.json'));
+    console.log(chalk.white('\n3. Markdown - For documentation:'));
+    console.log(chalk.green('   $ react-smell ./src -f markdown -o report.md'));
+    console.log(chalk.white('\n4. HTML - Beautiful visual report:'));
+    console.log(chalk.green('   $ react-smell ./src -f html -o report.html'));
+    printBox('JSON Output Example', `
+{
+  "summary": {
+    "totalFiles": 24,
+    "totalComponents": 45,
+    "totalSmells": 12
+  },
+  "debtScore": {
+    "score": 82,
+    "grade": "B"
+  },
+  "files": [...]
+}
+  `);
+}
+function showAutoFix() {
+    console.log(chalk.cyan.bold('\n═══ Auto-Fix Features ═══\n'));
+    console.log(chalk.white('Fixable issues: console.log, var→let, ==→===, missing alt\n'));
+    console.log(chalk.white('1. Auto-fix all fixable issues:'));
+    console.log(chalk.green('   $ react-smell ./src --fix'));
+    console.log(chalk.white('\n2. Interactive fix mode (review each fix):'));
+    console.log(chalk.green('   $ react-smell ./src --fix-interactive'));
+    console.log(chalk.white('\n3. Preview fixes without applying:'));
+    console.log(chalk.green('   $ react-smell ./src --fix-preview'));
+    printBox('Interactive Fix Example', `
+📝 Fix 1/5: debug-statement in Header.tsx:15
+
+  Before: console.log('User logged in');
+  After:  // removed
+
+  [Y] Apply  [N] Skip  [A] Apply All  [Q] Quit
+  `);
+}
+function showWatchMode() {
+    console.log(chalk.cyan.bold('\n═══ Watch Mode ═══\n'));
+    console.log(chalk.white('Re-analyze automatically when files change:\n'));
+    console.log(chalk.green('   $ react-smell ./src --watch'));
+    console.log(chalk.white('\nWith specific options:'));
+    console.log(chalk.green('   $ react-smell ./src --watch -s'));
+    console.log(chalk.green('   $ react-smell ./src --watch --max-effects 2'));
+    printBox('Watch Mode Output', `
+👀 Watching for changes in ./src...
+
+[14:32:01] File changed: src/components/Header.tsx
+[14:32:01] Analyzing...
+[14:32:02] ✓ 3 smells found (1 error, 2 warnings)
+
+Press Ctrl+C to stop watching.
+  `);
+}
+function showGitIntegration() {
+    console.log(chalk.cyan.bold('\n═══ Git Integration ═══\n'));
+    console.log(chalk.white('1. Analyze only git-modified files:'));
+    console.log(chalk.green('   $ react-smell --changed'));
+    console.log(chalk.white('\n2. Great for pre-commit hooks:'));
+    console.log(chalk.green('   # .husky/pre-commit'));
+    console.log(chalk.green('   react-smell --changed --ci --fail-on error'));
+    console.log(chalk.white('\n3. Baseline tracking (track trends over time):'));
+    console.log(chalk.green('   $ react-smell ./src --baseline'));
+    printBox('Trend Report', `
+📈 Code Quality Trend (last 5 commits)
+
+Commit     Date        Smells  Grade
+─────────────────────────────────────
+a1b2c3d    Feb 20      45      C
+e4f5g6h    Feb 19      42      C
+i7j8k9l    Feb 18      38      B
+m0n1o2p    Feb 17      35      B
+q3r4s5t    Feb 16      32      B
+
+Trend: ⬆️ +13 smells (+40%) since Feb 16
+  `);
+}
+function showCICD() {
+    console.log(chalk.cyan.bold('\n═══ CI/CD Integration ═══\n'));
+    console.log(chalk.white('1. Exit with error code when issues found:'));
+    console.log(chalk.green('   $ react-smell ./src --ci'));
+    console.log(chalk.white('\n2. Custom severity threshold:'));
+    console.log(chalk.green('   $ react-smell ./src --ci --fail-on warning'));
+    console.log(chalk.white('\n3. GitHub Actions PR Comments:'));
+    console.log(chalk.green('   $ react-smell ./src --pr-comment'));
+    console.log(chalk.white('\n4. Slack/Discord notifications:'));
+    console.log(chalk.green('   $ react-smell ./src --slack $SLACK_WEBHOOK_URL'));
+    console.log(chalk.green('   $ react-smell ./src --discord $DISCORD_WEBHOOK_URL'));
+    printBox('GitHub Actions Workflow', `
+name: Code Quality
+on: [pull_request]
+jobs:
+  analyze:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - run: npm install -g react-code-smell-detector
+      - run: react-smell ./src --ci --pr-comment
+        env:
+          GITHUB_TOKEN: \${{ secrets.GITHUB_TOKEN }}
+  `);
+}
+function showPerformanceBudget() {
+    console.log(chalk.cyan.bold('\n═══ Performance Budget ═══\n'));
+    console.log(chalk.white('Set quality thresholds and enforce in CI/CD:\n'));
+    console.log(chalk.white('1. Create budget configuration:'));
+    console.log(chalk.green('   $ react-smell init-budget'));
+    console.log(chalk.white('\n2. Check against budget:'));
+    console.log(chalk.green('   $ react-smell ./src --budget'));
+    console.log(chalk.white('\n3. Custom budget config:'));
+    console.log(chalk.green('   $ react-smell ./src --budget --budget-config budget.json'));
+    printBox('.smellbudget.json Example', `
+{
+  "maxTotalSmells": 50,
+  "maxErrors": 0,
+  "maxWarnings": 30,
+  "minGrade": "B",
+  "maxSmellsPerFile": 10,
+  "maxByType": {
+    "security-xss": 0,
+    "security-eval": 0,
+    "debug-statement": 0
+  }
+}
+  `);
+}
+function showCustomRules() {
+    console.log(chalk.cyan.bold('\n═══ Custom Rules ═══\n'));
+    console.log(chalk.white('Define project-specific code quality rules:\n'));
+    console.log(chalk.white('1. Create rules file:'));
+    console.log(chalk.green('   $ touch .smellrules.json'));
+    console.log(chalk.white('\n2. Use custom rules:'));
+    console.log(chalk.green('   $ react-smell ./src --rules .smellrules.json'));
+    printBox('.smellrules.json Example', `
+{
+  "rules": [
+    {
+      "id": "no-deprecated-api",
+      "name": "No Deprecated API",
+      "description": "Avoid using deprecated React APIs",
+      "severity": "warning",
+      "pattern": {
+        "type": "text",
+        "value": "componentWillMount"
+      }
+    },
+    {
+      "id": "no-inline-styles",
+      "name": "No Inline Styles",
+      "description": "Use CSS modules or styled-components",
+      "severity": "info",
+      "pattern": {
+        "type": "regex",
+        "value": "style=\\\\{\\\\{"
+      }
+    }
+  ]
+}
+  `);
+}
+function showAdvancedFeatures() {
+    console.log(chalk.cyan.bold('\n═══ Advanced Features ═══\n'));
+    console.log(chalk.white('1. Dependency Graph Visualization:'));
+    console.log(chalk.green('   $ react-smell ./src --graph'));
+    console.log(chalk.green('   $ react-smell ./src --graph --graph-format svg -o deps.svg'));
+    console.log(chalk.white('\n2. Bundle Size Impact Analysis:'));
+    console.log(chalk.green('   $ react-smell ./src --bundle'));
+    console.log(chalk.white('\n3. Component Documentation Generation:'));
+    console.log(chalk.green('   $ react-smell docs ./src'));
+    console.log(chalk.green('   $ react-smell docs ./src -f html -o ./docs'));
+    console.log(chalk.white('\n4. AI-Powered Refactoring (requires API key):'));
+    console.log(chalk.green('   $ react-smell ./src --ai --ai-key $OPENAI_API_KEY'));
+    console.log(chalk.green('   $ react-smell ./src --ai --ai-model gpt-4'));
+    printBox('Bundle Analysis Output', `
+📦 Bundle Size Impact by Component
+
+Component            Size      Dependencies
+────────────────────────────────────────────
+Dashboard            45.2 KB   lodash, recharts
+UserProfile          12.8 KB   formik, yup
+Header               3.2 KB    react-icons
+Footer               1.5 KB    -
+
+⚠️ Suggestions:
+- Dashboard: Consider code-splitting recharts
+- UserProfile: formik can be tree-shaken
+  `);
+}
+function showConfiguration() {
+    console.log(chalk.cyan.bold('\n═══ Configuration Options ═══\n'));
+    console.log(chalk.white('All CLI Options:'));
+    console.log(chalk.dim('─'.repeat(60)));
+    const options = [
+        ['-f, --format <fmt>', 'Output: console, json, markdown, html'],
+        ['-s, --snippets', 'Show code snippets'],
+        ['-c, --config <file>', 'Config file path'],
+        ['--ci', 'CI mode (exit code 1 on issues)'],
+        ['--fail-on <severity>', 'Exit threshold: error|warning|info'],
+        ['--fix', 'Auto-fix simple issues'],
+        ['--fix-interactive', 'Interactive fix mode'],
+        ['--fix-preview', 'Preview fixes'],
+        ['--watch', 'Watch mode'],
+        ['--changed', 'Git changed files only'],
+        ['--max-effects <n>', 'Max useEffects per component'],
+        ['--max-props <n>', 'Max props before warning'],
+        ['--max-lines <n>', 'Max lines per component'],
+        ['--include <patterns>', 'Glob patterns to include'],
+        ['--exclude <patterns>', 'Glob patterns to exclude'],
+        ['-o, --output <file>', 'Write to file'],
+        ['--baseline', 'Enable trend tracking'],
+        ['--slack <url>', 'Slack webhook'],
+        ['--discord <url>', 'Discord webhook'],
+        ['--graph', 'Generate dependency graph'],
+        ['--bundle', 'Bundle size analysis'],
+        ['--budget', 'Check performance budget'],
+        ['--docs', 'Generate documentation'],
+        ['--ai', 'AI refactoring suggestions'],
+    ];
+    for (const [flag, desc] of options) {
+        console.log(`${chalk.yellow(flag.padEnd(25))} ${chalk.white(desc)}`);
+    }
+    printBox('.smellrc.json Full Example', `
+{
+  "maxUseEffectsPerComponent": 3,
+  "maxPropDrillingDepth": 3,
+  "maxComponentLines": 300,
+  "maxPropsCount": 7,
+  "checkMemoization": true,
+  "checkDebugStatements": true,
+  "checkSecurity": true,
+  "checkAccessibility": true,
+  "checkComplexity": true,
+  "maxCyclomaticComplexity": 10,
+  "checkMemoryLeaks": true,
+  "checkImports": true,
+  "checkContextApi": true,
+  "checkErrorBoundaries": true,
+  "checkForms": true,
+  "checkStateManagement": true,
+  "checkTestingGaps": true
+}
+  `);
+}
+function printBox(title, content) {
+    console.log('\n' + chalk.cyan('┌─ ' + title + ' ' + '─'.repeat(Math.max(0, 50 - title.length)) + '┐'));
+    console.log(chalk.gray(content));
+    console.log(chalk.cyan('└' + '─'.repeat(55) + '┘'));
+}
+/**
+ * Create a demo project with examples of all detectable smells
+ */
+export async function createDemoProject(targetDir) {
+    const demoDir = path.join(targetDir, 'react-smell-demo');
+    console.log(chalk.cyan.bold('\n🚀 Creating Demo Project\n'));
+    try {
+        await fs.mkdir(demoDir, { recursive: true });
+        await fs.mkdir(path.join(demoDir, 'src', 'components'), { recursive: true });
+        await fs.mkdir(path.join(demoDir, 'src', 'hooks'), { recursive: true });
+        // Create package.json
+        await fs.writeFile(path.join(demoDir, 'package.json'), JSON.stringify({
+            name: 'react-smell-demo',
+            version: '1.0.0',
+            description: 'Demo project for React Code Smell Detector',
+            scripts: {
+                'analyze': 'react-smell ./src',
+                'analyze:fix': 'react-smell ./src --fix',
+                'analyze:html': 'react-smell ./src -f html -o report.html',
+                'analyze:watch': 'react-smell ./src --watch',
+                'analyze:ci': 'react-smell ./src --ci --budget',
+            },
+        }, null, 2));
+        // Create .smellrc.json
+        await fs.writeFile(path.join(demoDir, '.smellrc.json'), JSON.stringify({
+            maxUseEffectsPerComponent: 3,
+            maxPropDrillingDepth: 3,
+            maxComponentLines: 300,
+            checkDebugStatements: true,
+            checkSecurity: true,
+            checkAccessibility: true,
+        }, null, 2));
+        // Create .smellbudget.json
+        await fs.writeFile(path.join(demoDir, '.smellbudget.json'), JSON.stringify({
+            maxTotalSmells: 50,
+            maxErrors: 0,
+            minGrade: 'C',
+            maxByType: {
+                'security-xss': 0,
+                'security-eval': 0,
+            },
+        }, null, 2));
+        // Create demo components with various smells
+        await createDemoComponents(demoDir);
+        console.log(chalk.green('✓ Created demo project at: ' + demoDir));
+        console.log('\n' + chalk.cyan('📂 Project Structure:'));
+        console.log(`
+${demoDir}/
+├── package.json
+├── .smellrc.json
+├── .smellbudget.json
+└── src/
+    ├── components/
+    │   ├── GoodComponent.tsx      (Clean code example)
+    │   ├── BadComponent.tsx       (Multiple smells)
+    │   ├── SecurityIssues.tsx     (Security vulnerabilities)
+    │   ├── AccessibilityBad.tsx   (A11y issues)
+    │   ├── ProDrillingExample.tsx (Prop drilling)
+    │   ├── ContextExample.tsx     (Context API issues)
+    │   ├── FormIssues.tsx         (Form validation smells)
+    │   └── StateManagement.tsx    (State management issues)
+    └── hooks/
+        └── useComplexHook.ts      (Complex hook example)
+`);
+        console.log(chalk.cyan('\n🏃 Try these commands:\n'));
+        console.log(chalk.green('   cd react-smell-demo'));
+        console.log(chalk.green('   react-smell ./src'));
+        console.log(chalk.green('   react-smell ./src -s'));
+        console.log(chalk.green('   react-smell ./src --fix'));
+        console.log(chalk.green('   react-smell ./src -f html -o report.html'));
+        console.log(chalk.green('   react-smell ./src --budget'));
+    }
+    catch (error) {
+        console.error(chalk.red(`Error creating demo project: ${error.message}`));
+        throw error;
+    }
+}
+async function createDemoComponents(demoDir) {
+    const componentsDir = path.join(demoDir, 'src', 'components');
+    const hooksDir = path.join(demoDir, 'src', 'hooks');
+    // Good component (clean code)
+    await fs.writeFile(path.join(componentsDir, 'GoodComponent.tsx'), `
+import React, { useState, useCallback, useMemo } from 'react';
+
+interface Props {
+  title: string;
+  items: string[];
+  onItemClick: (item: string) => void;
+}
+
+/**
+ * A well-structured React component following best practices.
+ * This component demonstrates clean code patterns.
+ */
+export function GoodComponent({ title, items, onItemClick }: Props) {
+  const [filter, setFilter] = useState('');
+
+  // Memoized filtered items
+  const filteredItems = useMemo(() => 
+    items.filter(item => item.toLowerCase().includes(filter.toLowerCase())),
+    [items, filter]
+  );
+
+  // Memoized callback
+  const handleClick = useCallback((item: string) => {
+    onItemClick(item);
+  }, [onItemClick]);
+
+  return (
+    <div className="good-component">
+      <h2>{title}</h2>
+      <input
+        type="text"
+        value={filter}
+        onChange={(e) => setFilter(e.target.value)}
+        placeholder="Filter items..."
+        aria-label="Filter items"
+      />
+      <ul>
+        {filteredItems.map((item) => (
+          <li key={item}>
+            <button onClick={() => handleClick(item)} type="button">
+              {item}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+`);
+    // Bad component with multiple smells
+    await fs.writeFile(path.join(componentsDir, 'BadComponent.tsx'), `
+import React, { useState, useEffect } from 'react';
+
+// 🚨 This component demonstrates multiple code smells
+
+export function BadComponent(props) {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [count, setCount] = useState(0);
+  
+  // ⚠️ Smell: Multiple useEffects (useEffect-overuse)
+  useEffect(() => {
+    console.log('Component mounted'); // ⚠️ Smell: debug-statement
+    setLoading(true);
+    fetch('/api/data')
+      .then(r => r.json())
+      .then(setData)
+      .finally(() => setLoading(false));
+  }, []);
+  
+  useEffect(() => {
+    console.log('Data changed:', data); // ⚠️ Smell: debug-statement
+  }, [data]);
+  
+  useEffect(() => {
+    document.title = 'Count: ' + count;
+  }, [count]);
+  
+  useEffect(() => {
+    // ⚠️ Smell: memory-leak-timer (no cleanup)
+    setInterval(() => {
+      setCount(c => c + 1);
+    }, 1000);
+  }, []);
+
+  // ⚠️ Smell: js-var-usage
+  var items = data?.items || [];
+  
+  // ⚠️ Smell: js-loose-equality
+  if (error == null && loading == false) {
+    return (
+      <div>
+        <h1>Data loaded</h1>
+        {/* ⚠️ Smell: missing-key */}
+        {items.map(item => (
+          <div>{item.name}</div>
+        ))}
+        {/* ⚠️ Smell: inline-function-prop */}
+        <button onClick={() => setCount(count + 1)}>
+          Count: {count}
+        </button>
+      </div>
+    );
+  }
+  
+  // ⚠️ Smell: nested-ternary
+  return loading ? <div>Loading...</div> : error ? <div>Error!</div> : <div>Unknown state</div>;
+}
+`);
+    // Security issues component
+    await fs.writeFile(path.join(componentsDir, 'SecurityIssues.tsx'), `
+import React from 'react';
+
+// 🚨 This component demonstrates security vulnerabilities
+
+export function SecurityIssues({ userInput, htmlContent }) {
+  // ⚠️ Smell: security-eval
+  const executeCode = (code: string) => {
+    return eval(code); // DANGEROUS!
+  };
+
+  // ⚠️ Smell: security-secrets (exposed API key pattern)
+  const API_KEY = 'sk_live_abc123def456';
+  
+  return (
+    <div>
+      {/* ⚠️ Smell: security-xss */}
+      <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
+      
+      <button onClick={() => executeCode(userInput)}>
+        Execute
+      </button>
+    </div>
+  );
+}
+`);
+    // Accessibility issues component
+    await fs.writeFile(path.join(componentsDir, 'AccessibilityBad.tsx'), `
+import React from 'react';
+
+// 🚨 This component demonstrates accessibility issues
+
+export function AccessibilityBad() {
+  return (
+    <div>
+      {/* ⚠️ Smell: a11y-missing-alt */}
+      <img src="/logo.png" />
+      
+      {/* ⚠️ Smell: a11y-missing-label */}
+      <input type="email" placeholder="Enter email" />
+      
+      {/* ⚠️ Smell: a11y-keyboard (click without keyboard) */}
+      <div onClick={() => alert('clicked')}>
+        Click me
+      </div>
+      
+      {/* ⚠️ Smell: a11y-semantic */}
+      <div className="button" onClick={() => {}}>
+        This should be a button
+      </div>
+    </div>
+  );
+}
+`);
+    // Prop drilling example
+    await fs.writeFile(path.join(componentsDir, 'PropDrillingExample.tsx'), `
+import React from 'react';
+
+// 🚨 This demonstrates prop drilling (passing props through many levels)
+
+interface User {
+  name: string;
+  email: string;
+  avatar: string;
+}
+
+// ⚠️ Smell: prop-drilling
+export function PropDrillingExample({ 
+  user, 
+  onUpdate, 
+  onDelete, 
+  onLogout,
+  theme,
+  language,
+  notifications,
+  settings
+}: {
+  user: User;
+  onUpdate: () => void;
+  onDelete: () => void;
+  onLogout: () => void;
+  theme: string;
+  language: string;
+  notifications: boolean;
+  settings: object;
+}) {
+  return (
+    <div>
+      <Level1 
+        user={user} 
+        onUpdate={onUpdate} 
+        onDelete={onDelete}
+        onLogout={onLogout}
+        theme={theme}
+        language={language}
+      />
+    </div>
+  );
+}
+
+function Level1({ user, onUpdate, onDelete, onLogout, theme, language }) {
+  return (
+    <Level2 
+      user={user} 
+      onUpdate={onUpdate} 
+      onDelete={onDelete}
+      onLogout={onLogout}
+      theme={theme}
+    />
+  );
+}
+
+function Level2({ user, onUpdate, onDelete, onLogout, theme }) {
+  return (
+    <Level3 user={user} onUpdate={onUpdate} onDelete={onDelete} />
+  );
+}
+
+function Level3({ user, onUpdate, onDelete }) {
+  return (
+    <div>
+      <h3>{user.name}</h3>
+      <button onClick={onUpdate}>Update</button>
+      <button onClick={onDelete}>Delete</button>
+    </div>
+  );
+}
+`);
+    // Context API issues
+    await fs.writeFile(path.join(componentsDir, 'ContextExample.tsx'), `
+import React, { useContext, createContext } from 'react';
+
+// 🚨 This demonstrates Context API issues
+
+const ThemeContext = createContext({});
+const UserContext = createContext({});
+const AuthContext = createContext({});
+const SettingsContext = createContext({});
+const LanguageContext = createContext({});
+const CartContext = createContext({});
+
+// ⚠️ Smell: context-overuse (too many contexts)
+export function ContextHeavyComponent() {
+  const theme = useContext(ThemeContext);
+  const user = useContext(UserContext);
+  const auth = useContext(AuthContext);
+  const settings = useContext(SettingsContext);
+  const language = useContext(LanguageContext);
+  const cart = useContext(CartContext);
+  
+  return (
+    <div style={{ color: theme.color }}>
+      <h1>Welcome, {user.name}</h1>
+      <p>Language: {language.current}</p>
+      <p>Cart items: {cart.items.length}</p>
+    </div>
+  );
+}
+
+// ⚠️ Smell: large-context-value (inline object in provider)
+export function ContextProviderBad({ children }) {
+  return (
+    <ThemeContext.Provider value={{ color: 'blue', fontSize: 14, fontFamily: 'Arial' }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+`);
+    // Form issues
+    await fs.writeFile(path.join(componentsDir, 'FormIssues.tsx'), `
+import React, { useState } from 'react';
+
+// 🚨 This demonstrates form validation issues
+
+export function FormIssues() {
+  const [email, setEmail] = useState('');
+  
+  return (
+    <div>
+      {/* ⚠️ Smell: form-without-onsubmit */}
+      <form>
+        {/* ⚠️ Smell: uncontrolled-form (value without onChange) */}
+        <input type="text" value="fixed value" />
+        
+        {/* ⚠️ Smell: input-without-label */}
+        <input 
+          type="email" 
+          value={email}
+          onChange={e => setEmail(e.target.value)}
+        />
+        
+        <button type="submit">Submit</button>
+      </form>
+      
+      {/* ⚠️ Smell: missing-form-validation (no validation library) */}
+      <form onSubmit={(e) => {
+        e.preventDefault();
+        // No validation!
+        fetch('/api/submit', { method: 'POST', body: JSON.stringify({ email }) });
+      }}>
+        <input type="text" defaultValue="" />
+        <button type="submit">Send</button>
+      </form>
+    </div>
+  );
+}
+`);
+    // State management issues
+    await fs.writeFile(path.join(componentsDir, 'StateManagement.tsx'), `
+import React, { useState, useEffect } from 'react';
+
+// Simulating Redux hooks (these would come from react-redux)
+const useSelector = (selector: any) => selector({ value: 1 });
+const useDispatch = () => (action: any) => action;
+
+// 🚨 This demonstrates state management anti-patterns
+
+export function StateManagementBad() {
+  // ⚠️ Smell: excessive-redux-selectors (too many selectors)
+  const a = useSelector(state => state.a);
+  const b = useSelector(state => state.b);
+  const c = useSelector(state => state.c);
+  const d = useSelector(state => state.d);
+  
+  const dispatch = useDispatch();
+  
+  // ⚠️ Smell: derived-state-in-state
+  const [derivedValue, setDerivedValue] = useState(a + b);
+  
+  // ⚠️ Smell: state-sync-anti-pattern
+  useEffect(() => {
+    setDerivedValue(a + b);
+  }, [a, b]);
+  
+  return (
+    <div>
+      <p>Values: {a}, {b}, {c}, {d}</p>
+      <p>Derived: {derivedValue}</p>
+      {/* ⚠️ Smell: redux-in-render (inline dispatch) */}
+      <button onClick={() => dispatch({ type: 'INCREMENT' })}>
+        Increment
+      </button>
+    </div>
+  );
+}
+`);
+    // Complex hook with testing gaps
+    await fs.writeFile(path.join(hooksDir, 'useComplexHook.ts'), `
+import { useState, useEffect, useCallback } from 'react';
+
+// 🚨 This hook demonstrates testing gap issues
+
+interface UseComplexHookReturn {
+  data: any;
+  loading: boolean;
+  error: Error | null;
+  refetch: () => void;
+}
+
+// ⚠️ Smell: side-effect-heavy, tightly-coupled, complex-untestable
+export function useComplexHook(url: string): UseComplexHookReturn {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  
+  // Multiple side effects
+  useEffect(() => {
+    const controller = new AbortController();
+    
+    setLoading(true);
+    fetch(url, { signal: controller.signal })
+      .then(r => r.json())
+      .then(setData)
+      .catch(setError)
+      .finally(() => setLoading(false));
+    
+    // At least this has cleanup!
+    return () => controller.abort();
+  }, [url]);
+  
+  useEffect(() => {
+    // Side effect: localStorage
+    if (data) {
+      localStorage.setItem('cachedData', JSON.stringify(data));
+    }
+  }, [data]);
+  
+  useEffect(() => {
+    // Side effect: analytics
+    console.log('Analytics:', { url, hasData: !!data }); // ⚠️ debug-statement
+  }, [url, data]);
+  
+  const refetch = useCallback(() => {
+    setLoading(true);
+    fetch(url)
+      .then(r => r.json())
+      .then(setData)
+      .catch(setError)
+      .finally(() => setLoading(false));
+  }, [url]);
+  
+  return { data, loading, error, refetch };
+}
+`);
+    // Create a README for the demo
+    await fs.writeFile(path.join(demoDir, 'README.md'), `# React Code Smell Detector Demo
+
+This demo project contains examples of various code smells that can be detected.
+
+## Quick Start
+
+\`\`\`bash
+# Analyze the project
+react-smell ./src
+
+# With code snippets
+react-smell ./src -s
+
+# Auto-fix simple issues
+react-smell ./src --fix
+
+# Generate HTML report
+react-smell ./src -f html -o report.html
+
+# Check against budget
+react-smell ./src --budget
+\`\`\`
+
+## Demo Files
+
+| File | Demonstrates |
+|------|--------------|
+| GoodComponent.tsx | Clean code (no smells) |
+| BadComponent.tsx | Multiple common smells |
+| SecurityIssues.tsx | Security vulnerabilities |
+| AccessibilityBad.tsx | A11y issues |
+| PropDrillingExample.tsx | Prop drilling |
+| ContextExample.tsx | Context API issues |
+| FormIssues.tsx | Form validation smells |
+| StateManagement.tsx | State management anti-patterns |
+| useComplexHook.ts | Testing gap issues |
+
+## Configuration Files
+
+- \`.smellrc.json\` - Detector configuration
+- \`.smellbudget.json\` - Performance budget
+
+## Learn More
+
+Run \`react-smell guide\` for an interactive tutorial.
+`);
+}