vibe-design-system 2.5.29 → 2.5.31

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.29",
+  "version": "2.5.31",
   "description": "Auto-generate design systems for vibe coding projects",
   "type": "module",
   "bin": {

package/vds-core-template/README.md

@@ -47,22 +47,30 @@ 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:
 
-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.
+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.
 
-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.
+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.
 
 ## 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, sayı, tarih) ekler.
+- `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/setup-storybook-providers.mjs

@@ -105,7 +105,28 @@ function getPreviewPath(projectRoot) {
   return null;
 }
 
-/** Collect all hooks used in project; return { providersToAdd: [{ name, importPath }], hooksWithoutProvider: Set, hooksByFile: Map } */
+/** Detect if project uses react-dnd (useDrag, useDrop, or import from react-dnd). */
+function detectReactDnd(projectRoot) {
+  const srcDir = path.join(projectRoot, "src");
+  const files = getAllSourceFiles(srcDir, srcDir).map((r) => path.join(projectRoot, "src", r));
+  for (const full of files) {
+    try {
+      const content = fs.readFileSync(full, "utf-8");
+      if (/\b(useDrag|useDrop|DndProvider)\b/.test(content) || /from\s+["']react-dnd["']/.test(content)) {
+        const pkgPath = path.join(projectRoot, "package.json");
+        if (fs.existsSync(pkgPath)) {
+          const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+          const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+          if (deps["react-dnd"]) return true;
+        }
+        return true;
+      }
+    } catch (_) {}
+  }
+  return false;
+}
+
+/** Collect all hooks used in project; return { providersToAdd: [{ name, importPath, props? }], ... } */
 function collectProvidersAndWarnings(projectRoot) {
   const hooksByFile = detectHooksUsedInProject(projectRoot);
   const allHooksUsed = new Set();
@@ -125,15 +146,25 @@ function collectProvidersAndWarnings(projectRoot) {
       hooksWithoutProvider.add(hook);
     }
   }
+  if (detectReactDnd(projectRoot) && !providersToAdd.some((p) => p.name === "DndProvider")) {
+    providersToAdd.unshift({
+      name: "DndProvider",
+      importPath: "react-dnd",
+      props: "{ backend: HTML5Backend }",
+      extraImport: { name: "HTML5Backend", from: "react-dnd-html5-backend" },
+    });
+  }
   return { providersToAdd, hooksWithoutProvider, hooksByFile };
 }
 
-/** Build withProviders decorator using React.createElement (no JSX so preview can stay .ts) */
+/** Build withProviders decorator using React.createElement (no JSX so preview can stay .ts). Supports provider.props. */
 function buildWithProvidersCode(providers) {
   if (providers.length === 0) return null;
   let inner = "React.createElement(Story)";
   for (let i = providers.length - 1; i >= 0; i--) {
-    inner = `React.createElement(${providers[i].name}, null, ${inner})`;
+    const p = providers[i];
+    const propsArg = p.props ? p.props : "null";
+    inner = `React.createElement(${p.name}, ${propsArg}, ${inner})`;
   }
   return `const withProviders = (Story: any) => ${inner};`;
 }
@@ -160,7 +191,11 @@ function injectProviderDecorators(projectRoot) {
       if (!content.includes(p.name)) {
         const lastImportIdx = content.search(/\nimport\s+.+?;\s*$/m);
         const insertAt = lastImportIdx >= 0 ? content.indexOf("\n", lastImportIdx) + 1 : content.indexOf("\n") + 1;
-        content = content.slice(0, insertAt) + `import { ${p.name} } from "${p.importPath}";\n` + content.slice(insertAt);
+        let importLine = `import { ${p.name} } from "${p.importPath}";\n`;
+        if (p.extraImport && !content.includes(p.extraImport.name)) {
+          importLine += `import { ${p.extraImport.name} } from "${p.extraImport.from}";\n`;
+        }
+        content = content.slice(0, insertAt) + importLine + content.slice(insertAt);
       }
     }
     content = content.replace(/const withProviders\s*=\s*\([^)]*\)\s*=>\s*[\s\S]+?;\s*\n?/g, "").replace(/\n{3,}/g, "\n\n");

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

@@ -652,6 +652,24 @@ function buildDefaultArgsForRequiredProps(props, usageFromPages = null, componen
       } else if (/string/.test(type)) {
         argLines.push(`    ${name}: ${stringFallback(name)},`);
         added.add(name);
+      } else if (/number/.test(type) || /^(value|amount|total|count|hours|minutes|progress|percent)$/.test(name)) {
+        argLines.push(`    ${name}: 0,`);
+        added.add(name);
+      }
+    }
+    // Optional props that often cause "reading X of undefined" in Storybook if missing
+    const NUMBER_LIKE_OPTIONAL = new Set(["value", "amount", "total", "count", "hours", "minutes", "progress", "percent", "visibility"]);
+    const DATE_RANGE_DEFAULT = `{ dateRange: { from: new Date().toISOString(), to: new Date().toISOString() } }`;
+    for (const p of props) {
+      const type = String(p.type || "").trim();
+      const name = p.name;
+      if (added.has(name)) continue;
+      if (name === "filters" || /dateRange|Filter.*object/.test(type)) {
+        argLines.push(`    ${name}: ${DATE_RANGE_DEFAULT},`);
+        added.add(name);
+      } else if (/number/.test(type) || NUMBER_LIKE_OPTIONAL.has(name)) {
+        argLines.push(`    ${name}: ${name === "visibility" ? "1" : "0"},`);
+        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);