vibe-design-system 2.8.24 → 2.8.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.8.24",
+  "version": "2.8.25",
   "description": "Auto-generate design systems for vibe coding projects",
   "homepage": "https://vibedesign.tech",
   "repository": {

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

@@ -742,6 +742,12 @@ function buildDefaultArgsForRequiredProps(props, usageFromPages = null, componen
         continue;
       }
       if (!required) continue;
+      // Function/callback types must be caught before name-based type checks (e.g. "Task" in "(task: Task) => void")
+      if (isFunctionType(type)) {
+        argLines.push(`    ${name}: () => {},`);
+        added.add(name);
+        continue;
+      }
       if (/LucideIcon|lucide-react/.test(type)) {
         const iconName = LUCIDE_ICON_DEFAULT;
         lucideImports.add(iconName);
@@ -1071,6 +1077,52 @@ function buildRecipeStoryContent(comp, componentName, importPath, title, source,
   return lines.join("\n");
 }
 
+/**
+ * Map a single extracted TypeScript prop to a Storybook argType entry string.
+ * Returns something like: `{ control: "text", description: "string" }`
+ */
+function buildArgTypeEntry(prop) {
+  const t = (prop.type || "").trim();
+  const name = prop.name;
+
+  // Function / callback — disable control widget, show as action
+  if (/=>\s*(void|any|never|Promise)/.test(t) || /^\([^)]*\)\s*=>/.test(t)) {
+    const safe = t.replace(/"/g, '\\"').slice(0, 60);
+    return `{ action: "${name}", control: false, description: "${safe}" }`;
+  }
+  // Boolean
+  if (/^boolean/.test(t)) {
+    return `{ control: "boolean", description: "boolean" }`;
+  }
+  // Number
+  if (/^number/.test(t)) {
+    return `{ control: "number", description: "number" }`;
+  }
+  // String union literals: "a" | "b" | "c" → select control
+  if (/^"[^"]+"(\s*\|\s*"[^"]+")+/.test(t)) {
+    const opts = (t.match(/"([^"]+)"/g) || []).map(s => s.replace(/"/g, ""));
+    return `{ control: "select", options: ${JSON.stringify(opts)}, description: ${JSON.stringify(t)} }`;
+  }
+  // Plain string (including union with null/undefined)
+  if (/^string/.test(t) || t === "string | null" || t === "string | undefined" || t === "string | null | undefined") {
+    return `{ control: "text", description: "string" }`;
+  }
+  // ReactNode
+  if (/ReactNode/.test(t)) {
+    return `{ control: "text", description: "ReactNode" }`;
+  }
+  // Arrays → object control
+  if (t.endsWith("[]") || /^Array</.test(t)) {
+    return `{ control: "object", description: ${JSON.stringify(t.slice(0, 60))} }`;
+  }
+  // Inline object / any
+  if (t === "any" || t.startsWith("{")) {
+    return `{ control: "object", description: ${JSON.stringify(t.slice(0, 60))} }`;
+  }
+  // Imported / custom named types (Circle, Task, etc.) — object control so user can inspect
+  return `{ control: "object", description: ${JSON.stringify(t.slice(0, 60))} }`;
+}
+
 function buildStoryFileContent(comp) {
   const componentName = toSafeComponentName(comp.name, comp.file);
   const fileNoExt = comp.file.replace(/\.(tsx|jsx)$/, "");
@@ -1173,13 +1225,27 @@ function buildStoryFileContent(comp) {
   lines.push(`  title: ${JSON.stringify(title)},`);
   lines.push(`  component: ComponentRef,`);
   lines.push(`  tags: ["autodocs"],`);
+
+  // Build argTypes from extracted TypeScript props + icon-specific overrides
+  const argTypeEntries = [];
+  for (const p of effectiveProps) {
+    if (!p || !p.name) continue;
+    if (p.name === "children") continue; // Storybook infers children from JSX
+    if (iconPropNames && iconPropNames.includes(p.name)) continue; // handled below
+    const entry = buildArgTypeEntry(p);
+    argTypeEntries.push(`    ${p.name}: ${entry},`);
+  }
   if (iconPropNames && iconPropNames.length > 0) {
-    lines.push(`  argTypes: {`);
     for (const name of iconPropNames) {
-      lines.push(`    ${name}: { control: false },`);
+      argTypeEntries.push(`    ${name}: { control: false },`);
     }
+  }
+  if (argTypeEntries.length > 0) {
+    lines.push(`  argTypes: {`);
+    for (const entry of argTypeEntries) lines.push(entry);
     lines.push(`  },`);
   }
+
   lines.push(`} satisfies Meta<typeof ComponentRef>;`);
   lines.push("");
   lines.push(`export default meta;`);