vibe-design-system 2.5.11 → 2.5.13

package/bin/init.js

@@ -24,9 +24,6 @@ const TEMPLATE_DIR = path.join(INSTALLER_ROOT, "vds-core-template");
 const STORYBOOK_MAIN_TS = `import type { StorybookConfig } from "@storybook/react-vite";
 import { mergeConfig } from "vite";
 import path from "path";
-import { fileURLToPath } from "url";
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -39,7 +36,7 @@ const config: StorybookConfig = {
     return mergeConfig(config, {
       resolve: {
         alias: {
-          "@": path.resolve(__dirname, "../src"),
+          "@": path.resolve(process.cwd(), "src"),
         },
       },
     });
@@ -50,8 +47,6 @@ 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 preview: Preview = {
@@ -71,14 +66,6 @@ const preview: Preview = {
       },
     },
   },
-  decorators: [
-    (Story, context) => {
-      const needsRouter = context.parameters?.router !== false;
-      return needsRouter
-        ? React.createElement(MemoryRouter, null, React.createElement(Story, null))
-        : React.createElement(Story, null);
-    },
-  ],
 };
 
 export default preview;

package/package.json

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

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

@@ -356,6 +356,24 @@ function usesOwnRouter(source) {
   return /\bBrowserRouter\b|\bRouterProvider\b/.test(source);
 }
 
+/** Whether component has to or href prop (link-like); story should get MemoryRouter decorator. */
+function hasToOrHrefProp(comp, source) {
+  const props = Array.isArray(comp.props) && comp.props.length > 0 ? comp.props : parsePropsFromSource(source);
+  return props.some((p) => p.name === "to" || p.name === "href");
+}
+
+/** Check if source exports given named exports (export { X } or export const X). */
+function hasNamedExports(source, names) {
+  if (!source || !Array.isArray(names) || names.length === 0) return false;
+  for (const name of names) {
+    const hasExport = new RegExp(`export\\s+\\{[^}]*\\b${name}\\b[^}]*\\}`).test(source) ||
+      new RegExp(`export\\s+const\\s+${name}\\b`).test(source) ||
+      new RegExp(`export\\s+function\\s+${name}\\b`).test(source);
+    if (!hasExport) return false;
+  }
+  return true;
+}
+
 /** 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;
@@ -381,6 +399,74 @@ function parseUnionLiterals(type) {
   return matches.map((s) => s.replace(/"/g, ""));
 }
 
+/** Parse props with types from component source (interface/type or inline props). Returns [{ name, type, required }]. */
+function parsePropsFromSource(source) {
+  if (!source || typeof source !== "string") return [];
+  const props = [];
+  const push = (name, type, optional) => {
+    const required = !optional;
+    if (!props.some((p) => p.name === name)) props.push({ name, type, required });
+  };
+  // Match interface XProps { ... } or type XProps = { ... }
+  const blockRe = /(?:interface|type)\s+\w*Props?\s*=\s*\{([^}]+)\}|(?:interface|type)\s+\w*Props?\s*\{([^}]+)\}/g;
+  let m;
+  while ((m = blockRe.exec(source)) !== null) {
+    const body = (m[1] || m[2] || "").replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/[^\n]*/g, "");
+    const propRe = /(\w+)(\??)\s*:\s*([^;]+?)(?=\s*;|\s*\w+\s*\??\s*:|\s*$)/g;
+    let pm;
+    while ((pm = propRe.exec(body)) !== null) {
+      const optional = pm[2] === "?" || (pm[3] || "").includes("| undefined");
+      push(pm[1], pm[3].trim().replace(/\s+/g, " "), optional);
+    }
+  }
+  // Inline (props: { ... })
+  const inlineRe = /(?:props|Parameters)\s*:\s*\{\s*([^}]+)\}/;
+  const im = source.match(inlineRe);
+  if (im) {
+    const body = im[1].replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/[^\n]*/g, "");
+    const propRe = /(\w+)(\??)\s*:\s*([^;:,]+?)(?=\s*[;,}]|\s*\w+\s*\??\s*:)/g;
+    let pm;
+    while ((pm = propRe.exec(body)) !== null) {
+      if (!props.some((p) => p.name === pm[1])) push(pm[1], pm[3].trim().replace(/\s+/g, " "), pm[2] === "?");
+    }
+  }
+  return props;
+}
+
+/** Default icon for LucideIcon prop when name is generic (icon, leftIcon, etc.). */
+const LUCIDE_ICON_DEFAULT = "Star";
+
+/** Build default args lines and lucide-react imports for required props (LucideIcon → icon component, X[] → example item). */
+function buildDefaultArgsForRequiredProps(props) {
+  const argLines = [];
+  const lucideImports = new Set();
+  if (!Array.isArray(props) || props.length === 0) return { argLines, lucideImports: [] };
+  for (const p of props) {
+    if (p.required !== true) continue;
+    const type = String(p.type || "").trim();
+    const name = p.name;
+    if (/LucideIcon|lucide-react/.test(type)) {
+      const iconName = LUCIDE_ICON_DEFAULT;
+      lucideImports.add(iconName);
+      argLines.push(`    ${name}: ${iconName},`);
+    } else if (/\[\]/.test(type)) {
+      const itemTypeMatch = type.match(/([A-Za-z0-9_]+)(?=\s*\[\])/);
+      const itemType = itemTypeMatch ? itemTypeMatch[1] : "Item";
+      const example = getExampleItemForArrayType(itemType);
+      argLines.push(`    ${name}: ${JSON.stringify(example)},`);
+    }
+  }
+  return { argLines, lucideImports: [...lucideImports] };
+}
+
+function getExampleItemForArrayType(itemType) {
+  const lower = itemType.toLowerCase();
+  if (lower.includes("stat") || itemType === "StatsSectionItem") return [{ label: "Example", value: "100" }];
+  if (lower.includes("item") && !lower.includes("menu")) return [{ id: "1", label: "Example", value: "Sample" }];
+  if (lower.includes("menu")) return [{ label: "Item 1", value: "item-1" }];
+  return [{ label: "Example", value: "100" }];
+}
+
 function capitalize(str) {
   if (!str) return "";
   return str.charAt(0).toUpperCase() + str.slice(1);
@@ -489,37 +575,63 @@ function buildSpecialStories(componentName, variants) {
   return "";
 }
 
-function buildRecipeStoryContent(comp, componentName, importPath, title, source, exportStyle, recipe) {
+function buildRecipeStoryContent(comp, componentName, importPath, title, source, exportStyle, recipe, defaultArgLines = [], lucideImports = []) {
   const lines = [];
   lines.push(`import type { Meta, StoryObj } from "@storybook/react";`);
+  if (lucideImports.length > 0) {
+    lines.push(`import { ${lucideImports.join(", ")} } from "lucide-react";`);
+  }
+
+  const isCardWithoutNamedExports = componentName === "Card" && !hasNamedExports(source, ["CardHeader", "CardTitle", "CardDescription", "CardContent", "CardFooter"]);
+  let effectiveRecipe = recipe;
+  if (isCardWithoutNamedExports) {
+    effectiveRecipe = {
+      imports: [],
+      render: `(args) => (
+      <ComponentRef className="w-[340px]" {...args}>
+        <ComponentRef.Header>
+          <ComponentRef.Title>Card title</ComponentRef.Title>
+          <ComponentRef.Description>Short description.</ComponentRef.Description>
+        </ComponentRef.Header>
+        <ComponentRef.Content><p>Card body content here.</p></ComponentRef.Content>
+        <ComponentRef.Footer>Footer</ComponentRef.Footer>
+      </ComponentRef>
+    )`,
+    };
+  }
+
   if (exportStyle === "default") {
     lines.push(`import ${componentName} from "${importPath}";`);
-    if (recipe.imports?.length) {
-      lines.push(`import { ${recipe.imports.join(", ")} } from "${importPath}";`);
+    if (effectiveRecipe.imports?.length) {
+      lines.push(`import { ${effectiveRecipe.imports.join(", ")} } from "${importPath}";`);
     }
     lines.push(`const ComponentRef = ${componentName};`);
   } else if (exportStyle === "named") {
-    const names = recipe.imports?.length ? [componentName, ...recipe.imports] : [componentName];
+    const names = effectiveRecipe.imports?.length ? [componentName, ...effectiveRecipe.imports] : [componentName];
     lines.push(`import { ${names.join(", ")} } from "${importPath}";`);
     lines.push(`const ComponentRef = ${componentName};`);
   } else {
     const defaultAlias = `${componentName}Default`;
     const namedAlias = `${componentName}Named`;
-    const extra = recipe.imports?.length ? ", " + recipe.imports.join(", ") : "";
+    const extra = effectiveRecipe.imports?.length ? ", " + effectiveRecipe.imports.join(", ") : "";
     lines.push(`import ${defaultAlias}, { ${componentName} as ${namedAlias}${extra} } from "${importPath}";`);
     lines.push(`const ComponentRef = ${namedAlias} ?? ${defaultAlias};`);
   }
-  for (const ext of recipe.extraImports || []) {
+  for (const ext of (effectiveRecipe.extraImports || recipe.extraImports) || []) {
     lines.push(`import { ${ext.names.join(", ")} } from "${ext.from}";`);
   }
-  const skipPreviewRouter = usesOwnRouter(source);
+
+  const needsRouterDecorator = hasToOrHrefProp(comp, source);
+  if (needsRouterDecorator) {
+    lines.push(`import { MemoryRouter } from "react-router-dom";`);
+  }
   lines.push("");
   lines.push(`const meta = {`);
   lines.push(`  title: ${JSON.stringify(title)},`);
   lines.push(`  component: ComponentRef,`);
   lines.push(`  tags: ["autodocs"],`);
-  if (skipPreviewRouter) {
-    lines.push(`  parameters: { router: false },`);
+  if (needsRouterDecorator) {
+    lines.push(`  decorators: [(Story) => <MemoryRouter><Story /></MemoryRouter>],`);
   }
   lines.push(`} satisfies Meta<typeof ComponentRef>;`);
   lines.push("");
@@ -527,7 +639,12 @@ function buildRecipeStoryContent(comp, componentName, importPath, title, source,
   lines.push(`type Story = StoryObj<typeof meta>;`);
   lines.push("");
   lines.push(`export const Default: Story = {`);
-  lines.push(`  render: ${recipe.render},`);
+  lines.push(`  render: ${effectiveRecipe.render},`);
+  if (defaultArgLines.length > 0) {
+    lines.push(`  args: {`);
+    for (const line of defaultArgLines) lines.push(line);
+    lines.push(`  },`);
+  }
   lines.push(`};`);
   return lines.join("\n");
 }
@@ -590,17 +707,24 @@ function buildStoryFileContent(comp) {
   const omitChildren = componentWrapsVoidElement(source);
   const isPage = comp.file.startsWith("pages/");
 
+  // 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);
+
   // 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))) {
     return null;
   }
 
   if (RECIPES[componentName]) {
-    return buildRecipeStoryContent(comp, componentName, importPath, title, source, exportStyle, RECIPES[componentName]);
+    return buildRecipeStoryContent(comp, componentName, importPath, title, source, exportStyle, RECIPES[componentName], defaultArgLines, lucideImports);
   }
 
   const lines = [];
   lines.push(`import type { Meta, StoryObj } from "@storybook/react";`);
+  if (lucideImports.length > 0) {
+    lines.push(`import { ${lucideImports.join(", ")} } from "lucide-react";`);
+  }
 
   if (isPage && exportStyle !== "default") {
     lines.push(`import * as Named from "${importPath}";`);
@@ -620,14 +744,17 @@ function buildStoryFileContent(comp) {
     lines.push(`const ComponentRef = ${namedAlias} ?? ${defaultAlias};`);
   }
 
-  const skipPreviewRouter = usesOwnRouter(source);
+  const needsRouterDecorator = hasToOrHrefProp(comp, source);
+  if (needsRouterDecorator) {
+    lines.push(`import { MemoryRouter } from "react-router-dom";`);
+  }
   lines.push("");
   lines.push(`const meta = {`);
   lines.push(`  title: ${JSON.stringify(title)},`);
   lines.push(`  component: ComponentRef,`);
   lines.push(`  tags: ["autodocs"],`);
-  if (skipPreviewRouter) {
-    lines.push(`  parameters: { router: false },`);
+  if (needsRouterDecorator) {
+    lines.push(`  decorators: [(Story) => <MemoryRouter><Story /></MemoryRouter>],`);
   }
   lines.push(`} satisfies Meta<typeof ComponentRef>;`);
   lines.push("");
@@ -648,6 +775,7 @@ function buildStoryFileContent(comp) {
     lines.push(`  render: (args) => <ComponentRef {...args} />,`);
     lines.push(`  args: {`);
     if (!omitChildren) lines.push(`    children: "${componentName}",`);
+    for (const line of defaultArgLines) lines.push(line);
     lines.push(`  },`);
     lines.push(`};`);
   } else {
@@ -657,6 +785,7 @@ function buildStoryFileContent(comp) {
     lines.push(`  args: {`);
     lines.push(`    variant: "${defaultVariant}",`);
     if (!omitChildren) lines.push(`    children: "${componentName}",`);
+    for (const line of defaultArgLines) lines.push(line);
     lines.push(`  },`);
     lines.push(`};`);
     lines.push("");
@@ -667,6 +796,7 @@ function buildStoryFileContent(comp) {
       lines.push(`  args: {`);
       lines.push(`    variant: "${v}",`);
       if (!omitChildren) lines.push(`    children: "${storyName}",`);
+      for (const line of defaultArgLines) lines.push(line);
       lines.push(`  },`);
       lines.push(`};`);
       lines.push("");