kawa
e1cc3eda3f
- SUMMARY.md for BackendCard, PasswordField, FieldRenderer, AzureAuthToggle - STATE.md updated with progress (77%), decisions, metrics - ROADMAP.md updated (phase 3: 2/5 plans complete)
84 lines
4.1 KiB
Markdown
84 lines
4.1 KiB
Markdown
---
|
|
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).
|