vibe-design-system 2.4.11 → 2.5.1

package/package.json

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

package/vds-core-template/scan.mjs

@@ -474,6 +474,46 @@ const COMPONENT_SUGGESTION_KEYWORDS = [
   "stat",
 ];
 
+const KNOWN_HTML_TAGS = new Set([
+  "div", "span", "h1", "h2", "h3", "h4", "h5", "h6", "p", "a", "img", "ul", "ol", "li",
+  "button", "input", "label", "section", "header", "footer", "nav", "main", "article", "aside",
+  "form", "svg", "path", "g", "circle", "rect", "strong", "em", "small", "br", "hr",
+  "table", "thead", "tbody", "tr", "th", "td", "colgroup", "col", "i", "b", "sub", "sup",
+]);
+
+/** Extract text from inner content for semantic naming (first h2/h3/span text). */
+function extractInnerTextForNaming(innerContent) {
+  const text = innerContent
+    .replace(/<[^>]+>/g, " ")
+    .replace(/\s+/g, " ")
+    .replace(/\{[^}]*\}/g, " ")
+    .trim();
+  return text.slice(0, 200);
+}
+
+/** Derive semantic component name from inner text (e.g. "Individual Plans" → IndividualPlansCard). */
+function suggestNameFromContent(innerText) {
+  if (!innerText || !innerText.trim()) return null;
+  const stopWords = new Set(["the", "a", "an", "and", "or", "for", "with", "to", "in", "on", "at", "of"]);
+  const words = innerText
+    .trim()
+    .split(/\s+/)
+    .filter((w) => w.length > 0 && !stopWords.has(w.toLowerCase()))
+    .slice(0, 4);
+  if (words.length === 0) return null;
+  const pascal = words
+    .map((w) => w.replace(/[^a-zA-Z0-9]/g, ""))
+    .filter((w) => w.length > 0)
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+    .join("");
+  if (!pascal) return null;
+  if (/\bindividual\b/i.test(innerText)) return pascal + "PricingCard";
+  if (/\burbannest\b/i.test(innerText)) return pascal + "VentureCard";
+  if (/\bpricing\b/i.test(innerText)) return pascal + "Card";
+  if (/\bventure\b/i.test(innerText)) return pascal + "Card";
+  return pascal + "Card";
+}
+
 function suggestNameFromPattern(pattern) {
   const words = pattern
     .split(/\s+/)
@@ -491,6 +531,45 @@ function suggestNameFromPattern(pattern) {
   return "Container";
 }
 
+/** Extract full JSX element (opening tag to matching closing tag) and inner text. */
+function extractFullElement(content, classNameMatchIndex, tagName) {
+  const tag = tagName;
+  const before = content.substring(0, classNameMatchIndex);
+  const openMatch = new RegExp("<" + tag.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "[\\s>]", "g");
+  let openStart = -1;
+  let m;
+  while ((m = openMatch.exec(before)) !== null) openStart = m.index;
+  if (openStart < 0) return null;
+  const openEnd = content.indexOf(">", classNameMatchIndex);
+  if (openEnd < 0) return null;
+  const innerStart = openEnd + 1;
+  let depth = 1;
+  let pos = innerStart;
+  const openTagRe = new RegExp("<" + tag + "[\\s>]", "g");
+  const closeTagRe = new RegExp("</" + tag + ">", "g");
+  while (depth > 0 && pos < content.length) {
+    openTagRe.lastIndex = pos;
+    closeTagRe.lastIndex = pos;
+    const nextOpen = openTagRe.exec(content);
+    const nextClose = closeTagRe.exec(content);
+    if (!nextClose) break;
+    if (nextOpen && nextOpen.index < nextClose.index) {
+      depth += 1;
+      pos = nextOpen.index + 1;
+    } else {
+      depth -= 1;
+      if (depth === 0) {
+        const fullJsx = content.substring(openStart, nextClose.index + nextClose[0].length);
+        const innerContent = content.substring(innerStart, nextClose.index);
+        const innerText = extractInnerTextForNaming(innerContent);
+        return { fullJsx, innerContent, innerText };
+      }
+      pos = nextClose.index + 1;
+    }
+  }
+  return null;
+}
+
 /** Scan src/pages/*.tsx for repeated className clusters; return component suggestions. */
 function extractComponentSuggestions() {
   if (!fs.existsSync(PAGES_DIR)) return [];
@@ -514,10 +593,20 @@ function extractComponentSuggestions() {
         const lastOpen = before.lastIndexOf("<");
         const tagMatch = lastOpen >= 0 ? content.slice(lastOpen).match(/<(\w+)/) : null;
         const tagName = tagMatch ? tagMatch[1] : "div";
+        let fullJsx = null;
+        let innerText = "";
+        const extracted = extractFullElement(content, m.index, tagName);
+        if (extracted) {
+          fullJsx = extracted.fullJsx;
+          innerText = extracted.innerText || "";
+        }
         byPattern.set(raw, {
           count: 0,
           files: new Set(),
+          tagName,
           snippet: `<${tagName} className="${raw}">...</${tagName}>`,
+          fullJsx,
+          innerText,
         });
       }
       const entry = byPattern.get(raw);
@@ -527,14 +616,16 @@ function extractComponentSuggestions() {
   }
 
   const suggestions = [];
-  for (const [pattern, { count, files, snippet }] of byPattern.entries()) {
+  for (const [pattern, { count, files, snippet, tagName, fullJsx, innerText }] of byPattern.entries()) {
     if (count < 2) continue;
-    const suggestedName = suggestNameFromPattern(pattern);
+    const suggestedName = suggestNameFromContent(innerText) || suggestNameFromPattern(pattern);
     suggestions.push({
-      suggestedName,
+      suggestedName: suggestedName.replace(/\s+/g, ""),
+      tagName: tagName || "div",
+      pattern,
+      fullJsx,
       occurrences: count,
       foundIn: [...files].sort(),
-      pattern,
       snippet,
       reason: `Same className cluster appears ${count} times`,
     });
@@ -542,6 +633,93 @@ function extractComponentSuggestions() {
   return suggestions;
 }
 
+const VDS_GENERATED_DIR = path.join(COMPONENTS_DIR, "vds-generated");
+
+function toKebab(str) {
+  return str.replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "");
+}
+
+/** Collect PascalCase tag names from JSX that are not known HTML. */
+function collectComponentTags(jsx) {
+  const tags = new Set();
+  const tagRe = /<\/?([A-Z][a-zA-Z0-9]*)\s|<\/?([A-Z][a-zA-Z0-9]*)[>/]/g;
+  let m;
+  while ((m = tagRe.exec(jsx)) !== null) {
+    const name = (m[1] || m[2] || "").trim();
+    if (name && !KNOWN_HTML_TAGS.has(name)) tags.add(name);
+  }
+  return [...tags];
+}
+
+/** Write extracted components with full JSX body; add Lucide and UI imports as needed. */
+function writeVdsGeneratedComponents(suggestions) {
+  if (!Array.isArray(suggestions) || suggestions.length === 0) return [];
+  if (!fs.existsSync(VDS_GENERATED_DIR)) fs.mkdirSync(VDS_GENERATED_DIR, { recursive: true });
+  const usedNames = new Set();
+  const entries = [];
+  for (let i = 0; i < suggestions.length; i++) {
+    const s = suggestions[i];
+    let baseName = (s.suggestedName || "Extracted").replace(/\s+/g, "");
+    let fileName = baseName + ".tsx";
+    if (usedNames.has(fileName)) fileName = baseName + String(i + 1) + ".tsx";
+    usedNames.add(fileName);
+    const componentName = fileName.replace(/\.tsx$/, "");
+    const relPath = "vds-generated/" + fileName;
+    const fullPath = path.join(COMPONENTS_DIR, relPath);
+
+    let bodyJsx;
+    const tokens = [];
+    if (s.fullJsx && s.fullJsx.trim().length > 0) {
+      bodyJsx = s.fullJsx;
+      const componentTags = collectComponentTags(bodyJsx);
+      const lucideTags = [];
+      const uiTags = [];
+      for (const tag of componentTags) {
+        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)}";`);
+        }
+      }
+      const content = importLines.join("\n") + "\n\n" +
+        `export function ${componentName}() {\n  return (\n    ` +
+        bodyJsx.replace(/\n/g, "\n    ") + "\n  );\n}\n";
+      fs.writeFileSync(fullPath, content, "utf-8");
+      tokens.push(...(s.pattern || "").split(/\s+/).filter(Boolean));
+    } else {
+      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";
+
+export function ${componentName}() {
+  return (
+    ${bodyJsx}
+  );
+}
+`;
+      fs.writeFileSync(fullPath, content, "utf-8");
+      tokens.push(...(className || "").split(/\s+/).filter(Boolean));
+    }
+
+    entries.push({
+      file: relPath,
+      name: componentName.replace(/([A-Z])/g, " $1").trim(),
+      group: "VDS Generated",
+      category: "Extracted",
+      description: "Auto-extracted from repeated className patterns.",
+      tokens: [...new Set(tokens)],
+    });
+  }
+  return entries;
+}
+
 function extractTailwindTokens(content) {
   const tokens = new Set();
   const patterns = [
@@ -942,6 +1120,8 @@ function scan() {
   foundations.icons = extractLucideIconsUsed(SRC_DIR);
   foundations.brand = { assets: extractBrandAssets() };
   const componentSuggestions = extractComponentSuggestions();
+  const vdsGeneratedEntries = writeVdsGeneratedComponents(componentSuggestions);
+  results.push(...vdsGeneratedEntries);
   const output = {
     branch: getGitBranch(),
     engineer: getGitEngineer(),

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

@@ -549,10 +549,13 @@ function buildStoryFileContent(comp) {
   const variantProp = props.find((p) => p.name === "variant");
   let variants = parseUnionLiterals(variantProp && variantProp.type);
 
+  const srcPath = comp.file.startsWith("pages/")
+    ? path.join(SRC_DIR, comp.file)
+    : path.join(SRC_DIR, "components", comp.file);
+
   // Fallback: if manifest doesn't have variant metadata yet, parse cva() directly from component file.
   if (!variants.length) {
     try {
-      const srcPath = path.join(SRC_DIR, "components", comp.file);
       if (fs.existsSync(srcPath)) {
         const code = fs.readFileSync(srcPath, "utf-8");
         // Roughly match shadcn-style: variants: { variant: { ... }, size: { ... } }
@@ -576,7 +579,6 @@ function buildStoryFileContent(comp) {
   // Read component source to detect export style for import
   let source = "";
   try {
-    const srcPath = path.join(SRC_DIR, "components", comp.file);
     if (fs.existsSync(srcPath)) {
       source = fs.readFileSync(srcPath, "utf-8");
     }
@@ -586,6 +588,11 @@ function buildStoryFileContent(comp) {
   const exportStyle = detectExportStyle(source, componentName);
   const omitChildren = componentWrapsVoidElement(source);
 
+  // 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))) {
+    return null;
+  }
+
   if (RECIPES[componentName]) {
     return buildRecipeStoryContent(comp, componentName, importPath, title, source, exportStyle, RECIPES[componentName]);
   }
@@ -596,7 +603,7 @@ function buildStoryFileContent(comp) {
   if (exportStyle === "default") {
     lines.push(`import ${componentName} from "${importPath}";`);
     lines.push(`const ComponentRef = ${componentName};`);
-  } else if (exportStyle === "named") {
+  } else if (exportStyle === "named" || exportStyle === "unknown") {
     lines.push(`import { ${componentName} } from "${importPath}";`);
     lines.push(`const ComponentRef = ${componentName};`);
   } else {
@@ -785,6 +792,40 @@ function writeFoundationsStories(foundations) {
     ].join("\n");
   fs.writeFileSync(path.join(foundationsDir, "Brand.stories.tsx"), brandContent, "utf-8");
   console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Brand.stories.tsx")));
+
+  const iconNames = Array.isArray(foundations?.icons) ? foundations.icons : [];
+  if (iconNames.length > 0) {
+    const iconsContent =
+      [
+        "import type { Meta, StoryObj } from \"@storybook/react\";",
+        "import * as Lucide from \"lucide-react\";",
+        "",
+        "const meta = { title: \"Foundations/Icons\" } satisfies Meta;",
+        "export default meta;",
+        "type Story = StoryObj;",
+        "",
+        `const iconNames = ${JSON.stringify(iconNames)};`,
+        "",
+        "export const Default: Story = {",
+        "  render: () => (",
+        "    <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(auto-fill, minmax(100px, 1fr))\", gap: 16, padding: 24 }}>",
+        "      {iconNames.map((name) => {",
+        "        const Icon = Lucide[name];",
+        "        if (!Icon) return null;",
+        "        return (",
+        "          <div key={name} style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", gap: 8, padding: 12, border: \"1px solid #333\", borderRadius: 8 }}>",
+        "            <Icon size={24} />",
+        "            <span style={{ fontSize: 11, color: \"#888\" }}>{name}</span>",
+        "          </div>",
+        "        );",
+        "      })}",
+        "    </div>",
+        "  ),",
+        "};",
+      ].join("\n");
+    fs.writeFileSync(path.join(foundationsDir, "Icons.stories.tsx"), iconsContent, "utf-8");
+    console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Icons.stories.tsx")));
+  }
 }
 
 function writeComponentSuggestionsStory(componentSuggestions) {
@@ -922,6 +963,7 @@ function main() {
     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");
     console.log(`[VDS] Wrote ${path.relative(PROJECT_ROOT, storyPath)}`);
   }