@aiready/components 0.13.18 → 0.13.20

package/src/data-display/__tests__/ScoreBar.test.tsx

@@ -0,0 +1,215 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ScoreBar, ScoreCard } from '../ScoreBar';
+
+// Mock the @aiready/core/client module
+vi.mock('@aiready/core/client', async (importOriginal) => {
+  const actual = (await importOriginal()) as any;
+  return {
+    ...actual,
+    getRating: vi.fn((score: number) => {
+      if (score >= 80) return 'Excellent';
+      if (score >= 60) return 'Good';
+      if (score >= 40) return 'Fair';
+      if (score >= 20) return 'Needs Work';
+      return 'Critical';
+    }),
+  };
+});
+
+describe('ScoreBar', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('rendering', () => {
+    it('should render with default props', () => {
+      render(<ScoreBar score={75} label="Test Score" />);
+
+      expect(screen.getByText('Test Score')).toBeInTheDocument();
+      expect(screen.getByText('75/100')).toBeInTheDocument();
+    });
+
+    it('should render without score when showScore is false', () => {
+      render(<ScoreBar score={75} label="Test Score" showScore={false} />);
+
+      expect(screen.getByText('Test Score')).toBeInTheDocument();
+      expect(screen.queryByText('75/100')).not.toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      const { container } = render(
+        <ScoreBar score={75} label="Test Score" className="custom-class" />
+      );
+
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+
+    it('should render with different sizes', () => {
+      const { container, rerender } = render(
+        <ScoreBar score={75} label="Test Score" size="sm" />
+      );
+
+      // Small size should have h-1.5 for the bar
+      expect(container.querySelector('.bg-slate-200')).toHaveClass('h-1.5');
+
+      rerender(<ScoreBar score={75} label="Test Score" size="lg" />);
+      expect(container.querySelector('.bg-slate-200')).toHaveClass('h-3');
+    });
+  });
+
+  describe('score prop', () => {
+    it('should handle score of 0', () => {
+      const { container } = render(<ScoreBar score={0} label="Zero Score" />);
+
+      expect(screen.getByText('0/100')).toBeInTheDocument();
+      // Should show critical rating (red)
+      expect(container.querySelector('.bg-red-500')).toBeInTheDocument();
+    });
+
+    it('should handle perfect score of 100', () => {
+      const { container } = render(
+        <ScoreBar score={100} label="Perfect Score" />
+      );
+
+      expect(screen.getByText('100/100')).toBeInTheDocument();
+      // Should show excellent rating (green)
+      expect(container.querySelector('.bg-green-500')).toBeInTheDocument();
+    });
+
+    it('should handle custom maxScore', () => {
+      const { container } = render(
+        <ScoreBar score={150} maxScore={200} label="Custom Max" />
+      );
+
+      expect(screen.getByText('150/200')).toBeInTheDocument();
+      // 150/200 = 75% which should be good (emerald)
+      expect(container.querySelector('.bg-emerald-500')).toBeInTheDocument();
+    });
+
+    it('should clamp bar width to 0-100% range', () => {
+      const { container, rerender } = render(
+        <ScoreBar score={-10} label="Negative Score" />
+      );
+
+      // The bar width should be clamped to 0%
+      const barElement = container.querySelector('[style*="width"]');
+      expect(barElement).toHaveStyle('width: 0%');
+
+      rerender(<ScoreBar score={150} label="Over Max" />);
+      // The bar width should be clamped to 100%
+      expect(barElement).toHaveStyle('width: 100%');
+    });
+  });
+
+  describe('label display', () => {
+    it('should render the provided label', () => {
+      render(<ScoreBar score={75} label="Custom Label" />);
+
+      expect(screen.getByText('Custom Label')).toBeInTheDocument();
+    });
+
+    it('should display label in correct size based on size prop', () => {
+      const { rerender } = render(
+        <ScoreBar score={75} label="Test" size="sm" />
+      );
+
+      expect(screen.getByText('Test')).toHaveClass('text-xs');
+
+      rerender(<ScoreBar score={75} label="Test" size="lg" />);
+      expect(screen.getByText('Test')).toHaveClass('text-base');
+    });
+  });
+
+  describe('color based on score', () => {
+    it('should show green color for excellent scores (>=80)', () => {
+      const { container } = render(<ScoreBar score={85} label="Excellent" />);
+
+      // Check for green-500 background class
+      expect(container.querySelector('.bg-green-500')).toBeInTheDocument();
+    });
+
+    it('should show emerald color for good scores (>=60)', () => {
+      const { container } = render(<ScoreBar score={70} label="Good" />);
+
+      // Check for emerald-500 background class
+      expect(container.querySelector('.bg-emerald-500')).toBeInTheDocument();
+    });
+
+    it('should show amber color for fair scores (>=40)', () => {
+      const { container } = render(<ScoreBar score={50} label="Fair" />);
+
+      // Check for amber-500 background class
+      expect(container.querySelector('.bg-amber-500')).toBeInTheDocument();
+    });
+
+    it('should show orange color for needs-work scores (>=20)', () => {
+      const { container } = render(<ScoreBar score={30} label="Needs Work" />);
+
+      // Check for orange-500 background class
+      expect(container.querySelector('.bg-orange-500')).toBeInTheDocument();
+    });
+
+    it('should show red color for critical scores (<20)', () => {
+      const { container } = render(<ScoreBar score={10} label="Critical" />);
+
+      // Check for red-500 background class
+      expect(container.querySelector('.bg-red-500')).toBeInTheDocument();
+    });
+  });
+
+  describe('accessibility', () => {
+    it('should have proper ARIA structure', () => {
+      render(<ScoreBar score={75} label="Accessibility Test" />);
+
+      // The component should have proper div structure for screen readers
+      // The label and score should be visible to screen readers
+      expect(screen.getByText('Accessibility Test')).toBeInTheDocument();
+      expect(screen.getByText('75/100')).toBeInTheDocument();
+    });
+  });
+});
+
+describe('ScoreCard', () => {
+  it('should render with score and rating', () => {
+    render(<ScoreCard score={85} title="Test Card" />);
+
+    expect(screen.getByText('85/100')).toBeInTheDocument();
+    expect(screen.getByText('Excellent Rating')).toBeInTheDocument();
+    expect(screen.getByText('Test Card')).toBeInTheDocument();
+  });
+
+  it('should render breakdown when provided', () => {
+    const breakdown = [
+      { label: 'Security', score: 90 },
+      { label: 'Performance', score: 80 },
+    ];
+
+    render(<ScoreCard score={85} breakdown={breakdown} />);
+
+    expect(screen.getByText('Security')).toBeInTheDocument();
+    expect(screen.getByText('Performance')).toBeInTheDocument();
+    expect(screen.getByText('90/100')).toBeInTheDocument();
+    expect(screen.getByText('80/100')).toBeInTheDocument();
+  });
+
+  it('should calculate and display formula when breakdown has weights', () => {
+    const breakdown = [
+      { label: 'Security', score: 90, weight: 2 },
+      { label: 'Performance', score: 80, weight: 1 },
+    ];
+
+    render(<ScoreCard score={87} breakdown={breakdown} />);
+
+    // Formula: 90×2 + 80×1 / 100 = 87
+    expect(screen.getByText('90×2 + 80×1 / 100 = 87')).toBeInTheDocument();
+  });
+
+  it('should apply custom className', () => {
+    const { container } = render(
+      <ScoreCard score={75} className="custom-class" />
+    );
+
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+});

package/src/index.ts

@@ -114,4 +114,7 @@ export {
   type ForceDirectedGraphHandle,
   type LayoutType,
 } from './charts/ForceDirectedGraph';
-export { GraphControls, type GraphControlsProps } from './charts/GraphControls';
+export {
+  GraphControls,
+  type GraphControlsProps,
+} from './charts/force-directed/GraphControls';

package/src/utils/__tests__/score.test.ts

@@ -1,28 +1,49 @@
 import { describe, it, expect } from 'vitest';
-import { scoreColor, scoreBg, scoreLabel, getScoreRating } from '../score';
+import {
+  scoreColor,
+  scoreBg,
+  scoreLabel,
+  getScoreRating,
+  scoreGlow,
+} from '../score';
 
 describe('Score Utilities', () => {
   it('should return correct color for scores', () => {
+    expect(scoreColor(95)).toBe('text-emerald-400');
     expect(scoreColor(80)).toBe('text-emerald-400');
-    expect(scoreColor(60)).toBe('text-amber-400');
-    expect(scoreColor(30)).toBe('text-red-400');
+    expect(scoreColor(65)).toBe('text-amber-400');
+    expect(scoreColor(45)).toBe('text-red-400');
+    expect(scoreColor(20)).toBe('text-red-400');
     expect(scoreColor(null)).toBe('text-slate-400');
   });
 
   it('should return correct background for scores', () => {
+    expect(scoreBg(95)).toContain('emerald');
     expect(scoreBg(80)).toContain('emerald');
-    expect(scoreBg(60)).toContain('amber');
-    expect(scoreBg(30)).toContain('red');
+    expect(scoreBg(65)).toContain('amber');
+    expect(scoreBg(45)).toContain('red');
+    expect(scoreBg(20)).toContain('red');
     expect(scoreBg(null)).toContain('slate');
   });
 
   it('should return correct labels', () => {
+    expect(scoreLabel(95)).toBe('Excellent');
     expect(scoreLabel(80)).toBe('AI-Ready');
-    expect(scoreLabel(60)).toBe('Needs Improvement');
-    expect(scoreLabel(30)).toBe('Critical Issues');
+    expect(scoreLabel(65)).toBe('Fair');
+    expect(scoreLabel(45)).toBe('Needs Improvement');
+    expect(scoreLabel(20)).toBe('Critical Issues');
     expect(scoreLabel(null)).toBe('Not analyzed');
   });
 
+  it('should return correct glow for scores', () => {
+    expect(scoreGlow(95)).toContain('emerald');
+    expect(scoreGlow(80)).toContain('emerald');
+    expect(scoreGlow(65)).toContain('amber');
+    expect(scoreGlow(45)).toContain('red');
+    expect(scoreGlow(20)).toContain('red');
+    expect(scoreGlow(null)).toBe('');
+  });
+
   it('should return correct rating strings', () => {
     expect(getScoreRating(95)).toBe('excellent');
     expect(getScoreRating(80)).toBe('good');

package/src/utils/score.ts

@@ -1,57 +1,95 @@
+import { getRatingSlug } from '@aiready/core/client';
+
+type RatingSlug = 'excellent' | 'good' | 'fair' | 'needs-work' | 'critical';
+
+interface ScoreMetadata {
+  color: string;
+  bg: string;
+  label: string;
+  glow: string;
+}
+
+const SCORE_METADATA: Record<RatingSlug, ScoreMetadata> = {
+  excellent: {
+    color: 'text-emerald-400',
+    bg: 'bg-emerald-900/30 border-emerald-500/30',
+    label: 'Excellent',
+    glow: 'shadow-emerald-500/20',
+  },
+  good: {
+    color: 'text-emerald-400',
+    bg: 'bg-emerald-900/30 border-emerald-500/30',
+    label: 'AI-Ready',
+    glow: 'shadow-emerald-500/20',
+  },
+  fair: {
+    color: 'text-amber-400',
+    bg: 'bg-amber-900/30 border-amber-500/30',
+    label: 'Fair',
+    glow: 'shadow-amber-500/20',
+  },
+  'needs-work': {
+    color: 'text-red-400',
+    bg: 'bg-red-900/30 border-red-500/30',
+    label: 'Needs Improvement',
+    glow: 'shadow-red-500/20',
+  },
+  critical: {
+    color: 'text-red-400',
+    bg: 'bg-red-900/30 border-red-500/30',
+    label: 'Critical Issues',
+    glow: 'shadow-red-500/20',
+  },
+};
+
+const DEFAULT_METADATA: ScoreMetadata = {
+  color: 'text-slate-400',
+  bg: 'bg-slate-800/50 border-slate-700',
+  label: 'Not analyzed',
+  glow: '',
+};
+
 /**
- * Score utility functions for AI readiness scoring
- * Provides color, background, glow, and label helpers for score display
+ * Get the metadata for a score using core rating system
  */
+function getMetadata(score: number | null | undefined): ScoreMetadata {
+  if (score == null) return DEFAULT_METADATA;
+  const rating = getRatingSlug(score) as RatingSlug;
+  return SCORE_METADATA[rating] || SCORE_METADATA.critical;
+}
 
 /**
- * Get the Tailwind color class for a score
+ * Get the Tailwind color class for a score using core rating system
  */
 export function scoreColor(score: number | null | undefined): string {
-  if (score == null) return 'text-slate-400';
-  if (score >= 75) return 'text-emerald-400';
-  if (score >= 50) return 'text-amber-400';
-  return 'text-red-400';
+  return getMetadata(score).color;
 }
 
 /**
- * Get the Tailwind background/border class for a score
+ * Get the Tailwind background/border class for a score using core rating system
  */
 export function scoreBg(score: number | null | undefined): string {
-  if (score == null) return 'bg-slate-800/50 border-slate-700';
-  if (score >= 75) return 'bg-emerald-900/30 border-emerald-500/30';
-  if (score >= 50) return 'bg-amber-900/30 border-amber-500/30';
-  return 'bg-red-900/30 border-red-500/30';
+  return getMetadata(score).bg;
 }
 
 /**
- * Get the display label for a score
+ * Get the display label for a score using core rating system
  */
 export function scoreLabel(score: number | null | undefined): string {
-  if (score == null) return 'Not analyzed';
-  if (score >= 75) return 'AI-Ready';
-  if (score >= 50) return 'Needs Improvement';
-  return 'Critical Issues';
+  return getMetadata(score).label;
 }
 
 /**
- * Get the Tailwind shadow glow class for a score
+ * Get the Tailwind shadow glow class for a score using core rating system
  */
 export function scoreGlow(score: number | null | undefined): string {
-  if (score == null) return '';
-  if (score >= 75) return 'shadow-emerald-500/20';
-  if (score >= 50) return 'shadow-amber-500/20';
-  return 'shadow-red-500/20';
+  return getMetadata(score).glow;
 }
 
-import { getRatingSlug } from '@aiready/core/client';
-
 /**
  * Get rating from score (for use with ScoreBar component)
  */
-export function getScoreRating(
-  score: number | null | undefined
-): 'excellent' | 'good' | 'fair' | 'needs-work' | 'critical' {
+export function getScoreRating(score: number | null | undefined): RatingSlug {
   if (score == null) return 'critical';
-  // Use core implementation to resolve duplication
-  return getRatingSlug(score) as any;
+  return getRatingSlug(score) as RatingSlug;
 }

package/src/charts/types.ts

@@ -1,24 +0,0 @@
-export interface GraphNode {
-  id: string;
-  label?: string;
-  color?: string;
-  size?: number;
-  group?: string;
-  kind?: 'file' | 'package';
-  packageGroup?: string;
-  x?: number;
-  y?: number;
-  fx?: number | null;
-  fy?: number | null;
-}
-
-export interface GraphLink {
-  source: string | GraphNode;
-  target: string | GraphNode;
-  color?: string;
-  width?: number;
-  label?: string;
-  type?: string;
-}
-
-export type LayoutType = 'force' | 'hierarchical' | 'circular';