react-code-smell-detector 1.5.0 → 1.5.2

package/README.md

@@ -7,7 +7,7 @@ A CLI tool that analyzes React projects and detects common code smells, providin
 - 🔍 **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
+- 📝 **Multiple Output Formats**: Console (colored), JSON, Markdown, HTML, and PDF
 - 🔒 **Security Scanning**: Detects XSS vulnerabilities, eval usage, exposed secrets
 - ♿ **Accessibility Checks**: Missing alt text, labels, ARIA attributes
 - 🐛 **Debug Cleanup**: console.log, debugger, TODO/FIXME detection
@@ -19,7 +19,7 @@ A CLI tool that analyzes React projects and detects common code smells, providin
 - 💧 **Memory Leak Detection**: Find missing cleanup in useEffect
 - 🔄 **Import Analysis**: Detect circular dependencies and barrel file issues
 - 🗑️ **Unused Code Detection**: Find unused exports and dead imports
-- 📈 **Baseline Tracking**: Track code smell trends over time with git commit history
+- 📈 **Advanced Trend Analytics**: ML-powered trend analysis with predictions and health scores
 - 💬 **Chat Notifications**: Send analysis results to Slack, Discord, or custom webhooks
 - 🔗 **Dependency Graph Visualization**: Visual SVG/HTML of component and import relationships
 - 📦 **Bundle Size Impact**: Per-component bundle size estimates and optimization suggestions
@@ -27,6 +27,8 @@ A CLI tool that analyzes React projects and detects common code smells, providin
 - 🔧 **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
+- 📄 **PDF Report Generation**: Professional, printable reports with visual analytics
+- 🎯 **ESLint Plugin Integration**: Run detectors directly as ESLint rules
 - 📚 **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
@@ -81,6 +83,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
@@ -101,8 +123,154 @@ react-smell ./src -f markdown -o report.md
 
 # HTML (beautiful visual report)
 react-smell ./src -f html -o report.html
+
+# PDF (professional formatted report with charts)
+react-smell ./src -f pdf -o report.pdf
+```
+
+### ESLint Plugin Integration
+
+Run code smell detection directly integrated with ESLint:
+
+```bash
+# Install ESLint if not already installed
+npm install -D eslint
+
+# Add to .eslintrc.json
+{
+  "plugins": ["react-code-smell-detector"],
+  "extends": ["plugin:react-code-smell-detector/recommended"]
+}
+
+# Or use strict mode for more comprehensive checks
+{
+  "plugins": ["react-code-smell-detector"],
+  "extends": ["plugin:react-code-smell-detector/strict"]
+}
+```
+
+**Benefits:**
+- Real-time feedback in your editor
+- Integrates with existing ESLint workflow
+- Runs on file save or pre-commit
+- Works with git hooks and CI/CD pipelines
+
+**Available ESLint Rules:**
+- `no-excessive-use-effect`: Detect overuse of useEffect
+- `no-prop-drilling`: Detect prop drilling patterns
+- `no-large-components`: Warn on component size
+- `no-unmemoized-calculations`: Flag unmemoized expensive operations
+- `no-security-issues`: Detect security vulnerabilities
+- `accessibility-checked`: Accessibility violations
+- `no-memory-leaks`: Potential memory leaks
+- `no-circular-dependencies`: Circular import detection
+- `state-management-smell`: State management anti-patterns
+- And 9 more rules for comprehensive coverage
+
+### Advanced Trend Analytics
+
+Track code quality trends over time with intelligent predictions and insights:
+
+```bash
+# Enable trend analysis in baseline tracking
+react-smell ./src --baseline --trend-analysis
+
+# View detailed trend insights
+react-smell ./src --baseline --trend-report
+```
+
+**Features:**
+- **Trend Direction**: Automatic detection of improving, worsening, or stable trends
+- **Growth Metrics**: Daily velocity, change rate, consistency scoring
+- **Predictive Analytics**: Machine learning-based predictions for next 30 days
+- **Health Score**: Overall codebase health indicator (0-100)
+- **Zero Smell Timeline**: Estimated days to reach zero code smells
+- **Seasonality Detection**: Identify patterns in code quality changes
+- **Smart Recommendations**: AI-powered suggestions based on trend analysis
+
+**Trend Analysis Output:**
+```
+📈 Trend Analysis
+──────────────────────────────────────────────────
+Current: 42 smells
+Previous: 48 smells
+Change: -12.5%
+Trend: IMPROVING
+
+✅ Health Score: 72/100 (good)
+
+📊 Metrics
+  • Daily Velocity: 0.75 smells/day (improving)
+  • Consistency: 85%
+  • Volatility: 2.1
+
+🔮 Predictions
+  • Next Month: ~35 smells
+  • Trajectory: DOWNWARD
+  • Confidence: 92%
+  • Days to Zero Smells: 56
+
+✨ Improvements
+  • useEffect-overuse (3 fewer)
+  • prop-drilling (2 fewer)
+
+💡 Recommendations
+  🟢 Path to Code Smell-Free Codebase
+     At the current improvement rate, your codebase could be 
+     smell-free in approximately 56 days. Focus on maintaining 
+     this momentum.
+```
+
+**Configuration:**
+```json
+{
+  "baselineEnabled": true,
+  "trendAnalysisEnabled": true,
+  "trendReportFrequency": "weekly",
+  "predictiveDaysLookahead": 30
+}
 ```
 
+### PDF Report Generation
+
+Generate professional, printable PDF reports with visual analytics:
+
+```bash
+# Generate PDF report
+react-smell ./src -f pdf -o smell-report.pdf
+
+# Include code snippets in PDF
+react-smell ./src -f pdf -o report.pdf --snippets
+
+# Generate PDF with trend analysis
+react-smell ./src -f pdf -o report.pdf --baseline --trend-analysis
+```
+
+**PDF Report Contents:**
+- Executive Summary with key metrics
+- Technical Debt Grade with visual indicators
+- Smell breakdown by type and severity
+- Top affected files with risk levels
+- Detailed smell analysis with code snippets
+- Actionable recommendations prioritized by impact
+- Trend analysis and predictions
+- Estimated refactoring timeline
+
+**Visual Elements:**
+- Color-coded severity levels (error/warning/info)
+- Grade badges with color gradients
+- Data visualizations and charts
+- Summary metrics in card layout
+- Code snippets with syntax highlighting
+- Professional typography and layout
+
+**Use Cases:**
+- Share reports with stakeholders
+- Archive analysis history
+- Print for code review meetings
+- Executive dashboards
+- Compliance documentation
+
 ### Configuration
 
 Create a `.smellrc.json` file:
@@ -122,11 +290,28 @@ Or create manually:
 }
 ```
 
+Create a `.smellrc.json` file:
+
+```bash
+react-smell init
+```
+
+Or create manually:
+
+```json
+{
+  "maxUseEffectsPerComponent": 3,
+  "maxPropDrillingDepth": 3,
+  "maxComponentLines": 300,
+  "maxPropsCount": 7
+}
+```
+
 ### CLI Options
 
 | Option | Description | Default |
 |--------|-------------|---------|
-| `-f, --format <format>` | Output format: console, json, markdown, html | `console` |
+| `-f, --format <format>` | Output format: console, json, markdown, html, pdf | `console` |
 | `-s, --snippets` | Show code snippets in output | `false` |
 | `-c, --config <file>` | Path to config file | `.smellrc.json` |
 | `--ci` | CI mode: exit with code 1 if any issues | `false` |
@@ -141,6 +326,8 @@ Or create manually:
 | `--exclude <patterns>` | Glob patterns to exclude | `node_modules,dist` |
 | `-o, --output <file>` | Write output to file | - |
 | `--baseline` | Enable baseline tracking and trend analysis | `false` |
+| `--trend-analysis` | Show detailed trend analysis and predictions | `false` |
+| `--trend-report` | Generate comprehensive trend report | `false` |
 | `--slack <url>` | Slack webhook URL for notifications | - |
 | `--discord <url>` | Discord webhook URL for notifications | - |
 | `--webhook <url>` | Generic webhook URL for notifications | - |
@@ -598,6 +785,11 @@ react-smell ./src
 import { 
   analyzeProject, 
   reportResults,
+  // PDF Reporting
+  generatePDFReport,
+  // Trend Analytics
+  analyzeTrends,
+  formatTrendAnalysis,
   // Interactive fixing
   runInteractiveFix,
   previewFixes,
@@ -611,6 +803,9 @@ import {
   // Documentation
   generateComponentDocs,
   writeComponentDocs,
+  // Baseline & Trends
+  recordBaseline,
+  initializeBaseline,
 } from 'react-code-smell-detector';
 
 const result = await analyzeProject({
@@ -626,6 +821,28 @@ const result = await analyzeProject({
 console.log(`Grade: ${result.debtScore.grade}`);
 console.log(`Total issues: ${result.summary.totalSmells}`);
 
+// Generate PDF report
+await generatePDFReport(result, {
+  outputPath: './report.pdf',
+  rootDir: './src',
+  includeCharts: true,
+  includeCodeSnippets: true,
+  title: 'Code Quality Report',
+});
+
+// Record baseline for trend tracking
+initializeBaseline('./');
+const baselineRecord = recordBaseline('./', result.smells);
+
+// Analyze trends from baseline history
+// (requires multiple baseline recordings over time)
+import { BaselineData } from 'react-code-smell-detector';
+const baselineData: BaselineData = JSON.parse(
+  fs.readFileSync('.smellrc-baseline.json', 'utf-8')
+);
+const trendAnalysis = analyzeTrends(baselineData);
+console.log(formatTrendAnalysis(trendAnalysis));
+
 // Check against performance budget
 const budget = await loadBudget();
 const budgetResult = checkBudget(result, budget);
@@ -642,7 +859,7 @@ const docsPath = await writeComponentDocs(result, './src', {
 // Generate PR comment
 const prComment = generatePRComment(result, './src');
 
-// Or use the reporter
+// Or use the reporter for any format
 const report = reportResults(result, {
   format: 'markdown',
   showCodeSnippets: true,
@@ -650,6 +867,26 @@ const report = reportResults(result, {
 });
 ```
 
+**Trend Analytics API:**
+```typescript
+import { TrendAnalysis, TrendPrediction } from 'react-code-smell-detector';
+
+// Access trend data
+const currentHealth = trendAnalysis.healthScore; // HealthScore
+const predictions = trendAnalysis.predictions; // TrendPrediction
+const metrics = trendAnalysis.metrics; // TrendMetrics
+const recommendations = trendAnalysis.recommendations; // TrendRecommendation[]
+
+// Timeline to zero smells
+if (predictions.daysToZeroSmells) {
+  console.log(`Projected zero smells in ${predictions.daysToZeroSmells} days`);
+}
+
+// Access velocity and consistency metrics
+console.log(`Daily Velocity: ${metrics.velocityPerDay} smells/day`);
+console.log(`Consistency: ${metrics.consistency}%`);
+```
+
 ## CI/CD Integration
 
 The tool provides flexible exit codes and notification capabilities for CI/CD pipelines:

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":""}