vibe-design-system 2.5.0 → 2.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.5.0",
+  "version": "2.5.2",
   "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,11 +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);
@@ -528,13 +616,14 @@ function extractComponentSuggestions() {
   }
 
   const suggestions = [];
-  for (const [pattern, { count, files, snippet, tagName }] 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: sanitizeComponentName(suggestedName.replace(/\s+/g, "")),
       tagName: tagName || "div",
       pattern,
+      fullJsx,
       occurrences: count,
       foundIn: [...files].sort(),
       snippet,
@@ -546,7 +635,32 @@ function extractComponentSuggestions() {
 
 const VDS_GENERATED_DIR = path.join(COMPONENTS_DIR, "vds-generated");
 
-/** Write extracted components to src/components/vds-generated/*.tsx and return component entries for output. */
+/** Ensure component name is valid JS: no leading digits/special chars, PascalCase. */
+function sanitizeComponentName(name) {
+  if (!name || typeof name !== "string") return "Extracted";
+  let s = name.replace(/\s+/g, "").replace(/^[0-9\W_]+/, "");
+  if (!s) return "Extracted";
+  s = s.charAt(0).toUpperCase() + s.slice(1);
+  return s;
+}
+
+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 });
@@ -554,36 +668,62 @@ function writeVdsGeneratedComponents(suggestions) {
   const entries = [];
   for (let i = 0; i < suggestions.length; i++) {
     const s = suggestions[i];
-    let baseName = s.suggestedName.replace(/\s+/g, "");
-    if (!baseName) baseName = "Extracted";
+    let baseName = sanitizeComponentName(s.suggestedName || "Extracted");
     let fileName = baseName + ".tsx";
-    if (usedNames.has(fileName)) {
-      fileName = baseName + String(i + 1) + ".tsx";
-    }
+    if (usedNames.has(fileName)) fileName = baseName + String(i + 1) + ".tsx";
     usedNames.add(fileName);
     const componentName = fileName.replace(/\.tsx$/, "");
-    const tagName = s.tagName || "div";
-    const className = s.pattern || "";
     const relPath = "vds-generated/" + fileName;
     const fullPath = path.join(COMPONENTS_DIR, relPath);
-    const content = `import * as React from "react";
 
-export function ${componentName}({ children }: { children?: React.ReactNode }) {
+    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 (
-    <${tagName} className={\`${className.replace(/`/g, "\\`").replace(/\$/g, "\\$")}\`}>
-      {children ?? null}
-    </${tagName}>
+    ${bodyJsx}
   );
 }
 `;
-    fs.writeFileSync(fullPath, content, "utf-8");
+      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: (className || "").split(/\s+/).filter(Boolean),
+      tokens: [...new Set(tokens)],
     });
   }
   return entries;

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 {
@@ -956,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)}`);
   }