react-code-smell-detector 1.2.0 → 1.3.1

package/src/reporter.ts

@@ -1,291 +0,0 @@
-import chalk from 'chalk';
-import { AnalysisResult, CodeSmell, SmellSeverity } from './types/index.js';
-import path from 'path';
-
-export interface ReporterOptions {
-  format: 'console' | 'json' | 'markdown';
-  showCodeSnippets: boolean;
-  rootDir: string;
-}
-
-export function reportResults(result: AnalysisResult, options: ReporterOptions): string {
-  switch (options.format) {
-    case 'json':
-      return JSON.stringify(result, null, 2);
-    case 'markdown':
-      return formatMarkdown(result, options);
-    case 'console':
-    default:
-      return formatConsole(result, options);
-  }
-}
-
-function formatConsole(result: AnalysisResult, options: ReporterOptions): string {
-  const lines: string[] = [];
-  const { summary, debtScore, files } = result;
-
-  // Header
-  lines.push('');
-  lines.push(chalk.bold.cyan('╔══════════════════════════════════════════════════════════════╗'));
-  lines.push(chalk.bold.cyan('║') + chalk.bold.white('           🔍 React Code Smell Detector Report              ') + chalk.bold.cyan('║'));
-  lines.push(chalk.bold.cyan('╚══════════════════════════════════════════════════════════════╝'));
-  lines.push('');
-
-  // Technical Debt Score
-  const gradeColor = getGradeColor(debtScore.grade);
-  lines.push(chalk.bold('📊 Technical Debt Score'));
-  lines.push('');
-  lines.push(`   ${chalk.bold('Grade:')} ${gradeColor(debtScore.grade)} ${getScoreBar(debtScore.score)} ${debtScore.score}/100`);
-  lines.push('');
-  lines.push(chalk.dim('   Breakdown:'));
-  lines.push(`   ${chalk.yellow('⚡')} useEffect:     ${getSmallBar(debtScore.breakdown.useEffectScore)} ${debtScore.breakdown.useEffectScore}`);
-  lines.push(`   ${chalk.blue('🔗')} Prop Drilling: ${getSmallBar(debtScore.breakdown.propDrillingScore)} ${debtScore.breakdown.propDrillingScore}`);
-  lines.push(`   ${chalk.magenta('📐')} Component Size:${getSmallBar(debtScore.breakdown.componentSizeScore)} ${debtScore.breakdown.componentSizeScore}`);
-  lines.push(`   ${chalk.green('💾')} Memoization:   ${getSmallBar(debtScore.breakdown.memoizationScore)} ${debtScore.breakdown.memoizationScore}`);
-  lines.push('');
-  lines.push(`   ${chalk.dim('Estimated refactor time:')} ${chalk.yellow(debtScore.estimatedRefactorTime)}`);
-  lines.push('');
-
-  // Summary
-  lines.push(chalk.bold('📈 Summary'));
-  lines.push('');
-  lines.push(`   Files analyzed:  ${chalk.cyan(summary.totalFiles)}`);
-  lines.push(`   Components found: ${chalk.cyan(summary.totalComponents)}`);
-  lines.push(`   Total issues:     ${getSeverityLabel(summary.totalSmells, summary.smellsBySeverity)}`);
-  lines.push('');
-
-  // Issues by type
-  if (summary.totalSmells > 0) {
-    lines.push(chalk.bold('🏷️  Issues by Type'));
-    lines.push('');
-    Object.entries(summary.smellsByType).forEach(([type, count]) => {
-      if (count > 0) {
-        lines.push(`   ${chalk.dim('•')} ${formatSmellType(type)}: ${chalk.yellow(count)}`);
-      }
-    });
-    lines.push('');
-  }
-
-  // Detailed findings
-  if (files.some(f => f.smells.length > 0)) {
-    lines.push(chalk.bold('📋 Detailed Findings'));
-    lines.push('');
-
-    files.forEach(file => {
-      if (file.smells.length === 0) return;
-
-      const relativePath = path.relative(options.rootDir, file.file);
-      lines.push(chalk.bold.underline(relativePath));
-      lines.push('');
-
-      file.smells.forEach(smell => {
-        const icon = getSeverityIcon(smell.severity);
-        const color = getSeverityColor(smell.severity);
-        
-        lines.push(`  ${icon} ${color(smell.message)}`);
-        lines.push(`     ${chalk.dim('Line')} ${smell.line} ${chalk.dim('•')} ${chalk.italic.cyan(smell.suggestion)}`);
-        
-        if (options.showCodeSnippets && smell.codeSnippet) {
-          lines.push('');
-          smell.codeSnippet.split('\n').forEach(line => {
-            if (line.startsWith('>')) {
-              lines.push(chalk.red(line));
-            } else {
-              lines.push(chalk.dim(line));
-            }
-          });
-        }
-        lines.push('');
-      });
-    });
-  }
-
-  // Footer
-  if (summary.totalSmells === 0) {
-    lines.push(chalk.green.bold('✨ No code smells detected! Your code looks great.'));
-  } else {
-    lines.push(chalk.dim('─'.repeat(64)));
-    lines.push(chalk.dim(`Found ${summary.totalSmells} issue(s). Run with --help for more options.`));
-  }
-  lines.push('');
-
-  return lines.join('\n');
-}
-
-function formatMarkdown(result: AnalysisResult, options: ReporterOptions): string {
-  const lines: string[] = [];
-  const { summary, debtScore, files } = result;
-
-  lines.push('# React Code Smell Detector Report');
-  lines.push('');
-  lines.push('## Technical Debt Score');
-  lines.push('');
-  lines.push(`| Metric | Score |`);
-  lines.push(`|--------|-------|`);
-  lines.push(`| **Overall Grade** | **${debtScore.grade}** (${debtScore.score}/100) |`);
-  lines.push(`| useEffect Usage | ${debtScore.breakdown.useEffectScore}/100 |`);
-  lines.push(`| Prop Drilling | ${debtScore.breakdown.propDrillingScore}/100 |`);
-  lines.push(`| Component Size | ${debtScore.breakdown.componentSizeScore}/100 |`);
-  lines.push(`| Memoization | ${debtScore.breakdown.memoizationScore}/100 |`);
-  lines.push('');
-  lines.push(`**Estimated Refactor Time:** ${debtScore.estimatedRefactorTime}`);
-  lines.push('');
-
-  lines.push('## Summary');
-  lines.push('');
-  lines.push(`- **Files analyzed:** ${summary.totalFiles}`);
-  lines.push(`- **Components found:** ${summary.totalComponents}`);
-  lines.push(`- **Total issues:** ${summary.totalSmells}`);
-  lines.push(`  - Errors: ${summary.smellsBySeverity.error}`);
-  lines.push(`  - Warnings: ${summary.smellsBySeverity.warning}`);
-  lines.push(`  - Info: ${summary.smellsBySeverity.info}`);
-  lines.push('');
-
-  if (summary.totalSmells > 0) {
-    lines.push('## Issues by Type');
-    lines.push('');
-    Object.entries(summary.smellsByType).forEach(([type, count]) => {
-      if (count > 0) {
-        lines.push(`- ${formatSmellType(type)}: ${count}`);
-      }
-    });
-    lines.push('');
-
-    lines.push('## Detailed Findings');
-    lines.push('');
-
-    files.forEach(file => {
-      if (file.smells.length === 0) return;
-
-      const relativePath = path.relative(options.rootDir, file.file);
-      lines.push(`### ${relativePath}`);
-      lines.push('');
-
-      file.smells.forEach(smell => {
-        const icon = smell.severity === 'error' ? '🔴' : smell.severity === 'warning' ? '🟡' : '🔵';
-        lines.push(`#### ${icon} ${smell.message}`);
-        lines.push('');
-        lines.push(`- **Line:** ${smell.line}`);
-        lines.push(`- **Severity:** ${smell.severity}`);
-        lines.push(`- **Suggestion:** ${smell.suggestion}`);
-        
-        if (options.showCodeSnippets && smell.codeSnippet) {
-          lines.push('');
-          lines.push('```tsx');
-          lines.push(smell.codeSnippet);
-          lines.push('```');
-        }
-        lines.push('');
-      });
-    });
-  }
-
-  return lines.join('\n');
-}
-
-// Helper functions
-function getGradeColor(grade: string): (text: string) => string {
-  switch (grade) {
-    case 'A': return chalk.green.bold;
-    case 'B': return chalk.greenBright.bold;
-    case 'C': return chalk.yellow.bold;
-    case 'D': return chalk.rgb(255, 165, 0).bold;
-    case 'F': return chalk.red.bold;
-    default: return chalk.white.bold;
-  }
-}
-
-function getScoreBar(score: number): string {
-  const filled = Math.round(score / 5);
-  const empty = 20 - filled;
-  const color = score >= 80 ? chalk.green : score >= 60 ? chalk.yellow : chalk.red;
-  return color('█'.repeat(filled)) + chalk.dim('░'.repeat(empty));
-}
-
-function getSmallBar(score: number): string {
-  const filled = Math.round(score / 10);
-  const empty = 10 - filled;
-  const color = score >= 80 ? chalk.green : score >= 60 ? chalk.yellow : chalk.red;
-  return color('█'.repeat(filled)) + chalk.dim('░'.repeat(empty));
-}
-
-function getSeverityIcon(severity: SmellSeverity): string {
-  switch (severity) {
-    case 'error': return chalk.red('✖');
-    case 'warning': return chalk.yellow('⚠');
-    case 'info': return chalk.blue('ℹ');
-  }
-}
-
-function getSeverityColor(severity: SmellSeverity): (text: string) => string {
-  switch (severity) {
-    case 'error': return chalk.red;
-    case 'warning': return chalk.yellow;
-    case 'info': return chalk.blue;
-  }
-}
-
-function getSeverityLabel(total: number, bySeverity: Record<SmellSeverity, number>): string {
-  const parts: string[] = [];
-  if (bySeverity.error > 0) parts.push(chalk.red(`${bySeverity.error} error(s)`));
-  if (bySeverity.warning > 0) parts.push(chalk.yellow(`${bySeverity.warning} warning(s)`));
-  if (bySeverity.info > 0) parts.push(chalk.blue(`${bySeverity.info} info`));
-  return parts.length > 0 ? parts.join(', ') : chalk.green('0');
-}
-
-function formatSmellType(type: string): string {
-  const labels: Record<string, string> = {
-    'useEffect-overuse': '⚡ useEffect Overuse',
-    'prop-drilling': '🔗 Prop Drilling',
-    'large-component': '📐 Large Component',
-    'unmemoized-calculation': '💾 Unmemoized Calculation',
-    'missing-dependency': '🔍 Missing Dependency',
-    'state-in-loop': '🔄 State in Loop',
-    'inline-function-prop': '📎 Inline Function Prop',
-    'deep-nesting': '📊 Deep Nesting',
-    'missing-key': '🔑 Missing Key',
-    'hooks-rules-violation': '⚠️ Hooks Rules Violation',
-    'dependency-array-issue': '📋 Dependency Array Issue',
-    'nested-ternary': '❓ Nested Ternary',
-    'dead-code': '💀 Dead Code',
-    'magic-value': '🔢 Magic Value',
-    // Next.js
-    'nextjs-client-server-boundary': '▲ Next.js Client/Server Boundary',
-    'nextjs-missing-metadata': '▲ Next.js Missing Metadata',
-    'nextjs-image-unoptimized': '▲ Next.js Unoptimized Image',
-    'nextjs-router-misuse': '▲ Next.js Router Misuse',
-    // React Native
-    'rn-inline-style': '📱 RN Inline Style',
-    'rn-missing-accessibility': '📱 RN Missing Accessibility',
-    'rn-performance-issue': '📱 RN Performance Issue',
-    // Node.js
-    'nodejs-callback-hell': '🟢 Node.js Callback Hell',
-    'nodejs-unhandled-promise': '🟢 Node.js Unhandled Promise',
-    'nodejs-sync-io': '🟢 Node.js Sync I/O',
-    'nodejs-missing-error-handling': '🟢 Node.js Missing Error Handling',
-    // JavaScript
-    'js-var-usage': '📜 JS var Usage',
-    'js-loose-equality': '📜 JS Loose Equality',
-    'js-implicit-coercion': '📜 JS Implicit Coercion',
-    'js-global-pollution': '📜 JS Global Pollution',
-    // TypeScript
-    'ts-any-usage': '🔷 TS any Usage',
-    'ts-missing-return-type': '🔷 TS Missing Return Type',
-    'ts-non-null-assertion': '🔷 TS Non-null Assertion',
-    'ts-type-assertion': '🔷 TS Type Assertion',
-    // Debug
-    'debug-statement': '🐛 Debug Statement',
-    'todo-comment': '📝 TODO/FIXME Comment',
-    // Security
-    'security-xss': '🔒 XSS Vulnerability',
-    'security-eval': '🔒 Eval Usage',
-    'security-secrets': '🔒 Exposed Secret',
-    // Accessibility
-    'a11y-missing-alt': '♿ Missing Alt Text',
-    'a11y-missing-label': '♿ Missing Label',
-    'a11y-interactive-role': '♿ Interactive Role',
-    'a11y-keyboard': '♿ Keyboard Handler',
-    'a11y-semantic': '♿ Semantic HTML',
-  };
-  return labels[type] || type;
-}

package/src/types/index.ts

@@ -1,165 +0,0 @@
-export type SmellSeverity = 'error' | 'warning' | 'info';
-
-export type SmellType = 
-  | 'useEffect-overuse'
-  | 'prop-drilling'
-  | 'large-component'
-  | 'unmemoized-calculation'
-  | 'missing-dependency'
-  | 'state-in-loop'
-  | 'inline-function-prop'
-  | 'deep-nesting'
-  | 'missing-key'
-  | 'hooks-rules-violation'
-  | 'dependency-array-issue'
-  | 'nested-ternary'
-  | 'dead-code'
-  | 'magic-value'
-  // Debug/cleanup
-  | 'debug-statement'
-  | 'todo-comment'
-  // Security
-  | 'security-xss'
-  | 'security-eval'
-  | 'security-secrets'
-  // Accessibility
-  | 'a11y-missing-alt'
-  | 'a11y-missing-label'
-  | 'a11y-interactive-role'
-  | 'a11y-keyboard'
-  | 'a11y-semantic'
-  // Next.js specific
-  | 'nextjs-client-server-boundary'
-  | 'nextjs-missing-metadata'
-  | 'nextjs-image-unoptimized'
-  | 'nextjs-router-misuse'
-  // React Native specific
-  | 'rn-inline-style'
-  | 'rn-missing-accessibility'
-  | 'rn-performance-issue'
-  // Node.js specific
-  | 'nodejs-callback-hell'
-  | 'nodejs-unhandled-promise'
-  | 'nodejs-sync-io'
-  | 'nodejs-missing-error-handling'
-  // JavaScript specific
-  | 'js-var-usage'
-  | 'js-loose-equality'
-  | 'js-implicit-coercion'
-  | 'js-global-pollution'
-  // TypeScript specific
-  | 'ts-any-usage'
-  | 'ts-missing-return-type'
-  | 'ts-non-null-assertion'
-  | 'ts-type-assertion';
-
-export interface CodeSmell {
-  type: SmellType;
-  severity: SmellSeverity;
-  message: string;
-  file: string;
-  line: number;
-  column: number;
-  suggestion: string;
-  codeSnippet?: string;
-}
-
-export interface ComponentInfo {
-  name: string;
-  file: string;
-  startLine: number;
-  endLine: number;
-  lineCount: number;
-  useEffectCount: number;
-  useStateCount: number;
-  useMemoCount: number;
-  useCallbackCount: number;
-  propsCount: number;
-  propsDrillingDepth: number;
-  hasExpensiveCalculation: boolean;
-}
-
-export interface FileAnalysis {
-  file: string;
-  components: ComponentInfo[];
-  smells: CodeSmell[];
-  imports: string[];
-}
-
-export interface AnalysisResult {
-  files: FileAnalysis[];
-  summary: AnalysisSummary;
-  debtScore: TechnicalDebtScore;
-}
-
-export interface AnalysisSummary {
-  totalFiles: number;
-  totalComponents: number;
-  totalSmells: number;
-  smellsByType: Record<SmellType, number>;
-  smellsBySeverity: Record<SmellSeverity, number>;
-}
-
-export interface TechnicalDebtScore {
-  score: number; // 0-100, 100 = no debt
-  grade: 'A' | 'B' | 'C' | 'D' | 'F';
-  breakdown: {
-    useEffectScore: number;
-    propDrillingScore: number;
-    componentSizeScore: number;
-    memoizationScore: number;
-  };
-  estimatedRefactorTime: string; // e.g., "2-4 hours"
-}
-
-export interface DetectorConfig {
-  maxUseEffectsPerComponent: number;
-  maxPropDrillingDepth: number;
-  maxComponentLines: number;
-  maxPropsCount: number;
-  checkMemoization: boolean;
-  checkMissingKeys: boolean;
-  checkHooksRules: boolean;
-  checkDependencyArrays: boolean;
-  maxTernaryDepth: number;
-  checkDeadCode: boolean;
-  checkMagicValues: boolean;
-  magicNumberThreshold: number;
-  // Framework detection
-  checkNextjs: boolean;
-  checkReactNative: boolean;
-  checkNodejs: boolean;
-  checkJavascript: boolean;
-  checkTypescript: boolean;
-  maxCallbackDepth: number;
-  // New detectors
-  checkDebugStatements: boolean;
-  checkSecurity: boolean;
-  checkAccessibility: boolean;
-}
-
-export const DEFAULT_CONFIG: DetectorConfig = {
-  maxUseEffectsPerComponent: 3,
-  maxPropDrillingDepth: 3,
-  maxComponentLines: 300,
-  maxPropsCount: 7,
-  checkMemoization: true,
-  checkMissingKeys: true,
-  checkHooksRules: true,
-  checkDependencyArrays: true,
-  maxTernaryDepth: 2,
-  checkDeadCode: true,
-  checkMagicValues: true,
-  magicNumberThreshold: 10,
-  // Framework detection - auto-enabled based on project
-  checkNextjs: true,
-  checkReactNative: true,
-  checkNodejs: true,
-  checkJavascript: true,
-  checkTypescript: true,
-  maxCallbackDepth: 3,
-  // New detectors
-  checkDebugStatements: true,
-  checkSecurity: true,
-  checkAccessibility: true,
-};

package/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "lib": ["ES2022"],
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "declaration": true,
-    "declarationMap": true,
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
-}