vibe-design-system 2.8.38 → 2.8.40

package/bin/init.js

@@ -316,6 +316,12 @@ function buildStorybookPreviewTs(framework, projectRoot) {
     ["src/globals.css", "../src/globals.css"],
     ["src/styles/globals.css", "../src/styles/globals.css"],
     ["app/globals.css", "../app/globals.css"],
+    // Fullstack / monorepo patterns (client/, frontend/, web/)
+    ["client/src/index.css", "../client/src/index.css"],
+    ["client/src/globals.css", "../client/src/globals.css"],
+    ["frontend/src/index.css", "../frontend/src/index.css"],
+    ["frontend/src/globals.css", "../frontend/src/globals.css"],
+    ["web/src/index.css", "../web/src/index.css"],
   ];
   let cssImport = '// CSS bulunamadı — projenizin global CSS dosyasını buraya ekleyin';
   for (const [rel, importPath] of cssCandidates) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.8.38",
+  "version": "2.8.40",
   "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");

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

@@ -206,6 +206,52 @@ function injectAliases(projectRoot, specifiers) {
 
 /** Inject resolve.dedupe into .storybook/main.* viteFinal to prevent multiple React instances.
  *  Multiple React instances cause "Cannot read properties of null (reading 'useRef')" at MemoryRouter. */
+/** Read vite.config.ts/js and extract path.resolve alias entries.
+ *  Injects any missing aliases into .storybook/main.ts viteFinal. */
+function injectViteConfigAliases(projectRoot) {
+  const mainPath = getMainPath(projectRoot);
+  if (!mainPath) return;
+
+  // Find the project's vite config
+  const viteConfigCandidates = ["vite.config.ts", "vite.config.js", "vite.config.mts", "vite.config.mjs"];
+  let viteConfigContent = null;
+  for (const name of viteConfigCandidates) {
+    const p = path.join(projectRoot, name);
+    if (fs.existsSync(p)) { viteConfigContent = fs.readFileSync(p, "utf-8"); break; }
+  }
+  if (!viteConfigContent) return;
+
+  // Extract alias entries like: "@shared": path.resolve(..., "shared")
+  const aliasRe = /["'](@[^"']+)["']\s*:\s*path\.resolve\([^)]*,\s*["']([^"']+)["']\s*\)/g;
+  const viteAliases = {};
+  let m;
+  while ((m = aliasRe.exec(viteConfigContent)) !== null) {
+    viteAliases[m[1]] = m[2]; // e.g. "@shared" -> "shared"
+  }
+  if (Object.keys(viteAliases).length === 0) return;
+
+  // Read current main.ts
+  let mainContent = fs.readFileSync(mainPath, "utf-8");
+
+  // Find which aliases are missing
+  const missingAliases = Object.entries(viteAliases).filter(([key]) => !mainContent.includes(`"${key}"`));
+  if (missingAliases.length === 0) return;
+
+  // Inject missing aliases into the existing alias block
+  const aliasBlockRe = /(\balias\s*:\s*\{)([^}]*)(\})/;
+  if (!aliasBlockRe.test(mainContent)) return;
+
+  const additions = missingAliases
+    .map(([key, dir]) => `\n          "${key}": path.resolve(process.cwd(), "${dir}"),`)
+    .join("");
+
+  mainContent = mainContent.replace(aliasBlockRe, (_, open, body, close) =>
+    `${open}${body}${additions}\n        ${close}`
+  );
+  fs.writeFileSync(mainPath, mainContent, "utf-8");
+  console.log(`[VDS] Storybook adapt: injected vite aliases: ${missingAliases.map(([k]) => k).join(", ")}`);
+}
+
 function injectDedupe(projectRoot) {
   const mainPath = getMainPath(projectRoot);
   if (!mainPath) return;
@@ -231,6 +277,8 @@ function main() {
   }
   // Always inject dedupe — prevents "useRef null" crashes from multiple React instances
   injectDedupe(projectRoot);
+  // Propagate aliases from project's vite.config.ts to Storybook
+  injectViteConfigAliases(projectRoot);
   reportUnresolvedImports(projectRoot);
   const problematic = collectProblematicImports(projectRoot);
   if (problematic.size === 0) return;