vibe-design-system 2.8.48 → 2.8.50

package/package.json

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

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

@@ -74,7 +74,7 @@ const DEFAULT_SKIP_LIST = [
   "Form",
   "Toaster",
   "Toast",
-  "Button",
+  // Button removed — now handled by multi-dimension detection (variant × size × disabled)
 ];
 
 // Merge default with project-specific overrides from vds.config.js
@@ -441,6 +441,329 @@ function parseUnionLiterals(type) {
   return matches.map((s) => s.replace(/"/g, ""));
 }
 
+// ─── Multi-Dimension State Detection ─────────────────────────────────────────
+
+/**
+ * Parse ALL CVA variant dimensions from component source (not just "variant").
+ * Returns: { variant: ["default", "secondary", ...], size: ["sm", "md", "lg"], ... }
+ */
+function parseCvaAllDimensions(source) {
+  if (!source) return {};
+  // Find "variants:" or "variants :" block
+  const variantsIdx = source.search(/variants\s*:\s*\{/);
+  if (variantsIdx === -1) return {};
+
+  const braceStart = source.indexOf("{", variantsIdx + 8);
+  if (braceStart === -1) return {};
+
+  // Brace-count to find matching close brace
+  let depth = 0, braceEnd = -1;
+  for (let i = braceStart; i < source.length; i++) {
+    if (source[i] === "{") depth++;
+    else if (source[i] === "}") { depth--; if (depth === 0) { braceEnd = i; break; } }
+  }
+  if (braceEnd === -1) return {};
+
+  const variantsBody = source.slice(braceStart + 1, braceEnd);
+
+  // Extract each dimension key and its sub-block keys
+  const result = {};
+  const dimRe = /(\w+)\s*:\s*\{/g;
+  let dm;
+  while ((dm = dimRe.exec(variantsBody)) !== null) {
+    const dimName = dm[1];
+    const subStart = dm.index + dm[0].length - 1;
+    // Brace-count for this dimension's sub-block
+    let d = 0, subEnd = -1;
+    for (let i = subStart; i < variantsBody.length; i++) {
+      if (variantsBody[i] === "{") d++;
+      else if (variantsBody[i] === "}") { d--; if (d === 0) { subEnd = i; break; } }
+    }
+    if (subEnd === -1) continue;
+    const subBody = variantsBody.slice(subStart + 1, subEnd);
+    const keys = [];
+    const keyRe = /^\s*([A-Za-z_][\w]*)\s*:/gm;
+    let km;
+    while ((km = keyRe.exec(subBody)) !== null) {
+      keys.push(km[1]);
+    }
+    if (keys.length > 0) result[dimName] = keys;
+  }
+  return result;
+}
+
+/**
+ * Parse CVA defaultVariants block.
+ * Returns: { variant: "default", size: "default" }
+ */
+function parseCvaDefaultVariants(source) {
+  if (!source) return {};
+  const idx = source.search(/defaultVariants\s*:\s*\{/);
+  if (idx === -1) return {};
+  const braceStart = source.indexOf("{", idx + 15);
+  if (braceStart === -1) return {};
+  let depth = 0, braceEnd = -1;
+  for (let i = braceStart; i < source.length; i++) {
+    if (source[i] === "{") depth++;
+    else if (source[i] === "}") { depth--; if (depth === 0) { braceEnd = i; break; } }
+  }
+  if (braceEnd === -1) return {};
+  const body = source.slice(braceStart + 1, braceEnd);
+  const result = {};
+  const re = /(\w+)\s*:\s*["']([^"']+)["']/g;
+  let m;
+  while ((m = re.exec(body)) !== null) {
+    result[m[1]] = m[2];
+  }
+  return result;
+}
+
+/** Known boolean prop names that represent visual states worth showing in Storybook. */
+const BOOLEAN_STATE_PROP_NAMES = new Set([
+  "disabled", "loading", "isLoading", "active", "isActive",
+  "checked", "isChecked", "selected", "isSelected",
+  "error", "isError", "readOnly", "isReadOnly",
+]);
+
+/**
+ * Detect boolean state props from effectiveProps.
+ * Returns: ["disabled", "loading"]
+ */
+function detectBooleanStateProps(effectiveProps) {
+  if (!Array.isArray(effectiveProps)) return [];
+  return effectiveProps
+    .filter((p) => {
+      const type = (p.type || "").trim();
+      const isBool = /^boolean/.test(type) || type === "boolean | undefined" || type === "boolean | null";
+      return isBool && BOOLEAN_STATE_PROP_NAMES.has(p.name);
+    })
+    .map((p) => p.name);
+}
+
+/**
+ * Detect all string union/enum props from effectiveProps (e.g., color: "red" | "blue").
+ * Returns: [{ name: "color", values: ["red", "blue", "green"] }]
+ */
+function detectUnionEnumProps(effectiveProps) {
+  if (!Array.isArray(effectiveProps)) return [];
+  const results = [];
+  for (const p of effectiveProps) {
+    const type = (p.type || "").trim();
+    if (/^['"][^'"]+['"](\s*\|\s*['"][^'"]+['"])+/.test(type)) {
+      const values = parseUnionLiterals(type);
+      if (values.length >= 2) {
+        results.push({ name: p.name, values });
+      }
+    }
+  }
+  return results;
+}
+
+/** Priority order for determining which dimension is "primary" (gets individual stories). */
+const DIMENSION_PRIORITY = ["variant", "type", "status", "color", "kind", "mode", "side"];
+
+/**
+ * Build a complete variant map from source + effectiveProps.
+ * Combines CVA dimensions, TypeScript union props, and boolean states.
+ */
+function buildComponentVariantMap(source, effectiveProps) {
+  const map = { dimensions: {}, booleanStates: [], primaryDimension: null, secondaryDimensions: [] };
+
+  // 1. Parse CVA dimensions from source
+  const cvaDims = parseCvaAllDimensions(source);
+  const cvaDefaults = parseCvaDefaultVariants(source);
+  for (const [dimName, values] of Object.entries(cvaDims)) {
+    map.dimensions[dimName] = { values, default: cvaDefaults[dimName] || values[0], source: "cva" };
+  }
+
+  // 2. Parse union enum props from TypeScript types (only if not already from CVA)
+  const unionProps = detectUnionEnumProps(effectiveProps);
+  for (const { name, values } of unionProps) {
+    if (!map.dimensions[name]) {
+      map.dimensions[name] = { values, default: values[0], source: "typescript" };
+    }
+  }
+
+  // 3. Detect boolean state props
+  map.booleanStates = detectBooleanStateProps(effectiveProps);
+
+  // 4. Determine primary and secondary dimensions
+  const dimNames = Object.keys(map.dimensions);
+  for (const candidate of DIMENSION_PRIORITY) {
+    if (dimNames.includes(candidate)) {
+      map.primaryDimension = candidate;
+      break;
+    }
+  }
+  if (!map.primaryDimension && dimNames.length > 0) {
+    map.primaryDimension = dimNames[0];
+  }
+  map.secondaryDimensions = dimNames.filter((d) => d !== map.primaryDimension);
+
+  return map;
+}
+
+/**
+ * Generate multi-dimension stories: individual per variant, per size, per state, + AllVariants grid.
+ */
+function buildMultiDimensionStories(variantMap, renderLine, childrenArgLine, defaultArgLines, componentName) {
+  const lines = [];
+  const { dimensions, booleanStates, primaryDimension, secondaryDimensions } = variantMap;
+
+  // Filter defaultArgLines to exclude dimension props (they are set explicitly per story)
+  const allDimNames = new Set(Object.keys(dimensions));
+  const filteredArgLines = defaultArgLines.filter((line) => {
+    const match = line.match(/^\s+(\w+)\s*:/);
+    return !match || !allDimNames.has(match[1]);
+  });
+
+  // --- A. Primary dimension stories (one per value) ---
+  if (primaryDimension && dimensions[primaryDimension]) {
+    const dim = dimensions[primaryDimension];
+    const defaultValue = dim.default || dim.values[0];
+
+    // Default story uses the default value
+    lines.push(`export const Default: Story = {`);
+    lines.push(renderLine);
+    lines.push(`  args: {`);
+    lines.push(`    ${primaryDimension}: "${defaultValue}",`);
+    if (childrenArgLine(componentName)) lines.push(childrenArgLine(componentName));
+    for (const line of filteredArgLines) lines.push(line);
+    lines.push(`  },`);
+    lines.push(`};`);
+    lines.push("");
+
+    // Remaining values get their own stories
+    for (const val of dim.values) {
+      if (val === defaultValue) continue;
+      const storyName = capitalize(val);
+      lines.push(`export const ${storyName}: Story = {`);
+      lines.push(renderLine);
+      lines.push(`  args: {`);
+      lines.push(`    ${primaryDimension}: "${val}",`);
+      if (childrenArgLine(capitalize(val))) lines.push(childrenArgLine(capitalize(val)));
+      for (const line of filteredArgLines) lines.push(line);
+      lines.push(`  },`);
+      lines.push(`};`);
+      lines.push("");
+    }
+  } else {
+    // No primary dimension — single Default story
+    lines.push(`export const Default: Story = {`);
+    lines.push(renderLine);
+    const storyArgLines = [];
+    if (childrenArgLine(componentName)) storyArgLines.push(childrenArgLine(componentName));
+    for (const line of filteredArgLines) storyArgLines.push(line);
+    if (storyArgLines.length > 0) {
+      lines.push(`  args: {`);
+      for (const line of storyArgLines) lines.push(line);
+      lines.push(`  },`);
+    }
+    lines.push(`};`);
+    lines.push("");
+  }
+
+  // --- B. Secondary dimension stories (one per non-default value) ---
+  for (const dimName of secondaryDimensions) {
+    const dim = dimensions[dimName];
+    if (!dim || dim.values.length <= 1) continue;
+    for (const val of dim.values) {
+      if (val === (dim.default || dim.values[0])) continue;
+      const storyName = capitalize(dimName) + capitalize(val);
+      lines.push(`export const ${storyName}: Story = {`);
+      lines.push(renderLine);
+      lines.push(`  args: {`);
+      if (primaryDimension && dimensions[primaryDimension]) {
+        lines.push(`    ${primaryDimension}: "${dimensions[primaryDimension].default || dimensions[primaryDimension].values[0]}",`);
+      }
+      lines.push(`    ${dimName}: "${val}",`);
+      // 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(`};`);
+      lines.push("");
+    }
+  }
+
+  // --- C. Boolean state stories ---
+  for (const boolProp of booleanStates) {
+    if (boolProp === "open" || boolProp === "isOpen") continue;
+    const storyName = capitalize(boolProp);
+    lines.push(`export const ${storyName}: Story = {`);
+    lines.push(renderLine);
+    lines.push(`  args: {`);
+    if (primaryDimension && dimensions[primaryDimension]) {
+      lines.push(`    ${primaryDimension}: "${dimensions[primaryDimension].default || dimensions[primaryDimension].values[0]}",`);
+    }
+    lines.push(`    ${boolProp}: true,`);
+    if (childrenArgLine(componentName)) lines.push(childrenArgLine(componentName));
+    for (const line of filteredArgLines) lines.push(line);
+    lines.push(`  },`);
+    lines.push(`};`);
+    lines.push("");
+  }
+
+  // --- D. AllVariants grid story (only if primary has 2+ values) ---
+  if (primaryDimension && dimensions[primaryDimension] && dimensions[primaryDimension].values.length >= 2) {
+    const primaryValues = dimensions[primaryDimension].values;
+    const secondaryDim = secondaryDimensions.find((d) => dimensions[d] && dimensions[d].values.length >= 2);
+
+    lines.push(`export const AllVariants: Story = {`);
+    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={lbl}>${pVal}</div>`);
+        for (const sVal of secondaryValues) {
+          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(`    );`);
+    } else {
+      // 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}">${componentName}</ComponentRef>`);
+      }
+      lines.push(`      </div>`);
+      lines.push(`    );`);
+    }
+
+    lines.push(`  },`);
+    lines.push(`};`);
+  }
+
+  return lines.join("\n");
+}
+
+// ─── End Multi-Dimension Detection ───────────────────────────────────────────
+
 /** Parse props with types from component source (interface/type or inline props). Returns [{ name, type, required }]. */
 function parsePropsFromSource(source) {
   if (!source || typeof source !== "string") return [];
@@ -1246,8 +1569,15 @@ function buildArgTypeEntry(prop) {
  * @param {Array<{name:string,type:string,required:boolean}>} effectiveProps
  * @returns {"SAFE"|"SECTION"|"WRAPPER"|"VARIANT"|"CONFIGURED"}
  */
-function getStoryProfile(componentName, source, effectiveProps) {
+function getStoryProfile(componentName, source, effectiveProps, variantMap) {
   if (componentName && SAFE_WRAPPER_DEFAULTS[componentName]) return "SAFE";
+  // Check for ANY multi-value dimensions (variant, size, color, etc.) or boolean states
+  // This must run BEFORE the SECTION check because CVA components (Button, Badge) may have
+  // empty effectiveProps (types come from VariantProps<typeof ...>) but still have dimensions.
+  if (variantMap) {
+    const hasDimensions = Object.keys(variantMap.dimensions).length > 0;
+    if (hasDimensions || variantMap.booleanStates.length > 0) return "VARIANT";
+  }
   if (effectiveProps.length === 0) return "SECTION";
   if (hasChildrenPropReactNode(effectiveProps)) return "WRAPPER";
   if (effectiveProps.some(p => p.name === "variant")) return "VARIANT";
@@ -1289,7 +1619,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;
   };
 }
@@ -1319,38 +1649,11 @@ function buildStoryFileContent(comp) {
   // Title: "Module/ComponentName"  (category intentionally dropped — folder is the context)
   const title = `${group}/${componentName}`;
 
-  const props = Array.isArray(comp.props) ? comp.props : [];
-  const variantProp = props.find((p) => p.name === "variant");
-  let variants = parseUnionLiterals(variantProp && variantProp.type);
-
   const srcPath = isPageFile
     ? path.join(PROJECT_ROOT, fileNoExt.replace(/^src\//, "src/") + ".tsx")
     : path.join(PROJECT_ROOT, COMPONENTS_REL_DIR, comp.file);
 
-  // Fallback: if manifest doesn't have variant metadata yet, parse cva() directly from component file.
-  if (!variants.length) {
-    try {
-      if (fs.existsSync(srcPath)) {
-        const code = fs.readFileSync(srcPath, "utf-8");
-        // Roughly match shadcn-style: variants: { variant: { ... }, size: { ... } }
-        const m = code.match(/variant\s*:\s*{([\s\S]*?)}\s*,\s*size\s*:/);
-        if (m) {
-          const body = m[1];
-          const names = [];
-          const lineRe = /^\s*([A-Za-z0-9_]+)\s*:/gm;
-          let lm;
-          while ((lm = lineRe.exec(body))) {
-            names.push(lm[1]);
-          }
-          if (names.length) variants = names;
-        }
-      }
-    } catch {
-      // best-effort; ignore parsing errors
-    }
-  }
-
-  // Read component source to detect export style for import
+  // Read component source once (used for export style, props, CVA parsing)
   let source = "";
   try {
     if (fs.existsSync(srcPath)) {
@@ -1366,9 +1669,15 @@ function buildStoryFileContent(comp) {
   const effectiveProps = Array.isArray(comp.props) && comp.props.length > 0 ? comp.props : parsePropsFromSource(source);
   const usageFromPages = findComponentUsageInPages(componentName, PROJECT_ROOT);
 
+  // Build complete variant map: CVA dimensions + TypeScript union props + boolean states
+  const variantMap = buildComponentVariantMap(source, effectiveProps);
+
+  // Legacy compat: extract flat variants array for buildSpecialStories
+  const variants = variantMap.dimensions.variant ? variantMap.dimensions.variant.values : [];
+
   // Profile: single source of truth — replaces omitChildren, useReactNodeChildrenRender,
   // isNoPropsFeature, useSafeWrapper, argsParam, propsArg flags.
-  const profile = getStoryProfile(componentName, source, effectiveProps);
+  const profile = getStoryProfile(componentName, source, effectiveProps, variantMap);
   const propSummary = effectiveProps.length > 0 ? ` (${effectiveProps.length} props)` : "";
   console.log(`[VDS] ${componentName} → ${profile}${propSummary}`);
 
@@ -1412,6 +1721,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 = [];
@@ -1439,11 +1750,15 @@ function buildStoryFileContent(comp) {
   lines.push(`type Story = StoryObj<typeof meta>;`);
   lines.push("");
 
-  // Component-specific stories (inputs, composite components, etc.)
-  const specialStories = buildSpecialStories(componentName, variants);
-  if (specialStories) {
-    lines.push(specialStories);
-    return lines.join("\n");
+  // 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)) {
+    const specialStories = buildSpecialStories(componentName, variants);
+    if (specialStories) {
+      lines.push(specialStories);
+      return lines.join("\n");
+    }
   }
 
   // Profile-driven render + children — single source of truth via getStoryProfile()
@@ -1453,7 +1768,18 @@ function buildStoryFileContent(comp) {
   const renderLine     = buildProfileRenderLine(profile, RenderTarget, argsFallback);
   const childrenArgLine = buildProfileChildrenArgLine(profile);
 
-  if (!variants.length) {
+  // 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
+    );
+    if (multiStories) {
+      lines.push(multiStories);
+    }
+  } else {
+    // No dimensions detected: single Default story
     lines.push(`export const Default: Story = {`);
     lines.push(renderLine);
     const storyArgLines = [];
@@ -1465,29 +1791,6 @@ function buildStoryFileContent(comp) {
       lines.push(`  },`);
     }
     lines.push(`};`);
-  } else {
-    const defaultVariant = variants[0];
-    lines.push(`export const ${capitalize(defaultVariant)}: Story = {`);
-    lines.push(renderLine);
-    lines.push(`  args: {`);
-    lines.push(`    variant: "${defaultVariant}",`);
-    if (childrenArgLine(componentName)) lines.push(childrenArgLine(componentName));
-    for (const line of defaultArgLines) lines.push(line);
-    lines.push(`  },`);
-    lines.push(`};`);
-    lines.push("");
-    for (const v of variants.slice(1)) {
-      const storyName = capitalize(v);
-      lines.push(`export const ${storyName}: Story = {`);
-      lines.push(renderLine);
-      lines.push(`  args: {`);
-      lines.push(`    variant: "${v}",`);
-      if (childrenArgLine(storyName)) lines.push(childrenArgLine(storyName));
-      for (const line of defaultArgLines) lines.push(line);
-      lines.push(`  },`);
-      lines.push(`};`);
-      lines.push("");
-    }
   }
 
   return lines.join("\n");
@@ -3054,14 +3357,27 @@ function main() {
     // Skip unclassified and shadcn/ui primitives (UI group) — they're documented at ui.shadcn.com
     // Only project-specific module groups (Circles, Finance, Projects, Time, …) get stories
     const g = comp.group || "Components";
+    // Skip shadcn/ui primitives by default — they're documented at ui.shadcn.com
+    // Users can override with vds.config.js: includeGroups: ["shadcn"] or includeComponents: ["Button", "Badge"]
+    const includeGroups = VDS_CONFIG.includeGroups || [];
+    const includeComponents = VDS_CONFIG.includeComponents || [];
     if (g === "Uncategorized" || g === "UI" || g === "shadcn" || g === "ui") {
-      // Clean up leftover story files for components that are now in the skip group
-      const oldStory = path.join(STORIES_DIR, `${componentName}.stories.tsx`);
-      if (fs.existsSync(oldStory)) {
-        fs.unlinkSync(oldStory);
-        console.log(`[VDS] Removed shadcn/ui story: ${componentName}.stories.tsx`);
+      const groupIncluded = includeGroups.some((ig) => ig.toLowerCase() === g.toLowerCase());
+      const compIncluded = includeComponents.includes(componentName);
+      if (!groupIncluded && !compIncluded) {
+        // Clean up leftover story files for components that are now in the skip group
+        const oldStory = path.join(STORIES_DIR, `${componentName}.stories.tsx`);
+        if (fs.existsSync(oldStory)) {
+          try {
+            const firstLine = fs.readFileSync(oldStory, "utf-8").split("\n")[0] || "";
+            if (firstLine.includes("@vds-regenerate")) {
+              fs.unlinkSync(oldStory);
+              console.log(`[VDS] Removed shadcn/ui story: ${componentName}.stories.tsx`);
+            }
+          } catch { /* ignore */ }
+        }
+        continue;
       }
-      continue;
     }
     if (onlyName && componentName !== onlyName) continue;