vibe-design-system 2.5.22 → 2.5.24

package/package.json

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

package/vds-core-template/scan.mjs

@@ -29,6 +29,7 @@ const cliT = (key, n) => CLI_LOCALES[CLI_LOCALE][key].replace("{n}", String(n));
 const SRC_DIR = path.join(PROJECT_ROOT, "src");
 const COMPONENTS_DIR = path.join(PROJECT_ROOT, "src", "components");
 const PAGES_DIR = path.join(PROJECT_ROOT, "src", "pages");
+const APP_DIR = path.join(PROJECT_ROOT, "src", "app");
 
 const IGNORE_DIRS = ["node_modules", "dist", ".next", "build", "vds-generated", ".storybook"];
 const OUTPUT_FILE = path.join(PROJECT_ROOT, "vds-output.json");
@@ -436,6 +437,47 @@ function suggestNameFromPattern(pattern) {
   return "Container";
 }
 
+/** Count direct child elements in JSX inner content (depth-1 opening tags). */
+function countDirectChildren(innerContent) {
+  if (!innerContent || typeof innerContent !== "string") return 0;
+  let depth = 0;
+  let count = 0;
+  const s = innerContent;
+  let i = 0;
+  while (i < s.length) {
+    if (s.slice(i, i + 2) === "</") {
+      i += 2;
+      depth -= 1;
+      while (i < s.length && /[\w-]/.test(s[i])) i += 1;
+      continue;
+    }
+    if (s[i] === "<" && /[\w]/.test(s[i + 1])) {
+      depth += 1;
+      if (depth === 1) count += 1;
+      i += 1;
+      while (i < s.length && /[\w-]/.test(s[i])) i += 1;
+      continue;
+    }
+    if (s[i] === "{" || s[i] === '"' || s[i] === "'" || s[i] === "`") {
+      const open = s[i];
+      const close = open === "{" ? "}" : open;
+      i += 1;
+      let depthBrace = open === "{" ? 1 : 0;
+      while (i < s.length) {
+        if (depthBrace === 0 && (s[i] === close || (open === "{" && s[i] === "}"))) break;
+        if (s[i] === open) depthBrace += 1;
+        else if (s[i] === close) depthBrace -= 1;
+        else if ((open === '"' || open === "'") && s[i] === "\\") i += 1;
+        i += 1;
+      }
+      if (s[i] === close) i += 1;
+      continue;
+    }
+    i += 1;
+  }
+  return count;
+}
+
 /** Extract full JSX element (opening tag to matching closing tag) and inner text. */
 function extractFullElement(content, classNameMatchIndex, tagName) {
   const tag = tagName;
@@ -475,17 +517,51 @@ function extractFullElement(content, classNameMatchIndex, tagName) {
   return null;
 }
 
-/** Scan src/pages/*.tsx for repeated className clusters; return component suggestions. */
+/** Return set of component names already in src/components (so we don't suggest them again). */
+function getExistingComponentNames() {
+  const names = new Set();
+  if (!fs.existsSync(COMPONENTS_DIR)) return names;
+  const walk = (dir) => {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    for (const e of entries) {
+      const full = path.join(dir, e.name);
+      if (e.isDirectory() && !IGNORE_DIRS.includes(e.name)) walk(full);
+      else if (e.isFile() && /\.(tsx|jsx)$/i.test(e.name)) {
+        const base = e.name.replace(/\.(tsx|jsx)$/i, "");
+        if (/^[A-Z]/.test(base)) names.add(base);
+      }
+    }
+  };
+  walk(COMPONENTS_DIR);
+  return names;
+}
+
+/** Scan src/pages and src/app for repeated visual-section patterns (className + 2+ children); return component suggestions. */
 function extractComponentSuggestions() {
-  if (!fs.existsSync(PAGES_DIR)) return [];
-  const pageFiles = getAllComponentFiles(PAGES_DIR);
+  const pageDirs = [
+    { dir: PAGES_DIR, prefix: "src/pages/" },
+    { dir: APP_DIR, prefix: "src/app/" },
+  ];
+  const allPageFiles = [];
+  for (const { dir, prefix } of pageDirs) {
+    if (!fs.existsSync(dir)) continue;
+    const files = getAllComponentFiles(dir);
+    for (const rel of files) {
+      allPageFiles.push({ fullPath: path.join(dir, rel), srcRel: prefix + rel.replace(/\\/g, "/") });
+    }
+  }
+  if (allPageFiles.length === 0) return [];
+
   const byPattern = new Map();
   const re = /className\s*=\s*["']([^"']+)["']|className\s*=\s*\{\s*["']([^"']+)["']/g;
 
-  for (const rel of pageFiles) {
-    const fullPath = path.join(PAGES_DIR, rel);
-    const content = fs.readFileSync(fullPath, "utf-8");
-    const srcRel = "src/pages/" + rel.replace(/\\/g, "/");
+  for (const { fullPath, srcRel } of allPageFiles) {
+    let content;
+    try {
+      content = fs.readFileSync(fullPath, "utf-8");
+    } catch (_) {
+      continue;
+    }
     let m;
     re.lastIndex = 0;
     while ((m = re.exec(content)) !== null) {
@@ -500,11 +576,14 @@ function extractComponentSuggestions() {
         const tagName = tagMatch ? tagMatch[1] : "div";
         let fullJsx = null;
         let innerText = "";
+        let innerContent = "";
         const extracted = extractFullElement(content, m.index, tagName);
         if (extracted) {
           fullJsx = extracted.fullJsx;
           innerText = extracted.innerText || "";
+          innerContent = extracted.innerContent || "";
         }
+        const directChildren = countDirectChildren(innerContent);
         byPattern.set(raw, {
           count: 0,
           files: new Set(),
@@ -512,6 +591,7 @@ function extractComponentSuggestions() {
           snippet: `<${tagName} className="${raw}">...</${tagName}>`,
           fullJsx,
           innerText,
+          directChildren,
         });
       }
       const entry = byPattern.get(raw);
@@ -520,19 +600,23 @@ function extractComponentSuggestions() {
     }
   }
 
+  const existingNames = getExistingComponentNames();
   const suggestions = [];
-  for (const [pattern, { count, files, snippet, tagName, fullJsx, innerText }] of byPattern.entries()) {
+  for (const [pattern, { count, files, snippet, tagName, fullJsx, innerText, directChildren }] of byPattern.entries()) {
     if (count < 2) continue;
     const suggestedName = suggestNameFromContent(innerText) || suggestNameFromPattern(pattern);
+    const name = sanitizeComponentName(suggestedName.replace(/\s+/g, ""));
+    if (existingNames.has(name)) continue;
+    if (directChildren < 2) continue;
     suggestions.push({
-      suggestedName: sanitizeComponentName(suggestedName.replace(/\s+/g, "")),
+      suggestedName: name,
       tagName: tagName || "div",
       pattern,
       fullJsx,
       occurrences: count,
       foundIn: [...files].sort(),
       snippet,
-      reason: `Same className cluster appears ${count} times`,
+      reason: `Visual section candidate: same className cluster ${count}×, ${directChildren} child elements`,
     });
   }
   return suggestions;

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

@@ -478,22 +478,36 @@ const REACTNODE_PLACEHOLDER_TEXT = {
   children: "Example content",
 };
 
-/** Recursive list of .tsx file paths under dir (relative to dir). */
-function getAllTsxUnderDir(dir) {
+/** Recursive list of .tsx/.jsx file paths under dir (relative to dir). Index.tsx / index.tsx first for deterministic "first usage". */
+function getAllTsxJsxUnderDir(dir) {
   if (!fs.existsSync(dir)) return [];
   const out = [];
   const entries = fs.readdirSync(dir, { withFileTypes: true });
   for (const e of entries) {
     const full = path.join(dir, e.name);
     if (e.isDirectory()) {
-      out.push(...getAllTsxUnderDir(full).map((r) => path.join(e.name, r)));
-    } else if (e.isFile() && e.name.endsWith(".tsx")) {
+      out.push(...getAllTsxJsxUnderDir(full).map((r) => path.join(e.name, r)));
+    } else if (e.isFile() && (e.name.endsWith(".tsx") || e.name.endsWith(".jsx"))) {
       out.push(e.name);
     }
   }
+  out.sort((a, b) => {
+    const baseA = path.basename(a, path.extname(a));
+    const baseB = path.basename(b, path.extname(b));
+    const isIndexA = baseA === "Index" || baseA === "index";
+    const isIndexB = baseB === "Index" || baseB === "index";
+    if (isIndexA && !isIndexB) return -1;
+    if (!isIndexA && isIndexB) return 1;
+    return a.localeCompare(b);
+  });
   return out;
 }
 
+/** @deprecated Use getAllTsxJsxUnderDir. Kept for compatibility. */
+function getAllTsxUnderDir(dir) {
+  return getAllTsxJsxUnderDir(dir);
+}
+
 /** Extract prop="value" and prop='value' and prop={"value"} from JSX tag content. Returns { propName: "value", ... }. */
 function extractPropsFromJsxTagContent(tagContent) {
   const props = {};
@@ -546,7 +560,7 @@ function buildMockArrayItems(componentSource, itemTypeName, propName) {
   return items;
 }
 
-/** Find first real usage of component in src/pages or src/app; return { propName: "literalValue", ... } or null. */
+/** Find first real usage of component in src/pages or src/app (Index.tsx preferred); return { propName: "literalValue", ... } or null. */
 function findComponentUsageInPages(componentName, projectRoot) {
   const srcDir = path.join(projectRoot, "src");
   const pagesDir = path.join(srcDir, "pages");
@@ -557,7 +571,7 @@ function findComponentUsageInPages(componentName, projectRoot) {
   const escapedName = componentName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
   const tagOpenRe = new RegExp(`<${escapedName}\\s+([\\s\\S]*?)\\s*\\/?>`, "m");
   for (const dir of dirs) {
-    const files = getAllTsxUnderDir(dir);
+    const files = getAllTsxJsxUnderDir(dir);
     for (const rel of files) {
       const fullPath = path.join(dir, rel);
       try {
@@ -596,7 +610,9 @@ function buildDefaultArgsForRequiredProps(props, usageFromPages = null, componen
       const name = p.name;
       const required = p.required === true;
       if (/ReactNode|React\.ReactNode/.test(type)) {
-        const text = REACTNODE_PLACEHOLDER_TEXT[name] || componentPlaceholders[name] || "Content";
+        const text = fromPages[name] != null && typeof fromPages[name] === "string"
+          ? fromPages[name]
+          : (REACTNODE_PLACEHOLDER_TEXT[name] || componentPlaceholders[name] || "Content");
         argLines.push(`    ${name}: ${JSON.stringify(text)},`);
         added.add(name);
         continue;
@@ -1167,8 +1183,8 @@ function writeComponentSuggestionsStory(componentSuggestions) {
       "export const Default: Story = {",
       "  render: () => (",
       "    <div style={{ padding: 24, fontFamily: \"system-ui, sans-serif\" }}>",
-      "      <h2 style={{ marginBottom: 16 }}>Repeated className patterns (component candidates)</h2>",
-      "      <p style={{ color: \"#888\", marginBottom: 24 }}>Patterns with 3+ classes appearing 2+ times across src/pages. Consider extracting as components.</p>",
+      "      <h2 style={{ marginBottom: 16 }}>Visual section candidates (component suggestions)</h2>",
+      "      <p style={{ color: \"#888\", marginBottom: 24 }}>From src/pages and src/app: own className, 2+ child elements, pattern repeated 2+ times. Not yet in src/components. Consider extracting as components.</p>",
       "      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 24 }}>",
       "        {suggestions.map((s, i) => (",
       "          <div key={i} style={{ border: \"1px solid #333\", borderRadius: 8, padding: 16, background: \"#111\" }}>",