vibe-design-system 2.9.1 → 2.9.2

package/package.json

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

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

@@ -5356,8 +5356,9 @@ function extractComponentProps(content, componentName) {
 
 /**
  * Generate a mock value string for a TypeScript type, using available data exports.
+ * Pass sourceContent to enable local interface/type parsing and nested property lookup.
  */
-function mockValueForType(type, localExports) {
+function mockValueForType(type, localExports, sourceContent) {
   const t = type.trim();
   if (t === "boolean") return "false";
   if (t === "string") return '""';
@@ -5373,26 +5374,60 @@ function mockValueForType(type, localExports) {
   const firstLiteral = t.match(/["']([^"']+)["']/);
   if (firstLiteral && (t.startsWith('"') || t.startsWith("'"))) return `"${firstLiteral[1]}"`;
 
-  // Try matching named type to available array exports
-  // Strip common suffixes to get the "base" name (e.g., RouteDef→route, SubStation→substation)
-  const typeLower = t.toLowerCase().replace(/def$|id$|key$|type$|interface$|kind$/i, "");
-  if (typeLower.length >= 3) {
+  // Named PascalCase type — try multiple resolution strategies
+  if (/^[A-Z][A-Za-z0-9]+$/.test(t)) {
+    const typeLower = t.toLowerCase().replace(/def$|id$|key$|type$|interface$|kind$/i, "");
+
+    // Strategy 1: Direct top-level array match (RouteDef → ROUTES[0])
+    if (typeLower.length >= 3) {
+      for (const [expName, expKind] of Object.entries(localExports)) {
+        if (expKind !== "array") continue;
+        const expBase = expName.toLowerCase().replace(/_/g, "").replace(/s$/, "").replace(/data$/, "");
+        if (expBase.slice(0, 4) === typeLower.slice(0, 4) || typeLower.slice(0, 4) === expBase.slice(0, 4)) {
+          return `${expName}[0]`;
+        }
+      }
+    }
+
+    // Strategy 2: Local interface/type alias → generate inline object
+    // e.g. FilterState → { level1: null, level2: null }
+    if (sourceContent) {
+      const esc = t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      const bodyRe = new RegExp(`(?:interface|type)\\s+${esc}\\s*(?:=\\s*)?\\{([^}]+)\\}`);
+      const m = sourceContent.match(bodyRe);
+      if (m) {
+        const fields = m[1].split(";").map(s => s.trim()).filter(s => s.length > 0 && !s.startsWith("//"));
+        const fieldPairs = fields.map(f => {
+          const ci = f.indexOf(":");
+          if (ci < 0) return null;
+          const fname = f.slice(0, ci).trim().replace(/\?$/, "");
+          const ftype = f.slice(ci + 1).trim();
+          // Resolve field type (no recursion with sourceContent to prevent deep loops)
+          const fmock = mockValueForType(ftype, localExports, null);
+          return `  ${fname}: ${fmock}`;
+        }).filter(Boolean);
+        if (fieldPairs.length > 0) return `{\n${fieldPairs.join(",\n")}\n}`;
+      }
+    }
+
+    // Strategy 3: Nested array property lookup
+    // SubStation → DATA[0]?.subStations?.[0] (camelCase plural of type name)
+    const camel = t[0].toLowerCase() + t.slice(1);
+    const plural = camel + "s";
     for (const [expName, expKind] of Object.entries(localExports)) {
       if (expKind !== "array") continue;
-      const expBase = expName.toLowerCase().replace(/_/g, "").replace(/s$/, "").replace(/data$/, "");
-      // Direct match: RouteDef → ROUTES (routedef→rout vs routes→rout)
-      if (expBase.slice(0, 4) === typeLower.slice(0, 4) || typeLower.slice(0, 4) === expBase.slice(0, 4)) {
-        return `${expName}[0]`;
-      }
+      return `${expName}[0]?.${plural}?.[0]`;
     }
   }
+
   return "undefined as any";
 }
 
 /**
  * Build the story file content for a single internal component.
+ * Automatically uses render() format when props require complex/nested mock data.
  */
-function buildInternalComponentStoryContent(compName, parentImportPath, dataImportPath, dataSymbols, localExports, props, parentComp) {
+function buildInternalComponentStoryContent(compName, parentImportPath, dataImportPath, dataSymbols, localExports, props, parentComp, sourceContent) {
   const lines = [];
   lines.push(`// @vds-regenerate — VDS auto-generated. Remove this line to prevent overwrite.`);
   lines.push(`import React from "react";`);
@@ -5418,16 +5453,72 @@ function buildInternalComponentStoryContent(compName, parentImportPath, dataImpo
   lines.push(`type Story = StoryObj<typeof meta>;`);
   lines.push(``);
 
-  if (props.length > 0) {
-    const argLines = props.map(p => `    ${p.name}: ${mockValueForType(p.type, localExports)},`).join("\n");
+  if (props.length === 0) {
+    lines.push(`export const Default: Story = {};`);
+    return lines.join("\n") + "\n";
+  }
+
+  const mockedProps = props.map(p => ({
+    name: p.name,
+    mock: mockValueForType(p.type, localExports, sourceContent),
+  }));
+
+  // Use render() format when any mock is complex: nested path (?.),
+  // multiline inline object (\n), or unresolved (undefined as any)
+  const needsRender = mockedProps.some(p =>
+    p.mock === "undefined as any" ||
+    p.mock.includes("?.") ||
+    p.mock.includes("\n")
+  );
+
+  if (!needsRender) {
+    // Simple args format — all values are primitives or direct data refs
+    const argLines = mockedProps.map(p => `    ${p.name}: ${p.mock},`).join("\n");
     lines.push(`export const Default: Story = {`);
     lines.push(`  args: {`);
     lines.push(argLines);
     lines.push(`  },`);
     lines.push(`};`);
   } else {
-    lines.push(`export const Default: Story = {};`);
+    // render() format — declare complex vars, guard against undefined, then render
+    const varDecls = [];
+    const propAttrs = [];
+    const guardVarNames = [];
+
+    for (const { name, mock } of mockedProps) {
+      if (mock.includes("?.") || mock === "undefined as any") {
+        // Nested/unknown: declare variable + add to guard list
+        const varName = `mock${name[0].toUpperCase() + name.slice(1)}`;
+        varDecls.push(`    const ${varName} = ${mock};`);
+        guardVarNames.push(varName);
+        propAttrs.push(`        ${name}={${varName} as any}`);
+      } else if (mock.includes("\n")) {
+        // Multiline inline object (e.g. interface mock)
+        const varName = `mock${name[0].toUpperCase() + name.slice(1)}`;
+        const indented = mock.split("\n").map((l, i) => i === 0 ? l : "      " + l).join("\n");
+        varDecls.push(`    const ${varName} = ${indented} as any;`);
+        propAttrs.push(`        ${name}={${varName}}`);
+      } else {
+        propAttrs.push(`        ${name}={${mock}}`);
+      }
+    }
+
+    lines.push(`export const Default: Story = {`);
+    lines.push(`  render: () => {`);
+    for (const v of varDecls) lines.push(v);
+    if (guardVarNames.length > 0) {
+      const check = guardVarNames.map(v => `!${v}`).join(" || ");
+      lines.push(`    if (${check}) return <div style={{ color: "#888", padding: "1rem" }}>⚠️ Mock data unavailable for <strong>${compName}</strong></div>;`);
+    }
+    lines.push(`    return (`);
+    lines.push(`      <${compName}`);
+    for (const attr of propAttrs) lines.push(attr);
+    lines.push(`      />`);
+    lines.push(`    );`);
+    lines.push(`  },`);
+    lines.push(`};`);
   }
+
   return lines.join("\n") + "\n";
 }
 
@@ -5495,10 +5586,14 @@ function generateInternalComponentStories(comp) {
   // Step 4: Generate individual story files
   for (const name of names) {
     const storyFile = path.join(STORIES_DIR, `${name}.stories.tsx`);
-    if (fs.existsSync(storyFile)) continue; // Never overwrite existing stories
+    if (fs.existsSync(storyFile)) {
+      // Preserve user-modified stories; overwrite only VDS-generated ones
+      const existing = fs.readFileSync(storyFile, "utf-8");
+      if (!existing.startsWith("// @vds-regenerate")) continue;
+    }
     const props = extractComponentProps(sourceContent, name);
     const content = buildInternalComponentStoryContent(
-      name, parentImportPath, dataImportFromStories, bestSymbols, bestExports, props, comp
+      name, parentImportPath, dataImportFromStories, bestSymbols, bestExports, props, comp, sourceContent
     );
     fs.writeFileSync(storyFile, content, "utf-8");
     console.log(`[VDS] Wrote ${path.relative(PROJECT_ROOT, storyFile)} (sub-component of ${comp.name})`);