vibe-design-system 2.8.56 → 2.8.59

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, "..");
@@ -278,8 +278,9 @@ export default config;
   // vite (default) & remix
   // For fullstack projects (client/src, frontend/src, etc.), add staticDirs for public assets
   const frontendDir = srcPrefix.split("/")[0]; // e.g. "client" from "client/src"
+  // Map public/ to "/" so components can load /images/... /figmaAssets/... etc. without prefix
   const staticDirsLine = srcPrefix !== "src"
-    ? `\n  staticDirs: [{ from: "../${frontendDir}/public", to: "/${frontendDir}" }],`
+    ? `\n  staticDirs: ["../${frontendDir}/public"],`
     : "";
 
   return `import type { StorybookConfig } from "@storybook/react-vite";
@@ -610,12 +611,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 +715,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.59",
   "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");
 }
 
@@ -2292,8 +2365,47 @@ function writeFoundationsStories(foundations) {
     console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Typography.stories.tsx")));
   }
 
+  // Collect brand assets: prefer scan data, fallback to scanning public/ directories
   const brandAssets = foundations?.brand?.assets;
-  const assets = Array.isArray(brandAssets) ? brandAssets : [];
+  let assets = Array.isArray(brandAssets) ? brandAssets : [];
+
+  // Also scan public/ dirs directly — scan.mjs may miss most project image assets
+  {
+    const publicDirs = [
+      path.join(PROJECT_ROOT, "public"),
+      path.join(PROJECT_ROOT, "client", "public"),
+      path.join(PROJECT_ROOT, "frontend", "public"),
+      path.join(PROJECT_ROOT, "src", "assets"),
+      path.join(PROJECT_ROOT, "client", "src", "assets"),
+    ];
+    const IMAGE_EXT = /\.(svg|png|jpg|jpeg|webp|gif)$/i;
+    const existingUrls = new Set(assets.map((a) => a.url || a.path || ""));
+
+    for (const pubDir of publicDirs) {
+      if (!fs.existsSync(pubDir)) continue;
+      const newAssets = [];
+      const scanDir = (dir, baseUrl) => {
+        let entries;
+        try { entries = fs.readdirSync(dir, { withFileTypes: true }); } catch { return; }
+        for (const e of entries) {
+          const urlPath = baseUrl + "/" + e.name;
+          if (e.isDirectory()) {
+            scanDir(path.join(dir, e.name), urlPath);
+          } else if (IMAGE_EXT.test(e.name) && !existingUrls.has(urlPath)) {
+            newAssets.push({ name: e.name.replace(/\.[^.]+$/, ""), url: urlPath });
+          }
+        }
+      };
+      scanDir(pubDir, "");
+      if (newAssets.length > 0) {
+        assets = [...assets, ...newAssets];
+        break; // Use first matching public dir only
+      }
+    }
+    // Limit to 40 assets to keep story file size reasonable
+    assets = assets.slice(0, 40);
+  }
+
   const brandContent =
     [
       "import type { Meta, StoryObj } from \"@storybook/react\";",
@@ -2307,10 +2419,10 @@ function writeFoundationsStories(foundations) {
       "export const Default: Story = {",
       "  render: () => (",
       "    <div style={{ display: \"flex\", gap: 24, flexWrap: \"wrap\", padding: 24 }}>",
-      "      {assets.length === 0 ? <p>No brand assets found.</p> : assets.map((a, i) => (",
-      "        <div key={i} style={{ textAlign: \"center\" }}>",
-      "          <img src={\"/\" + String(a.path || \"\").replace(\"public/\", \"\")} style={{ maxHeight: 100, maxWidth: 200, objectFit: \"contain\" }} alt={a.name || \"\"} />",
-      "          <div style={{ fontSize: 11, marginTop: 8, color: \"#666\" }}>{a.name || a.type || \"asset\"}</div>",
+      "      {assets.length === 0 ? <p style={{ color: '#888', fontFamily: 'monospace' }}>No brand assets found — add images to public/ or client/public/</p> : assets.map((a, i) => (",
+      "        <div key={i} style={{ textAlign: \"center\", background: '#f8f8f8', borderRadius: 8, padding: 12, minWidth: 120 }}>",
+      "          <img src={a.url || (\"/\" + String(a.path || \"\").replace(/^public\\//, \"\"))} style={{ maxHeight: 100, maxWidth: 180, objectFit: \"contain\", display: 'block', margin: '0 auto' }} alt={a.name || \"\"} />",
+      "          <div style={{ fontSize: 11, marginTop: 8, color: \"#666\", wordBreak: 'break-all' }}>{a.name || a.type || \"asset\"}</div>",
       "        </div>",
       "      ))}",
       "    </div>",
@@ -3496,6 +3608,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 (