vibe-design-system 2.8.0 → 2.8.1

package/package.json

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

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

@@ -170,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");
@@ -231,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",