vibe-design-system 2.5.29 → 2.5.30

package/package.json

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

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

@@ -105,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();
@@ -125,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};`;
 }
@@ -160,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);
       }
     }
   }