vibe-design-system 2.5.27 → 2.5.29

package/package.json

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

package/vds-core-template/README.md

@@ -56,7 +56,7 @@ To see **live renders** of components in the dashboard (isolated, no app chrome)
    "vds:stories": "node vds-core/story-generator.mjs"
    ```
 
-2. **Context providers:** If components use React context (e.g. `useTimer`, `useSidebar`, `useCircles`, drag-drop context), they will error in Storybook unless wrapped with the right providers. In your project, add decorators in `.storybook/preview.tsx` to wrap all stories (or per-story) with your app’s providers (e.g. `TimerProvider`, `SidebarProvider`, `CirclesProvider`). See [Storybook decorators](https://storybook.js.org/docs/writing-stories/decorators).
+2. **Context providers:** Run `node vds-core/setup-storybook-providers.mjs` to detect hooks (useTimer, useSidebar, useCircles, useAuth, useSearch) and inject the matching providers into `.storybook/preview.ts`. The script prefers the provider from the same file as the hook (e.g. `context/SidebarContext.tsx` for useSidebar over `components/ui/sidebar`). If a component still errors with "Cannot read properties of undefined (reading 'x')", add default args or mock context state in that component’s story.
 
 3. **Icons:** The Foundations/Icons story lists only icons that are imported from `lucide-react` in your app code (src/, excluding `src/stories`), so it reflects real usage.
 

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

@@ -22,6 +22,7 @@ const HOOK_TO_PROVIDER = {
   useCircles: "CirclesProvider",
   useSidebar: "SidebarProvider",
   useAuth: "AuthProvider",
+  useSearch: "SearchProvider",
 };
 
 const IGNORE_DIRS = new Set(["node_modules", "dist", ".next", "build", ".storybook", "stories"]);
@@ -67,24 +68,29 @@ function detectHooksUsedInProject(projectRoot) {
   return byFile;
 }
 
-/** Find file that exports providerName (e.g. TimerProvider). Returns import path from project root for @/ alias: "contexts/TimerContext" */
-function findProviderExportPath(projectRoot, providerName) {
+/** 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 exportRe = new RegExp(
     "export\\s+(?:default\\s+)?(?:const|function|class)\\s+" + providerName + "\\b|export\\s*\\{[^}]*\\b" + providerName + "\\b[^}]*\\}"
   );
+  const candidates = [];
   for (const rel of files) {
     const full = path.join(projectRoot, rel);
     try {
       const content = fs.readFileSync(full, "utf-8");
       if (exportRe.test(content)) {
         const withoutExt = rel.replace(/\.(tsx?|jsx?)$/i, "").replace(/^src\/?/, "");
-        return "@/" + withoutExt;
+        const pathForImport = "@/" + withoutExt;
+        const hasHook = hookName && new RegExp("\\b" + hookName + "\\b").test(content);
+        candidates.push({ pathForImport, hasHook });
       }
     } catch (_) {}
   }
-  return null;
+  const preferred = hookName ? candidates.find((c) => c.hasHook) : null;
+  const pick = preferred || candidates[0];
+  return pick ? pick.pathForImport : null;
 }
 
 function getPreviewPath(projectRoot) {
@@ -110,7 +116,7 @@ function collectProvidersAndWarnings(projectRoot) {
   const hooksWithoutProvider = new Set();
   for (const hook of allHooksUsed) {
     const providerName = HOOK_TO_PROVIDER[hook];
-    const importPath = findProviderExportPath(projectRoot, providerName);
+    const importPath = findProviderExportPath(projectRoot, providerName, hook);
     if (importPath) {
       if (!providersToAdd.some((p) => p.name === providerName)) {
         providersToAdd.push({ name: providerName, importPath });
@@ -144,41 +150,34 @@ function injectProviderDecorators(projectRoot) {
 
   if (providersToAdd.length > 0) {
     let content = fs.readFileSync(previewPath, "utf-8");
-    const alreadyHas = providersToAdd.every((p) => content.includes(p.name));
-    if (!alreadyHas) {
-      const importLines = [...new Map(providersToAdd.map((p) => [p.name, p])).values()]
-        .map((p) => `import { ${p.name} } from "${p.importPath}";`)
-        .join("\n");
-      const lastImportIdx = content.search(/\nimport\s+.+?;\s*$/m);
-      const insertAt = lastImportIdx >= 0 ? content.indexOf("\n", lastImportIdx) + 1 : content.indexOf("\n") + 1;
-      content = content.slice(0, insertAt) + importLines + "\n" + content.slice(insertAt);
+    const uniqueProviders = [...new Map(providersToAdd.map((p) => [p.name, p])).values()];
+    if (!content.includes("import React") && !content.includes("import React from")) {
+      const firstImport = content.match(/^import\s+/m);
+      const insertAt = firstImport ? content.indexOf(firstImport[0]) : 0;
+      content = content.slice(0, insertAt) + "import React from \"react\";\n" + content.slice(insertAt);
     }
-    const withProvidersCode = buildWithProvidersCode(providersToAdd);
-    const idxPreview = content.indexOf("const preview");
-    const idxWithProviders = content.indexOf("const withProviders");
-    const wrongOrder = idxWithProviders !== -1 && idxPreview !== -1 && idxWithProviders > idxPreview;
-    if (wrongOrder) {
-      const blockMatch = content.match(/const withProviders\s*=[\s\S]+?;\s*\n/);
-      if (blockMatch) {
-        const block = blockMatch[0].trim();
-        content = content.replace(blockMatch[0], "").replace(/\n{3,}/g, "\n\n");
-        content = content.replace(/(\s*)(const preview\s*[^=]*=\s*\{)/, block + "\n\n$1$2");
-      }
-    } else if (!content.includes("withProviders")) {
-      if (!content.includes("import React")) {
-        const firstImport = content.match(/^import\s+/m);
-        const insertAt = firstImport ? content.indexOf(firstImport[0]) : 0;
-        content = content.slice(0, insertAt) + "import React from \"react\";\n" + content.slice(insertAt);
+    for (const p of uniqueProviders) {
+      if (!content.includes(p.name)) {
+        const lastImportIdx = content.search(/\nimport\s+.+?;\s*$/m);
+        const insertAt = lastImportIdx >= 0 ? content.indexOf("\n", lastImportIdx) + 1 : content.indexOf("\n") + 1;
+        content = content.slice(0, insertAt) + `import { ${p.name} } from "${p.importPath}";\n` + content.slice(insertAt);
       }
-      content = content.replace(/(\s*)(const preview\s*[^=]*=\s*\{)/, withProvidersCode + "\n\n$1$2");
+    }
+    content = content.replace(/const withProviders\s*=\s*\([^)]*\)\s*=>\s*[\s\S]+?;\s*\n?/g, "").replace(/\n{3,}/g, "\n\n");
+    const withProvidersCode = buildWithProvidersCode(providersToAdd);
+    const insertBefore = content.indexOf("const preview");
+    if (insertBefore !== -1) {
+      content = content.slice(0, insertBefore) + withProvidersCode + "\n\n" + content.slice(insertBefore);
       if (content.includes("decorators:")) {
-        content = content.replace(/decorators:\s*\[/, "decorators: [withProviders, ");
+        if (!content.includes("decorators: [withProviders")) {
+          content = content.replace(/decorators:\s*\[/, "decorators: [withProviders, ");
+        }
       } else {
         content = content.replace(/(const preview\s*[^=]*=\s*\{\s*)/, "$1\n  decorators: [withProviders],\n  ");
       }
     }
     fs.writeFileSync(previewPath, content, "utf-8");
-    console.log("[VDS] Storybook preview: " + (wrongOrder ? "fixed withProviders order." : "added " + providersToAdd.map((p) => p.name).join(", ")));
+    console.log("[VDS] Storybook preview: " + uniqueProviders.map((p) => p.name).join(", "));
   }
 
   if (hooksWithoutProvider.size > 0) {