vibe-design-system 2.5.20 → 2.5.21

package/package.json

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

package/vds-core-template/scan.mjs

@@ -538,6 +538,19 @@ function extractComponentSuggestions() {
   return suggestions;
 }
 
+/** src/pages/ içinde tanımlı ama src/components'a çıkarılmamış visual section'ları listele (component adayı raporu). */
+function extractUnreleasedSectionCandidates() {
+  if (!fs.existsSync(PAGES_DIR)) return [];
+  const suggestions = extractComponentSuggestions();
+  return suggestions.map((s) => ({
+    suggestedName: s.suggestedName,
+    file: Array.isArray(s.foundIn) && s.foundIn[0] ? s.foundIn[0] : null,
+    files: s.foundIn || [],
+    occurrences: s.occurrences || 0,
+    snippet: s.snippet,
+  }));
+}
+
 const VDS_GENERATED_DIR = path.join(COMPONENTS_DIR, "vds-generated");
 
 /** Ensure component name is valid JS: no leading digits/special chars, PascalCase. */
@@ -1145,6 +1158,7 @@ function scan() {
   foundations.icons = extractLucideIconsUsed(SRC_DIR);
   foundations.brand = { assets: extractBrandAssets() };
   const componentSuggestions = extractComponentSuggestions();
+  const unreleasedSectionCandidates = extractUnreleasedSectionCandidates();
   const output = {
     branch: getGitBranch(),
     engineer: getGitEngineer(),
@@ -1153,6 +1167,7 @@ function scan() {
     components: results,
     foundations,
     componentSuggestions,
+    unreleasedSectionCandidates,
   };
 
   const prevOutput = readPreviousOutputFull();

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

@@ -462,6 +462,22 @@ const DEFAULT_STRINGS_BY_PROP_NAME = {
   role: "Team Member",
 };
 
+/** Component adına göre contextual placeholder (kullanım yoksa). */
+const COMPONENT_PLACEHOLDERS = {
+  ProcessStep: { step: "01", title: "Discovery Phase", description: "We analyze your current setup and requirements." },
+  StatBlock: { title: "Metric", value: "100%", description: "Key performance indicator." },
+  BenefitCard: { title: "Benefit", description: "Why this matters for you.", value: "Value proposition." },
+  TeamCard: { name: "Jane Doe", role: "Team Member", quote: "Quote text here." },
+  ManifestoSection: { title: "Our mission", description: "What we believe in." },
+};
+
+/** ReactNode prop adına göre kısa placeholder metin (createElement içinde). */
+const REACTNODE_PLACEHOLDER_TEXT = {
+  quote: "Quote text here.",
+  title: "Title text",
+  children: "Example content",
+};
+
 /** Recursive list of .tsx file paths under dir (relative to dir). */
 function getAllTsxUnderDir(dir) {
   if (!fs.existsSync(dir)) return [];
@@ -493,6 +509,43 @@ function extractPropsFromJsxTagContent(tagContent) {
   return props;
 }
 
+/** Parse source for interface ItemTypeName { field: type; ... } and return list of field names. */
+function getItemTypeFieldsFromSource(source, itemTypeName) {
+  if (!source || !itemTypeName) return [];
+  const escaped = itemTypeName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  let body = null;
+  const typeRe = new RegExp(`(?:type|interface)\\s+${escaped}\\s*=\\s*\\{([^}]+)\\}`, "m");
+  const ifaceRe = new RegExp(`interface\\s+${escaped}\\s*\\{([^}]+)\\}`, "m");
+  const m1 = source.match(typeRe);
+  const m2 = source.match(ifaceRe);
+  if (m1) body = m1[1];
+  else if (m2) body = m2[1];
+  if (!body) return [];
+  const fieldRe = /(\w+)\s*[:?]/g;
+  const fields = [];
+  let m;
+  while ((m = fieldRe.exec(body)) !== null) fields.push(m[1]);
+  return fields;
+}
+
+/** Build 2-3 mock items for array prop from component source (item type fields). */
+function buildMockArrayItems(componentSource, itemTypeName, propName) {
+  const fields = getItemTypeFieldsFromSource(componentSource, itemTypeName);
+  const defaultFields = ["label", "value", "title", "id", "name", "description"];
+  const useFields = fields.length ? fields : defaultFields;
+  const items = [];
+  for (let i = 1; i <= 3; i++) {
+    const item = {};
+    for (const f of useFields) {
+      if (f === "id") item[f] = String(i);
+      else if (f === "value") item[f] = String(100 - i * 25);
+      else item[f] = `Example ${i}`;
+    }
+    items.push(item);
+  }
+  return items;
+}
+
 /** Find first real usage of component in src/pages or src/app; return { propName: "literalValue", ... } or null. */
 function findComponentUsageInPages(componentName, projectRoot) {
   const srcDir = path.join(projectRoot, "src");
@@ -520,34 +573,57 @@ function findComponentUsageInPages(componentName, projectRoot) {
   return null;
 }
 
-/** Build default args lines and lucide-react imports. usageFromPages: sayfadan çıkarılan gerçek prop değerleri (yoksa fallback). */
-function buildDefaultArgsForRequiredProps(props, usageFromPages = null) {
+/** Build default args lines, lucide imports, argTypes for icon (no raw dump), and needReact for ReactNode. */
+function buildDefaultArgsForRequiredProps(props, usageFromPages = null, componentName = "", componentSource = "") {
   const argLines = [];
   const lucideImports = new Set();
+  const iconPropNames = [];
+  let needReact = false;
   const fromPages = usageFromPages && typeof usageFromPages === "object" ? usageFromPages : {};
+  const componentPlaceholders = (componentName && COMPONENT_PLACEHOLDERS[componentName]) || {};
   const added = new Set();
+
+  const stringFallback = (name) => {
+    if (fromPages[name] !== undefined && fromPages[name] !== null) return JSON.stringify(String(fromPages[name]));
+    if (componentPlaceholders[name] !== undefined) return JSON.stringify(componentPlaceholders[name]);
+    if (DEFAULT_STRINGS_BY_PROP_NAME[name] !== undefined) return JSON.stringify(DEFAULT_STRINGS_BY_PROP_NAME[name]);
+    return JSON.stringify("Example");
+  };
+
   if (Array.isArray(props) && props.length > 0) {
     for (const p of props) {
-      if (p.required !== true) continue;
       const type = String(p.type || "").trim();
       const name = p.name;
+      const required = p.required === true;
+      if (/ReactNode|React\.ReactNode/.test(type)) {
+        const text = REACTNODE_PLACEHOLDER_TEXT[name] || componentPlaceholders[name] || "Content";
+        argLines.push(`    ${name}: React.createElement('p', null, ${JSON.stringify(text)}),`);
+        needReact = true;
+        added.add(name);
+        continue;
+      }
+      if (!required) continue;
       if (/LucideIcon|lucide-react/.test(type)) {
         const iconName = LUCIDE_ICON_DEFAULT;
         lucideImports.add(iconName);
         argLines.push(`    ${name}: ${iconName},`);
+        iconPropNames.push(name);
         added.add(name);
       } else if (/\[\]/.test(type)) {
         if (/string\s*\[\]/.test(type)) {
           argLines.push(`    ${name}: ["Example"],`);
         } else {
-          argLines.push(`    ${name}: [],`);
+          const itemTypeMatch = type.match(/([A-Za-z0-9_]+)(?=\s*\[\])/);
+          const itemType = itemTypeMatch ? itemTypeMatch[1] : "Item";
+          const mockItems = buildMockArrayItems(componentSource, itemType, name);
+          argLines.push(`    ${name}: ${JSON.stringify(mockItems)},`);
         }
         added.add(name);
       } else if (fromPages[name] !== undefined && fromPages[name] !== null) {
         argLines.push(`    ${name}: ${JSON.stringify(String(fromPages[name]))},`);
         added.add(name);
-      } else if (/string/.test(type) && DEFAULT_STRINGS_BY_PROP_NAME[name] !== undefined) {
-        argLines.push(`    ${name}: ${JSON.stringify(DEFAULT_STRINGS_BY_PROP_NAME[name])},`);
+      } else if (/string/.test(type)) {
+        argLines.push(`    ${name}: ${stringFallback(name)},`);
         added.add(name);
       }
     }
@@ -559,7 +635,7 @@ function buildDefaultArgsForRequiredProps(props, usageFromPages = null) {
       argLines.push(`    ${name}: ${JSON.stringify(val)},`);
     }
   }
-  return { argLines, lucideImports: [...lucideImports] };
+  return { argLines, lucideImports: [...lucideImports], iconPropNames, needReact };
 }
 
 function getExampleItemForArrayType(itemType) {
@@ -678,9 +754,12 @@ function buildSpecialStories(componentName, variants) {
   return "";
 }
 
-function buildRecipeStoryContent(comp, componentName, importPath, title, source, exportStyle, recipe, defaultArgLines = [], lucideImports = []) {
+function buildRecipeStoryContent(comp, componentName, importPath, title, source, exportStyle, recipe, defaultArgLines = [], lucideImports = [], iconPropNames = [], needReact = false) {
   const lines = [];
   lines.push(`import type { Meta, StoryObj } from "@storybook/react";`);
+  if (needReact) {
+    lines.push(`import React from "react";`);
+  }
   if (lucideImports.length > 0) {
     lines.push(`import { ${lucideImports.join(", ")} } from "lucide-react";`);
   }
@@ -725,6 +804,13 @@ function buildRecipeStoryContent(comp, componentName, importPath, title, source,
   lines.push(`  title: ${JSON.stringify(title)},`);
   lines.push(`  component: ComponentRef,`);
   lines.push(`  tags: ["autodocs"],`);
+  if (iconPropNames && iconPropNames.length > 0) {
+    lines.push(`  argTypes: {`);
+    for (const name of iconPropNames) {
+      lines.push(`    ${name}: { control: false },`);
+    }
+    lines.push(`  },`);
+  }
   lines.push(`} satisfies Meta<typeof ComponentRef>;`);
   lines.push("");
   lines.push(`export default meta;`);
@@ -799,10 +885,10 @@ function buildStoryFileContent(comp) {
   const omitChildren = componentWrapsVoidElement(source);
   const isPage = comp.file.startsWith("pages/");
 
-  // Props: manifest or parse from source for default args (LucideIcon, array types)
+  // Props: manifest or parse from source for default args (LucideIcon, array types, ReactNode, contextual placeholders)
   const effectiveProps = Array.isArray(comp.props) && comp.props.length > 0 ? comp.props : parsePropsFromSource(source);
   const usageFromPages = findComponentUsageInPages(componentName, PROJECT_ROOT);
-  const { argLines: defaultArgLines, lucideImports } = buildDefaultArgsForRequiredProps(effectiveProps, usageFromPages);
+  const { argLines: defaultArgLines, lucideImports, iconPropNames, needReact } = buildDefaultArgsForRequiredProps(effectiveProps, usageFromPages, componentName, source);
   const useReactNodeChildrenRender = !omitChildren && hasChildrenPropReactNode(effectiveProps);
 
   // Skip story only if not a page and no export found
@@ -811,12 +897,12 @@ function buildStoryFileContent(comp) {
   }
 
   if (RECIPES[componentName]) {
-    return buildRecipeStoryContent(comp, componentName, importPath, title, source, exportStyle, RECIPES[componentName], defaultArgLines, lucideImports);
+    return buildRecipeStoryContent(comp, componentName, importPath, title, source, exportStyle, RECIPES[componentName], defaultArgLines, lucideImports, iconPropNames, needReact);
   }
 
   const lines = [];
   lines.push(`import type { Meta, StoryObj } from "@storybook/react";`);
-  if (useReactNodeChildrenRender) {
+  if (useReactNodeChildrenRender || needReact) {
     lines.push(`import React from "react";`);
   }
   if (lucideImports.length > 0) {
@@ -846,6 +932,13 @@ function buildStoryFileContent(comp) {
   lines.push(`  title: ${JSON.stringify(title)},`);
   lines.push(`  component: ComponentRef,`);
   lines.push(`  tags: ["autodocs"],`);
+  if (iconPropNames && iconPropNames.length > 0) {
+    lines.push(`  argTypes: {`);
+    for (const name of iconPropNames) {
+      lines.push(`    ${name}: { control: false },`);
+    }
+    lines.push(`  },`);
+  }
   lines.push(`} satisfies Meta<typeof ComponentRef>;`);
   lines.push("");
   lines.push(`export default meta;`);