vibe-design-system 2.8.50 → 2.8.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.8.50",
+  "version": "2.8.53",
   "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");
 }
 
@@ -1603,7 +1655,15 @@ function buildProfileRenderLine(profile, RenderTarget, argsFallback) {
       )},`;
     case "SAFE":
       return `  render: (args = {}) => ${suspense(`React.createElement(${RenderTarget}, args)`)},`;
-    default: { // CONFIGURED, VARIANT
+    case "VARIANT": {
+      // Wrap in inline-block div to prevent vertical stretching caused by
+      // global SidebarProvider/flex decorators or layout: "fullscreen" in preview.
+      const argsParam = argsFallback ? "(args = {})" : "(args)";
+      const propsArg  = argsFallback ? `{ ...args${argsFallback} }` : "args";
+      const inner = suspense(`React.createElement(${RenderTarget}, ${propsArg})`);
+      return `  render: ${argsParam} => React.createElement('div', { style: { display: 'inline-block' } }, ${inner}),`;
+    }
+    default: { // CONFIGURED
       const argsParam = argsFallback ? "(args = {})" : "(args)";
       const propsArg  = argsFallback ? `{ ...args${argsFallback} }` : "args";
       return `  render: ${argsParam} => ${suspense(`React.createElement(${RenderTarget}, ${propsArg})`)},`;
@@ -1693,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 = [];
@@ -1750,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);
@@ -1768,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
@@ -1796,6 +1856,96 @@ function buildStoryFileContent(comp) {
   return lines.join("\n");
 }
 
+/**
+ * Fallback grid system scanner — reads source files for Tailwind grid patterns
+ * when scan.mjs didn't produce gridSystem data.
+ */
+function scanGridSystemFallback() {
+  const srcDirs = [
+    path.join(PROJECT_ROOT, "src"),
+    path.join(PROJECT_ROOT, "client/src"),
+    path.join(PROJECT_ROOT, "app"),
+  ];
+  const breakpoints = {};  // { "md": { count, topFiles: [] }, ... }
+  const gridCols = {};     // { "2": { count }, "3": { count }, ... }
+  const gaps = {};          // { "4": { count }, "6": { count }, ... }
+  const maxWidths = {};     // { "7xl": count, ... }
+  let containerCount = 0;
+
+  const BP_NAMES = ["sm", "md", "lg", "xl", "2xl"];
+  const bpRe = /\b(sm|md|lg|xl|2xl):/g;
+  const colRe = /\bgrid-cols-(\w+)/g;
+  const gapRe = /\bgap-(\w+)/g;
+  const maxWRe = /\bmax-w-(\w+)/g;
+  const containerRe = /\bcontainer\b/g;
+
+  function walkFiles(dir) {
+    if (!fs.existsSync(dir)) return;
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    for (const entry of entries) {
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        if (["node_modules", ".next", "dist", "build", ".storybook", "stories"].includes(entry.name)) continue;
+        walkFiles(full);
+      } else if (/\.(tsx|jsx|ts|js|css)$/.test(entry.name)) {
+        try {
+          const content = fs.readFileSync(full, "utf-8");
+          const relFile = path.relative(PROJECT_ROOT, full).replace(/^(client\/)?src\//, "");
+          const shortName = path.basename(relFile, path.extname(relFile));
+
+          // Breakpoints
+          let m;
+          while ((m = bpRe.exec(content)) !== null) {
+            const bp = m[1];
+            if (!breakpoints[bp]) breakpoints[bp] = { count: 0, topFiles: [] };
+            breakpoints[bp].count++;
+            if (!breakpoints[bp].topFiles.includes(shortName) && breakpoints[bp].topFiles.length < 5) {
+              breakpoints[bp].topFiles.push(shortName);
+            }
+          }
+
+          // Grid columns
+          while ((m = colRe.exec(content)) !== null) {
+            const col = m[1];
+            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, topFiles: [] };
+            gaps[gap].count++;
+            if (!gaps[gap].topFiles.includes(shortName) && gaps[gap].topFiles.length < 5) {
+              gaps[gap].topFiles.push(shortName);
+            }
+          }
+
+          // Max widths
+          while ((m = maxWRe.exec(content)) !== null) {
+            const mw = m[1];
+            if (!maxWidths[mw]) maxWidths[mw] = 0;
+            maxWidths[mw]++;
+          }
+
+          // Container
+          const cMatches = content.match(containerRe);
+          if (cMatches) containerCount += cMatches.length;
+
+        } catch { /* skip unreadable files */ }
+      }
+    }
+  }
+
+  for (const dir of srcDirs) walkFiles(dir);
+
+  if (Object.keys(breakpoints).length === 0 && Object.keys(gridCols).length === 0) return null;
+  return { breakpoints, gridCols, gaps, maxWidths, containerCount };
+}
+
 function writeFoundationsStories(foundations) {
   const foundationsDir = path.join(STORIES_DIR, "foundations");
   ensureDir(foundationsDir);
@@ -2275,7 +2425,11 @@ function writeFoundationsStories(foundations) {
     console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Icons.stories.tsx")));
   }
 
-  const gridSystem = foundations?.gridSystem;
+  // Fallback: if scan.mjs didn't produce gridSystem data, scan source files directly
+  let gridSystem = foundations?.gridSystem || null;
+  if (!gridSystem || (Object.keys(gridSystem.breakpoints || {}).length === 0 && Object.keys(gridSystem.gridCols || {}).length === 0)) {
+    gridSystem = scanGridSystemFallback();
+  }
   if (gridSystem && (Object.keys(gridSystem.breakpoints || {}).length > 0 || Object.keys(gridSystem.gridCols || {}).length > 0)) {
     const bpEntries = Object.entries(gridSystem.breakpoints || {});
     const colEntries = Object.entries(gridSystem.gridCols || {});