vibe-design-system 1.9.2 → 1.9.4

package/package.json

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

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

@@ -4,7 +4,7 @@
  *
  * Reads vds-output.json and generates:
  * - Storybook .stories.tsx files under src/stories for each component
- * - Foundations MDX: Colors, Typography, Brand under src/stories/foundations/
+ * - Foundations .stories.tsx: Colors, Typography, Brand under src/stories/foundations/
  *
  * Usage:
  *   node vds-core/story-generator.mjs        # generate for all components
@@ -22,7 +22,7 @@ const STORIES_DIR = path.join(SRC_DIR, "stories");
 
 // Top of every story file for CSS variables
 const STORY_CSS_HEADER = `// @ts-ignore
-import '../../index.css'
+import '../index.css'
 
 `;
 
@@ -42,6 +42,10 @@ const SKIP_LIST = [
   "ToggleGroup",
   "Sidebar",
   "TestComponent",
+  "Chart",
+  "InputOtp",
+  "Resizable",
+  "Sonner",
 ];
 
 function ensureDir(dir) {
@@ -443,83 +447,106 @@ function getColorEntries(colors) {
   return entries;
 }
 
-function writeFoundationsMdx(foundations) {
+function writeFoundationsStories(foundations) {
   const foundationsDir = path.join(STORIES_DIR, "foundations");
   ensureDir(foundationsDir);
 
-  const colors = foundations?.colors;
-  const colorEntries = getColorEntries(colors);
-  if (colorEntries.length > 0) {
-    const colorLines = [
-      "import { Meta } from '@storybook/blocks';",
+  const colorEntries = getColorEntries(foundations?.colors);
+  const colorsContent =
+    STORY_CSS_HEADER +
+    [
+      "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
-      "<Meta title=\"Foundations/Colors\" />",
+      "const meta = { title: \"Foundations/Colors\" } satisfies Meta;",
+      "export default meta;",
+      "type Story = StoryObj;",
       "",
-      "# Colors",
+      `const colors = ${JSON.stringify(colorEntries)};`,
       "",
-      "<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))', gap: '1rem' }}>",
-      ...colorEntries.map(
-        (e) =>
-          `  <div key="${e.name}"><div style={{ backgroundColor: '${e.hex.replace(/'/g, "\\'")}', height: 80, borderRadius: 8, border: '1px solid #333' }} /><p style={{ marginTop: 8, fontSize: 12 }}>${e.name}</p><code style={{ fontSize: 11 }}>${e.hex}</code></div>`,
-      ),
-      "</div>",
-    ];
-    fs.writeFileSync(path.join(foundationsDir, "Colors.stories.mdx"), colorLines.join("\n"), "utf-8");
-    console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Colors.stories.mdx")));
-  }
+      "export const Default: Story = {",
+      "  render: () => (",
+      "    <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(auto-fill, minmax(140px, 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>",
+      "      ))}",
+      "    </div>",
+      "  ),",
+      "};",
+    ].join("\n");
+  fs.writeFileSync(path.join(foundationsDir, "Colors.stories.tsx"), colorsContent, "utf-8");
+  console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Colors.stories.tsx")));
 
   const typo = foundations?.typography;
   if (typo && typeof typo === "object" && Object.keys(typo).length > 0) {
-    const bodyVal = typo.body || typo.bodyFontFamily || "";
-    const monoVal = typo.mono || typo.tailwindMono;
-    const monoStr = Array.isArray(monoVal) ? monoVal.join(", ") : String(monoVal || "");
-    const typoContent = [
-      "import { Meta } from '@storybook/blocks';",
-      "",
-      "<Meta title=\"Foundations/Typography\" />",
-      "",
-      "# Typography",
-      "",
-      "## Font family & scale",
-      "",
-      "| Token | Value |",
-      "| --- | --- |",
-      ...Object.entries(typo).map(([k, v]) => {
-        const val = Array.isArray(v) ? v.join(", ") : String(v);
-        return `| ${k} | ${val} |`;
-      }),
-      "",
-      "## Preview",
-      "",
-      `<p style={{ fontFamily: ${JSON.stringify(bodyVal)}, fontSize: 16 }}>The quick brown fox jumps over the lazy dog.</p>`,
-      `<p style={{ fontFamily: ${JSON.stringify(monoStr)}, fontSize: 14 }}>Code: 0123456789</p>`,
-    ];
-    fs.writeFileSync(path.join(foundationsDir, "Typography.stories.mdx"), typoContent.join("\n"), "utf-8");
-    console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Typography.stories.mdx")));
+    const typoRows = Object.entries(typo).map(([k, v]) => ({
+      token: k,
+      value: Array.isArray(v) ? v.join(", ") : String(v),
+    }));
+    const typoContent =
+      STORY_CSS_HEADER +
+      [
+        "import type { Meta, StoryObj } from \"@storybook/react\";",
+        "",
+        "const meta = { title: \"Foundations/Typography\" } satisfies Meta;",
+        "export default meta;",
+        "type Story = StoryObj;",
+        "",
+        `const typography = ${JSON.stringify(typoRows)};`,
+        "",
+        "export const Default: Story = {",
+        "  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>",
+        "  ),",
+        "};",
+      ].join("\n");
+    fs.writeFileSync(path.join(foundationsDir, "Typography.stories.tsx"), typoContent, "utf-8");
+    console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Typography.stories.tsx")));
   }
 
   const brandAssets = foundations?.brand?.assets;
-  if (Array.isArray(brandAssets) && brandAssets.length > 0) {
-    const assetRows = brandAssets.map(
-      (a) =>
-        `  <tr key="${(a.path || a.name || "").replace(/"/g, '\\"')}"><td>${a.type || "asset"}</td><td><code>${a.path || a.name || ""}</code></td><td>${a.name || ""}</td></tr>`,
-    );
-    const brandContent = [
-      "import { Meta } from '@storybook/blocks';",
+  const assets = Array.isArray(brandAssets) ? brandAssets : [];
+  const brandContent =
+    STORY_CSS_HEADER +
+    [
+      "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
-      "<Meta title=\"Foundations/Brand\" />",
+      "const meta = { title: \"Foundations/Brand\" } satisfies Meta;",
+      "export default meta;",
+      "type Story = StoryObj;",
       "",
-      "# Brand",
+      `const assets = ${JSON.stringify(assets)};`,
       "",
-      "Logo and favicon paths from the project.",
-      "",
-      "<table><thead><tr><th>Type</th><th>Path</th><th>Name</th></tr></thead><tbody>",
-      ...assetRows,
-      "</tbody></table>",
-    ];
-    fs.writeFileSync(path.join(foundationsDir, "Brand.stories.mdx"), brandContent.join("\n"), "utf-8");
-    console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Brand.stories.mdx")));
-  }
+      "export const Default: Story = {",
+      "  render: () => (",
+      "    <div>",
+      "      <h2 style={{ marginBottom: 16 }}>Logo and favicon paths</h2>",
+      "      <ul style={{ listStyle: \"none\", padding: 0 }}>",
+      "        {assets.length === 0 ? <li>No brand assets found.</li> : assets.map((a, i) => (",
+      "          <li key={i} style={{ padding: \"8px 0\", borderBottom: \"1px solid #222\" }}>",
+      "            <strong>{a.type || \"asset\"}</strong>: <code>{a.path || a.name || \"\"}</code>",
+      "          </li>",
+      "        ))}",
+      "      </ul>",
+      "    </div>",
+      "  ),",
+      "};",
+    ].join("\n");
+  fs.writeFileSync(path.join(foundationsDir, "Brand.stories.tsx"), brandContent, "utf-8");
+  console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Brand.stories.tsx")));
 }
 
 function main() {
@@ -536,7 +563,17 @@ function main() {
 
   ensureDir(STORIES_DIR);
   ensureDir(path.join(STORIES_DIR, "foundations"));
-  writeFoundationsMdx(foundations);
+  writeFoundationsStories(foundations);
+  try {
+    const fd = path.join(STORIES_DIR, "foundations");
+    if (fs.existsSync(fd)) {
+      for (const name of fs.readdirSync(fd)) {
+        if (name.endsWith(".stories.mdx")) fs.unlinkSync(path.join(fd, name));
+      }
+    }
+  } catch {
+    // ignore
+  }
 
   // Clear existing .stories.* files (except foundations/*.mdx) so only VDS-generated stories remain
   try {