COMPONENT: Progress Bar Component

[nayan458]

Task: Progress Bar Component

Type: Component
Milestone: M0.5 — Shared Component Library
Estimate: S

Component Type

• Design system (no API calls, pure props)

Props Interface

interface ProgressBarProps {
  value:      number;         // 0–1 float (matches aiConfidenceScore)
  variant?:   'auto' | 'danger' | 'warning' | 'success' | 'info';
  size?:      'xs' | 'sm' | 'md';
  label?:     string;
  showValue?: boolean;        // display formatted value beside bar
  animated?:  boolean;        // shimmer animation while loading
  className?: string;
}

Variants / States

Variant	Trigger	Color
auto	Derives color from value — maps to your AI score thresholds	≥0.85 danger, 0.60–0.85 warning, <0.60 success
danger	Forced red regardless of value
warning	Forced amber
success	Forced green
info	Forced blue	Analytics charts
animated	Indeterminate shimmer while AI is processing

Acceptance Criteria

• variant="auto" applies exact thresholds from AIModerator.java (0.85 / 0.60)
• Width transition is smooth (transition: width 0.3s ease)
• showValue displays (value * 100).toFixed(0) + '%' or raw float for scores
• animated shows indeterminate shimmer — no value prop needed in this mode
• xs size (4px height) used in collapsed ReportCard score bar
• Zero hardcoded hex values
• Storybook stories: auto-variant at 0.90 / 0.70 / 0.40, forced variants, animated

Notes

• This replaces the inline score bar div currently in the HTML prototypes — all score bars across the app use this component