|
1 | 1 | # UI‑Kit — Iteration Roadmap |
2 | 2 |
|
3 | | -A pragmatic breakdown into **four one‑week sprints** plus a preparatory **Sprint 0**. Each task lists an **objective** and a **Definition of Done (DoD)** expressed as automated checks the AI coding agent must satisfy. |
| 3 | +A pragmatic breakdown into **four one‑week sprints** plus a preparatory **Sprint 0**. Each task lists an **objective** and a **Definition of Done (DoD)** expressed as automated checks the AI coding agent must satisfy. |
4 | 4 |
|
5 | 5 | --- |
6 | 6 |
|
7 | | -## Sprint 0 — Scaffold, CI & DevOps plumbing |
| 7 | +## Sprint 0 — Scaffold, CI & DevOps plumbing |
8 | 8 |
|
9 | 9 | | # | Task | DoD (checked by CI bot) | Status | |
10 | 10 | | ---- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | ------ | |
11 | | -| 0.1a| Initialise `ui-kit` repo with Vite library template, TS, Tailwind. | Project structure exists with basic dependencies. | ✓ | |
12 | | -| 0.1b| Configure DaisyUI and verify build process. | `pnpm build` exits 0; generated `dist/index.js` exists. | ✓ | |
13 | | -| 0.2 | Add `ui-kit.mdc` rule file and baseline ESLint + Prettier config. | `npm run lint` passes with zero errors on fresh repo. | ✓ | |
14 | | -| 0.3 | Configure GitHub Actions pipeline skeleton (lint → test → build). | Workflow completes green on `main`. | ✓ | |
15 | | -| 0.4 | Commit Husky hooks (commitlint, lint‑staged). | Attempting to commit code with ESLint errors is blocked locally. | | |
16 | | -| 0.5 | Seed Changesets & automatic versioning. | Merging PR increments `package.json version` and creates a changelog file. | | |
17 | | -| 0.6 | **Docker/Dokku infra** – Add multi‑stage `Dockerfile`, `Procfile`; CI job builds image & pushes to test Dokku app. | `gh workflow run docker-test` builds & deploys; Dokku reports container running, health‑check 200. | | |
| 11 | +| 0.1a | Initialise `ui-kit` repo with Vite library template, TS, Tailwind. | Project structure exists with basic dependencies. | ✓ | |
| 12 | +| 0.1b | Configure DaisyUI and verify build process. | `pnpm build` exits 0; generated `dist/index.js` exists. | ✓ | |
| 13 | +| 0.2 | Add `ui-kit.mdc` rule file and baseline ESLint + Prettier config. | `npm run lint` passes with zero errors on fresh repo. | ✓ | |
| 14 | +| 0.3 | Configure GitHub Actions pipeline skeleton (lint → test → build). | Workflow completes green on `main`. | ✓ | |
| 15 | +| 0.4 | Commit Husky hooks (commitlint, lint‑staged). | Attempting to commit code with ESLint errors is blocked locally. | ✓ | |
| 16 | +| 0.5 | Seed Changesets & automatic versioning. | Merging PR increments `package.json version` and creates a changelog file. | ✓ | |
| 17 | +| 0.6 | **Docker/Dokku infra** – Add multi‑stage `Dockerfile`, `Procfile`; CI job builds image & pushes to test Dokku app. | `gh workflow run docker-test` builds & deploys; Dokku reports container running, health‑check 200. | ✓ | |
18 | 18 |
|
19 | 19 | --- |
20 | 20 |
|
21 | | -## Sprint 1 — Core primitives & docs foundation |
| 21 | +## Sprint 1 — Core primitives & docs foundation |
22 | 22 |
|
23 | | -| # | Task | DoD | Status | |
24 | | -| ---- | ------------------------------------------------------------ | ----------------------------------------------------------------------- | ------ | |
25 | | -| 1.1a| Create basic **Button** component structure. | Component file exists with basic props and types. | ✓ | |
26 | | -| 1.1b| Complete **Button** implementation with tests and stories. | Vitest unit tests (90 %+ coverage), Storybook MDX story with ArgsTable. | | |
27 | | -| 1.1c| Implement **TextInput** wrapper in `/src/core`. | Vitest unit tests (90 %+ coverage), Storybook MDX story with ArgsTable. | | |
28 | | -| 1.2a| Set up basic Storybook configuration. | `npm run storybook` starts successfully. | ✓ | |
29 | | -| 1.2b| Install and configure Storybook addon‑docs. | Documentation tab shows component documentation. | ✓ | |
30 | | -| 1.2c| Configure and verify Storybook addon‑a11y. | axe‑a11y addon shows zero violations. | | |
31 | | -| 1.3 | Add global theme bridging (`theme.css` ↔ DaisyUI). | Cypress visual diff (light/dark) matches golden images. | | |
32 | | -| 1.4 | Create first **AuthShell** layout with logo slot. | Rendered via Storybook; Playwright snapshot approved. | | |
33 | | -| 1.5 | Document design tokens (`DESIGN_TOKENS.md`). | File exists; CI step `tokens-check` verifies presence of each CSS var. | | |
| 23 | +| # | Task | DoD | Status | |
| 24 | +| ---- | ---------------------------------------------------------- | ----------------------------------------------------------------------- | ------ | |
| 25 | +| 1.1a | Create basic **Button** component structure. | Component file exists with basic props and types. | ✓ | |
| 26 | +| 1.1b | Complete **Button** implementation with tests and stories. | Vitest unit tests (90 %+ coverage), Storybook MDX story with ArgsTable. | | |
| 27 | +| 1.1c | Implement **TextInput** wrapper in `/src/core`. | Vitest unit tests (90 %+ coverage), Storybook MDX story with ArgsTable. | | |
| 28 | +| 1.2a | Set up basic Storybook configuration. | `npm run storybook` starts successfully. | ✓ | |
| 29 | +| 1.2b | Install and configure Storybook addon‑docs. | Documentation tab shows component documentation. | ✓ | |
| 30 | +| 1.2c | Configure and verify Storybook addon‑a11y. | axe‑a11y addon shows zero violations. | | |
| 31 | +| 1.3 | Add global theme bridging (`theme.css` ↔ DaisyUI). | Cypress visual diff (light/dark) matches golden images. | | |
| 32 | +| 1.4 | Create first **AuthShell** layout with logo slot. | Rendered via Storybook; Playwright snapshot approved. | | |
| 33 | +| 1.5 | Document design tokens (`DESIGN_TOKENS.md`). | File exists; CI step `tokens-check` verifies presence of each CSS var. | | |
34 | 34 |
|
35 | 35 | --- |
36 | 36 |
|
37 | | -## Sprint 2 — Form primitives & State tooling |
| 37 | +## Sprint 2 — Form primitives & State tooling |
38 | 38 |
|
39 | | -| # | Task | DoD | Status | |
40 | | -| ---- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ------ | |
41 | | -| 2.1 | Add NumberInput, Select, Checkbox, RadioGroup components. | Unit & a11y tests pass; form story displays all. | | |
42 | | -| 2.2 | Integrate **React Hook Form + Zod**; create `FormGrid` + `FormGroup`. | Story "Form Example" submits & reports validation errors in Storybook interaction test. | | |
43 | | -| 2.3 | Implement Zustand session store skeleton with dark‑mode flag. | Vitest verifies default state + setter actions. | | |
44 | | -| 2.4 | ESLint rule enforcing named `useEffect` & cleanup. | Failing example in test repo triggers lint error; real code passes. | | |
45 | | -| 2.5 | Extend CI to run axe‑core on all stories. | Pipeline fails if any new a11y violations introduced. | | |
| 39 | +| # | Task | DoD | Status | |
| 40 | +| --- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ------ | |
| 41 | +| 2.1 | Add NumberInput, Select, Checkbox, RadioGroup components. | Unit & a11y tests pass; form story displays all. | | |
| 42 | +| 2.2 | Integrate **React Hook Form + Zod**; create `FormGrid` + `FormGroup`. | Story "Form Example" submits & reports validation errors in Storybook interaction test. | | |
| 43 | +| 2.3 | Implement Zustand session store skeleton with dark‑mode flag. | Vitest verifies default state + setter actions. | | |
| 44 | +| 2.4 | ESLint rule enforcing named `useEffect` & cleanup. | Failing example in test repo triggers lint error; real code passes. | | |
| 45 | +| 2.5 | Extend CI to run axe‑core on all stories. | Pipeline fails if any new a11y violations introduced. | | |
46 | 46 |
|
47 | 47 | --- |
48 | 48 |
|
49 | | -## Sprint 3 — Data layer & Main layouts |
| 49 | +## Sprint 3 — Data layer & Main layouts |
50 | 50 |
|
51 | | -| # | Task | DoD | Status | |
52 | | -| ---- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ------ | |
53 | | -| 3.1 | Wrap **TanStack Table** into `DataTable` with pagination, resize. | Story with 50 rows paginates; Playwright test clicks next page. | | |
54 | | -| 3.2 | Build **MainLayout** with TopBar + LeftNav + Breadcrumb. | Storybook viewport test at 1280 & 1024 px shows responsive collapse. | | |
55 | | -| 3.3 | Implement Toast system (`useToast`) + StatusBadge. | Vitest renders Toast, axe‑core passes. | | |
56 | | -| 3.4 | Sample showcase: login page + dashboard + customers table route. | E2E Playwright run (login → dashboard) green in CI. | | |
57 | | -| 3.5 | Add i18n infrastructure (`react-i18next`) with `en`, `de` locales. | Storybook toolbar allows locale switch; renders German labels. | | |
58 | | -| 3.6 | **SQLite seed script** – generate 100 customers & 2 users; hook `pnpm run seed` in showcase. | Script executes without error; Playwright test logs in with `admin` credentials, verifies 100 customers paginated. | | |
| 51 | +| # | Task | DoD | Status | |
| 52 | +| --- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ------ | |
| 53 | +| 3.1 | Wrap **TanStack Table** into `DataTable` with pagination, resize. | Story with 50 rows paginates; Playwright test clicks next page. | | |
| 54 | +| 3.2 | Build **MainLayout** with TopBar + LeftNav + Breadcrumb. | Storybook viewport test at 1280 & 1024 px shows responsive collapse. | | |
| 55 | +| 3.3 | Implement Toast system (`useToast`) + StatusBadge. | Vitest renders Toast, axe‑core passes. | | |
| 56 | +| 3.4 | Sample showcase: login page + dashboard + customers table route. | E2E Playwright run (login → dashboard) green in CI. | | |
| 57 | +| 3.5 | Add i18n infrastructure (`react-i18next`) with `en`, `de` locales. | Storybook toolbar allows locale switch; renders German labels. | | |
| 58 | +| 3.6 | **SQLite seed script** – generate 100 customers & 2 users; hook `pnpm run seed` in showcase. | Script executes without error; Playwright test logs in with `admin` credentials, verifies 100 customers paginated. | | |
59 | 59 |
|
60 | 60 | --- |
61 | 61 |
|
62 | | -## Sprint 4 — Polish, security & release readiness |
| 62 | +## Sprint 4 — Polish, security & release readiness |
63 | 63 |
|
64 | | -| # | Task | DoD | Status | |
65 | | -| ---- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------ | |
66 | | -| 4.1 | Implement CSP & DOMPurify wrapper in MarkdownEditor. | Security unit test feeds XSS payload; output sanitised. | | |
67 | | -| 4.2 | Add Sentry ErrorBoundary + tslog logger. | Fake error in story captured by mocked Sentry client in test. | | |
68 | | -| 4.3 | Size‑limit CI check (< 250 KB gz for core bundle). | `npm run size-limit` passes. | | |
69 | | -| 4.4 | Prepare **CONTRIBUTING.md**, PR template, CODEOWNERS. | Presence verified by doc‑lint script. | | |
70 | | -| 4.5 | Publish first `v0.1.0-beta` to GitHub Packages; deploy Storybook demo to Pages. | Tag `v0.1.0-beta` exists; npm info returns package; Pages URL accessible & shows build hash. | | |
| 64 | +| # | Task | DoD | Status | |
| 65 | +| --- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------ | |
| 66 | +| 4.1 | Implement CSP & DOMPurify wrapper in MarkdownEditor. | Security unit test feeds XSS payload; output sanitised. | | |
| 67 | +| 4.2 | Add Sentry ErrorBoundary + tslog logger. | Fake error in story captured by mocked Sentry client in test. | | |
| 68 | +| 4.3 | Size‑limit CI check (< 250 KB gz for core bundle). | `npm run size-limit` passes. | | |
| 69 | +| 4.4 | Prepare **CONTRIBUTING.md**, PR template, CODEOWNERS. | Presence verified by doc‑lint script. | | |
| 70 | +| 4.5 | Publish first `v0.1.0-beta` to GitHub Packages; deploy Storybook demo to Pages. | Tag `v0.1.0-beta` exists; npm info returns package; Pages URL accessible & shows build hash. | | |
71 | 71 |
|
72 | 72 | --- |
73 | 73 |
|
74 | 74 | ## Post‑MVP backlog (icebox) |
75 | 75 |
|
76 | | -* Implement CodeEditor (Monaco) component. |
77 | | -* Add Prometheus metrics endpoint to API stub. |
78 | | -* Bundle‑size driven package split (`ui-core`, etc.) when trigger metrics crossed. |
| 76 | +- Implement CodeEditor (Monaco) component. |
| 77 | +- Add Prometheus metrics endpoint to API stub. |
| 78 | +- Bundle‑size driven package split (`ui-core`, etc.) when trigger metrics crossed. |
79 | 79 |
|
80 | 80 | ## Sprint 4a — Completeness Pass (remaining inputs, layouts & routes) |
81 | 81 |
|
|
0 commit comments