vibe-design-system 2.5.18 → 2.5.20

package/package.json

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

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,29 +456,107 @@ 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) {
+/** 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;
+}
+
+/** 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 and lucide-react imports. usageFromPages: sayfadan çıkarılan gerçek prop değerleri (yoksa fallback). */
+function buildDefaultArgsForRequiredProps(props, usageFromPages = null) {
   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 fromPages = usageFromPages && typeof usageFromPages === "object" ? usageFromPages : {};
+  const added = new Set();
+  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;
+      if (/LucideIcon|lucide-react/.test(type)) {
+        const iconName = LUCIDE_ICON_DEFAULT;
+        lucideImports.add(iconName);
+        argLines.push(`    ${name}: ${iconName},`);
+        added.add(name);
+      } else if (/\[\]/.test(type)) {
+        if (/string\s*\[\]/.test(type)) {
+          argLines.push(`    ${name}: ["Example"],`);
+        } else {
+          argLines.push(`    ${name}: [],`);
+        }
+        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])},`);
+        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])},`);
+    }
+  }
+  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] };
@@ -723,7 +801,8 @@ function buildStoryFileContent(comp) {
 
   // Props: manifest or parse from source for default args (LucideIcon, array types)
   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 } = buildDefaultArgsForRequiredProps(effectiveProps, usageFromPages);
   const useReactNodeChildrenRender = !omitChildren && hasChildrenPropReactNode(effectiveProps);
 
   // Skip story only if not a page and no export found