vibe-design-system 2.5.13 → 2.5.14

package/bin/init.js

@@ -47,8 +47,18 @@ export default config;
 `;
 
 const STORYBOOK_PREVIEW_TS = `import type { Preview } from "@storybook/react";
+import React from "react";
+import { MemoryRouter } from "react-router-dom";
 import "../src/index.css";
 
+const withRouter = (Story: any) => {
+  try {
+    return React.createElement(MemoryRouter, null, React.createElement(Story));
+  } catch {
+    return React.createElement(Story);
+  }
+};
+
 const preview: Preview = {
   parameters: {
     layout: "fullscreen",
@@ -66,6 +76,7 @@ const preview: Preview = {
       },
     },
   },
+  decorators: [withRouter],
 };
 
 export default preview;

package/package.json

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

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

@@ -374,6 +374,15 @@ function hasNamedExports(source, names) {
   return true;
 }
 
+/** Whether component has children prop typed as ReactNode / React.ReactNode (use createElement fallback in render). */
+function hasChildrenPropReactNode(props) {
+  if (!Array.isArray(props) || props.length === 0) return false;
+  const childrenProp = props.find((p) => p.name === "children");
+  if (!childrenProp) return false;
+  const type = String(childrenProp.type || "").toLowerCase();
+  return type.includes("reactnode") || type.includes("react.reactnode");
+}
+
 /** Void HTML elements: img, input, hr, br — must not receive children. If component wraps one and has children in props, omit children in story args. */
 function componentWrapsVoidElement(source) {
   if (!source || typeof source !== "string") return false;
@@ -710,6 +719,7 @@ function buildStoryFileContent(comp) {
   // Props: manifest or parse from source for default args (LucideIcon, array types)
   const effectiveProps = Array.isArray(comp.props) && comp.props.length > 0 ? comp.props : parsePropsFromSource(source);
   const { argLines: defaultArgLines, lucideImports } = buildDefaultArgsForRequiredProps(effectiveProps);
+  const useReactNodeChildrenRender = !omitChildren && hasChildrenPropReactNode(effectiveProps);
 
   // Skip story only if not a page and no export found
   if (exportStyle === "unknown" && !isPage && (!source.includes("export") || !new RegExp(`\\b${componentName}\\b`).test(source))) {
@@ -722,6 +732,9 @@ function buildStoryFileContent(comp) {
 
   const lines = [];
   lines.push(`import type { Meta, StoryObj } from "@storybook/react";`);
+  if (useReactNodeChildrenRender) {
+    lines.push(`import React from "react";`);
+  }
   if (lucideImports.length > 0) {
     lines.push(`import { ${lucideImports.join(", ")} } from "lucide-react";`);
   }
@@ -770,21 +783,26 @@ function buildStoryFileContent(comp) {
   }
 
   // Generic variant-based stories — render real component with args (omit children for img/void)
+  const renderLine = useReactNodeChildrenRender
+    ? `  render: (args) => React.createElement(ComponentRef, { ...args, children: args.children || React.createElement('span', null, 'Example') }),`
+    : `  render: (args) => <ComponentRef {...args} />,`;
+  const childrenArgLine = (label) => (!omitChildren && !useReactNodeChildrenRender ? `    children: ${JSON.stringify(label)},` : null);
+
   if (!variants.length) {
     lines.push(`export const Default: Story = {`);
-    lines.push(`  render: (args) => <ComponentRef {...args} />,`);
+    lines.push(renderLine);
     lines.push(`  args: {`);
-    if (!omitChildren) lines.push(`    children: "${componentName}",`);
+    if (childrenArgLine(componentName)) lines.push(childrenArgLine(componentName));
     for (const line of defaultArgLines) lines.push(line);
     lines.push(`  },`);
     lines.push(`};`);
   } else {
     const defaultVariant = variants[0];
     lines.push(`export const ${capitalize(defaultVariant)}: Story = {`);
-    lines.push(`  render: (args) => <ComponentRef {...args} />,`);
+    lines.push(renderLine);
     lines.push(`  args: {`);
     lines.push(`    variant: "${defaultVariant}",`);
-    if (!omitChildren) lines.push(`    children: "${componentName}",`);
+    if (childrenArgLine(componentName)) lines.push(childrenArgLine(componentName));
     for (const line of defaultArgLines) lines.push(line);
     lines.push(`  },`);
     lines.push(`};`);
@@ -792,10 +810,10 @@ function buildStoryFileContent(comp) {
     for (const v of variants.slice(1)) {
       const storyName = capitalize(v);
       lines.push(`export const ${storyName}: Story = {`);
-      lines.push(`  render: (args) => <ComponentRef {...args} />,`);
+      lines.push(renderLine);
       lines.push(`  args: {`);
       lines.push(`    variant: "${v}",`);
-      if (!omitChildren) lines.push(`    children: "${storyName}",`);
+      if (childrenArgLine(storyName)) lines.push(childrenArgLine(storyName));
       for (const line of defaultArgLines) lines.push(line);
       lines.push(`  },`);
       lines.push(`};`);