vibe-design-system 2.8.56 → 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, "..");
@@ -610,12 +610,11 @@ function ensureVdsConfig(projectRoot, srcPrefix) {
   const configPath = path.join(projectRoot, "vds.config.js");
   if (fs.existsSync(configPath)) return;
 
-  // Detect shadcn/ui: if components/ui/ directory exists, add includeGroups by default
-  const uiDir = path.join(projectRoot, srcPrefix || "src", "components", "ui");
-  const hasShadcn = fs.existsSync(uiDir);
-  const includeGroupsLine = hasShadcn
-    ? `  includeGroups: ["shadcn", "UI", "ui"], // Auto-detected shadcn/ui: generate stories for UI components\n`
-    : `  // includeGroups: ["shadcn", "UI"],    // Uncomment to generate stories for shadcn/ui primitives\n`;
+  // 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
@@ -715,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.56",
+  "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>
     )`,
@@ -881,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 }",
@@ -1867,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");
 }
 
@@ -3496,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 (