Epic 2: Core Components

[Vitalisn4]

Issue #8: Build Avatar Component with Group Ring

Labels: epic-2, components, atoms, priority-high
Milestone: Epic 2 - Core Components
Dependencies: #3

Description:
Create a reusable Avatar component that displays initials or images with group-colored ring.

Acceptance Criteria:

• Create Avatar component in src/components/ui/avatar.tsx
• Support image-based avatars (with fallback)
• Support initial-based avatars (auto-generated from name)
• Add group-colored ring (blue for Group A, coral for Group B)
• Support size variants (sm, md, lg, xl)
• Add hover state with tooltip showing full name
• Ensure accessibility (alt text, ARIA labels)
• Write unit tests
• Add Storybook story (if using Storybook)

Technical Notes:

• Use @radix-ui/react-avatar or build custom
• Generate initials from first/last name
• Use CSS for colored ring border

---

Issue #9: Build Badge Variants (Group, Status)

Labels: epic-2, components, atoms, priority-high
Milestone: Epic 2 - Core Components
Dependencies: #3

Description:
Create Badge component with variants for groups (A/B) and status indicators.

Acceptance Criteria:

• Create Badge component using shadcn/ui base
• Implement variants:
  • Group A (blue background, white text)
  • Group B (coral background, white text)
  • Active (green)
  • Inactive (gray)
  • Default (muted)
• Support size variants (sm, md)
• Add icon support (optional)
• Ensure proper contrast ratios (WCAG AA)
• Write unit tests
• Document usage examples

---

Issue #10: Build Button Variants

Labels: epic-2, components, atoms, priority-high
Milestone: Epic 2 - Core Components
Dependencies: #3

Description:
Create comprehensive Button component with all required variants.

Acceptance Criteria:

• Use shadcn/ui Button as base
• Implement variants:
  • Primary (teal background)
  • Secondary (outlined)
  • Ghost (transparent)
  • Destructive (red, for delete actions)
• Support sizes (sm, md, lg)
• Add loading state (spinner + disabled)
• Support icon buttons (icon-only)
• Support icon + text combinations
• Ensure proper disabled states
• Add keyboard navigation support
• Write unit tests

---

Issue #11: Build Input and Search Components

Labels: epic-2, components, atoms, forms, priority-high
Milestone: Epic 2 - Core Components
Dependencies: #3

Description:
Create Input and Search input components with proper styling and validation.

Acceptance Criteria:

• Create Input component using shadcn/ui base
• Support variants (default, error, disabled)
• Add label and error message support
• Create SearchInput component with:
  • Search icon (Lucide)
  • Clear button
  • Debounced onChange (optional)
• Ensure proper focus states
• Add placeholder support
• Support controlled and uncontrolled modes
• Write unit tests
• Add accessibility attributes

---

Issue #12: Build StatCard Component

Labels: epic-2, components, molecules, priority-medium
Milestone: Epic 2 - Core Components
Dependencies: #10

Description:
Create StatCard component for displaying metrics with icons and trend indicators.

Acceptance Criteria:

• Create StatCard component
• Display icon (Lucide icon prop)
• Display label (text)
• Display value (number or string)
• Add optional trend indicator (up/down arrow with percentage)
• Support hover state with subtle animation
• Ensure responsive layout
• Add loading skeleton variant
• Write unit tests

---

Issue #13: Build EmptyState Component

Labels: epic-2, components, molecules, priority-medium
Milestone: Epic 2 - Core Components
Dependencies: #10

Description:
Create EmptyState component for displaying empty data states with CTAs.

Acceptance Criteria:

• Create EmptyState component
• Support illustration/icon (Lucide icon or image)
• Display title and description text
• Add optional CTA button
• Support different variants (no data, error, loading)
• Ensure centered layout
• Add subtle animation on mount
• Write unit tests

---

Issue #14: Build Modal/Dialog Component

Labels: epic-2, components, organisms, priority-high
Milestone: Epic 2 - Core Components
Dependencies: #3, #7

Description:
Enhance Modal component with consistent structure and animations.

Acceptance Criteria:

• Use shadcn/ui Dialog as base
• Create consistent structure (header, body, footer)
• Add smooth open/close animations (scale + fade)
• Implement focus trapping
• Add backdrop click to close (optional prop)
• Support different sizes (sm, md, lg, fullscreen)
• Add loading state overlay
• Ensure keyboard navigation (ESC to close, Tab cycling)
• Write unit tests
• Add accessibility audit

---