react-code-smell-detector 1.5.1 → 1.5.3

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
@@ -35,6 +37,11 @@ A CLI tool that analyzes React projects and detects common code smells, providin
 - 🗃️ **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
+- 🔒 **Security Audit**: Comprehensive vulnerability scanning (XSS, injection, secrets, crypto issues)
+- ⚡ **Performance Profiler**: Component optimization analysis with memoization & render metrics
+- 👥 **Team Dashboard**: Centralized view of team metrics, workload & quality trends
+- 🔗 **API Integration**: Sync with GitHub, Slack, Jira, monitoring platforms & webhooks
+- 🔍 **Custom Analyzer**: Define and apply project-specific code quality rules
 
 ### Detected Code Smells
 
@@ -121,8 +128,317 @@ 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
+
+### Security Audit
+
+Comprehensive security vulnerability scanning and compliance analysis:
+
+```bash
+# Run security audit
+react-smell ./src --security-audit
+
+# Include secret detection
+react-smell ./src --security-audit --check-secrets
+
+# Generate security report
+react-smell ./src --security-audit -f json -o security-report.json
+```
+
+**Detects:**
+- **XSS Vulnerabilities**: dangerouslySetInnerHTML, innerHTML assignment, eval() usage
+- **Injection Attacks**: SQL injection, command injection, regex injection patterns
+- **Secrets Exposure**: API keys, passwords, tokens, private keys
+- **Cryptography Issues**: Deprecated cipher functions, weak hashing (MD5, SHA1), weak random generation
+- **CVSS Scoring**: Risk assessment with industry-standard vulnerability scoring
+
+**Output:** Compliance score, risk level, critical/high/medium/low categorization, remediation suggestions
+
+### Performance Profiler
+
+Analyze and optimize component performance characteristics:
+
+```bash
+# Profile performance metrics
+react-smell ./src --performance
+
+# Get detailed performance analysis
+react-smell ./src --performance --detailed
+
+# Export performance metrics
+react-smell ./src --performance -f json -o perf-metrics.json
+```
+
+**Analyzes:**
+- **Render Time**: Estimated component rendering duration
+- **Memory Usage**: Approximate memory footprint per component
+- **Memoization Score**: Identifies missing useMemo/useCallback opportunities (0-100)
+- **Render Efficiency**: Optimization potential rating
+- **Bottleneck Detection**: Identifies slow, memory-intensive, or re-render-heavy components
+- **Hook Usage**: State and effect hook analysis for consolidation opportunities
+
+### Team Dashboard
+
+Centralized metrics view for team collaboration and quality tracking:
+
+```bash
+# Generate team dashboard
+react-smell dashboard
+
+# Include team members
+react-smell dashboard --team-members team.json
+
+# View in CI/CD pipeline
+react-smell dashboard -f json | post-to-dashboard-api
+```
+
+**Features:**
+- **Team Metrics**: Member count, component ownership, average code quality
+- **Health Status**: Excellent/Good/Fair/Poor/Critical team health indicator
+- **Common Issues**: Top code smells affecting the team with frequency counts
+- **Activity Log**: Recent analysis events with timestamps
+- **Alerts**: Critical issues, component overload warnings, team workload indicators
+- **Ownership Tracking**: Component assignment to team members
+
+### API Integration
+
+Sync analysis results with external services, issue trackers, and monitoring platforms:
+
+```bash
+# Send to external API
+react-smell ./src --send-to-api https://api.example.com --api-key sk-xxx
+
+# Post issues to GitHub/GitLab
+react-smell ./src --post-issues --github --token $GITHUB_TOKEN
+
+# Send Slack notifications
+react-smell ./src --webhook https://hooks.slack.com/services/xxx
+
+# Check SLA compliance
+react-smell ./src --check-sla ./sla-config.json
+
+# Comment on pull requests
+react-smell ./src --comment-pr --pr-number 123 --pr-token $TOKEN
+
+# Sync to monitoring platform
+react-smell ./src --sync-metrics https://metrics.service.com
+```
+
+**Integrations:**
+- GitHub Issues, GitHub Pull Request Comments, GitHub Actions
+- GitLab Issues, Merge Request comments
+- Jira issue creation and linking
+- Slack notifications and dashboards
+- Discord webhooks
+- Datadog, New Relic, and other APM platforms
+- Custom REST API endpoints
+- SLA monitoring and compliance checking
+
+### Custom Analyzer
+
+Define and apply project-specific code quality rules:
+
+```bash
+# Create custom rules
+react-smell init --custom-rules
+
+# Apply custom rules
+react-smell ./src --custom-rules ./custom-rules.json
+
+# Validate rules before applying
+react-smell ./src --validate-rules ./custom-rules.json
+```
+
+**Example Custom Rules:**
+
+```json
+{
+  "customRules": [
+    {
+      "id": "no-magic-numbers",
+      "name": "No Magic Numbers",
+      "pattern": "[0-9]{3,}",
+      "severity": "warning",
+      "message": "Magic number found",
+      "suggestion": "Extract to named constant",
+      "enabled": true
+    },
+    {
+      "id": "naming-convention",
+      "name": "Component Naming",
+      "pattern": "^[a-z].*\\.tsx$",
+      "severity": "warning",
+      "message": "Component name must start with uppercase",
+      "suggestion": "Use PascalCase",
+      "enabled": true
+    },
+    {
+      "id": "no-console-in-prod",
+      "name": "No Console in Production",
+      "pattern": "console\\.(log|warn|error)",
+      "severity": "info",
+      "message": "Console statement detected",
+      "suggestion": "Remove or use logger",
+      "enabled": false
+    }
+  ]
+}
+```
+
+**Rule Features:**
+- String and regex pattern matching
+- File/component/function/expression scope filtering
+- Include/exclude patterns for file filtering
+- Enable/disable rules individually
+- Custom severity levels
+- Multi-line pattern matching
+
 ### Configuration
 
 Create a `.smellrc.json` file:
@@ -142,11 +458,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 +494,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 +953,11 @@ react-smell ./src
 import { 
   analyzeProject, 
   reportResults,
+  // PDF Reporting
+  generatePDFReport,
+  // Trend Analytics
+  analyzeTrends,
+  formatTrendAnalysis,
   // Interactive fixing
   runInteractiveFix,
   previewFixes,
@@ -631,6 +971,9 @@ import {
   // Documentation
   generateComponentDocs,
   writeComponentDocs,
+  // Baseline & Trends
+  recordBaseline,
+  initializeBaseline,
 } from 'react-code-smell-detector';
 
 const result = await analyzeProject({
@@ -646,6 +989,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 +1027,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 +1035,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.3",
   "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": {