vibe-design-system 2.4.3 → 2.4.6

package/bin/init.js

@@ -34,8 +34,28 @@ export default config;
 `;
 
 const STORYBOOK_PREVIEW_TS = `import type { Preview } from "@storybook/react";
+import React from "react";
 import "../src/index.css";
-const preview: Preview = { parameters: { layout: "centered" } };
+
+const preview: Preview = {
+  parameters: {
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "light", value: "#ffffff" },
+        { name: "dark", value: "#020617" },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      // Force dark mode for Lovable/shadcn CSS token resolution
+      document.documentElement.classList.add("dark");
+      return React.createElement(Story, null);
+    },
+  ],
+};
+
 export default preview;
 `;
 

package/package.json

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

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

@@ -399,9 +399,10 @@ function detectExportStyle(source, componentName) {
 function buildSpecialStories(componentName, variants) {
   const lines = [];
 
-  // Simple input-like primitives
+  // Simple input-like primitives — always render real component with args
   if (componentName === "Input") {
     lines.push(`export const Default: Story = {`);
+    lines.push(`  render: (args) => <ComponentRef {...args} />,`);
     lines.push(`  args: {`);
     lines.push(`    placeholder: "Enter your email...",`);
     lines.push(`    type: "email",`);
@@ -412,6 +413,7 @@ function buildSpecialStories(componentName, variants) {
 
   if (componentName === "Textarea") {
     lines.push(`export const Default: Story = {`);
+    lines.push(`  render: (args) => <ComponentRef {...args} />,`);
     lines.push(`  args: {`);
     lines.push(`    placeholder: "Write your message...",`);
     lines.push(`    rows: 4,`);
@@ -422,6 +424,7 @@ function buildSpecialStories(componentName, variants) {
 
   if (componentName === "Label") {
     lines.push(`export const Default: Story = {`);
+    lines.push(`  render: (args) => <ComponentRef {...args} />,`);
     lines.push(`  args: {`);
     lines.push(`    children: "Email address",`);
     lines.push(`    htmlFor: "email",`);
@@ -432,6 +435,7 @@ function buildSpecialStories(componentName, variants) {
 
   if (componentName === "Slider") {
     lines.push(`export const Default: Story = {`);
+    lines.push(`  render: (args) => <ComponentRef {...args} />,`);
     lines.push(`  args: {`);
     lines.push(`    defaultValue: [50],`);
     lines.push(`    max: 100,`);
@@ -443,6 +447,7 @@ function buildSpecialStories(componentName, variants) {
 
   if (componentName === "Calendar") {
     lines.push(`export const Default: Story = {`);
+    lines.push(`  render: (args) => <ComponentRef {...args} />,`);
     lines.push(`  args: {},`);
     lines.push(`};`);
     return lines.join("\n");
@@ -450,6 +455,7 @@ function buildSpecialStories(componentName, variants) {
 
   if (componentName === "InputOtp" || componentName === "InputOTP") {
     lines.push(`export const Default: Story = {`);
+    lines.push(`  render: (args) => <ComponentRef {...args} />,`);
     lines.push(`  args: {`);
     lines.push(`    maxLength: 6,`);
     lines.push(`  },`);
@@ -462,6 +468,7 @@ function buildSpecialStories(componentName, variants) {
     vs.forEach((v, idx) => {
       const storyName = capitalize(v);
       lines.push(`export const ${storyName}: Story = {`);
+      lines.push(`  render: (args) => <ComponentRef {...args} />,`);
       lines.push(`  args: {`);
       lines.push(`    variant: "${v}",`);
       lines.push(`    children: "New",`);
@@ -626,9 +633,10 @@ function buildStoryFileContent(comp) {
     return lines.join("\n");
   }
 
-  // Generic variant-based stories (omit children for img/void components)
+  // Generic variant-based stories — render real component with args (omit children for img/void)
   if (!variants.length) {
     lines.push(`export const Default: Story = {`);
+    lines.push(`  render: (args) => <ComponentRef {...args} />,`);
     lines.push(`  args: {`);
     if (!omitChildren) lines.push(`    children: "${componentName}",`);
     lines.push(`  },`);
@@ -636,6 +644,7 @@ function buildStoryFileContent(comp) {
   } else {
     const defaultVariant = variants[0];
     lines.push(`export const ${capitalize(defaultVariant)}: Story = {`);
+    lines.push(`  render: (args) => <ComponentRef {...args} />,`);
     lines.push(`  args: {`);
     lines.push(`    variant: "${defaultVariant}",`);
     if (!omitChildren) lines.push(`    children: "${componentName}",`);
@@ -645,6 +654,7 @@ function buildStoryFileContent(comp) {
     for (const v of variants.slice(1)) {
       const storyName = capitalize(v);
       lines.push(`export const ${storyName}: Story = {`);
+      lines.push(`  render: (args) => <ComponentRef {...args} />,`);
       lines.push(`  args: {`);
       lines.push(`    variant: "${v}",`);
       if (!omitChildren) lines.push(`    children: "${storyName}",`);
@@ -688,12 +698,14 @@ function writeFoundationsStories(foundations) {
       "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(auto-fill, minmax(140px, 1fr))\", gap: \"1rem\" }}>",
+      "    <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(auto-fill, minmax(160px, 1fr))\", gap: \"1rem\" }}>",
       "      {colors.map(({ name, hex }) => (",
-      "        <div key={name}>",
-      "          <div style={{ backgroundColor: hex, height: 80, borderRadius: 8, border: \"1px solid #333\" }} />",
-      "          <p style={{ marginTop: 8, fontSize: 12 }}>{name}</p>",
-      "          <code style={{ fontSize: 11 }}>{hex}</code>",
+      "        <div key={name} style={{ display: \"flex\", alignItems: \"center\", gap: 12, flexWrap: \"wrap\" }}>",
+      "          <div style={{ backgroundColor: hex, width: 48, height: 48, borderRadius: 8, border: \"1px solid #333\", flexShrink: 0 }} />",
+      "          <div>",
+      "            <p style={{ margin: 0, fontSize: 12, fontWeight: 500 }}>{name}</p>",
+      "            <code style={{ fontSize: 11, color: \"#888\" }}>{hex}</code>",
+      "          </div>",
       "        </div>",
       "      ))}",
       "    </div>",
@@ -705,10 +717,12 @@ function writeFoundationsStories(foundations) {
 
   const typo = foundations?.typography;
   if (typo && typeof typo === "object" && Object.keys(typo).length > 0) {
-    const typoRows = Object.entries(typo).map(([k, v]) => ({
-      token: k,
-      value: typeof v === "object" && v !== null ? (v.family || JSON.stringify(v)) : Array.isArray(v) ? v.join(", ") : String(v),
-    }));
+    const typoRows = Object.entries(typo).map(([k, v]) => {
+      const displayValue = typeof v === "object" && v !== null
+        ? (v.family || v.value || JSON.stringify(v))
+        : Array.isArray(v) ? v.join(", ") : String(v);
+      return { token: k, value: displayValue, fontFamily: displayValue };
+    });
     const typoContent =
       [
         "import type { Meta, StoryObj } from \"@storybook/react\";",
@@ -723,14 +737,14 @@ function writeFoundationsStories(foundations) {
         "  render: () => (",
         "    <div>",
         "      <h2 style={{ marginBottom: 16 }}>Font family & scale</h2>",
-        "      <table style={{ borderCollapse: \"collapse\", width: \"100%\" }}>",
-        "        <thead><tr><th style={{ textAlign: \"left\", padding: 8, borderBottom: \"1px solid #333\" }}>Token</th><th style={{ textAlign: \"left\", padding: 8, borderBottom: \"1px solid #333\" }}>Value</th></tr></thead>",
-        "        <tbody>",
-        "          {typography.map(({ token, value }) => (",
-        "            <tr key={token}><td style={{ padding: 8, borderBottom: \"1px solid #222\" }}>{token}</td><td style={{ padding: 8, borderBottom: \"1px solid #222\" }}>{value}</td></tr>",
-        "          ))}",
-        "        </tbody>",
-        "      </table>",
+        "      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 24 }}>",
+        "        {typography.map(({ token, value, fontFamily }) => (",
+        "          <div key={token} style={{ borderBottom: \"1px solid #222\", paddingBottom: 16 }}>",
+        "            <div style={{ marginBottom: 8 }}><strong>{token}</strong> <code style={{ fontSize: 12, color: \"#888\" }}>{value}</code></div>",
+        "            <div style={{ fontFamily: fontFamily || \"inherit\", fontSize: 18 }}>Aa — The quick brown fox jumps over the lazy dog.</div>",
+        "          </div>",
+        "        ))}",
+        "      </div>",
         "    </div>",
         "  ),",
         "};",
@@ -756,7 +770,7 @@ function writeFoundationsStories(foundations) {
       "    <div style={{ display: \"flex\", gap: 24, flexWrap: \"wrap\", padding: 24 }}>",
       "      {assets.length === 0 ? <p>No brand assets found.</p> : assets.map((a, i) => (",
       "        <div key={i} style={{ textAlign: \"center\" }}>",
-      "          <img src={\"/\" + String(a.path || \"\").replace(\"public/\", \"\")} style={{ maxHeight: 80, maxWidth: 160, objectFit: \"contain\" }} alt={a.name || \"\"} />",
+      "          <img src={\"/\" + String(a.path || \"\").replace(\"public/\", \"\")} style={{ maxHeight: 100, maxWidth: 200, objectFit: \"contain\" }} alt={a.name || \"\"} />",
       "          <div style={{ fontSize: 11, marginTop: 8, color: \"#666\" }}>{a.name || a.type || \"asset\"}</div>",
       "        </div>",
       "      ))}",