diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index 9f039fe..e85c1db 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -87,5 +87,5 @@ Phases execute in numeric order: 1 → 2 → 3 → 4 |-------|----------------|--------|-----------| | 1. Foundation | 4/4 | Complete | 2026-03-26 | | 2. Generators | 4/4 | Complete | 2026-03-26 | -| 3. Wizard UI | 1/5 | In Progress| | +| 3. Wizard UI | 2/5 | In Progress| | | 4. Review, Download & Security | 0/? | Not started | - | diff --git a/.planning/STATE.md b/.planning/STATE.md index 0af599f..fe2a627 100644 --- a/.planning/STATE.md +++ b/.planning/STATE.md @@ -3,14 +3,14 @@ gsd_state_version: 1.0 milestone: v1.0 milestone_name: milestone status: executing -stopped_at: Completed 03-wizard-ui-03-01-PLAN.md -last_updated: "2026-03-27T08:27:26.136Z" +stopped_at: Completed 03-wizard-ui-03-02-PLAN.md +last_updated: "2026-03-27T08:30:44.348Z" last_activity: 2026-03-26 — Completed plan 01-02 (Backend Schema Registry) progress: total_phases: 4 completed_phases: 2 total_plans: 13 - completed_plans: 9 + completed_plans: 10 percent: 50 --- @@ -56,6 +56,7 @@ Progress: [█████░░░░░] 50% | Phase 02-generators P04 | 5min | 1 tasks | 1 files | | Phase 02-generators P03 | resumed | 2 tasks | 3 files | | Phase 03-wizard-ui P01 | 1min | 2 tasks | 5 files | +| Phase 03-wizard-ui P02 | 2min | 2 tasks | 4 files | ## Accumulated Context @@ -89,6 +90,8 @@ Recent decisions affecting current work: - [Phase 03-wizard-ui]: jsdom environment added to vite.config.ts test block — no triple-slash vitest reference needed with vitest ^4.x - [Phase 03-wizard-ui]: Wave 0 stubs use expect.fail('not yet implemented') for named RED failures rather than relying on import errors - [Phase 03-wizard-ui]: Requirement IDs embedded in describe block names (WIZD-01, BACK-02, etc.) for direct test-to-requirement traceability +- [Phase 03-wizard-ui]: AzureAuthToggle uses CSS hidden class (not conditional rendering) to preserve both sas_url and key in react-hook-form state when toggling +- [Phase 03-wizard-ui]: FieldRenderer hides provider field for single-option selects and auto-registers via hidden input ### Pending Todos @@ -102,6 +105,6 @@ None yet. ## Session Continuity -Last session: 2026-03-27T08:27:26.134Z -Stopped at: Completed 03-wizard-ui-03-01-PLAN.md +Last session: 2026-03-27T08:30:44.343Z +Stopped at: Completed 03-wizard-ui-03-02-PLAN.md Resume file: None diff --git a/.planning/phases/03-wizard-ui/03-02-SUMMARY.md b/.planning/phases/03-wizard-ui/03-02-SUMMARY.md new file mode 100644 index 0000000..44da153 --- /dev/null +++ b/.planning/phases/03-wizard-ui/03-02-SUMMARY.md @@ -0,0 +1,83 @@ +--- +phase: 03-wizard-ui +plan: "02" +subsystem: ui-atoms +tags: [react, components, ui, forms, tailwind] +dependency_graph: + requires: + - "03-01" + - "src/schemas/registry.ts" + provides: + - "src/components/ui/BackendCard.tsx" + - "src/components/ui/PasswordField.tsx" + - "src/components/ui/FieldRenderer.tsx" + - "src/components/wizard/AzureAuthToggle.tsx" + affects: + - "03-03" + - "03-04" +tech_stack: + added: [] + patterns: + - "Registry-driven form rendering via FieldRenderer" + - "CSS show/hide for react-hook-form field preservation" + - "Per-instance useState for password visibility" +key_files: + created: + - "src/components/ui/BackendCard.tsx" + - "src/components/ui/PasswordField.tsx" + - "src/components/ui/FieldRenderer.tsx" + - "src/components/wizard/AzureAuthToggle.tsx" + modified: [] +decisions: + - "[03-02] PasswordField uses text labels (Show/Hide) instead of emoji — per project no-emoji convention" + - "[03-02] AzureAuthToggle uses CSS hidden class (not conditional rendering) — preserves both sas_url and key in react-hook-form state when toggling" + - "[03-02] FieldRenderer hides provider field for single-option selects and auto-registers via hidden input" +metrics: + duration: "2 min" + completed: "2026-03-27" + tasks_completed: 2 + files_created: 4 + files_modified: 0 +--- + +# Phase 03 Plan 02: UI Atom Components Summary + +Four shared UI atom components built for registry-driven wizard form rendering with password show/hide toggles and Azure SAS/Key segmented auth control. + +## Tasks Completed + +| Task | Name | Commit | Files | +|------|------|--------|-------| +| 1 | Create BackendCard and PasswordField UI atoms | cec45e8 | src/components/ui/BackendCard.tsx, src/components/ui/PasswordField.tsx | +| 2 | Create FieldRenderer and AzureAuthToggle | 1c9c337 | src/components/ui/FieldRenderer.tsx, src/components/wizard/AzureAuthToggle.tsx | + +## What Was Built + +**BackendCard** — Clickable button card for the backend selection grid. Accepts `name`, `description`, `selected` (bool), and `onClick`. Uses Tailwind classes to visually differentiate selected vs unselected state (blue border/bg vs gray). + +**PasswordField** — Password input with per-instance show/hide toggle. Each field manages its own `useState(false)` so multiple password fields on the same form are independent. Toggle uses "Show"/"Hide" text labels (no emoji per project convention). Integrates with react-hook-form via `registration` prop (UseFormRegisterReturn). + +**FieldRenderer** — Registry-driven single-field renderer. Dispatches on `FieldDef.inputType` to render: hidden input (for single-option `provider` selects), PasswordField (for password type), select dropdown, or text input. The `provider` hidden input auto-registers its default value so react-hook-form always has the correct provider without user interaction. + +**AzureAuthToggle** — Azure-specific segmented control switching between SAS URL and Access Key auth methods. Defaults to SAS. Both `sas_url` and `key` fields are always rendered (and therefore registered with react-hook-form) — CSS `hidden`/`block` classes show only the active field. This preserves both field values when toggling, so the rclone config generator receives both and strips the inactive one. + +## Deviations from Plan + +### Auto-fixed Issues + +**1. [Rule 1 - Convention] PasswordField eye button uses text labels instead of emoji** +- **Found during:** Task 1 +- **Issue:** Plan specified emoji characters (eye/monkey face) for show/hide toggle button. Project conventions prohibit emoji in files. +- **Fix:** Replaced with text labels "Show" and "Hide" — functionally identical, meets project conventions. +- **Files modified:** src/components/ui/PasswordField.tsx +- **Commit:** cec45e8 + +## Verification + +All exports confirmed: +- `BackendCard` from `src/components/ui/BackendCard.tsx` +- `PasswordField` from `src/components/ui/PasswordField.tsx` +- `FieldRenderer` from `src/components/ui/FieldRenderer.tsx` +- `AzureAuthToggle` from `src/components/wizard/AzureAuthToggle.tsx` + +Vitest: 61 passing, 26 RED (all `expect.fail('not yet implemented')` stubs — expected until Plans 03 and 04).