vibe-design-system 2.8.23 → 2.8.25

package/package.json

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

package/vds-core-template/scan.mjs

@@ -431,6 +431,75 @@ function extractCvaVariants(content) {
   return Object.keys(result).length > 0 ? result : null;
 }
 
+// Common HTML/React props that are noise for the agent — skip them in cursor rules
+const PROPS_SKIP = new Set([
+  "className","style","id","key","ref","children","asChild","slot",
+  "tabIndex","role","aria-label","aria-describedby","aria-hidden","aria-labelledby",
+  "data-testid","htmlFor","draggable","title","lang","dir","onClick","onChange",
+  "onSubmit","onBlur","onFocus","onKeyDown","onKeyUp","onMouseEnter","onMouseLeave",
+]);
+
+/**
+ * Extract TypeScript prop types from a component file.
+ * Looks for interface *Props* { ... } or type *Props* = { ... }
+ * Returns Array<{ name, type, required }> or null.
+ */
+function extractTSProps(content) {
+  // Find the start of a props interface or type alias
+  const startRe = /(?:interface|type)\s+\w*[Pp]rops\w*[^{]*\{/;
+  const sm = startRe.exec(content);
+  if (!sm) return null;
+
+  // Walk forward counting braces to find the matching closing }
+  const blockStart = sm.index + sm[0].length;
+  let depth = 1;
+  let i = blockStart;
+  while (i < content.length && depth > 0) {
+    if (content[i] === "{") depth++;
+    if (content[i] === "}") depth--;
+    i++;
+  }
+  const propsBlock = content.slice(blockStart, i - 1);
+
+  const props = [];
+  // Match top-level props: optional leading whitespace (1-6 chars), prop name, optional ?, colon, type
+  const propRe = /^[ \t]{1,6}([\w]+)(\?)?:\s*(.+?)[ \t]*;?[ \t]*$/gm;
+  let pm;
+  while ((pm = propRe.exec(propsBlock)) !== null) {
+    const propName = pm[1].trim();
+    if (PROPS_SKIP.has(propName)) continue;
+    // Skip comment lines that accidentally match (e.g. "// foo:")
+    if (propsBlock.slice(pm.index).match(/^[ \t]*\/\//)) continue;
+
+    const optional = pm[2] === "?";
+    let type = pm[3]
+      .replace(/\s*\/\/.*$/, "")  // strip inline // comments (with any space before //)
+      .trim()                     // remove surrounding whitespace
+      .replace(/;$/, "")          // strip trailing semicolon (now truly at the end)
+      .trim();
+
+    // Skip multi-line types (unbalanced braces — the rest is on the next line)
+    const openBraces  = (type.match(/\{/g) || []).length;
+    const closeBraces = (type.match(/\}/g) || []).length;
+    if (openBraces !== closeBraces) continue;
+
+    // Simplify verbose React type names
+    type = type.replace(/React\.ReactNode/g, "ReactNode");
+    type = type.replace(/React\.FC[^;,\n]*/g, "FC");
+    type = type.replace(/React\.CSSProperties/g, "CSSProperties");
+    type = type.replace(/React\.RefObject<[^>]+>/g, "RefObject");
+    type = type.replace(/React\.MouseEvent[^;,\n]*/g, "MouseEvent");
+    type = type.replace(/React\.ChangeEvent[^;,\n]*/g, "ChangeEvent");
+    type = type.replace(/React\.KeyboardEvent[^;,\n]*/g, "KeyboardEvent");
+
+    // Truncate very long types
+    if (type.length > 50) type = type.slice(0, 47) + "...";
+
+    props.push({ name: propName, type, required: !optional });
+  }
+  return props.length > 0 ? props : null;
+}
+
 function getAllComponentFiles(dir, baseDir = dir) {
   const entries = fs.readdirSync(dir, { withFileTypes: true });
   const files = [];
@@ -2209,9 +2278,10 @@ function scan() {
     const tokens = extractTailwindTokens(content);
     const tier = inferTier(rel, content);
     const variants = (tier === "primitive") ? extractCvaVariants(content) : null;
+    const props = (tier === "component" || tier === "feature") ? extractTSProps(content) : null;
     const lineCount = content.split("\n").length;
     const localImportCount = (content.match(/from\s+['"]\.\.\?\//g) || []).length;
-    results.push({ file: rel, name, group, category, description, tokens, tier, lines: lineCount, localImports: localImportCount, ...(variants ? { variants } : {}) });
+    results.push({ file: rel, name, group, category, description, tokens, tier, lines: lineCount, localImports: localImportCount, ...(variants ? { variants } : {}), ...(props ? { props } : {}) });
   }
   if (PAGES_DIR && fs.existsSync(PAGES_DIR)) {
     const pageFiles = getAllComponentFiles(PAGES_DIR);

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;`);
@@ -2569,6 +2635,20 @@ function writeCursorRules(components, foundations) {
     lines.push(``);
   }
 
+  // Format a compact props summary for cursor rules (required first, up to 6 props)
+  const formatProps = (props) => {
+    if (!Array.isArray(props) || props.length === 0) return null;
+    const sorted = [...props].sort((a, b) => {
+      if (a.required && !b.required) return -1;
+      if (!a.required && b.required) return 1;
+      return a.name.localeCompare(b.name);
+    });
+    const shown = sorted.slice(0, 6);
+    const parts = shown.map(p => p.required ? `${p.name} (${p.type}, required)` : `${p.name} (${p.type})`);
+    const suffix = props.length > 6 ? ` *(+${props.length - 6} more)*` : "";
+    return `  props: ${parts.join(" · ")}${suffix}`;
+  };
+
   // Tier 2 — Components
   if (byTier.component.length > 0) {
     lines.push(`## 🔷 Components — Reusable domain components`);
@@ -2578,6 +2658,8 @@ function writeCursorRules(components, foundations) {
       let entry = `- **${c.name}** \`${c.file}\``;
       if (c.description) entry += ` — ${c.description}`;
       lines.push(entry);
+      const propsLine = formatProps(c.props);
+      if (propsLine) lines.push(propsLine);
     }
     lines.push(``);
     lines.push(`---`);
@@ -2591,6 +2673,8 @@ function writeCursorRules(components, foundations) {
     lines.push(``);
     for (const c of byTier.feature.sort((a, b) => a.name.localeCompare(b.name))) {
       lines.push(`- **${c.name}** \`${c.file}\``);
+      const propsLine = formatProps(c.props);
+      if (propsLine) lines.push(propsLine);
     }
     lines.push(``);
     lines.push(`---`);