react-code-smell-detector 1.5.1 → 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
@@ -121,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:
@@ -142,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` |
@@ -161,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 | - |
@@ -618,6 +785,11 @@ react-smell ./src
 import { 
   analyzeProject, 
   reportResults,
+  // PDF Reporting
+  generatePDFReport,
+  // Trend Analytics
+  analyzeTrends,
+  formatTrendAnalysis,
   // Interactive fixing
   runInteractiveFix,
   previewFixes,
@@ -631,6 +803,9 @@ import {
   // Documentation
   generateComponentDocs,
   writeComponentDocs,
+  // Baseline & Trends
+  recordBaseline,
+  initializeBaseline,
 } from 'react-code-smell-detector';
 
 const result = await analyzeProject({
@@ -646,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);
@@ -662,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,
@@ -670,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-code-smell-detector",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "Detect code smells in React projects - useEffect overuse, prop drilling, large components, security issues, accessibility, memory leaks, React 19 Server Components, and more",
   "main": "dist/index.js",
   "bin": {