48 lines
3.9 KiB
Markdown
48 lines
3.9 KiB
Markdown
# UI Pattern Coverage Matrix (Reference Apps → Design Kit)
|
|
|
|
This file tracks UI/UX pattern extraction from reference Go web applications into this
|
|
repository's current scope (UI/UX + interaction contracts + demo pages + reusable pattern docs).
|
|
|
|
## Scope Reminder
|
|
|
|
- This matrix covers only the currently approved design-code scope.
|
|
- It does **not** expand into backend architecture, API contract frameworks, or observability.
|
|
|
|
## Pattern Checklist
|
|
|
|
| Pattern Family | Reference Evidence (types of usage observed) | Demo Coverage | Kit Contract / Bundle | Status |
|
|
|---|---|---|---|---|
|
|
| Table lists | multiple list/detail/admin tables | `/patterns/table`, `/patterns/controls` | `ui-pattern-table` | covered (core) |
|
|
| Pagination | shared pagination style, prev/next/page links | `/patterns/table` | `ui-pattern-table` | covered (core) |
|
|
| Server-side filters | header filters, URL query semantics | `/patterns/table` | `ui-pattern-table` | covered (core) |
|
|
| Datalist/autocomplete filters | datalist-backed header filters and suggestions | `/patterns/forms` | `ui-pattern-forms` | covered |
|
|
| Buttons hierarchy | primary/secondary/danger/quiet controls | `/patterns/controls` | `ui-pattern-controls` | covered |
|
|
| Checkboxes + selection | row select, select visible, bulk actions | `/patterns/controls` | `ui-pattern-controls` | covered |
|
|
| Segmented/tabs | active/archived, mode switches, tab buttons | `/patterns/controls`, `/patterns/forms` | `ui-pattern-controls`, `ui-pattern-forms` | covered |
|
|
| Status badges/indicators | entity status, source/status labels, warning chips | `/patterns/controls`, `/patterns/timeline` | `ui-pattern-controls` | covered (core) |
|
|
| Modals (single-step) | create/edit/remove dialogs | `/patterns/modals` | `ui-pattern-modal` | covered |
|
|
| Modals (multi-step confirm) | review/confirm/submit flows | `/patterns/modals`, `/patterns/forms` | `ui-pattern-modal`, `ui-pattern-forms` | covered |
|
|
| Import workflow | file input, preview, confirm | `/patterns/io`, `/patterns/forms` | `ui-pattern-io`, `ui-pattern-forms` | covered |
|
|
| Export workflow | explicit scope/format, CSV download | `/patterns/io` | `ui-pattern-io` | covered |
|
|
| CSV export compatibility details | BOM + delimiter for spreadsheet UX | `/patterns/io/export.csv` | `ui-pattern-io` | covered |
|
|
| Timeline cards | grouped by day/action/source | `/patterns/timeline` | `ui-pattern-timeline` | covered |
|
|
| Timeline drilldown | single drilldown panel/modal, event detail | `/patterns/timeline` | `ui-pattern-timeline` | covered |
|
|
| Empty states | table/list/filter empty states | multiple demo pages | multiple bundles | covered |
|
|
| Inline validation messages | form-level and field-level messages | `/patterns/forms` | `ui-pattern-forms` | covered |
|
|
| File upload controls | `<input type="file">` and import affordances | `/patterns/forms`, `/patterns/io` | `ui-pattern-io`, `ui-pattern-forms` | covered |
|
|
| Global selection across paginated pages | persistent selection across pages/storage | `/patterns/controls` (paginated selection + select visible/filtered + preserved `sel`) | `ui-pattern-controls` | covered |
|
|
| Advanced admin tools / repair dashboards | complex operator tooling with many tables | `/patterns/operator-tools` (canonicalized operator dashboard) | `ui-pattern-operator-tools` | covered (simplified canonical) |
|
|
|
|
## Notes on Intentional Simplifications
|
|
|
|
- Some complex operator workflows are represented as simplified demos to keep the repository
|
|
focused on reusable interaction contracts rather than domain-specific UI logic.
|
|
- Global selection is demonstrated via query-driven selected IDs preserved across paginated views.
|
|
- Client-side persistence (for example local storage) is intentionally not required for the canonical contract.
|
|
|
|
## Next In-Scope Improvements (Optional, not automatic)
|
|
|
|
- Stronger global-selection demo (cross-page or local-storage persistence)
|
|
- Dedicated "operator dashboard tools" pattern page (still within UI/UX scope)
|
|
- Richer datalist/autocomplete disambiguation candidate flow
|