vibe-design-system 2.5.23 → 2.5.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.5.23",
+  "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

@@ -29,6 +29,7 @@ const cliT = (key, n) => CLI_LOCALES[CLI_LOCALE][key].replace("{n}", String(n));
 const SRC_DIR = path.join(PROJECT_ROOT, "src");
 const COMPONENTS_DIR = path.join(PROJECT_ROOT, "src", "components");
 const PAGES_DIR = path.join(PROJECT_ROOT, "src", "pages");
+const APP_DIR = path.join(PROJECT_ROOT, "src", "app");
 
 const IGNORE_DIRS = ["node_modules", "dist", ".next", "build", "vds-generated", ".storybook"];
 const OUTPUT_FILE = path.join(PROJECT_ROOT, "vds-output.json");
@@ -315,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) {
@@ -436,6 +438,47 @@ function suggestNameFromPattern(pattern) {
   return "Container";
 }
 
+/** Count direct child elements in JSX inner content (depth-1 opening tags). */
+function countDirectChildren(innerContent) {
+  if (!innerContent || typeof innerContent !== "string") return 0;
+  let depth = 0;
+  let count = 0;
+  const s = innerContent;
+  let i = 0;
+  while (i < s.length) {
+    if (s.slice(i, i + 2) === "</") {
+      i += 2;
+      depth -= 1;
+      while (i < s.length && /[\w-]/.test(s[i])) i += 1;
+      continue;
+    }
+    if (s[i] === "<" && /[\w]/.test(s[i + 1])) {
+      depth += 1;
+      if (depth === 1) count += 1;
+      i += 1;
+      while (i < s.length && /[\w-]/.test(s[i])) i += 1;
+      continue;
+    }
+    if (s[i] === "{" || s[i] === '"' || s[i] === "'" || s[i] === "`") {
+      const open = s[i];
+      const close = open === "{" ? "}" : open;
+      i += 1;
+      let depthBrace = open === "{" ? 1 : 0;
+      while (i < s.length) {
+        if (depthBrace === 0 && (s[i] === close || (open === "{" && s[i] === "}"))) break;
+        if (s[i] === open) depthBrace += 1;
+        else if (s[i] === close) depthBrace -= 1;
+        else if ((open === '"' || open === "'") && s[i] === "\\") i += 1;
+        i += 1;
+      }
+      if (s[i] === close) i += 1;
+      continue;
+    }
+    i += 1;
+  }
+  return count;
+}
+
 /** Extract full JSX element (opening tag to matching closing tag) and inner text. */
 function extractFullElement(content, classNameMatchIndex, tagName) {
   const tag = tagName;
@@ -475,17 +518,51 @@ function extractFullElement(content, classNameMatchIndex, tagName) {
   return null;
 }
 
-/** Scan src/pages/*.tsx for repeated className clusters; return component suggestions. */
+/** Return set of component names already in src/components (so we don't suggest them again). */
+function getExistingComponentNames() {
+  const names = new Set();
+  if (!fs.existsSync(COMPONENTS_DIR)) return names;
+  const walk = (dir) => {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    for (const e of entries) {
+      const full = path.join(dir, e.name);
+      if (e.isDirectory() && !IGNORE_DIRS.includes(e.name)) walk(full);
+      else if (e.isFile() && /\.(tsx|jsx)$/i.test(e.name)) {
+        const base = e.name.replace(/\.(tsx|jsx)$/i, "");
+        if (/^[A-Z]/.test(base)) names.add(base);
+      }
+    }
+  };
+  walk(COMPONENTS_DIR);
+  return names;
+}
+
+/** Scan src/pages and src/app for repeated visual-section patterns (className + 2+ children); return component suggestions. */
 function extractComponentSuggestions() {
-  if (!fs.existsSync(PAGES_DIR)) return [];
-  const pageFiles = getAllComponentFiles(PAGES_DIR);
+  const pageDirs = [
+    { dir: PAGES_DIR, prefix: "src/pages/" },
+    { dir: APP_DIR, prefix: "src/app/" },
+  ];
+  const allPageFiles = [];
+  for (const { dir, prefix } of pageDirs) {
+    if (!fs.existsSync(dir)) continue;
+    const files = getAllComponentFiles(dir);
+    for (const rel of files) {
+      allPageFiles.push({ fullPath: path.join(dir, rel), srcRel: prefix + rel.replace(/\\/g, "/") });
+    }
+  }
+  if (allPageFiles.length === 0) return [];
+
   const byPattern = new Map();
   const re = /className\s*=\s*["']([^"']+)["']|className\s*=\s*\{\s*["']([^"']+)["']/g;
 
-  for (const rel of pageFiles) {
-    const fullPath = path.join(PAGES_DIR, rel);
-    const content = fs.readFileSync(fullPath, "utf-8");
-    const srcRel = "src/pages/" + rel.replace(/\\/g, "/");
+  for (const { fullPath, srcRel } of allPageFiles) {
+    let content;
+    try {
+      content = fs.readFileSync(fullPath, "utf-8");
+    } catch (_) {
+      continue;
+    }
     let m;
     re.lastIndex = 0;
     while ((m = re.exec(content)) !== null) {
@@ -500,11 +577,14 @@ function extractComponentSuggestions() {
         const tagName = tagMatch ? tagMatch[1] : "div";
         let fullJsx = null;
         let innerText = "";
+        let innerContent = "";
         const extracted = extractFullElement(content, m.index, tagName);
         if (extracted) {
           fullJsx = extracted.fullJsx;
           innerText = extracted.innerText || "";
+          innerContent = extracted.innerContent || "";
         }
+        const directChildren = countDirectChildren(innerContent);
         byPattern.set(raw, {
           count: 0,
           files: new Set(),
@@ -512,6 +592,7 @@ function extractComponentSuggestions() {
           snippet: `<${tagName} className="${raw}">...</${tagName}>`,
           fullJsx,
           innerText,
+          directChildren,
         });
       }
       const entry = byPattern.get(raw);
@@ -520,19 +601,23 @@ function extractComponentSuggestions() {
     }
   }
 
+  const existingNames = getExistingComponentNames();
   const suggestions = [];
-  for (const [pattern, { count, files, snippet, tagName, fullJsx, innerText }] of byPattern.entries()) {
+  for (const [pattern, { count, files, snippet, tagName, fullJsx, innerText, directChildren }] of byPattern.entries()) {
     if (count < 2) continue;
     const suggestedName = suggestNameFromContent(innerText) || suggestNameFromPattern(pattern);
+    const name = sanitizeComponentName(suggestedName.replace(/\s+/g, ""));
+    if (existingNames.has(name)) continue;
+    if (directChildren < 2) continue;
     suggestions.push({
-      suggestedName: sanitizeComponentName(suggestedName.replace(/\s+/g, "")),
+      suggestedName: name,
       tagName: tagName || "div",
       pattern,
       fullJsx,
       occurrences: count,
       foundIn: [...files].sort(),
       snippet,
-      reason: `Same className cluster appears ${count} times`,
+      reason: `Visual section candidate: same className cluster ${count}×, ${directChildren} child elements`,
     });
   }
   return suggestions;

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>",
         "  ),",
         "};",
@@ -1183,8 +1198,8 @@ function writeComponentSuggestionsStory(componentSuggestions) {
       "export const Default: Story = {",
       "  render: () => (",
       "    <div style={{ padding: 24, fontFamily: \"system-ui, sans-serif\" }}>",
-      "      <h2 style={{ marginBottom: 16 }}>Repeated className patterns (component candidates)</h2>",
-      "      <p style={{ color: \"#888\", marginBottom: 24 }}>Patterns with 3+ classes appearing 2+ times across src/pages. Consider extracting as components.</p>",
+      "      <h2 style={{ marginBottom: 16 }}>Visual section candidates (component suggestions)</h2>",
+      "      <p style={{ color: \"#888\", marginBottom: 24 }}>From src/pages and src/app: own className, 2+ child elements, pattern repeated 2+ times. Not yet in src/components. Consider extracting as components.</p>",
       "      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 24 }}>",
       "        {suggestions.map((s, i) => (",
       "          <div key={i} style={{ border: \"1px solid #333\", borderRadius: 8, padding: 16, background: \"#111\" }}>",