vibe-design-system 2.5.24 → 2.5.26

package/bin/init.js

@@ -205,9 +205,13 @@ function ensureStorybook(projectRoot) {
   fs.writeFileSync(mainPath, STORYBOOK_MAIN_TS, "utf-8");
   console.log("📝 .storybook/main.ts yazıldı.");
 
-  const previewPath = path.join(storybookDir, "preview.ts");
-  fs.writeFileSync(previewPath, STORYBOOK_PREVIEW_TS, "utf-8");
-  console.log("📝 .storybook/preview.ts yazıldı.");
+  const hasPreview = ["preview.tsx", "preview.ts", "preview.jsx", "preview.js"].some((name) =>
+    fs.existsSync(path.join(storybookDir, name))
+  );
+  if (!hasPreview) {
+    fs.writeFileSync(path.join(storybookDir, "preview.ts"), STORYBOOK_PREVIEW_TS, "utf-8");
+    console.log("📝 .storybook/preview.ts yazıldı.");
+  }
 }
 
 // ADIM 3 — vds-core/ kopyala
@@ -324,6 +328,19 @@ function runStoryGenerator(projectRoot) {
   if (r.status !== 0) process.exitCode = r.status ?? 1;
 }
 
+// ADIM 7b — Provider detection & Storybook decorator setup
+function runSetupStorybookProviders(projectRoot) {
+  const setupPath = path.join(projectRoot, "vds-core", "setup-storybook-providers.mjs");
+  if (!fs.existsSync(setupPath)) return;
+  console.log("🔌 Storybook provider decorators ayarlanıyor...");
+  const r = spawnSync("node", [setupPath], {
+    cwd: projectRoot,
+    stdio: "inherit",
+    shell: false,
+  });
+  if (r.status !== 0) process.exitCode = r.status ?? 1;
+}
+
 // ADIM 9 — Storybook örnek dosyalarını sil
 function removeStorybookExamples(projectRoot) {
   const storiesDir = path.join(projectRoot, "src", "stories");
@@ -377,6 +394,7 @@ removeStorybookExamples(projectRoot);
 // ADIM 7
 runScan(projectRoot);
 runStoryGenerator(projectRoot);
+runSetupStorybookProviders(projectRoot);
 
 // ADIM 8
 console.log("\n✅ VDS kuruldu!");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.5.24",
+  "version": "2.5.26",
   "description": "Auto-generate design systems for vibe coding projects",
   "type": "module",
   "bin": {

package/vds-core-template/README.md

@@ -45,8 +45,24 @@ To see **live renders** of components in the dashboard (isolated, no app chrome)
    VDS_PREVIEW_URL=http://localhost:3000 node vds-core/dashboard-server.mjs
    ```
 
+## Storybook
+
+1. **Generate stories** (after `npm run vds`):
+   ```bash
+   npm run vds:stories
+   ```
+   Add to `package.json` if missing:
+   ```json
+   "vds:stories": "node vds-core/story-generator.mjs"
+   ```
+
+2. **Context providers:** If components use React context (e.g. `useTimer`, `useSidebar`, `useCircles`, drag-drop context), they will error in Storybook unless wrapped with the right providers. In your project, add decorators in `.storybook/preview.tsx` to wrap all stories (or per-story) with your app’s providers (e.g. `TimerProvider`, `SidebarProvider`, `CirclesProvider`). See [Storybook decorators](https://storybook.js.org/docs/writing-stories/decorators).
+
+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.
+
 ## 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.

package/vds-core-template/scan.mjs

@@ -316,9 +316,10 @@ function extractBrandAssets() {
   return assets;
 }
 
-/** Extract icon names from `import { A, B, C } from "lucide-react"` (or 'lucide-react'). Returns unique list. */
+/** Extract icon names from `import { A, B, C } from "lucide-react"` in app code only (exclude stories so generated Star/defaults don't pollute). */
 function extractLucideIconsUsed(srcDir) {
-  const files = getAllTsxJsxInDir(srcDir);
+  const allFiles = getAllTsxJsxInDir(srcDir);
+  const files = allFiles.filter((rel) => !/^stories[/\\]/.test(rel.replace(/\\/g, "/")));
   const names = new Set();
   const importRe = /import\s*\{([^}]+)\}\s*from\s*["']lucide-react["']/g;
   for (const rel of files) {

package/vds-core-template/setup-storybook-providers.mjs

@@ -0,0 +1,204 @@
+#!/usr/bin/env node
+/**
+ * VDS — Storybook provider detection and decorator setup.
+ * Run from project root: node vds-core/setup-storybook-providers.mjs
+ *
+ * 1. Scans src/ for context hooks (useTimer, useCircles, useSidebar, useAuth).
+ * 2. Finds which Provider each hook needs; locates export in project.
+ * 3. Injects/merges provider decorators into .storybook/preview.ts or .storybook/preview.tsx.
+ * 4. Adds warning comment to story files for components that use a hook whose provider was not found.
+ */
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const PROJECT_ROOT = path.join(__dirname, "..");
+const SRC_DIR = path.join(PROJECT_ROOT, "src");
+const STORYBOOK_DIR = path.join(PROJECT_ROOT, ".storybook");
+
+const HOOK_TO_PROVIDER = {
+  useTimer: "TimerProvider",
+  useCircles: "CirclesProvider",
+  useSidebar: "SidebarProvider",
+  useAuth: "AuthProvider",
+};
+
+const IGNORE_DIRS = new Set(["node_modules", "dist", ".next", "build", ".storybook", "stories"]);
+
+function getAllSourceFiles(dir, baseDir = dir) {
+  if (!fs.existsSync(dir)) return [];
+  const out = [];
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  for (const e of entries) {
+    const full = path.join(dir, e.name);
+    const rel = path.relative(baseDir, full).replace(/\\/g, "/");
+    if (e.isDirectory()) {
+      if (IGNORE_DIRS.has(e.name)) continue;
+      out.push(...getAllSourceFiles(full, baseDir));
+    } else if (/\.(tsx?|jsx?)$/i.test(e.name)) {
+      out.push(rel);
+    }
+  }
+  return out;
+}
+
+function detectHooksInFile(content) {
+  const found = new Set();
+  for (const hook of Object.keys(HOOK_TO_PROVIDER)) {
+    if (new RegExp("\\b" + hook + "\\b").test(content)) found.add(hook);
+  }
+  return found;
+}
+
+/** Map: relative path (src/...) -> Set of hook names */
+function detectHooksUsedInProject(projectRoot) {
+  const srcDir = path.join(projectRoot, "src");
+  const files = getAllSourceFiles(srcDir, srcDir).map((r) => path.join("src", r));
+  const byFile = new Map();
+  for (const rel of files) {
+    const full = path.join(projectRoot, rel);
+    try {
+      const content = fs.readFileSync(full, "utf-8");
+      const hooks = detectHooksInFile(content);
+      if (hooks.size) byFile.set(rel, hooks);
+    } catch (_) {}
+  }
+  return byFile;
+}
+
+/** Find file that exports providerName (e.g. TimerProvider). Returns import path from project root for @/ alias: "contexts/TimerContext" */
+function findProviderExportPath(projectRoot, providerName) {
+  const srcDir = path.join(projectRoot, "src");
+  const files = getAllSourceFiles(srcDir, srcDir).map((r) => path.join("src", r));
+  const exportRe = new RegExp(
+    "export\\s+(?:default\\s+)?(?:const|function|class)\\s+" + providerName + "\\b|export\\s*\\{[^}]*\\b" + providerName + "\\b[^}]*\\}"
+  );
+  for (const rel of files) {
+    const full = path.join(projectRoot, rel);
+    try {
+      const content = fs.readFileSync(full, "utf-8");
+      if (exportRe.test(content)) {
+        const withoutExt = rel.replace(/\.(tsx?|jsx?)$/i, "").replace(/^src\/?/, "");
+        return "@/" + withoutExt;
+      }
+    } catch (_) {}
+  }
+  return null;
+}
+
+function getPreviewPath(projectRoot) {
+  const pTsx = path.join(projectRoot, ".storybook", "preview.tsx");
+  const pTs = path.join(projectRoot, ".storybook", "preview.ts");
+  const pJsx = path.join(projectRoot, ".storybook", "preview.jsx");
+  const pJs = path.join(projectRoot, ".storybook", "preview.js");
+  if (fs.existsSync(pTsx)) return pTsx;
+  if (fs.existsSync(pTs)) return pTs;
+  if (fs.existsSync(pJsx)) return pJsx;
+  if (fs.existsSync(pJs)) return pJs;
+  return null;
+}
+
+/** Collect all hooks used in project; return { providersToAdd: [{ name, importPath }], hooksWithoutProvider: Set, hooksByFile: Map } */
+function collectProvidersAndWarnings(projectRoot) {
+  const hooksByFile = detectHooksUsedInProject(projectRoot);
+  const allHooksUsed = new Set();
+  for (const hooks of hooksByFile.values()) {
+    for (const h of hooks) allHooksUsed.add(h);
+  }
+  const providersToAdd = [];
+  const hooksWithoutProvider = new Set();
+  for (const hook of allHooksUsed) {
+    const providerName = HOOK_TO_PROVIDER[hook];
+    const importPath = findProviderExportPath(projectRoot, providerName);
+    if (importPath) {
+      if (!providersToAdd.some((p) => p.name === providerName)) {
+        providersToAdd.push({ name: providerName, importPath });
+      }
+    } else {
+      hooksWithoutProvider.add(hook);
+    }
+  }
+  return { providersToAdd, hooksWithoutProvider, hooksByFile };
+}
+
+/** Build withProviders decorator using React.createElement (no JSX so preview can stay .ts) */
+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})`;
+  }
+  return `const withProviders = (Story: any) => ${inner};`;
+}
+
+function injectProviderDecorators(projectRoot) {
+  const previewPath = getPreviewPath(projectRoot);
+  if (!previewPath) {
+    console.log("[VDS] .storybook/preview not found; skip provider setup.");
+    return;
+  }
+
+  const { providersToAdd, hooksWithoutProvider, hooksByFile } = collectProvidersAndWarnings(projectRoot);
+  if (providersToAdd.length === 0 && hooksWithoutProvider.size === 0) return;
+
+  if (providersToAdd.length > 0) {
+    let content = fs.readFileSync(previewPath, "utf-8");
+    const alreadyHas = providersToAdd.every((p) => content.includes(p.name));
+    if (!alreadyHas) {
+      const importLines = [...new Map(providersToAdd.map((p) => [p.name, p])).values()]
+        .map((p) => `import { ${p.name} } from "${p.importPath}";`)
+        .join("\n");
+      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) + importLines + "\n" + content.slice(insertAt);
+    }
+    if (!content.includes("withProviders")) {
+      if (!content.includes("import React")) {
+        const firstImport = content.match(/^import\s+/m);
+        const insertAt = firstImport ? content.indexOf(firstImport[0]) : 0;
+        content = content.slice(0, insertAt) + "import React from \"react\";\n" + content.slice(insertAt);
+      }
+      const withProvidersCode = buildWithProvidersCode(providersToAdd);
+      content = content.replace(/(\s*)(export default preview;?)/, withProvidersCode + "\n\n$1$2");
+      if (content.includes("decorators:")) {
+        content = content.replace(/decorators:\s*\[/, "decorators: [withProviders, ");
+      } else {
+        content = content.replace(/(const preview\s*[^=]*=\s*\{\s*)/, "$1\n  decorators: [withProviders],\n  ");
+      }
+    }
+    fs.writeFileSync(previewPath, content, "utf-8");
+    console.log("[VDS] Storybook preview: added " + providersToAdd.map((p) => p.name).join(", "));
+  }
+
+  if (hooksWithoutProvider.size > 0) {
+    const componentNameFromPath = (rel) => path.basename(rel, path.extname(rel));
+    const storiesDir = path.join(projectRoot, "src", "stories");
+    const storyRels = fs.existsSync(storiesDir) ? getAllSourceFiles(storiesDir, storiesDir) : [];
+    const storyByComponent = new Map();
+    for (const r of storyRels) {
+      if (!r.includes(".stories.")) continue;
+      const name = path.basename(r).replace(/\.stories\.(tsx?|jsx?)$/i, "");
+      storyByComponent.set(name, path.join(storiesDir, r));
+    }
+    for (const [fileRel, hooks] of hooksByFile) {
+      const missing = [...hooks].filter((h) => hooksWithoutProvider.has(h));
+      if (missing.length === 0) continue;
+      const compName = componentNameFromPath(fileRel);
+      const storyPath = storyByComponent.get(compName);
+      if (!storyPath || !fs.existsSync(storyPath)) continue;
+      let storyContent = fs.readFileSync(storyPath, "utf-8");
+      const comment = "// ⚠️ This component uses " + missing.join(", ") + " but provider not found in project\n";
+      if (storyContent.startsWith("// ⚠️")) continue;
+      storyContent = comment + storyContent;
+      fs.writeFileSync(storyPath, storyContent, "utf-8");
+    }
+  }
+}
+
+const isMain = process.argv[1] && path.resolve(process.argv[1]) === path.resolve(fileURLToPath(import.meta.url));
+if (isMain) {
+  injectProviderDecorators(PROJECT_ROOT);
+}
+
+export { collectProvidersAndWarnings, injectProviderDecorators, getPreviewPath };

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

@@ -542,17 +542,26 @@ function getItemTypeFieldsFromSource(source, itemTypeName) {
   return fields;
 }
 
-/** Build 2-3 mock items for array prop from component source (item type fields). */
+/** Whether a field name is date/time-like (for safe mock values and avoiding "Invalid time value"). */
+function isDateLikeField(name) {
+  if (!name || typeof name !== "string") return false;
+  const n = name.toLowerCase();
+  return /date|time|start|end|created|updated|timeline/.test(n);
+}
+
+/** Build 2-3 mock items for array prop from component source (item type fields). Uses valid ISO date strings for date-like fields to avoid "Invalid time value". */
 function buildMockArrayItems(componentSource, itemTypeName, propName) {
   const fields = getItemTypeFieldsFromSource(componentSource, itemTypeName);
   const defaultFields = ["label", "value", "title", "id", "name", "description"];
   const useFields = fields.length ? fields : defaultFields;
   const items = [];
+  const baseDate = new Date("2024-01-15T12:00:00.000Z").getTime();
   for (let i = 1; i <= 3; i++) {
     const item = {};
     for (const f of useFields) {
       if (f === "id") item[f] = String(i);
       else if (f === "value") item[f] = String(100 - i * 25);
+      else if (isDateLikeField(f)) item[f] = new Date(baseDate + i * 86400000).toISOString();
       else item[f] = `Example ${i}`;
     }
     items.push(item);
@@ -637,6 +646,9 @@ function buildDefaultArgsForRequiredProps(props, usageFromPages = null, componen
       } else if (fromPages[name] !== undefined && fromPages[name] !== null) {
         argLines.push(`    ${name}: ${JSON.stringify(String(fromPages[name]))},`);
         added.add(name);
+      } else if (/Date\b/.test(type) || /^(currentDate|startDate|endDate|date)$/.test(name)) {
+        argLines.push(`    ${name}: ${JSON.stringify(new Date().toISOString())},`);
+        added.add(name);
       } else if (/string/.test(type)) {
         argLines.push(`    ${name}: ${stringFallback(name)},`);
         added.add(name);
@@ -1138,7 +1150,9 @@ function writeFoundationsStories(foundations) {
         "",
         "export const Default: Story = {",
         "  render: () => (",
-        "    <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(auto-fill, minmax(100px, 1fr))\", gap: 16, padding: 24 }}>",
+        "    <div style={{ padding: 24 }}>",
+        "      <p style={{ marginBottom: 16, color: \"#888\", fontSize: 14 }}>Icons imported from lucide-react in app code (src/, excluding stories).</p>",
+        "      <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(auto-fill, minmax(100px, 1fr))\", gap: 16 }}>",
         "      {iconNames.map((name) => {",
         "        const Icon = Lucide[name];",
         "        if (!Icon) return null;",
@@ -1149,6 +1163,7 @@ function writeFoundationsStories(foundations) {
         "          </div>",
         "        );",
         "      })}",
+        "      </div>",
         "    </div>",
         "  ),",
         "};",