vibe-design-system 2.7.4 → 2.8.1

package/bin/init.js

@@ -149,19 +149,187 @@ function readPackageJson(projectRoot) {
   }
 }
 
-// ADIM 1 — Bağımlılık kontrolü (Storybook v8 + Tailwind v4 Vite)
-function needsStorybook(projectRoot) {
+/**
+ * Monorepo kök dizini tespiti.
+ * workspaces veya pnpm-workspace.yaml ya da apps/packages klasörü varsa monorepo sayılır.
+ * Bulunan paket/uygulama dizinlerini döndürür (boş array = monorepo değil).
+ */
+function detectMonorepoPackages(root) {
+  const pkg = readPackageJson(root);
+  if (pkg && pkg.workspaces) {
+    const patterns = Array.isArray(pkg.workspaces) ? pkg.workspaces : pkg.workspaces.packages ?? [];
+    const dirs = [];
+    for (const p of patterns) {
+      const base = p.replace(/\/\*.*$/, "");
+      const full = path.join(root, base);
+      if (fs.existsSync(full)) {
+        const entries = fs.readdirSync(full, { withFileTypes: true });
+        for (const e of entries) {
+          if (e.isDirectory() && fs.existsSync(path.join(full, e.name, "package.json"))) {
+            dirs.push(path.join(full, e.name));
+          }
+        }
+      }
+    }
+    if (dirs.length) return dirs;
+  }
+  const pnpmWs = path.join(root, "pnpm-workspace.yaml");
+  if (fs.existsSync(pnpmWs)) {
+    const content = fs.readFileSync(pnpmWs, "utf-8");
+    const dirs = [];
+    for (const line of content.split("\n")) {
+      const m = line.match(/^\s*-\s*['"]?(.+?)['"]?\s*$/);
+      if (m) {
+        const base = m[1].replace(/\/\*.*$/, "");
+        const full = path.join(root, base);
+        if (fs.existsSync(full)) {
+          const entries = fs.readdirSync(full, { withFileTypes: true });
+          for (const e of entries) {
+            if (e.isDirectory() && fs.existsSync(path.join(full, e.name, "package.json"))) {
+              dirs.push(path.join(full, e.name));
+            }
+          }
+        }
+      }
+    }
+    if (dirs.length) return dirs;
+  }
+  for (const candidate of ["apps", "packages"]) {
+    const full = path.join(root, candidate);
+    if (fs.existsSync(full)) {
+      const entries = fs.readdirSync(full, { withFileTypes: true })
+        .filter((e) => e.isDirectory() && fs.existsSync(path.join(full, e.name, "package.json")))
+        .map((e) => path.join(full, e.name));
+      if (entries.length) return entries;
+    }
+  }
+  return [];
+}
+
+/**
+ * Projenin hangi framework'ü kullandığını tespit eder.
+ * @returns {"nextjs"|"remix"|"vite"}
+ */
+function detectFramework(pkg) {
+  const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+  if (deps["next"]) return "nextjs";
+  if (deps["@remix-run/react"] || deps["@remix-run/node"]) return "remix";
+  return "vite";
+}
+
+/** Framework'e göre Storybook framework paket adı */
+function storybookFrameworkPackage(framework) {
+  if (framework === "nextjs") return "@storybook/nextjs";
+  return "@storybook/react-vite"; // vite & remix
+}
+
+/** Framework'e göre .storybook/main.ts içeriği */
+function buildStorybookMainTs(framework) {
+  if (framework === "nextjs") {
+    return `import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: [
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../app/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: ["@storybook/addon-essentials"],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+};
+
+export default config;
+`;
+  }
+  // vite (default) & remix
+  return `import type { StorybookConfig } from "@storybook/react-vite";
+import { mergeConfig } from "vite";
+import path from "path";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@storybook/addon-essentials"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          "@": path.resolve(process.cwd(), "src"),
+        },
+      },
+    });
+  },
+};
+
+export default config;
+`;
+}
+
+/** Framework'e göre CSS import path'i */
+function buildStorybookPreviewTs(framework, projectRoot) {
+  // CSS dosyasını bul
+  const cssCandidates = [
+    ["src/index.css", "../src/index.css"],
+    ["src/globals.css", "../src/globals.css"],
+    ["src/styles/globals.css", "../src/styles/globals.css"],
+    ["app/globals.css", "../app/globals.css"],
+  ];
+  let cssImport = '// CSS bulunamadı — projenizin global CSS dosyasını buraya ekleyin';
+  for (const [rel, importPath] of cssCandidates) {
+    if (fs.existsSync(path.join(projectRoot, rel))) {
+      cssImport = `import "${importPath}";`;
+      break;
+    }
+  }
+
+  return `import type { Preview } from "@storybook/react";
+import React from "react";
+${cssImport}
+
+const preview: Preview = {
+  parameters: {
+    layout: "fullscreen",
+    options: {
+      storySort: {
+        order: [
+          "Foundations",
+          ["Introduction", "Page to Components", "Colors", "Typography", "Brand", "Icons", "Component Suggestions", "Changelog"],
+          "Layout",
+          "Components",
+          "Actions",
+          "Data Display",
+          "Examples",
+        ],
+      },
+    },
+  },
+};
+
+export default preview;
+`;
+}
+
+// ADIM 1 — Bağımlılık kontrolü
+function needsStorybook(projectRoot, framework) {
   const pkg = readPackageJson(projectRoot);
   if (!pkg) return false;
   const dev = pkg.devDependencies || {};
-  return !(dev.storybook && dev["@storybook/react-vite"] && dev["@tailwindcss/vite"]);
+  const fwPkg = storybookFrameworkPackage(framework);
+  return !(dev.storybook && dev[fwPkg]);
 }
 
 // Storybook 8.6.x — aynı minor sürümde tutarak addon uyumluluk uyarısını önler
 const STORYBOOK_VERSION = "8.6.17";
 
-function installStorybook(projectRoot) {
-  console.log("📚 Storybook v8 ve @tailwindcss/vite kuruluyor...");
+function installStorybook(projectRoot, framework) {
+  const fwPkg = storybookFrameworkPackage(framework);
+  console.log(`📚 Storybook v8 (${fwPkg}) kuruluyor...`);
+  const extraDeps = framework === "vite" ? ["@tailwindcss/vite"] : [];
   const r = spawnSync(
     "npm",
     [
@@ -169,11 +337,11 @@ function installStorybook(projectRoot) {
       "--save-dev",
       "--save-exact",
       `storybook@${STORYBOOK_VERSION}`,
-      `@storybook/react-vite@${STORYBOOK_VERSION}`,
+      `${fwPkg}@${STORYBOOK_VERSION}`,
       `@storybook/react@${STORYBOOK_VERSION}`,
       `@storybook/addon-essentials@${STORYBOOK_VERSION}`,
       `@storybook/blocks@${STORYBOOK_VERSION}`,
-      "@tailwindcss/vite",
+      ...extraDeps,
     ],
     { cwd: projectRoot, stdio: "inherit", shell: false }
   );
@@ -183,18 +351,21 @@ function installStorybook(projectRoot) {
 }
 
 // ADIM 2 — .storybook/
-function ensureStorybook(projectRoot) {
+function ensureStorybook(projectRoot, framework) {
   const storybookDir = path.join(projectRoot, ".storybook");
   if (!fs.existsSync(storybookDir)) {
     fs.mkdirSync(storybookDir, { recursive: true });
     console.log("📁 .storybook/ oluşturuldu.");
   }
 
+  const mainTs = buildStorybookMainTs(framework);
   const mainPath = path.join(storybookDir, "main.ts");
-  fs.writeFileSync(mainPath, STORYBOOK_MAIN_TS, "utf-8");
-  console.log("📝 .storybook/main.ts yazıldı.");
+  fs.writeFileSync(mainPath, mainTs, "utf-8");
+  console.log(`📝 .storybook/main.ts yazıldı (framework: ${framework}).`);
+
+  const previewTs = buildStorybookPreviewTs(framework, projectRoot);
 
-  // preview.ts / preview.tsx — eski VDS template'lerini otomatik olarak yeni router'sız template'e migrate et.
+  // preview.ts / preview.tsx — eski VDS template'lerini migrate et; kullanıcıya ait preview'e dokunma.
   const previewCandidates = ["preview.tsx", "preview.ts", "preview.jsx", "preview.js"];
   const existingPreview = previewCandidates.find((name) =>
     fs.existsSync(path.join(storybookDir, name))
@@ -202,11 +373,9 @@ function ensureStorybook(projectRoot) {
   const previewPath = existingPreview ? path.join(storybookDir, existingPreview) : null;
 
   if (!previewPath) {
-    // Daha önce hiç preview yoksa, yeni template'i yaz.
-    fs.writeFileSync(path.join(storybookDir, "preview.ts"), STORYBOOK_PREVIEW_TS, "utf-8");
+    fs.writeFileSync(path.join(storybookDir, "preview.ts"), previewTs, "utf-8");
     console.log("📝 .storybook/preview.ts yazıldı.");
   } else {
-    // Eski VDS preview'lerini tespit edip otomatik migrate et; kullanıcıya ait preview'lere dokunma.
     try {
       const content = fs.readFileSync(previewPath, "utf-8");
       const looksLikeOldVdsPreview =
@@ -214,8 +383,8 @@ function ensureStorybook(projectRoot) {
         content.includes("const withRouter") ||
         content.includes("decorators: [withRouter");
       if (looksLikeOldVdsPreview) {
-        fs.writeFileSync(previewPath, STORYBOOK_PREVIEW_TS, "utf-8");
-        console.log("📝 .storybook/preview.* eski VDS şablonundan yeni router'sız şablona güncellendi.");
+        fs.writeFileSync(previewPath, previewTs, "utf-8");
+        console.log("📝 .storybook/preview.* eski VDS şablonundan yeni şablona güncellendi.");
       } else {
         console.log("ℹ️ .storybook/preview.* bulundu, kullanıcıya ait görünüyor; değiştirilmedi.");
       }
@@ -294,7 +463,7 @@ function ensureCursorrules(projectRoot) {
   console.log("📄 .cursorrules yazıldı.");
 }
 
-// ADIM 6 — src/stories/ (ve scan için gerekli src/components, src/pages)
+// ADIM 6 — src/stories/ oluştur (scan artık klasörü kendisi buluyor; zorla yaratmaya gerek yok)
 function ensureStoriesDir(projectRoot) {
   const srcDir = path.join(projectRoot, "src");
   if (!fs.existsSync(srcDir)) fs.mkdirSync(srcDir, { recursive: true });
@@ -303,15 +472,8 @@ function ensureStoriesDir(projectRoot) {
     fs.mkdirSync(storiesDir, { recursive: true });
     console.log("📁 src/stories/ oluşturuldu.");
   }
-  const componentsDir = path.join(srcDir, "components");
-  if (!fs.existsSync(componentsDir)) {
-    fs.mkdirSync(componentsDir, { recursive: true });
-    console.log("📁 src/components/ oluşturuldu (VDS taraması için).");
-  }
-  const pagesDir = path.join(srcDir, "pages");
-  if (!fs.existsSync(pagesDir)) {
-    fs.mkdirSync(pagesDir, { recursive: true });
-  }
+  // scan.mjs artık klasörü kendisi buluyor (src/components → components → app/components → ...)
+  // Klasör yoksa oluşturma — projeye ait mevcut yapıyı koruyalım.
 }
 
 // ADIM 7 — İlk tarama
@@ -364,6 +526,24 @@ function runStorybookAdapt(projectRoot) {
   if (r.status !== 0) process.exitCode = r.status ?? 1;
 }
 
+// ADIM 9b — vds.config.js oluştur (yoksa)
+function ensureVdsConfig(projectRoot) {
+  const configPath = path.join(projectRoot, "vds.config.js");
+  if (fs.existsSync(configPath)) return;
+  const content = `/**
+ * VDS Configuration — auto-created by VDS installer
+ * All fields are optional. Remove comments to activate overrides.
+ */
+module.exports = {
+  // skipList: ["MyHeavyPage"],    // Replace the default story skip list entirely
+  // extraSkipList: ["OrderCard"], // Add to the default skip list
+  // extraIgnoreDirs: ["fixtures"], // Additional dirs to skip during component scan
+};
+`;
+  fs.writeFileSync(configPath, content, "utf-8");
+  console.log("⚙️ vds.config.js oluşturuldu.");
+}
+
 // ADIM 9 — Storybook örnek dosyalarını sil
 function removeStorybookExamples(projectRoot) {
   const storiesDir = path.join(projectRoot, "src", "stories");
@@ -389,15 +569,35 @@ if (!pkg) {
   process.exit(1);
 }
 
+// Monorepo kök dizininde mi?
+const monorepoPackages = detectMonorepoPackages(projectRoot);
+if (monorepoPackages.length > 0 && pkg.workspaces) {
+  console.warn("⚠️  Bu dizin bir monorepo kök dizini gibi görünüyor.");
+  console.warn("   VDS'yi her uygulama klasöründe ayrı ayrı kurmanız gerekiyor.\n");
+  console.warn("   Tespit edilen paketler:");
+  for (const p of monorepoPackages) {
+    const rel = path.relative(projectRoot, p);
+    console.warn(`   → ${rel}`);
+  }
+  console.warn("\n   Örnek kullanım:");
+  const firstRel = path.relative(projectRoot, monorepoPackages[0]);
+  console.warn(`   cd ${firstRel} && npx vibe-design-system init`);
+  console.warn("\n   VDS'yi bu dizinden çalıştırmaya devam etmek istiyorsanız,");
+  console.warn("   VDS_COMPONENTS_DIR env değişkeni ile hedef klasörü belirtin.\n");
+}
+
+const framework = detectFramework(pkg);
+console.log(`🔍 Framework tespit edildi: ${framework}\n`);
+
 // ADIM 1
-if (needsStorybook(projectRoot)) {
-  installStorybook(projectRoot);
+if (needsStorybook(projectRoot, framework)) {
+  installStorybook(projectRoot, framework);
 } else {
   console.log("📚 Storybook zaten yüklü.");
 }
 
 // ADIM 2
-ensureStorybook(projectRoot);
+ensureStorybook(projectRoot, framework);
 
 // ADIM 3
 ensureVdsCore(projectRoot);
@@ -414,6 +614,9 @@ ensureStoriesDir(projectRoot);
 // ADIM 9 (örnek dosyaları taramadan önce silebiliriz; scan src/components ve src/pages tarar, src/stories değil)
 removeStorybookExamples(projectRoot);
 
+// ADIM 9b
+ensureVdsConfig(projectRoot);
+
 // ADIM 7
 runScan(projectRoot);
 runStoryGenerator(projectRoot);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.7.4",
+  "version": "2.8.1",
   "description": "Auto-generate design systems for vibe coding projects",
   "type": "module",
   "bin": {
@@ -38,4 +38,4 @@
     "typescript": "^5.8.3",
     "vite": "^5.4.19"
   }
-}
+}

package/vds-core-template/scan.mjs

@@ -26,12 +26,143 @@ const CLI_LOCALES = {
 };
 const CLI_LOCALE = (process.env.VDS_LOCALE === "tr" ? "tr" : "en");
 const cliT = (key, n) => CLI_LOCALES[CLI_LOCALE][key].replace("{n}", String(n));
-const SRC_DIR = path.join(PROJECT_ROOT, "src");
-const COMPONENTS_DIR = path.join(PROJECT_ROOT, "src", "components");
-const PAGES_DIR = path.join(PROJECT_ROOT, "src", "pages");
-const APP_DIR = path.join(PROJECT_ROOT, "src", "app");
 
-const IGNORE_DIRS = ["node_modules", "dist", ".next", "build", "vds-generated", ".storybook"];
+// ── Klasör çözücüler ─────────────────────────────────────────────────────────
+function resolveDir(envKey, candidates) {
+  if (process.env[envKey]) {
+    const d = path.resolve(PROJECT_ROOT, process.env[envKey]);
+    if (fs.existsSync(d)) return d;
+    console.warn(`[VDS] ${envKey}="${process.env[envKey]}" bulunamadı, fallback deneniyor.`);
+  }
+  for (const d of candidates) {
+    if (fs.existsSync(d)) return d;
+  }
+  return null;
+}
+
+const SRC_DIR = resolveDir("VDS_SRC_DIR", [
+  path.join(PROJECT_ROOT, "src"),
+  path.join(PROJECT_ROOT, "app"),
+  PROJECT_ROOT,
+]) || path.join(PROJECT_ROOT, "src");
+
+const COMPONENTS_DIR = resolveDir("VDS_COMPONENTS_DIR", [
+  path.join(PROJECT_ROOT, "src", "components"),
+  path.join(PROJECT_ROOT, "components"),
+  path.join(PROJECT_ROOT, "app", "components"),
+  path.join(PROJECT_ROOT, "src", "views"),
+  path.join(PROJECT_ROOT, "src", "modules"),
+]);
+
+const PAGES_DIR = resolveDir("VDS_PAGES_DIR", [
+  path.join(PROJECT_ROOT, "src", "pages"),
+  path.join(PROJECT_ROOT, "pages"),
+]);
+
+const APP_DIR = resolveDir("VDS_APP_DIR", [
+  path.join(PROJECT_ROOT, "src", "app"),
+  path.join(PROJECT_ROOT, "app"),
+]);
+
+// ── Monorepo detection ────────────────────────────────────────────────────────
+function detectMonorepoPackages(root) {
+  const pkgPath = path.join(root, "package.json");
+  if (fs.existsSync(pkgPath)) {
+    try {
+      const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+      if (pkg.workspaces) {
+        const patterns = Array.isArray(pkg.workspaces) ? pkg.workspaces : pkg.workspaces.packages ?? [];
+        const dirs = [];
+        for (const p of patterns) {
+          const base = p.replace(/\/\*.*$/, "");
+          const full = path.join(root, base);
+          if (fs.existsSync(full)) {
+            const entries = fs.readdirSync(full, { withFileTypes: true });
+            for (const e of entries) {
+              if (e.isDirectory()) dirs.push(path.join(full, e.name));
+            }
+          }
+        }
+        if (dirs.length) return dirs;
+      }
+    } catch (_) {}
+  }
+  const pnpmWs = path.join(root, "pnpm-workspace.yaml");
+  if (fs.existsSync(pnpmWs)) {
+    const content = fs.readFileSync(pnpmWs, "utf-8");
+    const dirs = [];
+    for (const line of content.split("\n")) {
+      const m = line.match(/^\s*-\s*['"]?(.+?)['"]?\s*$/);
+      if (m) {
+        const base = m[1].replace(/\/\*.*$/, "");
+        const full = path.join(root, base);
+        if (fs.existsSync(full)) {
+          const entries = fs.readdirSync(full, { withFileTypes: true });
+          for (const e of entries) {
+            if (e.isDirectory()) dirs.push(path.join(full, e.name));
+          }
+        }
+      }
+    }
+    if (dirs.length) return dirs;
+  }
+  for (const candidate of ["apps", "packages"]) {
+    const full = path.join(root, candidate);
+    if (fs.existsSync(full)) {
+      const entries = fs.readdirSync(full, { withFileTypes: true })
+        .filter((e) => e.isDirectory())
+        .map((e) => path.join(full, e.name));
+      if (entries.length) return entries;
+    }
+  }
+  return [];
+}
+
+if (COMPONENTS_DIR) {
+  console.log(`[VDS] Components: ${path.relative(PROJECT_ROOT, COMPONENTS_DIR)}`);
+} else {
+  const monorepoPackages = detectMonorepoPackages(PROJECT_ROOT);
+  if (monorepoPackages.length > 0) {
+    console.warn("[VDS] Bileşen klasörü bulunamadı — bu bir monorepo kök dizini gibi görünüyor.");
+    console.warn("[VDS] Tespit edilen paketler:");
+    for (const p of monorepoPackages) {
+      console.warn("  →", path.relative(PROJECT_ROOT, p));
+    }
+    console.warn("[VDS] Çözüm: VDS'yi her uygulama klasöründen ayrı ayrı çalıştırın:");
+    console.warn("  cd apps/web && node ../vds-core/scan.mjs");
+    console.warn("  ya da: VDS_COMPONENTS_DIR=apps/web/src/components node vds-core/scan.mjs");
+  } else {
+    console.warn("[VDS] Bileşen klasörü bulunamadı. Tarama foundations-only modda devam edecek.");
+    console.warn("[VDS] Çözüm: VDS_COMPONENTS_DIR env değişkeni ile klasör belirtin.");
+  }
+}
+
+// ── vds.config.js loader ──────────────────────────────────────────────────────
+function loadVdsConfig() {
+  const configPath = path.join(PROJECT_ROOT, "vds.config.js");
+  if (!fs.existsSync(configPath)) return {};
+  try {
+    const raw = fs.readFileSync(configPath, "utf-8");
+    const mod = { exports: {} };
+    // eslint-disable-next-line no-new-func
+    new Function("module", "exports", "require", raw)(mod, mod.exports, () => ({}));
+    const cfg = mod.exports.default ?? mod.exports;
+    return typeof cfg === "object" && cfg !== null ? cfg : {};
+  } catch (e) {
+    console.warn("[VDS] vds.config.js yüklenemedi:", e.message);
+    return {};
+  }
+}
+
+const VDS_CONFIG = loadVdsConfig();
+if (Object.keys(VDS_CONFIG).length > 0) {
+  console.log("[VDS] vds.config.js yüklendi:", Object.keys(VDS_CONFIG).join(", "));
+}
+
+const IGNORE_DIRS = [
+  "node_modules", "dist", ".next", "build", "vds-generated", ".storybook",
+  ...(VDS_CONFIG.extraIgnoreDirs ?? []),
+];
 const OUTPUT_FILE = path.join(PROJECT_ROOT, "vds-output.json");
 const PUBLIC_MANIFEST = path.join(PROJECT_ROOT, "public", "vds-output.json");
 const HISTORY_FILE = path.join(PROJECT_ROOT, "vds-history.json");
@@ -521,7 +652,7 @@ function extractFullElement(content, classNameMatchIndex, tagName) {
 /** Return set of component names already in src/components (so we don't suggest them again). */
 function getExistingComponentNames() {
   const names = new Set();
-  if (!fs.existsSync(COMPONENTS_DIR)) return names;
+  if (!COMPONENTS_DIR || !fs.existsSync(COMPONENTS_DIR)) return names;
   const walk = (dir) => {
     const entries = fs.readdirSync(dir, { withFileTypes: true });
     for (const e of entries) {
@@ -537,13 +668,12 @@ function getExistingComponentNames() {
   return names;
 }
 
-/** Scan src/pages and src/app for repeated visual-section patterns (className + 2+ children); return component suggestions. */
+/** Scan pages/app/components dirs for repeated visual-section patterns; return component suggestions. */
 function extractComponentSuggestions() {
-  const pageDirs = [
-    { dir: PAGES_DIR, prefix: "src/pages/" },
-    { dir: APP_DIR, prefix: "src/app/" },
-    { dir: COMPONENTS_DIR, prefix: "src/components/" },
-  ];
+  const pageDirs = [];
+  if (PAGES_DIR) pageDirs.push({ dir: PAGES_DIR, prefix: path.relative(PROJECT_ROOT, PAGES_DIR).replace(/\\/g, "/") + "/" });
+  if (APP_DIR && APP_DIR !== PAGES_DIR) pageDirs.push({ dir: APP_DIR, prefix: path.relative(PROJECT_ROOT, APP_DIR).replace(/\\/g, "/") + "/" });
+  if (COMPONENTS_DIR) pageDirs.push({ dir: COMPONENTS_DIR, prefix: path.relative(PROJECT_ROOT, COMPONENTS_DIR).replace(/\\/g, "/") + "/" });
   const allPageFiles = [];
   for (const { dir, prefix } of pageDirs) {
     if (!fs.existsSync(dir)) continue;
@@ -707,7 +837,7 @@ function extractUnreleasedSectionCandidates() {
   }));
 }
 
-const VDS_GENERATED_DIR = path.join(COMPONENTS_DIR, "vds-generated");
+const VDS_GENERATED_DIR = COMPONENTS_DIR ? path.join(COMPONENTS_DIR, "vds-generated") : null;
 
 /** Ensure component name is valid JS: no leading digits/special chars, PascalCase. */
 function sanitizeComponentName(name) {
@@ -805,6 +935,7 @@ function collectComponentTags(jsx) {
 /** Write extracted components with full JSX body; add Lucide and UI imports as needed. */
 function writeVdsGeneratedComponents(suggestions) {
   if (!Array.isArray(suggestions) || suggestions.length === 0) return [];
+  if (!VDS_GENERATED_DIR) return [];
   if (!fs.existsSync(VDS_GENERATED_DIR)) fs.mkdirSync(VDS_GENERATED_DIR, { recursive: true });
   const usedNames = new Set();
   const entries = [];
@@ -1000,45 +1131,64 @@ function getTailwindExtendColors() {
   }
 }
 
-/** Resolve Tailwind theme for boxShadow, spacing, screens, zIndex, motion. Uses resolveConfig when available. */
+function parseTailwindThemeFromText(raw) {
+  const result = { shadows: {}, spacing: {}, breakpoints: {}, zIndex: {}, transitionDuration: {}, transitionTimingFunction: {}, animation: {}, colors: {} };
+  try {
+    const spacingM = raw.match(/spacing\s*:\s*\{([\s\S]*?)\}/);
+    if (spacingM) {
+      const re = /["']?([\w.-]+)["']?\s*:\s*["']([^"']+)["']/g;
+      let m;
+      while ((m = re.exec(spacingM[1])) !== null) result.spacing[m[1]] = m[2];
+    }
+    const screensM = raw.match(/screens\s*:\s*\{([\s\S]*?)\}/);
+    if (screensM) {
+      const re = /["']?([\w.-]+)["']?\s*:\s*["']([^"']+)["']/g;
+      let m;
+      while ((m = re.exec(screensM[1])) !== null) result.breakpoints[m[1]] = m[2];
+    }
+  } catch (_) {}
+  return result;
+}
+
+/** Resolve Tailwind theme for boxShadow, spacing, screens, zIndex, motion. Uses resolveConfig for .js/.mjs, text-parse for .ts. */
 function getTailwindTheme() {
   const empty = { shadows: {}, spacing: {}, breakpoints: {}, zIndex: {}, transitionDuration: {}, transitionTimingFunction: {}, animation: {}, colors: {} };
-  try {
-    const resolveConfig = projectRequire("tailwindcss/resolveConfig");
-    let config = { content: [{ raw: "", extension: "html" }], theme: {} };
-    const twPath = path.join(PROJECT_ROOT, "tailwind.config.js");
-    const twPathMjs = path.join(PROJECT_ROOT, "tailwind.config.mjs");
-    if (fs.existsSync(twPath)) {
-      config = projectRequire(twPath);
-      if (config && typeof config === "object" && config.default) config = config.default;
-    } else if (fs.existsSync(twPathMjs)) {
-      config = projectRequire(twPathMjs);
+  const twPath = path.join(PROJECT_ROOT, "tailwind.config.js");
+  const twPathMjs = path.join(PROJECT_ROOT, "tailwind.config.mjs");
+  const twPathTs = path.join(PROJECT_ROOT, "tailwind.config.ts");
+
+  if (fs.existsSync(twPath) || fs.existsSync(twPathMjs)) {
+    try {
+      const resolveConfig = projectRequire("tailwindcss/resolveConfig");
+      const pathToUse = fs.existsSync(twPath) ? twPath : twPathMjs;
+      let config = projectRequire(pathToUse);
       if (config && typeof config === "object" && config.default) config = config.default;
+      const resolved = resolveConfig(config);
+      const theme = resolved.theme || {};
+      const toObj = (v) => (v && typeof v === "object" && !Array.isArray(v) ? v : {});
+      return {
+        shadows: toObj(theme.boxShadow),
+        spacing: toObj(theme.spacing),
+        breakpoints: toObj(theme.screens),
+        zIndex: toObj(theme.zIndex),
+        transitionDuration: toObj(theme.transitionDuration),
+        transitionTimingFunction: toObj(theme.transitionTimingFunction),
+        animation: toObj(theme.animation),
+        colors: toObj(theme.colors),
+      };
+    } catch (_) {
+      return empty;
     }
-    const resolved = resolveConfig(config);
-    const theme = resolved.theme || {};
-    const boxShadow = theme.boxShadow;
-    const spacing = theme.spacing;
-    const screens = theme.screens;
-    const zIndex = theme.zIndex;
-    const transitionDuration = theme.transitionDuration;
-    const transitionTimingFunction = theme.transitionTimingFunction;
-    const animation = theme.animation;
-    const themeColors = theme.colors;
-    const toObj = (v) => (v && typeof v === "object" && !Array.isArray(v) ? v : {});
-    return {
-      shadows: toObj(boxShadow),
-      spacing: toObj(spacing),
-      breakpoints: toObj(screens),
-      zIndex: toObj(zIndex),
-      transitionDuration: toObj(transitionDuration),
-      transitionTimingFunction: toObj(transitionTimingFunction),
-      animation: toObj(animation),
-      colors: toObj(themeColors),
-    };
-  } catch (_) {
-    return empty;
   }
+
+  if (fs.existsSync(twPathTs)) {
+    try {
+      const raw = fs.readFileSync(twPathTs, "utf-8");
+      return parseTailwindThemeFromText(raw);
+    } catch (_) {}
+  }
+
+  return empty;
 }
 
 function extractFoundations() {
@@ -1364,11 +1514,10 @@ function extractButtonUsage() {
 }
 
 function scan() {
-  if (!fs.existsSync(COMPONENTS_DIR)) {
-    console.error(CLI_LOCALES[CLI_LOCALE].componentsNotFound);
-    process.exit(1);
+  const relativeFiles = COMPONENTS_DIR ? getAllComponentFiles(COMPONENTS_DIR) : [];
+  if (!COMPONENTS_DIR) {
+    console.warn("[VDS] " + CLI_LOCALES[CLI_LOCALE].componentsNotFound);
   }
-  const relativeFiles = getAllComponentFiles(COMPONENTS_DIR);
   const results = [];
   for (const rel of relativeFiles) {
     const fullPath = path.join(COMPONENTS_DIR, rel);
@@ -1390,7 +1539,7 @@ function scan() {
     const tokens = extractTailwindTokens(content);
     results.push({ file: rel, name, group, category, description, tokens });
   }
-  if (fs.existsSync(PAGES_DIR)) {
+  if (PAGES_DIR && fs.existsSync(PAGES_DIR)) {
     const pageFiles = getAllComponentFiles(PAGES_DIR);
     for (const rel of pageFiles) {
       const fullPath = path.join(PAGES_DIR, rel);
@@ -1398,7 +1547,7 @@ function scan() {
       const name = humanizeName(rel);
       const tokens = extractTailwindTokens(content);
       results.push({
-        file: "pages/" + rel,
+        file: path.relative(PROJECT_ROOT, PAGES_DIR).replace(/\\/g, "/") + "/" + rel,
         name,
         group: "Pages",
         category: "Pages",
@@ -1548,10 +1697,7 @@ const isCompare = process.argv.includes("--compare");
 if (isCompare) {
   runCompare();
 } else if (isWatch) {
-  if (!fs.existsSync(COMPONENTS_DIR)) {
-    console.error(CLI_LOCALES[CLI_LOCALE].componentsNotFound);
-    process.exit(1);
-  }
+  const watchDir = COMPONENTS_DIR || SRC_DIR;
   let debounceTimer = null;
   let lastChangedFiles = new Set();
 
@@ -1567,23 +1713,23 @@ if (isCompare) {
       }
     }
     scan();
-    console.log("[VDS] Watch: src/components (.tsx, .jsx). Scan complete.");
+    console.log(`[VDS] Watch: ${path.relative(PROJECT_ROOT, watchDir)} (.tsx, .jsx). Scan complete.`);
     const url = vdsDashboardUrl();
     console.log("[VDS] Dashboard: " + formatClickableLink(url) + "\n");
   }
 
   function scheduleScan(filename) {
     if (!filename || !/\.(tsx|jsx)$/i.test(filename)) return;
-    lastChangedFiles.add(path.join(COMPONENTS_DIR, filename));
+    lastChangedFiles.add(path.join(watchDir, filename));
     clearTimeout(debounceTimer);
     debounceTimer = setTimeout(runScan, 300);
   }
 
-  console.log("[VDS] Watching src/components for .tsx / .jsx changes…\n");
+  console.log(`[VDS] Watching ${path.relative(PROJECT_ROOT, watchDir)} for .tsx / .jsx changes…\n`);
   runScan();
 
   try {
-    const watcher = fs.watch(COMPONENTS_DIR, { recursive: true }, (eventType, filename) => {
+    const watcher = fs.watch(watchDir, { recursive: true }, (eventType, filename) => {
       if (filename) scheduleScan(filename);
     });
     process.on("SIGINT", () => {

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

@@ -17,6 +17,25 @@ const PROJECT_ROOT = path.join(__dirname, "..");
 const SRC_DIR = path.join(PROJECT_ROOT, "src");
 const STORYBOOK_DIR = path.join(PROJECT_ROOT, ".storybook");
 
+// ── vds.config.js loader ──────────────────────────────────────────────────────
+function loadVdsConfig() {
+  const configPath = path.join(PROJECT_ROOT, "vds.config.js");
+  if (!fs.existsSync(configPath)) return {};
+  try {
+    const raw = fs.readFileSync(configPath, "utf-8");
+    const mod = { exports: {} };
+    // eslint-disable-next-line no-new-func
+    new Function("module", "exports", "require", raw)(mod, mod.exports, () => ({}));
+    const cfg = mod.exports.default ?? mod.exports;
+    return typeof cfg === "object" && cfg !== null ? cfg : {};
+  } catch (e) {
+    console.warn("[VDS] vds.config.js yüklenemedi:", e.message);
+    return {};
+  }
+}
+
+const VDS_CONFIG = loadVdsConfig();
+
 const HOOK_TO_PROVIDER = {
   useTimer: "TimerProvider",
   useCircles: "CirclesProvider",
@@ -25,8 +44,42 @@ const HOOK_TO_PROVIDER = {
   useSearch: "SearchProvider",
   useCms: "CmsProvider",
   useContent: "ContentProvider",
+  ...(VDS_CONFIG.hookProviders ?? {}),
 };
 
+const STANDARD_HOOKS = new Set([
+  "useState", "useEffect", "useCallback", "useMemo", "useRef", "useContext",
+  "useReducer", "useLayoutEffect", "useImperativeHandle", "useDebugValue",
+  "useDeferredValue", "useId", "useInsertionEffect", "useSyncExternalStore",
+  "useTransition", "useOptimistic", "useFormState", "useFormStatus", "useActionState",
+  "useNavigate", "useParams", "useLocation", "useMatch", "useSearchParams",
+  "useRouteError", "useLoaderData", "useActionData", "useSubmit", "useFetcher",
+  "useNavigation", "useRevalidator", "useRouteLoaderData", "useMatches", "useHref",
+  "useOutlet", "useOutletContext", "useResolvedPath", "useBlocker",
+  "useQuery", "useMutation", "useInfiniteQuery", "useQueryClient",
+  "useSuspenseQuery", "useSuspenseInfiniteQuery", "usePrefetchQuery",
+  "useIsFetching", "useIsMutating",
+  "useForm", "useFormContext", "useController", "useWatch", "useFieldArray",
+  "useStore", "useShallow",
+  "useSelector", "useDispatch",
+  "useTranslation", "useI18n", "useLocale",
+  "useArgs",
+  "useMotionValue", "useAnimate", "useAnimation", "useSpring", "useScroll",
+  "useInView", "useReducedMotion", "useWillChange", "useVelocity",
+  "useMediaQuery", "useBreakpoint", "useTheme",
+  "useToast", "useDisclosure", "useBoolean",
+  "useDraggable", "useDroppable", "useSortable",
+  "useVirtualizer", "useWindowVirtualizer",
+  "useHotkeys", "useEventListener", "useOnClickOutside",
+  "useLocalStorage", "useSessionStorage", "useCookies",
+  "useDebounce", "useThrottle", "useInterval", "useTimeout",
+  "useWindowSize", "useResizeObserver", "useIntersectionObserver",
+  "useCopyToClipboard", "useClipboard",
+  "useSWR", "useSWRMutation",
+  "useCombobox", "useSelect", "useMultipleSelection",
+  "useFloating", "useInteractions", "useMergeRefs",
+]);
+
 const IGNORE_DIRS = new Set(["node_modules", "dist", ".next", "build", ".storybook", "stories"]);
 
 function getAllSourceFiles(dir, baseDir = dir) {
@@ -48,9 +101,19 @@ function getAllSourceFiles(dir, baseDir = dir) {
 
 function detectHooksInFile(content) {
   const found = new Set();
+  // 1. Always check known/configured hook→provider map
   for (const hook of Object.keys(HOOK_TO_PROVIDER)) {
     if (new RegExp("\\b" + hook + "\\b").test(content)) found.add(hook);
   }
+  // 2. Auto-detect any custom hook call (use[A-Z]\w+) not in the standard exclusion list.
+  const callRe = /\buse([A-Z]\w*)\s*[(<]/g;
+  let m;
+  while ((m = callRe.exec(content)) !== null) {
+    const hookName = "use" + m[1];
+    if (!STANDARD_HOOKS.has(hookName) && !found.has(hookName)) {
+      found.add(hookName);
+    }
+  }
   return found;
 }
 
@@ -107,6 +170,40 @@ function getPreviewPath(projectRoot) {
   return null;
 }
 
+// React Router hooks that require a Router wrapper in Storybook
+const ROUTER_HOOKS = new Set([
+  "useLocation", "useNavigate", "useParams", "useSearchParams",
+  "useMatch", "useHref", "useResolvedPath", "useOutlet", "useOutletContext",
+  "useMatches", "useRouteError", "useNavigation", "useRevalidator",
+]);
+
+function detectRouterPackage(projectRoot) {
+  const pkgPath = path.join(projectRoot, "package.json");
+  if (!fs.existsSync(pkgPath)) return null;
+  try {
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+    if (deps["react-router-dom"]) return "react-router-dom";
+    if (deps["react-router"]) return "react-router";
+  } catch (_) {}
+  return null;
+}
+
+function projectUsesRouterHooks(projectRoot) {
+  const srcDir = path.join(projectRoot, "src");
+  if (!fs.existsSync(srcDir)) return false;
+  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");
+      for (const hook of ROUTER_HOOKS) {
+        if (new RegExp("\\b" + hook + "\\s*[(<(]").test(content)) return true;
+      }
+    } catch (_) {}
+  }
+  return false;
+}
+
 /** Detect if project uses react-dnd (useDrag, useDrop, or import from react-dnd). */
 function detectReactDnd(projectRoot) {
   const srcDir = path.join(projectRoot, "src");
@@ -168,6 +265,12 @@ function collectProvidersAndWarnings(projectRoot) {
       hooksWithoutProvider.add(hook);
     }
   }
+  // MemoryRouter: wrap components that use React Router hooks
+  const routerPackage = detectRouterPackage(projectRoot);
+  if (routerPackage && projectUsesRouterHooks(projectRoot) && !providersToAdd.some((p) => p.name === "MemoryRouter")) {
+    providersToAdd.unshift({ name: "MemoryRouter", importPath: routerPackage, props: "{ initialEntries: [\"/\"] }" });
+    console.log("[VDS] React Router tespit edildi → MemoryRouter decorator ekleniyor.");
+  }
   if (detectReactDnd(projectRoot) && !providersToAdd.some((p) => p.name === "DndProvider")) {
     providersToAdd.unshift({
       name: "DndProvider",

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

@@ -25,8 +25,27 @@ let FOUNDATIONS_DATA = null;
 
 // CSS is loaded from .storybook/preview.tsx — never add CSS import to story files.
 
+// --- vds.config.js loader ---
+function loadVdsConfig() {
+  const configPath = path.join(PROJECT_ROOT, "vds.config.js");
+  if (!fs.existsSync(configPath)) return {};
+  try {
+    const raw = fs.readFileSync(configPath, "utf-8");
+    const mod = { exports: {} };
+    // eslint-disable-next-line no-new-func
+    new Function("module", "exports", "require", raw)(mod, mod.exports, () => ({}));
+    const cfg = mod.exports.default ?? mod.exports;
+    return typeof cfg === "object" && cfg !== null ? cfg : {};
+  } catch (e) {
+    console.warn("[VDS] vds.config.js yüklenemedi:", e.message);
+    return {};
+  }
+}
+
+const VDS_CONFIG = loadVdsConfig();
+
 // Components we don't want to auto-generate stories for (project-specific dashboards, heavy UIs, etc.)
-const SKIP_LIST = [
+const DEFAULT_SKIP_LIST = [
   "AnalysisDashboard",
   "ComponentLibrary",
   "EnterprisePushPanel",
@@ -54,6 +73,12 @@ const SKIP_LIST = [
   "Button",
 ];
 
+// Merge default with project-specific overrides from vds.config.js
+// vds.config.js can set:  skipList (array, replaces default) or extraSkipList (array, appends)
+const SKIP_LIST = VDS_CONFIG.skipList
+  ? [...VDS_CONFIG.skipList]
+  : [...DEFAULT_SKIP_LIST, ...(VDS_CONFIG.extraSkipList ?? [])];
+
 /** shadcn/ui composite component recipes: component name → imports + render. */
 const RECIPES = {
   Accordion: {

package/vds-core-template/watch.mjs

@@ -1,10 +1,20 @@
 #!/usr/bin/env node
-import { watch } from 'fs';
+import { watch, existsSync } from 'fs';
 import { execSync } from 'child_process';
 import { resolve } from 'path';
 
 const ROOT = resolve(process.cwd());
-const SRC = resolve(ROOT, 'src');
+
+// Watch the first directory that exists: src/, app/, or project root
+function resolveWatchDir() {
+  for (const candidate of ['src', 'app']) {
+    const full = resolve(ROOT, candidate);
+    if (existsSync(full)) return full;
+  }
+  return ROOT;
+}
+
+const WATCH_DIR = resolveWatchDir();
 let timeout = null;
 
 function run() {
@@ -14,7 +24,9 @@ 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 });
+    if (existsSync(resolve(ROOT, 'vds-core/storybook-adapt.mjs'))) {
+      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);
@@ -25,7 +37,7 @@ function onFileChange(eventType, filename) {
   if (!filename) return;
   if (filename.includes('stories/')) return;
   if (filename.includes('vds-output')) return;
-  if (!filename.endsWith('.tsx') && !filename.endsWith('.ts') && 
+  if (!filename.endsWith('.tsx') && !filename.endsWith('.ts') &&
       !filename.endsWith('.css') && !filename.endsWith('.js')) return;
   console.log(`[VDS] Değişiklik: ${filename}`);
   clearTimeout(timeout);
@@ -33,6 +45,6 @@ function onFileChange(eventType, filename) {
 }
 
 run();
-console.log('[VDS] 👀 src/ klasörü izleniyor...');
+console.log(`[VDS] 👀 ${WATCH_DIR.replace(ROOT + '/', '')}/ klasörü izleniyor...`);
 console.log('[VDS] Durdurmak için Ctrl+C\n');
-watch(SRC, { recursive: true }, onFileChange);
+watch(WATCH_DIR, { recursive: true }, onFileChange);