vibe-design-system 2.2.0 → 2.3.0

package/package.json

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

package/vds-core-template/scan.mjs

@@ -776,6 +776,69 @@ function extractFoundations() {
     }
   }
 
+  // ── FALLBACK 1: Arbitrary Tailwind values ──────────────────
+  const srcRelFiles = getAllTsxJsxInDir(SRC_DIR);
+  const allSourceFiles = [
+    ...srcRelFiles.map((f) => path.join(SRC_DIR, f)),
+    path.join(PROJECT_ROOT, "index.html"),
+    path.join(PROJECT_ROOT, "src", "index.css"),
+    path.join(PROJECT_ROOT, "src", "globals.css"),
+    path.join(PROJECT_ROOT, "src", "App.css"),
+    path.join(PROJECT_ROOT, "app", "globals.css"),
+  ].filter((p) => fs.existsSync(p));
+
+  const ARBITRARY_HEX = /(?:bg|text|border|ring|fill|stroke|from|to|via)-\[#([0-9a-fA-F]{3,8})\]/g;
+  const arbitraryColors = new Map();
+  for (const file of allSourceFiles) {
+    try {
+      const content = fs.readFileSync(file, "utf-8");
+      for (const match of content.matchAll(ARBITRARY_HEX)) {
+        const hex = "#" + match[1].toUpperCase();
+        arbitraryColors.set(hex, (arbitraryColors.get(hex) || 0) + 1);
+      }
+    } catch (_) {}
+  }
+  const getHex = (v) => {
+    const x = typeof v === "string" ? v : v?.hex ?? v?.value;
+    return x ? String(x).toUpperCase() : "";
+  };
+  const existingHexValues = new Set([
+    ...Object.values(colors).map((v) => getHex(v)).filter(Boolean),
+    ...Object.values(colorsDark).map((v) => getHex(v)).filter(Boolean),
+  ]);
+  for (const [hex, count] of arbitraryColors) {
+    const hexUpper = hex.toUpperCase();
+    if (existingHexValues.has(hexUpper)) continue;
+    if (count < 1) continue;
+    const name = "arbitrary-" + hex.slice(1).toLowerCase();
+    colors[name] = { value: hex, source: "arbitrary-tailwind", frequency: count };
+  }
+
+  // ── FALLBACK 2: Google Fonts URL ──────────────────────────
+  const GFONTS_PATTERN = /family=([A-Za-z+]+)(?::.*?)?(?:&|$)/g;
+  const fontFiles = allSourceFiles.filter(
+    (f) =>
+      f.endsWith("index.html") ||
+      f.includes("layout.") ||
+      f.includes("_document.") ||
+      f.endsWith("index.css") ||
+      f.includes("globals.css")
+  );
+  for (const file of fontFiles) {
+    try {
+      const content = fs.readFileSync(file, "utf-8");
+      if (!content.includes("fonts.googleapis.com")) continue;
+      for (const match of content.matchAll(GFONTS_PATTERN)) {
+        const family = match[1].replace(/\+/g, " ");
+        const alreadyHas = Object.values(typography).some((v) => String(v).includes(family));
+        if (!alreadyHas) {
+          const key = "--font-" + family.toLowerCase().replace(/\s+/g, "-");
+          typography[key] = { family, source: "google-fonts-url" };
+        }
+      }
+    } catch (_) {}
+  }
+
   const twTheme = getTailwindTheme();
   const normalizeThemeObj = (obj) => {
     if (!obj || typeof obj !== "object") return {};

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

@@ -814,56 +814,29 @@ function writeComponentSuggestionsStory(componentSuggestions) {
 }
 
 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 entries = Array.isArray(changelog) ? 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;",
+      "const meta = { title: \"Foundations/Changelog\", tags: [\"autodocs\"] } 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 style={{ fontFamily: \"monospace\", padding: 24 }}>",
+      "      <h2>CHANGELOG</h2>",
+      "      {changelog.length === 0 ? <p>No changes recorded yet. Run npm run vds again after making changes.</p> : changelog.map((entry) => (",
+      "        <div key={entry.version}>",
+      "          <h3>v{entry.version} — {entry.date}</h3>",
+      "          {entry.changes.map((c, i) => <div key={i}>{c.type}: {c.name ?? c.key ?? \"\"}</div>)}",
+      "        </div>",
+      "      ))}",
       "    </div>",
       "  ),",
       "};",
@@ -891,10 +864,7 @@ function main() {
   if (componentSuggestions?.length) {
     writeComponentSuggestionsStory(componentSuggestions);
   }
-  const changelog = data.changelog;
-  if (changelog?.length) {
-    writeChangelogStory(changelog);
-  }
+  writeChangelogStory(data.changelog);
   try {
     const fd = path.join(STORIES_DIR, "foundations");
     if (fs.existsSync(fd)) {
@@ -925,6 +895,7 @@ function main() {
   }
 
   for (const comp of components) {
+    if (comp.file && comp.file.startsWith("pages/")) continue;
     const componentName = toSafeComponentName(comp.name, comp.file);
     if (onlyName && componentName !== onlyName) continue;
     if (SKIP_LIST.includes(componentName)) continue;