vibe-design-system 2.5.2 → 2.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "description": "Auto-generate design systems for vibe coding projects",
   "type": "module",
   "bin": {

package/vds-core-template/scan.mjs

@@ -648,6 +648,42 @@ function toKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "");
 }
 
+/** Flatten JSX: replace ${...} and {...} (variables/expressions) with placeholders so generated component has no "item is not defined". */
+function flattenJsx(jsx) {
+  let result = "";
+  let i = 0;
+  const len = jsx.length;
+  while (i < len) {
+    if (jsx.slice(i, i + 2) === "${") {
+      i += 2;
+      let depth = 1;
+      while (i < len && depth > 0) {
+        if (jsx[i] === "{") depth++;
+        else if (jsx[i] === "}") depth--;
+        i++;
+      }
+      result += '"Sample"';
+      continue;
+    }
+    if (jsx[i] === "{" && (i === 0 || jsx[i - 1] !== "{")) {
+      const start = i;
+      i++;
+      let depth = 1;
+      while (i < len && depth > 0) {
+        const c = jsx[i];
+        if (c === "{") depth++;
+        else if (c === "}") depth--;
+        i++;
+      }
+      result += '{"Sample"}';
+      continue;
+    }
+    result += jsx[i];
+    i++;
+  }
+  return result;
+}
+
 /** Collect PascalCase tag names from JSX that are not known HTML. */
 function collectComponentTags(jsx) {
   const tags = new Set();
@@ -679,7 +715,7 @@ function writeVdsGeneratedComponents(suggestions) {
     let bodyJsx;
     const tokens = [];
     if (s.fullJsx && s.fullJsx.trim().length > 0) {
-      bodyJsx = s.fullJsx;
+      bodyJsx = flattenJsx(s.fullJsx);
       const componentTags = collectComponentTags(bodyJsx);
       const lucideTags = [];
       const uiTags = [];

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

@@ -587,9 +587,10 @@ function buildStoryFileContent(comp) {
   }
   const exportStyle = detectExportStyle(source, componentName);
   const omitChildren = componentWrapsVoidElement(source);
+  const isPage = comp.file.startsWith("pages/");
 
-  // Skip story if no export found (e.g. Join.tsx with broken default export)
-  if (exportStyle === "unknown" && (!source.includes("export") || !new RegExp(`\\b${componentName}\\b`).test(source))) {
+  // Skip story only if not a page and no export found
+  if (exportStyle === "unknown" && !isPage && (!source.includes("export") || !new RegExp(`\\b${componentName}\\b`).test(source))) {
     return null;
   }
 
@@ -600,7 +601,10 @@ function buildStoryFileContent(comp) {
   const lines = [];
   lines.push(`import type { Meta, StoryObj } from "@storybook/react";`);
 
-  if (exportStyle === "default") {
+  if (isPage && exportStyle !== "default") {
+    lines.push(`import * as Named from "${importPath}";`);
+    lines.push(`const ComponentRef = Named["${componentName}"] ?? Named.default;`);
+  } else if (exportStyle === "default") {
     lines.push(`import ${componentName} from "${importPath}";`);
     lines.push(`const ComponentRef = ${componentName};`);
   } else if (exportStyle === "named" || exportStyle === "unknown") {