react-code-smell-detector 1.4.2 → 1.5.1

package/README.md

@@ -4,7 +4,7 @@ A CLI tool that analyzes React projects and detects common code smells, providin
 
 ## Features
 
-- 🔍 **Detect Code Smells**: Identifies common React anti-patterns (51+ smell types)
+- 🔍 **Detect Code Smells**: Identifies common React anti-patterns (70+ smell types)
 - 📊 **Technical Debt Score**: Grades your codebase from A to F
 - 💡 **Refactoring Suggestions**: Actionable recommendations for each issue
 - 📝 **Multiple Output Formats**: Console (colored), JSON, Markdown, and HTML
@@ -24,6 +24,17 @@ A CLI tool that analyzes React projects and detects common code smells, providin
 - 🔗 **Dependency Graph Visualization**: Visual SVG/HTML of component and import relationships
 - 📦 **Bundle Size Impact**: Per-component bundle size estimates and optimization suggestions
 - ⚙️ **Custom Rules Engine**: Define project-specific code quality rules in configuration
+- 🔧 **Interactive Fix Mode**: Review and apply fixes one by one with diff preview
+- 💬 **GitHub PR Comments**: Auto-comment analysis results on pull requests
+- 📊 **Performance Budget**: Set thresholds and enforce limits in CI/CD
+- 📚 **Component Documentation**: Auto-generate docs from component analysis
+- ⚛️ **React 19 Server Components**: Detect Server/Client boundary issues
+- 🔮 **Context API Analysis**: Detect context overuse, missing memoization, re-render issues
+- 🛡️ **Error Boundary Detection**: Find missing ErrorBoundary and Suspense wrappers
+- 📋 **Form Validation Smells**: Detect uncontrolled inputs, missing validation
+- 🗃️ **State Management Analysis**: Redux/Zustand anti-patterns, selector issues
+- 🧪 **Testing Gap Detection**: Identify complex components likely needing tests
+- 🤖 **AI Refactoring Suggestions**: LLM-powered smart refactoring recommendations
 
 ### Detected Code Smells
 
@@ -42,7 +53,13 @@ A CLI tool that analyzes React projects and detects common code smells, providin
 | **Import Issues** | Circular dependencies, barrel file imports, excessive imports |
 | **Unused Code** | Unused exports, dead imports |
 | **Custom Rules** | User-defined code quality rules |
+| **Server Components** | React 19 client/server boundary issues, async components |
 | **Framework-Specific** | Next.js, React Native, Node.js, TypeScript issues |
+| **Context API** | Context overuse, missing memoization, large context values |
+| **Error Boundaries** | Missing ErrorBoundary, Suspense without fallback |
+| **Form Validation** | Uncontrolled forms, missing validation, controlled inputs without onChange |
+| **State Management** | Redux selector anti-patterns, derived state issues, state sync problems |
+| **Testing Gaps** | Complex untestable components, side-effect heavy code, tight coupling |
 
 ## Installation
 
@@ -64,6 +81,26 @@ npm install -D react-code-smell-detector
 react-smell /path/to/react/project
 ```
 
+### Interactive Guide
+
+Launch an interactive tutorial to learn all features:
+
+```bash
+react-smell guide
+```
+
+### Demo Project
+
+Create a demo project with examples of all detectable code smells:
+
+```bash
+react-smell demo
+# Creates ./react-smell-demo with sample components
+
+# Or specify a directory
+react-smell demo /path/to/directory
+```
+
 ### With Code Snippets
 
 ```bash
@@ -132,6 +169,16 @@ Or create manually:
 | `--graph-format <format>` | Graph output format: svg, html | `html` |
 | `--bundle` | Analyze bundle size impact per component | `false` |
 | `--rules <file>` | Custom rules configuration file | - |
+| `--fix-interactive` | Interactive fix mode: review fixes one by one | `false` |
+| `--fix-preview` | Preview fixable issues without applying | `false` |
+| `--pr-comment` | Generate PR comment (for GitHub Actions) | `false` |
+| `--budget` | Check against performance budget | `false` |
+| `--budget-config <file>` | Path to budget config file | `.smellbudget.json` |
+| `--docs` | Generate component documentation | `false` |
+| `--docs-format <format>` | Documentation format: markdown, html, json | `markdown` |
+| `--ai` | Enable AI-powered refactoring suggestions | `false` |
+| `--ai-key <key>` | API key for AI provider | - |
+| `--ai-model <model>` | AI model to use (gpt-4, claude-3-sonnet, etc.) | `gpt-4` |
 
 ### Auto-Fix
 
@@ -392,6 +439,153 @@ react-smell ./src --rules .smellrc-rules.json --format json --ci
 }
 ```
 
+### Interactive Fix Mode
+
+Review and apply fixes one by one with diff preview:
+
+```bash
+# Interactive mode - review each fix
+react-smell ./src --fix-interactive
+
+# Preview fixable issues without applying
+react-smell ./src --fix-preview
+```
+
+**Output:**
+```
+🔧 Interactive Fix Mode
+Found 5 fixable issue(s). Review each one:
+
+Commands: [y]es, [n]o, [a]ll, [q]uit
+
+────────────────────────────────────────────────────────────────
+src/utils/helper.ts:15
+  debug-statement: console.log found
+  Fix: Remove console.log/debugger statements
+
+  - console.log('debug:', value);
+  + (line removed)
+
+Apply this fix? [y/n/a/q]: y
+  ✓ Applied
+```
+
+### GitHub PR Comments
+
+Auto-comment code smell analysis on pull requests:
+
+```bash
+# Generate PR comment (outputs markdown)
+react-smell ./src --pr-comment
+
+# In GitHub Actions (auto-posts to PR)
+react-smell ./src --pr-comment --ci
+```
+
+**GitHub Actions workflow:**
+```yaml
+- name: Analyze Code
+  run: npx react-smell ./src --pr-comment --ci
+  env:
+    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+```
+
+### Performance Budget
+
+Set thresholds for code quality and enforce in CI/CD:
+
+```bash
+# Create budget config
+react-smell init-budget
+
+# Check against budget
+react-smell ./src --budget
+
+# With custom config
+react-smell ./src --budget --budget-config my-budget.json
+```
+
+**Budget config (`.smellbudget.json`):**
+```json
+{
+  "maxErrors": 0,
+  "maxWarnings": 10,
+  "minScore": 70,
+  "minGrade": "C",
+  "maxSmellsPerFile": 5,
+  "maxByType": {
+    "useEffect-overuse": 3,
+    "prop-drilling": 5
+  }
+}
+```
+
+**Output:**
+```
+✗ Performance budget check failed
+
+Violations:
+  ✗ Errors (2) exceeds budget (0)
+  ⚠ Warnings (15) exceeds budget (10)
+
+Checks: 3 passed, 2 failed
+```
+
+### Component Documentation
+
+Auto-generate documentation from component analysis:
+
+```bash
+# Generate markdown docs
+react-smell docs ./src
+
+# Generate HTML docs
+react-smell docs ./src -f html
+
+# Output to specific directory
+react-smell docs ./src -f html -o ./docs
+```
+
+**Output (COMPONENTS.md):**
+```markdown
+# Component Documentation
+
+## Summary
+| Metric | Value |
+|--------|-------|
+| Total Components | 25 |
+| Technical Debt Grade | B |
+
+## Components
+
+#### Button
+📄 `components/Button.tsx`
+
+| Metric | Value |
+|--------|-------|
+| Lines | 45 |
+| Complexity | 🟢 Low |
+| Maintainability | 🟢 Good |
+
+**Hooks:** useState (2), useCallback (1)
+```
+
+### React 19 Server Components
+
+Detect Server/Client component boundary issues:
+
+```bash
+# Enabled by default for app/ directory components
+react-smell ./src
+```
+
+**Detected issues:**
+- `server-component-hooks`: Using useState/useEffect in Server Components
+- `server-component-events`: Using onClick/onChange in Server Components
+- `server-component-browser-api`: Using window/document in Server Components
+- `async-client-component`: Async function in 'use client' component
+- `mixed-directives`: Both 'use client' and 'use server' in same file
+
 ## Example Output
 
 ```
@@ -421,9 +615,23 @@ react-smell ./src --rules .smellrc-rules.json --format json --ci
 ## Programmatic API
 
 ```typescript
-import { analyzeProject, reportResults } from 'react-code-smell-detector';
-import { initializeBaseline, recordBaseline, getTrendAnalysis, formatTrendReport } from 'react-code-smell-detector';
-import { sendWebhookNotification, getWebhookConfig } from 'react-code-smell-detector';
+import { 
+  analyzeProject, 
+  reportResults,
+  // Interactive fixing
+  runInteractiveFix,
+  previewFixes,
+  // PR Comments
+  generatePRComment,
+  postPRComment,
+  // Performance Budget
+  loadBudget,
+  checkBudget,
+  formatBudgetReport,
+  // Documentation
+  generateComponentDocs,
+  writeComponentDocs,
+} from 'react-code-smell-detector';
 
 const result = await analyzeProject({
   rootDir: './src',
@@ -431,32 +639,29 @@ const result = await analyzeProject({
     maxUseEffectsPerComponent: 3,
     maxComponentLines: 300,
     checkUnusedCode: true,
-    baselineEnabled: true,
+    checkServerComponents: true, // React 19
   },
 });
 
 console.log(`Grade: ${result.debtScore.grade}`);
 console.log(`Total issues: ${result.summary.totalSmells}`);
 
-// Track baseline
-initializeBaseline('./src');
-recordBaseline('./src', result.files.flatMap(f => f.smells));
-const trend = getTrendAnalysis('./src');
-console.log(formatTrendReport('./src'));
-
-// Send notification
-const webhookConfig = getWebhookConfig(
-  process.env.REACT_SMELL_SLACK_WEBHOOK,
-  process.env.REACT_SMELL_DISCORD_WEBHOOK
-);
-if (webhookConfig) {
-  await sendWebhookNotification(
-    webhookConfig,
-    result.files.flatMap(f => f.smells),
-    'my-project'
-  );
+// Check against performance budget
+const budget = await loadBudget();
+const budgetResult = checkBudget(result, budget);
+if (!budgetResult.passed) {
+  console.log(formatBudgetReport(budgetResult));
 }
 
+// Generate documentation
+const docsPath = await writeComponentDocs(result, './src', {
+  format: 'markdown',
+  includeSmells: true,
+});
+
+// Generate PR comment
+const prComment = generatePRComment(result, './src');
+
 // Or use the reporter
 const report = reportResults(result, {
   format: 'markdown',

package/dist/__tests__/aiRefactoring.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=aiRefactoring.test.d.ts.map

package/dist/__tests__/aiRefactoring.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aiRefactoring.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/aiRefactoring.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/aiRefactoring.test.js

@@ -0,0 +1,86 @@
+import { describe, it, expect } from 'vitest';
+import { getQuickRefactoringTemplates } from '../aiRefactoring.js';
+describe('AI Refactoring', () => {
+    describe('getQuickRefactoringTemplates', () => {
+        it('should return templates for useEffect-overuse', () => {
+            const templates = getQuickRefactoringTemplates('useEffect-overuse');
+            expect(templates.length).toBeGreaterThan(0);
+            expect(templates.some(t => t.includes('effect'))).toBe(true);
+        });
+        it('should return templates for prop-drilling', () => {
+            const templates = getQuickRefactoringTemplates('prop-drilling');
+            expect(templates.length).toBeGreaterThan(0);
+            expect(templates.some(t => t.includes('Context') || t.includes('composition'))).toBe(true);
+        });
+        it('should return templates for large-component', () => {
+            const templates = getQuickRefactoringTemplates('large-component');
+            expect(templates.length).toBeGreaterThan(0);
+            expect(templates.some(t => t.includes('Extract') || t.includes('component'))).toBe(true);
+        });
+        it('should return templates for context-overuse', () => {
+            const templates = getQuickRefactoringTemplates('context-overuse');
+            expect(templates.length).toBeGreaterThan(0);
+            expect(templates.some(t => t.includes('context'))).toBe(true);
+        });
+        it('should return templates for missing-error-boundary', () => {
+            const templates = getQuickRefactoringTemplates('missing-error-boundary');
+            expect(templates.length).toBeGreaterThan(0);
+            expect(templates.some(t => t.includes('ErrorBoundary') || t.includes('Suspense'))).toBe(true);
+        });
+        it('should return templates for state-sync-anti-pattern', () => {
+            const templates = getQuickRefactoringTemplates('state-sync-anti-pattern');
+            expect(templates.length).toBeGreaterThan(0);
+            expect(templates.some(t => t.includes('Derive') || t.includes('useMemo'))).toBe(true);
+        });
+        it('should return generic template for unknown smell types', () => {
+            const templates = getQuickRefactoringTemplates('unknown-smell-type');
+            expect(templates.length).toBeGreaterThan(0);
+            expect(templates[0]).toContain('Review');
+        });
+    });
+    describe('AIRefactoringConfig', () => {
+        it('should accept valid config object', () => {
+            const config = {
+                apiKey: 'test-key',
+                model: 'gpt-4',
+                maxTokens: 1000,
+                temperature: 0.3,
+                provider: 'openai',
+            };
+            expect(config.apiKey).toBe('test-key');
+            expect(config.model).toBe('gpt-4');
+            expect(config.provider).toBe('openai');
+        });
+        it('should accept anthropic provider', () => {
+            const config = {
+                apiKey: 'test-key',
+                model: 'claude-3-sonnet',
+                provider: 'anthropic',
+            };
+            expect(config.provider).toBe('anthropic');
+        });
+    });
+    describe('AIRefactoringSuggestion type', () => {
+        it('should have expected structure', () => {
+            const suggestion = {
+                smell: {
+                    type: 'debug-statement',
+                    severity: 'warning',
+                    message: 'Test',
+                    file: '/test.tsx',
+                    line: 1,
+                    column: 0,
+                    suggestion: 'Remove it',
+                },
+                originalCode: 'console.log("test")',
+                suggestedCode: '// removed',
+                explanation: 'Debug statements should be removed',
+                confidence: 0.9,
+                estimatedEffort: 'low',
+            };
+            expect(suggestion.confidence).toBeGreaterThanOrEqual(0);
+            expect(suggestion.confidence).toBeLessThanOrEqual(1);
+            expect(['low', 'medium', 'high']).toContain(suggestion.estimatedEffort);
+        });
+    });
+});

package/dist/__tests__/analyzer-real.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=analyzer-real.test.d.ts.map

package/dist/__tests__/analyzer-real.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"analyzer-real.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/analyzer-real.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/analyzer-real.test.js

@@ -0,0 +1,149 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { analyzeProject } from '../analyzer.js';
+import * as fg from 'fast-glob';
+import * as fs from 'fs/promises';
+// Mock fast-glob
+vi.mock('fast-glob', () => ({
+    default: vi.fn(),
+}));
+// Mock fs/promises for parseFile
+vi.mock('fs/promises', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        default: actual,
+        readFile: vi.fn(),
+    };
+});
+describe('Analyzer - Real Tests', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    describe('analyzeProject', () => {
+        it('should return empty results when no files found', async () => {
+            fg.default.mockResolvedValue([]);
+            const result = await analyzeProject({
+                rootDir: '/fake/path',
+            });
+            expect(result.files).toEqual([]);
+            expect(result.summary.totalFiles).toBe(0);
+            expect(result.summary.totalComponents).toBe(0);
+            expect(result.summary.totalSmells).toBe(0);
+        });
+        it('should call fast-glob with correct patterns', async () => {
+            fg.default.mockResolvedValue([]);
+            await analyzeProject({
+                rootDir: '/fake/path',
+                include: ['**/*.tsx'],
+            });
+            expect(fg.default).toHaveBeenCalled();
+        });
+        it('should handle parse errors gracefully', async () => {
+            fg.default.mockResolvedValue(['/fake/path/broken.tsx']);
+            const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => { });
+            const result = await analyzeProject({
+                rootDir: '/fake/path',
+            });
+            // Should return empty since file doesn't exist
+            expect(result.files.length).toBe(0);
+            warnSpy.mockRestore();
+        });
+        it('should use custom include patterns', async () => {
+            fg.default.mockResolvedValue([]);
+            await analyzeProject({
+                rootDir: '/fake/path',
+                include: ['**/*.ts'],
+                exclude: ['**/node_modules/**'],
+            });
+            expect(fg.default).toHaveBeenCalledWith(expect.arrayContaining([expect.stringContaining('.ts')]), expect.objectContaining({ ignore: ['**/node_modules/**'] }));
+        });
+        it('should merge user config with defaults', async () => {
+            fg.default.mockResolvedValue([]);
+            const result = await analyzeProject({
+                rootDir: '/fake/path',
+                config: { maxUseEffectsPerComponent: 5 },
+            });
+            expect(result.summary).toBeDefined();
+        });
+    });
+    describe('Technical Debt Score Calculation', () => {
+        it('should calculate grade A for clean projects', async () => {
+            const cleanCode = `
+        function CleanComponent() {
+          return <div>Clean</div>;
+        }
+      `;
+            fg.default.mockResolvedValue(['/fake/path/Clean.tsx']);
+            fs.readFile.mockResolvedValue(cleanCode);
+            const result = await analyzeProject({
+                rootDir: '/fake/path',
+                config: { checkDebugStatements: false },
+            });
+            expect(result.debtScore.grade).toBe('A');
+            expect(result.debtScore.score).toBeGreaterThanOrEqual(90);
+        });
+        it('should estimate refactor time based on issues', async () => {
+            fg.default.mockResolvedValue([]);
+            const result = await analyzeProject({
+                rootDir: '/fake/path',
+            });
+            expect(result.debtScore.estimatedRefactorTime).toBeDefined();
+        });
+        it('should include breakdown scores', async () => {
+            fg.default.mockResolvedValue([]);
+            const result = await analyzeProject({
+                rootDir: '/fake/path',
+            });
+            expect(result.debtScore.breakdown).toBeDefined();
+            expect(result.debtScore.breakdown.useEffectScore).toBeDefined();
+            expect(result.debtScore.breakdown.propDrillingScore).toBeDefined();
+            expect(result.debtScore.breakdown.componentSizeScore).toBeDefined();
+            expect(result.debtScore.breakdown.memoizationScore).toBeDefined();
+        });
+    });
+    describe('Smell Ignore Comments', () => {
+        it('should filter smells with @smell-ignore comment', async () => {
+            // Test behavior: when no files match, result should be empty
+            fg.default.mockResolvedValue([]);
+            const result = await analyzeProject({
+                rootDir: '/fake/path',
+                config: { checkDebugStatements: true },
+            });
+            // Empty result with no smells
+            expect(result.files.length).toBe(0);
+            expect(result.summary.totalSmells).toBe(0);
+        });
+    });
+    describe('Summary Calculation', () => {
+        it('should have smells by type structure', async () => {
+            fg.default.mockResolvedValue([]);
+            const result = await analyzeProject({
+                rootDir: '/fake/path',
+                config: { checkDebugStatements: true },
+            });
+            // Should have smellsByType object even if empty
+            expect(result.summary.smellsByType).toBeDefined();
+        });
+        it('should aggregate smells by severity', async () => {
+            fg.default.mockResolvedValue([]);
+            const result = await analyzeProject({
+                rootDir: '/fake/path',
+            });
+            expect(result.summary.smellsBySeverity).toBeDefined();
+            expect(result.summary.smellsBySeverity.error).toBeDefined();
+            expect(result.summary.smellsBySeverity.warning).toBeDefined();
+            expect(result.summary.smellsBySeverity.info).toBeDefined();
+        });
+    });
+    describe('Component Info Collection', () => {
+        it('should return components array in file results', async () => {
+            // Test that result structure includes components array
+            fg.default.mockResolvedValue([]);
+            const result = await analyzeProject({
+                rootDir: '/fake/path',
+            });
+            // For non-existent files, we get empty results
+            expect(Array.isArray(result.files)).toBe(true);
+        });
+    });
+});

package/dist/__tests__/analyzer.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=analyzer.test.d.ts.map

package/dist/__tests__/analyzer.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"analyzer.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/analyzer.test.ts"],"names":[],"mappings":""}