@vadimcomanescu/nadicode-design-system 4.0.1 → 4.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/.agents/skills/seed/SKILL.md +34 -163
  2. package/.agents/skills/seed/references/animation.md +2 -2
  3. package/.agents/skills/seed/references/responsive.md +1 -1
  4. package/README.md +2 -2
  5. package/eslint-rules/nadicode/rules/no-has-svg-selector.js +1 -1
  6. package/package.json +1 -2
  7. package/scripts/ds-check.mjs +0 -10
  8. package/scripts/sync-seed-skill.mjs +0 -3
  9. package/.agents/skills/seed/contract.md +0 -110
  10. package/.agents/skills/seed/intent-map.md +0 -320
  11. package/.agents/skills/seed/recipes/agency-home.md +0 -311
  12. package/.agents/skills/seed/recipes/agents-chat.md +0 -305
  13. package/.agents/skills/seed/recipes/analytics.md +0 -253
  14. package/.agents/skills/seed/recipes/auth.md +0 -254
  15. package/.agents/skills/seed/recipes/blog-content.md +0 -307
  16. package/.agents/skills/seed/recipes/checkout.md +0 -311
  17. package/.agents/skills/seed/recipes/company-about.md +0 -276
  18. package/.agents/skills/seed/recipes/company-contact.md +0 -234
  19. package/.agents/skills/seed/recipes/crud-form.md +0 -233
  20. package/.agents/skills/seed/recipes/crud-list-detail.md +0 -230
  21. package/.agents/skills/seed/recipes/dashboard.md +0 -354
  22. package/.agents/skills/seed/recipes/digital-workers.md +0 -314
  23. package/.agents/skills/seed/recipes/error-pages.md +0 -199
  24. package/.agents/skills/seed/recipes/marketing-landing.md +0 -293
  25. package/.agents/skills/seed/recipes/marketing-shell.md +0 -156
  26. package/.agents/skills/seed/recipes/navigation-shell.md +0 -787
  27. package/.agents/skills/seed/recipes/onboarding.md +0 -258
  28. package/.agents/skills/seed/recipes/pricing.md +0 -271
  29. package/.agents/skills/seed/recipes/service-detail.md +0 -302
  30. package/.agents/skills/seed/recipes/settings.md +0 -252
  31. package/.agents/skills/seed/references/blocks.md +0 -128
  32. package/.agents/skills/seed/references/components.md +0 -287
  33. package/.agents/skills/seed/references/icons.md +0 -169
  34. package/.agents/skills/seed/references/nextjs.md +0 -49
  35. package/.agents/skills/seed/references/tokens.md +0 -88
@@ -1,302 +0,0 @@
1
- # Recipe: Service Detail
2
-
3
- Individual service, product, or agent deep-dive page with solution showcase, features, and social proof.
4
-
5
- ## Route Pattern
6
-
7
- `/services/[slug]`, `/products/[slug]`, or `/agents/[slug]`
8
-
9
- ## Shell
10
-
11
- `marketing-shell` (HeaderBlock + FooterBlock)
12
-
13
- ---
14
-
15
- ## Layout Blueprint (Desktop)
16
-
17
- ```
18
- +------------------------------------------------+
19
- | HeaderBlock: Logo [Nav links] [CTA Button] |
20
- +------------------------------------------------+
21
- | |
22
- | HERO SECTION |
23
- | Service/product name |
24
- | Subtitle: value proposition |
25
- | [Primary CTA] [Secondary CTA] |
26
- | |
27
- +------------------------------------------------+
28
- | |
29
- | SOLUTION SHOWCASE |
30
- | +-------------------+ +------------------+ |
31
- | | Interactive demo | | Key benefits | |
32
- | | or product visual | | listed | |
33
- | +-------------------+ +------------------+ |
34
- | |
35
- +------------------------------------------------+
36
- | |
37
- | FEATURES GRID (3-col) |
38
- | +----------+ +----------+ +----------+ |
39
- | | Feature 1| | Feature 2| | Feature 3| |
40
- | +----------+ +----------+ +----------+ |
41
- | +----------+ +----------+ +----------+ |
42
- | | Feature 4| | Feature 5| | Feature 6| |
43
- | +----------+ +----------+ +----------+ |
44
- | |
45
- +------------------------------------------------+
46
- | PROCESS FLOW |
47
- | How it works: step-by-step |
48
- | [Step 1] → [Step 2] → [Step 3] |
49
- +------------------------------------------------+
50
- | STATS / OUTCOMES |
51
- | +------+ +------+ +------+ +------+ |
52
- | | Stat | | Stat | | Stat | | Stat | |
53
- | +------+ +------+ +------+ +------+ |
54
- +------------------------------------------------+
55
- | |
56
- | TESTIMONIALS |
57
- | Customer success stories |
58
- | |
59
- +------------------------------------------------+
60
- | FINAL CTA SECTION |
61
- | Headline + [CTA Button] |
62
- +------------------------------------------------+
63
- | FooterBlock: columns + social + legal |
64
- +------------------------------------------------+
65
- ```
66
-
67
- ---
68
-
69
- ## Section Sequence
70
-
71
- ### 1. Header
72
-
73
- ```tsx
74
- <HeaderBlock logo={<Logo />} links={navLinks} actions={<Button>Get Started</Button>} />
75
- ```
76
-
77
- ### 2. Hero Section
78
-
79
- ```tsx
80
- <section className="relative py-24 md:py-32 overflow-hidden">
81
- <ShaderBackground shader="meshGradient" intent="hero" opacity={0.2} />
82
- <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
83
- <motion.div variants={heroStagger.container} initial="hidden" animate="visible">
84
- <motion.div variants={heroStagger.child}>
85
- <Badge variant="outline" className="mb-4">{service.category}</Badge>
86
- </motion.div>
87
- <motion.h1 variants={heroStagger.child} className="text-4xl md:text-6xl font-bold tracking-tight">
88
- {service.name}
89
- </motion.h1>
90
- <motion.p variants={heroStagger.child} className="mt-6 text-lg md:text-xl text-text-secondary max-w-2xl mx-auto">
91
- {service.tagline}
92
- </motion.p>
93
- <motion.div variants={heroStagger.child} className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
94
- <Button size="lg">Start Free Trial</Button>
95
- <Button size="lg" variant="outline">Watch Demo</Button>
96
- </motion.div>
97
- </motion.div>
98
- </div>
99
- </section>
100
- ```
101
-
102
- ### 3. Solution Showcase
103
-
104
- ```tsx
105
- <ScrollFadeIn>
106
- <section className="py-16 md:py-24">
107
- <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
108
- <SolutionShowcaseBlock
109
- title={service.showcaseTitle}
110
- description={service.showcaseDescription}
111
- media={service.showcaseMedia}
112
- benefits={service.keyBenefits}
113
- />
114
- </div>
115
- </section>
116
- </ScrollFadeIn>
117
- ```
118
-
119
- ### 4. Features Grid
120
-
121
- ```tsx
122
- <ScrollFadeIn>
123
- <section className="py-16 md:py-24 bg-muted">
124
- <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
125
- <div className="text-center mb-12">
126
- <Heading level={2} size="section" >Capabilities</Heading>
127
- <Typography variant="lead" className="mt-4 text-text-secondary">
128
- Everything {service.name} can do for you
129
- </Typography>
130
- </div>
131
- <FeatureGridBlock features={service.features} columns={3} />
132
- </div>
133
- </section>
134
- </ScrollFadeIn>
135
- ```
136
-
137
- ### 5. Process Flow
138
-
139
- ```tsx
140
- <ScrollFadeIn>
141
- <section className="py-16 md:py-24">
142
- <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
143
- <div className="text-center mb-12">
144
- <Heading level={2} size="section" >How It Works</Heading>
145
- <Typography variant="lead" className="mt-4 text-text-secondary">
146
- Get started in three simple steps
147
- </Typography>
148
- </div>
149
- <ProcessFlowBlock steps={service.processSteps} />
150
- </div>
151
- </section>
152
- </ScrollFadeIn>
153
- ```
154
-
155
- ### 6. Stats / Outcomes
156
-
157
- ```tsx
158
- <ScrollFadeIn>
159
- <section className="py-16 md:py-24 bg-muted">
160
- <StatsMarketingBlock stats={service.stats} />
161
- </section>
162
- </ScrollFadeIn>
163
- ```
164
-
165
- ### 7. Testimonials
166
-
167
- ```tsx
168
- <ScrollFadeIn>
169
- <section className="py-16 md:py-24">
170
- <TestimonialsBlock testimonials={service.testimonials} />
171
- </section>
172
- </ScrollFadeIn>
173
- ```
174
-
175
- ### 8. Final CTA
176
-
177
- ```tsx
178
- <ScrollFadeIn>
179
- <section className="py-16 md:py-24">
180
- <CallToActionBlock
181
- title={`Ready to get started with ${service.name}?`}
182
- description="Start your free trial today. No credit card required."
183
- action={<Button size="lg">Start Free Trial</Button>}
184
- />
185
- </section>
186
- </ScrollFadeIn>
187
- ```
188
-
189
- ### 9. Footer
190
-
191
- ```tsx
192
- <FooterBlock columns={footerColumns} social={socialLinks} legal={legalLinks} />
193
- ```
194
-
195
- ---
196
-
197
- ## Animation Storyboard
198
-
199
- ```
200
- ANIMATION STORYBOARD
201
- ====================
202
- BUDGET: 1000ms (above-fold) | SPRING: dramatic (hero), snappy (rest) | REDUCED: opacity-only
203
-
204
- T+0ms [nav] Header visible (instant)
205
- T+100ms [badge] Category badge {fadeIn, snappy}
206
- T+200ms [headline] Service name {fadeInUp, dramatic}
207
- T+350ms [subtitle] Tagline {fadeInUp, dramatic}
208
- T+500ms [ctas] CTA buttons {fadeInUp, dramatic}
209
- T+700ms [shader] Hero shader appears {fadeIn, gentle}
210
-
211
- SCROLL-TRIGGERED (below fold):
212
- [showcase] ScrollFadeIn at 20% visible {fadeInUp, snappy}
213
- [features] ScrollFadeIn at 20% visible {fadeInUp, snappy, stagger 100ms}
214
- [process] ScrollFadeIn at 20% visible {fadeInUp, snappy, stagger 150ms}
215
- [stats] ScrollFadeIn at 20% visible {fadeInUp, snappy}
216
- [testimonials] ScrollFadeIn at 20% visible {fadeIn, gentle}
217
- [cta] ScrollFadeIn at 20% visible {scaleIn, gentle}
218
-
219
- REDUCED MOTION: All items visible immediately, opacity 0->1 in 10ms
220
- ```
221
-
222
- ---
223
-
224
- ## Required Components
225
-
226
- | Component | Import Path | Purpose |
227
- |-----------|-------------|---------|
228
- | `HeaderBlock` | `@vadimcomanescu/nadicode-design-system/catalog/components` via `seedComponents` | Site navigation |
229
- | `FooterBlock` | `@vadimcomanescu/nadicode-design-system/catalog/components` via `seedComponents` | Site footer |
230
- | `Button` | `@vadimcomanescu/nadicode-design-system/button` | CTAs |
231
- | `Badge` | `@vadimcomanescu/nadicode-design-system/badge` | Category tag |
232
- | `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Headings, body text |
233
- | `ScrollFadeIn` | `@vadimcomanescu/nadicode-design-system/scroll-fade-in` | Below-fold animations |
234
- | `FeatureGridBlock` | `@vadimcomanescu/nadicode-design-system/catalog/components` via `seedComponents` | Product/service showcase |
235
-
236
- ### Allowed (optional)
237
-
238
- `ProcessFlowBlock`, `FeatureBlock`, `FeatureGridBlock`, `StatsMarketingBlock`, `TestimonialsBlock`, `FAQBlock`, `CallToActionBlock`, `HeroBlock`, `HeroSectionBlock`, `Card`, `ShaderBackground`, `BentoGrid`, `LogoCloud`
239
-
240
- ### Forbidden
241
-
242
- `Sidebar`, `DataTable`, `AgentTeamPanel`, `SettingsLayout`, `ChatLayout`, `FormWizard`
243
-
244
- ---
245
-
246
- ## Required States
247
-
248
- | State | Trigger | Visual |
249
- |-------|---------|--------|
250
- | `default` | Page loaded | Full service detail content |
251
- | `mobile-navigation` | Hamburger tap | Mobile nav drawer/sheet |
252
-
253
- ---
254
-
255
- ## Responsive Contract
256
-
257
- | Breakpoint | Hero | Showcase | Features | Process | Content Width |
258
- |------------|------|----------|----------|---------|---------------|
259
- | Mobile | Stacked, text-center | Stacked (media above) | 1 col | Vertical | px-4 |
260
- | `sm:` | Stacked, text-center | Stacked (media above) | 2 col | Vertical | px-6, max-w-7xl |
261
- | `lg:` | Centered | Side-by-side | 3 col | Horizontal | px-8, max-w-7xl |
262
-
263
- ---
264
-
265
- ## Styling Rules
266
-
267
- - Showcase uses `glass-panel` for the media container
268
- - Section backgrounds alternate: `bg-background` and `bg-muted`
269
- - Feature cards use consistent icon + heading + description layout
270
- - Process flow uses numbered steps with connecting lines
271
- - CTAs use `Button` with `size="lg"` for prominence
272
- - No raw palette colors; semantic tokens only
273
-
274
- ---
275
-
276
- ## Accessibility
277
-
278
- - Hero heading is `<h1>`, section headings are `<h2>`
279
- - Skip-nav link to main content
280
- - All media has alt text or aria-label
281
- - CTA buttons have descriptive text
282
- - Process steps are in an ordered list
283
- - Mobile nav is keyboard accessible with focus trap
284
-
285
- ---
286
-
287
- ## Reference Implementations
288
-
289
- - `src/components/blocks/SolutionShowcaseBlock.tsx`
290
- - `src/components/blocks/ProcessFlowBlock.tsx`
291
- - `src/components/blocks/FeatureGridBlock.tsx`
292
-
293
- ---
294
-
295
- ## Verification
296
-
297
- ```bash
298
- npx tsc --noEmit
299
- npm run lint
300
- npm run test
301
- npx vitest run src/test/css-variable-usage.test.ts
302
- ```
@@ -1,252 +0,0 @@
1
- # Recipe: Settings
2
-
3
- User/workspace configuration with tab or sidebar navigation, section cards, and save patterns.
4
-
5
- ## Route Pattern
6
-
7
- `/settings` (with optional `/settings/[section]` sub-routes)
8
-
9
- ## Shell
10
-
11
- `app-shell` (Sidebar + top bar + SearchCommand)
12
-
13
- ---
14
-
15
- ## Layout Blueprint (Desktop)
16
-
17
- ```
18
- +--+---------------------------------------------+
19
- | | Breadcrumb: Home > Settings |
20
- |S | Settings |
21
- |I | |
22
- |D | +------+------------------------------------+ |
23
- |E | | Nav | Profile Section glass-panel|
24
- |B | | | +--------------------------------+ | |
25
- |A | |[Profile]| Avatar + Name + Email | | |
26
- |R | |[Security]| [Upload] [Change name] | | |
27
- | | |[Team] | +--------------------------------+ | |
28
- | | |[Billing]| | |
29
- | | |[Danger] | Security Section glass-panel|
30
- | | | | +--------------------------------+ | |
31
- | | | | | Two-factor auth [Switch] | | |
32
- | | | | | Session timeout [Select] | | |
33
- | | | | +--------------------------------+ | |
34
- | | | | | |
35
- | | | | Danger Zone glass-panel| |
36
- | | | | +--------------------------------+ | |
37
- | | | | | Delete workspace [Delete Btn] | | |
38
- | | | | +--------------------------------+ | |
39
- | | +------+------------------------------------+ |
40
- +--+---------------------------------------------+
41
- ```
42
-
43
- ---
44
-
45
- ## Section Sequence
46
-
47
- ### 1. Page Header
48
-
49
- ```tsx
50
- <div>
51
- <Breadcrumb>...</Breadcrumb>
52
- <Heading level={2} size="section" >Settings</Heading>
53
- </div>
54
- ```
55
-
56
- ### 2. Settings Navigation + Content
57
-
58
- ```tsx
59
- {/* Desktop: sidebar layout */}
60
- <div className="flex gap-8 mt-6">
61
- {/* Sidebar nav (desktop) */}
62
- <nav className="hidden lg:block w-[200px] shrink-0">
63
- <div className="space-y-1">
64
- {sections.map(s => (
65
- <Button
66
- key={s.id}
67
- variant={active === s.id ? "secondary" : "ghost"}
68
- className="w-full justify-start"
69
- onClick={() => scrollTo(s.id)}
70
- >
71
- {s.label}
72
- </Button>
73
- ))}
74
- </div>
75
- </nav>
76
-
77
- {/* Mobile: scrollable tabs */}
78
- <div className="lg:hidden overflow-x-auto -mx-4 px-4 mb-4">
79
- <TabsList>
80
- {sections.map(s => (
81
- <TabsTrigger key={s.id} value={s.id}>{s.label}</TabsTrigger>
82
- ))}
83
- </TabsList>
84
- </div>
85
-
86
- {/* Content area */}
87
- <div className="flex-1 space-y-6 max-w-2xl">
88
- {/* Profile Section */}
89
- <Card id="profile" className="glass-panel p-6">
90
- <Heading level={4} size="title" className="mb-4">Profile</Heading>
91
- <div className="space-y-4">
92
- <AvatarUpload />
93
- <FormField>{/* Name */}</FormField>
94
- <FormField>{/* Email */}</FormField>
95
- </div>
96
- <div className="flex justify-end mt-6">
97
- <Button disabled={!isDirty}>Save Changes</Button>
98
- </div>
99
- </Card>
100
-
101
- {/* Security Section */}
102
- <Card id="security" className="glass-panel p-6">
103
- <Heading level={4} size="title" className="mb-4">Security</Heading>
104
- <div className="space-y-4">
105
- <div className="flex items-center justify-between">
106
- <div>
107
- <Typography variant="p">Two-factor authentication</Typography>
108
- <Typography variant="small" className="text-text-secondary">
109
- Add an extra layer of security
110
- </Typography>
111
- </div>
112
- <Switch />
113
- </div>
114
- </div>
115
- </Card>
116
-
117
- {/* Danger Zone */}
118
- <Card id="danger" className="glass-panel p-6 border-destructive">
119
- <Heading level={4} size="title" className="mb-4 text-destructive">Danger Zone</Heading>
120
- <div className="flex items-center justify-between">
121
- <div>
122
- <Typography variant="p">Delete workspace</Typography>
123
- <Typography variant="small" className="text-text-secondary">
124
- This action cannot be undone
125
- </Typography>
126
- </div>
127
- <AlertDialog>
128
- <AlertDialogTrigger asChild>
129
- <Button variant="destructive">Delete</Button>
130
- </AlertDialogTrigger>
131
- {/* Confirmation with typed workspace name */}
132
- </AlertDialog>
133
- </div>
134
- </Card>
135
- </div>
136
- </div>
137
- ```
138
-
139
- ---
140
-
141
- ## Animation Storyboard
142
-
143
- ```
144
- ANIMATION STORYBOARD
145
- ====================
146
- BUDGET: 450ms | SPRING: snappy | REDUCED: opacity-only
147
-
148
- T+0ms [shell] Sidebar + top bar visible (instant)
149
- T+50ms [header] Page title + breadcrumb {fadeInUp, snappy}
150
- T+130ms [nav] Settings navigation {fadeIn, snappy}
151
- T+180ms [section-1] First settings card {fadeInUp, snappy}
152
- T+260ms [section-2] Second settings card {fadeInUp, snappy}
153
- T+340ms [section-3] Third settings card {fadeInUp, snappy}
154
- T+420ms [danger] Danger zone card {fadeInUp, snappy}
155
-
156
- REDUCED MOTION: All items visible immediately
157
- ```
158
-
159
- ---
160
-
161
- ## Required Components
162
-
163
- | Component | Import Path | Purpose |
164
- |-----------|-------------|---------|
165
- | `Card` | `@vadimcomanescu/nadicode-design-system/card` | Section containers |
166
- | `Button` | `@vadimcomanescu/nadicode-design-system/button` | Save, cancel, nav items |
167
- | `Input` | `@vadimcomanescu/nadicode-design-system/input` | Text fields |
168
- | `Switch` | `@vadimcomanescu/nadicode-design-system/switch` | Toggle settings |
169
- | `Select` | `@vadimcomanescu/nadicode-design-system/select` | Dropdown settings |
170
- | `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Section headers |
171
- | `Breadcrumb` | `@vadimcomanescu/nadicode-design-system/breadcrumb` | Navigation context |
172
- | `Tabs` / `TabsList` / `TabsTrigger` | `@vadimcomanescu/nadicode-design-system/tabs` | Mobile section nav |
173
- | `AlertDialog` | `@vadimcomanescu/nadicode-design-system/alert-dialog` | Destructive confirmations |
174
- | `AvatarUpload` | `@vadimcomanescu/nadicode-design-system/avatar-upload` | Profile photo |
175
- | `Form` / `FormField` | `@vadimcomanescu/nadicode-design-system/form` | Form management |
176
- | `Skeleton` | `@vadimcomanescu/nadicode-design-system/skeleton` | Loading state |
177
- | `Sonner` | `@vadimcomanescu/nadicode-design-system/sonner` | Save confirmation toasts |
178
-
179
- ### Allowed (optional)
180
-
181
- `PasswordInput`, `Checkbox`, `RadioGroup`, `Label`, `Badge`, `Tooltip`, `Separator`, `SettingsLayout`
182
-
183
- ### Forbidden
184
-
185
- `DataTable`, `HeroBlock`, chart components, decorative effects, text effects, agentic components
186
-
187
- ---
188
-
189
- ## Required States
190
-
191
- | State | Trigger | Visual |
192
- |-------|---------|--------|
193
- | `loading` | Initial settings fetch | Skeleton cards matching section layout |
194
- | `default` | Settings loaded | Cards with current values |
195
- | `dirty` | User changed a setting | Save button enabled (per-section) |
196
- | `saving` | Save clicked | Save button shows Spinner |
197
- | `saved` | Save succeeded | Toast "Settings saved" (auto-dismiss 2s) |
198
- | `error` | Save failed | Toast variant="destructive" with error |
199
-
200
- ### Save Pattern
201
-
202
- - **Explicit save** (default): Save button at bottom of each Card section
203
- - **Auto-save** (switches only): Toggle triggers immediate save + optimistic UI
204
- - Danger zone actions always require `AlertDialog` confirmation
205
-
206
- ---
207
-
208
- ## Responsive Contract
209
-
210
- | Breakpoint | Navigation | Content | Max Width |
211
- |------------|------------|---------|-----------|
212
- | Mobile | Horizontal scrollable tabs | Full width below tabs | 100% |
213
- | `lg:` | Sidebar nav (200px fixed) | `max-w-2xl` next to nav | Content area |
214
-
215
- ---
216
-
217
- ## Styling Rules
218
-
219
- - Section cards: `glass-panel p-6`
220
- - Danger zone card: `glass-panel p-6 border-destructive`
221
- - Setting rows (toggle + description): `flex items-center justify-between`
222
- - Section spacing: `space-y-6`
223
- - Field spacing within section: `space-y-4`
224
- - Labels always stacked above inputs
225
-
226
- ---
227
-
228
- ## Accessibility
229
-
230
- - Settings nav uses `<nav>` with `aria-label="Settings"`
231
- - Section cards have `id` attributes for scroll-to-section
232
- - Switches have descriptive labels (not just the heading)
233
- - Danger zone has `aria-label="Destructive actions"`
234
- - Keyboard: Tab navigates through sections, Enter activates buttons
235
-
236
- ---
237
-
238
- ## Reference Implementations
239
-
240
- - `src/components/blocks/SettingsLayout.tsx`
241
- - `src/app/(showcase)/pages/page.tsx` (settings demo)
242
-
243
- ---
244
-
245
- ## Verification
246
-
247
- ```bash
248
- npx tsc --noEmit
249
- npm run lint
250
- npm run test
251
- npx vitest run src/test/css-variable-usage.test.ts
252
- ```
@@ -1,128 +0,0 @@
1
- # Blocks Catalog
2
-
3
- Derived from `src/catalog/catalog.ts`.
4
-
5
- Components are consumed via `seedComponents` from `@vadimcomanescu/nadicode-design-system/catalog/components`. Repo source paths are maintainer references only.
6
- Blocks are pre-composed page sections built from Seed UI primitives.
7
- Run `npm run docs:inventory` for the current filesystem-backed list.
8
-
9
- ## Auth Flow
10
-
11
- | Block | Purpose | Key Props |
12
- | --- | --- | --- |
13
- | AccountLockedBlock | Account locked notification | `reason`, `unlockMinutes`, `onContactSupport`, `onBackToLogin`, `title`, `description` |
14
- | AuthLayout | Split-screen auth layout wrapper | `mode`, `action`, `error`, `googleAction`, `labels` |
15
- | AuthSuccessBlock | Generic auth success state | `icon`, `title`, `description`, `buttonText`, `onContinue`, `autoRedirectSeconds` |
16
- | LoginBlock | Email/password login with social OAuth | `type`, `showSocial`, `labels`, `action`, `error`, `onLogin`, `googleAction`, `forgotPasswordHref`, `signUpHref`, `signInHref` |
17
- | PasswordRecoveryBlock | Password reset request | `mode`, `onSubmit`, `onBackToLogin`, `title`, `description`, `buttonText`, `successTitle` |
18
- | ResetPasswordBlock | New password entry (from email link) | `onSubmit`, `onBackToLogin`, `title`, `description` |
19
- | SignUpBlock | Registration form | `title`, `description`, `showSocial`, `signInHref`, `onSubmit` |
20
- | TwoFactorChallengeBlock | 2FA code entry challenge | `onVerify`, `onUseBackupCode`, `onBackToLogin`, `error`, `title`, `description`, `backupCodeLabel` |
21
- | TwoFactorSetupBlock | 2FA setup with QR code | `qrCodeUrl`, `secret`, `backupCodes`, `onVerify`, `onComplete`, `title`, `description` |
22
-
23
- ## Marketing
24
-
25
- | Block | Purpose | Key Props |
26
- | --- | --- | --- |
27
- | AgentProfileGridBlock | Agent/worker profile card grid ("Meet your AI team") | `title`, `description`, `agents`, `columns` |
28
- | CallToActionBlock | Call-to-action section | `title`, `description`, `primaryAction`, `secondaryAction` |
29
- | ComparisonBlock | Side-by-side feature comparison | `plans`, `title`, `description` |
30
- | FAQBlock | FAQ accordion | `items`, `title`, `description` |
31
- | FeatureBlock | Single feature showcase | `variant`, `badge`, `title`, `description`, `features` |
32
- | FeatureGridBlock | Multi-feature grid layout | `title`, `description`, `features` |
33
- | HeroBlock | Full hero with gradient text | `variant`, `headline`, `subheadline`, `primaryAction`, `secondaryAction`, `announcement` |
34
- | HeroSectionBlock | Alternate hero layout | `headline`, `flipWords`, `primaryAction`, `secondaryAction`, `logos` |
35
- | LogoCloud | Partner/client logo grid | `title`, `logos` |
36
- | PricingBlock | Pricing cards comparison | `title`, `description`, `plans`, `showBillingToggle` |
37
- | ProcessFlowBlock | "How it works" numbered step sequence | `title`, `description`, `badge`, `steps` |
38
- | SocialProofBlock | Social proof metrics/logos | `variant`, `logos`, `title`, `testimonials` |
39
- | SolutionShowcaseBlock | Problem -> Solution -> Output narrative with color-coded arc | `title`, `description`, `badge`, `sections` |
40
- | StatsMarketingBlock | Marketing statistics display | `title`, `description`, `stats` |
41
- | TestimonialsBlock | Customer testimonial carousel/grid | `title`, `description`, `testimonials` |
42
-
43
- ## Navigation
44
-
45
- | Block | Purpose | Key Props |
46
- | --- | --- | --- |
47
- | BannerBlock | Top-of-page promotional banner | `variant`, `dismissible`, `onDismiss` |
48
- | FooterBlock | Site footer with link columns | `brandDescription`, `newsletterPlaceholder`, `productLinks`, `companyLinks`, `legalLinks`, `socialIcons` |
49
- | HeaderBlock | Site header with nav links | `menuItems`, `loginLabel`, `signUpLabel`, `loginHref`, `signUpHref` |
50
- | NavUser | Sidebar user menu with dropdown | `user`, `items`, `footer` |
51
- | NotFoundBlock | 404 page content | `title`, `description`, `backHref`, `backLabel` |
52
-
53
- ## Dashboard & Data
54
-
55
- | Block | Purpose | Key Props |
56
- | --- | --- | --- |
57
- | ActivityFeedBlock | Activity/event timeline | `activities`, `title` |
58
- | BarChartBlock | Pre-configured bar chart | `data`, `config`, `title`, `description` |
59
- | ChartBlock | Single chart container | `data`, `config`, `title`, `description` |
60
- | ChartCollectionBlock | Multiple chart grid | - |
61
- | CodeBlock | Syntax-highlighted code display | `code`, `language`, `filename` |
62
- | DataGridBlock | Data grid/table block | `data`, `columns`, `title`, `description` |
63
- | HeatmapChartBlock | Heatmap visualization | `data`, `config`, `title`, `description` |
64
- | InteractiveAreaChartBlock | Zoomable/interactive area chart | `data`, `config`, `title`, `description`, `timeRanges` |
65
- | StatsBlock | KPI statistics cards | `stats` |
66
- | UsageDonutBlock | Usage/quota donut chart | `data`, `config`, `title`, `description`, `centerLabel` |
67
-
68
- ## Application
69
-
70
- | Block | Purpose | Key Props |
71
- | --- | --- | --- |
72
- | ChangelogBlock | Version changelog display | `entries`, `title` |
73
- | ChatLayout | Chat application layout | `initialMessages`, `assistantName`, `assistantStatus`, `placeholder` |
74
- | ContactBlock | Contact form | `onSubmit`, `title`, `description`, `namePlaceholder`, `emailPlaceholder`, `messagePlaceholder`, `successTitle`, `submitLabel` |
75
- | CreateBlock | Entity creation form | `title`, `description`, `submitLabel`, `onSubmit` |
76
- | DirectoryBlock | User/item directory with search | `navItems`, `projects` |
77
- | IntegrationsBlock | Integration marketplace grid | `title`, `description`, `integrations` |
78
- | KanbanDemoBlock | Kanban board demo with sample data | - |
79
- | OnboardingBlock | Multi-step onboarding wizard | `steps`, `title`, `onToggle` |
80
- | SettingsLayout | Settings page with nav sidebar | `links`, `title`, `subtitle`, `defaultActive`, `renderContent` |
81
- | WizardBlock | Generic step-by-step wizard | `title`, `description`, `steps`, `onFinish` |
82
-
83
- ## Content & Media
84
-
85
- | Block | Purpose | Key Props |
86
- | --- | --- | --- |
87
- | AudioVisualizerBlock | Audio visualization display | `bars`, `isPlaying` |
88
- | GalleryBlock | Image/media gallery grid | `images`, `columns`, `title` |
89
- | NewsletterBlock | Email newsletter signup | `onSubscribe`, `title`, `description` |
90
-
91
- ## User
92
-
93
- | Block | Purpose | Key Props |
94
- | --- | --- | --- |
95
- | InviteUserModal | Invite teammate modal with role selection | `onInvite`, `onInvited` |
96
- | TeamBlock | Team members grid with roles/avatars | `title`, `sections` |
97
-
98
- ## AI/Voice
99
-
100
- | Block | Purpose | Key Props |
101
- | --- | --- | --- |
102
- | VoiceAgentCard | AI voice agent interface card | `agent`, `state`, `selected`, `onSelect`, `ariaLabel` |
103
-
104
- ## Agentic
105
-
106
- | Block | Purpose | Key Props |
107
- | --- | --- | --- |
108
- | AgentConversationBlock | Agent conversation UI (messages, tool calls, thinking) | `messages` |
109
- | AgentRunOverviewBlock | Agent run summary with status, duration, and output | `title`, `description`, `teamTitle`, `metricsTitle`, `contextTitle`, `workflow`, `agents`, `metrics`, `context` |
110
- | AgentWorkbenchBlock | Agent workbench layout with tool panels and conversation | `title`, `description`, `threadTitle`, `workTitle`, `defaultWorkTab`, `messages`, `artifacts`, `diffs`, `logs`, `composer` |
111
-
112
- ## Usage Pattern
113
-
114
- Blocks accept `className` for placement and compose Seed UI primitives:
115
-
116
- ```tsx
117
- import { seedComponents } from "@vadimcomanescu/nadicode-design-system/catalog/components"
118
-
119
- const { LoginBlock, HeroBlock } = seedComponents
120
-
121
- <div className="flex items-center justify-center min-h-dvh">
122
- <LoginBlock type="login" showSocial />
123
- </div>
124
-
125
- <HeroBlock title="Ship faster with Seed" subtitle="Production-ready components" />
126
- ```
127
-
128
- Blocks are `"use client"` in Next.js (they contain event handlers, state, or Radix primitives).