vibe-design-system 2.8.51 → 2.8.54

package/package.json

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

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

@@ -1429,7 +1429,7 @@ function buildSpecialStories(componentName, variants) {
   return "";
 }
 
-function buildRecipeStoryContent(comp, componentName, importPath, title, source, exportStyle, recipe, defaultArgLines = [], lucideImports = [], iconPropNames = [], needReact = false) {
+function buildRecipeStoryContent(comp, componentName, importPath, title, source, exportStyle, recipe, defaultArgLines = [], lucideImports = [], iconPropNames = [], needReact = false, variantMap = null) {
   const lines = [];
   lines.push(`// @vds-regenerate — VDS auto-generated. Remove this line to prevent overwrite.`);
   lines.push(`import type { Meta, StoryObj } from "@storybook/react";`);
@@ -1492,14 +1492,66 @@ function buildRecipeStoryContent(comp, componentName, importPath, title, source,
   lines.push(`export default meta;`);
   lines.push(`type Story = StoryObj<typeof meta>;`);
   lines.push("");
-  lines.push(`export const Default: Story = {`);
-  lines.push(`  render: ${effectiveRecipe.render},`);
-  if (defaultArgLines.length > 0) {
+  // --- Dimension-aware recipe stories ---
+  const hasDims = variantMap && Object.keys(variantMap.dimensions).length > 0;
+  if (hasDims) {
+    const primaryDim = variantMap.primaryDimension || Object.keys(variantMap.dimensions)[0];
+    const primaryInfo = variantMap.dimensions[primaryDim];
+    const primaryValues = primaryInfo?.values || [];
+    const primaryDefault = primaryInfo?.default || primaryValues[0];
+
+    // Default story (primary default variant)
+    lines.push(`export const Default: Story = {`);
+    lines.push(`  render: ${effectiveRecipe.render},`);
     lines.push(`  args: {`);
+    lines.push(`    ${primaryDim}: ${JSON.stringify(primaryDefault)},`);
     for (const line of defaultArgLines) lines.push(line);
     lines.push(`  },`);
+    lines.push(`};`);
+
+    // Per-variant stories for remaining primary values
+    for (const val of primaryValues) {
+      if (val === primaryDefault) continue;
+      const storyName = val.charAt(0).toUpperCase() + val.slice(1);
+      lines.push("");
+      lines.push(`export const ${storyName}: Story = {`);
+      lines.push(`  render: ${effectiveRecipe.render},`);
+      lines.push(`  args: {`);
+      lines.push(`    ${primaryDim}: ${JSON.stringify(val)},`);
+      for (const line of defaultArgLines) lines.push(line);
+      lines.push(`  },`);
+      lines.push(`};`);
+    }
+
+    // Secondary dimensions (e.g., size) — skip default value, one story per non-default
+    const secondaryDims = Object.keys(variantMap.dimensions).filter(d => d !== primaryDim);
+    for (const dim of secondaryDims) {
+      const dimInfo = variantMap.dimensions[dim];
+      const dimDefault = dimInfo?.default || dimInfo?.values?.[0];
+      for (const val of dimInfo?.values || []) {
+        if (val === dimDefault) continue;
+        const storyName = `${dim.charAt(0).toUpperCase() + dim.slice(1)}${val.charAt(0).toUpperCase() + val.slice(1)}`;
+        lines.push("");
+        lines.push(`export const ${storyName}: Story = {`);
+        lines.push(`  render: ${effectiveRecipe.render},`);
+        lines.push(`  args: {`);
+        lines.push(`    ${dim}: ${JSON.stringify(val)},`);
+        for (const line of defaultArgLines) lines.push(line);
+        lines.push(`  },`);
+        lines.push(`};`);
+      }
+    }
+  } else {
+    // Original: single Default story
+    lines.push(`export const Default: Story = {`);
+    lines.push(`  render: ${effectiveRecipe.render},`);
+    if (defaultArgLines.length > 0) {
+      lines.push(`  args: {`);
+      for (const line of defaultArgLines) lines.push(line);
+      lines.push(`  },`);
+    }
+    lines.push(`};`);
   }
-  lines.push(`};`);
   return lines.join("\n");
 }
 
@@ -1701,7 +1753,7 @@ function buildStoryFileContent(comp) {
   }
 
   if (RECIPES[componentName]) {
-    return buildRecipeStoryContent(comp, componentName, importPath, title, source, exportStyle, RECIPES[componentName], defaultArgLines, lucideImports, iconPropNames, needReact);
+    return buildRecipeStoryContent(comp, componentName, importPath, title, source, exportStyle, RECIPES[componentName], defaultArgLines, lucideImports, iconPropNames, needReact, variantMap);
   }
 
   const lines = [];
@@ -1758,10 +1810,13 @@ function buildStoryFileContent(comp) {
   lines.push(`type Story = StoryObj<typeof meta>;`);
   lines.push("");
 
+  // Multi-dimension story generation: variant × size × disabled × AllVariants grid
+  const hasDimensions = Object.keys(variantMap.dimensions).length > 0 || variantMap.booleanStates.length > 0;
+
   // Component-specific stories for non-variant components (Input, Textarea, etc.)
-  // Button and Badge are now handled generically by multi-dimension detection.
-  const skipSpecialFor = new Set(["Button", "Badge"]);
-  if (!skipSpecialFor.has(componentName)) {
+  // Skip buildSpecialStories when multi-dimension detection found CVA dimensions —
+  // generic detection produces better stories than hardcoded ones.
+  if (!hasDimensions) {
     const specialStories = buildSpecialStories(componentName, variants);
     if (specialStories) {
       lines.push(specialStories);
@@ -1776,9 +1831,6 @@ function buildStoryFileContent(comp) {
   const renderLine     = buildProfileRenderLine(profile, RenderTarget, argsFallback);
   const childrenArgLine = buildProfileChildrenArgLine(profile);
 
-  // Multi-dimension story generation: variant × size × disabled × AllVariants grid
-  const hasDimensions = Object.keys(variantMap.dimensions).length > 0 || variantMap.booleanStates.length > 0;
-
   if (hasDimensions) {
     const multiStories = buildMultiDimensionStories(
       variantMap, renderLine, childrenArgLine, defaultArgLines, componentName
@@ -1855,15 +1907,21 @@ function scanGridSystemFallback() {
           // Grid columns
           while ((m = colRe.exec(content)) !== null) {
             const col = m[1];
-            if (!gridCols[col]) gridCols[col] = { count: 0 };
+            if (!gridCols[col]) gridCols[col] = { count: 0, topFiles: [] };
             gridCols[col].count++;
+            if (!gridCols[col].topFiles.includes(shortName) && gridCols[col].topFiles.length < 5) {
+              gridCols[col].topFiles.push(shortName);
+            }
           }
 
           // Gaps
           while ((m = gapRe.exec(content)) !== null) {
             const gap = m[1];
-            if (!gaps[gap]) gaps[gap] = { count: 0 };
+            if (!gaps[gap]) gaps[gap] = { count: 0, topFiles: [] };
             gaps[gap].count++;
+            if (!gaps[gap].topFiles.includes(shortName) && gaps[gap].topFiles.length < 5) {
+              gaps[gap].topFiles.push(shortName);
+            }
           }
 
           // Max widths
@@ -2519,11 +2577,11 @@ function writeFoundationsStories(foundations) {
       "            </p>",
       "            <p style={{ margin: \"0 0 12px\", fontSize: 12, color: \"#475569\" }}>gap-* values across all components.</p>",
       "            <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 8 }}>",
-      "              {(gapEntries as [string, number][]).map(([val, count]) => (",
+      "              {(gapEntries as [string, { count: number; topFiles: string[] }][]).map(([val, data]) => (",
       "                <span key={val} style={{ display: \"flex\", alignItems: \"center\", gap: 6,",
       "                  background: \"#0a0f1a\", border: \"1px solid #1e293b\", borderRadius: 6, padding: \"5px 10px\", fontSize: 12 }}>",
       "                  <code style={{ color: \"#67e8f9\" }}>gap-{val}</code>",
-      "                  <span style={{ color: \"#475569\", fontSize: 11 }}>×{count}</span>",
+      "                  <span style={{ color: \"#475569\", fontSize: 11 }}>×{data.count}</span>",
       "                </span>",
       "              ))}",
       "            </div>",
@@ -3325,9 +3383,12 @@ function writeCursorRules(components, foundations) {
   const gridSystem = foundations?.gridSystem;
   if (gridSystem) {
     lines.push(`## 📐 Spacing & Layout (detected in this project)`);
-    if (Object.keys(gaps).length > 0) {
-      const gapLine = Object.entries(gaps).sort((a,b)=>b[1]-a[1]).slice(0,8)
-        .map(([v, c]) => `\`gap-${v}\` ×${c}`).join("  ·  ");
+    const _gaps = gridSystem.gaps || {};
+    if (Object.keys(_gaps).length > 0) {
+      const gapLine = Object.entries(_gaps)
+        .sort((a,b) => (typeof b[1] === "object" ? b[1].count : b[1]) - (typeof a[1] === "object" ? a[1].count : a[1]))
+        .slice(0,8)
+        .map(([v, d]) => `\`gap-${v}\` ×${typeof d === "object" ? d.count : d}`).join("  ·  ");
       lines.push(`**Common gaps:** ${gapLine}`);
     }
     if (Object.keys(gridSystem.gridCols || {}).length > 0) {