vibe-design-system 2.5.24 → 2.5.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.5.24",
+  "version": "2.5.25",
   "description": "Auto-generate design systems for vibe coding projects",
   "type": "module",
   "bin": {

package/vds-core-template/README.md

@@ -45,8 +45,24 @@ To see **live renders** of components in the dashboard (isolated, no app chrome)
    VDS_PREVIEW_URL=http://localhost:3000 node vds-core/dashboard-server.mjs
    ```
 
+## Storybook
+
+1. **Generate stories** (after `npm run vds`):
+   ```bash
+   npm run vds:stories
+   ```
+   Add to `package.json` if missing:
+   ```json
+   "vds:stories": "node vds-core/story-generator.mjs"
+   ```
+
+2. **Context providers:** If components use React context (e.g. `useTimer`, `useSidebar`, `useCircles`, drag-drop context), they will error in Storybook unless wrapped with the right providers. In your project, add decorators in `.storybook/preview.tsx` to wrap all stories (or per-story) with your app’s providers (e.g. `TimerProvider`, `SidebarProvider`, `CirclesProvider`). See [Storybook decorators](https://storybook.js.org/docs/writing-stories/decorators).
+
+3. **Icons:** The Foundations/Icons story lists only icons that are imported from `lucide-react` in your app code (src/, excluding `src/stories`), so it reflects real usage.
+
 ## Layout
 
 - `vds-core/scan.mjs` — Node script; scans `src/components`, CSS, Tailwind config. Writes `vds-output.json` and `public/vds-output.json`. Paths are relative to **project root** (parent of `vds-core`).
+- `vds-core/story-generator.mjs` — Reads `vds-output.json`, writes Storybook stories under `src/stories`.
 - `vds-core/VdsPreview.tsx` — Optional; mount at `/vds-preview` so the dashboard can show live component renders.
 - Dashboard UI reads `/vds-output.json`, renders Foundations + Component Library.

package/vds-core-template/scan.mjs

@@ -316,9 +316,10 @@ function extractBrandAssets() {
   return assets;
 }
 
-/** Extract icon names from `import { A, B, C } from "lucide-react"` (or 'lucide-react'). Returns unique list. */
+/** Extract icon names from `import { A, B, C } from "lucide-react"` in app code only (exclude stories so generated Star/defaults don't pollute). */
 function extractLucideIconsUsed(srcDir) {
-  const files = getAllTsxJsxInDir(srcDir);
+  const allFiles = getAllTsxJsxInDir(srcDir);
+  const files = allFiles.filter((rel) => !/^stories[/\\]/.test(rel.replace(/\\/g, "/")));
   const names = new Set();
   const importRe = /import\s*\{([^}]+)\}\s*from\s*["']lucide-react["']/g;
   for (const rel of files) {

package/vds-core-template/story-generator.mjs

@@ -542,17 +542,26 @@ function getItemTypeFieldsFromSource(source, itemTypeName) {
   return fields;
 }
 
-/** Build 2-3 mock items for array prop from component source (item type fields). */
+/** Whether a field name is date/time-like (for safe mock values and avoiding "Invalid time value"). */
+function isDateLikeField(name) {
+  if (!name || typeof name !== "string") return false;
+  const n = name.toLowerCase();
+  return /date|time|start|end|created|updated|timeline/.test(n);
+}
+
+/** Build 2-3 mock items for array prop from component source (item type fields). Uses valid ISO date strings for date-like fields to avoid "Invalid time value". */
 function buildMockArrayItems(componentSource, itemTypeName, propName) {
   const fields = getItemTypeFieldsFromSource(componentSource, itemTypeName);
   const defaultFields = ["label", "value", "title", "id", "name", "description"];
   const useFields = fields.length ? fields : defaultFields;
   const items = [];
+  const baseDate = new Date("2024-01-15T12:00:00.000Z").getTime();
   for (let i = 1; i <= 3; i++) {
     const item = {};
     for (const f of useFields) {
       if (f === "id") item[f] = String(i);
       else if (f === "value") item[f] = String(100 - i * 25);
+      else if (isDateLikeField(f)) item[f] = new Date(baseDate + i * 86400000).toISOString();
       else item[f] = `Example ${i}`;
     }
     items.push(item);
@@ -637,6 +646,9 @@ function buildDefaultArgsForRequiredProps(props, usageFromPages = null, componen
       } else if (fromPages[name] !== undefined && fromPages[name] !== null) {
         argLines.push(`    ${name}: ${JSON.stringify(String(fromPages[name]))},`);
         added.add(name);
+      } else if (/Date\b/.test(type) || /^(currentDate|startDate|endDate|date)$/.test(name)) {
+        argLines.push(`    ${name}: ${JSON.stringify(new Date().toISOString())},`);
+        added.add(name);
       } else if (/string/.test(type)) {
         argLines.push(`    ${name}: ${stringFallback(name)},`);
         added.add(name);
@@ -1138,7 +1150,9 @@ function writeFoundationsStories(foundations) {
         "",
         "export const Default: Story = {",
         "  render: () => (",
-        "    <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(auto-fill, minmax(100px, 1fr))\", gap: 16, padding: 24 }}>",
+        "    <div style={{ padding: 24 }}>",
+        "      <p style={{ marginBottom: 16, color: \"#888\", fontSize: 14 }}>Icons imported from lucide-react in app code (src/, excluding stories).</p>",
+        "      <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(auto-fill, minmax(100px, 1fr))\", gap: 16 }}>",
         "      {iconNames.map((name) => {",
         "        const Icon = Lucide[name];",
         "        if (!Icon) return null;",
@@ -1149,6 +1163,7 @@ function writeFoundationsStories(foundations) {
         "          </div>",
         "        );",
         "      })}",
+        "      </div>",
         "    </div>",
         "  ),",
         "};",