@vadimcomanescu/nadicode-design-system 4.0.0 → 4.0.2

package/.agents/skills/seed/recipes/crud-form.md

@@ -1,233 +0,0 @@
-# Recipe: CRUD Form
-
-Create or edit entity pages with sectioned form groups and validation.
-
-## Route Patterns
-
-- `/[entity]/new` (create)
-- `/[entity]/[id]/edit` (edit)
-
-## Shell
-
-`app-shell` (Sidebar + top bar + SearchCommand)
-
----
-
-## Layout Blueprint (Desktop)
-
-```
-+--+---------------------------------------------+
-|  | Breadcrumb: Home > [Entity] > New            |
-|S | Page Title                        [Cancel]   |
-|I |                                               |
-|D | +------------------------------------------+  |
-|E | | Section 1: Basic Information     glass-panel|
-|B | | +--------------------------------------+ |  |
-|A | | | Label                                | |  |
-|R | | | [Input]                               | |  |
-|  | | | Label                                | |  |
-|  | | | [Textarea]                            | |  |
-|  | | +--------------------------------------+ |  |
-|  | +------------------------------------------+  |
-|  |                                               |
-|  | +------------------------------------------+  |
-|  | | Section 2: Configuration       glass-panel|  |
-|  | | [Select]  [Switch]  [Checkbox]           |  |
-|  | +------------------------------------------+  |
-|  |                                               |
-|  | +------------------------------------------+  |
-|  | | Actions Row                              |  |
-|  | | [Delete]              [Cancel] [Save]    |  |
-|  | +------------------------------------------+  |
-+--+---------------------------------------------+
-```
-
----
-
-## Section Sequence
-
-### 1. Page Header
-
-```tsx
-<div className="flex items-center justify-between">
-  <div>
-    <Breadcrumb>...</Breadcrumb>
-    <Heading level={2} size="section" >{isEdit ? `Edit ${name}` : `New ${entityType}`}</Heading>
-  </div>
-  <Button variant="ghost" onClick={handleCancel}>Cancel</Button>
-</div>
-```
-
-### 2. Form Sections (grouped in Cards)
-
-```tsx
-<Form {...form}>
-  <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-    {/* Section 1 */}
-    <Card className="glass-panel p-6">
-      <Heading level={4} size="title"  className="mb-4">Basic Information</Heading>
-      <div className="space-y-4">
-        <FormField control={form.control} name="name" render={({ field }) => (
-          <FormItem>
-            <FormLabel>Name</FormLabel>
-            <FormControl><Input {...field} /></FormControl>
-            <FormMessage />
-          </FormItem>
-        )} />
-        <FormField control={form.control} name="description" render={({ field }) => (
-          <FormItem>
-            <FormLabel>Description</FormLabel>
-            <FormControl><Textarea {...field} /></FormControl>
-            <FormMessage />
-          </FormItem>
-        )} />
-      </div>
-    </Card>
-
-    {/* Section 2 */}
-    <Card className="glass-panel p-6">
-      <Heading level={4} size="title"  className="mb-4">Configuration</Heading>
-      <div className="space-y-4">
-        {/* Select, Switch, Checkbox fields */}
-      </div>
-    </Card>
-
-    {/* Actions */}
-    <div className="flex items-center justify-between pt-4">
-      {isEdit && (
-        <AlertDialog>
-          <AlertDialogTrigger asChild>
-            <Button variant="destructive">Delete</Button>
-          </AlertDialogTrigger>
-          {/* Delete confirmation */}
-        </AlertDialog>
-      )}
-      <div className="flex items-center gap-3 ml-auto">
-        <Button variant="outline" onClick={handleCancel}>Cancel</Button>
-        <Button type="submit" disabled={!isDirty || isSubmitting}>
-          {isSubmitting ? <Spinner className="mr-2" /> : null}
-          {isEdit ? "Save Changes" : "Create"}
-        </Button>
-      </div>
-    </div>
-  </form>
-</Form>
-```
-
----
-
-## Animation Storyboard
-
-```
-ANIMATION STORYBOARD
-====================
-BUDGET: 400ms | SPRING: snappy | REDUCED: opacity-only
-
-T+0ms     [shell]     Sidebar + top bar visible    (instant)
-T+50ms    [header]    Title + breadcrumb            {fadeInUp, snappy}
-T+130ms   [section-1] First form section            {fadeInUp, snappy}
-T+230ms   [section-2] Second form section           {fadeInUp, snappy}
-T+330ms   [actions]   Action buttons row            {fadeIn, snappy}
-
-REDUCED MOTION: All items visible immediately
-```
-
----
-
-## Required Components
-
-| Component | Import Path | Purpose |
-|-----------|-------------|---------|
-| `Form` | `@vadimcomanescu/nadicode-design-system/form` | Form wrapper (react-hook-form) |
-| `FormField` | `@vadimcomanescu/nadicode-design-system/form` | Field binding |
-| `FormItem` | `@vadimcomanescu/nadicode-design-system/form` | Field container |
-| `FormLabel` | `@vadimcomanescu/nadicode-design-system/form` | Stacked label (above input) |
-| `FormControl` | `@vadimcomanescu/nadicode-design-system/form` | Control wrapper |
-| `FormMessage` | `@vadimcomanescu/nadicode-design-system/form` | Validation error message |
-| `Input` | `@vadimcomanescu/nadicode-design-system/input` | Text inputs |
-| `Textarea` | `@vadimcomanescu/nadicode-design-system/textarea` | Long text |
-| `Select` | `@vadimcomanescu/nadicode-design-system/select` | Dropdowns |
-| `Switch` | `@vadimcomanescu/nadicode-design-system/switch` | Toggles |
-| `Checkbox` | `@vadimcomanescu/nadicode-design-system/checkbox` | Boolean fields |
-| `Button` | `@vadimcomanescu/nadicode-design-system/button` | Submit, cancel, delete |
-| `Card` | `@vadimcomanescu/nadicode-design-system/card` | Section containers |
-| `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Section headings |
-| `Breadcrumb` | `@vadimcomanescu/nadicode-design-system/breadcrumb` | Navigation context |
-| `AlertDialog` | `@vadimcomanescu/nadicode-design-system/alert-dialog` | Delete confirmation |
-| `Alert` | `@vadimcomanescu/nadicode-design-system/alert` | Submission errors |
-| `Spinner` | `@vadimcomanescu/nadicode-design-system/spinner` | Submit loading |
-| `Skeleton` | `@vadimcomanescu/nadicode-design-system/skeleton` | Loading state (edit mode) |
-
-### Allowed (optional)
-
-`Field`, `Label`, `DatePicker`, `Combobox`, `TagInput`, `RadioGroup`, `Slider`, `FileUpload`, `InputOTP`, `NativeSelect`, `InputGroup`, `Tooltip`
-
-### Forbidden
-
-`DataTable`, `HeroBlock`, chart components, decorative effects, text effects, agentic components
-
----
-
-## Required States
-
-| State | Trigger | Visual |
-|-------|---------|--------|
-| `loading` | Edit mode: fetching entity | Skeleton form sections |
-| `pristine` | Form loaded, no changes | Submit button disabled |
-| `dirty` | User modified a field | Submit button enabled, optional unsaved indicator |
-| `submitting` | Form submitted | Submit button shows Spinner, form disabled |
-| `validation-error` | Invalid fields | `FormMessage` below invalid fields (red text) |
-| `submission-error` | Server error on submit | `Alert` variant="destructive" at top of form |
-| `success` | Saved successfully | Toast "Saved" + redirect to list page |
-
----
-
-## Responsive Contract
-
-| Breakpoint | Layout | Actions |
-|------------|--------|---------|
-| Mobile | Single column, cards full width | Stacked buttons, full width |
-| `sm:` | Single column, max-w-2xl centered | Inline buttons, right-aligned |
-| `lg:` | Single column within sidebar layout | Same as sm |
-
----
-
-## Styling Rules
-
-- Form sections: `glass-panel p-6`
-- Labels: always stacked above inputs (never inline, never floating)
-- Field spacing: `space-y-4` within sections
-- Section spacing: `space-y-6`
-- Required fields: visual asterisk on label
-- Error text: `text-destructive text-sm`
-- Delete button: `variant="destructive"`, left-aligned, separated from save/cancel
-- Max form width: `max-w-2xl mx-auto` for readability
-
----
-
-## Accessibility
-
-- All inputs have associated `<label>` via `FormLabel`
-- Error messages linked via `aria-describedby`
-- Required fields have `aria-required="true"`
-- Delete uses `AlertDialog` with confirmation
-- Tab order: fields top-to-bottom, then cancel, then save
-- Form has `noValidate` (custom validation via react-hook-form)
-
----
-
-## Reference Implementations
-
-- `src/components/blocks/CreateBlock.tsx`
-- `src/components/ui/Form.tsx` (form primitives)
-
----
-
-## Verification
-
-```bash
-npx tsc --noEmit
-npm run lint
-npm run test
-npx vitest run src/test/css-variable-usage.test.ts
-```

package/.agents/skills/seed/recipes/crud-list-detail.md

@@ -1,230 +0,0 @@
-# Recipe: CRUD List + Detail
-
-Entity management page with search, filter, sort, and record inspection.
-
-## Route Patterns
-
-- `/[entity]` (list view)
-- `/[entity]/[id]` (detail view, optional -- can use Dialog/Sheet instead)
-
-## Shell
-
-`app-shell` (Sidebar + top bar + SearchCommand)
-
----
-
-## Layout Blueprint (Desktop)
-
-```
-+--+---------------------------------------------+
-|  | Breadcrumb: Home > [Entity]                  |
-|S | Page Title        [Search] [Filter] [+ New]  |
-|I |                                               |
-|D | +------------------------------------------+  |
-|E | | DataTable                                |  |
-|B | | [ ] Name        Status    Date    Actions|  |
-|A | | [ ] Record 1    Active    Jan 1   ...    |  |
-|R | | [ ] Record 2    Pending   Jan 2   ...    |  |
-|  | | [ ] Record 3    Active    Jan 3   ...    |  |
-|  | | ...                                      |  |
-|  | +------------------------------------------+  |
-|  |                                               |
-|  | [< Prev]  Page 1 of 10  [Next >]             |
-+--+---------------------------------------------+
-
-Detail (Dialog/Sheet overlay):
-+--+---------------------------------------------+
-|  | ...list in background...                     |
-|  |        +---------------------------+         |
-|  |        | Sheet/Dialog              |         |
-|  |        | Entity Name               |         |
-|  |        | Status: [Badge]           |         |
-|  |        |                           |         |
-|  |        | Details section           |         |
-|  |        | Related records section   |         |
-|  |        |                           |         |
-|  |        | [Edit] [Archive] [Delete] |         |
-|  |        +---------------------------+         |
-+--+---------------------------------------------+
-```
-
----
-
-## Section Sequence
-
-### 1. Page Header + Controls
-
-```tsx
-<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-  <div>
-    <Breadcrumb>...</Breadcrumb>
-    <Heading level={2} size="section" >Entities</Heading>
-  </div>
-  <div className="flex items-center gap-3">
-    <Input placeholder="Search..." startIcon={<SearchIcon size={16} />} className="w-64" />
-    <Select>{/* Filter options */}</Select>
-    <Button><PlusIcon size={16} /> New Entity</Button>
-  </div>
-</div>
-```
-
-### 2. Data Table
-
-```tsx
-<Card className="glass-panel">
-  <DataTable
-    columns={columns}
-    data={entities}
-    onRowClick={openDetail}
-    selectable
-  />
-</Card>
-```
-
-### 3. Pagination
-
-```tsx
-<div className="flex items-center justify-between mt-4">
-  <Typography variant="small" className="text-text-secondary">
-    Showing {start}-{end} of {total}
-  </Typography>
-  <Pagination current={page} total={totalPages} onPageChange={setPage} />
-</div>
-```
-
-### 4. Detail Panel (Sheet or Dialog)
-
-```tsx
-<Sheet open={!!selectedEntity} onOpenChange={closeDetail}>
-  <SheetContent className="sm:max-w-lg">
-    <SheetHeader>
-      <SheetTitle>{entity.name}</SheetTitle>
-      <Badge>{entity.status}</Badge>
-    </SheetHeader>
-    <div className="space-y-6 mt-6">
-      {/* Detail fields */}
-      {/* Related records */}
-    </div>
-    <SheetFooter>
-      <Button variant="outline">Edit</Button>
-      <AlertDialog>
-        <AlertDialogTrigger asChild>
-          <Button variant="destructive">Delete</Button>
-        </AlertDialogTrigger>
-        {/* Confirmation dialog */}
-      </AlertDialog>
-    </SheetFooter>
-  </SheetContent>
-</Sheet>
-```
-
----
-
-## Animation Storyboard
-
-```
-ANIMATION STORYBOARD
-====================
-BUDGET: 400ms | SPRING: snappy | REDUCED: opacity-only
-
-T+0ms     [shell]     Sidebar + top bar visible    (instant)
-T+50ms    [header]    Title + controls fade in      {fadeInUp, snappy}
-T+130ms   [table]     Table container fades in      {fadeIn, snappy}
-T+200ms   [rows]      Table rows stagger            {blockStagger, 40ms, max 10}
-T+400ms   [pagination] Pagination fades in          {fadeIn, snappy}
-
-DETAIL PANEL:
-T+0ms     [overlay]   Backdrop appears              {fadeIn, 150ms}
-T+0ms     [sheet]     Sheet slides in from right    {slideInRight, gentle}
-
-REDUCED MOTION: All items visible immediately
-```
-
----
-
-## Required Components
-
-| Component | Import Path | Purpose |
-|-----------|-------------|---------|
-| `DataTable` | `@vadimcomanescu/nadicode-design-system/data-table` | Main data display |
-| `Pagination` | `@vadimcomanescu/nadicode-design-system/pagination` | Page navigation |
-| `Input` | `@vadimcomanescu/nadicode-design-system/input` | Search field |
-| `Select` | `@vadimcomanescu/nadicode-design-system/select` | Filter dropdown |
-| `Button` | `@vadimcomanescu/nadicode-design-system/button` | Actions (new, edit, delete) |
-| `Badge` | `@vadimcomanescu/nadicode-design-system/badge` | Status indicators |
-| `Card` | `@vadimcomanescu/nadicode-design-system/card` | Table container |
-| `Sheet` | `@vadimcomanescu/nadicode-design-system/sheet` | Detail side panel |
-| `AlertDialog` | `@vadimcomanescu/nadicode-design-system/alert-dialog` | Delete confirmation |
-| `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Titles |
-| `Breadcrumb` | `@vadimcomanescu/nadicode-design-system/breadcrumb` | Navigation context |
-| `Skeleton` | `@vadimcomanescu/nadicode-design-system/skeleton` | Loading state |
-| `Empty` | `@vadimcomanescu/nadicode-design-system/empty` | No-data state |
-
-### Allowed (optional)
-
-`Dialog`, `Tabs`, `DropdownMenu`, `ContextMenu`, `Tooltip`, `Table`, `Checkbox`
-
-### Forbidden
-
-`HeroBlock`, `PricingBlock`, decorative effects, text effects, `FormWizard`, chart components
-
----
-
-## Required States
-
-| State | Trigger | Visual |
-|-------|---------|--------|
-| `loading` | Initial data fetch | Skeleton table rows (5 rows) |
-| `empty` | Zero records | `Empty` with entity icon, "No [entities] yet", "Create your first [entity]" CTA |
-| `has-data` | Data loaded | Full DataTable with records |
-| `filtering` | Active filter/search | Table with filtered results, active filter indicators |
-| `empty-filter` | Filter returns zero | `Empty` with "No results match", "Clear filters" CTA |
-| `error` | API failure | `Alert` variant="destructive" with retry |
-
----
-
-## Responsive Contract
-
-| Breakpoint | Table | Filters | Detail Panel |
-|------------|-------|---------|--------------|
-| Mobile | Card list (hidden columns) | Filter button -> Sheet | Full-screen Sheet |
-| `sm:` | Table (key columns) | Inline search + filter button | Sheet side="right" |
-| `lg:` | Full table all columns | Persistent search + filter bar | Sheet max-w-lg |
-
----
-
-## Styling Rules
-
-- Table container: `glass-panel`
-- Status badges: semantic variants (`success`, `warning`, `destructive`, `default`)
-- Row hover: `hover:bg-surface-hover`
-- Selected rows: `bg-surface-active`
-- No raw palette colors
-
----
-
-## Accessibility
-
-- Table has proper `<thead>`, `<tbody>` structure
-- Sortable columns have `aria-sort` attribute
-- Row actions have `aria-label`
-- Delete uses `AlertDialog` for confirmation (keyboard trap)
-- Search input has `role="search"` wrapper
-
----
-
-## Reference Implementations
-
-- `src/components/blocks/DataGridBlock.tsx`
-- `src/components/blocks/DirectoryBlock.tsx`
-
----
-
-## Verification
-
-```bash
-npx tsc --noEmit
-npm run lint
-npm run test
-npx vitest run src/test/css-variable-usage.test.ts
-```