docs(03-02): complete UI atom components plan

- SUMMARY.md for BackendCard, PasswordField, FieldRenderer, AzureAuthToggle - STATE.md updated with progress (77%), decisions, metrics - ROADMAP.md updated (phase 3: 2/5 plans complete)
2026-03-27 09:30:57 +01:00
parent 1c9c337d3f
commit e1cc3eda3f
3 changed files with 92 additions and 6 deletions
@@ -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).