vibe-design-system 2.0.0 → 2.1.0

package/bin/init.js

@@ -54,16 +54,41 @@ Geliştirme kuralları:
 `;
 
 const WATCH_MJS = `#!/usr/bin/env node
-import { spawnSync } from "child_process";
-import path from "path";
-import { fileURLToPath } from "url";
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const projectRoot = path.join(__dirname, "..");
-const r = spawnSync("node", [path.join(__dirname, "scan.mjs"), "--watch"], {
-  cwd: projectRoot,
-  stdio: "inherit",
-});
-process.exit(r.status ?? 0);
+import { watch } from 'fs';
+import { execSync } from 'child_process';
+import { resolve } from 'path';
+
+const ROOT = resolve(process.cwd());
+const SRC = resolve(ROOT, 'src');
+let timeout = null;
+
+function run() {
+  const ts = new Date().toLocaleTimeString();
+  console.log(\`\\n[VDS \${ts}] Değişiklik algılandı, taranıyor...\`);
+  try {
+    execSync('node vds-core/scan.mjs', { stdio: 'inherit', cwd: ROOT });
+    execSync('node vds-core/story-generator.mjs', { stdio: 'inherit', cwd: ROOT });
+    console.log(\`[VDS \${ts}] ✅ Design system güncellendi.\`);
+  } catch (e) {
+    console.error(\`[VDS \${ts}] ❌ Hata:\`, e.message);
+  }
+}
+
+function onFileChange(eventType, filename) {
+  if (!filename) return;
+  if (filename.includes('stories/')) return;
+  if (filename.includes('vds-output')) return;
+  if (!filename.endsWith('.tsx') && !filename.endsWith('.ts') && 
+      !filename.endsWith('.css') && !filename.endsWith('.js')) return;
+  console.log(\`[VDS] Değişiklik: \${filename}\`);
+  clearTimeout(timeout);
+  timeout = setTimeout(run, 2000);
+}
+
+run();
+console.log('[VDS] 👀 src/ klasörü izleniyor...');
+console.log('[VDS] Durdurmak için Ctrl+C\\n');
+watch(SRC, { recursive: true }, onFileChange);
 `;
 
 const STORYBOOK_EXAMPLE_FILES = [

package/package.json

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

package/vds-core-template/scan.mjs

@@ -92,6 +92,106 @@ function readPreviousOutput() {
   return null;
 }
 
+function readPreviousOutputFull() {
+  try {
+    if (fs.existsSync(OUTPUT_FILE)) {
+      const raw = fs.readFileSync(OUTPUT_FILE, "utf-8");
+      return JSON.parse(raw);
+    }
+  } catch (_) {}
+  return null;
+}
+
+const CHANGELOG_MAX_ENTRIES = 20;
+
+function getColorHex(val) {
+  if (val == null) return null;
+  if (typeof val === "string") return val;
+  if (typeof val === "object" && (val.hex || val.value)) return val.hex || val.value;
+  return null;
+}
+
+function compareColors(prevColors, newColors) {
+  const changes = [];
+  if (!prevColors && !newColors) return changes;
+  const prev = prevColors || {};
+  const next = newColors || {};
+  const allKeys = new Set([...Object.keys(prev), ...Object.keys(next)]);
+  for (const key of allKeys) {
+    if (key === "_dark") continue;
+    const fromHex = getColorHex(prev[key]);
+    const toHex = getColorHex(next[key]);
+    if (toHex == null) {
+      if (fromHex != null) changes.push({ type: "color_removed", name: key });
+      continue;
+    }
+    if (fromHex == null) {
+      changes.push({ type: "color_added", name: key, to: toHex });
+      continue;
+    }
+    if (fromHex !== toHex) {
+      changes.push({ type: "color_changed", name: key, from: fromHex, to: toHex });
+    }
+  }
+  if (next._dark && typeof next._dark === "object") {
+    const prevDark = prev._dark || {};
+    for (const key of Object.keys(next._dark)) {
+      const fromHex = getColorHex(prevDark[key]);
+      const toHex = getColorHex(next._dark[key]);
+      if (fromHex != null && toHex != null && fromHex !== toHex) {
+        changes.push({ type: "color_changed", name: `_dark.${key}`, from: fromHex, to: toHex });
+      } else if (fromHex == null && toHex != null) {
+        changes.push({ type: "color_added", name: `_dark.${key}`, to: toHex });
+      } else if (fromHex != null && toHex == null) {
+        changes.push({ type: "color_removed", name: `_dark.${key}` });
+      }
+    }
+  }
+  return changes;
+}
+
+function compareTypography(prevTypo, newTypo) {
+  const changes = [];
+  if (!prevTypo && !newTypo) return changes;
+  const prev = prevTypo || {};
+  const next = newTypo || {};
+  const allKeys = new Set([...Object.keys(prev), ...Object.keys(next)]);
+  for (const key of allKeys) {
+    const fromVal = prev[key] != null ? String(prev[key]) : null;
+    const toVal = next[key] != null ? String(next[key]) : null;
+    if (fromVal === toVal) continue;
+    if (toVal == null) continue;
+    changes.push({
+      type: "typography_changed",
+      key,
+      from: fromVal || "(none)",
+      to: toVal,
+    });
+  }
+  return changes;
+}
+
+function buildChangelogChanges(prevOutput, newOutput, added, removed) {
+  const changes = [];
+  const prevFoundations = prevOutput?.foundations;
+  const newFoundations = newOutput?.foundations;
+
+  const colorChanges = compareColors(prevFoundations?.colors, newFoundations?.colors);
+  changes.push(...colorChanges);
+
+  const typoChanges = compareTypography(prevFoundations?.typography, newFoundations?.typography);
+  changes.push(...typoChanges);
+
+  for (const a of added) {
+    changes.push({ type: "component_added", name: a.name });
+  }
+  for (const r of removed) {
+    changes.push({ type: "component_removed", name: r.name });
+  }
+
+  return changes;
+}
+
 function readLastVersion() {
   try {
     if (fs.existsSync(HISTORY_FILE)) {
@@ -760,21 +860,37 @@ function scan() {
     componentSuggestions,
   };
 
-  const prevComponents = readPreviousOutput();
+  const prevOutput = readPreviousOutputFull();
+  const prevComponents = prevOutput?.components ?? readPreviousOutput();
   const { added, removed, modified } = compareComponents(prevComponents, results);
   const hasChanges = added.length > 0 || removed.length > 0 || modified.length > 0;
 
+  const prevVersion = prevOutput?.version || readLastVersion() || "1.0.0";
+  const changelogChanges = buildChangelogChanges(prevOutput, output, added, removed);
+  const prevChangelog = Array.isArray(prevOutput?.changelog) ? prevOutput.changelog : [];
+  if (changelogChanges.length > 0) {
+    const nextVersion = incPatch(prevVersion);
+    const changelogEntry = {
+      version: nextVersion,
+      date: new Date().toISOString(),
+      changes: changelogChanges,
+    };
+    output.changelog = prevChangelog.concat(changelogEntry).slice(-CHANGELOG_MAX_ENTRIES);
+    output.version = nextVersion;
+  } else {
+    output.changelog = prevChangelog;
+    output.version = prevVersion;
+  }
+
   fs.writeFileSync(OUTPUT_FILE, JSON.stringify(output, null, 2), "utf-8");
   const publicDir = path.join(PROJECT_ROOT, "public");
   if (!fs.existsSync(publicDir)) fs.mkdirSync(publicDir, { recursive: true });
   fs.writeFileSync(PUBLIC_MANIFEST, JSON.stringify(output, null, 2), "utf-8");
 
   if (hasChanges) {
-    const lastVersion = readLastVersion();
-    const nextVersion = incPatch(lastVersion);
     const changes = [...added, ...removed, ...modified];
     const historyEntry = {
-      version: nextVersion,
+      version: output.version,
       timestamp: new Date().toISOString(),
       branch: getGitBranch(),
       engineer: getGitEngineer(),
@@ -784,7 +900,7 @@ function scan() {
     entries.push(historyEntry);
     fs.writeFileSync(HISTORY_FILE, JSON.stringify(entries, null, 2), "utf-8");
     console.log(
-      `[VDS] v${nextVersion}: ${added.length} added, ${removed.length} removed, ${modified.length} modified`
+      `[VDS] v${output.version}: ${added.length} added, ${removed.length} removed, ${modified.length} modified`
     );
     console.log(cliT("scanComplete", results.length));
   }

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

@@ -813,6 +813,65 @@ function writeComponentSuggestionsStory(componentSuggestions) {
   console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "ComponentSuggestions.stories.tsx")));
 }
 
+function writeChangelogStory(changelog) {
+  if (!Array.isArray(changelog) || changelog.length === 0) return;
+  const foundationsDir = path.join(STORIES_DIR, "foundations");
+  ensureDir(foundationsDir);
+  const entries = changelog.map((e) => ({
+    version: e.version,
+    date: e.date,
+    changes: e.changes || [],
+  }));
+  const content =
+    [
+      "import type { Meta, StoryObj } from \"@storybook/react\";",
+      "",
+      "const meta = { title: \"Foundations/Changelog\" } satisfies Meta;",
+      "export default meta;",
+      "type Story = StoryObj;",
+      "",
+      `const changelog = ${JSON.stringify(entries)};`,
+      "",
+      "function ChangeItem({ c }) {",
+      "  if (c.type === \"color_changed\")",
+      "    return (",
+      "      <div style={{ marginBottom: 8 }}>",
+      "        <strong>{c.name}</strong>: <span style={{ color: \"#888\" }}>{c.from}</span> → <span style={{ color: \"#0f0\" }}>{c.to}</span>",
+      "        <span style={{ display: \"inline-block\", width: 16, height: 16, backgroundColor: c.from, marginLeft: 8, border: \"1px solid #333\" }} />",
+      "        <span style={{ display: \"inline-block\", width: 16, height: 16, backgroundColor: c.to, marginLeft: 4, border: \"1px solid #333\" }} />",
+      "      </div>",
+      "    );",
+      "  if (c.type === \"color_added\") return <div style={{ marginBottom: 8 }}><strong>{c.name}</strong> added: <code>{c.to}</code> <span style={{ display: \"inline-block\", width: 16, height: 16, backgroundColor: c.to, marginLeft: 4, border: \"1px solid #333\" }} /></div>;",
+      "  if (c.type === \"color_removed\") return <div style={{ marginBottom: 8, color: \"#888\" }}><strong>{c.name}</strong> removed</div>;",
+      "  if (c.type === \"typography_changed\") return <div style={{ marginBottom: 8 }}><strong>{c.key}</strong>: {c.from} → {c.to}</div>;",
+      "  if (c.type === \"component_added\") return <div style={{ marginBottom: 8, color: \"#0f0\" }}>+ {c.name}</div>;",
+      "  if (c.type === \"component_removed\") return <div style={{ marginBottom: 8, color: \"#f88\" }}>− {c.name}</div>;",
+      "  return <div style={{ marginBottom: 8 }}>{c.type}: {JSON.stringify(c)}</div>;",
+      "}",
+      "",
+      "export const Default: Story = {",
+      "  render: () => (",
+      "    <div style={{ padding: 24, fontFamily: \"system-ui, sans-serif\" }}>",
+      "      <h2 style={{ marginBottom: 16 }}>VDS Changelog</h2>",
+      "      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 24 }}>",
+      "        {changelog.map((e, i) => (",
+      "          <div key={i} style={{ border: \"1px solid #333\", borderRadius: 8, padding: 16, background: \"#111\" }}>",
+      "            <div style={{ fontWeight: 600, marginBottom: 4 }}>v{e.version}</div>",
+      "            <div style={{ fontSize: 12, color: \"#888\", marginBottom: 12 }}>{e.date}</div>",
+      "            {e.changes.length === 0 ? <div style={{ color: \"#666\" }}>No changes</div> : (",
+      "              <div>{e.changes.map((c, j) => <ChangeItem key={j} c={c} />)}</div>",
+      "            )}",
+      "          </div>",
+      "        ))}",
+      "      </div>",
+      "    </div>",
+      "  ),",
+      "};",
+    ].join("\n");
+  fs.writeFileSync(path.join(foundationsDir, "Changelog.stories.tsx"), content, "utf-8");
+  console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Changelog.stories.tsx")));
+}
+
 function main() {
   if (!fs.existsSync(VDS_OUTPUT)) {
     console.error("[VDS] vds-output.json not found. Run `npm run vds` first.");
@@ -832,6 +891,10 @@ function main() {
   if (componentSuggestions?.length) {
     writeComponentSuggestionsStory(componentSuggestions);
   }
+  const changelog = data.changelog;
+  if (changelog?.length) {
+    writeChangelogStory(changelog);
+  }
   try {
     const fd = path.join(STORIES_DIR, "foundations");
     if (fs.existsSync(fd)) {

package/vds-core-template/watch.mjs

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+import { watch } from 'fs';
+import { execSync } from 'child_process';
+import { resolve } from 'path';
+
+const ROOT = resolve(process.cwd());
+const SRC = resolve(ROOT, 'src');
+let timeout = null;
+
+function run() {
+  const ts = new Date().toLocaleTimeString();
+  console.log(`\n[VDS ${ts}] Değişiklik algılandı, taranıyor...`);
+  try {
+    execSync('node vds-core/scan.mjs', { stdio: 'inherit', cwd: ROOT });
+    execSync('node vds-core/story-generator.mjs', { stdio: 'inherit', cwd: ROOT });
+    console.log(`[VDS ${ts}] ✅ Design system güncellendi.`);
+  } catch (e) {
+    console.error(`[VDS ${ts}] ❌ Hata:`, e.message);
+  }
+}
+
+function onFileChange(eventType, filename) {
+  if (!filename) return;
+  if (filename.includes('stories/')) return;
+  if (filename.includes('vds-output')) return;
+  if (!filename.endsWith('.tsx') && !filename.endsWith('.ts') && 
+      !filename.endsWith('.css') && !filename.endsWith('.js')) return;
+  console.log(`[VDS] Değişiklik: ${filename}`);
+  clearTimeout(timeout);
+  timeout = setTimeout(run, 2000);
+}
+
+run();
+console.log('[VDS] 👀 src/ klasörü izleniyor...');
+console.log('[VDS] Durdurmak için Ctrl+C\n');
+watch(SRC, { recursive: true }, onFileChange);