vibe-design-system 2.5.18 → 2.5.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.5.18",
+  "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

@@ -445,7 +445,7 @@ function parsePropsFromSource(source) {
 /** Default icon for LucideIcon prop when name is generic (icon, leftIcon, etc.). */
 const LUCIDE_ICON_DEFAULT = "Star";
 
-/** Yaygın required string prop isimleri için anlamlı varsayılan metin (component'in boş/Example yerine görünür render etmesi için). */
+/** Yaygın required string prop isimleri için fallback (sayfada kullanım bulunamazsa). */
 const DEFAULT_STRINGS_BY_PROP_NAME = {
   eyebrow: "Label",
   title: "Section title",
@@ -456,32 +456,186 @@ const DEFAULT_STRINGS_BY_PROP_NAME = {
   subtitle: "Subtitle text",
   text: "Sample text",
   label: "Label",
+  status: "Active",
+  sector: "Technology",
+  step: "01",
+  role: "Team Member",
 };
 
-/** Build default args lines and lucide-react imports for required props (LucideIcon → icon component, X[] → example item). */
-function buildDefaultArgsForRequiredProps(props) {
+/** 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 [];
+  const out = [];
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  for (const e of entries) {
+    const full = path.join(dir, e.name);
+    if (e.isDirectory()) {
+      out.push(...getAllTsxUnderDir(full).map((r) => path.join(e.name, r)));
+    } else if (e.isFile() && e.name.endsWith(".tsx")) {
+      out.push(e.name);
+    }
+  }
+  return out;
+}
+
+/** Extract prop="value" and prop='value' and prop={"value"} from JSX tag content. Returns { propName: "value", ... }. */
+function extractPropsFromJsxTagContent(tagContent) {
+  const props = {};
+  let m;
+  const doubleQuoted = /\b(\w+)=["]([^"]*)["]/g;
+  while ((m = doubleQuoted.exec(tagContent)) !== null) props[m[1]] = m[2];
+  const singleQuoted = /\b(\w+)=[']([^']*)[']/g;
+  while ((m = singleQuoted.exec(tagContent)) !== null) if (props[m[1]] === undefined) props[m[1]] = m[2];
+  const jsxDouble = /\b(\w+)=\{"([^"]*)"\}/g;
+  while ((m = jsxDouble.exec(tagContent)) !== null) if (props[m[1]] === undefined) props[m[1]] = m[2];
+  const jsxSingle = /\b(\w+)=\{'([^']*)'\}/g;
+  while ((m = jsxSingle.exec(tagContent)) !== null) if (props[m[1]] === undefined) props[m[1]] = m[2];
+  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");
+  const pagesDir = path.join(srcDir, "pages");
+  const appDir = path.join(srcDir, "app");
+  const dirs = [];
+  if (fs.existsSync(pagesDir)) dirs.push(pagesDir);
+  if (fs.existsSync(appDir)) dirs.push(appDir);
+  const escapedName = componentName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const tagOpenRe = new RegExp(`<${escapedName}\\s+([\\s\\S]*?)\\s*\\/?>`, "m");
+  for (const dir of dirs) {
+    const files = getAllTsxUnderDir(dir);
+    for (const rel of files) {
+      const fullPath = path.join(dir, rel);
+      try {
+        const content = fs.readFileSync(fullPath, "utf-8");
+        const match = content.match(tagOpenRe);
+        if (match) {
+          const props = extractPropsFromJsxTagContent(match[1]);
+          if (Object.keys(props).length > 0) return props;
+        }
+      } catch (_) {}
+    }
+  }
+  return 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();
-  if (!Array.isArray(props) || props.length === 0) return { argLines, lucideImports: [] };
-  for (const p of props) {
-    if (p.required !== true) continue;
-    const type = String(p.type || "").trim();
-    const name = p.name;
-    if (/LucideIcon|lucide-react/.test(type)) {
-      const iconName = LUCIDE_ICON_DEFAULT;
-      lucideImports.add(iconName);
-      argLines.push(`    ${name}: ${iconName},`);
-    } else if (/\[\]/.test(type)) {
-      if (/string\s*\[\]/.test(type)) {
-        argLines.push(`    ${name}: ["Example"],`);
-      } else {
-        argLines.push(`    ${name}: [],`);
+  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) {
+      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 {
+          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)) {
+        argLines.push(`    ${name}: ${stringFallback(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])},`);
     }
   }
-  return { argLines, lucideImports: [...lucideImports] };
+  for (const name of Object.keys(fromPages)) {
+    if (added.has(name)) continue;
+    const val = fromPages[name];
+    if (val !== undefined && val !== null && typeof val === "string") {
+      argLines.push(`    ${name}: ${JSON.stringify(val)},`);
+    }
+  }
+  return { argLines, lucideImports: [...lucideImports], iconPropNames, needReact };
 }
 
 function getExampleItemForArrayType(itemType) {
@@ -600,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";`);
   }
@@ -647,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;`);
@@ -721,9 +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 { argLines: defaultArgLines, lucideImports } = buildDefaultArgsForRequiredProps(effectiveProps);
+  const usageFromPages = findComponentUsageInPages(componentName, PROJECT_ROOT);
+  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
@@ -732,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) {
@@ -767,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;`);