66 lines
2.0 KiB
Markdown
66 lines
2.0 KiB
Markdown
# 6. Components Architecture
|
|
|
|
## Component Hierarchy
|
|
|
|
```
|
|
src/components/
|
|
├── ui/ # shadcn/ui primitives
|
|
│ ├── button.tsx
|
|
│ ├── input.tsx
|
|
│ ├── dialog.tsx
|
|
│ ├── table.tsx
|
|
│ ├── select.tsx
|
|
│ ├── checkbox.tsx
|
|
│ ├── tabs.tsx
|
|
│ ├── card.tsx
|
|
│ ├── badge.tsx
|
|
│ ├── progress.tsx
|
|
│ └── ...
|
|
│
|
|
├── layout/ # Layout components
|
|
│ ├── app-shell.tsx # Main layout wrapper
|
|
│ ├── app-sidebar.tsx # Navigation sidebar
|
|
│ └── app-header.tsx # Top header with breadcrumbs
|
|
│
|
|
├── characters/ # Character feature components
|
|
│ ├── character-list.tsx
|
|
│ ├── character-card.tsx
|
|
│ ├── character-form.tsx
|
|
│ ├── character-filters.tsx
|
|
│ └── character-bulk-actions.tsx
|
|
│
|
|
├── accounts/ # Account feature components
|
|
│ ├── account-list.tsx
|
|
│ ├── account-card.tsx
|
|
│ └── account-form.tsx
|
|
│
|
|
├── teams/ # Team feature components
|
|
│ ├── team-list.tsx
|
|
│ ├── team-detail.tsx
|
|
│ ├── team-form.tsx
|
|
│ └── team-member-selector.tsx
|
|
│
|
|
├── progressions/ # Progression feature components
|
|
│ ├── progression-section.tsx
|
|
│ ├── progression-tracker.tsx
|
|
│ └── progression-filters.tsx
|
|
│
|
|
└── shared/ # Shared components
|
|
├── data-table.tsx
|
|
├── search-input.tsx
|
|
├── pagination.tsx
|
|
├── confirmation-modal.tsx
|
|
├── loading-spinner.tsx
|
|
└── error-boundary.tsx
|
|
```
|
|
|
|
## Component Design Principles
|
|
|
|
1. **Composition over inheritance** - Prefer composing smaller components
|
|
2. **Props interface first** - Define TypeScript interfaces for all props
|
|
3. **Controlled components** - Parent manages state when needed
|
|
4. **Accessible by default** - Use semantic HTML, ARIA attributes
|
|
5. **Responsive design** - Mobile-first approach with Tailwind
|
|
|
|
---
|