vibe-design-system 2.8.54 → 2.8.58

package/bin/init.js

@@ -15,7 +15,7 @@
 import fs from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
-import { spawnSync } from "child_process";
+import { spawnSync, spawn } from "child_process";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const INSTALLER_ROOT = path.join(__dirname, "..");
@@ -606,9 +606,16 @@ function runStorybookAdapt(projectRoot) {
 }
 
 // ADIM 9b — vds.config.js oluştur (yoksa)
-function ensureVdsConfig(projectRoot) {
+function ensureVdsConfig(projectRoot, srcPrefix) {
   const configPath = path.join(projectRoot, "vds.config.js");
   if (fs.existsSync(configPath)) return;
+
+  // includeGroups is intentionally OFF by default.
+  // shadcn/ui base components (Button, Avatar, Badge…) are generic library primitives —
+  // most projects only want their custom sections and page components in Storybook.
+  // To include shadcn/ui components: add  includeGroups: ["shadcn", "UI", "ui"]  to vds.config.js.
+  const includeGroupsLine = `  // includeGroups: ["shadcn", "UI"], // Uncomment to add shadcn/ui primitive stories\n`;
+
   const content = `/**
  * VDS Configuration — auto-created by VDS installer
  * All fields are optional. Remove comments to activate overrides.
@@ -617,7 +624,7 @@ module.exports = {
   // skipList: ["MyHeavyPage"],    // Replace the default story skip list entirely
   // extraSkipList: ["OrderCard"], // Add to the default skip list
   // extraIgnoreDirs: ["fixtures"], // Additional dirs to skip during component scan
-};
+${includeGroupsLine}};
 `;
   fs.writeFileSync(configPath, content, "utf-8");
   console.log("⚙️ vds.config.js oluşturuldu.");
@@ -697,7 +704,7 @@ ensureStoriesDir(projectRoot, srcPrefix);
 removeStorybookExamples(projectRoot, srcPrefix);
 
 // ADIM 9b
-ensureVdsConfig(projectRoot);
+ensureVdsConfig(projectRoot, srcPrefix);
 
 // ADIM 7
 runScan(projectRoot);
@@ -707,8 +714,18 @@ runStorybookAdapt(projectRoot);
 
 // ADIM 8
 console.log("\n✅ VDS kuruldu!");
-console.log("→ npm run storybook      — design system'ı aç (localhost:6006)");
-console.log("→ npm run storybook:bg   — Storybook'u arka planda başlat (Cursor kapansa bile çalışır)");
 console.log("→ npm run vds:stories    — tarama + story + provider (tek komut)");
 console.log("→ npm run vds:watch      — otomatik güncelleme (watch modu)");
 console.log("\nNot: Storybook başlarken (Node 24+) DEP0190 uyarısı çıkarsa Storybook kaynaklıdır, güvenle yok sayabilirsiniz.\n");
+
+// ADIM 10 — Storybook'u otomatik başlat
+console.log("🚀 Storybook başlatılıyor → http://localhost:6006\n");
+const sbProc = spawn("npm", ["run", "storybook"], {
+  stdio: "inherit",
+  cwd: projectRoot,
+  shell: process.platform === "win32",
+});
+sbProc.on("error", (err) => {
+  console.error("[VDS] Storybook başlatılamadı:", err.message);
+  console.log("→ Manuel başlatmak için: npm run storybook");
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.8.54",
+  "version": "2.8.58",
   "description": "Auto-generate design systems for vibe coding projects",
   "homepage": "https://vibedesign.tech",
   "repository": {

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

@@ -246,10 +246,9 @@ const RECIPES = {
     )`,
   },
   Avatar: {
-    imports: ["AvatarImage", "AvatarFallback"],
+    imports: ["AvatarFallback"],
     render: `(args) => (
       <ComponentRef {...args}>
-        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
         <AvatarFallback>JD</AvatarFallback>
       </ComponentRef>
     )`,
@@ -425,13 +424,21 @@ function componentWrapsVoidElement(source) {
 }
 
 function toSafeComponentName(name, file) {
-  if (name && typeof name === "string") {
-    return name.replace(/[^A-Za-z0-9]+/g, " ").trim().replace(/\s+([a-z])/g, (_, c) => c.toUpperCase()).replace(/^\w/, (c) => c.toUpperCase()).replace(/\s+/g, "");
-  }
+  // Convert any string (spaces, hyphens, underscores) to PascalCase.
+  // If no separators present, treat as already-PascalCase and just capitalise the first letter.
+  const toPascal = (s) => {
+    if (!s) return "Component";
+    if (!/[-\s_]/.test(s)) return s.charAt(0).toUpperCase() + s.slice(1); // already camel/PascalCase
+    return s.replace(/[^A-Za-z0-9]+/g, " ").trim()
+      .split(" ").filter(Boolean)
+      .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+      .join("") || "Component";
+  };
+  if (name && typeof name === "string") return toPascal(name);
   const base = (file || "").replace(/\.[^.]+$/, "");
   const parts = base.split(/[\\/]/g);
   const last = parts[parts.length - 1] || "Component";
-  return last.charAt(0).toUpperCase() + last.slice(1);
+  return toPascal(last);
 }
 
 function parseUnionLiterals(type) {
@@ -873,6 +880,58 @@ const COMPONENT_EXTRA_ARGS = {
   ...(VDS_CONFIG.componentExtraArgs ?? {}),
 };
 
+// ---------------------------------------------------------------------------
+// USAGE SCANNER — reads project sources to find actual component usage patterns
+// e.g. <Button className="bg-[#5409da] text-white rounded-[10px]"> → generates
+// a "ProjectPrimary" story with the real project styling instead of generic CVA variants.
+// ---------------------------------------------------------------------------
+const _SCAN_IGNORE_DIRS = new Set(["node_modules", ".next", "dist", "build", ".git", ".storybook"]);
+
+function scanComponentUsages(componentName, projectRoot) {
+  const uiPathFrag = path.join("components", "ui") + path.sep;
+  const classNameCounts = new Map(); // className → count
+
+  function walk(dir) {
+    let entries;
+    try { entries = fs.readdirSync(dir, { withFileTypes: true }); } catch { return; }
+    for (const e of entries) {
+      if (_SCAN_IGNORE_DIRS.has(e.name)) continue;
+      const full = path.join(dir, e.name);
+      if (e.isDirectory()) { walk(full); continue; }
+      if (!/\.(tsx|jsx|ts|js)$/.test(e.name)) continue;
+      if (full.includes(uiPathFrag)) continue;       // Skip ui/ directory itself
+      if (e.name.includes(".stories.")) continue;    // Skip story files
+      let src;
+      try { src = fs.readFileSync(full, "utf-8"); } catch { continue; }
+      if (!src.includes(`<${componentName}`)) continue;
+
+      // Match <ComponentName ... > or <ComponentName ... />
+      const re = new RegExp(`<${componentName}(?:\\s+([^>]*?))?(?:\\s*/>|\\s*>)`, "g");
+      let m;
+      while ((m = re.exec(src)) !== null) {
+        const propsStr = m[1] || "";
+        // Extract className="..." — single or double quotes
+        const classM = propsStr.match(/className=["']([^"']+)["']/);
+        if (!classM) continue;
+        const cn = classM[1].trim();
+        if (!cn) continue;
+        // Only include usages that have project-specific (non-CVA) styling
+        // i.e. hex colors, arbitrary Tailwind values, custom font families
+        const hasCustomStyling = /bg-\[|text-\[|rounded-\[|#[0-9a-fA-F]{3,8}|\[font-family:/.test(cn);
+        if (!hasCustomStyling) continue;
+        classNameCounts.set(cn, (classNameCounts.get(cn) || 0) + 1);
+      }
+    }
+  }
+
+  walk(projectRoot);
+
+  return [...classNameCounts.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 4)
+    .map(([className, count]) => ({ className, count }));
+}
+
 /** Render'da args'a uygulanacak fallback (useState(estimate.toString()) gibi kullanımlar için; args/Controls undefined yapsa bile). */
 const RENDER_ARGS_FALLBACKS = {
   TaskEstimateInput: ", estimate: (args && args.estimate) ?? 0, value: (args && args.value) ?? 0, task: (args && args.task) ?? { id: \"1\", title: \"Example\", estimate: 0 }",
@@ -1686,16 +1745,26 @@ function buildProfileChildrenArgLine(profile) {
 
 function buildStoryFileContent(comp) {
   const componentName = toSafeComponentName(comp.name, comp.file);
-  const fileNoExt = comp.file.replace(/\.(tsx|jsx)$/, "");
-  // Compute import path relative to src/stories/ using the actual components directory.
-  let importPath = "";
-  const isPageFile = fileNoExt.startsWith("pages/") || fileNoExt.startsWith("src/pages/");
-  if (isPageFile) {
-    // Keep full path with src/ prefix so relative is computed correctly from src/stories/
-    // e.g. "src/pages/Admin" → "../pages/Admin"  (NOT "../../pages/Admin")
-    const fullPath = fileNoExt.startsWith("src/") ? fileNoExt : "src/" + fileNoExt;
-    importPath = path.posix.relative("src/stories", fullPath);
+  const fileNoExt = comp.file.replace(/\.(tsx|jsx|ts|js)$/, "");
+
+  // Determine if comp.file is project-root-relative (e.g. "client/src/pages/Foo.tsx")
+  // or components-dir-relative (e.g. "ui/badge.tsx").
+  // Try project-root first; fall back to components-dir.
+  const absoluteFromRoot = path.join(PROJECT_ROOT, comp.file);
+  const absoluteFromComponents = path.join(PROJECT_ROOT, COMPONENTS_REL_DIR, comp.file);
+  const isProjectRelative = fs.existsSync(absoluteFromRoot);
+  const srcPath = isProjectRelative ? absoluteFromRoot : absoluteFromComponents;
+
+  // isPageFile: detect components that live inside a pages/ directory
+  const isPageFile = fileNoExt.includes("/pages/") || fileNoExt.startsWith("pages/");
+
+  // Compute import path relative to src/stories/
+  let importPath;
+  if (isProjectRelative) {
+    // File path is already relative to project root — use directly
+    importPath = path.posix.relative("src/stories", fileNoExt);
   } else {
+    // File path is relative to components dir — prefix with components dir
     const targetPath = path.posix.join(COMPONENTS_REL_DIR, fileNoExt);
     importPath = path.posix.relative("src/stories", targetPath);
   }
@@ -1709,10 +1778,6 @@ function buildStoryFileContent(comp) {
   // Title: "Module/ComponentName"  (category intentionally dropped — folder is the context)
   const title = `${group}/${componentName}`;
 
-  const srcPath = isPageFile
-    ? path.join(PROJECT_ROOT, fileNoExt.replace(/^src\//, "src/") + ".tsx")
-    : path.join(PROJECT_ROOT, COMPONENTS_REL_DIR, comp.file);
-
   // Read component source once (used for export style, props, CVA parsing)
   let source = "";
   try {
@@ -1853,6 +1918,28 @@ function buildStoryFileContent(comp) {
     lines.push(`};`);
   }
 
+  // --- Project-specific usage stories ---
+  // Scan actual component usages in project source. If custom className overrides found
+  // (hex colors, arbitrary Tailwind values), append stories that show the REAL project styling.
+  const usagePatterns = scanComponentUsages(componentName, PROJECT_ROOT);
+  if (usagePatterns.length > 0) {
+    const usageStoryNames = ["ProjectPrimary", "ProjectSecondary", "ProjectTertiary", "ProjectQuaternary"];
+    lines.push("");
+    lines.push(`// — Project-specific stories auto-detected from actual ${componentName} usage in this codebase.`);
+    lines.push(`// These reflect how ${componentName} is styled in the project, not generic variants.`);
+    for (let i = 0; i < usagePatterns.length; i++) {
+      const { className } = usagePatterns[i];
+      const sName = usageStoryNames[i];
+      lines.push(`export const ${sName}: Story = {`);
+      lines.push(`  render: () => (`);
+      lines.push(`    <ComponentRef className="${className}">`);
+      lines.push(`      ${componentName}`);
+      lines.push(`    </ComponentRef>`);
+      lines.push(`  ),`);
+      lines.push(`};`);
+    }
+  }
+
   return lines.join("\n");
 }
 
@@ -3482,6 +3569,12 @@ function main() {
   if (!onlyName) {
     try {
       const existing = fs.readdirSync(STORIES_DIR);
+      // Remove macOS copy artifacts: "Button.stories 2.tsx", "Badge.stories 3.tsx", etc.
+      for (const name of existing) {
+        if (/\.stories \d+\.(tsx|ts|jsx|js)$/.test(name)) {
+          try { fs.unlinkSync(path.join(STORIES_DIR, name)); } catch { /* ignore */ }
+        }
+      }
       for (const name of existing) {
         if (name === "foundations") continue;
         if (
@@ -3509,6 +3602,7 @@ function main() {
     }
   }
 
+  let writtenCount = 0;
   for (const comp of components) {
     const componentName = toSafeComponentName(comp.name, comp.file);
     // Skip unclassified and shadcn/ui primitives (UI group) — they're documented at ui.shadcn.com
@@ -3518,8 +3612,9 @@ function main() {
     // Users can override with vds.config.js: includeGroups: ["shadcn"] or includeComponents: ["Button", "Badge"]
     const includeGroups = VDS_CONFIG.includeGroups || [];
     const includeComponents = VDS_CONFIG.includeComponents || [];
-    if (g === "Uncategorized" || g === "UI" || g === "shadcn" || g === "ui") {
-      const groupIncluded = includeGroups.some((ig) => ig.toLowerCase() === g.toLowerCase());
+    const gLower = g.toLowerCase();
+    if (g === "Uncategorized" || gLower === "ui" || gLower === "shadcn") {
+      const groupIncluded = includeGroups.some((ig) => ig.toLowerCase() === gLower);
       const compIncluded = includeComponents.includes(componentName);
       if (!groupIncluded && !compIncluded) {
         // Clean up leftover story files for components that are now in the skip group
@@ -3542,7 +3637,10 @@ function main() {
     const storyPath = path.join(STORIES_DIR, storyFileName);
     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;
+    if (requiredCount > 3) {
+      console.log(`[VDS] ${componentName} → skipped (${requiredCount} required props — too complex to auto-generate)`);
+      continue;
+    }
 
     // Never overwrite existing story files — only create new ones
     // To regenerate a story: delete the file and re-run VDS
@@ -3554,6 +3652,22 @@ function main() {
     if (content == null) continue;
     fs.writeFileSync(storyPath, content, "utf-8");
     console.log(`[VDS] Wrote ${path.relative(PROJECT_ROOT, storyPath)}`);
+    writtenCount++;
+  }
+
+  // Summary
+  if (writtenCount === 0 && components.length > 0) {
+    const hasShadcnGroup = components.some(c => {
+      const gr = (c.group || "").toLowerCase();
+      return gr === "shadcn" || gr === "ui";
+    });
+    console.log("[VDS] ⚠️  No new component stories were generated.");
+    if (hasShadcnGroup && (VDS_CONFIG.includeGroups || []).length === 0) {
+      console.log("[VDS] Tip: shadcn/ui components detected. Add to vds.config.js:");
+      console.log('[VDS]   includeGroups: ["shadcn", "UI"]');
+    }
+  } else if (writtenCount > 0) {
+    console.log(`[VDS] ✓ Generated ${writtenCount} new component stories.`);
   }
 }