vibe-design-system 2.5.28 → 2.5.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.5.28",
+  "version": "2.5.30",
   "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) {
@@ -99,7 +105,28 @@ function getPreviewPath(projectRoot) {
   return null;
 }
 
-/** Collect all hooks used in project; return { providersToAdd: [{ name, importPath }], hooksWithoutProvider: Set, hooksByFile: Map } */
+/** 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));
+  for (const full of files) {
+    try {
+      const content = fs.readFileSync(full, "utf-8");
+      if (/\b(useDrag|useDrop|DndProvider)\b/.test(content) || /from\s+["']react-dnd["']/.test(content)) {
+        const pkgPath = path.join(projectRoot, "package.json");
+        if (fs.existsSync(pkgPath)) {
+          const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+          const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+          if (deps["react-dnd"]) return true;
+        }
+        return true;
+      }
+    } catch (_) {}
+  }
+  return false;
+}
+
+/** Collect all hooks used in project; return { providersToAdd: [{ name, importPath, props? }], ... } */
 function collectProvidersAndWarnings(projectRoot) {
   const hooksByFile = detectHooksUsedInProject(projectRoot);
   const allHooksUsed = new Set();
@@ -110,7 +137,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 });
@@ -119,15 +146,25 @@ function collectProvidersAndWarnings(projectRoot) {
       hooksWithoutProvider.add(hook);
     }
   }
+  if (detectReactDnd(projectRoot) && !providersToAdd.some((p) => p.name === "DndProvider")) {
+    providersToAdd.unshift({
+      name: "DndProvider",
+      importPath: "react-dnd",
+      props: "{ backend: HTML5Backend }",
+      extraImport: { name: "HTML5Backend", from: "react-dnd-html5-backend" },
+    });
+  }
   return { providersToAdd, hooksWithoutProvider, hooksByFile };
 }
 
-/** Build withProviders decorator using React.createElement (no JSX so preview can stay .ts) */
+/** Build withProviders decorator using React.createElement (no JSX so preview can stay .ts). Supports provider.props. */
 function buildWithProvidersCode(providers) {
   if (providers.length === 0) return null;
   let inner = "React.createElement(Story)";
   for (let i = providers.length - 1; i >= 0; i--) {
-    inner = `React.createElement(${providers[i].name}, null, ${inner})`;
+    const p = providers[i];
+    const propsArg = p.props ? p.props : "null";
+    inner = `React.createElement(${p.name}, ${propsArg}, ${inner})`;
   }
   return `const withProviders = (Story: any) => ${inner};`;
 }
@@ -154,7 +191,11 @@ function injectProviderDecorators(projectRoot) {
       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);
+        let importLine = `import { ${p.name} } from "${p.importPath}";\n`;
+        if (p.extraImport && !content.includes(p.extraImport.name)) {
+          importLine += `import { ${p.extraImport.name} } from "${p.extraImport.from}";\n`;
+        }
+        content = content.slice(0, insertAt) + importLine + content.slice(insertAt);
       }
     }
     content = content.replace(/const withProviders\s*=\s*\([^)]*\)\s*=>\s*[\s\S]+?;\s*\n?/g, "").replace(/\n{3,}/g, "\n\n");

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

@@ -652,6 +652,24 @@ function buildDefaultArgsForRequiredProps(props, usageFromPages = null, componen
       } else if (/string/.test(type)) {
         argLines.push(`    ${name}: ${stringFallback(name)},`);
         added.add(name);
+      } else if (/number/.test(type) || /^(value|amount|total|count|hours|minutes|progress|percent)$/.test(name)) {
+        argLines.push(`    ${name}: 0,`);
+        added.add(name);
+      }
+    }
+    // Optional props that often cause "reading X of undefined" in Storybook if missing
+    const NUMBER_LIKE_OPTIONAL = new Set(["value", "amount", "total", "count", "hours", "minutes", "progress", "percent", "visibility"]);
+    const DATE_RANGE_DEFAULT = `{ dateRange: { from: new Date().toISOString(), to: new Date().toISOString() } }`;
+    for (const p of props) {
+      const type = String(p.type || "").trim();
+      const name = p.name;
+      if (added.has(name)) continue;
+      if (name === "filters" || /dateRange|Filter.*object/.test(type)) {
+        argLines.push(`    ${name}: ${DATE_RANGE_DEFAULT},`);
+        added.add(name);
+      } else if (/number/.test(type) || NUMBER_LIKE_OPTIONAL.has(name)) {
+        argLines.push(`    ${name}: ${name === "visibility" ? "1" : "0"},`);
+        added.add(name);
       }
     }
   }