vibe-design-system 2.5.32 → 2.5.34

package/bin/init.js

@@ -253,7 +253,7 @@ function addScripts(projectRoot) {
     changed = true;
   }
   if (!scripts["vds:stories"]) {
-    scripts["vds:stories"] = "node vds-core/scan.mjs && node vds-core/story-generator.mjs && node vds-core/setup-storybook-providers.mjs";
+    scripts["vds:stories"] = "node vds-core/scan.mjs && node vds-core/story-generator.mjs && node vds-core/setup-storybook-providers.mjs && node vds-core/storybook-adapt.mjs";
     changed = true;
   }
   if (!scripts["vds:watch"]) {
@@ -340,6 +340,18 @@ function runSetupStorybookProviders(projectRoot) {
   if (r.status !== 0) process.exitCode = r.status ?? 1;
 }
 
+// ADIM 7c — Storybook adapt: mock problematic imports (server-only, next/*) so components load
+function runStorybookAdapt(projectRoot) {
+  const adaptPath = path.join(projectRoot, "vds-core", "storybook-adapt.mjs");
+  if (!fs.existsSync(adaptPath)) return;
+  const r = spawnSync("node", [adaptPath], {
+    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");
@@ -394,6 +406,7 @@ removeStorybookExamples(projectRoot);
 runScan(projectRoot);
 runStoryGenerator(projectRoot);
 runSetupStorybookProviders(projectRoot);
+runStorybookAdapt(projectRoot);
 
 // ADIM 8
 console.log("\n✅ VDS kuruldu!");

package/package.json

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

package/vds-core-template/README.md

@@ -51,7 +51,7 @@ To see **live renders** of components in the dashboard (isolated, no app chrome)
    ```bash
    npm run vds:stories
    ```
-   Script (`package.json`): `node vds-core/scan.mjs && node vds-core/story-generator.mjs && node vds-core/setup-storybook-providers.mjs`
+   Script: `scan.mjs` → `story-generator.mjs` → `setup-storybook-providers.mjs` → **`storybook-adapt.mjs`** (dönüştürücü: sorunlu import'ları mock'lar, çözülemeyenleri uyarır).
 
 - **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.
 
@@ -67,12 +67,13 @@ VDS, **tek komutla** projenizin design system'ını Storybook'ta stilleriyle eş
 
 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.
 
-**"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.
+**"Failed to fetch dynamically imported module"** artık manuel adım gerektirmez: story'ler dinamik import ile üretilir; component yüklenemezse canvas'ta "Component could not be loaded (import error)." mesajı gösterilir, Storybook çökmez.
 
 ## Layout
 
 - `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/storybook-adapt.mjs` — **Dönüştürücü:** src/ içindeki import'ları tarar; Storybook'ta yüklenmeyen paketleri (server-only, next/headers, next/navigation vb.) mock'lar, `.storybook/mocks/` yazar ve Vite alias'larını ekler. Göreli import'ları kontrol eder, çözülemeyenleri uyarır.
 - `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

@@ -992,32 +992,17 @@ function buildStoryFileContent(comp) {
 
   const lines = [];
   lines.push(`import type { Meta, StoryObj } from "@storybook/react";`);
-  if (useReactNodeChildrenRender || needReact) {
-    lines.push(`import React from "react";`);
-  }
+  lines.push(`import React from "react";`);
   if (lucideImports.length > 0) {
     lines.push(`import { ${lucideImports.join(", ")} } from "lucide-react";`);
   }
 
-  if (isPage && exportStyle !== "default") {
-    lines.push(`import * as Named from "${importPath}";`);
-    lines.push(`const ComponentRef = Named["${componentName}"] ?? Named.default;`);
-  } else if (exportStyle === "default") {
-    lines.push(`import ${componentName} from "${importPath}";`);
-    lines.push(`const ComponentRef = ${componentName};`);
-  } else if (exportStyle === "named" || exportStyle === "unknown") {
-    lines.push(`import { ${componentName} } from "${importPath}";`);
-    lines.push(`const ComponentRef = ${componentName};`);
-  } else {
-    const defaultAlias = `${componentName}Default`;
-    const namedAlias = `${componentName}Named`;
-    lines.push(
-      `import ${defaultAlias}, { ${componentName} as ${namedAlias} } from "${importPath}";`,
-    );
-    lines.push(`const ComponentRef = ${namedAlias} ?? ${defaultAlias};`);
-  }
-
+  // Dynamic import + catch so "Failed to fetch dynamically imported module" shows a fallback instead of breaking Storybook
+  const loadFallback = `() => React.createElement('div', { style: { padding: 16, color: '#666', fontSize: 14 } }, 'Component could not be loaded (import error).')`;
+  const getDefault = `(m) => ({ default: m["${componentName}"] ?? m.default })`;
+  lines.push(`const ComponentRef = React.lazy(() => import(/* @vite-ignore */ "${importPath}").then(${getDefault}).catch(() => ({ default: ${loadFallback} })));`);
   lines.push("");
+
   lines.push(`const meta = {`);
   lines.push(`  title: ${JSON.stringify(title)},`);
   lines.push(`  component: ComponentRef,`);
@@ -1042,10 +1027,10 @@ function buildStoryFileContent(comp) {
     return lines.join("\n");
   }
 
-  // Generic variant-based stories — render real component with args (omit children for img/void)
+  // Wrap in Suspense so lazy load errors render fallback instead of crashing
   const renderLine = useReactNodeChildrenRender
-    ? `  render: (args) => React.createElement(ComponentRef, { ...args, children: args.children || React.createElement('span', null, 'Example') }),`
-    : `  render: (args) => <ComponentRef {...args} />,`;
+    ? `  render: (args) => React.createElement(React.Suspense, { fallback: null }, React.createElement(ComponentRef, { ...args, children: args.children || React.createElement('span', null, 'Example') })),`
+    : `  render: (args) => React.createElement(React.Suspense, { fallback: null }, React.createElement(ComponentRef, args)),`;
   const childrenArgLine = (label) => (!omitChildren && !useReactNodeChildrenRender ? `    children: ${JSON.stringify(label)},` : null);
 
   if (!variants.length) {

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

@@ -0,0 +1,221 @@
+#!/usr/bin/env node
+/**
+ * VDS — Storybook adapter: makes components load in Storybook by mocking
+ * problematic imports (server-only, next/*, etc.) and wiring Vite aliases.
+ *
+ * Run from project root: node vds-core/storybook-adapt.mjs
+ * Runs automatically as part of npm run vds:stories.
+ */
+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 MOCKS_DIR = path.join(STORYBOOK_DIR, "mocks");
+
+const IGNORE_DIRS = new Set(["node_modules", "dist", ".next", "build", ".storybook", "stories"]);
+
+// Packages that often break in Storybook (browser); we mock them so the component can load.
+const KNOWN_PROBLEMATIC = new Set([
+  "server-only",
+  "next/headers",
+  "next/navigation",
+  "next/server",
+  "next/cache",
+  "next/dist/...",
+]);
+
+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;
+}
+
+/** Extract import specifiers (package or path) from file content. */
+function extractImports(content) {
+  const specifiers = new Set();
+  const re = /from\s+["']([^"']+)["']/g;
+  let m;
+  while ((m = re.exec(content)) !== null) {
+    specifiers.add(m[1]);
+  }
+  const re2 = /import\s+["']([^"']+)["']\s*;/g;
+  while ((m = re2.exec(content)) !== null) {
+    specifiers.add(m[1]);
+  }
+  return specifiers;
+}
+
+/** Check if this import is known to break in Storybook. */
+function isProblematic(spec) {
+  if (spec.startsWith(".") || spec.startsWith("@/")) return false;
+  if (KNOWN_PROBLEMATIC.has(spec)) return true;
+  if (spec.startsWith("next/")) return true;
+  if (spec === "server-only") return true;
+  return false;
+}
+
+function collectProblematicImports(projectRoot) {
+  const srcDir = path.join(projectRoot, "src");
+  if (!fs.existsSync(srcDir)) return new Set();
+  const files = getAllSourceFiles(srcDir, srcDir).map((r) => path.join(projectRoot, "src", r));
+  const found = new Set();
+  for (const file of files) {
+    try {
+      const content = fs.readFileSync(file, "utf-8");
+      for (const spec of extractImports(content)) {
+        if (isProblematic(spec)) found.add(spec);
+      }
+    } catch (_) {}
+  }
+  return found;
+}
+
+/** Check relative imports resolve to a file; report unresolved. */
+function reportUnresolvedImports(projectRoot) {
+  const srcDir = path.join(projectRoot, "src");
+  if (!fs.existsSync(srcDir)) return;
+  const files = getAllSourceFiles(srcDir, srcDir).map((r) => path.join(projectRoot, "src", r));
+  for (const file of files) {
+    try {
+      const content = fs.readFileSync(file, "utf-8");
+      const dir = path.dirname(file);
+      for (const spec of extractImports(content)) {
+        if (!spec.startsWith(".")) continue;
+        const resolved = path.resolve(dir, spec);
+        const exists =
+          fs.existsSync(resolved) ||
+          [".tsx", ".ts", ".jsx", ".js"].some((ext) => fs.existsSync(resolved + ext)) ||
+          ["/index.tsx", "/index.ts", "/index.js"].some((ext) => fs.existsSync(resolved + ext));
+        if (!exists) {
+          const rel = path.relative(projectRoot, file);
+          console.warn("[VDS] Unresolved import in " + rel + ": " + spec);
+        }
+      }
+    } catch (_) {}
+  }
+}
+
+/** Filename-safe alias for a specifier (e.g. next/headers -> next-headers). */
+function mockFileName(spec) {
+  return spec.replace(/[@/\\]/g, "-") + ".js";
+}
+
+/** Generate mock module content for a given specifier. */
+function getMockContent(spec) {
+  if (spec === "server-only") {
+    return "// Mock for Storybook: server-only has no runtime export.\nexport {};\n";
+  }
+  if (spec.startsWith("next/headers") || spec === "next/headers") {
+    return `// Mock for Storybook: next/headers
+export function headers() { return new Headers(); }
+export function cookies() { return { get: () => ({ value: '' }), getAll: () => [] }; }
+export function draftMode() { return { isEnabled: false }; }
+`;
+  }
+  if (spec.startsWith("next/navigation") || spec === "next/navigation") {
+    return `// Mock for Storybook: next/navigation
+export function useRouter() {
+  return { push: () => {}, replace: () => {}, back: () => {}, forward: () => {}, refresh: () => {},
+    prefetch: () => {}, pathname: '/', query: {}, asPath: '/' };
+}
+export function usePathname() { return '/'; }
+export function useSearchParams() { return new URLSearchParams(); }
+export function useParams() { return {}; }
+export function redirect() {}
+export function notFound() {}
+export const permanentRedirect = redirect;
+`;
+  }
+  if (spec.startsWith("next/server") || spec === "next/server") {
+    return `// Mock for Storybook: next/server
+export function NextResponse() {}
+NextResponse.json = (v) => ({ body: JSON.stringify(v), headers: {} });
+NextResponse.redirect = () => ({});
+export function NextRequest() {}
+`;
+  }
+  if (spec.startsWith("next/cache") || spec === "next/cache") {
+    return `// Mock for Storybook: next/cache
+export function unstable_cache(fn) { return fn; }
+export function revalidateTag() {}
+export function revalidatePath() {}
+`;
+  }
+  return "// Mock for Storybook\nexport {};\nexport default {};\n";
+}
+
+function ensureMocksDir(projectRoot) {
+  const dir = path.join(projectRoot, ".storybook", "mocks");
+  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+  return dir;
+}
+
+function writeMocks(projectRoot, specifiers) {
+  const dir = ensureMocksDir(projectRoot);
+  for (const spec of specifiers) {
+    const name = mockFileName(spec);
+    const filePath = path.join(dir, name);
+    fs.writeFileSync(filePath, getMockContent(spec), "utf-8");
+  }
+}
+
+function getMainPath(projectRoot) {
+  const sb = path.join(projectRoot, ".storybook");
+  for (const name of ["main.ts", "main.tsx", "main.js", "main.jsx"]) {
+    const p = path.join(sb, name);
+    if (fs.existsSync(p)) return p;
+  }
+  return null;
+}
+
+/** Inject alias entries into .storybook/main.* viteFinal. */
+function injectAliases(projectRoot, specifiers) {
+  const mainPath = getMainPath(projectRoot);
+  if (!mainPath) return;
+  let content = fs.readFileSync(mainPath, "utf-8");
+  const firstMock = mockFileName([...specifiers][0]);
+  if (content.includes(".storybook/mocks") && content.includes(firstMock)) return;
+
+  const aliasLines = [];
+  for (const spec of specifiers) {
+    const mockRel = `.storybook/mocks/${mockFileName(spec)}`;
+    aliasLines.push(`"${spec.replace(/"/g, '\\"')}": path.resolve(process.cwd(), "${mockRel}")`);
+  }
+  const newAliases = aliasLines.join(",\n          ");
+  const pattern = /("@":\s*path\.resolve\(process\.cwd\(\),\s*"src"\))(\s*)(\})/;
+  if (pattern.test(content)) {
+    content = content.replace(pattern, `$1,\n          ${newAliases}$2$3`);
+    fs.writeFileSync(mainPath, content, "utf-8");
+  }
+}
+
+function main() {
+  const projectRoot = PROJECT_ROOT;
+  if (!fs.existsSync(path.join(projectRoot, ".storybook"))) {
+    console.log("[VDS] .storybook not found; skip storybook-adapt.");
+    return;
+  }
+  reportUnresolvedImports(projectRoot);
+  const problematic = collectProblematicImports(projectRoot);
+  if (problematic.size === 0) return;
+  writeMocks(projectRoot, problematic);
+  injectAliases(projectRoot, problematic);
+  console.log("[VDS] Storybook adapt: mocked", [...problematic].join(", "));
+}
+
+main();

package/vds-core-template/watch.mjs

@@ -14,6 +14,7 @@ function run() {
     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 });
+    execSync('node vds-core/storybook-adapt.mjs', { stdio: 'inherit', cwd: ROOT });
     console.log(`[VDS ${ts}] ✅ Design system güncellendi.`);
   } catch (e) {
     console.error(`[VDS ${ts}] ❌ Hata:`, e.message);