vibe-design-system 2.5.42 → 2.5.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.5.42",
+  "version": "2.5.43",
   "description": "Auto-generate design systems for vibe coding projects",
   "type": "module",
   "bin": {

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

@@ -20,6 +20,9 @@ const VDS_OUTPUT = path.join(PROJECT_ROOT, "vds-output.json");
 const SRC_DIR = path.join(PROJECT_ROOT, "src");
 const STORIES_DIR = path.join(SRC_DIR, "stories");
 
+// Filled in main() after reading vds-output.json so helpers (buildSpecialStories) can see foundations data (e.g. buttonUsage).
+let FOUNDATIONS_DATA = null;
+
 // CSS is loaded from .storybook/preview.tsx — never add CSS import to story files.
 
 // Components we don't want to auto-generate stories for (project-specific dashboards, heavy UIs, etc.)
@@ -843,6 +846,30 @@ function detectExportStyle(source, componentName) {
 function buildSpecialStories(componentName, variants) {
   const lines = [];
 
+  // Button: show used variant/size/asChild combinations from buttonUsage (if available)
+  if (componentName === "Button") {
+    const usage = FOUNDATIONS_DATA?.buttonUsage;
+    const combos = Array.isArray(usage?.combos) && usage.combos.length
+      ? usage.combos
+      : (variants && variants.length ? variants.map((v) => ({ key: v, variant: v, size: "default", asChild: false, count: 1 })) : []);
+    lines.push(`export const UsedVariants: Story = {`);
+    lines.push(`  render: () => (`);
+    lines.push(`    <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>`);
+    lines.push(`      {${JSON.stringify(combos)}.map((c) => (`);
+    lines.push(`        <ComponentRef`);
+    lines.push(`          key={c.key}`);
+    lines.push(`          variant={c.variant}`);
+    lines.push(`          size={c.size}`);
+    lines.push(`        >`);
+    lines.push(`          {c.variant}{c.size !== "default" ? " · " + c.size : ""}`);
+    lines.push(`        </ComponentRef>`);
+    lines.push(`      ))}`);
+    lines.push(`    </div>`);
+    lines.push(`  ),`);
+    lines.push(`};`);
+    return lines.join("\\n");
+  }
+
   // Simple input-like primitives — always render real component with args
   if (componentName === "Input") {
     lines.push(`export const Default: Story = {`);
@@ -1452,6 +1479,7 @@ function main() {
   const data = JSON.parse(raw);
   const components = Array.isArray(data.components) ? data.components : [];
   const foundations = data.foundations || null;
+  FOUNDATIONS_DATA = foundations;
 
   const onlyName = process.argv[2] || null;