From 4537ed271e342051de7d2b669725a8a68d74f614 Mon Sep 17 00:00:00 2001 From: saravanakumardb1 Date: Thu, 5 Mar 2026 21:42:19 -0800 Subject: [PATCH] docs(ux-lab): consolidate each kit to single PROMPT.md + .gitignore only --- .../ACCEPTANCE_CHECKLIST.md | 11 -- .../DESIGN_SYSTEM_BRIEF.md | 26 --- .../INTEGRATION_NOTES.md | 13 -- .../ux-lab/bolt-command-palette-kit/PROMPT.md | 139 +++++++------- .../ux-lab/bolt-command-palette-kit/README.md | 23 --- .../REPO_SCOPING_RULES.md | 9 - .../UX_TOKEN_CONTRACT.md | 23 --- .../bolt-ops-ui-kit/ACCEPTANCE_CHECKLIST.md | 14 -- .../bolt-ops-ui-kit/DESIGN_SYSTEM_BRIEF.md | 36 ---- .../bolt-ops-ui-kit/INTEGRATION_NOTES.md | 24 --- dashboards/ux-lab/bolt-ops-ui-kit/PROMPT.md | 178 ++++++++---------- dashboards/ux-lab/bolt-ops-ui-kit/README.md | 24 --- .../bolt-ops-ui-kit/REPO_SCOPING_RULES.md | 9 - .../bolt-ops-ui-kit/UX_TOKEN_CONTRACT.md | 39 ---- .../ACCEPTANCE_CHECKLIST.md | 11 -- .../DESIGN_SYSTEM_BRIEF.md | 26 --- .../INTEGRATION_NOTES.md | 9 - .../ux-lab/bolt-telemetry-explorer/PROMPT.md | 118 ++++++------ .../ux-lab/bolt-telemetry-explorer/README.md | 24 --- .../REPO_SCOPING_RULES.md | 9 - .../UX_TOKEN_CONTRACT.md | 17 -- .../ACCEPTANCE_CHECKLIST.md | 11 -- .../DESIGN_SYSTEM_BRIEF.md | 27 --- .../bolt-timeline-studio/INTEGRATION_NOTES.md | 9 - .../ux-lab/bolt-timeline-studio/PROMPT.md | 123 ++++++------ .../ux-lab/bolt-timeline-studio/README.md | 25 --- .../REPO_SCOPING_RULES.md | 9 - .../bolt-timeline-studio/UX_TOKEN_CONTRACT.md | 19 -- .../ACCEPTANCE_CHECKLIST.md | 11 -- .../DESIGN_SYSTEM_BRIEF.md | 19 -- .../INTEGRATION_NOTES.md | 9 - .../PROMPT.md | 118 ++++++------ .../README.md | 24 --- .../REPO_SCOPING_RULES.md | 9 - .../UX_TOKEN_CONTRACT.md | 17 -- .../ACCEPTANCE_CHECKLIST.md | 11 -- .../DESIGN_SYSTEM_BRIEF.md | 26 --- .../INTEGRATION_NOTES.md | 19 -- .../lovable-notify-states-kit/PROMPT.md | 158 +++++++--------- .../lovable-notify-states-kit/README.md | 22 --- .../REPO_SCOPING_RULES.md | 9 - .../UX_TOKEN_CONTRACT.md | 35 ---- .../ACCEPTANCE_CHECKLIST.md | 11 -- .../DESIGN_SYSTEM_BRIEF.md | 25 --- .../INTEGRATION_NOTES.md | 12 -- .../ux-lab/lovable-onboarding-flow/PROMPT.md | 127 +++++++------ .../ux-lab/lovable-onboarding-flow/README.md | 23 --- .../REPO_SCOPING_RULES.md | 9 - .../UX_TOKEN_CONTRACT.md | 17 -- .../ACCEPTANCE_CHECKLIST.md | 11 -- .../DESIGN_SYSTEM_BRIEF.md | 25 --- .../INTEGRATION_NOTES.md | 15 -- .../ux-lab/lovable-settings-ux-kit/PROMPT.md | 141 +++++++------- .../ux-lab/lovable-settings-ux-kit/README.md | 21 --- .../REPO_SCOPING_RULES.md | 9 - .../UX_TOKEN_CONTRACT.md | 17 -- 56 files changed, 543 insertions(+), 1412 deletions(-) delete mode 100644 dashboards/ux-lab/bolt-command-palette-kit/ACCEPTANCE_CHECKLIST.md delete mode 100644 dashboards/ux-lab/bolt-command-palette-kit/DESIGN_SYSTEM_BRIEF.md delete mode 100644 dashboards/ux-lab/bolt-command-palette-kit/INTEGRATION_NOTES.md delete mode 100644 dashboards/ux-lab/bolt-command-palette-kit/README.md delete mode 100644 dashboards/ux-lab/bolt-command-palette-kit/REPO_SCOPING_RULES.md delete mode 100644 dashboards/ux-lab/bolt-command-palette-kit/UX_TOKEN_CONTRACT.md delete mode 100644 dashboards/ux-lab/bolt-ops-ui-kit/ACCEPTANCE_CHECKLIST.md delete mode 100644 dashboards/ux-lab/bolt-ops-ui-kit/DESIGN_SYSTEM_BRIEF.md delete mode 100644 dashboards/ux-lab/bolt-ops-ui-kit/INTEGRATION_NOTES.md delete mode 100644 dashboards/ux-lab/bolt-ops-ui-kit/README.md delete mode 100644 dashboards/ux-lab/bolt-ops-ui-kit/REPO_SCOPING_RULES.md delete mode 100644 dashboards/ux-lab/bolt-ops-ui-kit/UX_TOKEN_CONTRACT.md delete mode 100644 dashboards/ux-lab/bolt-telemetry-explorer/ACCEPTANCE_CHECKLIST.md delete mode 100644 dashboards/ux-lab/bolt-telemetry-explorer/DESIGN_SYSTEM_BRIEF.md delete mode 100644 dashboards/ux-lab/bolt-telemetry-explorer/INTEGRATION_NOTES.md delete mode 100644 dashboards/ux-lab/bolt-telemetry-explorer/README.md delete mode 100644 dashboards/ux-lab/bolt-telemetry-explorer/REPO_SCOPING_RULES.md delete mode 100644 dashboards/ux-lab/bolt-telemetry-explorer/UX_TOKEN_CONTRACT.md delete mode 100644 dashboards/ux-lab/bolt-timeline-studio/ACCEPTANCE_CHECKLIST.md delete mode 100644 dashboards/ux-lab/bolt-timeline-studio/DESIGN_SYSTEM_BRIEF.md delete mode 100644 dashboards/ux-lab/bolt-timeline-studio/INTEGRATION_NOTES.md delete mode 100644 dashboards/ux-lab/bolt-timeline-studio/README.md delete mode 100644 dashboards/ux-lab/bolt-timeline-studio/REPO_SCOPING_RULES.md delete mode 100644 dashboards/ux-lab/bolt-timeline-studio/UX_TOKEN_CONTRACT.md delete mode 100644 dashboards/ux-lab/lovable-design-tokens-playground/ACCEPTANCE_CHECKLIST.md delete mode 100644 dashboards/ux-lab/lovable-design-tokens-playground/DESIGN_SYSTEM_BRIEF.md delete mode 100644 dashboards/ux-lab/lovable-design-tokens-playground/INTEGRATION_NOTES.md delete mode 100644 dashboards/ux-lab/lovable-design-tokens-playground/README.md delete mode 100644 dashboards/ux-lab/lovable-design-tokens-playground/REPO_SCOPING_RULES.md delete mode 100644 dashboards/ux-lab/lovable-design-tokens-playground/UX_TOKEN_CONTRACT.md delete mode 100644 dashboards/ux-lab/lovable-notify-states-kit/ACCEPTANCE_CHECKLIST.md delete mode 100644 dashboards/ux-lab/lovable-notify-states-kit/DESIGN_SYSTEM_BRIEF.md delete mode 100644 dashboards/ux-lab/lovable-notify-states-kit/INTEGRATION_NOTES.md delete mode 100644 dashboards/ux-lab/lovable-notify-states-kit/README.md delete mode 100644 dashboards/ux-lab/lovable-notify-states-kit/REPO_SCOPING_RULES.md delete mode 100644 dashboards/ux-lab/lovable-notify-states-kit/UX_TOKEN_CONTRACT.md delete mode 100644 dashboards/ux-lab/lovable-onboarding-flow/ACCEPTANCE_CHECKLIST.md delete mode 100644 dashboards/ux-lab/lovable-onboarding-flow/DESIGN_SYSTEM_BRIEF.md delete mode 100644 dashboards/ux-lab/lovable-onboarding-flow/INTEGRATION_NOTES.md delete mode 100644 dashboards/ux-lab/lovable-onboarding-flow/README.md delete mode 100644 dashboards/ux-lab/lovable-onboarding-flow/REPO_SCOPING_RULES.md delete mode 100644 dashboards/ux-lab/lovable-onboarding-flow/UX_TOKEN_CONTRACT.md delete mode 100644 dashboards/ux-lab/lovable-settings-ux-kit/ACCEPTANCE_CHECKLIST.md delete mode 100644 dashboards/ux-lab/lovable-settings-ux-kit/DESIGN_SYSTEM_BRIEF.md delete mode 100644 dashboards/ux-lab/lovable-settings-ux-kit/INTEGRATION_NOTES.md delete mode 100644 dashboards/ux-lab/lovable-settings-ux-kit/README.md delete mode 100644 dashboards/ux-lab/lovable-settings-ux-kit/REPO_SCOPING_RULES.md delete mode 100644 dashboards/ux-lab/lovable-settings-ux-kit/UX_TOKEN_CONTRACT.md diff --git a/dashboards/ux-lab/bolt-command-palette-kit/ACCEPTANCE_CHECKLIST.md b/dashboards/ux-lab/bolt-command-palette-kit/ACCEPTANCE_CHECKLIST.md deleted file mode 100644 index c05a2377..00000000 --- a/dashboards/ux-lab/bolt-command-palette-kit/ACCEPTANCE_CHECKLIST.md +++ /dev/null @@ -1,11 +0,0 @@ -# Acceptance Checklist - -- Before push: `git status` is clean except for the intended app source changes. -- Before push: review `git diff` and confirm no unrelated formatting/refactors. -- No `console.log`. -- No hardcoded colors. -- No network calls. -- Forbidden files are NOT committed: `.env*`, `.next/`, `node_modules/`, `.vercel/`. -- Components in `src/components/**`; no imports from `src/app/**`. -- `pnpm run check` passes. -- `pnpm run build` passes (`next build --webpack`). diff --git a/dashboards/ux-lab/bolt-command-palette-kit/DESIGN_SYSTEM_BRIEF.md b/dashboards/ux-lab/bolt-command-palette-kit/DESIGN_SYSTEM_BRIEF.md deleted file mode 100644 index 7b283c0f..00000000 --- a/dashboards/ux-lab/bolt-command-palette-kit/DESIGN_SYSTEM_BRIEF.md +++ /dev/null @@ -1,26 +0,0 @@ -# Design System Brief (Must Follow) - -This repo is a **command palette + keyboard shortcuts kit** intended for production reuse. - -## Non-negotiable rules - -- No `console.log`. -- No network calls. -- No hardcoded colors (no hex/rgb/hsl). Use CSS variables only. - -## Token usage - -- Use `UX_TOKEN_CONTRACT.md`. -- Style via CSS variables (`--ux-*`) and Tailwind utilities. - -## Component architecture - -- Reusable components in `src/components/**`. -- Pages in `src/app/**` compose components. -- Components must NOT import from `src/app/**`. - -## Accessibility - -- Focus trap for dialogs/palette. -- `Esc` closes. -- Keyboard-first UX. diff --git a/dashboards/ux-lab/bolt-command-palette-kit/INTEGRATION_NOTES.md b/dashboards/ux-lab/bolt-command-palette-kit/INTEGRATION_NOTES.md deleted file mode 100644 index 2f556f1f..00000000 --- a/dashboards/ux-lab/bolt-command-palette-kit/INTEGRATION_NOTES.md +++ /dev/null @@ -1,13 +0,0 @@ -# Integration Notes - -This repo provides reusable primitives for: - -- Command palette (`Cmd+K`) -- Keyboard shortcut registry -- Action search + grouping -- Recent actions - -Integration pattern: - -- Copy `src/components/**` + any `src/lib/**` helpers into target app. -- Map `--ux-*` tokens to target app tokens. diff --git a/dashboards/ux-lab/bolt-command-palette-kit/PROMPT.md b/dashboards/ux-lab/bolt-command-palette-kit/PROMPT.md index b620ba12..779acea6 100644 --- a/dashboards/ux-lab/bolt-command-palette-kit/PROMPT.md +++ b/dashboards/ux-lab/bolt-command-palette-kit/PROMPT.md @@ -1,92 +1,87 @@ -# Bolt — Command Palette + Keyboard Shortcuts Kit (Micro-App) +# Bolt — Command Palette + Keyboard Shortcuts Kit -Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`, `UX_TOKEN_CONTRACT.md`, `REPO_SCOPING_RULES.md`, and `ACCEPTANCE_CHECKLIST.md`. +**GitHub repo:** `saravanakumardb/temp_bolt-command-palette-kit` + +## Push Instructions + +- Push directly to `main` — do NOT open a PR +- Only modify files in this repo + +## Rules + +- No `console.log` +- No network calls — mock data / localStorage only +- No hardcoded colors — no hex, no rgb/rgba/hsl, no `bg-[#123456]` Tailwind classes +- Do NOT commit `.env*`, `.next/`, `node_modules/`, `.vercel/` +- pnpm only +- `pnpm run check` must pass (`tsc --noEmit` + `eslint`) +- `pnpm run build` must pass (`next build --webpack`) + +## CSS Token Contract + +Define in `src/app/globals.css` under `:root` (add `.dark` override): + +- `--ux-bg` — page background +- `--ux-surface` — card/panel surface +- `--ux-surface-2` — elevated surface +- `--ux-border` — borders +- `--ux-text` — primary text +- `--ux-text-muted` — secondary text +- `--ux-accent` — primary accent +- `--ux-accent-foreground` — text on accent +- `--ux-danger` — destructive/error +- `--ux-warning` — warning +- `--ux-success` — success +- `--ux-ring` — focus ring +- `--ux-shadow` — shadows + +Use only via Tailwind: `bg-[var(--ux-surface)]`, `text-[var(--ux-text)]`, `border-[var(--ux-border)]` + +## Component Architecture + +- Reusable components → `src/components/` +- Pages in `src/app/**` compose components only +- Components must NOT import from `src/app/**` + +## Stack + +- Next.js 16 App Router, React 19, TypeScript strict +- TailwindCSS v4, pnpm ## Mission -Build a production-grade **command palette + keyboard shortcuts kit** micro-app (Next.js App Router) that we can copy into: +Build a production-grade **command palette + keyboard shortcuts kit** micro-app reusable across `dashboards/admin-web`, `dashboards/tracker-web`, and product web apps. -- `dashboards/admin-web` -- `dashboards/tracker-web` -- product web apps - -This is implementation-heavy: correctness, a11y, and clean component boundaries matter. - -## Constraints - -- Only modify files in this repository. -- pnpm only. -- Next.js 16 App Router, React 19, TypeScript strict. -- TailwindCSS v4. -- No network calls. -- No `console.log`. -- No hardcoded colors — use `--ux-*` CSS variables from `UX_TOKEN_CONTRACT.md`. -- Avoid unnecessary dependencies. If you add a dependency, justify why it is required. - -## Must-have routes +## Pages - `/` overview landing - `/palette` command palette demo -- `/shortcuts` shortcuts reference + editor demo -- `/integration` copy/paste integration guide page (UI-only) +- `/shortcuts` shortcuts reference + editor +- `/integration` copy/paste integration guide (UI-only) -## Core deliverable: Command palette - -Build `CommandPalette` with: +## Command Palette - Open via `Cmd+K` (and `Ctrl+K` fallback) -- Search box -- Grouped actions (e.g., Navigation, Actions, Settings) -- Optional action keywords (alias terms) -- Recent actions (persist to localStorage) -- Favorites/pinned actions (localStorage) -- Keyboard navigation: - - Up/Down - - Enter to execute - - Esc to close +- Search box with grouped actions (Navigation, Actions, Settings) +- Optional action keywords (aliases) +- Recent actions + favorites/pinned (localStorage) +- Keyboard: Up/Down, Enter to execute, Esc to close - Mouse support +- Dialog semantics, focus trap, focus returns on close, ARIA labels -Accessibility requirements: - -- Proper dialog semantics -- Focus trap while open -- Focus returns to opener on close -- ARIA labels for listbox/options - -## Shortcuts registry - -Create a small shortcuts registry system: +## Shortcuts Registry - `registerShortcut({ id, keys, description, scope })` -- Scopes: global vs page-specific (simple; no complex routing coupling) -- A `/shortcuts` page that lists all registered shortcuts -- A UI to remap a shortcut (client-side only) and persist to localStorage -- Collision detection (warn if two actions use the same key combo) +- Scopes: global vs page-specific +- `/shortcuts` page listing all registered shortcuts +- Remap shortcuts UI (localStorage), collision detection -## Demo content +## Demo Content -Include 20–30 demo actions: - -- Navigation actions to pages -- Theme toggle -- “Copy JSON” demo action -- “Clear local data” demo action with confirm dialog - -## Deliverables - -- Full Next.js app with scripts: - - `dev` - - `check` (must run `tsc --noEmit` + `eslint`) - - `build` (must run `next build --webpack`) +20–30 demo actions: navigation, theme toggle, "Copy JSON", "Clear local data" (confirm dialog) ## Verification -From repo root: - -- `pnpm install` -- `pnpm run check` -- `pnpm run build` - -## Output expectation - -Open a PR that only changes files in this repo. +``` +pnpm install && pnpm run check && pnpm run build +``` diff --git a/dashboards/ux-lab/bolt-command-palette-kit/README.md b/dashboards/ux-lab/bolt-command-palette-kit/README.md deleted file mode 100644 index 752c19e1..00000000 --- a/dashboards/ux-lab/bolt-command-palette-kit/README.md +++ /dev/null @@ -1,23 +0,0 @@ -# Bolt — Command Palette + Keyboard Shortcuts Kit - -**GitHub repo:** [`saravanakumardb/temp_bolt-command-palette-kit`](https://github.com/saravanakumardb/temp_bolt-command-palette-kit) - -This folder is designed to be used as a standalone repo. - -## What it is - -A token-driven UI kit for: - -- Command palette (Cmd+K) -- Keyboard shortcut registry -- Action search + grouping -- Recent/favorites actions - -## How to use - -- Read `PROMPT.md` for the build assignment. -- Follow `DESIGN_SYSTEM_BRIEF.md` and `UX_TOKEN_CONTRACT.md` strictly. - -## Reuse goal - -Components should be copy/paste reusable into other dashboards/apps. diff --git a/dashboards/ux-lab/bolt-command-palette-kit/REPO_SCOPING_RULES.md b/dashboards/ux-lab/bolt-command-palette-kit/REPO_SCOPING_RULES.md deleted file mode 100644 index 836b4244..00000000 --- a/dashboards/ux-lab/bolt-command-palette-kit/REPO_SCOPING_RULES.md +++ /dev/null @@ -1,9 +0,0 @@ -# Repo Scoping Rules - -**GitHub repo:** `saravanakumardb/temp_bolt-command-palette-kit` -**URL:** `https://github.com/saravanakumardb/temp_bolt-command-palette-kit` - -- Only modify files inside this repository. -- When publishing / pushing, target `saravanakumardb/temp_bolt-command-palette-kit` only. -- Do NOT commit to `learning_ai_common_plat` or any other repo. -- If you believe a change is needed outside this repo, stop and ask. diff --git a/dashboards/ux-lab/bolt-command-palette-kit/UX_TOKEN_CONTRACT.md b/dashboards/ux-lab/bolt-command-palette-kit/UX_TOKEN_CONTRACT.md deleted file mode 100644 index 9767e1f7..00000000 --- a/dashboards/ux-lab/bolt-command-palette-kit/UX_TOKEN_CONTRACT.md +++ /dev/null @@ -1,23 +0,0 @@ -# UX Token Contract (Shared) - -Define these CSS variables in `src/app/globals.css` under `:root` and optionally provide a `.dark` override. - -- `--ux-bg` -- `--ux-surface` -- `--ux-surface-2` -- `--ux-border` -- `--ux-text` -- `--ux-text-muted` -- `--ux-accent` -- `--ux-accent-foreground` -- `--ux-danger` -- `--ux-warning` -- `--ux-success` -- `--ux-ring` -- `--ux-shadow` - -Usage examples: - -- `bg-[var(--ux-surface)]` -- `text-[var(--ux-text)]` -- `border-[var(--ux-border)]` diff --git a/dashboards/ux-lab/bolt-ops-ui-kit/ACCEPTANCE_CHECKLIST.md b/dashboards/ux-lab/bolt-ops-ui-kit/ACCEPTANCE_CHECKLIST.md deleted file mode 100644 index f5d6165c..00000000 --- a/dashboards/ux-lab/bolt-ops-ui-kit/ACCEPTANCE_CHECKLIST.md +++ /dev/null @@ -1,14 +0,0 @@ -# Acceptance Checklist (PR Gate) - -Your PR is acceptable only if all are true: - -- Before push: `git status` is clean except for the intended app source changes. -- Before push: review `git diff` and confirm no unrelated formatting/refactors. -- No `console.log`. -- No hardcoded colors (hex/rgb/hsl) anywhere. -- No network calls. -- Forbidden files are NOT committed: `.env*`, `.next/`, `node_modules/`, `.vercel/`. -- All reusable components live in `src/components/**`. -- Components do not import from `src/app/**`. -- `pnpm run check` passes. -- `pnpm run build` passes using `next build --webpack`. diff --git a/dashboards/ux-lab/bolt-ops-ui-kit/DESIGN_SYSTEM_BRIEF.md b/dashboards/ux-lab/bolt-ops-ui-kit/DESIGN_SYSTEM_BRIEF.md deleted file mode 100644 index 84fb5d30..00000000 --- a/dashboards/ux-lab/bolt-ops-ui-kit/DESIGN_SYSTEM_BRIEF.md +++ /dev/null @@ -1,36 +0,0 @@ -# Design System Brief (Must Follow) - -These rules exist so this repo’s output is **production-reusable** across the ByteLyst workspace dashboards and product web apps. - -## Non-negotiable rules - -- No `console.log`. -- No hardcoded API URLs. -- No network calls in this repo (use mock data / local JSON / localStorage). -- **No hardcoded colors**: - - No hex (e.g. `#fff`) - - No `rgb/rgba()` - - No `hsl/hsla()` - - No Tailwind arbitrary hex classes (e.g. `bg-[#123456]`) - -## Token usage - -- Use the shared token contract in `UX_TOKEN_CONTRACT.md`. -- Components must reference CSS variables via Tailwind arbitrary values, e.g.: - - `bg-[var(--ux-surface)]` - - `text-[var(--ux-text)]` - - `border-[var(--ux-border)]` - -## Component architecture (reusability) - -- Reusable components live in `src/components/`. -- Pages under `src/app/**` should mostly compose components. -- Components must NOT import from `src/app/**`. -- Keep data mocks in `src/data/**`. - -## Accessibility + UX - -- Keyboard accessible (Tab/Shift+Tab, Enter/Space). -- `Esc` closes dialogs/drawers. -- Focus returns to the triggering control when overlays close. -- Mobile usable. diff --git a/dashboards/ux-lab/bolt-ops-ui-kit/INTEGRATION_NOTES.md b/dashboards/ux-lab/bolt-ops-ui-kit/INTEGRATION_NOTES.md deleted file mode 100644 index c4678da9..00000000 --- a/dashboards/ux-lab/bolt-ops-ui-kit/INTEGRATION_NOTES.md +++ /dev/null @@ -1,24 +0,0 @@ -# Integration Notes (Read Me) - -This repo is a UI/UX pattern source. - -## Intended reuse - -We will copy selected components from `src/components/**` into: - -- shared dashboards (admin/tracker) -- product web apps - -## How to keep code copy-friendly - -- Keep reusable logic in `src/lib/**` (pure TS, UI-agnostic where possible). -- Keep data mocks in `src/data/**`. -- Avoid tight coupling to route segments. -- Prefer generic names: `DataTable`, `FiltersPanel`, `DetailsDrawer`, `EmptyState`. - -## What will block adoption - -- Any hardcoded colors -- Network calls / real backend wiring -- Components that only work inside a specific page due to imports from `src/app/**` -- Heavy dependency additions diff --git a/dashboards/ux-lab/bolt-ops-ui-kit/PROMPT.md b/dashboards/ux-lab/bolt-ops-ui-kit/PROMPT.md index 9bfdb202..9610b5c3 100644 --- a/dashboards/ux-lab/bolt-ops-ui-kit/PROMPT.md +++ b/dashboards/ux-lab/bolt-ops-ui-kit/PROMPT.md @@ -1,121 +1,99 @@ -# Bolt App 1 — Ops UI Kit (Micro-App) +# Bolt — Ops UI Kit -Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`. +**GitHub repo:** `saravanakumardb/temp_bolt-ops-ui-kit` + +## Push Instructions + +- Push directly to `main` — do NOT open a PR +- Only modify files in this repo + +## Rules + +- No `console.log` +- No network calls — mock data / localStorage only +- No hardcoded colors — no hex, no rgb/rgba/hsl, no `bg-[#123456]` Tailwind classes +- Do NOT commit `.env*`, `.next/`, `node_modules/`, `.vercel/` +- pnpm only +- `pnpm run check` must pass (`tsc --noEmit` + `eslint`) +- `pnpm run build` must pass (`next build --webpack`) + +## CSS Token Contract + +Define in `src/app/globals.css` under `:root` (add `.dark` override): + +- `--ux-bg` — page background +- `--ux-surface` — card/panel surface +- `--ux-surface-2` — elevated surface +- `--ux-border` — borders +- `--ux-text` — primary text +- `--ux-text-muted` — secondary text +- `--ux-accent` — primary accent +- `--ux-accent-foreground` — text on accent +- `--ux-danger` — destructive/error +- `--ux-warning` — warning +- `--ux-success` — success +- `--ux-ring` — focus ring +- `--ux-shadow` — shadows + +Use only via Tailwind: `bg-[var(--ux-surface)]`, `text-[var(--ux-text)]`, `border-[var(--ux-border)]` + +## Component Architecture + +- Reusable components → `src/components/` +- Pages in `src/app/**` compose components only +- Components must NOT import from `src/app/**` + +## Stack + +- Next.js 16 App Router, React 19, TypeScript strict +- TailwindCSS v4, pnpm ## Mission -Build a **UI/UX-rich** Next.js 16 micro-app called **Ops UI Kit** that showcases production-grade operations dashboard patterns. This app will later be cross-pollinated into `dashboards/admin-web` and `dashboards/tracker-web`. +Build a **UI/UX-rich** Next.js 16 micro-app showcasing production-grade operations dashboard patterns for reuse in `dashboards/admin-web` and `dashboards/tracker-web`. -## Scope / Safety +Additional stack: shadcn/ui-style components (Radix + Tailwind), lucide-react, data mocks in `src/data/` -- Only change files in this repository. -- **No backend / no network calls.** Use mock data and localStorage. -- **No auth, no Cosmos, no Key Vault.** -- **No `console.log`.** -- **No hardcoded colors.** Define a small set of CSS variables in `src/app/globals.css` (e.g. `--ux-*`) and only use those + Tailwind utilities. -- **Do not edit** any other repo folder. +## Pages -## Stack requirements +- `/` overview landing + links +- `/table` DataTable demo +- `/filters` filter builder demo +- `/details` drawers/modals demo +- `/states` loading/empty/error/success patterns +- `/kpi` KPI cards + chart placeholders -- Next.js `16.1.x` (App Router) -- React `19.x` -- TypeScript strict -- TailwindCSS v4 -- shadcn/ui-style components (Radix + Tailwind) -- lucide-react icons -- pnpm package manager +## App Shell -## App pages (required) +- Left sidebar (responsive), top bar: global search, theme toggle, help button +- `Cmd+K` opens command palette, `Esc` closes modal/drawer -- `/` — overview landing + links to demos -- `/table` — DataTable demo -- `/filters` — filter builder demo -- `/details` — drawers/modals demo -- `/states` — loading/empty/error/success patterns -- `/kpi` — KPI cards + tiny chart placeholders +## DataTable -## App shell UX (required) +Mock ~80–120 rows (incidents/webhook deliveries): `id`, `status`, `severity`, `service`, `createdAt`, `requestId`, `summary`, `tags` -- Left sidebar navigation (responsive) -- Top bar with: - - global search input (client-side; filters mock data) - - theme toggle (light/dark) - - help button showing shortcuts -- Keyboard shortcuts: - - `Cmd+K` opens command palette - - `Esc` closes modal/drawer +- Sorting, pagination, column visibility toggle +- Row selection + bulk actions bar +- Per-row menu: copy requestId, copy JSON, open drawer +- Sticky header, expandable row details -## Demo requirements (high polish) +## Filter Builder -### 1) DataTable +- Faceted filters (status, severity, service), date range, free-text search +- Active filter chips + clear all +- Save/load presets (localStorage) -Mock dataset (~80–120 rows) representing “incidents” or “webhook deliveries” with: +## Details Drawer -- `id`, `status`, `severity`, `service`, `createdAt`, `requestId`, `summary`, `tags` +Right-side drawer on row click with tabs: Overview (key/value), Raw JSON, Notes (editable, localStorage) +Focus: moves inside on open, returns to triggering row on close -Table must include: +## States Gallery -- sorting -- pagination -- column visibility toggle -- row selection + bulk actions bar -- per-row actions menu: - - copy `requestId` - - copy row JSON - - open details drawer -- sticky header -- expandable row details - -### 2) Filter Builder - -A filter panel supporting: - -- faceted filters (status, severity, service) -- date range (simple UI) -- free-text search -- active filter chips row -- clear all -- save/load presets (localStorage) - -### 3) Details Drawer - -Row click opens right-side drawer with tabs: - -- Overview (key/value) -- Raw JSON (pretty-printed) -- Notes (editable, stored locally) - -Focus rules: - -- opening drawer moves focus inside -- closing returns focus to triggering row - -### 4) States Gallery - -Reusable patterns for: - -- skeleton loading -- empty state with CTA -- inline error banner with retry -- toast notifications -- destructive confirm dialog - -## Deliverables - -Create a complete app with: - -- `package.json` scripts: `dev`, `check`, `build`, `lint`, `test` -- `check` must run `tsc --noEmit` + `eslint` -- `build` must run `next build --webpack` +Skeleton loading, empty state + CTA, inline error banner + retry, toast notifications, destructive confirm dialog ## Verification -From the repo root: - -- `pnpm install` -- `pnpm run check` -- `pnpm run build` - -## Output expectation - -Open a PR containing only this app. No other repo changes. +``` +pnpm install && pnpm run check && pnpm run build +``` diff --git a/dashboards/ux-lab/bolt-ops-ui-kit/README.md b/dashboards/ux-lab/bolt-ops-ui-kit/README.md deleted file mode 100644 index b247d8d5..00000000 --- a/dashboards/ux-lab/bolt-ops-ui-kit/README.md +++ /dev/null @@ -1,24 +0,0 @@ -# Bolt — Ops UI Kit - -**GitHub repo:** [`saravanakumardb/temp_bolt-ops-ui-kit`](https://github.com/saravanakumardb/temp_bolt-ops-ui-kit) - -This folder is designed to be used as a standalone repo. - -## What it is - -A token-driven operations dashboard UI kit for: - -- DataTable with sorting, pagination, bulk actions -- Filter builder with faceted filters + presets -- Details drawer with tabs (Overview, Raw JSON, Notes) -- States gallery (skeleton, empty, error, toast, confirm dialog) -- KPI cards + chart placeholders - -## How to use - -- Read `PROMPT.md` for the build assignment. -- Follow `DESIGN_SYSTEM_BRIEF.md` and `UX_TOKEN_CONTRACT.md` strictly. - -## Reuse goal - -Components should be copy/paste reusable into `dashboards/admin-web` and `dashboards/tracker-web`. diff --git a/dashboards/ux-lab/bolt-ops-ui-kit/REPO_SCOPING_RULES.md b/dashboards/ux-lab/bolt-ops-ui-kit/REPO_SCOPING_RULES.md deleted file mode 100644 index 12d4d85c..00000000 --- a/dashboards/ux-lab/bolt-ops-ui-kit/REPO_SCOPING_RULES.md +++ /dev/null @@ -1,9 +0,0 @@ -# Repo Scoping Rules - -**GitHub repo:** `saravanakumardb/temp_bolt-ops-ui-kit` -**URL:** `https://github.com/saravanakumardb/temp_bolt-ops-ui-kit` - -- Only modify files inside this repository. -- When publishing / pushing, target `saravanakumardb/temp_bolt-ops-ui-kit` only. -- Do NOT commit to `learning_ai_common_plat` or any other repo. -- If you believe a change is needed outside this repo, stop and ask. diff --git a/dashboards/ux-lab/bolt-ops-ui-kit/UX_TOKEN_CONTRACT.md b/dashboards/ux-lab/bolt-ops-ui-kit/UX_TOKEN_CONTRACT.md deleted file mode 100644 index 94acefba..00000000 --- a/dashboards/ux-lab/bolt-ops-ui-kit/UX_TOKEN_CONTRACT.md +++ /dev/null @@ -1,39 +0,0 @@ -# UX Token Contract (Shared) - -This repo must use the following CSS custom properties (tokens). Define them in `src/app/globals.css` under `:root` and optionally provide a `.dark` override. - -## Core surfaces - -- `--ux-bg` -- `--ux-surface` -- `--ux-surface-2` -- `--ux-border` - -## Text - -- `--ux-text` -- `--ux-text-muted` - -## Brand / states - -- `--ux-accent` -- `--ux-accent-foreground` -- `--ux-danger` -- `--ux-warning` -- `--ux-success` - -## Focus + shadows - -- `--ux-ring` -- `--ux-shadow` - -## Usage examples - -- Background: `bg-[var(--ux-bg)]` -- Card: `bg-[var(--ux-surface)] border border-[var(--ux-border)]` -- Primary button: `bg-[var(--ux-accent)] text-[var(--ux-accent-foreground)]` -- Muted text: `text-[var(--ux-text-muted)]` - -## Integration note - -When this repo’s components are copied into another app, we will map these variables to that app’s token system. diff --git a/dashboards/ux-lab/bolt-telemetry-explorer/ACCEPTANCE_CHECKLIST.md b/dashboards/ux-lab/bolt-telemetry-explorer/ACCEPTANCE_CHECKLIST.md deleted file mode 100644 index c05a2377..00000000 --- a/dashboards/ux-lab/bolt-telemetry-explorer/ACCEPTANCE_CHECKLIST.md +++ /dev/null @@ -1,11 +0,0 @@ -# Acceptance Checklist - -- Before push: `git status` is clean except for the intended app source changes. -- Before push: review `git diff` and confirm no unrelated formatting/refactors. -- No `console.log`. -- No hardcoded colors. -- No network calls. -- Forbidden files are NOT committed: `.env*`, `.next/`, `node_modules/`, `.vercel/`. -- Components in `src/components/**`; no imports from `src/app/**`. -- `pnpm run check` passes. -- `pnpm run build` passes (`next build --webpack`). diff --git a/dashboards/ux-lab/bolt-telemetry-explorer/DESIGN_SYSTEM_BRIEF.md b/dashboards/ux-lab/bolt-telemetry-explorer/DESIGN_SYSTEM_BRIEF.md deleted file mode 100644 index dbe8810b..00000000 --- a/dashboards/ux-lab/bolt-telemetry-explorer/DESIGN_SYSTEM_BRIEF.md +++ /dev/null @@ -1,26 +0,0 @@ -# Design System Brief (Must Follow) - -These rules exist so this repo’s output is **production-reusable** across the ByteLyst workspace dashboards and product web apps. - -## Non-negotiable rules - -- No `console.log`. -- No hardcoded API URLs. -- No network calls in this repo. -- **No hardcoded colors** (no hex/rgb/hsl). - -## Token usage - -- Use `UX_TOKEN_CONTRACT.md`. -- Style via CSS variables (`--ux-*`). - -## Component architecture - -- Reusable components in `src/components/**`. -- No imports from `src/app/**` inside components. -- Mock data in `src/data/**`. - -## UX - -- Keyboard accessible. -- Drawer/modal focus management. diff --git a/dashboards/ux-lab/bolt-telemetry-explorer/INTEGRATION_NOTES.md b/dashboards/ux-lab/bolt-telemetry-explorer/INTEGRATION_NOTES.md deleted file mode 100644 index 33d28d9c..00000000 --- a/dashboards/ux-lab/bolt-telemetry-explorer/INTEGRATION_NOTES.md +++ /dev/null @@ -1,9 +0,0 @@ -# Integration Notes - -This repo is a pattern source for an observability-style telemetry explorer. - -Keep it reusable by: - -- Building generic primitives: `FacetFilter`, `FilterChipsRow`, `DetailsDrawer`, `JsonViewer`. -- Keeping grouping/fingerprinting logic in `src/lib/**`. -- Styling strictly via `--ux-*` tokens. diff --git a/dashboards/ux-lab/bolt-telemetry-explorer/PROMPT.md b/dashboards/ux-lab/bolt-telemetry-explorer/PROMPT.md index 0eda3009..7d9e6619 100644 --- a/dashboards/ux-lab/bolt-telemetry-explorer/PROMPT.md +++ b/dashboards/ux-lab/bolt-telemetry-explorer/PROMPT.md @@ -1,76 +1,86 @@ -# Bolt App 3 — Telemetry Explorer (Local-Only Micro-App) +# Bolt — Telemetry Explorer -Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`. +**GitHub repo:** `saravanakumardb/temp_bolt-telemetry-explorer` + +## Push Instructions + +- Push directly to `main` — do NOT open a PR +- Only modify files in this repo + +## Rules + +- No `console.log` +- No network calls — mock data / localStorage only +- No hardcoded colors — no hex, no rgb/rgba/hsl, no `bg-[#123456]` Tailwind classes +- Do NOT commit `.env*`, `.next/`, `node_modules/`, `.vercel/` +- pnpm only +- `pnpm run check` must pass (`tsc --noEmit` + `eslint`) +- `pnpm run build` must pass (`next build --webpack`) + +## CSS Token Contract + +Define in `src/app/globals.css` under `:root` (add `.dark` override): + +- `--ux-bg` — page background +- `--ux-surface` — card/panel surface +- `--ux-surface-2` — elevated surface +- `--ux-border` — borders +- `--ux-text` — primary text +- `--ux-text-muted` — secondary text +- `--ux-accent` — primary accent +- `--ux-accent-foreground` — text on accent +- `--ux-danger` — destructive/error +- `--ux-warning` — warning +- `--ux-success` — success +- `--ux-ring` — focus ring +- `--ux-shadow` — shadows + +Use only via Tailwind: `bg-[var(--ux-surface)]`, `text-[var(--ux-text)]`, `border-[var(--ux-border)]` + +## Component Architecture + +- Reusable components → `src/components/` +- Pages in `src/app/**` compose components only +- Components must NOT import from `src/app/**` + +## Stack + +- Next.js 16 App Router, React 19, TypeScript strict +- TailwindCSS v4, pnpm ## Mission -Build a UI/UX-rich **Telemetry Explorer** Next.js micro-app that loads a local JSON dataset and provides a premium observability-console-like exploration experience. This is meant to inspire improvements in Admin “Client Logs”. +Build a **Telemetry Explorer** micro-app that loads a local JSON dataset and provides an observability-console-like exploration experience. Inspiration for improving Admin "Client Logs". -## Scope / Safety +## Data Source -- Only change files in this repository. -- No network calls -- No `console.log` -- No hardcoded colors (CSS vars + Tailwind) +Include `src/data/sample-events.json` with ~200 mock events: +`id`, `timestamp`, `productId`, `platform`, `osFamily`, `appVersion`, `eventType`, `module`, `eventName`, `requestId?`, `userId?`, `installId?`, `severity?`, `errorMessage?`, `metadata` (object) -## Data source (required) - -Include: - -- `src/data/sample-events.json` with ~200 mock events - -Event fields (keep consistent): - -- `id`, `timestamp`, `productId`, `platform`, `osFamily`, `appVersion`, `eventType`, `module`, `eventName`, `requestId?`, `userId?`, `installId?`, `severity?`, `errorMessage?`, `metadata` (object) - -## Routes +## Pages - `/` overview + stats - `/explore` main explorer - `/clusters` client-side error grouping -## Explorer UX (required) - -### Filters +## Explorer - Faceted filters: platform, eventType, module, eventName, severity -- Date range (simple) -- Free text search -- Active filter chips + clear all -- Save/load presets (localStorage) - -### Results - +- Date range, free-text search, active filter chips + clear all +- Save/load filter presets (localStorage) - Table/list toggle -- Row click opens detail drawer with tabs: - - Overview - - Raw JSON - - Related (same requestId/installId) -- Copy actions: copy requestId, copy JSON +- Row click → detail drawer (Overview, Raw JSON, Related by requestId/installId) +- Copy requestId, copy JSON +- Filters reflected in URL query params (shareable) -### URL state +## Clusters -- Filters reflected in query params (shareable links) - -## Clusters UX (required) - -- Group by simple fingerprint: `eventName + errorMessage` +- Group by `eventName + errorMessage` fingerprint - Show: count, lastSeen, sample message - Click cluster → list example events -## Deliverables - -- Full Next.js app with scripts: `dev`, `check`, `build` -- `build` must run `next build --webpack` - ## Verification -From the repo root: - -- `pnpm install` -- `pnpm run check` -- `pnpm run build` - -## Output expectation - -PR contains only this app. +``` +pnpm install && pnpm run check && pnpm run build +``` diff --git a/dashboards/ux-lab/bolt-telemetry-explorer/README.md b/dashboards/ux-lab/bolt-telemetry-explorer/README.md deleted file mode 100644 index 3114eef1..00000000 --- a/dashboards/ux-lab/bolt-telemetry-explorer/README.md +++ /dev/null @@ -1,24 +0,0 @@ -# Bolt — Telemetry Explorer - -**GitHub repo:** [`saravanakumardb/temp_bolt-telemetry-explorer`](https://github.com/saravanakumardb/temp_bolt-telemetry-explorer) - -This folder is designed to be used as a standalone repo. - -## What it is - -A local-only observability console micro-app for exploring telemetry events: - -- Event explorer with faceted filters, date range, free-text search -- Filter presets (localStorage) -- Detail drawer (Overview, Raw JSON, Related events) -- Error cluster view (grouped by fingerprint) -- URL-reflected filter state (shareable links) - -## How to use - -- Read `PROMPT.md` for the build assignment. -- Follow `DESIGN_SYSTEM_BRIEF.md` and `UX_TOKEN_CONTRACT.md` strictly. - -## Reuse goal - -Patterns should inspire improvements to the Admin dashboard "Client Logs" page. diff --git a/dashboards/ux-lab/bolt-telemetry-explorer/REPO_SCOPING_RULES.md b/dashboards/ux-lab/bolt-telemetry-explorer/REPO_SCOPING_RULES.md deleted file mode 100644 index 38776fd8..00000000 --- a/dashboards/ux-lab/bolt-telemetry-explorer/REPO_SCOPING_RULES.md +++ /dev/null @@ -1,9 +0,0 @@ -# Repo Scoping Rules - -**GitHub repo:** `saravanakumardb/temp_bolt-telemetry-explorer` -**URL:** `https://github.com/saravanakumardb/temp_bolt-telemetry-explorer` - -- Only modify files inside this repository. -- When publishing / pushing, target `saravanakumardb/temp_bolt-telemetry-explorer` only. -- Do NOT commit to `learning_ai_common_plat` or any other repo. -- If you believe a change is needed outside this repo, stop and ask. diff --git a/dashboards/ux-lab/bolt-telemetry-explorer/UX_TOKEN_CONTRACT.md b/dashboards/ux-lab/bolt-telemetry-explorer/UX_TOKEN_CONTRACT.md deleted file mode 100644 index fbb38ff4..00000000 --- a/dashboards/ux-lab/bolt-telemetry-explorer/UX_TOKEN_CONTRACT.md +++ /dev/null @@ -1,17 +0,0 @@ -# UX Token Contract (Shared) - -Define these CSS variables in `src/app/globals.css`: - -- `--ux-bg` -- `--ux-surface` -- `--ux-surface-2` -- `--ux-border` -- `--ux-text` -- `--ux-text-muted` -- `--ux-accent` -- `--ux-accent-foreground` -- `--ux-danger` -- `--ux-warning` -- `--ux-success` -- `--ux-ring` -- `--ux-shadow` diff --git a/dashboards/ux-lab/bolt-timeline-studio/ACCEPTANCE_CHECKLIST.md b/dashboards/ux-lab/bolt-timeline-studio/ACCEPTANCE_CHECKLIST.md deleted file mode 100644 index c05a2377..00000000 --- a/dashboards/ux-lab/bolt-timeline-studio/ACCEPTANCE_CHECKLIST.md +++ /dev/null @@ -1,11 +0,0 @@ -# Acceptance Checklist - -- Before push: `git status` is clean except for the intended app source changes. -- Before push: review `git diff` and confirm no unrelated formatting/refactors. -- No `console.log`. -- No hardcoded colors. -- No network calls. -- Forbidden files are NOT committed: `.env*`, `.next/`, `node_modules/`, `.vercel/`. -- Components in `src/components/**`; no imports from `src/app/**`. -- `pnpm run check` passes. -- `pnpm run build` passes (`next build --webpack`). diff --git a/dashboards/ux-lab/bolt-timeline-studio/DESIGN_SYSTEM_BRIEF.md b/dashboards/ux-lab/bolt-timeline-studio/DESIGN_SYSTEM_BRIEF.md deleted file mode 100644 index aeea2cee..00000000 --- a/dashboards/ux-lab/bolt-timeline-studio/DESIGN_SYSTEM_BRIEF.md +++ /dev/null @@ -1,27 +0,0 @@ -# Design System Brief (Must Follow) - -These rules exist so this repo’s output is **production-reusable** across the ByteLyst workspace dashboards and product web apps. - -## Non-negotiable rules - -- No `console.log`. -- No hardcoded API URLs. -- No network calls in this repo (use mock data / local JSON / localStorage). -- **No hardcoded colors** (no hex/rgb/hsl or Tailwind arbitrary hex). - -## Token usage - -- Use the shared token contract in `UX_TOKEN_CONTRACT.md`. -- Prefer `bg-[var(--ux-*)]` / `text-[var(--ux-*)]`. - -## Component architecture (reusability) - -- Reusable components live in `src/components/`. -- Pages under `src/app/**` compose components. -- Components must NOT import from `src/app/**`. - -## Accessibility + UX - -- Keyboard accessible. -- `Esc` closes overlays. -- Focus management for dialogs/drawers. diff --git a/dashboards/ux-lab/bolt-timeline-studio/INTEGRATION_NOTES.md b/dashboards/ux-lab/bolt-timeline-studio/INTEGRATION_NOTES.md deleted file mode 100644 index 4afed67a..00000000 --- a/dashboards/ux-lab/bolt-timeline-studio/INTEGRATION_NOTES.md +++ /dev/null @@ -1,9 +0,0 @@ -# Integration Notes - -This repo is a pattern source for timeline/scheduler UI. - -Adoption expectations: - -- Timeline primitives should live in `src/components/**` (grid, block, lane list, inspector). -- Keep drag/resize math in `src/lib/**` so we can transplant it. -- Use the shared `--ux-*` token contract. diff --git a/dashboards/ux-lab/bolt-timeline-studio/PROMPT.md b/dashboards/ux-lab/bolt-timeline-studio/PROMPT.md index db371cfc..840970c1 100644 --- a/dashboards/ux-lab/bolt-timeline-studio/PROMPT.md +++ b/dashboards/ux-lab/bolt-timeline-studio/PROMPT.md @@ -1,28 +1,60 @@ -# Bolt App 2 — Timeline Studio (Micro-App) +# Bolt — Timeline Studio -Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`. +**GitHub repo:** `saravanakumardb/temp_bolt-timeline-studio` -## Mission +## Push Instructions -Build a UI/UX-rich Next.js micro-app called **Timeline Studio** that demonstrates timeline/scheduler editing patterns (drag, resize, inspector). This should be reusable inspiration for ChronoMind timelines and routines UX. +- Push directly to `main` — do NOT open a PR +- Only modify files in this repo -## Scope / Safety +## Rules -- Only change files in this repository. -- No network calls; mock data + localStorage only - No `console.log` -- No hardcoded colors; define CSS variables once and use Tailwind +- No network calls — mock data / localStorage only +- No hardcoded colors — no hex, no rgb/rgba/hsl, no `bg-[#123456]` Tailwind classes +- Do NOT commit `.env*`, `.next/`, `node_modules/`, `.vercel/` +- pnpm only +- `pnpm run check` must pass (`tsc --noEmit` + `eslint`) +- `pnpm run build` must pass (`next build --webpack`) + +## CSS Token Contract + +Define in `src/app/globals.css` under `:root` (add `.dark` override): + +- `--ux-bg` — page background +- `--ux-surface` — card/panel surface +- `--ux-surface-2` — elevated surface +- `--ux-border` — borders +- `--ux-text` — primary text +- `--ux-text-muted` — secondary text +- `--ux-accent` — primary accent +- `--ux-accent-foreground` — text on accent +- `--ux-danger` — destructive/error +- `--ux-warning` — warning +- `--ux-success` — success +- `--ux-ring` — focus ring +- `--ux-shadow` — shadows + +Use only via Tailwind: `bg-[var(--ux-surface)]`, `text-[var(--ux-text)]`, `border-[var(--ux-border)]` + +## Component Architecture + +- Reusable components → `src/components/` +- Pages in `src/app/**` compose components only +- Components must NOT import from `src/app/**` ## Stack -- Next.js 16 App Router -- React 19 -- Tailwind v4 -- TypeScript strict -- pnpm -- lucide-react icons +- Next.js 16 App Router, React 19, TypeScript strict +- TailwindCSS v4, pnpm -## Routes +## Mission + +Build a **Timeline Studio** micro-app demonstrating timeline/scheduler editing (drag, resize, inspector). Reusable inspiration for ChronoMind timelines and routines UX. + +Additional: lucide-react icons + +## Pages - `/` overview + recent plans - `/studio` main editor @@ -30,60 +62,25 @@ Build a UI/UX-rich Next.js micro-app called **Timeline Studio** that demonstrate ## Layout -- Left sidebar: list of “plans” (templates) -- Main canvas: timeline grid -- Right inspector: edit selected block +Left sidebar (plans list), main canvas (timeline grid), right inspector (edit selected block) -## Timeline interactions (must-have) +## Timeline Interactions -- Lanes (e.g. Work, Personal, Health) -- Blocks can be: - - created (button + click on grid) - - selected - - dragged to move - - resized via left/right handles -- Snap-to-grid increments (5 min) -- Zoom levels (15m / 30m / 60m) -- Keyboard: - - `Esc` deselect - - `Delete` remove selected - - `Cmd+Z` undo (simple history stack) +- Lanes (Work, Personal, Health) +- Blocks: create (button + click), select, drag to move, resize via handles +- Snap-to-grid (5 min), zoom levels (15m / 30m / 60m) +- Keyboard: `Esc` deselect, `Delete` remove, `Cmd+Z` undo (history stack) -## Inspector (must-have) +## Inspector -- Title -- Start/end time -- Lane -- Tags -- Notes +Title, start/end time, lane, tags, notes — persist to localStorage (plans, blocks, zoom, last opened plan) -Persist in localStorage: +## UX Quality -- plans list -- blocks -- zoom -- last opened plan - -## UX quality bar - -- Clear selection states + resize handles -- Good hit targets -- Subtle animations -- Empty state onboarding hints - -## Deliverables - -- Full Next.js app with scripts: `dev`, `check`, `build` -- `build` must run `next build --webpack` +Clear selection states + resize handles, good hit targets, subtle animations, empty state hints ## Verification -From the repo root: - -- `pnpm install` -- `pnpm run check` -- `pnpm run build` - -## Output expectation - -PR contains only this app. +``` +pnpm install && pnpm run check && pnpm run build +``` diff --git a/dashboards/ux-lab/bolt-timeline-studio/README.md b/dashboards/ux-lab/bolt-timeline-studio/README.md deleted file mode 100644 index ce7889d5..00000000 --- a/dashboards/ux-lab/bolt-timeline-studio/README.md +++ /dev/null @@ -1,25 +0,0 @@ -# Bolt — Timeline Studio - -**GitHub repo:** [`saravanakumardb/temp_bolt-timeline-studio`](https://github.com/saravanakumardb/temp_bolt-timeline-studio) - -This folder is designed to be used as a standalone repo. - -## What it is - -A timeline/scheduler editor micro-app demonstrating drag-and-drop UX patterns: - -- Multi-lane timeline canvas with blocks -- Create, select, drag, resize blocks (snap-to-grid, 5min increments) -- Zoom levels (15m / 30m / 60m) -- Right inspector: title, time, lane, tags, notes -- Undo history (`Cmd+Z`) -- Plans list + localStorage persistence - -## How to use - -- Read `PROMPT.md` for the build assignment. -- Follow `DESIGN_SYSTEM_BRIEF.md` and `UX_TOKEN_CONTRACT.md` strictly. - -## Reuse goal - -Patterns should inspire ChronoMind timeline and routines UX. diff --git a/dashboards/ux-lab/bolt-timeline-studio/REPO_SCOPING_RULES.md b/dashboards/ux-lab/bolt-timeline-studio/REPO_SCOPING_RULES.md deleted file mode 100644 index a6cc2388..00000000 --- a/dashboards/ux-lab/bolt-timeline-studio/REPO_SCOPING_RULES.md +++ /dev/null @@ -1,9 +0,0 @@ -# Repo Scoping Rules - -**GitHub repo:** `saravanakumardb/temp_bolt-timeline-studio` -**URL:** `https://github.com/saravanakumardb/temp_bolt-timeline-studio` - -- Only modify files inside this repository. -- When publishing / pushing, target `saravanakumardb/temp_bolt-timeline-studio` only. -- Do NOT commit to `learning_ai_common_plat` or any other repo. -- If you believe a change is needed outside this repo, stop and ask. diff --git a/dashboards/ux-lab/bolt-timeline-studio/UX_TOKEN_CONTRACT.md b/dashboards/ux-lab/bolt-timeline-studio/UX_TOKEN_CONTRACT.md deleted file mode 100644 index a2d08575..00000000 --- a/dashboards/ux-lab/bolt-timeline-studio/UX_TOKEN_CONTRACT.md +++ /dev/null @@ -1,19 +0,0 @@ -# UX Token Contract (Shared) - -Use the same tokens as other UX Lab repos. - -Define in `src/app/globals.css`: - -- `--ux-bg` -- `--ux-surface` -- `--ux-surface-2` -- `--ux-border` -- `--ux-text` -- `--ux-text-muted` -- `--ux-accent` -- `--ux-accent-foreground` -- `--ux-danger` -- `--ux-warning` -- `--ux-success` -- `--ux-ring` -- `--ux-shadow` diff --git a/dashboards/ux-lab/lovable-design-tokens-playground/ACCEPTANCE_CHECKLIST.md b/dashboards/ux-lab/lovable-design-tokens-playground/ACCEPTANCE_CHECKLIST.md deleted file mode 100644 index c05a2377..00000000 --- a/dashboards/ux-lab/lovable-design-tokens-playground/ACCEPTANCE_CHECKLIST.md +++ /dev/null @@ -1,11 +0,0 @@ -# Acceptance Checklist - -- Before push: `git status` is clean except for the intended app source changes. -- Before push: review `git diff` and confirm no unrelated formatting/refactors. -- No `console.log`. -- No hardcoded colors. -- No network calls. -- Forbidden files are NOT committed: `.env*`, `.next/`, `node_modules/`, `.vercel/`. -- Components in `src/components/**`; no imports from `src/app/**`. -- `pnpm run check` passes. -- `pnpm run build` passes (`next build --webpack`). diff --git a/dashboards/ux-lab/lovable-design-tokens-playground/DESIGN_SYSTEM_BRIEF.md b/dashboards/ux-lab/lovable-design-tokens-playground/DESIGN_SYSTEM_BRIEF.md deleted file mode 100644 index 7f85a796..00000000 --- a/dashboards/ux-lab/lovable-design-tokens-playground/DESIGN_SYSTEM_BRIEF.md +++ /dev/null @@ -1,19 +0,0 @@ -# Design System Brief (Must Follow) - -This repo is a tokens playground; it must strictly demonstrate token-driven UI. - -## Non-negotiable rules - -- No `console.log`. -- No network calls. -- **No hardcoded colors** (hex/rgb/hsl). Everything must be CSS variables. - -## Token usage - -- Use the shared token contract in `UX_TOKEN_CONTRACT.md`. -- All UI must be driven by those variables. - -## Component architecture - -- Reusable components in `src/components/**`. -- No imports from `src/app/**` inside components. diff --git a/dashboards/ux-lab/lovable-design-tokens-playground/INTEGRATION_NOTES.md b/dashboards/ux-lab/lovable-design-tokens-playground/INTEGRATION_NOTES.md deleted file mode 100644 index ef817f86..00000000 --- a/dashboards/ux-lab/lovable-design-tokens-playground/INTEGRATION_NOTES.md +++ /dev/null @@ -1,9 +0,0 @@ -# Integration Notes - -This repo exists to validate token-driven UI patterns and provide a reusable component preview gallery. - -Reusable parts we expect to transplant: - -- contrast checker UI -- component gallery layout -- token pickers diff --git a/dashboards/ux-lab/lovable-design-tokens-playground/PROMPT.md b/dashboards/ux-lab/lovable-design-tokens-playground/PROMPT.md index d0172950..e817d587 100644 --- a/dashboards/ux-lab/lovable-design-tokens-playground/PROMPT.md +++ b/dashboards/ux-lab/lovable-design-tokens-playground/PROMPT.md @@ -1,67 +1,77 @@ -# Lovable App 2 — Design Tokens Playground (Micro-App) +# Lovable — Design Tokens Playground -Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`. +**GitHub repo:** `saravanakumardb/temp_lovable-design-tokens-playground` + +## Push Instructions + +- Push directly to `main` — do NOT open a PR +- Only modify files in this repo + +## Rules + +- No `console.log` +- No network calls — mock data / localStorage only +- No hardcoded colors — no hex, no rgb/rgba/hsl, no `bg-[#123456]` Tailwind classes +- Do NOT commit `.env*`, `.next/`, `node_modules/`, `.vercel/` +- pnpm only +- `pnpm run check` must pass (`tsc --noEmit` + `eslint`) +- `pnpm run build` must pass (`next build --webpack`) + +## CSS Token Contract + +Define in `src/app/globals.css` under `:root` (add `.dark` override): + +- `--ux-bg` — page background +- `--ux-surface` — card/panel surface +- `--ux-surface-2` — elevated surface +- `--ux-border` — borders +- `--ux-text` — primary text +- `--ux-text-muted` — secondary text +- `--ux-accent` — primary accent +- `--ux-accent-foreground` — text on accent +- `--ux-danger` — destructive/error +- `--ux-warning` — warning +- `--ux-success` — success +- `--ux-ring` — focus ring +- `--ux-shadow` — shadows + +Use only via Tailwind: `bg-[var(--ux-surface)]`, `text-[var(--ux-text)]`, `border-[var(--ux-border)]` + +## Component Architecture + +- Reusable components → `src/components/` +- Pages in `src/app/**` compose components only +- Components must NOT import from `src/app/**` + +## Stack + +- Next.js 16 App Router, React 19, TypeScript strict +- TailwindCSS v4, pnpm ## Goal -Build a UI/UX-rich **Design Tokens Playground** micro-app that previews a token-driven design system and provides high-signal tooling to spot inconsistencies. +Build a **Design Tokens Playground** micro-app for visual QA and cross-pollination — previewing a token-driven design system and spotting inconsistencies. Extremely polished UI. -This app is meant for **visual QA** and cross-pollination. +## Pages -## Constraints +- `/` overview: theme switcher + token summary +- `/colors` color ramp preview + contrast checker +- `/typography` type scale preview +- `/components` component gallery +- `/audit` hardcoded color detector helper -- Only modify files in this repository. -- No network calls -- No `console.log` -- No hardcoded colors (tokens only; define CSS variables and consume them) +## Features -## Pages (required) +**Theme controls:** theme toggle, density toggle (comfortable/compact), radius slider (small/medium/large) -- `/` Overview: theme switcher + token summary -- `/colors` Color ramp preview + contrast checker UI -- `/typography` Type scale preview -- `/components` Component preview gallery -- `/audit` “Hardcoded color detector” helper (basic UI tool) +**Contrast checker:** select foreground/background token → show WCAG pass/fail (client-side) -## Key features +**Component gallery:** buttons, inputs, cards, alerts, tabs, table -### Theme + token controls +**Audit helper:** paste code → highlight hex/rgb() → suggest token replacement (heuristic) -- Theme toggle -- Density toggle (comfortable/compact) -- Radius slider (small/medium/large) affecting components +## Verification -### Contrast checker - -- Select foreground/background token -- Show WCAG-ish pass/fail indicator (client-side) - -### Component gallery - -Preview: - -- buttons -- inputs -- cards -- alerts -- tabs -- table - -### Audit helper (UI tool) - -- Allow user to paste code snippets -- Highlight hex colors / rgb() occurrences -- Provide suggested token replacement list (heuristic) - -## Deliverables - -- Next.js 16 app -- Tailwind v4 -- TypeScript strict -- Scripts: `dev`, `check`, `build` (`next build --webpack`) - -## Success criteria - -- Extremely polished UI -- Useful for designers/engineers -- Self-contained and safe +``` +pnpm install && pnpm run check && pnpm run build +``` diff --git a/dashboards/ux-lab/lovable-design-tokens-playground/README.md b/dashboards/ux-lab/lovable-design-tokens-playground/README.md deleted file mode 100644 index d18c9583..00000000 --- a/dashboards/ux-lab/lovable-design-tokens-playground/README.md +++ /dev/null @@ -1,24 +0,0 @@ -# Lovable — Design Tokens Playground - -**GitHub repo:** [`saravanakumardb/temp_lovable-design-tokens-playground`](https://github.com/saravanakumardb/temp_lovable-design-tokens-playground) - -This folder is designed to be used as a standalone repo. - -## What it is - -A visual QA and design token exploration micro-app: - -- Theme toggle + density toggle + radius slider -- Color ramp preview + WCAG contrast checker -- Typography scale preview -- Component gallery (buttons, inputs, cards, alerts, tabs, table) -- Hardcoded color audit helper (paste code, detect hex/rgb, suggest token replacements) - -## How to use - -- Read `PROMPT.md` for the build assignment. -- Follow `DESIGN_SYSTEM_BRIEF.md` and `UX_TOKEN_CONTRACT.md` strictly. - -## Reuse goal - -Useful for designers and engineers to spot token inconsistencies and validate the design system. diff --git a/dashboards/ux-lab/lovable-design-tokens-playground/REPO_SCOPING_RULES.md b/dashboards/ux-lab/lovable-design-tokens-playground/REPO_SCOPING_RULES.md deleted file mode 100644 index b1f2beef..00000000 --- a/dashboards/ux-lab/lovable-design-tokens-playground/REPO_SCOPING_RULES.md +++ /dev/null @@ -1,9 +0,0 @@ -# Repo Scoping Rules - -**GitHub repo:** `saravanakumardb/temp_lovable-design-tokens-playground` -**URL:** `https://github.com/saravanakumardb/temp_lovable-design-tokens-playground` - -- Only modify files inside this repository. -- When publishing / pushing, target `saravanakumardb/temp_lovable-design-tokens-playground` only. -- Do NOT commit to `learning_ai_common_plat` or any other repo. -- If you believe a change is needed outside this repo, stop and ask. diff --git a/dashboards/ux-lab/lovable-design-tokens-playground/UX_TOKEN_CONTRACT.md b/dashboards/ux-lab/lovable-design-tokens-playground/UX_TOKEN_CONTRACT.md deleted file mode 100644 index 5b83a6f7..00000000 --- a/dashboards/ux-lab/lovable-design-tokens-playground/UX_TOKEN_CONTRACT.md +++ /dev/null @@ -1,17 +0,0 @@ -# UX Token Contract (Shared) - -This playground must define and preview these tokens: - -- `--ux-bg` -- `--ux-surface` -- `--ux-surface-2` -- `--ux-border` -- `--ux-text` -- `--ux-text-muted` -- `--ux-accent` -- `--ux-accent-foreground` -- `--ux-danger` -- `--ux-warning` -- `--ux-success` -- `--ux-ring` -- `--ux-shadow` diff --git a/dashboards/ux-lab/lovable-notify-states-kit/ACCEPTANCE_CHECKLIST.md b/dashboards/ux-lab/lovable-notify-states-kit/ACCEPTANCE_CHECKLIST.md deleted file mode 100644 index c05a2377..00000000 --- a/dashboards/ux-lab/lovable-notify-states-kit/ACCEPTANCE_CHECKLIST.md +++ /dev/null @@ -1,11 +0,0 @@ -# Acceptance Checklist - -- Before push: `git status` is clean except for the intended app source changes. -- Before push: review `git diff` and confirm no unrelated formatting/refactors. -- No `console.log`. -- No hardcoded colors. -- No network calls. -- Forbidden files are NOT committed: `.env*`, `.next/`, `node_modules/`, `.vercel/`. -- Components in `src/components/**`; no imports from `src/app/**`. -- `pnpm run check` passes. -- `pnpm run build` passes (`next build --webpack`). diff --git a/dashboards/ux-lab/lovable-notify-states-kit/DESIGN_SYSTEM_BRIEF.md b/dashboards/ux-lab/lovable-notify-states-kit/DESIGN_SYSTEM_BRIEF.md deleted file mode 100644 index f15e713d..00000000 --- a/dashboards/ux-lab/lovable-notify-states-kit/DESIGN_SYSTEM_BRIEF.md +++ /dev/null @@ -1,26 +0,0 @@ -# Design System Brief (Must Follow) - -This repo is a **notifications + UI states kit** meant to be copied into real dashboards/apps. - -## Non-negotiable rules - -- No `console.log`. -- No network calls. -- No hardcoded colors (no hex/rgb/hsl). Use CSS variables only. - -## Token usage - -- Use `UX_TOKEN_CONTRACT.md`. -- Style with `bg-[var(--ux-*)]`, `text-[var(--ux-*)]`, `border-[var(--ux-*)]`. - -## Component architecture - -- Reusable components in `src/components/**`. -- Pages in `src/app/**` compose components. -- Components must NOT import from `src/app/**`. - -## Accessibility - -- Toasts must use an ARIA live region. -- `Esc` closes dialogs/drawers. -- Focus returns to trigger when overlays close. diff --git a/dashboards/ux-lab/lovable-notify-states-kit/INTEGRATION_NOTES.md b/dashboards/ux-lab/lovable-notify-states-kit/INTEGRATION_NOTES.md deleted file mode 100644 index def7d237..00000000 --- a/dashboards/ux-lab/lovable-notify-states-kit/INTEGRATION_NOTES.md +++ /dev/null @@ -1,19 +0,0 @@ -# Integration Notes - -This repo provides reusable primitives for notifications and common UI states. - -## Expected reusable components - -- `ToastProvider` / `useToast()` -- `ToastViewport` / `ToastItem` -- `Banner` -- `EmptyState` -- `Skeleton` primitives -- `ConfirmDialog` -- `FormField` helpers (error, helper text) - -## Integration pattern - -- Copy `src/components/**` into target app. -- Map `--ux-*` tokens to the target app’s token system. -- Keep logic UI-only and framework-agnostic within React. diff --git a/dashboards/ux-lab/lovable-notify-states-kit/PROMPT.md b/dashboards/ux-lab/lovable-notify-states-kit/PROMPT.md index 8e78d687..159b8362 100644 --- a/dashboards/ux-lab/lovable-notify-states-kit/PROMPT.md +++ b/dashboards/ux-lab/lovable-notify-states-kit/PROMPT.md @@ -1,120 +1,98 @@ -# Lovable — Notifications + UI States Kit (Micro-App) +# Lovable — Notifications + UI States Kit -Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`, `UX_TOKEN_CONTRACT.md`, `REPO_SCOPING_RULES.md`, and `ACCEPTANCE_CHECKLIST.md`. +**GitHub repo:** `saravanakumardb/temp_lovable-notify-states-kit` + +## Push Instructions + +- Push directly to `main` — do NOT open a PR +- Only modify files in this repo + +## Rules + +- No `console.log` +- No network calls — mock data / localStorage only +- No hardcoded colors — no hex, no rgb/rgba/hsl, no `bg-[#123456]` Tailwind classes +- Do NOT commit `.env*`, `.next/`, `node_modules/`, `.vercel/` +- pnpm only +- `pnpm run check` must pass (`tsc --noEmit` + `eslint`) +- `pnpm run build` must pass (`next build --webpack`) + +## CSS Token Contract + +Define in `src/app/globals.css` under `:root` (add `.dark` override): + +- `--ux-bg` — page background +- `--ux-surface` — card/panel surface +- `--ux-surface-2` — elevated surface +- `--ux-border` — borders +- `--ux-text` — primary text +- `--ux-text-muted` — secondary text +- `--ux-accent` — primary accent +- `--ux-accent-foreground` — text on accent +- `--ux-danger` — destructive/error +- `--ux-warning` — warning +- `--ux-success` — success +- `--ux-ring` — focus ring +- `--ux-shadow` — shadows + +Use only via Tailwind: `bg-[var(--ux-surface)]`, `text-[var(--ux-text)]`, `border-[var(--ux-border)]` + +## Component Architecture + +- Reusable components → `src/components/` +- Pages in `src/app/**` compose components only +- Components must NOT import from `src/app/**` + +## Stack + +- Next.js 16 App Router, React 19, TypeScript strict +- TailwindCSS v4, pnpm ## Goal -Build a **UI/UX-rich** Next.js micro-app that serves as a reusable **Notifications + UI States Kit** we can copy into: +Build a **UI/UX-rich** Notifications + UI States Kit reusable across `dashboards/admin-web`, `dashboards/tracker-web`, and product web dashboards. Design-led: prioritize interaction polish, spacing, typography, accessibility. -- `dashboards/admin-web` -- `dashboards/tracker-web` -- product web dashboards - -This is design-led: prioritize interaction polish, spacing, typography, and accessibility. - -## Constraints - -- Only modify files in this repository. -- pnpm only. -- Next.js 16 App Router, React 19, TypeScript strict. -- TailwindCSS v4. -- No network calls. -- No `console.log`. -- No hardcoded colors — use `--ux-*` CSS variables from `UX_TOKEN_CONTRACT.md`. -- Avoid unnecessary dependencies. If you add a dependency, justify why it is required. - -## Must-have routes +## Pages - `/` overview landing + links - `/toasts` toast system demos - `/banners` inline banner demos -- `/states` loading / empty / error patterns +- `/states` loading/empty/error patterns - `/dialogs` confirm dialog patterns - `/forms` validation + helper text patterns -## App shell +## App Shell -- Left sidebar navigation -- Top bar with: - - theme toggle (light/dark) - - “Shortcuts” button +Left sidebar nav, top bar: theme toggle, "Shortcuts" button -## Toast system (core deliverable) - -Build a toast system that supports: +## Toast System - Variants: info, success, warning, error -- Title + optional description -- Optional action button (e.g. Undo) -- Optional progress countdown bar -- Stacking / queue behavior (max visible, overflow count) -- Dismiss: close button, swipe (optional), timeout -- Position selector demo: top-right (default), bottom-right, bottom-center - -Accessibility requirements: - -- ARIA live region (`polite` for info/success, `assertive` for error) -- Focus behavior: toasts should not steal focus by default +- Title + optional description, optional action button (Undo), optional progress bar +- Stacking/queue (max visible + overflow count) +- Dismiss: close button, timeout +- Position demo: top-right, bottom-right, bottom-center +- ARIA live region (`polite` info/success, `assertive` error); toasts must not steal focus ## Banners -Create inline banners for page-level messaging: +Inline page-level banners: info/success/warn/error variants, optional Retry action, dismissible -- Variants: info/success/warn/error -- Optional “Retry” action -- Dismissible +## States Gallery -## States gallery - -Create reusable components: - -- `Skeleton` primitives (text line, avatar, card) -- `EmptyState` with icon + title + description + CTA -- `ErrorState` with retry + “copy details” action (copies JSON) - -Provide demos: - -- Table loading skeleton -- Card grid loading skeleton -- Detail drawer loading skeleton +`Skeleton` primitives (text, avatar, card), `EmptyState` (icon + title + CTA), `ErrorState` (retry + copy JSON) +Demos: table loading, card grid loading, detail drawer loading ## Dialogs -- Confirm dialog (destructive) -- Confirm dialog (non-destructive) -- Modal focus trap + Esc close +Destructive confirm, non-destructive confirm — focus trap + Esc close ## Forms -Create a small form with: - -- Required fields + inline errors -- Disabled state -- Helper text -- Success state - -## Visual / UX bar - -- Premium spacing/typography -- Subtle animations (not flashy) -- Excellent focus rings (token-driven) -- Mobile responsive - -## Deliverables - -- Full Next.js app with scripts: - - `dev` - - `check` (must run `tsc --noEmit` + `eslint`) - - `build` (must run `next build --webpack`) +Required fields + inline errors, disabled state, helper text, success state ## Verification -From repo root: - -- `pnpm install` -- `pnpm run check` -- `pnpm run build` - -## Output expectation - -Open a PR that only changes files in this repo. +``` +pnpm install && pnpm run check && pnpm run build +``` diff --git a/dashboards/ux-lab/lovable-notify-states-kit/README.md b/dashboards/ux-lab/lovable-notify-states-kit/README.md deleted file mode 100644 index 1ed9c92f..00000000 --- a/dashboards/ux-lab/lovable-notify-states-kit/README.md +++ /dev/null @@ -1,22 +0,0 @@ -# Lovable — Notifications + UI States Kit - -This folder is designed to be used as a standalone repo. - -## What it is - -A token-driven UI kit for: - -- Toasts -- Inline banners -- Loading/empty/error states -- Confirm dialogs -- Form validation states - -## How to use - -- Read `PROMPT.md` for the build assignment. -- Follow `DESIGN_SYSTEM_BRIEF.md` and `UX_TOKEN_CONTRACT.md` strictly. - -## Reuse goal - -Components should be copy/paste reusable into other dashboards/apps. diff --git a/dashboards/ux-lab/lovable-notify-states-kit/REPO_SCOPING_RULES.md b/dashboards/ux-lab/lovable-notify-states-kit/REPO_SCOPING_RULES.md deleted file mode 100644 index 3da25a49..00000000 --- a/dashboards/ux-lab/lovable-notify-states-kit/REPO_SCOPING_RULES.md +++ /dev/null @@ -1,9 +0,0 @@ -# Repo Scoping Rules - -**GitHub repo:** `saravanakumardb/temp_lovable-notify-states-kit` -**URL:** `https://github.com/saravanakumardb/temp_lovable-notify-states-kit` - -- Only modify files inside this repository. -- When publishing / pushing, target `saravanakumardb/temp_lovable-notify-states-kit` only. -- Do NOT commit to `learning_ai_common_plat` or any other repo. -- If you believe a change is needed outside this repo, stop and ask. diff --git a/dashboards/ux-lab/lovable-notify-states-kit/UX_TOKEN_CONTRACT.md b/dashboards/ux-lab/lovable-notify-states-kit/UX_TOKEN_CONTRACT.md deleted file mode 100644 index db508f0a..00000000 --- a/dashboards/ux-lab/lovable-notify-states-kit/UX_TOKEN_CONTRACT.md +++ /dev/null @@ -1,35 +0,0 @@ -# UX Token Contract (Shared) - -This repo must use the following CSS custom properties (tokens). Define them in `src/app/globals.css` under `:root` and optionally provide a `.dark` override. - -## Core surfaces - -- `--ux-bg` -- `--ux-surface` -- `--ux-surface-2` -- `--ux-border` - -## Text - -- `--ux-text` -- `--ux-text-muted` - -## Brand / states - -- `--ux-accent` -- `--ux-accent-foreground` -- `--ux-danger` -- `--ux-warning` -- `--ux-success` - -## Focus + shadows - -- `--ux-ring` -- `--ux-shadow` - -## Usage examples - -- Background: `bg-[var(--ux-bg)]` -- Card: `bg-[var(--ux-surface)] border border-[var(--ux-border)]` -- Primary button: `bg-[var(--ux-accent)] text-[var(--ux-accent-foreground)]` -- Muted text: `text-[var(--ux-text-muted)]` diff --git a/dashboards/ux-lab/lovable-onboarding-flow/ACCEPTANCE_CHECKLIST.md b/dashboards/ux-lab/lovable-onboarding-flow/ACCEPTANCE_CHECKLIST.md deleted file mode 100644 index c05a2377..00000000 --- a/dashboards/ux-lab/lovable-onboarding-flow/ACCEPTANCE_CHECKLIST.md +++ /dev/null @@ -1,11 +0,0 @@ -# Acceptance Checklist - -- Before push: `git status` is clean except for the intended app source changes. -- Before push: review `git diff` and confirm no unrelated formatting/refactors. -- No `console.log`. -- No hardcoded colors. -- No network calls. -- Forbidden files are NOT committed: `.env*`, `.next/`, `node_modules/`, `.vercel/`. -- Components in `src/components/**`; no imports from `src/app/**`. -- `pnpm run check` passes. -- `pnpm run build` passes (`next build --webpack`). diff --git a/dashboards/ux-lab/lovable-onboarding-flow/DESIGN_SYSTEM_BRIEF.md b/dashboards/ux-lab/lovable-onboarding-flow/DESIGN_SYSTEM_BRIEF.md deleted file mode 100644 index d1271e9f..00000000 --- a/dashboards/ux-lab/lovable-onboarding-flow/DESIGN_SYSTEM_BRIEF.md +++ /dev/null @@ -1,25 +0,0 @@ -# Design System Brief (Must Follow) - -This repo is an onboarding/settings UX pattern source. - -## Non-negotiable rules - -- No `console.log`. -- No network calls. -- No hardcoded colors (hex/rgb/hsl). Use CSS variables. - -## Token usage - -- Use `UX_TOKEN_CONTRACT.md`. - -## Component architecture - -- Reusable components in `src/components/**`. -- Steps/pages in `src/app/**` compose components. -- Components must NOT import from `src/app/**`. - -## UX - -- Great validation states. -- Keyboard accessible. -- Mobile-first responsive. diff --git a/dashboards/ux-lab/lovable-onboarding-flow/INTEGRATION_NOTES.md b/dashboards/ux-lab/lovable-onboarding-flow/INTEGRATION_NOTES.md deleted file mode 100644 index 44a5cfe1..00000000 --- a/dashboards/ux-lab/lovable-onboarding-flow/INTEGRATION_NOTES.md +++ /dev/null @@ -1,12 +0,0 @@ -# Integration Notes - -This repo provides reusable onboarding and settings UX patterns. - -Expected reusable components: - -- wizard shell (progress, stepper) -- validation + field components -- review/summary page patterns -- danger zone confirm patterns - -All must use `--ux-*` tokens. diff --git a/dashboards/ux-lab/lovable-onboarding-flow/PROMPT.md b/dashboards/ux-lab/lovable-onboarding-flow/PROMPT.md index 11819af4..9a3ca5de 100644 --- a/dashboards/ux-lab/lovable-onboarding-flow/PROMPT.md +++ b/dashboards/ux-lab/lovable-onboarding-flow/PROMPT.md @@ -1,67 +1,86 @@ -# Lovable App 3 — Onboarding + Settings Wizard (Micro-App) +# Lovable — Onboarding + Settings Wizard -Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`. +**GitHub repo:** `saravanakumardb/temp_lovable-onboarding-flow` + +## Push Instructions + +- Push directly to `main` — do NOT open a PR +- Only modify files in this repo + +## Rules + +- No `console.log` +- No network calls — mock data / localStorage only +- No hardcoded colors — no hex, no rgb/rgba/hsl, no `bg-[#123456]` Tailwind classes +- Do NOT commit `.env*`, `.next/`, `node_modules/`, `.vercel/` +- pnpm only +- `pnpm run check` must pass (`tsc --noEmit` + `eslint`) +- `pnpm run build` must pass (`next build --webpack`) + +## CSS Token Contract + +Define in `src/app/globals.css` under `:root` (add `.dark` override): + +- `--ux-bg` — page background +- `--ux-surface` — card/panel surface +- `--ux-surface-2` — elevated surface +- `--ux-border` — borders +- `--ux-text` — primary text +- `--ux-text-muted` — secondary text +- `--ux-accent` — primary accent +- `--ux-accent-foreground` — text on accent +- `--ux-danger` — destructive/error +- `--ux-warning` — warning +- `--ux-success` — success +- `--ux-ring` — focus ring +- `--ux-shadow` — shadows + +Use only via Tailwind: `bg-[var(--ux-surface)]`, `text-[var(--ux-text)]`, `border-[var(--ux-border)]` + +## Component Architecture + +- Reusable components → `src/components/` +- Pages in `src/app/**` compose components only +- Components must NOT import from `src/app/**` + +## Stack + +- Next.js 16 App Router, React 19, TypeScript strict +- TailwindCSS v4, pnpm ## Goal -Build a best-in-class **onboarding + settings wizard** micro-app demonstrating premium UX patterns we can reuse across products. +Build a best-in-class **onboarding + settings wizard** micro-app with premium UX patterns reusable across ByteLyst products. Feels like a premium consumer app. Design-led. -## Constraints +Data: localStorage only — no backend calls. -- Only modify files in this repository. -- No backend calls; localStorage only -- No `console.log` -- No hardcoded colors (CSS variables) +## Pages -## Experience requirements (high polish) - -### Onboarding flow - -- Multi-step wizard (5–7 steps) -- Progress indicator + step labels -- Back/Next with validation -- Optional “Skip for now” with confirm dialog -- Autosave progress to localStorage - -### Steps to include (example) - -- Profile basics (name, timezone) -- Preferences (theme, density) -- Notifications (toggles) -- Integrations (fake list, connect buttons) -- Privacy level selector -- Final review summary - -### Settings area - -After onboarding completes, show a settings dashboard with: - -- profile card -- preferences section -- notification settings -- danger zone (delete local profile) with confirm - -### UX/accessibility - -- Great empty/error/validation states -- Keyboard accessible -- Mobile-first responsive - -## Routes - -- `/` start/resume onboarding +- `/` start / resume onboarding - `/onboarding` wizard - `/settings` settings dashboard -## Deliverables +## Onboarding Flow -- Next.js 16 App Router -- Tailwind v4 -- TypeScript strict -- Scripts: `dev`, `check`, `build` (`next build --webpack`) +Multi-step wizard (5–7 steps): -## Success criteria +- Progress indicator + step labels +- Back/Next with validation +- "Skip for now" with confirm dialog +- Autosave to localStorage -- Feels like a premium consumer app onboarding -- Components reusable in other products -- Safe and self-contained +Steps: profile basics (name, timezone), preferences (theme, density), notifications (toggles), integrations (fake list), privacy level, final review summary + +## Settings Dashboard + +After onboarding: profile card, preferences, notification settings, danger zone (delete local profile with confirm dialog) + +## UX/Accessibility + +Great empty/error/validation states, keyboard accessible, mobile-first responsive + +## Verification + +``` +pnpm install && pnpm run check && pnpm run build +``` diff --git a/dashboards/ux-lab/lovable-onboarding-flow/README.md b/dashboards/ux-lab/lovable-onboarding-flow/README.md deleted file mode 100644 index fe683e83..00000000 --- a/dashboards/ux-lab/lovable-onboarding-flow/README.md +++ /dev/null @@ -1,23 +0,0 @@ -# Lovable — Onboarding + Settings Wizard - -**GitHub repo:** [`saravanakumardb/temp_lovable-onboarding-flow`](https://github.com/saravanakumardb/temp_lovable-onboarding-flow) - -This folder is designed to be used as a standalone repo. - -## What it is - -A premium onboarding + settings wizard micro-app demonstrating best-in-class UX patterns: - -- Multi-step wizard (5–7 steps) with progress indicator -- Back/Next with validation + "Skip for now" confirm dialog -- Autosave progress to localStorage -- Settings dashboard (profile, preferences, notifications, danger zone) - -## How to use - -- Read `PROMPT.md` for the build assignment. -- Follow `DESIGN_SYSTEM_BRIEF.md` and `UX_TOKEN_CONTRACT.md` strictly. - -## Reuse goal - -Components should be copy/paste reusable into product onboarding flows across the ByteLyst ecosystem. diff --git a/dashboards/ux-lab/lovable-onboarding-flow/REPO_SCOPING_RULES.md b/dashboards/ux-lab/lovable-onboarding-flow/REPO_SCOPING_RULES.md deleted file mode 100644 index b1b29215..00000000 --- a/dashboards/ux-lab/lovable-onboarding-flow/REPO_SCOPING_RULES.md +++ /dev/null @@ -1,9 +0,0 @@ -# Repo Scoping Rules - -**GitHub repo:** `saravanakumardb/temp_lovable-onboarding-flow` -**URL:** `https://github.com/saravanakumardb/temp_lovable-onboarding-flow` - -- Only modify files inside this repository. -- When publishing / pushing, target `saravanakumardb/temp_lovable-onboarding-flow` only. -- Do NOT commit to `learning_ai_common_plat` or any other repo. -- If you believe a change is needed outside this repo, stop and ask. diff --git a/dashboards/ux-lab/lovable-onboarding-flow/UX_TOKEN_CONTRACT.md b/dashboards/ux-lab/lovable-onboarding-flow/UX_TOKEN_CONTRACT.md deleted file mode 100644 index 99277798..00000000 --- a/dashboards/ux-lab/lovable-onboarding-flow/UX_TOKEN_CONTRACT.md +++ /dev/null @@ -1,17 +0,0 @@ -# UX Token Contract (Shared) - -Define in `src/app/globals.css`: - -- `--ux-bg` -- `--ux-surface` -- `--ux-surface-2` -- `--ux-border` -- `--ux-text` -- `--ux-text-muted` -- `--ux-accent` -- `--ux-accent-foreground` -- `--ux-danger` -- `--ux-warning` -- `--ux-success` -- `--ux-ring` -- `--ux-shadow` diff --git a/dashboards/ux-lab/lovable-settings-ux-kit/ACCEPTANCE_CHECKLIST.md b/dashboards/ux-lab/lovable-settings-ux-kit/ACCEPTANCE_CHECKLIST.md deleted file mode 100644 index c05a2377..00000000 --- a/dashboards/ux-lab/lovable-settings-ux-kit/ACCEPTANCE_CHECKLIST.md +++ /dev/null @@ -1,11 +0,0 @@ -# Acceptance Checklist - -- Before push: `git status` is clean except for the intended app source changes. -- Before push: review `git diff` and confirm no unrelated formatting/refactors. -- No `console.log`. -- No hardcoded colors. -- No network calls. -- Forbidden files are NOT committed: `.env*`, `.next/`, `node_modules/`, `.vercel/`. -- Components in `src/components/**`; no imports from `src/app/**`. -- `pnpm run check` passes. -- `pnpm run build` passes (`next build --webpack`). diff --git a/dashboards/ux-lab/lovable-settings-ux-kit/DESIGN_SYSTEM_BRIEF.md b/dashboards/ux-lab/lovable-settings-ux-kit/DESIGN_SYSTEM_BRIEF.md deleted file mode 100644 index e99bc721..00000000 --- a/dashboards/ux-lab/lovable-settings-ux-kit/DESIGN_SYSTEM_BRIEF.md +++ /dev/null @@ -1,25 +0,0 @@ -# Design System Brief (Must Follow) - -This repo is a **settings UX kit** intended for production reuse. - -## Non-negotiable rules - -- No `console.log`. -- No network calls. -- No hardcoded colors (no hex/rgb/hsl). Use CSS variables only. - -## Token usage - -- Use `UX_TOKEN_CONTRACT.md`. - -## Component architecture - -- Reusable components in `src/components/**`. -- Pages in `src/app/**` compose components. -- Components must NOT import from `src/app/**`. - -## Accessibility - -- Keyboard accessible. -- Proper labels/aria for form inputs. -- `Esc` closes dialogs. diff --git a/dashboards/ux-lab/lovable-settings-ux-kit/INTEGRATION_NOTES.md b/dashboards/ux-lab/lovable-settings-ux-kit/INTEGRATION_NOTES.md deleted file mode 100644 index f9bf365d..00000000 --- a/dashboards/ux-lab/lovable-settings-ux-kit/INTEGRATION_NOTES.md +++ /dev/null @@ -1,15 +0,0 @@ -# Integration Notes - -This repo provides reusable patterns for settings pages. - -Expected reusable components: - -- `SettingsLayout` (sidebar + content) -- `SettingsSection` -- `ToggleRow` -- `SelectRow` -- `DangerZone` -- `InlineSaveStatus` (saved/saving/error) -- `SettingsSearch` - -All styling must use `--ux-*` tokens. diff --git a/dashboards/ux-lab/lovable-settings-ux-kit/PROMPT.md b/dashboards/ux-lab/lovable-settings-ux-kit/PROMPT.md index 94b6bb83..b95797dc 100644 --- a/dashboards/ux-lab/lovable-settings-ux-kit/PROMPT.md +++ b/dashboards/ux-lab/lovable-settings-ux-kit/PROMPT.md @@ -1,94 +1,91 @@ -# Lovable — Settings Page UX Kit (Micro-App) +# Lovable — Settings Page UX Kit -Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`, `UX_TOKEN_CONTRACT.md`, `REPO_SCOPING_RULES.md`, and `ACCEPTANCE_CHECKLIST.md`. +**GitHub repo:** `saravanakumardb/temp_lovable-settings-ux-kit` + +## Push Instructions + +- Push directly to `main` — do NOT open a PR +- Only modify files in this repo + +## Rules + +- No `console.log` +- No network calls — mock data / localStorage only +- No hardcoded colors — no hex, no rgb/rgba/hsl, no `bg-[#123456]` Tailwind classes +- Do NOT commit `.env*`, `.next/`, `node_modules/`, `.vercel/` +- pnpm only +- `pnpm run check` must pass (`tsc --noEmit` + `eslint`) +- `pnpm run build` must pass (`next build --webpack`) + +## CSS Token Contract + +Define in `src/app/globals.css` under `:root` (add `.dark` override): + +- `--ux-bg` — page background +- `--ux-surface` — card/panel surface +- `--ux-surface-2` — elevated surface +- `--ux-border` — borders +- `--ux-text` — primary text +- `--ux-text-muted` — secondary text +- `--ux-accent` — primary accent +- `--ux-accent-foreground` — text on accent +- `--ux-danger` — destructive/error +- `--ux-warning` — warning +- `--ux-success` — success +- `--ux-ring` — focus ring +- `--ux-shadow` — shadows + +Use only via Tailwind: `bg-[var(--ux-surface)]`, `text-[var(--ux-text)]`, `border-[var(--ux-border)]` + +## Component Architecture + +- Reusable components → `src/components/` +- Pages in `src/app/**` compose components only +- Components must NOT import from `src/app/**` + +## Stack + +- Next.js 16 App Router, React 19, TypeScript strict +- TailwindCSS v4, pnpm ## Goal -Build a **UI/UX-rich settings dashboard** micro-app demonstrating premium settings patterns that we can reuse across dashboards and product web apps. +Build a **UI/UX-rich settings dashboard** micro-app with premium settings patterns reusable across dashboards and product web apps. Design-led: spacing, typography, states, interaction polish. -This is design-led: prioritize spacing, typography, states, and interaction polish. - -## Constraints - -- Only modify files in this repository. -- pnpm only. -- Next.js 16 App Router, React 19, TypeScript strict. -- TailwindCSS v4. -- No network calls. -- No `console.log`. -- No hardcoded colors — use `--ux-*` CSS variables from `UX_TOKEN_CONTRACT.md`. -- Avoid unnecessary dependencies. If you add a dependency, justify why it is required. - -## Must-have routes +## Pages - `/` overview landing - `/settings` main settings dashboard -- `/settings/account` account settings section -- `/settings/notifications` notifications settings section -- `/settings/privacy` privacy settings section -- `/settings/appearance` appearance settings section +- `/settings/account` +- `/settings/notifications` +- `/settings/privacy` +- `/settings/appearance` -## App shell / IA +## App Shell -- Left settings nav (section list) -- Main content area -- Sticky top header with: - - search settings (filters visible settings rows) - - “Reset changes” (revert local edits) - - save status indicator (Saved / Saving / Error) +Left settings nav, main content area, sticky top header: search settings (filters visible rows), "Reset changes" button, save status indicator (Saved / Saving / Error) -## Core UX requirements +## Settings Rows -### Settings layout patterns +Section headers with description, rows with: label, description, control (toggle/select/input), optional inline error -- Section headers with description -- Rows with: - - label - - description - - control (toggle/select/input) - - optional inline error +## Autosave (local-only) -### Autosave behavior (local-only) +Persist to localStorage, simulate async save: -- Changes persist to localStorage -- Simulate async save: - - show “Saving…” for 400–800ms - - then “Saved” - - provide a demo toggle to simulate “Save failed” state +- "Saving…" for 400–800ms → "Saved" +- Demo toggle to simulate "Save failed" -### Danger zone +## Danger Zone -- “Delete local profile” action -- confirm dialog (destructive) -- requires typing a confirmation word (e.g. DELETE) +"Delete local profile" — confirm dialog requiring user to type `DELETE` -### Accessibility +## UX Bar -- Full keyboard navigation -- Correct labels for inputs -- Focus rings are token-driven - -## Visual / UX bar - -- Premium spacing/typography -- Subtle animations -- Mobile responsive (nav collapses to drawer on small screens) - -## Deliverables - -- Full Next.js app with scripts: - - `dev` - - `check` (must run `tsc --noEmit` + `eslint`) - - `build` (must run `next build --webpack`) +Premium spacing/typography, subtle animations, full keyboard nav, token-driven focus rings, mobile responsive (nav → drawer on small screens) ## Verification -From repo root: - -- `pnpm install` -- `pnpm run check` -- `pnpm run build` - -## Output expectation - -Open a PR that only changes files in this repo. +``` +pnpm install && pnpm run check && pnpm run build +``` diff --git a/dashboards/ux-lab/lovable-settings-ux-kit/README.md b/dashboards/ux-lab/lovable-settings-ux-kit/README.md deleted file mode 100644 index 23a2852f..00000000 --- a/dashboards/ux-lab/lovable-settings-ux-kit/README.md +++ /dev/null @@ -1,21 +0,0 @@ -# Lovable — Settings Page UX Kit - -This folder is designed to be used as a standalone repo. - -## What it is - -A token-driven settings UI kit for: - -- Settings layout + sectioning -- Autosave status patterns -- Search/filter settings -- Danger zone patterns - -## How to use - -- Read `PROMPT.md` for the build assignment. -- Follow `DESIGN_SYSTEM_BRIEF.md` and `UX_TOKEN_CONTRACT.md` strictly. - -## Reuse goal - -Components should be copy/paste reusable into other dashboards/apps. diff --git a/dashboards/ux-lab/lovable-settings-ux-kit/REPO_SCOPING_RULES.md b/dashboards/ux-lab/lovable-settings-ux-kit/REPO_SCOPING_RULES.md deleted file mode 100644 index a63b31c5..00000000 --- a/dashboards/ux-lab/lovable-settings-ux-kit/REPO_SCOPING_RULES.md +++ /dev/null @@ -1,9 +0,0 @@ -# Repo Scoping Rules - -**GitHub repo:** `saravanakumardb/temp_lovable-settings-ux-kit` -**URL:** `https://github.com/saravanakumardb/temp_lovable-settings-ux-kit` - -- Only modify files inside this repository. -- When publishing / pushing, target `saravanakumardb/temp_lovable-settings-ux-kit` only. -- Do NOT commit to `learning_ai_common_plat` or any other repo. -- If you believe a change is needed outside this repo, stop and ask. diff --git a/dashboards/ux-lab/lovable-settings-ux-kit/UX_TOKEN_CONTRACT.md b/dashboards/ux-lab/lovable-settings-ux-kit/UX_TOKEN_CONTRACT.md deleted file mode 100644 index 4849f874..00000000 --- a/dashboards/ux-lab/lovable-settings-ux-kit/UX_TOKEN_CONTRACT.md +++ /dev/null @@ -1,17 +0,0 @@ -# UX Token Contract (Shared) - -Define these CSS variables in `src/app/globals.css` under `:root` and optionally provide a `.dark` override. - -- `--ux-bg` -- `--ux-surface` -- `--ux-surface-2` -- `--ux-border` -- `--ux-text` -- `--ux-text-muted` -- `--ux-accent` -- `--ux-accent-foreground` -- `--ux-danger` -- `--ux-warning` -- `--ux-success` -- `--ux-ring` -- `--ux-shadow`