222 lines
8.9 KiB
Markdown
222 lines
8.9 KiB
Markdown
---
|
|
phase: 01-design-foundation-and-primitives
|
|
plan: 01
|
|
type: execute
|
|
wave: 1
|
|
depends_on: []
|
|
files_modified:
|
|
- src/components/ui/chart.tsx
|
|
- src/components/ui/collapsible.tsx
|
|
- src/index.css
|
|
- src/i18n/en.json
|
|
- src/i18n/de.json
|
|
autonomous: true
|
|
requirements:
|
|
- UI-DESIGN-01
|
|
- UI-DASH-01
|
|
|
|
must_haves:
|
|
truths:
|
|
- "shadcn chart primitive is installed and ChartContainer is importable from @/components/ui/chart"
|
|
- "shadcn collapsible primitive is installed and Collapsible is importable from @/components/ui/collapsible"
|
|
- "chart.tsx contains initialDimension={{ width: 320, height: 200 }} on ResponsiveContainer"
|
|
- "index.css @theme inline block contains semantic status tokens --color-over-budget and --color-on-budget"
|
|
- "index.css @theme inline block contains chart fill variants for all 6 category types"
|
|
- "Both en.json and de.json have matching new dashboard keys at parity"
|
|
artifacts:
|
|
- path: "src/components/ui/chart.tsx"
|
|
provides: "ChartContainer, ChartTooltip, ChartTooltipContent wrappers"
|
|
contains: "initialDimension"
|
|
- path: "src/components/ui/collapsible.tsx"
|
|
provides: "Collapsible, CollapsibleTrigger, CollapsibleContent"
|
|
- path: "src/index.css"
|
|
provides: "Extended OKLCH tokens with semantic status colors and chart fills"
|
|
contains: "--color-over-budget"
|
|
- path: "src/i18n/en.json"
|
|
provides: "English dashboard translation keys"
|
|
contains: "carryover"
|
|
- path: "src/i18n/de.json"
|
|
provides: "German dashboard translation keys"
|
|
contains: "carryover"
|
|
key_links:
|
|
- from: "src/index.css"
|
|
to: "Tailwind utility classes"
|
|
via: "@theme inline CSS variables"
|
|
pattern: "--color-(over-budget|on-budget|income-fill)"
|
|
---
|
|
|
|
<objective>
|
|
Install shadcn UI primitives (chart, collapsible), apply the Recharts v3 compatibility patch, extend the OKLCH color token system with richer chroma and semantic status tokens, and add new i18n keys for the dashboard redesign.
|
|
|
|
Purpose: Establish the lowest-level design system building blocks that Plan 02 components and all subsequent phases depend on. Without tokens and primitives, no component can reference semantic colors or chart wrappers.
|
|
|
|
Output: Patched chart.tsx, collapsible.tsx, extended index.css tokens, and parity-checked i18n keys in both languages.
|
|
</objective>
|
|
|
|
<execution_context>
|
|
@/home/jlmak/.claude/get-shit-done/workflows/execute-plan.md
|
|
@/home/jlmak/.claude/get-shit-done/templates/summary.md
|
|
</execution_context>
|
|
|
|
<context>
|
|
@.planning/PROJECT.md
|
|
@.planning/ROADMAP.md
|
|
@.planning/STATE.md
|
|
@.planning/phases/01-design-foundation-and-primitives/01-RESEARCH.md
|
|
|
|
@src/index.css
|
|
@src/i18n/en.json
|
|
@src/i18n/de.json
|
|
@components.json
|
|
</context>
|
|
|
|
<tasks>
|
|
|
|
<task type="auto">
|
|
<name>Task 1: Install shadcn primitives and patch chart.tsx</name>
|
|
<files>src/components/ui/chart.tsx, src/components/ui/collapsible.tsx</files>
|
|
<action>
|
|
1. Run `npx shadcn@latest add chart` to generate `src/components/ui/chart.tsx`. This installs the ChartContainer, ChartTooltip, and ChartTooltipContent wrappers around Recharts.
|
|
|
|
2. Open the generated `src/components/ui/chart.tsx` and find the `ResponsiveContainer` element inside the `ChartContainer` component. Add the `initialDimension` prop to fix the Recharts v3 compatibility issue (shadcn-ui/ui#9892):
|
|
|
|
BEFORE:
|
|
```tsx
|
|
<RechartsPrimitive.ResponsiveContainer>
|
|
```
|
|
AFTER:
|
|
```tsx
|
|
<RechartsPrimitive.ResponsiveContainer
|
|
initialDimension={{ width: 320, height: 200 }}
|
|
>
|
|
```
|
|
|
|
NOTE: If the generated file ALREADY contains `initialDimension` (meaning PR #8486 has merged), skip the manual patch.
|
|
|
|
3. Run `npx shadcn@latest add collapsible` to generate `src/components/ui/collapsible.tsx`. No post-install patch needed.
|
|
|
|
4. Verify both files are importable by confirming `npm run build` passes.
|
|
|
|
IMPORTANT: Do NOT install any npm packages manually. The shadcn CLI generates component files from the existing `radix-ui` and `recharts` packages already in package.json.
|
|
</action>
|
|
<verify>
|
|
<automated>npm run build</automated>
|
|
</verify>
|
|
<done>chart.tsx exists with initialDimension patch applied, collapsible.tsx exists, both are importable, build passes with zero errors.</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Task 2: Extend color tokens and add i18n keys</name>
|
|
<files>src/index.css, src/i18n/en.json, src/i18n/de.json</files>
|
|
<action>
|
|
**Part A: Extend color tokens in index.css**
|
|
|
|
Open `src/index.css` and modify the `@theme inline` block. Keep ALL existing tokens unchanged. Add the following new tokens AFTER the existing `--color-chart-5` line and BEFORE `--radius`:
|
|
|
|
1. Semantic status tokens (for budget comparison display):
|
|
```css
|
|
/* Semantic Status Tokens */
|
|
--color-over-budget: oklch(0.55 0.20 25);
|
|
--color-on-budget: oklch(0.50 0.17 155);
|
|
--color-budget-bar-bg: oklch(0.92 0.01 260);
|
|
```
|
|
|
|
2. Chart fill variants (lighter versions of category colors for non-text chart fills at 3:1 minimum contrast):
|
|
```css
|
|
/* Chart Fill Variants */
|
|
--color-income-fill: oklch(0.68 0.19 155);
|
|
--color-bill-fill: oklch(0.65 0.19 25);
|
|
--color-variable-expense-fill: oklch(0.70 0.18 50);
|
|
--color-debt-fill: oklch(0.60 0.20 355);
|
|
--color-saving-fill: oklch(0.68 0.18 220);
|
|
--color-investment-fill: oklch(0.65 0.18 285);
|
|
```
|
|
|
|
3. Update the existing 6 category color tokens to darker values for WCAG 4.5:1 text contrast against white (--color-card = oklch(1 0 0)):
|
|
```css
|
|
--color-income: oklch(0.55 0.17 155);
|
|
--color-bill: oklch(0.55 0.17 25);
|
|
--color-variable-expense: oklch(0.58 0.16 50);
|
|
--color-debt: oklch(0.52 0.18 355);
|
|
--color-saving: oklch(0.55 0.16 220);
|
|
--color-investment: oklch(0.55 0.16 285);
|
|
```
|
|
|
|
Do NOT modify any other existing tokens (background, foreground, primary, secondary, muted, accent, destructive, border, input, ring, sidebar-*). Do NOT modify the chart-1 through chart-5 tokens (they are used by shadcn chart config and will be updated separately in Phase 2 if needed).
|
|
|
|
**Part B: Add i18n keys to en.json**
|
|
|
|
Add the following keys to the `"dashboard"` section in `src/i18n/en.json`. Merge with existing keys (do not overwrite existing ones like "title", "totalIncome", "totalExpenses", "availableBalance", "expenseBreakdown", "noBudget"):
|
|
|
|
```json
|
|
"dashboard": {
|
|
"title": "Dashboard",
|
|
"totalIncome": "Total Income",
|
|
"totalExpenses": "Total Expenses",
|
|
"netBalance": "Net Balance",
|
|
"availableBalance": "Available Balance",
|
|
"expenseBreakdown": "Expense Breakdown",
|
|
"noBudget": "No budget for this month. Create one to get started.",
|
|
"carryover": "Carryover",
|
|
"vsBudget": "vs budget",
|
|
"overBudget": "over budget",
|
|
"underBudget": "under budget",
|
|
"onTrack": "On track",
|
|
"loading": "Loading dashboard..."
|
|
}
|
|
```
|
|
|
|
New keys being added: "carryover", "vsBudget", "overBudget", "underBudget", "onTrack", "loading".
|
|
|
|
**Part C: Add matching German i18n keys to de.json**
|
|
|
|
Add the same new keys to the `"dashboard"` section in `src/i18n/de.json`:
|
|
|
|
```json
|
|
"dashboard": {
|
|
"title": "Dashboard",
|
|
"totalIncome": "Gesamteinkommen",
|
|
"totalExpenses": "Gesamtausgaben",
|
|
"netBalance": "Nettobilanz",
|
|
"availableBalance": "Verfügbares Guthaben",
|
|
"expenseBreakdown": "Ausgabenübersicht",
|
|
"noBudget": "Kein Budget für diesen Monat. Erstelle eines, um loszulegen.",
|
|
"carryover": "Übertrag",
|
|
"vsBudget": "vs Budget",
|
|
"overBudget": "über Budget",
|
|
"underBudget": "unter Budget",
|
|
"onTrack": "Im Plan",
|
|
"loading": "Dashboard wird geladen..."
|
|
}
|
|
```
|
|
|
|
IMPORTANT: Both language files MUST be updated in the same commit. Verify key count parity: en.json and de.json should have the same number of total keys after changes.
|
|
</action>
|
|
<verify>
|
|
<automated>npm run build && npm run lint</automated>
|
|
</verify>
|
|
<done>index.css contains --color-over-budget, --color-on-budget, --color-budget-bar-bg, 6 chart fill variants, and darkened category text colors. en.json and de.json both contain the 6 new dashboard keys (carryover, vsBudget, overBudget, underBudget, onTrack, loading) at parity.</done>
|
|
</task>
|
|
|
|
</tasks>
|
|
|
|
<verification>
|
|
1. `npm run build` passes (TypeScript type-check + Vite bundling)
|
|
2. `npm run lint` passes (ESLint)
|
|
3. `src/components/ui/chart.tsx` contains `initialDimension`
|
|
4. `src/components/ui/collapsible.tsx` exists and exports Collapsible components
|
|
5. `src/index.css` contains `--color-over-budget`, `--color-on-budget`, `--color-budget-bar-bg`, and 6 `*-fill` variants
|
|
6. Both en.json and de.json contain "carryover", "vsBudget", "overBudget", "underBudget", "onTrack", "loading" under dashboard section
|
|
</verification>
|
|
|
|
<success_criteria>
|
|
- Build passes with zero errors
|
|
- All shadcn primitives installed (chart.tsx with patch, collapsible.tsx)
|
|
- Color token system extended with semantic status tokens and two-tier category colors
|
|
- i18n keys at parity between en.json and de.json
|
|
</success_criteria>
|
|
|
|
<output>
|
|
After completion, create `.planning/phases/01-design-foundation-and-primitives/01-01-SUMMARY.md`
|
|
</output>
|