vibe-design-system 2.8.49 → 2.8.51

package/package.json

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

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

@@ -677,7 +677,9 @@ function buildMultiDimensionStories(variantMap, renderLine, childrenArgLine, def
         lines.push(`    ${primaryDimension}: "${dimensions[primaryDimension].default || dimensions[primaryDimension].values[0]}",`);
       }
       lines.push(`    ${dimName}: "${val}",`);
-      if (childrenArgLine(componentName)) lines.push(childrenArgLine(componentName));
+      // For icon size use a short symbol; otherwise use component name
+      const childLabel = val === "icon" ? "\u2726" : componentName;
+      if (childrenArgLine(childLabel)) lines.push(childrenArgLine(childLabel));
       for (const line of filteredArgLines) lines.push(line);
       lines.push(`  },`);
       lines.push(`};`);
@@ -709,29 +711,51 @@ function buildMultiDimensionStories(variantMap, renderLine, childrenArgLine, def
     const secondaryDim = secondaryDimensions.find((d) => dimensions[d] && dimensions[d].values.length >= 2);
 
     lines.push(`export const AllVariants: Story = {`);
-    lines.push(`  render: () => (`);
-    lines.push(`    <div style={{ display: "flex", flexDirection: "column", gap: 16, padding: 16 }}>`);
+    lines.push(`  parameters: { layout: "padded" },`);
+    lines.push(`  render: () => {`);
 
     if (secondaryDim) {
       const secondaryValues = dimensions[secondaryDim].values;
+      const colCount = secondaryValues.length;
+
+      // Style constants for the grid
+      lines.push(`    const hdr: React.CSSProperties = { textAlign: "center", fontSize: 11, fontWeight: 600, color: "#6b7280", fontFamily: "monospace", textTransform: "uppercase", letterSpacing: "0.05em", padding: "0 4px" };`);
+      lines.push(`    const lbl: React.CSSProperties = { fontSize: 12, fontWeight: 500, color: "#374151", fontFamily: "monospace" };`);
+      lines.push(`    const cell: React.CSSProperties = { display: "flex", justifyContent: "center", alignItems: "center" };`);
+      lines.push(`    return (`);
+      lines.push(`      <div style={{ padding: 24 }}>`);
+      lines.push(`        <div style={{ display: "grid", gridTemplateColumns: "100px repeat(${colCount}, minmax(80px, 1fr))", gap: "16px 12px", alignItems: "center" }}>`);
+
+      // Header row: empty corner + secondary dimension labels
+      lines.push(`          <div />`);
+      for (const sVal of secondaryValues) {
+        lines.push(`          <div style={hdr}>${sVal}</div>`);
+      }
+
+      // Data rows: primary label + component cells
       for (const pVal of primaryValues) {
-        lines.push(`      <div style={{ display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center" }}>`);
-        lines.push(`        <span style={{ width: 90, fontSize: 12, color: "#888", fontFamily: "monospace" }}>${pVal}</span>`);
+        lines.push(`          <div style={lbl}>${pVal}</div>`);
         for (const sVal of secondaryValues) {
-          lines.push(`        <ComponentRef ${primaryDimension}="${pVal}" ${secondaryDim}="${sVal}">${pVal}</ComponentRef>`);
+          const childText = sVal === "icon" ? "\u2726" : componentName;
+          lines.push(`          <div style={cell}><ComponentRef ${primaryDimension}="${pVal}" ${secondaryDim}="${sVal}">${childText}</ComponentRef></div>`);
         }
-        lines.push(`      </div>`);
       }
+
+      lines.push(`        </div>`);
+      lines.push(`      </div>`);
+      lines.push(`    );`);
     } else {
-      lines.push(`      <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>`);
+      // No secondary dimension — labeled flex layout
+      lines.push(`    return (`);
+      lines.push(`      <div style={{ display: "flex", flexWrap: "wrap", gap: 12, padding: 24, alignItems: "center" }}>`);
       for (const val of primaryValues) {
-        lines.push(`        <ComponentRef ${primaryDimension}="${val}">${val}</ComponentRef>`);
+        lines.push(`        <ComponentRef ${primaryDimension}="${val}">${componentName}</ComponentRef>`);
       }
       lines.push(`      </div>`);
+      lines.push(`    );`);
     }
 
-    lines.push(`    </div>`);
-    lines.push(`  ),`);
+    lines.push(`  },`);
     lines.push(`};`);
   }
 
@@ -1579,7 +1603,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})`)},`;
@@ -1595,7 +1627,7 @@ function buildProfileRenderLine(profile, RenderTarget, argsFallback) {
  */
 function buildProfileChildrenArgLine(profile) {
   return (label) => {
-    if (profile === "WRAPPER") return `    children: ${JSON.stringify(label)},`;
+    if (profile === "WRAPPER" || profile === "VARIANT") return `    children: ${JSON.stringify(label)},`;
     return null;
   };
 }
@@ -1697,6 +1729,8 @@ function buildStoryFileContent(comp) {
   lines.push(`  component: ComponentRef,`);
   // SECTION: no props/args → autodocs tries to render React.lazy without Suspense → useRef crash
   if (profile !== "SECTION") lines.push(`  tags: ["autodocs"],`);
+  // Center small components (VARIANT, WRAPPER, CONFIGURED, SAFE) to prevent vertical stretching
+  if (profile !== "SECTION") lines.push(`  parameters: { layout: "centered" },`);
 
   // Build argTypes from extracted TypeScript props + icon-specific overrides
   const argTypeEntries = [];
@@ -1770,6 +1804,90 @@ 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 };
+            gridCols[col].count++;
+          }
+
+          // Gaps
+          while ((m = gapRe.exec(content)) !== null) {
+            const gap = m[1];
+            if (!gaps[gap]) gaps[gap] = { count: 0 };
+            gaps[gap].count++;
+          }
+
+          // 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);
@@ -2249,7 +2367,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 || {});