docs(01-01): complete design primitives plan
- Add 01-01-SUMMARY.md with execution results and self-check - Update STATE.md with position, decisions, and metrics - Update ROADMAP.md with plan progress - Log pre-existing lint errors to deferred-items.md Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,3 +1,19 @@
|
|||||||
|
---
|
||||||
|
gsd_state_version: 1.0
|
||||||
|
milestone: v1.0
|
||||||
|
milestone_name: milestone
|
||||||
|
status: executing
|
||||||
|
stopped_at: Completed 01-01-PLAN.md
|
||||||
|
last_updated: "2026-03-16T11:16:11.810Z"
|
||||||
|
last_activity: 2026-03-16 — Completed 01-01 (Design Primitives)
|
||||||
|
progress:
|
||||||
|
total_phases: 4
|
||||||
|
completed_phases: 0
|
||||||
|
total_plans: 2
|
||||||
|
completed_plans: 1
|
||||||
|
percent: 50
|
||||||
|
---
|
||||||
|
|
||||||
# Project State
|
# Project State
|
||||||
|
|
||||||
## Project Reference
|
## Project Reference
|
||||||
@@ -10,11 +26,11 @@ See: .planning/PROJECT.md (updated 2026-03-16)
|
|||||||
## Current Position
|
## Current Position
|
||||||
|
|
||||||
Phase: 1 of 4 (Design Foundation and Primitives)
|
Phase: 1 of 4 (Design Foundation and Primitives)
|
||||||
Plan: 0 of TBD in current phase
|
Plan: 1 of 2 in current phase
|
||||||
Status: Ready to plan
|
Status: Executing
|
||||||
Last activity: 2026-03-16 — Roadmap created
|
Last activity: 2026-03-16 — Completed 01-01 (Design Primitives)
|
||||||
|
|
||||||
Progress: [░░░░░░░░░░] 0%
|
Progress: [█████░░░░░] 50%
|
||||||
|
|
||||||
## Performance Metrics
|
## Performance Metrics
|
||||||
|
|
||||||
@@ -34,6 +50,7 @@ Progress: [░░░░░░░░░░] 0%
|
|||||||
- Trend: -
|
- Trend: -
|
||||||
|
|
||||||
*Updated after each plan completion*
|
*Updated after each plan completion*
|
||||||
|
| Phase 01 P01 | 3min | 2 tasks | 5 files |
|
||||||
|
|
||||||
## Accumulated Context
|
## Accumulated Context
|
||||||
|
|
||||||
@@ -44,6 +61,8 @@ Recent decisions affecting current work:
|
|||||||
|
|
||||||
- [Roadmap]: 4-phase structure derived from research — foundation before features, dashboard before other pages, charts before collapsibles
|
- [Roadmap]: 4-phase structure derived from research — foundation before features, dashboard before other pages, charts before collapsibles
|
||||||
- [Roadmap]: All research flags set to NO — no `/gsd:research-phase` needed before any phase
|
- [Roadmap]: All research flags set to NO — no `/gsd:research-phase` needed before any phase
|
||||||
|
- [Phase 01]: Applied Recharts v3 initialDimension patch on chart.tsx (shadcn-ui/ui#9892)
|
||||||
|
- [Phase 01]: Category text colors darkened to oklch ~0.55 for WCAG 4.5:1 contrast; chart fills kept lighter at ~0.65-0.70 (two-tier pattern)
|
||||||
|
|
||||||
### Pending Todos
|
### Pending Todos
|
||||||
|
|
||||||
@@ -56,6 +75,6 @@ None yet.
|
|||||||
|
|
||||||
## Session Continuity
|
## Session Continuity
|
||||||
|
|
||||||
Last session: 2026-03-16
|
Last session: 2026-03-16T11:16:11.808Z
|
||||||
Stopped at: Roadmap and state files created, ready for Phase 1 planning
|
Stopped at: Completed 01-01-PLAN.md
|
||||||
Resume file: None
|
Resume file: None
|
||||||
|
|||||||
@@ -0,0 +1,107 @@
|
|||||||
|
---
|
||||||
|
phase: 01-design-foundation-and-primitives
|
||||||
|
plan: 01
|
||||||
|
subsystem: ui
|
||||||
|
tags: [shadcn, recharts, oklch, i18n, design-tokens, css-variables]
|
||||||
|
|
||||||
|
# Dependency graph
|
||||||
|
requires: []
|
||||||
|
provides:
|
||||||
|
- "ChartContainer, ChartTooltip, ChartTooltipContent wrappers (chart.tsx)"
|
||||||
|
- "Collapsible, CollapsibleTrigger, CollapsibleContent primitives (collapsible.tsx)"
|
||||||
|
- "Semantic OKLCH status tokens (over-budget, on-budget, budget-bar-bg)"
|
||||||
|
- "Two-tier category colors (dark text + lighter chart fills)"
|
||||||
|
- "Dashboard i18n keys in en.json and de.json (carryover, vsBudget, overBudget, underBudget, onTrack, loading)"
|
||||||
|
affects: [01-02, 02-dashboard-components, 03-dashboard-page, 04-polish]
|
||||||
|
|
||||||
|
# Tech tracking
|
||||||
|
tech-stack:
|
||||||
|
added: [shadcn/chart, shadcn/collapsible]
|
||||||
|
patterns: [oklch-two-tier-colors, semantic-status-tokens, chart-fill-variants]
|
||||||
|
|
||||||
|
key-files:
|
||||||
|
created:
|
||||||
|
- src/components/ui/chart.tsx
|
||||||
|
- src/components/ui/collapsible.tsx
|
||||||
|
modified:
|
||||||
|
- src/index.css
|
||||||
|
- src/i18n/en.json
|
||||||
|
- src/i18n/de.json
|
||||||
|
|
||||||
|
key-decisions:
|
||||||
|
- "Applied initialDimension patch for Recharts v3 compatibility (shadcn-ui/ui#9892)"
|
||||||
|
- "Category colors darkened to oklch ~0.55 lightness for WCAG 4.5:1 text contrast against white"
|
||||||
|
- "Chart fills kept lighter at oklch ~0.65-0.70 for non-text use (3:1 minimum contrast)"
|
||||||
|
- "Investment hue adjusted from 290 to 285 for better OKLCH gamut fit"
|
||||||
|
|
||||||
|
patterns-established:
|
||||||
|
- "Two-tier color system: dark --color-{category} for text, lighter --color-{category}-fill for chart areas"
|
||||||
|
- "Semantic status tokens: --color-over-budget (red), --color-on-budget (green) for budget comparison UI"
|
||||||
|
|
||||||
|
requirements-completed: [UI-DESIGN-01, UI-DASH-01]
|
||||||
|
|
||||||
|
# Metrics
|
||||||
|
duration: 3min
|
||||||
|
completed: 2026-03-16
|
||||||
|
---
|
||||||
|
|
||||||
|
# Phase 1 Plan 1: Design Primitives Summary
|
||||||
|
|
||||||
|
**shadcn chart/collapsible primitives with Recharts v3 patch, two-tier OKLCH category colors, semantic budget status tokens, and bilingual dashboard i18n keys**
|
||||||
|
|
||||||
|
## Performance
|
||||||
|
|
||||||
|
- **Duration:** 3 min
|
||||||
|
- **Started:** 2026-03-16T11:12:04Z
|
||||||
|
- **Completed:** 2026-03-16T11:14:52Z
|
||||||
|
- **Tasks:** 2
|
||||||
|
- **Files modified:** 5
|
||||||
|
|
||||||
|
## Accomplishments
|
||||||
|
- Installed shadcn chart and collapsible UI primitives with Recharts v3 initialDimension compatibility patch
|
||||||
|
- Extended OKLCH color token system with two-tier category colors (dark text + lighter fills) and 3 semantic budget status tokens
|
||||||
|
- Added 6 new dashboard i18n keys to both en.json and de.json at full parity
|
||||||
|
|
||||||
|
## Task Commits
|
||||||
|
|
||||||
|
Each task was committed atomically:
|
||||||
|
|
||||||
|
1. **Task 1: Install shadcn primitives and patch chart.tsx** - `d89d70f` (feat)
|
||||||
|
2. **Task 2: Extend color tokens and add i18n keys** - `4f74c79` (feat)
|
||||||
|
|
||||||
|
## Files Created/Modified
|
||||||
|
- `src/components/ui/chart.tsx` - ChartContainer, ChartTooltip, ChartTooltipContent wrappers with initialDimension patch
|
||||||
|
- `src/components/ui/collapsible.tsx` - Collapsible, CollapsibleTrigger, CollapsibleContent radix primitives
|
||||||
|
- `src/index.css` - Extended @theme inline block with semantic status tokens, chart fill variants, darkened category text colors
|
||||||
|
- `src/i18n/en.json` - 6 new dashboard keys (carryover, vsBudget, overBudget, underBudget, onTrack, loading)
|
||||||
|
- `src/i18n/de.json` - Matching 6 German dashboard keys at parity
|
||||||
|
|
||||||
|
## Decisions Made
|
||||||
|
- Applied initialDimension={{ width: 320, height: 200 }} patch since shadcn CLI still generates without it (PR #8486 not yet merged)
|
||||||
|
- Category text colors darkened to ~0.55 lightness for WCAG 4.5:1 contrast against white card background
|
||||||
|
- Chart fill variants kept lighter at ~0.65-0.70 for non-text use with 3:1 minimum contrast
|
||||||
|
- Investment hue adjusted from 290 to 285 for better OKLCH gamut representation
|
||||||
|
|
||||||
|
## Deviations from Plan
|
||||||
|
|
||||||
|
None - plan executed exactly as written.
|
||||||
|
|
||||||
|
## Issues Encountered
|
||||||
|
- Pre-existing lint errors found in badge.tsx, button.tsx, sidebar.tsx, and useBudgets.ts (5 errors total). These are not caused by this plan's changes and have been logged to deferred-items.md. Build passes; lint failures are in unmodified files only.
|
||||||
|
|
||||||
|
## User Setup Required
|
||||||
|
|
||||||
|
None - no external service configuration required.
|
||||||
|
|
||||||
|
## Next Phase Readiness
|
||||||
|
- Chart and collapsible primitives ready for Plan 02 component composition
|
||||||
|
- Color tokens and i18n keys available for all subsequent dashboard UI work
|
||||||
|
- No blockers for Plan 02 execution
|
||||||
|
|
||||||
|
## Self-Check: PASSED
|
||||||
|
|
||||||
|
All 5 created/modified files verified present. Both task commits (d89d70f, 4f74c79) verified in git log.
|
||||||
|
|
||||||
|
---
|
||||||
|
*Phase: 01-design-foundation-and-primitives*
|
||||||
|
*Completed: 2026-03-16*
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
# Deferred Items - Phase 01
|
||||||
|
|
||||||
|
## Pre-existing Lint Errors (Out of Scope)
|
||||||
|
|
||||||
|
Discovered during 01-01 execution. These exist in the codebase prior to any changes made in this plan.
|
||||||
|
|
||||||
|
1. **badge.tsx:48** - `react-refresh/only-export-components` - exports non-component (badgeVariants)
|
||||||
|
2. **button.tsx:64** - `react-refresh/only-export-components` - exports non-component (buttonVariants)
|
||||||
|
3. **sidebar.tsx:609** - `react-hooks/purity` - Math.random() called in render via useMemo
|
||||||
|
4. **sidebar.tsx:723** - `react-refresh/only-export-components` - exports non-components
|
||||||
|
5. **useBudgets.ts:80** - `react-hooks/rules-of-hooks` - Hook called in non-hook function
|
||||||
Reference in New Issue
Block a user