diff --git a/dashboards/tracker-web/docs/roadmaps/UX_INTEGRATION_BYTELYST.md b/dashboards/tracker-web/docs/roadmaps/UX_INTEGRATION_BYTELYST.md index 5bdf6e86..16b777e6 100644 --- a/dashboards/tracker-web/docs/roadmaps/UX_INTEGRATION_BYTELYST.md +++ b/dashboards/tracker-web/docs/roadmaps/UX_INTEGRATION_BYTELYST.md @@ -34,7 +34,20 @@ - `@bytelyst/charts`: `LineChart` `BarChart` `AreaChart` `Donut` `Gauge` - `@bytelyst/data-viz`: `Sparkline` `BarSparkline` `KpiCard` `ProgressRing` `Heatmap` - `@bytelyst/command-palette`: `CommandPalette` `CommandRegistryProvider` `useCommandPalette` -- `@bytelyst/motion`: `Reveal` `Stagger` `NumberFlow` … (see showcase `/showcase/motion/all`) +- `@bytelyst/motion`: `Reveal` `Stagger` `NumberFlow` `TiltCard` `ScrollProgress` … (see `/showcase/motion/all`) +- `@bytelyst/ui` (not yet in the adapter): `Tooltip` `Tabs` `SegmentedControl` `DropdownMenu` + `Switch` `Checkbox` `RadioGroup` `Select` `Textarea` `Panel` `Surface` `Card` `Separator` + `DataList` `Timeline` `Drawer` `ActionMenu` `IconButton` `AlertBanner` +- `@bytelyst/dashboard-components`: `PageHeader` `ErrorPage` `NotFoundPage` `EmptyState` + `LoadingSpinner` `LoadingSkeleton` +- `@bytelyst/auth-ui`: `LoginForm` `MfaChallenge` `SocialButtons` `PasswordStrengthBar` … +- `@bytelyst/notifications-ui`: `NotificationCenter` `InboxItem` `BannerStack` `Announcement` +- `@bytelyst/rich-text`: `RichTextEditor` (Tiptap v3, slash + mentions) · `RichTextViewer` + +> **Expansion (2026-05-28):** waves **UX-9 … UX-13** below were added after re-auditing +> tracker-web against the full showcase catalog (`src/catalog/routes.ts`, ~60 entries). +> They are sequenced **after** the core UX-2 … UX-8 migration and several are explicitly +> **stretch / data-gated** — do not start them until the wave they depend on is green. > Aligns with master `docs/ROADMAP.md` Phase 2.1 (UI primitives migration) — this roadmap is the > concrete, delegate-ready execution plan and extends it with charts/palette/toast/motion. @@ -156,6 +169,66 @@ pnpm build # final gate toggle), keeping `ProductSwitcher`, user email, sign-out, and adding the ⌘K trigger + theme toggle. **Verify:** `pnpm typecheck && pnpm lint && pnpm build`; keyboard nav + skip-link work. +## UX-9 — Complete the Primitives adapter (+ close the coverage gap) + +> The adapter (`src/components/ui/Primitives.tsx`) currently re-exports ~12 components and +> sits at **0% test coverage** (flagged in `docs/TEST_VALIDATION_LOG.md`). Broaden it and +> lock it with a cheap export-presence test — no `@testing-library/react`/jsdom needed. + +- [ ] **9.1** Extend `Primitives.tsx` to also re-export the shared controls the app will need + in later waves: `Select` `Textarea` `Checkbox` `Switch` `RadioGroup` `Tooltip` `Tabs` + `SegmentedControl` `DropdownMenu` `Drawer` `ActionMenu` `IconButton` `AlertBanner` + `Card` `Panel` `Separator` `DataList` `Timeline`. Keep app code importing only from the + adapter (preserves the UI-drift ratchet). +- [ ] **9.2** Add `src/__tests__/primitives-adapter.exports.test.ts` asserting every adapter + export is `defined` (a pure import test — raises `Primitives.tsx` off 0% without a DOM dep). + **Verify:** `pnpm typecheck && pnpm lint && pnpm test && pnpm build`. + +## UX-10 — Page chrome via `@bytelyst/dashboard-components` + +- [ ] **10.1** `src/app/error.tsx`: render `ErrorPage` from `@bytelyst/dashboard-components` + (keep the existing `trackEvent` telemetry side-effect + `reset` wiring). `not-found.tsx` + already uses `NotFoundPage` — leave it. +- [ ] **10.2** Add `PageHeader` (title + breadcrumbs) to the top of `/dashboard`, `/dashboard/items`, + `/dashboard/board`, and the item detail page for a consistent header band. +- [ ] **10.3** Replace ad-hoc loading text with `LoadingSpinner`/`LoadingSkeleton` where a full + `SkeletonGroup` (UX-2) is overkill. + **Verify:** `pnpm typecheck && pnpm lint && pnpm build`. + +## UX-11 — Adopt `@bytelyst/auth-ui` on the login surface + +> `src/app/login/page.tsx` is a hand-rolled `
` with a second MFA step. The existing +> `/api/auth/*` proxy routes and `auth-context` stay as-is — only the **presentation** changes. + +- [ ] **11.1** Add `@bytelyst/auth-ui` as a `workspace:*` dep; `pnpm install` from the root. +- [ ] **11.2** Replace the password form with `LoginForm` and the OTP step with `MfaChallenge`, + wiring their submit handlers to the current login/MFA fetch calls. Add `SocialButtons` + only for providers the backend actually supports (gate on `/api/auth/oauth/[provider]`). +- [ ] **11.3** Keep all existing auth tests green; add a render test asserting the login form + shows email/password fields + submit. + **Verify:** `pnpm typecheck && pnpm lint && pnpm test && pnpm build`. + +## UX-12 — Detail & board richness (Tabs · Tooltip · Drawer · Timeline · rich-text) + +- [ ] **12.1** `/dashboard` board↔list: use `SegmentedControl` (or `Tabs`) for the view toggle + instead of bespoke buttons; `Tooltip` on truncated titles / status dots. +- [ ] **12.2** Item detail: move row/item actions into an `ActionMenu`, and render the item's + activity/comment history with `Timeline`. +- [ ] **12.3** _(stretch — needs HTML-capable description/comment storage)_ Swap the plain + description/comment `