vibe-design-system 1.8.5 → 1.9.3

package/bin/init.js

@@ -1,10 +1,14 @@
 #!/usr/bin/env node
 /**
  * VDS installer: npx vibe-design-system init
- * - Kullanıcı projesine dashboard dosyası kopyalanmaz.
- * - Sadece vds-core/scan.mjs ve vds-core/dashboard-server.mjs projeye kopyalanır.
- * - package.json'a vds, vds:watch, vds:dashboard scriptleri eklenir.
- * - Kurulum sonrası otomatik tarama çalıştırılır.
+ *
+ * Single command that:
+ * 1. Copies vds-core files (scan.mjs, story-generator.mjs, dashboard-server.mjs)
+ * 2. Installs Storybook if not present (npx storybook@latest init --yes)
+ * 3. Creates/updates .storybook/preview with index.css import and dark decorator
+ * 4. Runs node vds-core/scan.mjs
+ * 5. Runs node vds-core/story-generator.mjs
+ * 6. Adds all scripts to package.json
  */
 import fs from "fs";
 import path from "path";
@@ -24,6 +28,66 @@ function getProjectRoot() {
   return cwd;
 }
 
+function isStorybookInstalled(projectRoot) {
+  const storybookDir = path.join(projectRoot, ".storybook");
+  if (fs.existsSync(storybookDir)) return true;
+  const pkgPath = path.join(projectRoot, "package.json");
+  try {
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+    const dev = pkg.devDependencies || {};
+    if (dev["@storybook/react-vite"] || dev["storybook"]) return true;
+  } catch (_) {}
+  return false;
+}
+
+function installStorybook(projectRoot) {
+  console.log("📚 Storybook kuruluyor...");
+  const r = spawnSync("npx", ["storybook@latest", "init", "--yes"], {
+    cwd: projectRoot,
+    stdio: "inherit",
+    shell: true,
+  });
+  if (r.status !== 0) {
+    console.warn("⚠️ Storybook init tamamlanamadı; manuel: npx storybook@latest init");
+  }
+}
+
+const PREVIEW_CONTENT = `import type { Preview } from "@storybook/react-vite";
+import React from "react";
+import "../src/index.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="dark" style={{ minHeight: "100vh", padding: "1rem" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default preview;
+`;
+
+function ensureStorybookPreview(projectRoot) {
+  const storybookDir = path.join(projectRoot, ".storybook");
+  if (!fs.existsSync(storybookDir)) fs.mkdirSync(storybookDir, { recursive: true });
+
+  const previewTsx = path.join(storybookDir, "preview.tsx");
+  const previewTs = path.join(storybookDir, "preview.ts");
+  if (fs.existsSync(previewTs)) try { fs.unlinkSync(previewTs); } catch (_) {}
+  fs.writeFileSync(previewTsx, PREVIEW_CONTENT, "utf-8");
+  console.log("📝 .storybook/preview.tsx güncellendi (index.css + dark decorator).");
+}
+
 function addScripts(projectRoot) {
   const pkgPath = path.join(projectRoot, "package.json");
   const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
@@ -32,6 +96,8 @@ function addScripts(projectRoot) {
   if (!scripts["vds:watch"]) scripts["vds:watch"] = "node vds-core/scan.mjs --watch";
   if (!scripts["vds:dashboard"]) scripts["vds:dashboard"] = "node vds-core/dashboard-server.mjs";
   if (!scripts["vds:stories"]) scripts["vds:stories"] = "node vds-core/story-generator.mjs";
+  if (!scripts.storybook) scripts.storybook = "storybook dev -p 6006";
+  if (!scripts["build-storybook"]) scripts["build-storybook"] = "storybook build";
   pkg.scripts = scripts;
   fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2), "utf-8");
 }
@@ -41,7 +107,7 @@ function addVdsDependency(projectRoot) {
   const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
   const dev = pkg.devDependencies || {};
   if (!dev["vibe-design-system"]) {
-    dev["vibe-design-system"] = "^1.4.1";
+    dev["vibe-design-system"] = "^1.9.0";
     pkg.devDependencies = dev;
     fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2), "utf-8");
     const r = spawnSync("npm", ["install"], { cwd: projectRoot, stdio: "inherit", shell: true });
@@ -64,9 +130,6 @@ function ensureVdsCore(projectRoot) {
   const serverSrc = path.join(TEMPLATE_DIR, "dashboard-server.mjs");
   if (fs.existsSync(serverSrc)) {
     fs.copyFileSync(serverSrc, path.join(vdsCoreDest, "dashboard-server.mjs"));
-  } else {
-    console.error("vds-core-template/dashboard-server.mjs bulunamadı.");
-    process.exit(1);
   }
 
   const storyGenSrc = path.join(TEMPLATE_DIR, "story-generator.mjs");
@@ -78,6 +141,7 @@ function ensureVdsCore(projectRoot) {
 function runScan(projectRoot) {
   const scanPath = path.join(projectRoot, "vds-core", "scan.mjs");
   if (!fs.existsSync(scanPath)) return;
+  console.log("🔍 VDS taraması çalıştırılıyor...");
   const r = spawnSync("node", [scanPath], {
     cwd: projectRoot,
     stdio: "inherit",
@@ -86,6 +150,18 @@ function runScan(projectRoot) {
   if (r.status !== 0) process.exitCode = r.status ?? 1;
 }
 
+function runStoryGenerator(projectRoot) {
+  const genPath = path.join(projectRoot, "vds-core", "story-generator.mjs");
+  if (!fs.existsSync(genPath)) return;
+  console.log("📖 Story dosyaları oluşturuluyor...");
+  const r = spawnSync("node", [genPath], {
+    cwd: projectRoot,
+    stdio: "inherit",
+    shell: false,
+  });
+  if (r.status !== 0) process.exitCode = r.status ?? 1;
+}
+
 console.log("🎨 VDS kuruluyor...");
 
 const projectRoot = getProjectRoot();
@@ -96,9 +172,29 @@ if (!fs.existsSync(pkgPath)) {
   process.exit(1);
 }
 
+// 1. Copy vds-core files
 ensureVdsCore(projectRoot);
+
+// 2. Install Storybook if not present
+if (!isStorybookInstalled(projectRoot)) {
+  installStorybook(projectRoot);
+} else {
+  console.log("📚 Storybook zaten mevcut.");
+}
+
+// 3. Create/update .storybook/preview with index.css + dark decorator
+ensureStorybookPreview(projectRoot);
+
+// 6. Add all scripts to package.json (before scan so scripts are there)
 addScripts(projectRoot);
 addVdsDependency(projectRoot);
+
+// 4. Run scan
 runScan(projectRoot);
 
-console.log("✅ Kurulum tamamlandı. Dashboard: npm run vds:dashboard ile başlatın; terminalde adres gösterilir.");
+// 5. Run story generator
+runStoryGenerator(projectRoot);
+
+console.log("✅ Kurulum tamamlandı.");
+console.log("   Storybook: npm run storybook");
+console.log("   Dashboard: npm run vds:dashboard");

package/package.json

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

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

@@ -2,8 +2,9 @@
 /**
  * VDS Story generator
  *
- * Reads vds-output.json and generates Storybook .stories.tsx files
- * under src/stories for each component.
+ * Reads vds-output.json and generates:
+ * - Storybook .stories.tsx files under src/stories for each component
+ * - Foundations .stories.tsx: Colors, Typography, Brand under src/stories/foundations/
  *
  * Usage:
  *   node vds-core/story-generator.mjs        # generate for all components
@@ -19,6 +20,12 @@ 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");
 
+// Top of every story file for CSS variables
+const STORY_CSS_HEADER = `// @ts-ignore
+import '../../index.css'
+
+`;
+
 // Components we don't want to auto-generate stories for (project-specific dashboards, heavy UIs, etc.)
 const SKIP_LIST = [
   "AnalysisDashboard",
@@ -37,28 +44,41 @@ const SKIP_LIST = [
   "TestComponent",
 ];
 
-// Components that need a router context
-const ROUTER_DECORATOR_LIST = ["Breadcrumb", "NavigationMenu", "Sidebar", "Menubar"];
-
 function ensureDir(dir) {
   if (!fs.existsSync(dir)) {
     fs.mkdirSync(dir, { recursive: true });
   }
 }
 
+/** Detect if component uses router (useLocation, useNavigate, or Link from react-router-dom). */
+function needsRouter(source) {
+  if (!source || typeof source !== "string") return false;
+  if (/\buseLocation\b|\buseNavigate\b/.test(source)) return true;
+  if (/from\s+['"]react-router-dom['"]/.test(source) && /\bLink\b/.test(source)) return true;
+  return false;
+}
+
+/** If component has <img and accepts children prop, we should omit children from story args (void element). */
+function componentHasImgAndChildren(source) {
+  if (!source || typeof source !== "string") return false;
+  const hasImg = /return\s+<img|<\s*img\s+/.test(source);
+  if (!hasImg) return false;
+  return /\bchildren\b/.test(source);
+}
+
 function toSafeComponentName(name, file) {
-  if (name && typeof name === "string") {
-    return name
-      .replace(/[^A-Za-z0-9]+/g, " ")
-      .trim()
-      .replace(/\s+([a-z])/g, (_, c) => c.toUpperCase())
-      .replace(/^\w/, (c) => c.toUpperCase())
-      .replace(/\s+/g, "");
-  }
-  const base = (file || "").replace(/\.[^.]+$/, "");
-  const parts = base.split(/[\\/]/g);
-  const last = parts[parts.length - 1] || "Component";
-  return last.charAt(0).toUpperCase() + last.slice(1);
+  if (!name || typeof name !== "string") {
+    const base = (file || "").replace(/\.[^.]+$/, "");
+    const parts = base.split(/[\\/]/g);
+    const last = parts[parts.length - 1] || "Component";
+    return last.charAt(0).toUpperCase() + last.slice(1);
+  }
+  return name
+    .replace(/[^A-Za-z0-9]+/g, " ")
+    .trim()
+    .replace(/\s+([a-z])/g, (_, c) => c.toUpperCase())
+    .replace(/^\w/, (c) => c.toUpperCase())
+    .replace(/\s+/g, "");
 }
 
 function parseUnionLiterals(type) {
@@ -308,6 +328,7 @@ function buildStoryFileContent(comp) {
     // ignore
   }
   const exportStyle = detectExportStyle(source, componentName);
+  const omitChildren = componentHasImgAndChildren(source);
 
   const lines = [];
   lines.push(`import type { Meta, StoryObj } from "@storybook/react";`);
@@ -347,7 +368,8 @@ function buildStoryFileContent(comp) {
       `import { CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";`,
     );
   }
-  if (ROUTER_DECORATOR_LIST.includes(componentName)) {
+  const useRouterDecorator = needsRouter(source);
+  if (useRouterDecorator) {
     lines.push(`import { MemoryRouter } from "react-router-dom";`);
   }
 
@@ -356,7 +378,7 @@ function buildStoryFileContent(comp) {
   lines.push(`  title: ${JSON.stringify(title)},`);
   lines.push(`  component: ComponentRef,`);
   lines.push(`  tags: ["autodocs"],`);
-  if (ROUTER_DECORATOR_LIST.includes(componentName)) {
+  if (useRouterDecorator) {
     lines.push(`  decorators: [(Story) => (`);
     lines.push(`    <MemoryRouter>`);
     lines.push(`      <Story />`);
@@ -373,14 +395,14 @@ function buildStoryFileContent(comp) {
   const specialStories = buildSpecialStories(componentName, variants);
   if (specialStories) {
     lines.push(specialStories);
-    return lines.join("\n");
+    return STORY_CSS_HEADER + lines.join("\n");
   }
 
-  // Generic variant-based stories
+  // Generic variant-based stories (omit children for img/void components)
   if (!variants.length) {
     lines.push(`export const Default: Story = {`);
     lines.push(`  args: {`);
-    lines.push(`    children: "${componentName}",`);
+    if (!omitChildren) lines.push(`    children: "${componentName}",`);
     lines.push(`  },`);
     lines.push(`};`);
   } else {
@@ -388,7 +410,7 @@ function buildStoryFileContent(comp) {
     lines.push(`export const ${capitalize(defaultVariant)}: Story = {`);
     lines.push(`  args: {`);
     lines.push(`    variant: "${defaultVariant}",`);
-    lines.push(`    children: "${componentName}",`);
+    if (!omitChildren) lines.push(`    children: "${componentName}",`);
     lines.push(`  },`);
     lines.push(`};`);
     lines.push("");
@@ -397,14 +419,130 @@ function buildStoryFileContent(comp) {
       lines.push(`export const ${storyName}: Story = {`);
       lines.push(`  args: {`);
       lines.push(`    variant: "${v}",`);
-      lines.push(`    children: "${storyName}",`);
+      if (!omitChildren) lines.push(`    children: "${storyName}",`);
       lines.push(`  },`);
       lines.push(`};`);
       lines.push("");
     }
   }
 
-  return lines.join("\n");
+  return STORY_CSS_HEADER + lines.join("\n");
+}
+
+/** Build color entries from foundations.colors (skip _dark; flatten to { name, hex }). */
+function getColorEntries(colors) {
+  if (!colors || typeof colors !== "object") return [];
+  const entries = [];
+  for (const [name, v] of Object.entries(colors)) {
+    if (name === "_dark") continue;
+    const hex = v && (v.hex ?? (typeof v.value === "string" && v.value.startsWith("#") ? v.value : null));
+    const value = v && v.value;
+    if (hex) entries.push({ name, hex });
+    else if (value) entries.push({ name, hex: value });
+  }
+  return entries;
+}
+
+function writeFoundationsStories(foundations) {
+  const foundationsDir = path.join(STORIES_DIR, "foundations");
+  ensureDir(foundationsDir);
+
+  const colorEntries = getColorEntries(foundations?.colors);
+  const colorsContent =
+    STORY_CSS_HEADER +
+    [
+      "import type { Meta, StoryObj } from \"@storybook/react\";",
+      "",
+      "const meta = { title: \"Foundations/Colors\" } satisfies Meta;",
+      "export default meta;",
+      "type Story = StoryObj;",
+      "",
+      `const colors = ${JSON.stringify(colorEntries)};`,
+      "",
+      "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 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;
+  const assets = Array.isArray(brandAssets) ? brandAssets : [];
+  const brandContent =
+    STORY_CSS_HEADER +
+    [
+      "import type { Meta, StoryObj } from \"@storybook/react\";",
+      "",
+      "const meta = { title: \"Foundations/Brand\" } satisfies Meta;",
+      "export default meta;",
+      "type Story = StoryObj;",
+      "",
+      `const assets = ${JSON.stringify(assets)};`,
+      "",
+      "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() {
@@ -415,14 +553,29 @@ function main() {
   const raw = fs.readFileSync(VDS_OUTPUT, "utf-8");
   const data = JSON.parse(raw);
   const components = Array.isArray(data.components) ? data.components : [];
+  const foundations = data.foundations || null;
 
   const onlyName = process.argv[2] || null;
 
   ensureDir(STORIES_DIR);
-  // Clear existing .stories.* files so only VDS-generated stories remain
+  ensureDir(path.join(STORIES_DIR, "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 {
     const existing = fs.readdirSync(STORIES_DIR);
     for (const name of existing) {
+      if (name === "foundations") continue;
       if (
         name.endsWith(".stories.tsx") ||
         name.endsWith(".stories.ts") ||
@@ -450,4 +603,3 @@ function main() {
 }
 
 main();
-