chore(ux-lab): add notify/states, settings, and command palette kits
This commit is contained in:
saravanakumardb1
parent
504ab0f0f5
commit
c66d014044
@ -15,19 +15,26 @@ This folder is intentionally **greenfield** and exists to let external UI/UX gen
|
||||
|
||||
## Micro-apps
|
||||
|
||||
This folder contains **6 separate micro-app projects**:
|
||||
This folder contains multiple micro-app projects:
|
||||
|
||||
### Bolt apps (3)
|
||||
### Bolt apps
|
||||
|
||||
- `bolt-ops-ui-kit/` — reusable ops dashboard patterns (tables, filters, states, drawers)
|
||||
- `bolt-timeline-studio/` — timeline/scheduler builder UI patterns
|
||||
- `bolt-telemetry-explorer/` — local-only telemetry explorer UI patterns
|
||||
|
||||
### Lovable apps (3)
|
||||
### Lovable apps
|
||||
|
||||
This folder contains multiple Lovable-led micro-app projects:
|
||||
|
||||
- `lovable-ops-ui-kit/` — ops dashboard UI kit (Lovable-led design)
|
||||
- `lovable-design-tokens-playground/` — design tokens playground + component previews
|
||||
- `lovable-onboarding-flow/` — onboarding + settings wizard UI patterns
|
||||
- `lovable-notify-states-kit/` — notifications (toasts/banners) + loading/empty/error states kit
|
||||
- `lovable-settings-ux-kit/` — settings page UX kit (layout, autosave, danger zone)
|
||||
|
||||
This folder also contains additional Bolt-led micro-app projects:
|
||||
|
||||
- `bolt-command-palette-kit/` — command palette + keyboard shortcuts kit
|
||||
|
||||
Each micro-app folder contains a single `PROMPT.md`.
|
||||
|
||||
|
||||
27
dashboards/ux-lab/bolt-command-palette-kit/.gitignore
vendored
Normal file
27
dashboards/ux-lab/bolt-command-palette-kit/.gitignore
vendored
Normal file
@ -0,0 +1,27 @@
|
||||
.next
|
||||
out
|
||||
node_modules
|
||||
|
||||
# logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# env
|
||||
.env
|
||||
.env.*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.tsbuildinfo
|
||||
|
||||
# test output
|
||||
playwright-report
|
||||
coverage
|
||||
|
||||
# local
|
||||
*.local
|
||||
@ -0,0 +1,11 @@
|
||||
# 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`).
|
||||
@ -0,0 +1,26 @@
|
||||
# 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.
|
||||
@ -0,0 +1,13 @@
|
||||
# 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.
|
||||
92
dashboards/ux-lab/bolt-command-palette-kit/PROMPT.md
Normal file
92
dashboards/ux-lab/bolt-command-palette-kit/PROMPT.md
Normal file
@ -0,0 +1,92 @@
|
||||
# Bolt — Command Palette + Keyboard Shortcuts Kit (Micro-App)
|
||||
|
||||
Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`, `UX_TOKEN_CONTRACT.md`, `REPO_SCOPING_RULES.md`, and `ACCEPTANCE_CHECKLIST.md`.
|
||||
|
||||
## Mission
|
||||
|
||||
Build a production-grade **command palette + keyboard shortcuts kit** micro-app (Next.js App Router) that we can copy into:
|
||||
|
||||
- `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
|
||||
|
||||
- `/` overview landing
|
||||
- `/palette` command palette demo
|
||||
- `/shortcuts` shortcuts reference + editor demo
|
||||
- `/integration` copy/paste integration guide page (UI-only)
|
||||
|
||||
## Core deliverable: Command palette
|
||||
|
||||
Build `CommandPalette` with:
|
||||
|
||||
- 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
|
||||
- Mouse support
|
||||
|
||||
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:
|
||||
|
||||
- `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)
|
||||
|
||||
## 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`)
|
||||
|
||||
## Verification
|
||||
|
||||
From repo root:
|
||||
|
||||
- `pnpm install`
|
||||
- `pnpm run check`
|
||||
- `pnpm run build`
|
||||
|
||||
## Output expectation
|
||||
|
||||
Open a PR that only changes files in this repo.
|
||||
21
dashboards/ux-lab/bolt-command-palette-kit/README.md
Normal file
21
dashboards/ux-lab/bolt-command-palette-kit/README.md
Normal file
@ -0,0 +1,21 @@
|
||||
# Bolt — Command Palette + Keyboard Shortcuts 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.
|
||||
@ -0,0 +1,4 @@
|
||||
# Repo Scoping Rules
|
||||
|
||||
- Only modify files inside this repository.
|
||||
- If you believe a change is needed outside this repo, stop and ask.
|
||||
@ -0,0 +1,23 @@
|
||||
# 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)]`
|
||||
27
dashboards/ux-lab/lovable-notify-states-kit/.gitignore
vendored
Normal file
27
dashboards/ux-lab/lovable-notify-states-kit/.gitignore
vendored
Normal file
@ -0,0 +1,27 @@
|
||||
.next
|
||||
out
|
||||
node_modules
|
||||
|
||||
# logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# env
|
||||
.env
|
||||
.env.*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.tsbuildinfo
|
||||
|
||||
# test output
|
||||
playwright-report
|
||||
coverage
|
||||
|
||||
# local
|
||||
*.local
|
||||
@ -0,0 +1,11 @@
|
||||
# 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`).
|
||||
@ -0,0 +1,26 @@
|
||||
# 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.
|
||||
@ -0,0 +1,19 @@
|
||||
# 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.
|
||||
120
dashboards/ux-lab/lovable-notify-states-kit/PROMPT.md
Normal file
120
dashboards/ux-lab/lovable-notify-states-kit/PROMPT.md
Normal file
@ -0,0 +1,120 @@
|
||||
# Lovable — Notifications + UI States Kit (Micro-App)
|
||||
|
||||
Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`, `UX_TOKEN_CONTRACT.md`, `REPO_SCOPING_RULES.md`, and `ACCEPTANCE_CHECKLIST.md`.
|
||||
|
||||
## Goal
|
||||
|
||||
Build a **UI/UX-rich** Next.js micro-app that serves as a reusable **Notifications + UI States Kit** we can copy into:
|
||||
|
||||
- `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
|
||||
|
||||
- `/` overview landing + links
|
||||
- `/toasts` toast system demos
|
||||
- `/banners` inline banner demos
|
||||
- `/states` loading / empty / error patterns
|
||||
- `/dialogs` confirm dialog patterns
|
||||
- `/forms` validation + helper text patterns
|
||||
|
||||
## App shell
|
||||
|
||||
- Left sidebar navigation
|
||||
- Top bar with:
|
||||
- theme toggle (light/dark)
|
||||
- “Shortcuts” button
|
||||
|
||||
## Toast system (core deliverable)
|
||||
|
||||
Build a toast system that supports:
|
||||
|
||||
- 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
|
||||
|
||||
## Banners
|
||||
|
||||
Create inline banners for page-level messaging:
|
||||
|
||||
- Variants: info/success/warn/error
|
||||
- Optional “Retry” action
|
||||
- Dismissible
|
||||
|
||||
## 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
|
||||
|
||||
## Dialogs
|
||||
|
||||
- Confirm dialog (destructive)
|
||||
- Confirm dialog (non-destructive)
|
||||
- Modal 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`)
|
||||
|
||||
## Verification
|
||||
|
||||
From repo root:
|
||||
|
||||
- `pnpm install`
|
||||
- `pnpm run check`
|
||||
- `pnpm run build`
|
||||
|
||||
## Output expectation
|
||||
|
||||
Open a PR that only changes files in this repo.
|
||||
22
dashboards/ux-lab/lovable-notify-states-kit/README.md
Normal file
22
dashboards/ux-lab/lovable-notify-states-kit/README.md
Normal file
@ -0,0 +1,22 @@
|
||||
# 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.
|
||||
@ -0,0 +1,4 @@
|
||||
# Repo Scoping Rules
|
||||
|
||||
- Only modify files inside this repository.
|
||||
- If you believe a change is needed outside this repo, stop and ask.
|
||||
@ -0,0 +1,35 @@
|
||||
# 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)]`
|
||||
27
dashboards/ux-lab/lovable-settings-ux-kit/.gitignore
vendored
Normal file
27
dashboards/ux-lab/lovable-settings-ux-kit/.gitignore
vendored
Normal file
@ -0,0 +1,27 @@
|
||||
.next
|
||||
out
|
||||
node_modules
|
||||
|
||||
# logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# env
|
||||
.env
|
||||
.env.*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.tsbuildinfo
|
||||
|
||||
# test output
|
||||
playwright-report
|
||||
coverage
|
||||
|
||||
# local
|
||||
*.local
|
||||
@ -0,0 +1,11 @@
|
||||
# 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`).
|
||||
@ -0,0 +1,25 @@
|
||||
# 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.
|
||||
@ -0,0 +1,15 @@
|
||||
# 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.
|
||||
94
dashboards/ux-lab/lovable-settings-ux-kit/PROMPT.md
Normal file
94
dashboards/ux-lab/lovable-settings-ux-kit/PROMPT.md
Normal file
@ -0,0 +1,94 @@
|
||||
# Lovable — Settings Page UX Kit (Micro-App)
|
||||
|
||||
Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`, `UX_TOKEN_CONTRACT.md`, `REPO_SCOPING_RULES.md`, and `ACCEPTANCE_CHECKLIST.md`.
|
||||
|
||||
## Goal
|
||||
|
||||
Build a **UI/UX-rich settings dashboard** micro-app demonstrating premium settings patterns that we can reuse across dashboards and product web apps.
|
||||
|
||||
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
|
||||
|
||||
- `/` 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
|
||||
|
||||
## App shell / IA
|
||||
|
||||
- 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)
|
||||
|
||||
## Core UX requirements
|
||||
|
||||
### Settings layout patterns
|
||||
|
||||
- Section headers with description
|
||||
- Rows with:
|
||||
- label
|
||||
- description
|
||||
- control (toggle/select/input)
|
||||
- optional inline error
|
||||
|
||||
### Autosave behavior (local-only)
|
||||
|
||||
- Changes persist to localStorage
|
||||
- Simulate async save:
|
||||
- show “Saving…” for 400–800ms
|
||||
- then “Saved”
|
||||
- provide a demo toggle to simulate “Save failed” state
|
||||
|
||||
### Danger zone
|
||||
|
||||
- “Delete local profile” action
|
||||
- confirm dialog (destructive)
|
||||
- requires typing a confirmation word (e.g. DELETE)
|
||||
|
||||
### Accessibility
|
||||
|
||||
- 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`)
|
||||
|
||||
## Verification
|
||||
|
||||
From repo root:
|
||||
|
||||
- `pnpm install`
|
||||
- `pnpm run check`
|
||||
- `pnpm run build`
|
||||
|
||||
## Output expectation
|
||||
|
||||
Open a PR that only changes files in this repo.
|
||||
21
dashboards/ux-lab/lovable-settings-ux-kit/README.md
Normal file
21
dashboards/ux-lab/lovable-settings-ux-kit/README.md
Normal file
@ -0,0 +1,21 @@
|
||||
# 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.
|
||||
@ -0,0 +1,4 @@
|
||||
# Repo Scoping Rules
|
||||
|
||||
- Only modify files inside this repository.
|
||||
- If you believe a change is needed outside this repo, stop and ask.
|
||||
@ -0,0 +1,17 @@
|
||||
# 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