vibe-design-system 2.8.28 → 2.8.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.8.28",
+  "version": "2.8.30",
   "description": "Auto-generate design systems for vibe coding projects",
   "homepage": "https://vibedesign.tech",
   "repository": {

package/vds-core-template/scan.mjs

@@ -525,6 +525,93 @@ function extractTSProps(content) {
   return props.length > 0 ? props : null;
 }
 
+/**
+ * Scan the entire src/ directory for non-Props TypeScript interface and type alias
+ * declarations and build a type registry used by story-generator for realistic mock defaults.
+ *
+ * Returns { TypeName: Array<{ name, type, required }> } or null.
+ * Only includes types with ≥2 fields; skips Props/State/Context/Config/Options/Ref types.
+ */
+function extractProjectTypes() {
+  const registry = {};
+  const seen = new Set();
+
+  function scanDir(dir) {
+    if (!fs.existsSync(dir)) return;
+    let entries;
+    try { entries = fs.readdirSync(dir, { withFileTypes: true }); } catch { return; }
+    for (const e of entries) {
+      if (e.isDirectory()) {
+        if (IGNORE_DIRS.includes(e.name) || e.name === "__tests__") continue;
+        scanDir(path.join(dir, e.name));
+      } else if (/\.(ts|tsx)$/.test(e.name) &&
+                 !e.name.endsWith(".stories.tsx") &&
+                 !e.name.endsWith(".test.ts") &&
+                 !e.name.endsWith(".spec.ts")) {
+        const fullPath = path.join(dir, e.name);
+        let content;
+        try { content = fs.readFileSync(fullPath, "utf-8"); } catch { continue; }
+
+        // Find all export interface / type declarations whose names start with uppercase
+        const declRe = /(?:export\s+)?(?:interface|type)\s+([A-Z][A-Za-z0-9_]*)(?:<[^>]*>)?(?:\s+extends\s+[^{]+)?\s*(?:=\s*(?![\|&]))?(?=\s*\{)/g;
+        let dm;
+        while ((dm = declRe.exec(content)) !== null) {
+          const typeName = dm[1];
+          // Skip non-data types
+          if (/Props$|State$|Context$|Config$|Options$|Params$|Ref$|Handle$|Return$|Result$|Theme$/.test(typeName)) continue;
+          if (/^(FC|React|JSX|HTML|Event|Mouse|Key|Touch|Change|Focus|Blur|Scroll|Input|Submit|SVG)/.test(typeName)) continue;
+          if (seen.has(typeName)) continue; // first declaration wins
+
+          // Locate the opening brace of the body
+          const braceIdx = content.indexOf("{", dm.index + dm[0].length - 1);
+          if (braceIdx === -1) continue;
+
+          // Walk forward counting braces to find matching closing brace
+          let depth = 1, i = braceIdx + 1;
+          while (i < content.length && depth > 0) {
+            if (content[i] === "{") depth++;
+            if (content[i] === "}") depth--;
+            i++;
+          }
+          const block = content.slice(braceIdx + 1, i - 1);
+
+          // Parse fields — for data types we only skip React/HTML-specific attrs, NOT id/title/name etc.
+          const fields = [];
+          const fieldRe = /^[ \t]{1,6}(?:readonly\s+)?(\w+)(\?)?:\s*(.+?)[ \t]*;?[ \t]*$/gm;
+          let fm;
+          while ((fm = fieldRe.exec(block)) !== null) {
+            const fieldName = fm[1].trim();
+            // Only skip HTML/React presentation attrs — keep data fields like id, title, name, status
+            if (/^(className|style|ref|key|htmlFor|tabIndex|role|draggable|aria-|data-)/.test(fieldName)) continue;
+            if (block.slice(fm.index).match(/^[ \t]*\/\//)) continue;
+            const optional = fm[2] === "?";
+            let type = (fm[3] || "")
+              .replace(/\s*\/\/.*$/, "")
+              .trim()
+              .replace(/;$/, "")
+              .trim();
+            const openB = (type.match(/\{/g) || []).length;
+            const closeB = (type.match(/\}/g) || []).length;
+            if (openB !== closeB) continue;
+            type = type.replace(/React\.ReactNode/g, "ReactNode");
+            if (type.length > 60) type = type.slice(0, 57) + "...";
+            fields.push({ name: fieldName, type, required: !optional });
+          }
+
+          // Only register types with at least 2 fields (otherwise not useful for mock generation)
+          if (fields.length >= 2) {
+            registry[typeName] = fields;
+            seen.add(typeName);
+          }
+        }
+      }
+    }
+  }
+
+  scanDir(SRC_DIR);
+  return Object.keys(registry).length > 0 ? registry : null;
+}
+
 /**
  * Extract named UI patterns from a feature-tier file.
  *
@@ -2401,6 +2488,8 @@ function scan() {
   if (Object.keys(colorUsage).length > 0) foundations.colorUsage = colorUsage;
   const gridSystem = extractGridSystem(SRC_DIR);
   if (gridSystem) foundations.gridSystem = gridSystem;
+  const projectTypes = extractProjectTypes();
+  if (projectTypes) foundations.types = projectTypes;
   const componentSuggestions = extractComponentSuggestions();
   const unreleasedSectionCandidates = extractUnreleasedSectionCandidates();
   const output = {

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

@@ -24,6 +24,8 @@ const STORIES_DIR = path.join(SRC_DIR, "stories");
 let FOUNDATIONS_DATA = null;
 // componentsRelDir from vds-output.json — defaults to "src/components"
 let COMPONENTS_REL_DIR = "src/components";
+// Type registry extracted by scan.mjs from project's src/ — { TypeName: [{name, type, required}] }
+let PROJECT_TYPE_REGISTRY = {};
 
 // CSS is loaded from .storybook/preview.tsx — never add CSS import to story files.
 
@@ -636,10 +638,83 @@ function isDateLikeField(name) {
 }
 
 /** 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". */
+/**
+ * Generate a mock JavaScript value string from a TypeScript type string.
+ * Consults PROJECT_TYPE_REGISTRY for custom object types (Task, Project, etc.).
+ * depth prevents infinite recursion on circular types.
+ */
+function genMockValue(type, depth = 0) {
+  if (depth > 2 || !type) return '"example"';
+  type = type.trim();
+  if (/^string(\s*\|.*)?$/.test(type)) return '"example"';
+  if (/^number/.test(type)) return '0';
+  if (/^boolean/.test(type)) return 'false';
+  if (/^Date\b/.test(type) || /^(createdAt|updatedAt|startDate|endDate|dueDate)$/.test(type)) return 'new Date().toISOString()';
+  // String literal union (single or double quoted) — pick first option
+  if (/^['"][^'"]+['"](\s*\|\s*['"][^'"]+['"])*$/.test(type)) {
+    const first = type.match(/['"]([^'"]+)['"]/);
+    return first ? `"${first[1]}"` : '"example"';
+  }
+  // ReactNode
+  if (/ReactNode/.test(type)) return '"Content"';
+  // Array: Type[] or Array<Type>
+  if (/\[\]$/.test(type)) {
+    const base = type.replace(/\[\]$/, "").trim();
+    if (/^string/.test(base)) return '["Example"]';
+    const inner = genMockValue(base, depth + 1);
+    return `[${inner}]`;
+  }
+  const arrMatch = type.match(/^Array<(.+)>$/);
+  if (arrMatch) {
+    const inner = genMockValue(arrMatch[1].trim(), depth + 1);
+    return `[${inner}]`;
+  }
+  // Custom type from registry — generate mock object
+  if (PROJECT_TYPE_REGISTRY[type]) return genMockObjectFromRegistry(type, depth);
+  return '"example"';
+}
+
+/**
+ * Generate a JS object literal string for a type defined in PROJECT_TYPE_REGISTRY.
+ * Uses only required fields (or first 3 fields if all are optional).
+ */
+function genMockObjectFromRegistry(typeName, depth = 0) {
+  const fields = PROJECT_TYPE_REGISTRY[typeName];
+  if (!fields || fields.length === 0) return "{}";
+  const required = fields.filter(f => f.required);
+  const toUse = required.length > 0 ? required : fields.slice(0, 3);
+  const pairs = toUse.map(f => {
+    const val = f.name === "id" ? '"1"' : genMockValue(f.type, depth + 1);
+    return `${f.name}: ${val}`;
+  });
+  return `{ ${pairs.join(", ")} }`;
+}
+
 function buildMockArrayItems(componentSource, itemTypeName, propName) {
   const fields = getItemTypeFieldsFromSource(componentSource, itemTypeName);
   const propLower = (propName || "").toLowerCase();
   const looksLikeTimeEntries = /entries|rows|logs|data|items|times/.test(propLower) || /time|table|log/.test(propLower);
+
+  // If source-based lookup failed, try the type registry for realistic field names
+  if (fields.length === 0 && itemTypeName && PROJECT_TYPE_REGISTRY[itemTypeName]) {
+    const regFields = PROJECT_TYPE_REGISTRY[itemTypeName];
+    const baseDate = new Date("2024-01-15T12:00:00.000Z").getTime();
+    const items = [];
+    for (let i = 1; i <= 2; i++) {
+      const item = {};
+      for (const f of regFields.slice(0, 8)) {
+        if (f.name === "id") item[f.name] = String(i);
+        else if (isDateLikeField(f.name) || /^Date/.test(f.type)) item[f.name] = new Date(baseDate + i * 86400000).toISOString();
+        else if (/^number/.test(f.type)) item[f.name] = i;
+        else if (/^boolean/.test(f.type)) item[f.name] = false;
+        else if (/^['"][^'"]+['"]/.test(f.type)) { const m = f.type.match(/['"]([^'"]+)['"]/); item[f.name] = m ? m[1] : "example"; }
+        else item[f.name] = `Example ${i}`;
+      }
+      items.push(item);
+    }
+    return items;
+  }
+
   const defaultFields = looksLikeTimeEntries
     ? ["id", "date", "start", "end", "title", "value"]
     : ["label", "value", "title", "id", "name", "description"];
@@ -785,6 +860,27 @@ function buildDefaultArgsForRequiredProps(props, usageFromPages = null, componen
       const type = String(p.type || "").trim();
       const name = p.name;
       if (added.has(name)) continue;
+
+      // ── Registry-based lookup (highest priority for custom object types) ──────
+      // Direct type match: prop type IS a known project type (e.g. task: Task)
+      if (PROJECT_TYPE_REGISTRY[type]) {
+        argLines.push(`    ${name}: ${genMockObjectFromRegistry(type)},`);
+        added.add(name); continue;
+      }
+      // Array of known type: tasks: Task[] or tasks: Array<Task>
+      const arrTypeMatch = type.match(/^([A-Z][A-Za-z0-9]+)\[\]$/) || type.match(/^Array<([A-Z][A-Za-z0-9]+)>$/);
+      if (arrTypeMatch && PROJECT_TYPE_REGISTRY[arrTypeMatch[1]]) {
+        argLines.push(`    ${name}: [${genMockObjectFromRegistry(arrTypeMatch[1])}],`);
+        added.add(name); continue;
+      }
+      // Prop name matches a registry type (e.g. prop named "task" of type "object")
+      const nameCapitalized = name.charAt(0).toUpperCase() + name.slice(1);
+      if (/object|any|unknown/.test(type) && PROJECT_TYPE_REGISTRY[nameCapitalized]) {
+        argLines.push(`    ${name}: ${genMockObjectFromRegistry(nameCapitalized)},`);
+        added.add(name); continue;
+      }
+      // ─────────────────────────────────────────────────────────────────────────
+
       if (name === "filters" || /dateRange|Filter.*object/.test(type)) {
         argLines.push(`    ${name}: ${DATE_RANGE_DEFAULT},`);
         added.add(name);
@@ -1098,9 +1194,9 @@ function buildArgTypeEntry(prop) {
   if (/^number/.test(t)) {
     return `{ control: "number", description: "number" }`;
   }
-  // String union literals: "a" | "b" | "c" → select control
-  if (/^"[^"]+"(\s*\|\s*"[^"]+")+/.test(t)) {
-    const opts = (t.match(/"([^"]+)"/g) || []).map(s => s.replace(/"/g, ""));
+  // String union literals (single or double quoted): "a" | "b" or 'a' | 'b' → select control
+  if (/^['"][^'"]+['"](\s*\|\s*['"][^'"]+['"])+/.test(t)) {
+    const opts = (t.match(/['"]([^'"]+)['"]/g) || []).map(s => s.replace(/['"]/g, ""));
     return `{ control: "select", options: ${JSON.stringify(opts)}, description: ${JSON.stringify(t)} }`;
   }
   // Plain string (including union with null/undefined)
@@ -1130,8 +1226,10 @@ function buildStoryFileContent(comp) {
   let importPath = "";
   const isPageFile = fileNoExt.startsWith("pages/") || fileNoExt.startsWith("src/pages/");
   if (isPageFile) {
-    const normalized = fileNoExt.replace(/^src\//, "");
-    importPath = path.posix.relative("src/stories", normalized);
+    // Keep full path with src/ prefix so relative is computed correctly from src/stories/
+    // e.g. "src/pages/Admin" → "../pages/Admin"  (NOT "../../pages/Admin")
+    const fullPath = fileNoExt.startsWith("src/") ? fileNoExt : "src/" + fileNoExt;
+    importPath = path.posix.relative("src/stories", fullPath);
   } else {
     const targetPath = path.posix.join(COMPONENTS_REL_DIR, fileNoExt);
     importPath = path.posix.relative("src/stories", targetPath);
@@ -2803,6 +2901,10 @@ function main() {
   const components = Array.isArray(data.components) ? data.components : [];
   const foundations = data.foundations || null;
   FOUNDATIONS_DATA = foundations;
+  // Load project type registry for realistic mock arg generation
+  if (foundations?.types && typeof foundations.types === "object") {
+    PROJECT_TYPE_REGISTRY = foundations.types;
+  }
 
   const onlyName = process.argv[2] || null;