vibe-design-system 2.8.36 → 2.8.39

package/bin/init.js

@@ -223,14 +223,45 @@ function detectFramework(pkg) {
   return "vite";
 }
 
+/** Vite 7+ kullanılıyorsa Storybook 8 peer dep çakışır.
+ *  .npmrc'ye legacy-peer-deps=true ekleyerek tüm npm komutlarını bağışık hale getirir. */
+function ensureLegacyPeerDepsIfNeeded(projectRoot, pkg) {
+  const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+  const viteVersion = allDeps["vite"] || "";
+  // "^7.x", "~7.x", "7.x" gibi tüm Vite 7+ versiyonlarını yakala
+  const isVite7Plus = /^\^?~?[7-9]\d*\./.test(viteVersion) || /^\^?~?[1-9]\d+\./.test(viteVersion);
+  if (!isVite7Plus) return;
+  const npmrcPath = path.join(projectRoot, ".npmrc");
+  let content = fs.existsSync(npmrcPath) ? fs.readFileSync(npmrcPath, "utf-8") : "";
+  if (content.includes("legacy-peer-deps")) return; // idempotent
+  content = content ? content.trimEnd() + "\nlegacy-peer-deps=true\n" : "legacy-peer-deps=true\n";
+  fs.writeFileSync(npmrcPath, content, "utf-8");
+  console.log("📝 .npmrc: legacy-peer-deps=true eklendi (Vite 7+ / Storybook 8 uyumluluk).");
+}
+
 /** Framework'e göre Storybook framework paket adı */
 function storybookFrameworkPackage(framework) {
   if (framework === "nextjs") return "@storybook/nextjs";
   return "@storybook/react-vite"; // vite & remix
 }
 
+/** Projenin gerçek frontend src dizinini tespit eder.
+ *  Fullstack projelerde (client/, frontend/, web/) doğru alias için gerekli. */
+function detectFrontendSrcDir(projectRoot) {
+  // Fullstack / monorepo: frontend ayrı bir klasörde olabilir
+  const candidates = [
+    "client/src",
+    "frontend/src",
+    "web/src",
+  ];
+  for (const c of candidates) {
+    if (fs.existsSync(path.join(projectRoot, c))) return c;
+  }
+  return "src"; // varsayılan
+}
+
 /** Framework'e göre .storybook/main.ts içeriği */
-function buildStorybookMainTs(framework) {
+function buildStorybookMainTs(framework, projectRoot) {
   if (framework === "nextjs") {
     return `import type { StorybookConfig } from "@storybook/nextjs";
 
@@ -250,6 +281,7 @@ export default config;
 `;
   }
   // vite (default) & remix
+  const srcDir = detectFrontendSrcDir(projectRoot || process.cwd());
   return `import type { StorybookConfig } from "@storybook/react-vite";
 import { mergeConfig } from "vite";
 import path from "path";
@@ -265,7 +297,7 @@ const config: StorybookConfig = {
     return mergeConfig(config, {
       resolve: {
         alias: {
-          "@": path.resolve(process.cwd(), "src"),
+          "@": path.resolve(process.cwd(), "${srcDir}"),
         },
       },
     });
@@ -365,10 +397,11 @@ function ensureStorybook(projectRoot, framework) {
     console.log("📁 .storybook/ oluşturuldu.");
   }
 
-  const mainTs = buildStorybookMainTs(framework);
+  const mainTs = buildStorybookMainTs(framework, projectRoot);
   const mainPath = path.join(storybookDir, "main.ts");
   fs.writeFileSync(mainPath, mainTs, "utf-8");
-  console.log(`📝 .storybook/main.ts yazıldı (framework: ${framework}).`);
+  const detectedSrc = detectFrontendSrcDir(projectRoot);
+  console.log(`📝 .storybook/main.ts yazıldı (framework: ${framework}, @ alias: ${detectedSrc}).`);
 
   const previewTs = buildStorybookPreviewTs(framework, projectRoot);
 
@@ -612,6 +645,9 @@ if (monorepoPackages.length > 0 && pkg.workspaces) {
 const framework = detectFramework(pkg);
 console.log(`🔍 Framework tespit edildi: ${framework}\n`);
 
+// Vite 7+ projelerinde Storybook 8 peer dep çakışmasını önle
+ensureLegacyPeerDepsIfNeeded(projectRoot, pkg);
+
 // ADIM 1
 if (needsStorybook(projectRoot, framework)) {
   installStorybook(projectRoot, framework);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.8.36",
+  "version": "2.8.39",
   "description": "Auto-generate design systems for vibe coding projects",
   "homepage": "https://vibedesign.tech",
   "repository": {

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

@@ -14,9 +14,18 @@ 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");
 
+/** Projenin gerçek frontend src dizinini tespit eder (fullstack/monorepo desteği). */
+function detectSrcDir(root) {
+  for (const candidate of ["client/src", "frontend/src", "web/src"]) {
+    if (fs.existsSync(path.join(root, candidate))) return path.join(root, candidate);
+  }
+  return path.join(root, "src");
+}
+
+const SRC_DIR = detectSrcDir(PROJECT_ROOT);
+
 // ── vds.config.js loader ──────────────────────────────────────────────────────
 function loadVdsConfig() {
   const configPath = path.join(PROJECT_ROOT, "vds.config.js");
@@ -119,8 +128,9 @@ function detectHooksInFile(content) {
 
 /** 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 srcDir = detectSrcDir(projectRoot);
+  const srcRel = path.relative(projectRoot, srcDir).replace(/\\/g, "/");
+  const files = getAllSourceFiles(srcDir, srcDir).map((r) => path.join(srcRel, r));
   const byFile = new Map();
   for (const rel of files) {
     const full = path.join(projectRoot, rel);
@@ -135,8 +145,9 @@ function detectHooksUsedInProject(projectRoot) {
 
 /** Find file that exports providerName (e.g. TimerProvider). If hookName is given, prefer a file that also contains that hook (e.g. context/SidebarContext.tsx for useSidebar over ui/sidebar). */
 function findProviderExportPath(projectRoot, providerName, hookName) {
-  const srcDir = path.join(projectRoot, "src");
-  const files = getAllSourceFiles(srcDir, srcDir).map((r) => path.join("src", r));
+  const srcDir = detectSrcDir(projectRoot);
+  const srcRel = path.relative(projectRoot, srcDir).replace(/\\/g, "/");
+  const files = getAllSourceFiles(srcDir, srcDir).map((r) => path.join(srcRel, r));
   const exportRe = new RegExp(
     "export\\s+(?:default\\s+)?(?:const|function|class)\\s+" + providerName + "\\b|export\\s*\\{[^}]*\\b" + providerName + "\\b[^}]*\\}"
   );
@@ -146,7 +157,8 @@ function findProviderExportPath(projectRoot, providerName, hookName) {
     try {
       const content = fs.readFileSync(full, "utf-8");
       if (exportRe.test(content)) {
-        const withoutExt = rel.replace(/\.(tsx?|jsx?)$/i, "").replace(/^src\/?/, "");
+        // Strip the src prefix (could be "src", "client/src", "frontend/src", etc.)
+        const withoutExt = rel.replace(/\.(tsx?|jsx?)$/i, "").replace(new RegExp("^" + srcRel.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "\\/?"), "");
         const pathForImport = "@/" + withoutExt;
         const hasHook = hookName && new RegExp("\\b" + hookName + "\\b").test(content);
         candidates.push({ pathForImport, hasHook });
@@ -190,9 +202,9 @@ function detectRouterPackage(projectRoot) {
 }
 
 function projectUsesRouterHooks(projectRoot) {
-  const srcDir = path.join(projectRoot, "src");
+  const srcDir = detectSrcDir(projectRoot);
   if (!fs.existsSync(srcDir)) return false;
-  const files = getAllSourceFiles(srcDir, srcDir).map((r) => path.join(projectRoot, "src", r));
+  const files = getAllSourceFiles(srcDir, srcDir).map((r) => path.join(srcDir, r));
   for (const file of files) {
     try {
       const content = fs.readFileSync(file, "utf-8");
@@ -206,8 +218,8 @@ function projectUsesRouterHooks(projectRoot) {
 
 /** 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));
+  const srcDir = detectSrcDir(projectRoot);
+  const files = getAllSourceFiles(srcDir, srcDir).map((r) => path.join(srcDir, r));
   for (const full of files) {
     try {
       const content = fs.readFileSync(full, "utf-8");