vibe-design-system 2.9.2 → 2.9.4

package/bin/init.js

@@ -399,12 +399,12 @@ const config: StorybookConfig = {
         ];
         for (const tcp of tsConfigPaths) {
           if (!fs.existsSync(tcp)) continue;
-          const raw = JSON.parse(fs.readFileSync(tcp, "utf-8").replace(/\/\/[^\n]*/g, "").replace(/,(\s*[}\]])/g, "$1"));
+          const raw = JSON.parse(fs.readFileSync(tcp, "utf-8").replace(/\\/\\/[^\\n]*/g, "").replace(/,(\\s*[}\\]])/g, "$1"));
           const paths = raw?.compilerOptions?.paths || {};
           const aliases: Record<string, string> = {};
           for (const [alias, targets] of Object.entries(paths) as [string, string[]][]) {
-            const cleanAlias = alias.replace(/\/\*$/, "");
-            const target = targets[0]?.replace(/\/\*$/, "") || "";
+            const cleanAlias = alias.replace(/\\/\\*$/, "");
+            const target = targets[0]?.replace(/\\/\\*$/, "") || "";
             if (cleanAlias && target && cleanAlias !== "@") {
               aliases[cleanAlias] = path.resolve(process.cwd(), target);
             }
@@ -415,6 +415,19 @@ const config: StorybookConfig = {
       return {};
     })();
     return mergeConfig(config, {
+      plugins: [
+        {
+          // Mock figma:asset/* imports — returns empty string so components render without crashing in Storybook
+          name: "vds-figma-asset-mock",
+          enforce: "pre" as const,
+          resolveId(id: string) {
+            if (id.startsWith("figma:asset")) return "\\0vds-figma-asset-mock";
+          },
+          load(id: string) {
+            if (id === "\\0vds-figma-asset-mock") return "export default '';";
+          },
+        },
+      ],
       resolve: {
         alias: {
           "@": path.resolve(process.cwd(), "${srcPrefix}"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.9.2",
+  "version": "2.9.4",
   "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();
@@ -5378,9 +5389,17 @@ function mockValueForType(type, localExports, sourceContent) {
   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])
+    // Strategy 1: Direct top-level array match (RouteDef → ROUTES[0], Stage → METHODOLOGY_DATA[0])
     if (typeLower.length >= 3) {
-      for (const [expName, expKind] of Object.entries(localExports)) {
+      // 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)) {
@@ -5389,10 +5408,19 @@ function mockValueForType(type, localExports, sourceContent) {
       }
     }
 
-    // Strategy 2: Local interface/type alias → generate inline object
-    // e.g. FilterState → { level1: null, level2: null }
+    // 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) {
@@ -5402,8 +5430,8 @@ function mockValueForType(type, localExports, sourceContent) {
           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);
+          // 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}`;
@@ -5411,11 +5439,14 @@ function mockValueForType(type, localExports, sourceContent) {
     }
 
     // Strategy 3: Nested array property lookup
-    // SubStation → DATA[0]?.subStations?.[0] (camelCase plural of type name)
+    // SubStation → METHODOLOGY_DATA[0]?.subStations?.[0] (prefer longer export names)
     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 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]`;
     }
   }