vibe-design-system 2.5.30 → 2.5.32

package/bin/init.js

@@ -84,11 +84,10 @@ export default preview;
 `;
 
 const CURSORRULES = `# VDS — Vibe Design System
-Bu proje VDS kullanıyor. Komutlar:
-- npm run vds → projeyi tara
-- npm run vds:stories → Storybook story'lerini üret
-- npm run vds:watch → değişiklikleri izle
+Bu proje VDS kullanıyor. Tek komut yeterli:
+- npm run vds:stories → projeyi tara, story'leri üret, provider'ları ayarla (hepsi tek seferde)
 - npm run storybook → design system'ı aç (localhost:6006)
+- npm run vds:watch → değişiklikleri izle (tarama + story otomatik)
 
 Geliştirme kuralları:
 - UI component'leri src/components/ui/ altına koy
@@ -254,7 +253,7 @@ function addScripts(projectRoot) {
     changed = true;
   }
   if (!scripts["vds:stories"]) {
-    scripts["vds:stories"] = "node vds-core/story-generator.mjs";
+    scripts["vds:stories"] = "node vds-core/scan.mjs && node vds-core/story-generator.mjs && node vds-core/setup-storybook-providers.mjs";
     changed = true;
   }
   if (!scripts["vds:watch"]) {
@@ -398,6 +397,7 @@ runSetupStorybookProviders(projectRoot);
 
 // ADIM 8
 console.log("\n✅ VDS kuruldu!");
-console.log("→ npm run storybook ile design system'ını aç");
+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("\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.5.30",
+  "version": "2.5.32",
   "description": "Auto-generate design systems for vibe coding projects",
   "type": "module",
   "bin": {

package/vds-core-template/README.md

@@ -47,22 +47,32 @@ To see **live renders** of components in the dashboard (isolated, no app chrome)
 
 ## Storybook
 
-1. **Generate stories** (after `npm run vds`):
+**Tek komut** (tarama + story + provider hepsi birlikte):
    ```bash
    npm run vds:stories
    ```
-   Add to `package.json` if missing:
-   ```json
-   "vds:stories": "node vds-core/story-generator.mjs"
-   ```
+   Script (`package.json`): `node vds-core/scan.mjs && node vds-core/story-generator.mjs && node vds-core/setup-storybook-providers.mjs`
+
+- **Provider'lar:** `vds:stories` içinde zaten çalışır; ayrıca `node vds-core/setup-storybook-providers.mjs` çalıştırmanıza gerek yok. Hooks (useTimer, useSidebar, useCircles, useAuth, useSearch) and inject the matching providers into `.storybook/preview.ts`. Kalan "undefined (reading 'x')" hatalarında ilgili story'de args veya mock state ekleyin.
+
+- **Icons:** The Foundations/Icons story lists only icons that are imported from `lucide-react` in your app code (src/, excluding `src/stories`), so it reflects real usage.
+
+## Son hal / Final state
+
+VDS, **tek komutla** projenizin design system'ını Storybook'ta stilleriyle eşitlemeyi hedefler:
+
+1. **Kurulum (bir kez):** `npx vibe-design-system init` — Storybook, vds-core, scriptler ve ilk tarama + story + provider ayarı yapılır.
+2. **Güncelleme:** Yeni component ekledikten veya projeyi değiştirdikten sonra sadece `npm run vds:stories` çalıştırın; tarama, story üretimi ve provider enjeksiyonu otomatik yapılır.
+3. **Görüntüleme:** `npm run storybook` ile tüm component'lar stilleriyle (index.css vb. preview'da import edildiği için) listelenir.
 
-2. **Context providers:** Run `node vds-core/setup-storybook-providers.mjs` to detect hooks (useTimer, useSidebar, useCircles, useAuth, useSearch) and inject the matching providers into `.storybook/preview.ts`. The script prefers the provider from the same file as the hook (e.g. `context/SidebarContext.tsx` for useSidebar over `components/ui/sidebar`). If a component still errors with "Cannot read properties of undefined (reading 'x')", add default args or mock context state in that component’s story.
+Kullanıcının her projede ayrı ayrı provider eklemesi, manuel story düzeltmesi veya birden fazla komut çalıştırması gerekmez. Nadir kalan hatalar (belirli bir component'ın özel context'i) story dosyasında args/mock ile giderilir.
 
-3. **Icons:** The Foundations/Icons story lists only icons that are imported from `lucide-react` in your app code (src/, excluding `src/stories`), so it reflects real usage.
+**"Failed to fetch dynamically imported module"** genelde o story veya component dosyasındaki hatalı/eksik import'tan kaynaklanır; ilgili .stories.tsx veya component'ı kontrol edin veya o component'ı VDS skip listesine ekleyin.
 
 ## Layout
 
-- `vds-core/scan.mjs` — Node script; scans `src/components`, CSS, Tailwind config. Writes `vds-output.json` and `public/vds-output.json`. Paths are relative to **project root** (parent of `vds-core`).
-- `vds-core/story-generator.mjs` — Reads `vds-output.json`, writes Storybook stories under `src/stories`.
-- `vds-core/VdsPreview.tsx` — Optional; mount at `/vds-preview` so the dashboard can show live component renders.
-- Dashboard UI reads `/vds-output.json`, renders Foundations + Component Library.
+- `vds-core/scan.mjs` — Projeyi tarar (src/components, CSS, Tailwind). `vds-output.json` ve `public/vds-output.json` yazar.
+- `vds-core/story-generator.mjs` — `vds-output.json`'dan story'leri üretir; varsayılan args: filters/dateRange, sayı, tarih, modal/drawer için isOpen/open: true, onClose/onSave vb. no-op, circle/user/nav/allocation mock objeleri (visibility, path hatalarını önler).
+- `vds-core/setup-storybook-providers.mjs` — Hook ve react-dnd kullanımını tespit eder, `.storybook/preview` decorator'larına provider ekler.
+- `vds-core/VdsPreview.tsx` — İsteğe bağlı; `/vds-preview` ile dashboard canlı component önizlemesi yapar.
+- Dashboard UI `/vds-output.json` okur; Foundations + Component Library gösterir.

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

@@ -613,6 +613,10 @@ function buildDefaultArgsForRequiredProps(props, usageFromPages = null, componen
     return JSON.stringify("Example");
   };
 
+  const HANDLER_PROPS = new Set(["onClose", "onOpenChange", "onSave", "onDelete", "onBudgetCreated", "onTaskCreated", "onOpenChange"]);
+  const OPEN_PROPS = new Set(["isOpen", "open"]);
+  const isFunctionType = (t) => /=>\s*void|\(\s*\)\s*=>|function\s*\(/.test(t) || /^\([^)]*\)\s*=>\s*void/.test(t);
+
   if (Array.isArray(props) && props.length > 0) {
     for (const p of props) {
       const type = String(p.type || "").trim();
@@ -626,6 +630,26 @@ function buildDefaultArgsForRequiredProps(props, usageFromPages = null, componen
         added.add(name);
         continue;
       }
+      if (OPEN_PROPS.has(name)) {
+        argLines.push(`    ${name}: true,`);
+        added.add(name);
+        continue;
+      }
+      if (HANDLER_PROPS.has(name) && isFunctionType(type)) {
+        argLines.push(`    ${name}: () => {},`);
+        added.add(name);
+        continue;
+      }
+      if (name === "allocation" && (/object|union|Allocation/.test(type) || !type)) {
+        argLines.push(`    ${name}: { id: "1", resourceId: "1", budget: 0, used: 0 },`);
+        added.add(name);
+        continue;
+      }
+      if (name === "user" && (/object|any|User/.test(type) || !type)) {
+        argLines.push(`    ${name}: { id: "1", name: "User", email: "user@example.com" },`);
+        added.add(name);
+        continue;
+      }
       if (!required) continue;
       if (/LucideIcon|lucide-react/.test(type)) {
         const iconName = LUCIDE_ICON_DEFAULT;
@@ -670,6 +694,27 @@ function buildDefaultArgsForRequiredProps(props, usageFromPages = null, componen
       } else if (/number/.test(type) || NUMBER_LIKE_OPTIONAL.has(name)) {
         argLines.push(`    ${name}: ${name === "visibility" ? "1" : "0"},`);
         added.add(name);
+      } else if (OPEN_PROPS.has(name)) {
+        argLines.push(`    ${name}: true,`);
+        added.add(name);
+      } else if (HANDLER_PROPS.has(name)) {
+        argLines.push(`    ${name}: () => {},`);
+        added.add(name);
+      } else if (name === "circle" || /Circle\b/.test(type)) {
+        argLines.push(`    ${name}: { id: "1", name: "Example", visibility: 1 },`);
+        added.add(name);
+      } else if (name === "item" || name === "navItem" || /NavItem|Nav.*Item/.test(type)) {
+        argLines.push(`    ${name}: { path: "/", label: "Example", id: "1" },`);
+        added.add(name);
+      } else if (name === "allocation") {
+        argLines.push(`    ${name}: { id: "1", resourceId: "1", budget: 0, used: 0 },`);
+        added.add(name);
+      } else if (name === "user") {
+        argLines.push(`    ${name}: { id: "1", name: "User", email: "user@example.com" },`);
+        added.add(name);
+      } else if (name === "defaultProjectId") {
+        argLines.push(`    ${name}: "1",`);
+        added.add(name);
       }
     }
   }

package/vds-core-template/watch.mjs

@@ -13,6 +13,7 @@ function run() {
   try {
     execSync('node vds-core/scan.mjs', { stdio: 'inherit', cwd: ROOT });
     execSync('node vds-core/story-generator.mjs', { stdio: 'inherit', cwd: ROOT });
+    execSync('node vds-core/setup-storybook-providers.mjs', { stdio: 'inherit', cwd: ROOT });
     console.log(`[VDS ${ts}] ✅ Design system güncellendi.`);
   } catch (e) {
     console.error(`[VDS ${ts}] ❌ Hata:`, e.message);