Relevant source files

The following files were used as context for generating this wiki page: - [lexwebapp/UI_KIT_GUIDE.md](https://github.com/overthelex/secondlayer/blob/main/lexwebapp/UI_KIT_GUIDE.md) - [lexwebapp/src/constants/design-tokens.ts](https://github.com/overthelex/secondlayer/blob/main/lexwebapp/src/constants/design-tokens.ts) - [lexwebapp/PHASE5_SUMMARY.md](https://github.com/overthelex/secondlayer/blob/main/lexwebapp/PHASE5_SUMMARY.md) - [lexwebapp/COMPLETE_REFACTORING_SUMMARY.md](https://github.com/overthelex/secondlayer/blob/main/lexwebapp/COMPLETE_REFACTORING_SUMMARY.md) - [lexwebapp/src/components/Message.tsx](https://github.com/overthelex/secondlayer/blob/main/lexwebapp/src/components/Message.tsx) - [lexwebapp/DEPLOYMENT_STATUS.md](https://github.com/overthelex/secondlayer/blob/main/lexwebapp/DEPLOYMENT_STATUS.md)

# UI Kit & Components The UI Kit & Components system within the `secondlayer` project is a comprehensive, reusable design system implemented during Phase 5 of the frontend refactoring. It replaces legacy, hardcoded Tailwind styles with a structured library of accessible, type-safe components. The system is designed to ensure visual consistency across the legal tech platform, supporting complex features such as legal document analysis, court case searching, and real-time AI chat interactions. The architecture is built upon a foundation of centralized design tokens, a variants-based component system, and strict adherence to WCAG 2.1 AA accessibility standards. This modular approach allows for rapid development of professional interfaces while significantly reducing code duplication and maintenance overhead. Sources: [lexwebapp/PHASE5_SUMMARY.md:10-20](), [lexwebapp/COMPLETE_REFACTORING_SUMMARY.md:120-135]() ## Design Tokens The project utilizes a centralized design system located in `lexwebapp/src/constants/design-tokens.ts`. These tokens define the visual language of the application, including color palettes, spacing scales, typography, and shadows. ### Core Token Categories | Category | Description | Examples | | :--- | :--- | :--- | | **Colors** | Semantic and palette-based colors. | `primary[500]`, `claude.accent`, `success.DEFAULT` | | **Spacing** | An 8px-based scaling system. | `spacing[4]` (16px), `spacing[8]` (32px) | | **Typography** | Font families, sizes, and weights. | `fontSize.lg` (18px), `fontWeight.semibold` (600) | | **Shadows** | Layering and elevation tokens. | `shadows.md`, `shadows.lg` | | **Breakpoints** | Responsive design thresholds. | `sm`, `md`, `lg`, `xl` | Sources: [lexwebapp/UI_KIT_GUIDE.md:11-30](), [lexwebapp/PHASE5_SUMMARY.md:38-51]() ## Component Architecture The UI library follows a variants-and-sizes pattern, allowing developers to customize component appearance through standardized props rather than arbitrary CSS classes. ```mermaid graph TD DT[Design Tokens] --> Base[Base UI Components] Base --> Button[Button] Base --> Input[Input] Base --> Card[Card] Base --> Modal[Modal] Base --> Specialized[Specialized Components] Specialized --> Msg[Message Component] Specialized --> Steps[ThinkingSteps] Specialized --> Analytics[AnalyticsBlock] ``` The diagram above illustrates how low-level design tokens inform base UI components, which are subsequently composed into complex, feature-specific specialized components. Sources: [lexwebapp/PHASE5_SUMMARY.md:125-150](), [lexwebapp/src/components/Message.tsx]() ### Base UI Components The library provides eight core components exported from `src/components/ui/`: 1. **Button**: Supports 5 variants (primary, secondary, outline, ghost, danger) and 3 sizes. Includes built-in loading spinners and icon support. 2. **Input**: Offers 3 variants (default, filled, flushed) with support for labels, helper texts, and error states. 3. **Card**: Uses a composition pattern (`CardHeader`, `CardBody`, `CardFooter`) with elevated and outlined variants. 4. **Modal**: Features 5 sizes, focus trapping, and Framer Motion animations for entry/exit. 5. **Badge**: Semantic status indicators (success, error, warning, info) with optional dot indicators. 6. **Checkbox & Switch**: Accessible form controls with custom styling and smooth animations. 7. **Spinner**: A flexible loading indicator with 4 sizes and 3 color themes. Sources: [lexwebapp/UI_KIT_GUIDE.md:37-180](), [lexwebapp/PHASE5_SUMMARY.md:54-120]() ## Specialized Legal Components Beyond the base UI kit, the project implements specialized components tailored for AI-driven legal analysis, primarily found within the `Message` system. ### The Message Component The `Message` component handles the rendering of both user queries and assistant responses. It is highly sophisticated, managing Markdown formatting, legal code highlighting, and complex nested data structures. - **Legal Code Highlighting**: Automatically detects and styles references to Ukrainian legal codes (e.g., ЦКУ, ГКУ, КПК). - **ThinkingSteps**: An expandable component that displays the AI's reasoning chain progressively. - **DecisionCard**: Displays relevant court cases with relevance percentages and legal status badges. - **AnalyticsBlock**: Renders statistical data regarding case outcomes (Satisfied/Rejected/Partial) with trending indicators. Sources: [lexwebapp/src/components/Message.tsx:1-120](), [lexwebapp/DEPLOYMENT_STATUS.md:10-40]() ### AI Response Data Flow ```mermaid sequenceDiagram participant API as MCP Backend participant Srv as LegalService participant Store as ChatStore participant UI as Message Component API->>Srv: Raw JSON Response Note right of Srv: Parse reasoning_chain & precedent_chunks Srv->>Store: Typed Message Object Store->>UI: Render Component UI->>UI: Highlight Legal Codes UI->>UI: Detect Raw JSON Fallback ``` The sequence diagram shows how raw JSON data from the MCP backend is transformed by the `LegalService` into a typed `Message` model, which is then rendered by the `Message` component with specialized formatting. Sources: [lexwebapp/PHASE3_SUMMARY.md:50-100](), [lexwebapp/src/components/Message.tsx:48-75]() ## Accessibility and Standards All components are engineered to comply with **WCAG 2.1 AA** standards. Key accessibility features include: - **Keyboard Navigation**: Full support for Tab navigation, Enter/Space activation, and Escape key for closing modals. - **Focus Management**: Visible focus rings and focus traps within modal windows to prevent users from tabbing into background content. - **Screen Reader Support**: Extensive use of ARIA labels, role attributes, and semantic HTML for state and error announcements. - **Color Contrast**: All semantic color combinations maintain at least a 4.5:1 contrast ratio for normal text. Sources: [lexwebapp/PHASE5_SUMMARY.md:200-220](), [lexwebapp/UI_KIT_GUIDE.md:325-335]() ## Usage Example: Composition The system encourages composition where multiple UI components work together to form complex features. ```tsx import { Card, CardHeader, CardBody, Input, Button } from '../components/ui'; // Example of a login form using UI Kit components function LoginForm() { return (

Login

); } ``` Sources: [lexwebapp/PHASE5_SUMMARY.md:250-265](), [lexwebapp/UI_KIT_GUIDE.md:210-240]() ## Summary The UI Kit & Components module provides a production-ready design system that ensures the `secondlayer` platform remains visually consistent, technically scalable, and fully accessible. By centralizing design tokens and standardizing component behaviors, the project achieved a 90%+ reduction in lines of code within primary pages like `ChatPage`, while simultaneously improving the developer experience through comprehensive TypeScript coverage and professional-grade UI elements. Sources: [lexwebapp/COMPLETE_REFACTORING_SUMMARY.md:15-30](), [lexwebapp/PHASE5_SUMMARY.md:350-370]()