vibe-design-system 2.5.4 → 2.5.5

package/package.json

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

package/vds-core-template/scan.mjs

@@ -794,6 +794,7 @@ export function ${componentName}() {
       category: "Extracted",
       description: "Auto-extracted from repeated className patterns.",
       tokens: [...new Set(tokens)],
+      occurrences: s.occurrences ?? 0,
     });
   }
   return entries;

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

@@ -22,7 +22,8 @@ const STORIES_DIR = path.join(SRC_DIR, "stories");
 
 // CSS is loaded from .storybook/preview.tsx — never add CSS import to story files.
 
-// Components we don't want to auto-generate stories for (project-specific dashboards, heavy UIs, etc.)
+// Components we don't want to auto-generate import-based stories for (project-specific dashboards, heavy UIs, etc.)
+// vds-generated/ is handled separately: placeholder stories only (no import of broken Figma/Make JSX).
 const SKIP_LIST = [
   "AnalysisDashboard",
   "ComponentLibrary",
@@ -380,6 +381,33 @@ function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
+/** Placeholder story for vds-generated extracted patterns (no import; broken Figma/Make JSX is not loaded). */
+function buildExtractedPlaceholderStory(comp) {
+  const componentName = toSafeComponentName(comp.name, comp.file);
+  const occurrenceCount = comp.occurrences ?? 0;
+  const title = `VDS Generated/${componentName}`;
+  return [
+    'import type { Meta, StoryObj } from "@storybook/react";',
+    "",
+    `const meta = { title: ${JSON.stringify(title)} } satisfies Meta;`,
+    "export default meta;",
+    "type Story = StoryObj;",
+    "",
+    "export const Default: Story = {",
+    "  render: () => (",
+    "    <div style={{ padding: 24, border: \"2px dashed #ccc\", borderRadius: 8 }}>",
+    "      <p style={{ color: \"#999\", fontSize: 12 }}>EXTRACTED PATTERN</p>",
+    `      <h3 style={{ margin: \"0 0 8px 0\" }}>${componentName}</h3>`,
+    "      <p style={{ color: \"#666\", margin: 0 }}>",
+    `        This pattern was detected ${occurrenceCount} times in src/pages/.`,
+    "        Extract it as a proper component to see it rendered here.",
+    "      </p>",
+    "    </div>",
+    "  ),",
+    "};",
+  ].join("\n");
+}
+
 function detectExportStyle(source, componentName) {
   if (!source) return "unknown";
   const hasDefault = /export\s+default\b/.test(source);
@@ -960,12 +988,22 @@ function main() {
   for (const comp of components) {
     const componentName = toSafeComponentName(comp.name, comp.file);
     if (onlyName && componentName !== onlyName) continue;
+
+    const storyFileName = `${componentName}.stories.tsx`;
+    const storyPath = path.join(STORIES_DIR, storyFileName);
+
+    if (comp.file.startsWith("vds-generated/")) {
+      const content = buildExtractedPlaceholderStory(comp);
+      fs.writeFileSync(storyPath, content, "utf-8");
+      console.log(`[VDS] Wrote ${path.relative(PROJECT_ROOT, storyPath)} (placeholder)`);
+      continue;
+    }
+
+    if (!comp.file.startsWith("ui/") && !comp.file.startsWith("pages/")) continue;
     if (SKIP_LIST.includes(componentName)) continue;
     const requiredCount = Array.isArray(comp.props) ? comp.props.filter((p) => p.required === true).length : 0;
     if (requiredCount > 3) continue;
 
-    const storyFileName = `${componentName}.stories.tsx`;
-    const storyPath = path.join(STORIES_DIR, storyFileName);
     const content = buildStoryFileContent(comp);
     if (content == null) continue;
     fs.writeFileSync(storyPath, content, "utf-8");