Santhosh Janardhanan
3e36ea8888
- Update decision-log with UI layout decisions (Feb 18, 2026) - Update architecture with frontend layout patterns - Update config.yaml with TDD, documentation, UI standards rules - Create p00-api-documentation change (Scribe annotations) - Create p01-ui-foundation change (types, stores, Lucide) - Create p02-app-layout change (AppLayout, Sidebar, TopBar) - Create p03-dashboard-enhancement change (PageHeader, StatCard) - Create p04-content-patterns change (DataTable, FilterBar) - Create p05-page-migrations change (page migrations) - Fix E2E auth tests (11/11 passing) - Add JWT expiry validation to dashboard guard
80 lines
2.9 KiB
Markdown
80 lines
2.9 KiB
Markdown
# Tasks: Content Patterns
|
|
|
|
## Phase 1: LoadingState Component
|
|
|
|
- [ ] 4.1 Create `src/lib/components/common/LoadingState.svelte`
|
|
- [ ] 4.2 Add type prop ('table' | 'card' | 'text' | 'list')
|
|
- [ ] 4.3 Add rows prop for table/list count
|
|
- [ ] 4.4 Add columns prop for table columns
|
|
- [ ] 4.5 Implement table skeleton
|
|
- [ ] 4.6 Implement card skeleton
|
|
- [ ] 4.7 Implement list skeleton
|
|
- [ ] 4.8 Implement text skeleton
|
|
- [ ] 4.9 Write component test: renders each type
|
|
|
|
## Phase 2: EmptyState Component
|
|
|
|
- [ ] 4.10 Create `src/lib/components/common/EmptyState.svelte`
|
|
- [ ] 4.11 Add title prop (default: "No data")
|
|
- [ ] 4.12 Add description prop
|
|
- [ ] 4.13 Add icon prop (default: Inbox)
|
|
- [ ] 4.14 Add children snippet for action button
|
|
- [ ] 4.15 Style with centered layout
|
|
- [ ] 4.16 Write component test: renders with defaults
|
|
- [ ] 4.17 Write component test: renders with custom icon
|
|
- [ ] 4.18 Write component test: renders action button
|
|
|
|
## Phase 3: FilterBar Component
|
|
|
|
- [ ] 4.19 Create `src/lib/components/common/FilterBar.svelte`
|
|
- [ ] 4.20 Add search input with value binding
|
|
- [ ] 4.21 Add searchPlaceholder prop
|
|
- [ ] 4.22 Add onSearchChange callback
|
|
- [ ] 4.23 Add onClear callback
|
|
- [ ] 4.24 Add children snippet for custom filters
|
|
- [ ] 4.25 Add Clear button (shows when filters active)
|
|
- [ ] 4.26 Style with DaisyUI join component
|
|
- [ ] 4.27 Write component test: search input works
|
|
- [ ] 4.28 Write component test: clear button works
|
|
|
|
## Phase 4: DataTable Component
|
|
|
|
- [ ] 4.29 Create `src/lib/components/common/DataTable.svelte`
|
|
- [ ] 4.30 Add generic type for row data
|
|
- [ ] 4.31 Add data prop (array of rows)
|
|
- [ ] 4.32 Add columns prop (ColumnDef array)
|
|
- [ ] 4.33 Integrate @tanstack/svelte-table
|
|
- [ ] 4.34 Add loading prop → show LoadingState
|
|
- [ ] 4.35 Add empty handling → show EmptyState
|
|
- [ ] 4.36 Add sorting support (clickable headers)
|
|
- [ ] 4.37 Add sort indicators (up/down arrows)
|
|
- [ ] 4.38 Add onRowClick callback
|
|
- [ ] 4.39 Add table-zebra class for alternating rows
|
|
- [ ] 4.40 Add table-pin-rows for sticky header
|
|
- [ ] 4.41 Style with DaisyUI table classes
|
|
- [ ] 4.42 Write component test: renders data
|
|
- [ ] 4.43 Write component test: shows loading state
|
|
- [ ] 4.44 Write component test: shows empty state
|
|
- [ ] 4.45 Write component test: sorting works
|
|
|
|
## Phase 5: Index Export
|
|
|
|
- [ ] 4.46 Create `src/lib/components/common/index.ts`
|
|
- [ ] 4.47 Export all common components
|
|
|
|
## Phase 6: Verification
|
|
|
|
- [ ] 4.48 Run `npm run check` - no type errors
|
|
- [ ] 4.49 Run `npm run test:unit` - all tests pass
|
|
- [ ] 4.50 Manual test: DataTable with real data
|
|
- [ ] 4.51 Manual test: FilterBar with search
|
|
|
|
## Commits
|
|
|
|
1. `feat(ui): Create LoadingState component with skeleton patterns`
|
|
2. `feat(ui): Create EmptyState component`
|
|
3. `feat(ui): Create FilterBar component for search and filters`
|
|
4. `feat(ui): Create DataTable component with TanStack integration`
|
|
5. `feat(ui): Create common components index export`
|
|
6. `test(ui): Add tests for all common components`
|