vibe-design-system 2.5.17 → 2.5.20

package/bin/init.js

@@ -49,6 +49,7 @@ export default config;
 const STORYBOOK_PREVIEW_TS = `import type { Preview } from "@storybook/react";
 import React from "react";
 import { MemoryRouter } from "react-router-dom";
+// Uygulamanızla aynı stiller için: index.css + kullandığınız diğer global CSS dosyalarını ekleyin (örn. "../src/App.css").
 import "../src/index.css";
 
 const withRouter = (Story: any) => {
@@ -94,6 +95,8 @@ Geliştirme kuralları:
 - Variant'lar için cva() kullan
 - Tailwind CSS kullan
 - Named export veya default export — ikisi de çalışır
+
+Storybook stilleri sayfalardan farklıysa: .storybook/preview.ts içinde uygulamanızın kullandığı tüm global CSS dosyalarını import edin (index.css dışında App.css, globals.css vb.).
 `;
 
 const WATCH_MJS = `#!/usr/bin/env node

package/package.json

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

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

@@ -445,28 +445,120 @@ function parsePropsFromSource(source) {
 /** Default icon for LucideIcon prop when name is generic (icon, leftIcon, etc.). */
 const LUCIDE_ICON_DEFAULT = "Star";
 
-/** Build default args lines and lucide-react imports for required props (LucideIcon → icon component, X[] → example item). */
-function buildDefaultArgsForRequiredProps(props) {
+/** Yaygın required string prop isimleri için fallback (sayfada kullanım bulunamazsa). */
+const DEFAULT_STRINGS_BY_PROP_NAME = {
+  eyebrow: "Label",
+  title: "Section title",
+  description: "Short description for the section.",
+  value: "100",
+  name: "Example",
+  heading: "Heading",
+  subtitle: "Subtitle text",
+  text: "Sample text",
+  label: "Label",
+  status: "Active",
+  sector: "Technology",
+  step: "01",
+  role: "Team Member",
+};
+
+/** 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 {
-        // Object arrays ({ label, value } vb.) birçok component'te doğrudan child olarak render edilince hata verir; güvenli varsayılan boş dizi.
-        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);
       }
     }
   }
+  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] };
 }
 
@@ -709,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