From 569c6c7853c32bacd031b0f3e14bf955199c2361 Mon Sep 17 00:00:00 2001 From: Arthur Belleville Date: Sat, 16 May 2026 14:01:53 +0200 Subject: [PATCH] docs(13-03): complete form input components plan summary - Input, Textarea, Select, FormField components ported from go-backend - TDD gates: 4 RED/GREEN commits, all 13 new tests passing - Full go test ./... is green (all packages) --- .../13-03-SUMMARY.md | 117 ++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 .planning/phases/13-design-system-foundation/13-03-SUMMARY.md diff --git a/.planning/phases/13-design-system-foundation/13-03-SUMMARY.md b/.planning/phases/13-design-system-foundation/13-03-SUMMARY.md new file mode 100644 index 0000000..ac69599 --- /dev/null +++ b/.planning/phases/13-design-system-foundation/13-03-SUMMARY.md @@ -0,0 +1,117 @@ +--- +phase: 13-design-system-foundation +plan: "03" +subsystem: backend/internal/web/ui +tags: [form-components, input, textarea, select, form-field, design-system, tdd] +dependency_graph: + requires: [13-01, 13-02] + provides: [input-component, textarea-component, select-component, form-field-component] + affects: + - backend/internal/web/ui/input.css + - backend/internal/web/ui/input.templ + - backend/internal/web/ui/textarea.css + - backend/internal/web/ui/textarea.templ + - backend/internal/web/ui/select.css + - backend/internal/web/ui/select.templ + - backend/internal/web/ui/select_helpers.go + - backend/internal/web/ui/form-field.css + - backend/internal/web/ui/form_field.templ + - backend/internal/web/ui/ui_test.go + - backend/tailwind.input.css +tech_stack: + added: [] + patterns: [verbatim-port, tdd-red-green, inline-js-htmx-reinit, nil-guard-optional-regions] +key_files: + created: + - backend/internal/web/ui/input.css + - backend/internal/web/ui/input.templ + - backend/internal/web/ui/textarea.css + - backend/internal/web/ui/textarea.templ + - backend/internal/web/ui/select.css + - backend/internal/web/ui/select.templ + - backend/internal/web/ui/select_helpers.go + - backend/internal/web/ui/form-field.css + - backend/internal/web/ui/form_field.templ + modified: + - backend/internal/web/ui/ui_test.go + - backend/tailwind.input.css +decisions: + - "InputProps and TextareaProps include Disabled and Required as explicit bool fields (D-CA03) — conditional attribute rendering via templ if blocks rather than Attrs pass-through" + - "select_helpers.go ported verbatim from go-backend with no naming changes (package-private helpers, not exported)" + - "tailwind.input.css updated to include all four new CSS imports in order: input, textarea, select, form-field" +metrics: + duration: "~12 minutes" + completed_date: "2026-05-16" + tasks: 2 + files: 11 +--- + +# Phase 13 Plan 03: Form Input Components — Input, Textarea, Select, FormField Summary + +Four form-input component types ported from go-backend with matching CSS, typed Props structs, and full test coverage: Input (class ui-input, inputType/inputID helpers), Textarea (class ui-textarea, textareaRows default 4, resize vertical), Select (ui-select-control, inline JS with __uiSelectInitAll and htmx:afterSwap re-init), FormField (conditional label/hint/error regions). + +## Tasks Completed + +| Task | Name | Commit | Key Files | +|------|------|--------|-----------| +| 1 (RED) | Failing tests for Input and Textarea | ace9f5b | ui_test.go (7 tests) | +| 1 (GREEN) | Port input.templ/input.css and textarea.templ/textarea.css | 9556b20 | input.css, input.templ, textarea.css, textarea.templ, tailwind.input.css | +| 2 (RED) | Failing tests for Select and FormField | 50e3fb0 | ui_test.go (6 tests) | +| 2 (GREEN) | Port select + form-field components with CSS and helpers | 52fb77d | select.css, select.templ, select_helpers.go, form-field.css, form_field.templ, tailwind.input.css | + +## What Was Built + +**Task 1 — Input and Textarea (TDD):** +- `input.css`: `.ui-input` with `appearance: none`, `background: var(--color-surface-default)`, `border-radius: 0.75rem`, `min-height: 44px`, `padding: 0.75rem 0.95rem`, `width: 100%`, plus placeholder and focus rules. +- `input.templ`: `InputProps` struct with `ID`, `Name`, `Value`, `Placeholder`, `Type`, `Disabled bool`, `Required bool`, `Attrs templ.Attributes`. Uses `inputID(props.ID, props.Name)` and `inputType(props.Type)` helpers. Conditional `disabled`/`required` attributes. +- `textarea.css`: `.ui-textarea` with same base styling as input plus `min-height: 7rem` and `resize: vertical`. +- `textarea.templ`: `TextareaProps` struct with `ID`, `Name`, `Value`, `Placeholder`, `Rows int`, `Disabled bool`, `Required bool`, `Attrs templ.Attributes`. Uses `inputID()` and `textareaRows()` helpers (defaults to 4 rows). +- `tailwind.input.css`: Added `@import` for `input.css` and `textarea.css`. +- 7 tests passing: `TestInput_DefaultType`, `TestInput_EmailType`, `TestInput_IDFallback`, `TestInput_ExplicitID`, `TestTextarea_RendersClass`, `TestTextarea_DefaultRows`, `TestTextarea_ExplicitRows`. + +**Task 2 — Select and FormField (TDD):** +- `select_helpers.go`: 9 helper functions ported verbatim from go-backend: `selectPlaceholder`, `selectNativeID`, `selectMenuID`, `selectBoolData`, `selectSelectedValues`, `selectOptionSelected`, `selectSelectedLabels`, `selectSelectedLabel`, `selectMenuOptionClass`, `selectIsDisabled`. Imports `"strings"` and `"github.com/a-h/templ"`. +- `select.templ`: `SelectOption` struct (`Value`, `Label`, `Disabled bool`) and `SelectProps` struct (`ID`, `Name`, `Placeholder`, `Value`, `Values []string`, `Multiple bool`, `Options []SelectOption`, `Attrs`). Full custom dropdown with hidden native `