initial commit

docs/architecture/6-components-architecture.md

@@ -0,0 +1,65 @@
+# 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
+
+---