vibe-design-system 1.9.9 → 1.9.12

package/package.json

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

package/vds-core-template/scan.mjs

@@ -352,6 +352,88 @@ function humanizeName(filePath) {
   return base.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()).trim();
 }
 
+const COMPONENT_SUGGESTION_KEYWORDS = [
+  { re: /\bcard\b/i, name: "Card" },
+  { re: /\bsection\b/i, name: "Section" },
+  { re: /\bitem\b/i, name: "Item" },
+  { re: /\bbadge\b/i, name: "Badge" },
+  { re: /\brow\b/i, name: "Row" },
+  { re: /\bgrid\b/i, name: "Grid" },
+  { re: /\bhero\b/i, name: "Hero" },
+  { re: /\bcta\b/i, name: "Cta" },
+  { re: /\bstat\b/i, name: "Stat" },
+  { re: /\bprice\b/i, name: "Pricing" },
+  { re: /\bfeature\b/i, name: "Feature" },
+  { re: /\bbutton\b/i, name: "Button" },
+  { re: /\btag\b/i, name: "Tag" },
+  { re: /\bchip\b/i, name: "Chip" },
+  { re: /\btile\b/i, name: "Tile" },
+  { re: /\bbanner\b/i, name: "Banner" },
+  { re: /\bmodal\b/i, name: "Modal" },
+];
+
+function suggestNameFromPattern(pattern, index) {
+  const parts = [];
+  for (const { re, name } of COMPONENT_SUGGESTION_KEYWORDS) {
+    if (re.test(pattern)) parts.push(name);
+  }
+  if (parts.length > 0) return parts.join("");
+  return "Block" + (index + 1);
+}
+
+/** Scan src/pages/*.tsx for repeated className clusters; return component suggestions. */
+function extractComponentSuggestions() {
+  if (!fs.existsSync(PAGES_DIR)) return [];
+  const pageFiles = getAllComponentFiles(PAGES_DIR);
+  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, "/");
+    let m;
+    re.lastIndex = 0;
+    while ((m = re.exec(content)) !== null) {
+      const raw = (m[1] ?? m[2] ?? "").trim().replace(/\s+/g, " ").trim();
+      if (!raw) continue;
+      const classCount = raw.split(/\s+/).filter(Boolean).length;
+      if (classCount < 3) continue;
+      if (!byPattern.has(raw)) {
+        const before = content.substring(0, m.index);
+        const lastOpen = before.lastIndexOf("<");
+        const tagMatch = lastOpen >= 0 ? content.slice(lastOpen).match(/<(\w+)/) : null;
+        const tagName = tagMatch ? tagMatch[1] : "div";
+        byPattern.set(raw, {
+          count: 0,
+          files: new Set(),
+          snippet: `<${tagName} className="${raw}">...</${tagName}>`,
+        });
+      }
+      const entry = byPattern.get(raw);
+      entry.count += 1;
+      entry.files.add(srcRel);
+    }
+  }
+
+  const suggestions = [];
+  let blockIndex = 0;
+  for (const [pattern, { count, files, snippet }] of byPattern.entries()) {
+    if (count < 2) continue;
+    const suggestedName = suggestNameFromPattern(pattern, blockIndex);
+    if (suggestedName.startsWith("Block")) blockIndex += 1;
+    suggestions.push({
+      suggestedName,
+      occurrences: count,
+      foundIn: [...files].sort(),
+      pattern,
+      snippet,
+      reason: `Same className cluster appears ${count} times`,
+    });
+  }
+  return suggestions;
+}
+
 function extractTailwindTokens(content) {
   const tokens = new Set();
   const patterns = [
@@ -667,6 +749,7 @@ function scan() {
   const foundations = extractFoundations();
   foundations.icons = extractLucideIconsUsed(SRC_DIR);
   foundations.brand = { assets: extractBrandAssets() };
+  const componentSuggestions = extractComponentSuggestions();
   const output = {
     branch: getGitBranch(),
     engineer: getGitEngineer(),
@@ -674,6 +757,7 @@ function scan() {
     totalComponents: results.length,
     components: results,
     foundations,
+    componentSuggestions,
   };
 
   const prevComponents = readPreviousOutput();

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

@@ -769,6 +769,50 @@ function writeFoundationsStories(foundations) {
   console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Brand.stories.tsx")));
 }
 
+function writeComponentSuggestionsStory(componentSuggestions) {
+  if (!Array.isArray(componentSuggestions) || componentSuggestions.length === 0) return;
+  const foundationsDir = path.join(STORIES_DIR, "foundations");
+  ensureDir(foundationsDir);
+  const suggestions = componentSuggestions.map((s) => ({
+    suggestedName: s.suggestedName,
+    occurrences: s.occurrences,
+    foundIn: s.foundIn,
+    pattern: s.pattern,
+    snippet: s.snippet,
+    reason: s.reason,
+  }));
+  const content =
+    [
+      "import type { Meta, StoryObj } from \"@storybook/react\";",
+      "",
+      "const meta = { title: \"Foundations/Component Suggestions\" } satisfies Meta;",
+      "export default meta;",
+      "type Story = StoryObj;",
+      "",
+      `const suggestions = ${JSON.stringify(suggestions)};`,
+      "",
+      "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>",
+      "      <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\" }}>",
+      "            <div style={{ fontWeight: 600, marginBottom: 8 }}>{s.suggestedName}</div>",
+      "            <div style={{ fontSize: 12, color: \"#888\", marginBottom: 8 }}>{s.reason} · {s.foundIn.join(\", \")}</div>",
+      "            <pre style={{ margin: 0, padding: 12, background: \"#000\", borderRadius: 4, overflow: \"auto\", fontSize: 12 }}><code>{s.snippet}</code></pre>",
+      "          </div>",
+      "        ))}",
+      "      </div>",
+      "    </div>",
+      "  ),",
+      "};",
+    ].join("\n");
+  fs.writeFileSync(path.join(foundationsDir, "ComponentSuggestions.stories.tsx"), content, "utf-8");
+  console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "ComponentSuggestions.stories.tsx")));
+}
+
 function main() {
   if (!fs.existsSync(VDS_OUTPUT)) {
     console.error("[VDS] vds-output.json not found. Run `npm run vds` first.");
@@ -784,6 +828,10 @@ function main() {
   ensureDir(STORIES_DIR);
   ensureDir(path.join(STORIES_DIR, "foundations"));
   writeFoundationsStories(foundations);
+  const componentSuggestions = data.componentSuggestions;
+  if (componentSuggestions?.length) {
+    writeComponentSuggestionsStory(componentSuggestions);
+  }
   try {
     const fd = path.join(STORIES_DIR, "foundations");
     if (fs.existsSync(fd)) {