vibe-design-system 2.8.70 → 2.8.72

package/package.json

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

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

@@ -4099,9 +4099,11 @@ function writeComponentInventoryStory(components, foundations) {
     }
 
     const { actualExport, isDefault } = exportInfo;
-    importInfoMap[comp.name] = { identifier, importAlias, isDefault, actualExport, skip: false };
+    const isShadcn = (comp.group || '').toLowerCase() === 'shadcn';
+    importInfoMap[comp.name] = { identifier, importAlias, isDefault, actualExport, skip: false, isShadcn };
 
-    if (!seenAliases.has(importAlias)) {
+    // Only import shadcn UI primitives — project components are shown via story iframes
+    if (isShadcn && !seenAliases.has(importAlias)) {
       seenAliases.add(importAlias);
       orderedImports.push({ identifier, importAlias, isDefault, actualExport });
     }
@@ -4186,10 +4188,13 @@ function writeComponentInventoryStory(components, foundations) {
     return `import { ${namedPart} } from "${imp.importAlias}";`;
   });
 
-  // ── PREVIEWS map entries (only for non-skipped components) ─────────────────
+  // ── PREVIEWS map: only shadcn UI primitives (safe to render with no props) ──
   const TEXT_CHILD_NAMES = new Set(['button','badge','toggle','label','link','chip','tag','pill']);
   const previewEntries = components
-    .filter(comp => importInfoMap[comp.name] && !importInfoMap[comp.name].skip)
+    .filter(comp => {
+      const info = importInfoMap[comp.name];
+      return info && !info.skip && info.isShadcn;
+    })
     .map(comp => {
       const { identifier } = importInfoMap[comp.name];
       const hasText = TEXT_CHILD_NAMES.has(identifier.toLowerCase());
@@ -4199,6 +4204,32 @@ function writeComponentInventoryStory(components, foundations) {
       return `  ${JSON.stringify(comp.name)}: ${call}`;
     });
 
+  // ── STORY_IDS map: project components get embedded as story iframes ─────────
+  // Uses Storybook's sanitize logic: lowercase + replace non-alphanumeric with '-'
+  // PascalCase names stay as one word ("AppHeader" → "appheader"), matching real IDs
+  function toStoryId(category, pascalName) {
+    return [category, pascalName].join('/')
+      .toLowerCase().replace(/[^a-z0-9/]+/g, '-').replace(/-*\/+/g, '-')
+      .replace(/-+/g, '-').replace(/^-|-$/g, '') + '--default';
+  }
+  const storyIdEntries = components
+    .filter(comp => {
+      const info = importInfoMap[comp.name];
+      return info && !info.isShadcn; // project (non-shadcn) components only
+    })
+    .map(comp => {
+      // Find the category for this component from categorized
+      const cat = Object.keys(categorized).find(c => categorized[c].some(x => x.name === comp.name));
+      if (!cat) return null;
+      // Use PascalCase identifier to match Storybook story title field (no hyphenation of PascalCase)
+      const pascalId = toPascalLocal(comp.name);
+      // Only include if a story file actually exists for this component
+      const storyFile = path.join(STORIES_DIR, `${pascalId}.stories.tsx`);
+      if (!fs.existsSync(storyFile)) return null; // no story → shape HTML fallback
+      return `  ${JSON.stringify(comp.name)}: ${JSON.stringify(toStoryId(cat, pascalId))}`;
+    })
+    .filter(Boolean);
+
   // ── Generate story file ────────────────────────────────────────────────────
   const content = [
     `import React from "react";`,
@@ -4224,10 +4255,14 @@ function writeComponentInventoryStory(components, foundations) {
     ] : [
       `const _PW = ({ children }: { children: React.ReactNode }) => React.createElement(React.Fragment, null, children) as React.ReactElement;`,
     ]),
-    // PREVIEWS: each component renders via its real import; ErrorBoundary catches failures
+    // PREVIEWS: shadcn UI primitives rendered directly (safe with no props)
     `const PREVIEWS: Record<string, () => React.ReactElement> = {`,
     ...previewEntries.map(e => e + ','),
     `};`,
+    // STORY_IDS: project components shown via their own story iframe
+    `const STORY_IDS: Record<string, string> = {`,
+    ...storyIdEntries.map(e => e + ','),
+    `};`,
     ``,
     // Inventory data (metadata only — visual rendering is done at runtime via PREVIEWS)
     `const inventoryData: { category: string; components: { name: string; group: string; tokenCount: number; propCount: number; colorSwatches: { token: string; hex: string }[]; previewHtml: string; previewScale: number; active: boolean }[] }[] = ${JSON.stringify(inventoryData)};`,
@@ -4235,30 +4270,44 @@ function writeComponentInventoryStory(components, foundations) {
     `const activeComponents = ${activeComponents};`,
     `const uniqueTokens = ${uniqueTokens};`,
     ``,
-    // CardPreview: renders the actual component at the right scale, falls back to shape HTML
+    // CardPreview: shadcn → direct render; project → story iframe; else → shape HTML
     `const _InvPreview = ({ comp }: { comp: any }) => {`,
-    `  const s: number = comp.previewScale || 0.4;`,
-    `  const centered = s >= 0.9;`,
     `  const fn = PREVIEWS[comp.name];`,
+    `  const storyId = STORY_IDS[comp.name];`,
     `  const shapeHtml = (`,
     `    <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}`,
     `      dangerouslySetInnerHTML={{ __html: comp.previewHtml }} />`,
     `  );`,
-    `  const wPct = (+(100 / s).toFixed(1)) + "%";`,
-    `  const innerStyle: React.CSSProperties = centered`,
-    `    ? { position: "absolute", top: "50%", left: "50%",`,
-    `        transform: "translate(-50%, -50%) scale(" + s + ")",`,
-    `        transformOrigin: "center center", pointerEvents: "none" }`,
-    `    : { position: "absolute", top: 0, left: 0, width: wPct,`,
-    `        transform: "scale(" + s + ")",`,
-    `        transformOrigin: "top left", pointerEvents: "none" };`,
-    `  return (`,
-    `    <div style={{ height: 96, overflow: "hidden", position: "relative", background: "#fff" }}>`,
-    `      <_EB fallback={shapeHtml}>`,
-    `        {fn ? <_PW><div style={innerStyle}>{fn()}</div></_PW> : shapeHtml}`,
-    `      </_EB>`,
-    `    </div>`,
-    `  );`,
+    `  // Shadcn primitives: render directly with scale`,
+    `  if (fn) {`,
+    `    const s: number = comp.previewScale || 0.65;`,
+    `    const centered = s >= 0.9;`,
+    `    const wPct = (+(100 / s).toFixed(1)) + "%";`,
+    `    const innerStyle: React.CSSProperties = centered`,
+    `      ? { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%) scale(" + s + ")", transformOrigin: "center center", pointerEvents: "none" }`,
+    `      : { position: "absolute", top: 0, left: 0, width: wPct, transform: "scale(" + s + ")", transformOrigin: "top left", pointerEvents: "none" };`,
+    `    return (`,
+    `      <div style={{ height: 140, overflow: "hidden", position: "relative", background: "#fff" }}>`,
+    `        <_EB fallback={shapeHtml}>`,
+    `          <_PW><div style={innerStyle}>{fn()}</div></_PW>`,
+    `        </_EB>`,
+    `      </div>`,
+    `    );`,
+    `  }`,
+    `  // Project components: embed their own story as iframe`,
+    `  if (storyId) {`,
+    `    return (`,
+    `      <div style={{ height: 140, overflow: "hidden", position: "relative", background: "#fff" }}>`,
+    `        <iframe`,
+    `          src={"/iframe.html?id=" + storyId + "&viewMode=story"}`,
+    `          style={{ width: "300%", height: "424px", transform: "scale(0.333)", transformOrigin: "top left", border: "none", pointerEvents: "none", display: "block" }}`,
+    `          loading="lazy"`,
+    `        />`,
+    `      </div>`,
+    `    );`,
+    `  }`,
+    `  // Fallback: shape HTML`,
+    `  return <div style={{ height: 140, display: "flex", alignItems: "center", justifyContent: "center" }} dangerouslySetInnerHTML={{ __html: comp.previewHtml }} />;`,
     `};`,
     `const InventoryCard = ({ 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 }}>`,