Console UI Component Development

When to Use

Use this when building new UI components or modifying existing ones in /console/src. Covers component planning, implementation with React/TypeScript, testing, and linting.

Process

1. Component Specification & Planning

• Props interface: required, optional with defaults, event handlers, children
• Component behavior: state management, user interactions, accessibility, responsive design
• Styling approach: reuse existing UI components from /ui, design tokens, theme patterns
• Children components: sub-components, shared utilities, custom hooks for complex logic

2. Implementation

• React functional component with TypeScript. React Hooks only (no class components)
• Prefer useMemo, useCallback where re-renders matter
• Full documentation comments on every new/modified function
• API hooks: use use<ControllerName><FunctionName> pattern from queries.ts
• Component placement:
  • Common: /components/common
  • UI primitives: /components/ui
  • Feature-specific: /components/[feature-name]
  • Page-specific: /pages/[page-name]/components
• Accessibility: proper ARIA attributes and keyboard navigation (WCAG)
• Styling: use existing design system and CSS variables

For complex components, first review similar existing components to ensure consistency.

3. Testing (Recommended)

• Create *.test.tsx in same directory as component
• Cover: render with required props, optional props, user interactions, conditional rendering, accessibility
• Mock external dependencies (API calls, context providers)
• Use React Testing Library

4. Linting

cd console && npx eslint src/components/[your-component-file].tsx

Zero errors, zero warnings.

5. Completion Summary

• What was added or changed
• Files modified
• Tests pass and lint is clean
• Status: Ready for review