docs(ux-lab): consolidate each kit to single PROMPT.md + .gitignore only
This commit is contained in:
saravanakumardb1
parent
1db2263599
commit
4537ed271e
@ -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`).
|
|
||||||
@ -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.
|
|
||||||
@ -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.
|
|
||||||
@ -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
|
## 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`
|
## Pages
|
||||||
- `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
|
|
||||||
|
|
||||||
- `/` overview landing
|
- `/` overview landing
|
||||||
- `/palette` command palette demo
|
- `/palette` command palette demo
|
||||||
- `/shortcuts` shortcuts reference + editor demo
|
- `/shortcuts` shortcuts reference + editor
|
||||||
- `/integration` copy/paste integration guide page (UI-only)
|
- `/integration` copy/paste integration guide (UI-only)
|
||||||
|
|
||||||
## Core deliverable: Command palette
|
## Command Palette
|
||||||
|
|
||||||
Build `CommandPalette` with:
|
|
||||||
|
|
||||||
- Open via `Cmd+K` (and `Ctrl+K` fallback)
|
- Open via `Cmd+K` (and `Ctrl+K` fallback)
|
||||||
- Search box
|
- Search box with grouped actions (Navigation, Actions, Settings)
|
||||||
- Grouped actions (e.g., Navigation, Actions, Settings)
|
- Optional action keywords (aliases)
|
||||||
- Optional action keywords (alias terms)
|
- Recent actions + favorites/pinned (localStorage)
|
||||||
- Recent actions (persist to localStorage)
|
- Keyboard: Up/Down, Enter to execute, Esc to close
|
||||||
- Favorites/pinned actions (localStorage)
|
|
||||||
- Keyboard navigation:
|
|
||||||
- Up/Down
|
|
||||||
- Enter to execute
|
|
||||||
- Esc to close
|
|
||||||
- Mouse support
|
- Mouse support
|
||||||
|
- Dialog semantics, focus trap, focus returns on close, ARIA labels
|
||||||
|
|
||||||
Accessibility requirements:
|
## Shortcuts Registry
|
||||||
|
|
||||||
- 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:
|
|
||||||
|
|
||||||
- `registerShortcut({ id, keys, description, scope })`
|
- `registerShortcut({ id, keys, description, scope })`
|
||||||
- Scopes: global vs page-specific (simple; no complex routing coupling)
|
- Scopes: global vs page-specific
|
||||||
- A `/shortcuts` page that lists all registered shortcuts
|
- `/shortcuts` page listing all registered shortcuts
|
||||||
- A UI to remap a shortcut (client-side only) and persist to localStorage
|
- Remap shortcuts UI (localStorage), collision detection
|
||||||
- Collision detection (warn if two actions use the same key combo)
|
|
||||||
|
|
||||||
## Demo content
|
## Demo Content
|
||||||
|
|
||||||
Include 20–30 demo actions:
|
20–30 demo actions: navigation, theme toggle, "Copy JSON", "Clear local data" (confirm dialog)
|
||||||
|
|
||||||
- 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`)
|
|
||||||
|
|
||||||
## Verification
|
## Verification
|
||||||
|
|
||||||
From repo root:
|
```
|
||||||
|
pnpm install && pnpm run check && pnpm run build
|
||||||
- `pnpm install`
|
```
|
||||||
- `pnpm run check`
|
|
||||||
- `pnpm run build`
|
|
||||||
|
|
||||||
## Output expectation
|
|
||||||
|
|
||||||
Open a PR that only changes files in this repo.
|
|
||||||
|
|||||||
@ -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.
|
|
||||||
@ -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.
|
|
||||||
@ -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)]`
|
|
||||||
@ -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`.
|
|
||||||
@ -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.
|
|
||||||
@ -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
|
|
||||||
@ -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
|
## 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.
|
## Pages
|
||||||
- **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.
|
|
||||||
|
|
||||||
## 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)
|
## App Shell
|
||||||
- React `19.x`
|
|
||||||
- TypeScript strict
|
|
||||||
- TailwindCSS v4
|
|
||||||
- shadcn/ui-style components (Radix + Tailwind)
|
|
||||||
- lucide-react icons
|
|
||||||
- pnpm package manager
|
|
||||||
|
|
||||||
## 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
|
## DataTable
|
||||||
- `/table` — DataTable demo
|
|
||||||
- `/filters` — filter builder demo
|
|
||||||
- `/details` — drawers/modals demo
|
|
||||||
- `/states` — loading/empty/error/success patterns
|
|
||||||
- `/kpi` — KPI cards + tiny chart placeholders
|
|
||||||
|
|
||||||
## App shell UX (required)
|
Mock ~80–120 rows (incidents/webhook deliveries): `id`, `status`, `severity`, `service`, `createdAt`, `requestId`, `summary`, `tags`
|
||||||
|
|
||||||
- Left sidebar navigation (responsive)
|
- Sorting, pagination, column visibility toggle
|
||||||
- Top bar with:
|
- Row selection + bulk actions bar
|
||||||
- global search input (client-side; filters mock data)
|
- Per-row menu: copy requestId, copy JSON, open drawer
|
||||||
- theme toggle (light/dark)
|
- Sticky header, expandable row details
|
||||||
- help button showing shortcuts
|
|
||||||
- Keyboard shortcuts:
|
|
||||||
- `Cmd+K` opens command palette
|
|
||||||
- `Esc` closes modal/drawer
|
|
||||||
|
|
||||||
## 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
|
Skeleton loading, empty state + CTA, inline error banner + retry, toast notifications, destructive confirm dialog
|
||||||
- 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`
|
|
||||||
|
|
||||||
## Verification
|
## Verification
|
||||||
|
|
||||||
From the repo root:
|
```
|
||||||
|
pnpm install && pnpm run check && pnpm run build
|
||||||
- `pnpm install`
|
```
|
||||||
- `pnpm run check`
|
|
||||||
- `pnpm run build`
|
|
||||||
|
|
||||||
## Output expectation
|
|
||||||
|
|
||||||
Open a PR containing only this app. No other repo changes.
|
|
||||||
|
|||||||
@ -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`.
|
|
||||||
@ -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.
|
|
||||||
@ -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.
|
|
||||||
@ -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`).
|
|
||||||
@ -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.
|
|
||||||
@ -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.
|
|
||||||
@ -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
|
## 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.
|
Include `src/data/sample-events.json` with ~200 mock events:
|
||||||
- No network calls
|
`id`, `timestamp`, `productId`, `platform`, `osFamily`, `appVersion`, `eventType`, `module`, `eventName`, `requestId?`, `userId?`, `installId?`, `severity?`, `errorMessage?`, `metadata` (object)
|
||||||
- No `console.log`
|
|
||||||
- No hardcoded colors (CSS vars + Tailwind)
|
|
||||||
|
|
||||||
## Data source (required)
|
## Pages
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
- `/` overview + stats
|
- `/` overview + stats
|
||||||
- `/explore` main explorer
|
- `/explore` main explorer
|
||||||
- `/clusters` client-side error grouping
|
- `/clusters` client-side error grouping
|
||||||
|
|
||||||
## Explorer UX (required)
|
## Explorer
|
||||||
|
|
||||||
### Filters
|
|
||||||
|
|
||||||
- Faceted filters: platform, eventType, module, eventName, severity
|
- Faceted filters: platform, eventType, module, eventName, severity
|
||||||
- Date range (simple)
|
- Date range, free-text search, active filter chips + clear all
|
||||||
- Free text search
|
- Save/load filter presets (localStorage)
|
||||||
- Active filter chips + clear all
|
|
||||||
- Save/load presets (localStorage)
|
|
||||||
|
|
||||||
### Results
|
|
||||||
|
|
||||||
- Table/list toggle
|
- Table/list toggle
|
||||||
- Row click opens detail drawer with tabs:
|
- Row click → detail drawer (Overview, Raw JSON, Related by requestId/installId)
|
||||||
- Overview
|
- Copy requestId, copy JSON
|
||||||
- Raw JSON
|
- Filters reflected in URL query params (shareable)
|
||||||
- Related (same requestId/installId)
|
|
||||||
- Copy actions: copy requestId, copy JSON
|
|
||||||
|
|
||||||
### URL state
|
## Clusters
|
||||||
|
|
||||||
- Filters reflected in query params (shareable links)
|
- Group by `eventName + errorMessage` fingerprint
|
||||||
|
|
||||||
## Clusters UX (required)
|
|
||||||
|
|
||||||
- Group by simple fingerprint: `eventName + errorMessage`
|
|
||||||
- Show: count, lastSeen, sample message
|
- Show: count, lastSeen, sample message
|
||||||
- Click cluster → list example events
|
- Click cluster → list example events
|
||||||
|
|
||||||
## Deliverables
|
|
||||||
|
|
||||||
- Full Next.js app with scripts: `dev`, `check`, `build`
|
|
||||||
- `build` must run `next build --webpack`
|
|
||||||
|
|
||||||
## Verification
|
## Verification
|
||||||
|
|
||||||
From the repo root:
|
```
|
||||||
|
pnpm install && pnpm run check && pnpm run build
|
||||||
- `pnpm install`
|
```
|
||||||
- `pnpm run check`
|
|
||||||
- `pnpm run build`
|
|
||||||
|
|
||||||
## Output expectation
|
|
||||||
|
|
||||||
PR contains only this app.
|
|
||||||
|
|||||||
@ -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.
|
|
||||||
@ -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.
|
|
||||||
@ -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`
|
|
||||||
@ -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`).
|
|
||||||
@ -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.
|
|
||||||
@ -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.
|
|
||||||
@ -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 `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
|
## Stack
|
||||||
|
|
||||||
- Next.js 16 App Router
|
- Next.js 16 App Router, React 19, TypeScript strict
|
||||||
- React 19
|
- TailwindCSS v4, pnpm
|
||||||
- Tailwind v4
|
|
||||||
- TypeScript strict
|
|
||||||
- pnpm
|
|
||||||
- lucide-react icons
|
|
||||||
|
|
||||||
## 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
|
- `/` overview + recent plans
|
||||||
- `/studio` main editor
|
- `/studio` main editor
|
||||||
@ -30,60 +62,25 @@ Build a UI/UX-rich Next.js micro-app called **Timeline Studio** that demonstrate
|
|||||||
|
|
||||||
## Layout
|
## Layout
|
||||||
|
|
||||||
- Left sidebar: list of “plans” (templates)
|
Left sidebar (plans list), main canvas (timeline grid), right inspector (edit selected block)
|
||||||
- Main canvas: timeline grid
|
|
||||||
- Right inspector: edit selected block
|
|
||||||
|
|
||||||
## Timeline interactions (must-have)
|
## Timeline Interactions
|
||||||
|
|
||||||
- Lanes (e.g. Work, Personal, Health)
|
- Lanes (Work, Personal, Health)
|
||||||
- Blocks can be:
|
- Blocks: create (button + click), select, drag to move, resize via handles
|
||||||
- created (button + click on grid)
|
- Snap-to-grid (5 min), zoom levels (15m / 30m / 60m)
|
||||||
- selected
|
- Keyboard: `Esc` deselect, `Delete` remove, `Cmd+Z` undo (history stack)
|
||||||
- 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)
|
|
||||||
|
|
||||||
## Inspector (must-have)
|
## Inspector
|
||||||
|
|
||||||
- Title
|
Title, start/end time, lane, tags, notes — persist to localStorage (plans, blocks, zoom, last opened plan)
|
||||||
- Start/end time
|
|
||||||
- Lane
|
|
||||||
- Tags
|
|
||||||
- Notes
|
|
||||||
|
|
||||||
Persist in localStorage:
|
## UX Quality
|
||||||
|
|
||||||
- plans list
|
Clear selection states + resize handles, good hit targets, subtle animations, empty state hints
|
||||||
- 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`
|
|
||||||
|
|
||||||
## Verification
|
## Verification
|
||||||
|
|
||||||
From the repo root:
|
```
|
||||||
|
pnpm install && pnpm run check && pnpm run build
|
||||||
- `pnpm install`
|
```
|
||||||
- `pnpm run check`
|
|
||||||
- `pnpm run build`
|
|
||||||
|
|
||||||
## Output expectation
|
|
||||||
|
|
||||||
PR contains only this app.
|
|
||||||
|
|||||||
@ -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.
|
|
||||||
@ -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.
|
|
||||||
@ -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`
|
|
||||||
@ -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`).
|
|
||||||
@ -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.
|
|
||||||
@ -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
|
|
||||||
@ -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
|
## 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.
|
## Features
|
||||||
- No network calls
|
|
||||||
- No `console.log`
|
|
||||||
- No hardcoded colors (tokens only; define CSS variables and consume them)
|
|
||||||
|
|
||||||
## Pages (required)
|
**Theme controls:** theme toggle, density toggle (comfortable/compact), radius slider (small/medium/large)
|
||||||
|
|
||||||
- `/` Overview: theme switcher + token summary
|
**Contrast checker:** select foreground/background token → show WCAG pass/fail (client-side)
|
||||||
- `/colors` Color ramp preview + contrast checker UI
|
|
||||||
- `/typography` Type scale preview
|
|
||||||
- `/components` Component preview gallery
|
|
||||||
- `/audit` “Hardcoded color detector” helper (basic UI tool)
|
|
||||||
|
|
||||||
## 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
|
## Verification
|
||||||
- Density toggle (comfortable/compact)
|
|
||||||
- Radius slider (small/medium/large) affecting components
|
|
||||||
|
|
||||||
### Contrast checker
|
```
|
||||||
|
pnpm install && pnpm run check && pnpm run build
|
||||||
- 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
|
|
||||||
|
|||||||
@ -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.
|
|
||||||
@ -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.
|
|
||||||
@ -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`
|
|
||||||
@ -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`).
|
|
||||||
@ -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.
|
|
||||||
@ -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.
|
|
||||||
@ -1,29 +1,58 @@
|
|||||||
# 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
|
## 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`
|
## Pages
|
||||||
- `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
|
|
||||||
|
|
||||||
- `/` overview landing + links
|
- `/` overview landing + links
|
||||||
- `/toasts` toast system demos
|
- `/toasts` toast system demos
|
||||||
@ -32,89 +61,38 @@ This is design-led: prioritize interaction polish, spacing, typography, and acce
|
|||||||
- `/dialogs` confirm dialog patterns
|
- `/dialogs` confirm dialog patterns
|
||||||
- `/forms` validation + helper text patterns
|
- `/forms` validation + helper text patterns
|
||||||
|
|
||||||
## App shell
|
## App Shell
|
||||||
|
|
||||||
- Left sidebar navigation
|
Left sidebar nav, top bar: theme toggle, "Shortcuts" button
|
||||||
- Top bar with:
|
|
||||||
- theme toggle (light/dark)
|
|
||||||
- “Shortcuts” button
|
|
||||||
|
|
||||||
## Toast system (core deliverable)
|
## Toast System
|
||||||
|
|
||||||
Build a toast system that supports:
|
|
||||||
|
|
||||||
- Variants: info, success, warning, error
|
- Variants: info, success, warning, error
|
||||||
- Title + optional description
|
- Title + optional description, optional action button (Undo), optional progress bar
|
||||||
- Optional action button (e.g. Undo)
|
- Stacking/queue (max visible + overflow count)
|
||||||
- Optional progress countdown bar
|
- Dismiss: close button, timeout
|
||||||
- Stacking / queue behavior (max visible, overflow count)
|
- Position demo: top-right, bottom-right, bottom-center
|
||||||
- Dismiss: close button, swipe (optional), timeout
|
- ARIA live region (`polite` info/success, `assertive` error); toasts must not steal focus
|
||||||
- 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
|
|
||||||
|
|
||||||
## Banners
|
## 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
|
## States Gallery
|
||||||
- Optional “Retry” action
|
|
||||||
- Dismissible
|
|
||||||
|
|
||||||
## States gallery
|
`Skeleton` primitives (text, avatar, card), `EmptyState` (icon + title + CTA), `ErrorState` (retry + copy JSON)
|
||||||
|
Demos: table loading, card grid loading, detail drawer loading
|
||||||
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
|
|
||||||
|
|
||||||
## Dialogs
|
## Dialogs
|
||||||
|
|
||||||
- Confirm dialog (destructive)
|
Destructive confirm, non-destructive confirm — focus trap + Esc close
|
||||||
- Confirm dialog (non-destructive)
|
|
||||||
- Modal focus trap + Esc close
|
|
||||||
|
|
||||||
## Forms
|
## Forms
|
||||||
|
|
||||||
Create a small form with:
|
Required fields + inline errors, disabled state, helper text, success state
|
||||||
|
|
||||||
- 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`)
|
|
||||||
|
|
||||||
## Verification
|
## Verification
|
||||||
|
|
||||||
From repo root:
|
```
|
||||||
|
pnpm install && pnpm run check && pnpm run build
|
||||||
- `pnpm install`
|
```
|
||||||
- `pnpm run check`
|
|
||||||
- `pnpm run build`
|
|
||||||
|
|
||||||
## Output expectation
|
|
||||||
|
|
||||||
Open a PR that only changes files in this repo.
|
|
||||||
|
|||||||
@ -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.
|
|
||||||
@ -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.
|
|
||||||
@ -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)]`
|
|
||||||
@ -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`).
|
|
||||||
@ -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.
|
|
||||||
@ -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.
|
|
||||||
@ -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
|
## 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.
|
## Pages
|
||||||
- No backend calls; localStorage only
|
|
||||||
- No `console.log`
|
|
||||||
- No hardcoded colors (CSS variables)
|
|
||||||
|
|
||||||
## 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
|
- `/onboarding` wizard
|
||||||
- `/settings` settings dashboard
|
- `/settings` settings dashboard
|
||||||
|
|
||||||
## Deliverables
|
## Onboarding Flow
|
||||||
|
|
||||||
- Next.js 16 App Router
|
Multi-step wizard (5–7 steps):
|
||||||
- Tailwind v4
|
|
||||||
- TypeScript strict
|
|
||||||
- Scripts: `dev`, `check`, `build` (`next build --webpack`)
|
|
||||||
|
|
||||||
## 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
|
Steps: profile basics (name, timezone), preferences (theme, density), notifications (toggles), integrations (fake list), privacy level, final review summary
|
||||||
- Components reusable in other products
|
|
||||||
- Safe and self-contained
|
## 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
|
||||||
|
```
|
||||||
|
|||||||
@ -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.
|
|
||||||
@ -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.
|
|
||||||
@ -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`
|
|
||||||
@ -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`).
|
|
||||||
@ -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.
|
|
||||||
@ -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.
|
|
||||||
@ -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
|
## 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.
|
## Pages
|
||||||
|
|
||||||
## 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
|
|
||||||
|
|
||||||
- `/` overview landing
|
- `/` overview landing
|
||||||
- `/settings` main settings dashboard
|
- `/settings` main settings dashboard
|
||||||
- `/settings/account` account settings section
|
- `/settings/account`
|
||||||
- `/settings/notifications` notifications settings section
|
- `/settings/notifications`
|
||||||
- `/settings/privacy` privacy settings section
|
- `/settings/privacy`
|
||||||
- `/settings/appearance` appearance settings section
|
- `/settings/appearance`
|
||||||
|
|
||||||
## App shell / IA
|
## App Shell
|
||||||
|
|
||||||
- Left settings nav (section list)
|
Left settings nav, main content area, sticky top header: search settings (filters visible rows), "Reset changes" button, save status indicator (Saved / Saving / Error)
|
||||||
- Main content area
|
|
||||||
- Sticky top header with:
|
|
||||||
- search settings (filters visible settings rows)
|
|
||||||
- “Reset changes” (revert local edits)
|
|
||||||
- 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
|
## Autosave (local-only)
|
||||||
- Rows with:
|
|
||||||
- label
|
|
||||||
- description
|
|
||||||
- control (toggle/select/input)
|
|
||||||
- optional inline error
|
|
||||||
|
|
||||||
### Autosave behavior (local-only)
|
Persist to localStorage, simulate async save:
|
||||||
|
|
||||||
- Changes persist to localStorage
|
- "Saving…" for 400–800ms → "Saved"
|
||||||
- Simulate async save:
|
- Demo toggle to simulate "Save failed"
|
||||||
- show “Saving…” for 400–800ms
|
|
||||||
- then “Saved”
|
|
||||||
- provide a demo toggle to simulate “Save failed” state
|
|
||||||
|
|
||||||
### Danger zone
|
## Danger Zone
|
||||||
|
|
||||||
- “Delete local profile” action
|
"Delete local profile" — confirm dialog requiring user to type `DELETE`
|
||||||
- confirm dialog (destructive)
|
|
||||||
- requires typing a confirmation word (e.g. DELETE)
|
|
||||||
|
|
||||||
### Accessibility
|
## UX Bar
|
||||||
|
|
||||||
- Full keyboard navigation
|
Premium spacing/typography, subtle animations, full keyboard nav, token-driven focus rings, mobile responsive (nav → drawer on small screens)
|
||||||
- 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`)
|
|
||||||
|
|
||||||
## Verification
|
## Verification
|
||||||
|
|
||||||
From repo root:
|
```
|
||||||
|
pnpm install && pnpm run check && pnpm run build
|
||||||
- `pnpm install`
|
```
|
||||||
- `pnpm run check`
|
|
||||||
- `pnpm run build`
|
|
||||||
|
|
||||||
## Output expectation
|
|
||||||
|
|
||||||
Open a PR that only changes files in this repo.
|
|
||||||
|
|||||||
@ -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.
|
|
||||||
@ -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.
|
|
||||||
@ -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`
|
|
||||||
Loading…
Reference in New Issue
Block a user