vibe-design-system 2.5.10 → 2.5.12

package/bin/init.js

@@ -50,8 +50,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 = {
@@ -63,19 +61,14 @@ const preview: Preview = {
           "Foundations",
           ["Introduction", "Page to Components", "Colors", "Typography", "Brand", "Icons", "Component Suggestions", "Changelog"],
           "Layout",
-          ["Navigation", "Footer", "ScrollToTop"],
           "Components",
           "Actions",
           "Data Display",
           "Examples",
-          ["Pages"],
         ],
       },
     },
   },
-  decorators: [
-    (Story) => React.createElement(MemoryRouter, null, React.createElement(Story, null)),
-  ],
 };
 
 export default preview;

package/package.json

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

package/vds-core-template/scan.mjs

@@ -774,6 +774,24 @@ function parseCssVarBlock(block) {
   return out;
 }
 
+/** Return only theme.extend.colors from tailwind config (user-defined colors), not the default Tailwind palette. */
+function getTailwindExtendColors() {
+  try {
+    const twPath = path.join(PROJECT_ROOT, "tailwind.config.js");
+    const twPathMjs = path.join(PROJECT_ROOT, "tailwind.config.mjs");
+    let config = null;
+    if (fs.existsSync(twPath)) {
+      config = projectRequire(twPath);
+    } else if (fs.existsSync(twPathMjs)) {
+      config = projectRequire(twPathMjs);
+    }
+    if (config && typeof config === "object" && config.default) config = config.default;
+    return config?.theme?.extend?.colors ?? null;
+  } catch (_) {
+    return null;
+  }
+}
+
 /** Resolve Tailwind theme for boxShadow, spacing, screens, zIndex, motion. Uses resolveConfig when available. */
 function getTailwindTheme() {
   const empty = { shadows: {}, spacing: {}, breakpoints: {}, zIndex: {}, transitionDuration: {}, transitionTimingFunction: {}, animation: {}, colors: {} };
@@ -1041,9 +1059,9 @@ function extractFoundations() {
   const foundationsColors = { ...colors };
   if (Object.keys(colorsDark).length > 0) foundationsColors._dark = colorsDark;
 
-  const twTheme = getTailwindTheme();
-  if (twTheme.colors && typeof twTheme.colors === "object") {
-    for (const [key, val] of Object.entries(twTheme.colors)) {
+  const extendColors = getTailwindExtendColors();
+  if (extendColors && typeof extendColors === "object") {
+    for (const [key, val] of Object.entries(extendColors)) {
       if (typeof val === "string" && (val.startsWith("#") || /^[a-z]/.test(val))) {
         foundationsColors[key] = { value: val, hex: val.startsWith("#") ? val : val };
       } else if (typeof val === "object" && val !== null && !Array.isArray(val)) {
@@ -1054,6 +1072,7 @@ function extractFoundations() {
     }
   }
 
+  const twTheme = getTailwindTheme();
   const normalizeThemeObj = (obj) => {
     if (!obj || typeof obj !== "object") return {};
     const out = {};

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

@@ -350,6 +350,30 @@ function needsRouter(source) {
   return false;
 }
 
+/** Detect if component provides its own router (BrowserRouter or RouterProvider). Preview should not wrap with MemoryRouter. */
+function usesOwnRouter(source) {
+  if (!source || typeof source !== "string") return false;
+  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;
@@ -375,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);
@@ -483,42 +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";`);
-  const useRouterDecorator = needsRouter(source);
+  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}";`);
   }
-  if (useRouterDecorator) lines.push(`import { MemoryRouter } from "react-router-dom";`);
+
+  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 (useRouterDecorator) {
-    lines.push(`  decorators: [(Story) => (`);
-    lines.push(`    <MemoryRouter>`);
-    lines.push(`      <Story />`);
-    lines.push(`    </MemoryRouter>`);
-    lines.push(`  )],`);
+  if (needsRouterDecorator) {
+    lines.push(`  decorators: [(Story) => <MemoryRouter><Story /></MemoryRouter>],`);
   }
   lines.push(`} satisfies Meta<typeof ComponentRef>;`);
   lines.push("");
@@ -526,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");
 }
@@ -589,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}";`);
@@ -619,22 +744,17 @@ function buildStoryFileContent(comp) {
     lines.push(`const ComponentRef = ${namedAlias} ?? ${defaultAlias};`);
   }
 
-  const useRouterDecorator = needsRouter(source);
-  if (useRouterDecorator) {
+  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 (useRouterDecorator) {
-    lines.push(`  decorators: [(Story) => (`);
-    lines.push(`    <MemoryRouter>`);
-    lines.push(`      <Story />`);
-    lines.push(`    </MemoryRouter>`);
-    lines.push(`  )],`);
+  if (needsRouterDecorator) {
+    lines.push(`  decorators: [(Story) => <MemoryRouter><Story /></MemoryRouter>],`);
   }
   lines.push(`} satisfies Meta<typeof ComponentRef>;`);
   lines.push("");
@@ -655,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 {
@@ -664,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("");
@@ -674,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("");