vibe-design-system 2.8.65 → 2.8.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.8.65",
+  "version": "2.8.67",
   "description": "Auto-generate design systems for vibe coding projects",
   "homepage": "https://vibedesign.tech",
   "repository": {

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

@@ -2505,6 +2505,7 @@ function writeFoundationsStories(foundations) {
       .slice(0, 60); // cap to avoid extremely long stories
 
     const colorsContent = [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Colors\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -2630,6 +2631,7 @@ function writeFoundationsStories(foundations) {
     const sansFamily = typo.fontSans || typo.tailwindSans || typo.body || "system-ui, sans-serif";
 
     const typoContent = [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Typography\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -2790,6 +2792,7 @@ function writeFoundationsStories(foundations) {
 
   const brandContent =
     [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Brand\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -2823,6 +2826,7 @@ function writeFoundationsStories(foundations) {
 
     const iconsContent = [
       "import { useState } from \"react\";",
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "import * as Lucide from \"lucide-react\";",
       "",
@@ -2997,6 +3001,7 @@ function writeFoundationsStories(foundations) {
     const containerCount = gridSystem.containerCount || 0;
 
     const gridContent = [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Grid\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -3186,6 +3191,7 @@ function writeFoundationsStories(foundations) {
     }));
     const buttonsContent =
       [
+        "import React from \"react\";",
         "import type { Meta, StoryObj } from \"@storybook/react\";",
         "",
         "const meta = { title: \"Foundations/Button Usage\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -3261,6 +3267,7 @@ function writeFoundationsStories(foundations) {
 
     const usedSpacing = (foundations?.tokenUsage?.spacing || []).slice(0, 16);
     const spacingContent = [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Spacing & Layout\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -3368,6 +3375,7 @@ function writeFoundationsStories(foundations) {
     const zIndexSemantics = { "z-0": "Base", "z-10": "Low / hover", "z-20": "Dropdown", "z-30": "Sticky", "z-40": "Fixed", "z-50": "Modal / overlay" };
 
     const elevationContent = [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Elevation & Shadows\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -3490,6 +3498,7 @@ function writeFoundationsStories(foundations) {
     const usedRadius = (foundations?.tokenUsage?.radius || []).slice(0, 12);
 
     const borderContent = [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Border & Radius\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -3593,6 +3602,7 @@ function writeFoundationsStories(foundations) {
     const motionChips = (foundations?.tokenUsage?.animations || []).slice(0, 24);
 
     const motionContent = [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "import { useState, useEffect } from \"react\";",
       "",
@@ -3743,6 +3753,7 @@ function writeComponentSuggestionsStory(componentSuggestions) {
   }));
   const content =
     [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "import { useState } from \"react\";",
       "",
@@ -3950,6 +3961,58 @@ function buildInventoryPreviewHtml(compName, category, colorSwatches, tokens) {
  * Shows all project components classified by Atlassian-style functional category.
  * Every value is derived from vds-output.json — no placeholder content.
  */
+/**
+ * Single-pass JSX usage scan: returns a Set of component names (PascalCase-normalised)
+ * that actually appear as <Tag in the project's source files (excluding ui/ definitions
+ * and story files). This is used to distinguish "used in project" from "installed only".
+ */
+function buildComponentUsageSet(componentNames, projectRoot) {
+  // Pre-compute pascal names for each component
+  const patterns = componentNames.map(name => {
+    const pascal = name
+      .replace(/[-\s]+(.)/g, (_, c) => c.toUpperCase())
+      .replace(/^(.)/, c => c.toUpperCase());
+    return { name, pascal };
+  });
+
+  const usedNames = new Set();
+
+  // Resolve the shadcn ui directory path to exclude component definition files
+  // (e.g. dialog.tsx contains <DialogClose> which would falsely register Dialog as "used")
+  const uiDefDir = path.resolve(path.join(projectRoot, COMPONENTS_REL_DIR));
+
+  function walkDir(dir) {
+    let entries;
+    try { entries = fs.readdirSync(dir, { withFileTypes: true }); } catch { return; }
+    for (const entry of entries) {
+      if (entry.name.startsWith(".") || entry.name === "node_modules") continue;
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        // Skip: story dirs, storybook config, AND the shadcn/ui component definitions dir
+        if (["stories", ".storybook"].includes(entry.name)) continue;
+        if (path.resolve(full) === uiDefDir) continue; // shadcn ui/ — skip definitions
+        walkDir(full);
+      } else if (/\.(tsx|jsx)$/.test(entry.name) && !/\.stories\./.test(entry.name)) {
+        let src;
+        try { src = fs.readFileSync(full, "utf-8"); } catch { continue; }
+        for (const { name, pascal } of patterns) {
+          if (!usedNames.has(name) && src.includes(`<${pascal}`)) {
+            usedNames.add(name);
+          }
+        }
+      }
+    }
+  }
+
+  // Walk common source roots (excluding the component definition directories themselves)
+  const srcRoots = ["src", "client/src", "app", "pages"]
+    .map(d => path.join(projectRoot, d))
+    .filter(d => fs.existsSync(d));
+  for (const root of srcRoots) walkDir(root);
+
+  return usedNames;
+}
+
 function writeComponentInventoryStory(components, foundations) {
   if (!Array.isArray(components) || components.length === 0) return;
   const foundationsDir = path.join(STORIES_DIR, "foundations");
@@ -3963,6 +4026,10 @@ function writeComponentInventoryStory(components, foundations) {
   const categorized = {}; // category → [{ name, group, tokenCount, propCount, colorSwatches }]
   const foundColors = (foundations && foundations.colors) ? foundations.colors : {};
 
+  // Determine which components are actually used as JSX in the project source
+  const componentNames = components.map(c => c.name);
+  const usedSet = buildComponentUsageSet(componentNames, PROJECT_ROOT);
+
   for (const comp of components) {
     const g = comp.group || "Components";
     const gLower = g.toLowerCase();
@@ -3993,6 +4060,9 @@ function writeComponentInventoryStory(components, foundations) {
     // Visual preview HTML (computed at generation time using project's resolved colors)
     const previewHtml = buildInventoryPreviewHtml(comp.name, category, colorSwatches, tokens.filter(t => !/:/.test(t)));
 
+    // Whether this component is actually used as a JSX tag anywhere in the project source
+    const active = usedSet.has(comp.name);
+
     if (!categorized[category]) categorized[category] = [];
     categorized[category].push({
       name:       comp.name,
@@ -4001,6 +4071,7 @@ function writeComponentInventoryStory(components, foundations) {
       propCount:  props.length,
       colorSwatches,
       previewHtml,
+      active,
     });
   }
 
@@ -4015,92 +4086,106 @@ function writeComponentInventoryStory(components, foundations) {
 
   const inventoryData = sortedCategories.map(cat => ({
     category: cat,
-    components: categorized[cat].sort((a, b) => a.name.localeCompare(b.name)),
+    // Sort: active first, then alphabetical within each group
+    components: categorized[cat].sort((a, b) => {
+      if (a.active !== b.active) return a.active ? -1 : 1;
+      return a.name.localeCompare(b.name);
+    }),
   }));
 
   const totalComponents = components.length;
+  const activeComponents = [...usedSet].length;
   const uniqueTokens = [...new Set(
     components.flatMap(c => Array.isArray(c.tokens) ? c.tokens.filter(t => !/:/.test(t)) : [])
   )].length;
 
   const content = [
+    `import React from "react";`,
     `import type { Meta, StoryObj } from "@storybook/react";`,
     ``,
     `const meta = { title: "Foundations/Component Inventory", parameters: { layout: "fullscreen" } } satisfies Meta;`,
     `export default meta;`,
     `type Story = StoryObj;`,
     ``,
-    `const inventoryData: { category: string; components: { name: string; group: string; tokenCount: number; propCount: number; colorSwatches: { token: string; hex: string }[]; previewHtml: string }[] }[] = ${JSON.stringify(inventoryData)};`,
+    `const inventoryData: { category: string; components: { name: string; group: string; tokenCount: number; propCount: number; colorSwatches: { token: string; hex: string }[]; previewHtml: string; active: boolean }[] }[] = ${JSON.stringify(inventoryData)};`,
     `const totalComponents = ${totalComponents};`,
+    `const activeComponents = ${activeComponents};`,
     `const uniqueTokens = ${uniqueTokens};`,
     ``,
     `export const Default: Story = {`,
-    `  render: () => (`,
+    `  render: () => {`,
+    `    const [showUnused, setShowUnused] = (window as any).__vdsShowUnused !== undefined`,
+    `      ? [(window as any).__vdsShowUnused, (v: boolean) => { (window as any).__vdsShowUnused = v; }]`,
+    `      : [false, () => {}];`,
+    `    const [expanded, setExpanded] = React.useState(false);`,
+    `    const Card = ({ comp }: { comp: any }) => (`,
+    `      <div style={{ border: \`1px solid \${comp.active ? "#e5e7eb" : "#f0f0f0"}\`, borderRadius: 10, overflow: "hidden", background: comp.active ? "#fff" : "#fafafa", display: "flex", flexDirection: "column" as any, boxShadow: comp.active ? "0 1px 3px rgba(0,0,0,0.05)" : "none", opacity: comp.active ? 1 : 0.55 }}>`,
+    `        <div style={{ background: comp.active ? "#f8f9fa" : "#f5f5f5", borderBottom: "1px solid #f0f0f0", minHeight: 64, display: "flex", alignItems: "center", justifyContent: "center" }}`,
+    `          dangerouslySetInnerHTML={{ __html: comp.previewHtml }}`,
+    `        />`,
+    `        <div style={{ padding: "10px 12px" }}>`,
+    `          <div style={{ display: "flex", alignItems: "center", gap: 5, marginBottom: 5 }}>`,
+    `            <span style={{ fontWeight: 700, fontSize: 13, color: comp.active ? "#111" : "#9ca3af" }}>{comp.name}</span>`,
+    `            {comp.active && <span style={{ fontSize: 9, background: "#dcfce7", color: "#15803d", padding: "1px 5px", borderRadius: 4, fontWeight: 700, letterSpacing: "0.05em" }}>USED</span>}`,
+    `          </div>`,
+    `          <div style={{ display: "flex", gap: 4, flexWrap: "wrap" as any }}>`,
+    `            {comp.tokenCount > 0 && (`,
+    `              <span style={{ fontSize: 10, background: "#eff6ff", color: "#1d4ed8", padding: "2px 7px", borderRadius: 10, border: "1px solid #dbeafe" }}>{comp.tokenCount} tokens</span>`,
+    `            )}`,
+    `            {comp.colorSwatches.length > 0 && (`,
+    `              <span style={{ fontSize: 10, background: "#fef9c3", color: "#713f12", padding: "2px 7px", borderRadius: 10, border: "1px solid #fde68a" }}>{comp.colorSwatches.length} colors</span>`,
+    `            )}`,
+    `            {!comp.active && (`,
+    `              <span style={{ fontSize: 10, background: "#f3f4f6", color: "#9ca3af", padding: "2px 7px", borderRadius: 10, border: "1px solid #e5e7eb" }}>installed</span>`,
+    `            )}`,
+    `          </div>`,
+    `        </div>`,
+    `      </div>`,
+    `    );`,
+    `    return (`,
     `    <div style={{ padding: 32, background: "#f8f9fa", fontFamily: "system-ui,sans-serif", color: "#111", minHeight: "100vh", width: "100%" }}>`,
     `      {/* Header */}`,
     `      <div style={{ marginBottom: 40 }}>`,
     `        <h2 style={{ fontSize: 28, fontWeight: 700, margin: "0 0 8px" }}>Component Inventory</h2>`,
-    `        <p style={{ fontSize: 14, color: "#6b7280", margin: "0 0 20px" }}>All components detected in this project — visual style fingerprints derived from project tokens.</p>`,
-    `        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" as any }}>`,
+    `        <p style={{ fontSize: 14, color: "#6b7280", margin: "0 0 20px" }}>Components actually used in this project. <strong style={{ color: "#111" }}>USED</strong> = appears as a JSX tag in source files.</p>`,
+    `        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" as any, marginBottom: 20 }}>`,
     `          {[`,
-    `            { value: totalComponents.toString(), label: "Components" },`,
-    `            { value: inventoryData.length.toString(), label: "Categories" },`,
-    `            { value: uniqueTokens.toString(), label: "Unique Tokens" },`,
+    `            { value: activeComponents.toString(), label: "Used in Project", bg: "#f0fdf4", fg: "#15803d", border: "#bbf7d0" },`,
+    `            { value: (totalComponents - activeComponents).toString(), label: "Installed Only", bg: "#f9fafb", fg: "#6b7280", border: "#e5e7eb" },`,
+    `            { value: uniqueTokens.toString(), label: "Unique Tokens", bg: "#eff6ff", fg: "#1d4ed8", border: "#dbeafe" },`,
     `          ].map(stat => (`,
-    `            <div key={stat.label} style={{ padding: "12px 20px", background: "#fff", borderRadius: 10, textAlign: "center" as any, minWidth: 90, border: "1px solid #e5e7eb" }}>`,
-    `              <div style={{ fontSize: 26, fontWeight: 800, color: "#111", lineHeight: 1 }}>{stat.value}</div>`,
-    `              <div style={{ fontSize: 12, color: "#6b7280", marginTop: 4 }}>{stat.label}</div>`,
+    `            <div key={stat.label} style={{ padding: "12px 20px", background: stat.bg, borderRadius: 10, textAlign: "center" as any, minWidth: 110, border: \`1px solid \${stat.border}\` }}>`,
+    `              <div style={{ fontSize: 26, fontWeight: 800, color: stat.fg, lineHeight: 1 }}>{stat.value}</div>`,
+    `              <div style={{ fontSize: 12, color: stat.fg, marginTop: 4, opacity: 0.8 }}>{stat.label}</div>`,
     `            </div>`,
     `          ))}`,
     `        </div>`,
+    `        <button onClick={() => setExpanded(!expanded)} style={{ fontSize: 12, color: "#6b7280", background: "transparent", border: "1px solid #e5e7eb", borderRadius: 6, padding: "5px 12px", cursor: "pointer" }}>`,
+    `          {expanded ? "Hide" : "Show"} installed-only components`,
+    `        </button>`,
     `      </div>`,
-    `      {/* Category groups */}`,
-    `      {inventoryData.map(group => (`,
+    `      {/* Category groups — active components first */}`,
+    `      {inventoryData.map(group => {`,
+    `        const active = group.components.filter((c: any) => c.active);`,
+    `        const inactive = group.components.filter((c: any) => !c.active);`,
+    `        if (active.length === 0 && !expanded) return null;`,
+    `        return (`,
     `        <div key={group.category} style={{ marginBottom: 44 }}>`,
     `          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16, paddingBottom: 10, borderBottom: "2px solid #e5e7eb" }}>`,
     `            <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: "#111" }}>{group.category}</h3>`,
-    `            <span style={{ fontSize: 12, background: "#e0e7ff", color: "#3730a3", padding: "2px 9px", borderRadius: 12, fontWeight: 600 }}>{group.components.length}</span>`,
+    `            <span style={{ fontSize: 12, background: "#dcfce7", color: "#15803d", padding: "2px 9px", borderRadius: 12, fontWeight: 600 }}>{active.length} used</span>`,
+    `            {inactive.length > 0 && <span style={{ fontSize: 12, background: "#f3f4f6", color: "#9ca3af", padding: "2px 9px", borderRadius: 12 }}>{inactive.length} installed</span>}`,
     `          </div>`,
     `          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 12 }}>`,
-    `            {group.components.map(comp => (`,
-    `              <div key={comp.name} style={{ border: "1px solid #e5e7eb", borderRadius: 10, overflow: "hidden", background: "#fff", display: "flex", flexDirection: "column" as any, boxShadow: "0 1px 3px rgba(0,0,0,0.04)" }}>`,
-    `                {/* Visual preview — rendered from project tokens at generation time */}`,
-    `                <div style={{ background: "#f8f9fa", borderBottom: "1px solid #f0f0f0", minHeight: 64, display: "flex", alignItems: "center", justifyContent: "center" }}`,
-    `                  dangerouslySetInnerHTML={{ __html: comp.previewHtml }}`,
-    `                />`,
-    `                {/* Info strip */}`,
-    `                <div style={{ padding: "10px 12px" }}>`,
-    `                  <div style={{ fontWeight: 700, fontSize: 13, color: "#111", marginBottom: 6 }}>{comp.name}</div>`,
-    `                  <div style={{ display: "flex", gap: 4, flexWrap: "wrap" as any }}>`,
-    `                    {comp.tokenCount > 0 && (`,
-    `                      <span style={{ fontSize: 10, background: "#eff6ff", color: "#1d4ed8", padding: "2px 7px", borderRadius: 10, border: "1px solid #dbeafe" }}>`,
-    `                        {comp.tokenCount} tokens`,
-    `                      </span>`,
-    `                    )}`,
-    `                    {comp.colorSwatches.length > 0 && (`,
-    `                      <span style={{ fontSize: 10, background: "#fef9c3", color: "#713f12", padding: "2px 7px", borderRadius: 10, border: "1px solid #fde68a" }}>`,
-    `                        {comp.colorSwatches.length} colors`,
-    `                      </span>`,
-    `                    )}`,
-    `                    {comp.propCount > 0 && (`,
-    `                      <span style={{ fontSize: 10, background: "#f3f4f6", color: "#6b7280", padding: "2px 7px", borderRadius: 10, border: "1px solid #e5e7eb" }}>`,
-    `                        {comp.propCount} props`,
-    `                      </span>`,
-    `                    )}`,
-    `                    {comp.group && comp.group !== "shadcn" && comp.group !== "UI" && comp.group !== "Components" && (`,
-    `                      <span style={{ fontSize: 10, background: "#f0fdf4", color: "#166534", padding: "2px 7px", borderRadius: 10, border: "1px solid #bbf7d0" }}>`,
-    `                        {comp.group}`,
-    `                      </span>`,
-    `                    )}`,
-    `                  </div>`,
-    `                </div>`,
-    `              </div>`,
-    `            ))}`,
+    `            {active.map((comp: any) => <Card key={comp.name} comp={comp} />)}`,
+    `            {expanded && inactive.map((comp: any) => <Card key={comp.name} comp={comp} />)}`,
     `          </div>`,
     `        </div>`,
-    `      ))}`,
+    `        );`,
+    `      })}`,
     `    </div>`,
-    `  ),`,
+    `    );`,
+    `  },`,
     `};`,
   ].join("\n");
 
@@ -4154,6 +4239,7 @@ function writeChangelogStory(changelog) {
   const entries = Array.isArray(changelog) ? changelog.map((e) => ({ version: e.version, date: e.date, changes: e.changes || [] })) : [];
   const content =
     [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Changelog\", tags: [\"autodocs\"], parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -4473,21 +4559,32 @@ function main() {
     }
   }
 
+  // Auto-detect which shadcn/ui components are actually used as JSX in the project source.
+  // This replaces the manual `includeComponents` list — VDS now self-discovers which
+  // shadcn primitives need stories instead of requiring users to maintain a whitelist.
+  const allCompNames = components.map(c => c.name);
+  const autoUsedSet = buildComponentUsageSet(allCompNames, PROJECT_ROOT);
+  console.log(`[VDS] Auto-detected ${autoUsedSet.size} components with active JSX usage`);
+
   let writtenCount = 0;
   for (const comp of components) {
     const componentName = toSafeComponentName(comp.name, comp.file);
-    // Skip unclassified and shadcn/ui primitives (UI group) — they're documented at ui.shadcn.com
-    // Only project-specific module groups (Circles, Finance, Projects, Time, …) get stories
     const g = comp.group || "Components";
-    // Skip shadcn/ui primitives by default — they're documented at ui.shadcn.com
-    // Users can override with vds.config.js: includeGroups: ["shadcn"] or includeComponents: ["Button", "Badge"]
+    const gLower = g.toLowerCase();
+
+    // For shadcn/ui primitives: only generate a story if the component is actually
+    // used as a JSX tag (<Button />, <Badge />, etc.) somewhere in the project source.
+    // Manual overrides: includeGroups (all from group) and includeComponents (named list).
     const includeGroups = VDS_CONFIG.includeGroups || [];
     const includeComponents = VDS_CONFIG.includeComponents || [];
-    const gLower = g.toLowerCase();
+
     if (g === "Uncategorized" || gLower === "ui" || gLower === "shadcn") {
       const groupIncluded = includeGroups.some((ig) => ig.toLowerCase() === gLower);
       const compIncluded = includeComponents.includes(componentName);
-      if (!groupIncluded && !compIncluded) {
+      // Auto-detection: is the component used as a JSX tag in the project?
+      const autoUsed = autoUsedSet.has(comp.name) || autoUsedSet.has(componentName);
+
+      if (!groupIncluded && !compIncluded && !autoUsed) {
         // Clean up leftover story files for components that are now in the skip group
         const oldStory = path.join(STORIES_DIR, `${componentName}.stories.tsx`);
         if (fs.existsSync(oldStory)) {
@@ -4495,12 +4592,15 @@ function main() {
             const firstLine = fs.readFileSync(oldStory, "utf-8").split("\n")[0] || "";
             if (firstLine.includes("@vds-regenerate")) {
               fs.unlinkSync(oldStory);
-              console.log(`[VDS] Removed shadcn/ui story: ${componentName}.stories.tsx`);
+              console.log(`[VDS] Removed unused shadcn story: ${componentName}.stories.tsx`);
             }
           } catch { /* ignore */ }
         }
         continue;
       }
+      if (autoUsed && !compIncluded) {
+        console.log(`[VDS] Auto-including ${componentName} (active JSX usage detected)`);
+      }
     }
     if (onlyName && componentName !== onlyName) continue;