vibe-design-system 2.9.1 → 2.9.3

package/package.json

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

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

@@ -5284,15 +5284,26 @@ function parseLocalDataImports(content) {
 }
 
 /**
- * Detect named exports from a data file: returns { exportName → 'array' | 'object' | 'scalar' }
+ * Detect named exports from a data file.
+ * Returns { exportName → 'array' | 'object' | 'scalar' }
+ * Also captures element type annotations: { 'EXPORTS_ELEMENT_TYPE' → 'TypeName' }
+ * e.g. `export const METHODOLOGY_DATA: Stage[] = [...]` → { METHODOLOGY_DATA: 'array', METHODOLOGY_DATA_ELEMENT_TYPE: 'Stage' }
  */
 function parseDataFileExports(filePath) {
   if (!fs.existsSync(filePath)) return {};
   const src = fs.readFileSync(filePath, "utf-8");
   const result = {};
-  const re = /^export\s+const\s+([A-Za-z_$][A-Za-z0-9_$]*)\s*[=:]/gm;
+  // Typed array exports: export const NAME: ElemType[] = [
+  const typedRe = /^export\s+const\s+([A-Za-z_$][A-Za-z0-9_$]*)\s*:\s*([A-Za-z_$][A-Za-z0-9_$]*)\[\]/gm;
   let m;
+  while ((m = typedRe.exec(src)) !== null) {
+    result[m[1]] = "array";
+    result[`${m[1]}_ELEMENT_TYPE`] = m[2]; // e.g. METHODOLOGY_DATA_ELEMENT_TYPE = "Stage"
+  }
+  // Untyped / other exports (fallback detection)
+  const re = /^export\s+const\s+([A-Za-z_$][A-Za-z0-9_$]*)\s*[=:]/gm;
   while ((m = re.exec(src)) !== null) {
+    if (result[m[1]]) continue; // already captured above
     const name = m[1];
     const afterIdx = src.indexOf("=", m.index) + 1;
     const afterSlice = src.slice(afterIdx, afterIdx + 10).trimStart();
@@ -5356,8 +5367,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 +5385,80 @@ 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) {
-    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]`;
+  // 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], Stage → METHODOLOGY_DATA[0])
+    if (typeLower.length >= 3) {
+      // Sort by export name length descending — more-specific exports (METHODOLOGY_DATA) tried before simple ones (ROUTES)
+      const sortedExports = Object.entries(localExports).sort((a, b) => b[0].length - a[0].length);
+      // 1a: Exact element type annotation match (Stage → METHODOLOGY_DATA_ELEMENT_TYPE=Stage → METHODOLOGY_DATA[0])
+      for (const [expName, expKind] of sortedExports) {
+        if (expKind !== "array") continue;
+        if (localExports[`${expName}_ELEMENT_TYPE`] === t) return `${expName}[0]`;
+      }
+      // 1b: Name prefix match (RouteDef → ROUTES[0])
+      for (const [expName, expKind] of sortedExports) {
+        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 type alias resolution — e.g. Level1Filter = 'A' | 'B' | null → null
+    if (sourceContent) {
+      const esc = t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      // 2a: Non-object type alias: type Foo = ...
+      const aliasRe = new RegExp(`type\\s+${esc}\\s*=\\s*([^{;\\n]+)`);
+      const aliasMatch = sourceContent.match(aliasRe);
+      if (aliasMatch) {
+        const aliasValue = aliasMatch[1].trim().replace(/;$/, "");
+        // Recursively resolve the alias value (pass sourceContent for chained aliases)
+        return mockValueForType(aliasValue, localExports, sourceContent);
+      }
+      // 2b: Interface or object type alias → generate inline default object
+      // e.g. FilterState → { level1: null, level2: null }
+      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 with sourceContent for alias chaining
+          const fmock = mockValueForType(ftype, localExports, sourceContent);
+          return `  ${fname}: ${fmock}`;
+        }).filter(Boolean);
+        if (fieldPairs.length > 0) return `{\n${fieldPairs.join(",\n")}\n}`;
       }
     }
+
+    // Strategy 3: Nested array property lookup
+    // SubStation → METHODOLOGY_DATA[0]?.subStations?.[0] (prefer longer export names)
+    const camel = t[0].toLowerCase() + t.slice(1);
+    const plural = camel + "s";
+    const sortedForNested = Object.entries(localExports)
+      .filter(([, k]) => k === "array")
+      .sort((a, b) => b[0].length - a[0].length); // longest name first
+    if (sortedForNested.length > 0) {
+      const [expName] = sortedForNested[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 +5484,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 +5617,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})`);