vibe-design-system 2.5.3 → 2.5.5

package/package.json

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

package/vds-core-template/scan.mjs

@@ -666,7 +666,6 @@ function flattenJsx(jsx) {
       continue;
     }
     if (jsx[i] === "{" && (i === 0 || jsx[i - 1] !== "{")) {
-      const start = i;
       i++;
       let depth = 1;
       while (i < len && depth > 0) {
@@ -684,6 +683,39 @@ function flattenJsx(jsx) {
   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();
@@ -716,6 +748,7 @@ function writeVdsGeneratedComponents(suggestions) {
     const tokens = [];
     if (s.fullJsx && s.fullJsx.trim().length > 0) {
       bodyJsx = flattenJsx(s.fullJsx);
+      bodyJsx = convertHtmlStyleToReact(bodyJsx);
       const componentTags = collectComponentTags(bodyJsx);
       const lucideTags = [];
       const uiTags = [];
@@ -723,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";
@@ -741,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 (
@@ -760,6 +794,7 @@ export function ${componentName}() {
       category: "Extracted",
       description: "Auto-extracted from repeated className patterns.",
       tokens: [...new Set(tokens)],
+      occurrences: s.occurrences ?? 0,
     });
   }
   return entries;

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

@@ -22,7 +22,8 @@ const STORIES_DIR = path.join(SRC_DIR, "stories");
 
 // CSS is loaded from .storybook/preview.tsx — never add CSS import to story files.
 
-// Components we don't want to auto-generate stories for (project-specific dashboards, heavy UIs, etc.)
+// Components we don't want to auto-generate import-based stories for (project-specific dashboards, heavy UIs, etc.)
+// vds-generated/ is handled separately: placeholder stories only (no import of broken Figma/Make JSX).
 const SKIP_LIST = [
   "AnalysisDashboard",
   "ComponentLibrary",
@@ -380,6 +381,33 @@ function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
+/** Placeholder story for vds-generated extracted patterns (no import; broken Figma/Make JSX is not loaded). */
+function buildExtractedPlaceholderStory(comp) {
+  const componentName = toSafeComponentName(comp.name, comp.file);
+  const occurrenceCount = comp.occurrences ?? 0;
+  const title = `VDS Generated/${componentName}`;
+  return [
+    'import type { Meta, StoryObj } from "@storybook/react";',
+    "",
+    `const meta = { title: ${JSON.stringify(title)} } satisfies Meta;`,
+    "export default meta;",
+    "type Story = StoryObj;",
+    "",
+    "export const Default: Story = {",
+    "  render: () => (",
+    "    <div style={{ padding: 24, border: \"2px dashed #ccc\", borderRadius: 8 }}>",
+    "      <p style={{ color: \"#999\", fontSize: 12 }}>EXTRACTED PATTERN</p>",
+    `      <h3 style={{ margin: \"0 0 8px 0\" }}>${componentName}</h3>`,
+    "      <p style={{ color: \"#666\", margin: 0 }}>",
+    `        This pattern was detected ${occurrenceCount} times in src/pages/.`,
+    "        Extract it as a proper component to see it rendered here.",
+    "      </p>",
+    "    </div>",
+    "  ),",
+    "};",
+  ].join("\n");
+}
+
 function detectExportStyle(source, componentName) {
   if (!source) return "unknown";
   const hasDefault = /export\s+default\b/.test(source);
@@ -960,12 +988,22 @@ function main() {
   for (const comp of components) {
     const componentName = toSafeComponentName(comp.name, comp.file);
     if (onlyName && componentName !== onlyName) continue;
+
+    const storyFileName = `${componentName}.stories.tsx`;
+    const storyPath = path.join(STORIES_DIR, storyFileName);
+
+    if (comp.file.startsWith("vds-generated/")) {
+      const content = buildExtractedPlaceholderStory(comp);
+      fs.writeFileSync(storyPath, content, "utf-8");
+      console.log(`[VDS] Wrote ${path.relative(PROJECT_ROOT, storyPath)} (placeholder)`);
+      continue;
+    }
+
+    if (!comp.file.startsWith("ui/") && !comp.file.startsWith("pages/")) continue;
     if (SKIP_LIST.includes(componentName)) continue;
     const requiredCount = Array.isArray(comp.props) ? comp.props.filter((p) => p.required === true).length : 0;
     if (requiredCount > 3) continue;
 
-    const storyFileName = `${componentName}.stories.tsx`;
-    const storyPath = path.join(STORIES_DIR, storyFileName);
     const content = buildStoryFileContent(comp);
     if (content == null) continue;
     fs.writeFileSync(storyPath, content, "utf-8");