feat: Create Design System (001-create-design-system)

[renehonig]

Feature: Create Design System

Spec: design-system/specs/001-create-design-system/spec.md Status: Draft

Overview

This PR implements the initial version of the Alkemio Design System within the client-web repository. It establishes the foundation for a consistent, scalable, and AI-ready UI component library based on Atomic Design principles.

Key Changes

1. Infrastructure Setup

• Created directory structure: client-web/src/design-system/{tokens,atoms,molecules,organisms,theme}.
• Configured Storybook 8 for component development and documentation.
• Set up Vitest and Playwright for testing.
• Configured Changesets for versioning.

2. Design Tokens (Atoms)

• Implemented core design tokens for:
  • Palette: Colors extracted from the existing application.
  • Typography: Font families, sizes, and weights.
  • Spacing & Layout: Standardized spacing units and breakpoints.
• Created a centralized MUI Theme configuration (src/design-system/theme/index.ts).

3. Component Library (User Story 1)

Implemented a comprehensive set of components matching the live alkem.io site:

• Atoms: Button, Input, Checkbox, Select, TextArea, Chip/Badge, Alert, Avatar, Spinner.
• Molecules: SearchBar, Card, FormField, Tabs, List, Breadcrumbs, CommentInput.
• Organisms: Header, Footer, Dialog, NavigationBar, PageBanner.

4. AI Integration (User Story 2 & 3)

• Created AI_USAGE.md to guide AI agents in using the design system.
• Added "Intent Mapping" to link user intents (e.g., "primary action") to specific components.
• Verified component exports are clean and AI-friendly.

5. Quality Assurance

• Linting: All code passes ESLint and TypeScript checks.
• Accessibility: Components audited for WCAG 2.1 AA compliance via Storybook a11y addon.
• Visual Regression: Baseline set up with Playwright.

Verification

• Storybook: Run pnpm storybook to view and interact with all components.
• Tests: Run pnpm test for unit tests and pnpm test:e2e for visual regression.

Checklist

• [x] All tasks in tasks.md are completed.
• [x] Code builds and lints cleanly.
• [x] Storybook renders all components without errors.

[coderabbitai[bot]]

[!IMPORTANT]

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment
• [ ] Commit unit tests in branch 001-create-design-system

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}