react-code-smell-detector 1.0.0

package/dist/reporter.js

@@ -0,0 +1,217 @@
+import chalk from 'chalk';
+import path from 'path';
+export function reportResults(result, options) {
+    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, options) {
+    const lines = [];
+    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, options) {
+    const lines = [];
+    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) {
+    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) {
+    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) {
+    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) {
+    switch (severity) {
+        case 'error': return chalk.red('✖');
+        case 'warning': return chalk.yellow('⚠');
+        case 'info': return chalk.blue('ℹ');
+    }
+}
+function getSeverityColor(severity) {
+    switch (severity) {
+        case 'error': return chalk.red;
+        case 'warning': return chalk.yellow;
+        case 'info': return chalk.blue;
+    }
+}
+function getSeverityLabel(total, bySeverity) {
+    const parts = [];
+    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) {
+    const labels = {
+        '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',
+    };
+    return labels[type] || type;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,64 @@
+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';
+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;
+    grade: 'A' | 'B' | 'C' | 'D' | 'F';
+    breakdown: {
+        useEffectScore: number;
+        propDrillingScore: number;
+        componentSizeScore: number;
+        memoizationScore: number;
+    };
+    estimatedRefactorTime: string;
+}
+export interface DetectorConfig {
+    maxUseEffectsPerComponent: number;
+    maxPropDrillingDepth: number;
+    maxComponentLines: number;
+    maxPropsCount: number;
+    checkMemoization: boolean;
+}
+export declare const DEFAULT_CONFIG: DetectorConfig;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEzD,MAAM,MAAM,SAAS,GACjB,mBAAmB,GACnB,eAAe,GACf,iBAAiB,GACjB,wBAAwB,GACxB,oBAAoB,GACpB,eAAe,GACf,sBAAsB,GACtB,cAAc,CAAC;AAEnB,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,aAAa,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,uBAAuB,EAAE,OAAO,CAAC;CAClC;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,OAAO,EAAE,eAAe,CAAC;IACzB,SAAS,EAAE,kBAAkB,CAAC;CAC/B;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACxC,gBAAgB,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;CACjD;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACnC,SAAS,EAAE;QACT,cAAc,EAAE,MAAM,CAAC;QACvB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,kBAAkB,EAAE,MAAM,CAAC;QAC3B,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,qBAAqB,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,cAAc;IAC7B,yBAAyB,EAAE,MAAM,CAAC;IAClC,oBAAoB,EAAE,MAAM,CAAC;IAC7B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,EAAE,cAM5B,CAAC"}

package/dist/types/index.js

@@ -0,0 +1,7 @@
+export const DEFAULT_CONFIG = {
+    maxUseEffectsPerComponent: 3,
+    maxPropDrillingDepth: 3,
+    maxComponentLines: 300,
+    maxPropsCount: 7,
+    checkMemoization: true,
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "react-code-smell-detector",
+  "version": "1.0.0",
+  "description": "Detect code smells in React projects - useEffect overuse, prop drilling, large components, and more",
+  "main": "dist/index.js",
+  "bin": {
+    "react-smell": "dist/cli.js"
+  },
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "start": "node dist/cli.js",
+    "test": "vitest"
+  },
+  "keywords": [
+    "react",
+    "code-smell",
+    "linter",
+    "static-analysis",
+    "useEffect",
+    "prop-drilling",
+    "technical-debt"
+  ],
+  "author": "vsthakur101",
+  "license": "MIT",
+  "dependencies": {
+    "@babel/parser": "^7.23.0",
+    "@babel/traverse": "^7.23.0",
+    "@babel/types": "^7.23.0",
+    "chalk": "^5.3.0",
+    "commander": "^11.1.0",
+    "fast-glob": "^3.3.2",
+    "ora": "^8.0.1"
+  },
+  "devDependencies": {
+    "@types/babel__traverse": "^7.20.4",
+    "@types/node": "^20.10.0",
+    "typescript": "^5.3.0",
+    "vitest": "^1.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/src/analyzer.ts

@@ -0,0 +1,216 @@
+import fg from 'fast-glob';
+import path from 'path';
+import { parseFile, ParseResult } from './parser/index.js';
+import {
+  detectUseEffectOveruse,
+  detectPropDrilling,
+  analyzePropDrillingDepth,
+  detectLargeComponent,
+  detectUnmemoizedCalculations,
+} from './detectors/index.js';
+import {
+  AnalysisResult,
+  FileAnalysis,
+  ComponentInfo,
+  CodeSmell,
+  AnalysisSummary,
+  TechnicalDebtScore,
+  DetectorConfig,
+  DEFAULT_CONFIG,
+  SmellType,
+  SmellSeverity,
+} from './types/index.js';
+
+export interface AnalyzerOptions {
+  rootDir: string;
+  include?: string[];
+  exclude?: string[];
+  config?: Partial<DetectorConfig>;
+}
+
+export async function analyzeProject(options: AnalyzerOptions): Promise<AnalysisResult> {
+  const {
+    rootDir,
+    include = ['**/*.tsx', '**/*.jsx'],
+    exclude = ['**/node_modules/**', '**/dist/**', '**/build/**', '**/*.test.*', '**/*.spec.*'],
+    config: userConfig = {},
+  } = options;
+
+  const config: DetectorConfig = { ...DEFAULT_CONFIG, ...userConfig };
+
+  // Find all React files
+  const patterns = include.map(p => path.join(rootDir, p));
+  const files = await fg(patterns, {
+    ignore: exclude,
+    absolute: true,
+  });
+
+  const fileAnalyses: FileAnalysis[] = [];
+
+  // Analyze each file
+  for (const file of files) {
+    try {
+      const parseResult = await parseFile(file);
+      const analysis = analyzeFile(parseResult, file, config);
+      if (analysis.components.length > 0 || analysis.smells.length > 0) {
+        fileAnalyses.push(analysis);
+      }
+    } catch (error) {
+      // Skip files that can't be parsed
+      console.warn(`Warning: Could not parse ${file}: ${(error as Error).message}`);
+    }
+  }
+
+  // Calculate summary and score
+  const summary = calculateSummary(fileAnalyses);
+  const debtScore = calculateTechnicalDebtScore(fileAnalyses, summary);
+
+  return {
+    files: fileAnalyses,
+    summary,
+    debtScore,
+  };
+}
+
+function analyzeFile(parseResult: ParseResult, filePath: string, config: DetectorConfig): FileAnalysis {
+  const { components, imports, sourceCode } = parseResult;
+  const smells: CodeSmell[] = [];
+  const componentInfos: ComponentInfo[] = [];
+
+  // Run all detectors on each component
+  components.forEach(component => {
+    // Collect component info
+    componentInfos.push({
+      name: component.name,
+      file: filePath,
+      startLine: component.startLine,
+      endLine: component.endLine,
+      lineCount: component.endLine - component.startLine + 1,
+      useEffectCount: component.hooks.useEffect.length,
+      useStateCount: component.hooks.useState.length,
+      useMemoCount: component.hooks.useMemo.length,
+      useCallbackCount: component.hooks.useCallback.length,
+      propsCount: component.props.length,
+      propsDrillingDepth: 0, // Calculated separately
+      hasExpensiveCalculation: false, // Will be set by memoization detector
+    });
+
+    // Run detectors
+    smells.push(...detectUseEffectOveruse(component, filePath, sourceCode, config));
+    smells.push(...detectPropDrilling(component, filePath, sourceCode, config));
+    smells.push(...detectLargeComponent(component, filePath, sourceCode, config));
+    smells.push(...detectUnmemoizedCalculations(component, filePath, sourceCode, config));
+  });
+
+  // Run cross-component analysis
+  smells.push(...analyzePropDrillingDepth(components, filePath, sourceCode, config));
+
+  return {
+    file: filePath,
+    components: componentInfos,
+    smells,
+    imports,
+  };
+}
+
+function calculateSummary(files: FileAnalysis[]): AnalysisSummary {
+  const smellsByType: Record<SmellType, number> = {
+    'useEffect-overuse': 0,
+    'prop-drilling': 0,
+    'large-component': 0,
+    'unmemoized-calculation': 0,
+    'missing-dependency': 0,
+    'state-in-loop': 0,
+    'inline-function-prop': 0,
+    'deep-nesting': 0,
+  };
+
+  const smellsBySeverity: Record<SmellSeverity, number> = {
+    error: 0,
+    warning: 0,
+    info: 0,
+  };
+
+  let totalSmells = 0;
+  let totalComponents = 0;
+
+  files.forEach(file => {
+    totalComponents += file.components.length;
+    file.smells.forEach(smell => {
+      totalSmells++;
+      smellsByType[smell.type]++;
+      smellsBySeverity[smell.severity]++;
+    });
+  });
+
+  return {
+    totalFiles: files.length,
+    totalComponents,
+    totalSmells,
+    smellsByType,
+    smellsBySeverity,
+  };
+}
+
+function calculateTechnicalDebtScore(files: FileAnalysis[], summary: AnalysisSummary): TechnicalDebtScore {
+  // Calculate individual scores (0-100, higher is better)
+  
+  // useEffect score: penalize based on useEffect-related issues
+  const useEffectIssues = summary.smellsByType['useEffect-overuse'];
+  const useEffectScore = Math.max(0, 100 - useEffectIssues * 15);
+
+  // Prop drilling score
+  const propDrillingIssues = summary.smellsByType['prop-drilling'];
+  const propDrillingScore = Math.max(0, 100 - propDrillingIssues * 12);
+
+  // Component size score
+  const sizeIssues = summary.smellsByType['large-component'] + summary.smellsByType['deep-nesting'];
+  const componentSizeScore = Math.max(0, 100 - sizeIssues * 10);
+
+  // Memoization score
+  const memoIssues = summary.smellsByType['unmemoized-calculation'] + summary.smellsByType['inline-function-prop'];
+  const memoizationScore = Math.max(0, 100 - memoIssues * 8);
+
+  // Overall score (weighted average)
+  const score = Math.round(
+    useEffectScore * 0.3 +
+    propDrillingScore * 0.25 +
+    componentSizeScore * 0.25 +
+    memoizationScore * 0.2
+  );
+
+  // Determine grade
+  let grade: 'A' | 'B' | 'C' | 'D' | 'F';
+  if (score >= 90) grade = 'A';
+  else if (score >= 80) grade = 'B';
+  else if (score >= 70) grade = 'C';
+  else if (score >= 60) grade = 'D';
+  else grade = 'F';
+
+  // Estimate refactor time
+  const errorCount = summary.smellsBySeverity.error;
+  const warningCount = summary.smellsBySeverity.warning;
+  const totalIssues = errorCount * 30 + warningCount * 15; // minutes
+  
+  let estimatedRefactorTime: string;
+  if (totalIssues < 30) estimatedRefactorTime = '< 30 minutes';
+  else if (totalIssues < 60) estimatedRefactorTime = '30 min - 1 hour';
+  else if (totalIssues < 120) estimatedRefactorTime = '1-2 hours';
+  else if (totalIssues < 240) estimatedRefactorTime = '2-4 hours';
+  else if (totalIssues < 480) estimatedRefactorTime = '4-8 hours';
+  else estimatedRefactorTime = '> 1 day';
+
+  return {
+    score,
+    grade,
+    breakdown: {
+      useEffectScore,
+      propDrillingScore,
+      componentSizeScore,
+      memoizationScore,
+    },
+    estimatedRefactorTime,
+  };
+}
+
+export { DEFAULT_CONFIG, DetectorConfig } from './types/index.js';

package/src/cli.ts

@@ -0,0 +1,125 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander';
+import chalk from 'chalk';
+import ora from 'ora';
+import path from 'path';
+import { analyzeProject, DEFAULT_CONFIG } from './analyzer.js';
+import { reportResults } from './reporter.js';
+import fs from 'fs/promises';
+
+const program = new Command();
+
+program
+  .name('react-smell')
+  .description('Detect code smells in React projects')
+  .version('1.0.0')
+  .argument('[directory]', 'Directory to analyze', '.')
+  .option('-f, --format <format>', 'Output format: console, json, markdown', 'console')
+  .option('-s, --snippets', 'Show code snippets in output', false)
+  .option('-c, --config <file>', 'Path to config file')
+  .option('--max-effects <number>', 'Max useEffects per component', parseInt)
+  .option('--max-props <number>', 'Max props before warning', parseInt)
+  .option('--max-lines <number>', 'Max lines per component', parseInt)
+  .option('--include <patterns>', 'Glob patterns to include (comma-separated)')
+  .option('--exclude <patterns>', 'Glob patterns to exclude (comma-separated)')
+  .option('-o, --output <file>', 'Write output to file')
+  .action(async (directory, options) => {
+    const rootDir = path.resolve(process.cwd(), directory);
+    
+    // Check if directory exists
+    try {
+      await fs.access(rootDir);
+    } catch {
+      console.error(chalk.red(`Error: Directory "${rootDir}" does not exist.`));
+      process.exit(1);
+    }
+
+    const spinner = ora('Analyzing React project...').start();
+
+    try {
+      // Load config file if specified
+      let fileConfig = {};
+      if (options.config) {
+        try {
+          const configPath = path.resolve(process.cwd(), options.config);
+          const configContent = await fs.readFile(configPath, 'utf-8');
+          fileConfig = JSON.parse(configContent);
+        } catch (error) {
+          spinner.fail(`Could not load config file: ${(error as Error).message}`);
+          process.exit(1);
+        }
+      }
+
+      // Build config from options
+      const config = {
+        ...DEFAULT_CONFIG,
+        ...fileConfig,
+        ...(options.maxEffects && { maxUseEffectsPerComponent: options.maxEffects }),
+        ...(options.maxProps && { maxPropsCount: options.maxProps }),
+        ...(options.maxLines && { maxComponentLines: options.maxLines }),
+      };
+
+      const include = options.include?.split(',').map((p: string) => p.trim()) || undefined;
+      const exclude = options.exclude?.split(',').map((p: string) => p.trim()) || undefined;
+
+      const result = await analyzeProject({
+        rootDir,
+        include,
+        exclude,
+        config,
+      });
+
+      spinner.stop();
+
+      const output = reportResults(result, {
+        format: options.format,
+        showCodeSnippets: options.snippets,
+        rootDir,
+      });
+
+      if (options.output) {
+        const outputPath = path.resolve(process.cwd(), options.output);
+        await fs.writeFile(outputPath, output, 'utf-8');
+        console.log(chalk.green(`✓ Report written to ${outputPath}`));
+      } else {
+        console.log(output);
+      }
+
+      // Exit with error code if there are errors
+      if (result.summary.smellsBySeverity.error > 0) {
+        process.exit(1);
+      }
+    } catch (error) {
+      spinner.fail(`Analysis failed: ${(error as Error).message}`);
+      if (process.env.DEBUG) {
+        console.error(error);
+      }
+      process.exit(1);
+    }
+  });
+
+// Init command to create config file
+program
+  .command('init')
+  .description('Create a configuration file')
+  .action(async () => {
+    const configContent = JSON.stringify({
+      maxUseEffectsPerComponent: DEFAULT_CONFIG.maxUseEffectsPerComponent,
+      maxPropDrillingDepth: DEFAULT_CONFIG.maxPropDrillingDepth,
+      maxComponentLines: DEFAULT_CONFIG.maxComponentLines,
+      maxPropsCount: DEFAULT_CONFIG.maxPropsCount,
+    }, null, 2);
+
+    const configPath = path.join(process.cwd(), '.smellrc.json');
+    
+    try {
+      await fs.access(configPath);
+      console.log(chalk.yellow('Config file already exists at .smellrc.json'));
+    } catch {
+      await fs.writeFile(configPath, configContent, 'utf-8');
+      console.log(chalk.green('✓ Created .smellrc.json'));
+    }
+  });
+
+program.parse();

package/src/detectors/index.ts

@@ -0,0 +1,4 @@
+export { detectUseEffectOveruse } from './useEffect.js';
+export { detectPropDrilling, analyzePropDrillingDepth } from './propDrilling.js';
+export { detectLargeComponent } from './largeComponent.js';
+export { detectUnmemoizedCalculations } from './memoization.js';