vibe-design-system 2.5.2 → 2.5.4

package/package.json

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

package/vds-core-template/scan.mjs

@@ -648,6 +648,74 @@ 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] !== "{")) {
+      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;
+}
+
+/** Convert HTML style="key: value; ..." to React style={{ key: 'value', ... }} (camelCase keys). */
+function convertHtmlStyleToReact(jsx) {
+  return jsx.replace(
+    /style\s*=\s*["']([^"']*)["']/g,
+    (_, cssStr) => {
+      const obj = {};
+      const parts = (cssStr || "").split(";").map((s) => s.trim()).filter(Boolean);
+      for (const part of parts) {
+        const colon = part.indexOf(":");
+        if (colon <= 0) continue;
+        const key = part.slice(0, colon).trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+        const value = part.slice(colon + 1).trim().replace(/^["']|["']$/g, "");
+        if (key) obj[key] = value;
+      }
+      if (Object.keys(obj).length === 0) return "style={{}}";
+      const entries = Object.entries(obj).map(([k, v]) => `${k}: "${String(v).replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`).join(", ");
+      return `style={{ ${entries} }}`;
+    }
+  );
+}
+
+/** Replace Lucide icon tags with LucideIcons.TagName so namespace import works. */
+function applyLucideNamespace(jsx, lucideTags) {
+  let out = jsx;
+  for (const tag of lucideTags) {
+    const openRe = new RegExp("<" + tag.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "(?=[\\s/>])", "g");
+    const closeRe = new RegExp("</" + tag.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ">", "g");
+    out = out.replace(openRe, "<LucideIcons." + tag);
+    out = out.replace(closeRe, "</LucideIcons." + tag + ">");
+  }
+  return out;
+}
+
 /** Collect PascalCase tag names from JSX that are not known HTML. */
 function collectComponentTags(jsx) {
   const tags = new Set();
@@ -679,7 +747,8 @@ function writeVdsGeneratedComponents(suggestions) {
     let bodyJsx;
     const tokens = [];
     if (s.fullJsx && s.fullJsx.trim().length > 0) {
-      bodyJsx = s.fullJsx;
+      bodyJsx = flattenJsx(s.fullJsx);
+      bodyJsx = convertHtmlStyleToReact(bodyJsx);
       const componentTags = collectComponentTags(bodyJsx);
       const lucideTags = [];
       const uiTags = [];
@@ -687,15 +756,14 @@ function writeVdsGeneratedComponents(suggestions) {
         if (/^[A-Z][a-z0-9]+$/.test(tag) && tag.length > 2) lucideTags.push(tag);
         else uiTags.push(tag);
       }
-      let importLines = ['import * as React from "react";'];
-      if (lucideTags.length > 0) {
-        importLines.push(`import { ${lucideTags.join(", ")} } from "lucide-react";`);
-      }
-      for (const tag of uiTags) {
-        if (!lucideTags.includes(tag)) {
-          importLines.push(`import { ${tag} } from "@/components/ui/${toKebab(tag)}";`);
-        }
-      }
+      bodyJsx = applyLucideNamespace(bodyJsx, lucideTags);
+      const standardImports = [
+        'import React from "react";',
+        'import { motion } from "framer-motion";',
+        'import * as LucideIcons from "lucide-react";',
+      ];
+      const uiImportLines = uiTags.map((tag) => `import { ${tag} } from "@/components/ui/${toKebab(tag)}";`);
+      const importLines = [...standardImports, ...uiImportLines];
       const content = importLines.join("\n") + "\n\n" +
         `export function ${componentName}() {\n  return (\n    ` +
         bodyJsx.replace(/\n/g, "\n    ") + "\n  );\n}\n";
@@ -705,7 +773,9 @@ function writeVdsGeneratedComponents(suggestions) {
       const tagName = s.tagName || "div";
       const className = s.pattern || "";
       bodyJsx = `<${tagName} className="${className.replace(/"/g, '\\"')}">\n      {null}\n    </${tagName}>`;
-      const content = `import * as React from "react";
+      const content = `import React from "react";
+import { motion } from "framer-motion";
+import * as LucideIcons from "lucide-react";
 
 export function ${componentName}() {
   return (

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") {