vibe-design-system 2.8.10 → 2.8.12

package/bin/init.js

@@ -79,6 +79,12 @@ Bu proje VDS kullanıyor. Tek komut yeterli:
 - npm run storybook → design system'ı aç (localhost:6006)
 - npm run vds:watch → değişiklikleri izle (tarama + story otomatik)
 
+Arka planda Storybook (Cursor kapatılsa bile çalışmaya devam eder):
+- npm run storybook:bg → Storybook'u arka planda başlat (PM2 ile)
+- npm run storybook:stop → Arka plan Storybook'u durdur
+- npm run storybook:logs → Son logları göster
+- npm run storybook:status → Tüm PM2 process'lerini listele
+
 Geliştirme kuralları:
 - UI component'leri src/components/ui/ altına koy
 - Variant'lar için cva() kullan
@@ -450,6 +456,22 @@ function addScripts(projectRoot) {
     scripts["build-storybook"] = "storybook build";
     changed = true;
   }
+  if (!scripts["storybook:bg"]) {
+    scripts["storybook:bg"] = "node vds-core/storybook-bg.mjs start";
+    changed = true;
+  }
+  if (!scripts["storybook:stop"]) {
+    scripts["storybook:stop"] = "node vds-core/storybook-bg.mjs stop";
+    changed = true;
+  }
+  if (!scripts["storybook:logs"]) {
+    scripts["storybook:logs"] = "node vds-core/storybook-bg.mjs logs";
+    changed = true;
+  }
+  if (!scripts["storybook:status"]) {
+    scripts["storybook:status"] = "node vds-core/storybook-bg.mjs status";
+    changed = true;
+  }
   if (changed) {
     pkg.scripts = scripts;
     fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2), "utf-8");
@@ -626,7 +648,8 @@ runStorybookAdapt(projectRoot);
 
 // ADIM 8
 console.log("\n✅ VDS kuruldu!");
-console.log("→ npm run storybook ile design system'ı aç (localhost:6006)");
-console.log("→ Yeni component ekledikten sonra: npm run vds:stories (tek komut: tarama + story + provider)");
-console.log("→ npm run vds:watch ile otomatik güncellemeyi başlat");
+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");

package/package.json

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

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

@@ -544,6 +544,8 @@ const COMPONENT_EXTRA_ARGS = {
     "    tasks: [],",
     "    onLogClick: () => {},",
   ],
+  // Project-specific extra args from vds.config.js (componentExtraArgs key) are merged below
+  ...(VDS_CONFIG.componentExtraArgs ?? {}),
 };
 
 /** Render'da args'a uygulanacak fallback (useState(estimate.toString()) gibi kullanımlar için; args/Controls undefined yapsa bile). */
@@ -551,12 +553,15 @@ 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 }",
 };
 
-/** Kalıcı çözüm: Storybook Docs/Controls args'ı geçmezse bile component'a güvenli props veren wrapper. Önce safeDefaults uygulanır, sonra gelen props. */
+/** Kalıcı çözüm: Storybook Docs/Controls args'ı geçmezse bile component'a güvenli props veren wrapper. Önce safeDefaults uygulanır, sonra gelen props.
+ * Projeler vds.config.js içinde safeWrapperDefaults: { ComponentName: `{ ... }` } ekleyerek genişletebilir. */
 const SAFE_WRAPPER_DEFAULTS = {
   TaskEstimateInput: `{ estimate: 0, onUpdate: () => {}, value: 0, task: { id: "1", title: "Example", estimate: 0 }, compact: false }`,
   TimeFilterPanel: `{ filter: { preset: null, dateRange: {}, userIds: [], tags: [], billable: "all" }, onFilterChange: () => {}, onSaveFilter: () => {}, onDeleteFilter: () => {}, filteredCount: 0, savedFilters: [] }`,
   TimeStats: `{ totalLogged: 0, totalBillable: 0, totalNonBillable: 0, totalBilled: 0, totalEstimated: 0, projectTotalEstimated: 0 }`,
   TimeTable: `{ logs: [{ id: "1", taskId: "t1", userId: "u1", date: "2024-01-15", hours: 8, description: "Work session", billable: true, status: "submitted" }, { id: "2", taskId: "t1", userId: "u1", date: "2024-01-16", hours: 6, description: "Review session", billable: false, status: "draft" }], users: [], tasks: [], onLogClick: () => {} }`,
+  // Project-specific overrides from vds.config.js (safeWrapperDefaults key) are merged below
+  ...(VDS_CONFIG.safeWrapperDefaults ?? {}),
 };
 
 /** Recursive list of .tsx/.jsx file paths under dir (relative to dir). Index.tsx / index.tsx first for deterministic "first usage". */

package/vds-core-template/storybook-bg.mjs

@@ -0,0 +1,114 @@
+#!/usr/bin/env node
+/**
+ * VDS Background Storybook Manager — pm2 wrapper
+ * Usage: node vds-core/storybook-bg.mjs [start|stop|logs|restart|status]
+ *
+ * Storybook'u arka planda çalıştırır, Cursor kapatılsa bile devam eder.
+ * pm2 otomatik bulunur veya kurulur.
+ */
+import { spawnSync } from "child_process";
+import fs from "fs";
+import path from "path";
+
+const ROOT = process.cwd();
+const action = process.argv[2] || "start";
+
+// Benzersiz PM2 process adı için proje adını al
+let projectName = "storybook-vds";
+try {
+  const pkg = JSON.parse(fs.readFileSync(path.join(ROOT, "package.json"), "utf-8"));
+  if (pkg.name) {
+    projectName = "storybook-" + pkg.name.replace(/[^a-z0-9]/gi, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+  }
+} catch (_) {}
+
+// PM2 binary'sini bul
+function findPm2() {
+  const candidates = [
+    "pm2",
+    `${process.env.HOME}/.npm-global/bin/pm2`,
+    `${process.env.HOME}/.nvm/current/bin/pm2`,
+    "/usr/local/bin/pm2",
+    "/opt/homebrew/bin/pm2",
+  ];
+  for (const candidate of candidates) {
+    try {
+      const r = spawnSync(candidate, ["--version"], { stdio: "pipe", shell: false });
+      if (r.status === 0) return candidate;
+    } catch (_) {}
+  }
+  return null;
+}
+
+let pm2Bin = findPm2();
+
+if (!pm2Bin) {
+  console.log("📦 PM2 bulunamadı. Kuruluyor...");
+  // Önce HOME prefix ile dene (sudo gerektirmez)
+  const prefix = `${process.env.HOME}/.npm-global`;
+  spawnSync("npm", ["config", "set", "prefix", prefix], { stdio: "pipe" });
+  const r = spawnSync("npm", ["install", "-g", "pm2"], { stdio: "inherit", shell: false });
+  if (r.status !== 0) {
+    console.error("❌ PM2 kurulamadı.");
+    console.error("Manuel kurulum için:");
+    console.error("  npm config set prefix '~/.npm-global'");
+    console.error("  npm install -g pm2");
+    console.error("  echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.zshrc && source ~/.zshrc");
+    process.exit(1);
+  }
+  pm2Bin = `${prefix}/bin/pm2`;
+  if (!fs.existsSync(pm2Bin)) pm2Bin = "pm2";
+  console.log("✅ PM2 kuruldu.");
+}
+
+if (action === "start" || action === "restart") {
+  console.log(`\n🚀 Storybook arka planda başlatılıyor...`);
+  console.log(`   Process: ${projectName} | Port: 6006\n`);
+
+  // Zaten çalışıyorsa durdur
+  spawnSync(pm2Bin, ["stop", projectName], { stdio: "pipe" });
+  spawnSync(pm2Bin, ["delete", projectName], { stdio: "pipe" });
+
+  const r = spawnSync(
+    pm2Bin,
+    ["start", "npm", "--name", projectName, "--", "run", "storybook"],
+    { cwd: ROOT, stdio: "inherit", shell: false }
+  );
+
+  if (r.status === 0) {
+    console.log("\n✅ Storybook arka planda çalışıyor!");
+    console.log("→ http://localhost:6006");
+    console.log("→ Durdurmak için:  npm run storybook:stop");
+    console.log("→ Logları görmek:  npm run storybook:logs");
+    console.log("→ Durum:           npm run storybook:status\n");
+
+    // Kaydet (yeniden başlatmada da devam etsin)
+    spawnSync(pm2Bin, ["save"], { stdio: "pipe" });
+  } else {
+    console.error("❌ Storybook başlatılamadı. Hata için: npm run storybook:logs");
+    process.exit(1);
+  }
+
+} else if (action === "stop") {
+  console.log(`⏹️  Storybook durduruluyor (${projectName})...`);
+  spawnSync(pm2Bin, ["stop", projectName], { stdio: "inherit" });
+  spawnSync(pm2Bin, ["delete", projectName], { stdio: "inherit" });
+  spawnSync(pm2Bin, ["save"], { stdio: "pipe" });
+  console.log("✅ Storybook durduruldu.");
+
+} else if (action === "logs") {
+  console.log(`📋 Storybook logları (${projectName}):\n`);
+  spawnSync(pm2Bin, ["logs", projectName, "--lines", "80", "--nostream"], { stdio: "inherit" });
+
+} else if (action === "status") {
+  spawnSync(pm2Bin, ["list"], { stdio: "inherit" });
+
+} else {
+  console.log("Kullanım: node vds-core/storybook-bg.mjs [start|stop|logs|restart|status]");
+  console.log("\nKomutlar:");
+  console.log("  start   — Storybook'u arka planda başlat (varsayılan)");
+  console.log("  stop    — Arka plan Storybook'u durdur");
+  console.log("  logs    — Son logları göster");
+  console.log("  restart — Yeniden başlat");
+  console.log("  status  — Tüm PM2 process'lerini listele");
+}