99 lines
2.9 KiB
Markdown
99 lines
2.9 KiB
Markdown
# Lovable — Notifications + UI States Kit
|
|
|
|
**GitHub repo:** `saravanakumardb/temp_lovable-notify-states-kit`
|
|
|
|
## Push Instructions
|
|
|
|
- Push directly to `main` — do NOT open a PR
|
|
- Only modify files in this repo
|
|
|
|
## Rules
|
|
|
|
- No `console.log`
|
|
- No network calls — mock data / localStorage only
|
|
- No hardcoded colors — no hex, no rgb/rgba/hsl, no `bg-[#123456]` Tailwind classes
|
|
- Do NOT commit `.env*`, `.next/`, `node_modules/`, `.vercel/`
|
|
- pnpm only
|
|
- `pnpm run check` must pass (`tsc --noEmit` + `eslint`)
|
|
- `pnpm run build` must pass (`next build --webpack`)
|
|
|
|
## CSS Token Contract
|
|
|
|
Define in `src/app/globals.css` under `:root` (add `.dark` override):
|
|
|
|
- `--ux-bg` — page background
|
|
- `--ux-surface` — card/panel surface
|
|
- `--ux-surface-2` — elevated surface
|
|
- `--ux-border` — borders
|
|
- `--ux-text` — primary text
|
|
- `--ux-text-muted` — secondary text
|
|
- `--ux-accent` — primary accent
|
|
- `--ux-accent-foreground` — text on accent
|
|
- `--ux-danger` — destructive/error
|
|
- `--ux-warning` — warning
|
|
- `--ux-success` — success
|
|
- `--ux-ring` — focus ring
|
|
- `--ux-shadow` — shadows
|
|
|
|
Use only via Tailwind: `bg-[var(--ux-surface)]`, `text-[var(--ux-text)]`, `border-[var(--ux-border)]`
|
|
|
|
## Component Architecture
|
|
|
|
- Reusable components → `src/components/`
|
|
- Pages in `src/app/**` compose components only
|
|
- Components must NOT import from `src/app/**`
|
|
|
|
## Stack
|
|
|
|
- Next.js 16 App Router, React 19, TypeScript strict
|
|
- TailwindCSS v4, pnpm
|
|
|
|
## Goal
|
|
|
|
Build a **UI/UX-rich** Notifications + UI States Kit reusable across `dashboards/admin-web`, `dashboards/tracker-web`, and product web dashboards. Design-led: prioritize interaction polish, spacing, typography, accessibility.
|
|
|
|
## Pages
|
|
|
|
- `/` 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 nav, top bar: theme toggle, "Shortcuts" button
|
|
|
|
## Toast System
|
|
|
|
- Variants: info, success, warning, error
|
|
- Title + optional description, optional action button (Undo), optional progress bar
|
|
- Stacking/queue (max visible + overflow count)
|
|
- Dismiss: close button, timeout
|
|
- Position demo: top-right, bottom-right, bottom-center
|
|
- ARIA live region (`polite` info/success, `assertive` error); toasts must not steal focus
|
|
|
|
## Banners
|
|
|
|
Inline page-level banners: info/success/warn/error variants, 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
|
|
|
|
## Dialogs
|
|
|
|
Destructive confirm, non-destructive confirm — focus trap + Esc close
|
|
|
|
## Forms
|
|
|
|
Required fields + inline errors, disabled state, helper text, success state
|
|
|
|
## Verification
|
|
|
|
```
|
|
pnpm install && pnpm run check && pnpm run build
|
|
```
|