vibe-design-system 2.5.40 → 2.5.42

package/package.json

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

package/vds-core-template/scan.mjs

@@ -542,6 +542,7 @@ function extractComponentSuggestions() {
   const pageDirs = [
     { dir: PAGES_DIR, prefix: "src/pages/" },
     { dir: APP_DIR, prefix: "src/app/" },
+    { dir: COMPONENTS_DIR, prefix: "src/components/" },
   ];
   const allPageFiles = [];
   for (const { dir, prefix } of pageDirs) {
@@ -1195,6 +1196,64 @@ function extractFoundations() {
   };
 }
 
+function extractButtonUsage() {
+  if (!fs.existsSync(SRC_DIR)) return null;
+  const files = getAllTsxJsxInDir(SRC_DIR);
+  if (!Array.isArray(files) || files.length === 0) return null;
+
+  const combos = new Map();
+  let total = 0;
+
+  const extractPropLiteral = (attrs, name) => {
+    if (!attrs) return null;
+    // variant="primary"
+    let re = new RegExp(name + '\\\\s*=\\\\s*["\']([^"\']+)["\']');
+    let m = attrs.match(re);
+    if (m) return m[1];
+    // variant={"primary"}
+    re = new RegExp(name + '\\\\s*=\\\\s*\\\\{\\\\s*["\']([^"\']+)["\']\\\\s*\\\\}');
+    m = attrs.match(re);
+    if (m) return m[1];
+    return null;
+  };
+
+  for (const rel of files) {
+    const fullPath = path.join(SRC_DIR, rel);
+    let content;
+    try {
+      content = fs.readFileSync(fullPath, "utf-8");
+    } catch (_) {
+      continue;
+    }
+    const re = /<Button\\b([^>]*)>/g;
+    let m;
+    while ((m = re.exec(content)) !== null) {
+      total += 1;
+      const attrs = m[1] || "";
+      const variant = extractPropLiteral(attrs, "variant") || "default";
+      const size = extractPropLiteral(attrs, "size") || "default";
+      const asChild = /\\basChild\\b/.test(attrs);
+      const key = `${variant}__${size}__${asChild ? "1" : "0"}`;
+      if (!combos.has(key)) {
+        combos.set(key, {
+          key,
+          variant,
+          size,
+          asChild,
+          count: 0,
+        });
+      }
+      combos.get(key).count += 1;
+    }
+  }
+
+  if (total === 0 || combos.size === 0) return null;
+  return {
+    total,
+    combos: Array.from(combos.values()),
+  };
+}
+
 function scan() {
   if (!fs.existsSync(COMPONENTS_DIR)) {
     console.error(CLI_LOCALES[CLI_LOCALE].componentsNotFound);
@@ -1242,6 +1301,10 @@ function scan() {
   const foundations = extractFoundations();
   foundations.icons = extractLucideIconsUsed(SRC_DIR);
   foundations.brand = { assets: extractBrandAssets() };
+  const buttonUsage = extractButtonUsage();
+  if (buttonUsage) {
+    foundations.buttonUsage = buttonUsage;
+  }
   const componentSuggestions = extractComponentSuggestions();
   const unreleasedSectionCandidates = extractUnreleasedSectionCandidates();
   const output = {

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

@@ -478,7 +478,7 @@ const REACTNODE_PLACEHOLDER_TEXT = {
   children: "Example content",
 };
 
-/** Component adına göre ekstra args (toString/undefined hatalarını önlemek için; her prop güvenli değer alır). */
+/** Component adına göre ekstra args (toString/dateRange/toFixed hatalarını önlemek için; her prop güvenli değer alır). */
 const COMPONENT_EXTRA_ARGS = {
   TaskEstimateInput: [
     "    task: { id: \"1\", title: \"Example\", estimate: 0, description: \"\" },",
@@ -491,6 +491,22 @@ const COMPONENT_EXTRA_ARGS = {
     "    step: 1,",
     "    taskId: \"1\",",
   ],
+  TimeFilterPanel: [
+    "    filter: { dateRange: {}, userIds: [], tags: [], billable: \"all\" },",
+    "    onFilterChange: () => {},",
+    "    onSaveFilter: () => {},",
+    "    onDeleteFilter: () => {},",
+    "    filteredCount: 0,",
+    "    savedFilters: [],",
+  ],
+  TimeStats: [
+    "    totalLogged: 0,",
+    "    totalBillable: 0,",
+    "    totalNonBillable: 0,",
+    "    totalBilled: 0,",
+    "    totalEstimated: 0,",
+    "    projectTotalEstimated: 0,",
+  ],
 };
 
 /** Render'da args'a uygulanacak fallback (useState(estimate.toString()) gibi kullanımlar için; args/Controls undefined yapsa bile). */
@@ -498,6 +514,13 @@ const RENDER_ARGS_FALLBACKS = {
   TaskEstimateInput: ", estimate: (args && args.estimate) ?? 0, value: (args && args.value) ?? 0, task: (args && args.task) ?? { id: \"1\", title: \"Example\", estimate: 0 }",
 };
 
+/** Kalıcı çözüm: Storybook Docs/Controls args'ı geçmezse bile component'a güvenli props veren wrapper. Önce safeDefaults uygulanır, sonra gelen props. */
+const SAFE_WRAPPER_DEFAULTS = {
+  TaskEstimateInput: `{ estimate: 0, onUpdate: () => {}, value: 0, task: { id: "1", title: "Example", estimate: 0 }, compact: false }`,
+  TimeFilterPanel: `{ filter: { dateRange: {}, userIds: [], tags: [], billable: "all" }, onFilterChange: () => {}, onSaveFilter: () => {}, onDeleteFilter: () => {}, filteredCount: 0, savedFilters: [] }`,
+  TimeStats: `{ totalLogged: 0, totalBillable: 0, totalNonBillable: 0, totalBilled: 0, totalEstimated: 0, projectTotalEstimated: 0 }`,
+};
+
 /** Recursive list of .tsx/.jsx file paths under dir (relative to dir). Index.tsx / index.tsx first for deterministic "first usage". */
 function getAllTsxJsxUnderDir(dir) {
   if (!fs.existsSync(dir)) return [];
@@ -1063,6 +1086,12 @@ function buildStoryFileContent(comp) {
   lines.push(`const ComponentRef = React.lazy(() => import(/* @vite-ignore */ "${importPath}").then(${getDefault}).catch(() => ({ default: ${loadFallback} })));`);
   lines.push("");
 
+  const safeDefaultsObj = componentName && SAFE_WRAPPER_DEFAULTS[componentName];
+  if (safeDefaultsObj) {
+    lines.push(`const safeDefaults = ${safeDefaultsObj};`);
+    lines.push(`const SafeWrapper = (props) => React.createElement(ComponentRef, { ...safeDefaults, ...(props || {}) });`);
+    lines.push("");
+  }
   lines.push(`const meta = {`);
   lines.push(`  title: ${JSON.stringify(title)},`);
   lines.push(`  component: ComponentRef,`);
@@ -1087,13 +1116,15 @@ function buildStoryFileContent(comp) {
     return lines.join("\n");
   }
 
-  // Wrap in Suspense so lazy load errors render fallback instead of crashing
-  const argsFallback = (componentName && RENDER_ARGS_FALLBACKS[componentName]) || "";
-  const argsParam = argsFallback ? "(args = {})" : "(args)";
-  const propsArg = argsFallback ? `{ ...args${argsFallback} }` : "args";
+  // Kalıcı çözüm: SafeWrapper varsa her zaman onu kullan (Docs/Controls args geçmese bile safeDefaults uygulanır)
+  const useSafeWrapper = componentName && SAFE_WRAPPER_DEFAULTS[componentName];
+  const RenderTarget = useSafeWrapper ? "SafeWrapper" : "ComponentRef";
+  const argsFallback = !useSafeWrapper && (componentName && RENDER_ARGS_FALLBACKS[componentName]) || "";
+  const argsParam = (useSafeWrapper || argsFallback) ? "(args = {})" : "(args)";
+  const propsArg = argsFallback ? `{ ...args${argsFallback} }` : (useSafeWrapper ? "args" : "args");
   const renderLine = useReactNodeChildrenRender
-    ? `  render: (args) => React.createElement(React.Suspense, { fallback: null }, React.createElement(ComponentRef, { ...args, children: args.children || React.createElement('span', null, 'Example') })),`
-    : `  render: ${argsParam} => React.createElement(React.Suspense, { fallback: null }, React.createElement(ComponentRef, ${propsArg})),`;
+    ? `  render: (args) => React.createElement(React.Suspense, { fallback: null }, React.createElement(${RenderTarget}, { ...args, children: args.children || React.createElement('span', null, 'Example') })),`
+    : `  render: ${argsParam} => React.createElement(React.Suspense, { fallback: null }, React.createElement(${RenderTarget}, ${propsArg})),`;
   const childrenArgLine = (label) => (!omitChildren && !useReactNodeChildrenRender ? `    children: ${JSON.stringify(label)},` : null);
 
   if (!variants.length) {
@@ -1282,6 +1313,58 @@ function writeFoundationsStories(foundations) {
     fs.writeFileSync(path.join(foundationsDir, "Icons.stories.tsx"), iconsContent, "utf-8");
     console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Icons.stories.tsx")));
   }
+
+  const buttonUsage = foundations?.buttonUsage;
+  if (buttonUsage && Array.isArray(buttonUsage.combos) && buttonUsage.combos.length > 0) {
+    const combos = buttonUsage.combos.map((c) => ({
+      key: c.key,
+      variant: c.variant,
+      size: c.size,
+      asChild: !!c.asChild,
+      count: c.count ?? 0,
+    }));
+    const buttonsContent =
+      [
+        "import type { Meta, StoryObj } from \"@storybook/react\";",
+        "",
+        "const meta = { title: \"Foundations/Button Usage\" } satisfies Meta;",
+        "export default meta;",
+        "type Story = StoryObj;",
+        "",
+        `const combos = ${JSON.stringify(combos)};`,
+        "",
+        "export const Default: Story = {",
+        "  render: () => (",
+        "    <div style={{ padding: 24, fontFamily: \"system-ui, sans-serif\" }}>",
+        "      <h2 style={{ marginBottom: 8 }}>Used Button variants in app code</h2>",
+        "      <p style={{ marginBottom: 16, color: \"#888\", fontSize: 13 }}>Based on &lt;Button ... /&gt; usages in src/ (ignores lowercase &lt;button&gt;).</p>",
+        "      <table style={{ borderCollapse: \"collapse\", width: \"100%\", fontSize: 13 }}>",
+        "        <thead>",
+        "          <tr>",
+        "            <th style={{ textAlign: \"left\", padding: \"4px 8px\", borderBottom: \"1px solid #333\" }}>Variant</th>",
+        "            <th style={{ textAlign: \"left\", padding: \"4px 8px\", borderBottom: \"1px solid #333\" }}>Size</th>",
+        "            <th style={{ textAlign: \"left\", padding: \"4px 8px\", borderBottom: \"1px solid #333\" }}>asChild</th>",
+        "            <th style={{ textAlign: \"right\", padding: \"4px 8px\", borderBottom: \"1px solid #333\" }}>Count</th>",
+        "          </tr>",
+        "        </thead>",
+        "        <tbody>",
+        "          {combos.map((c) => (",
+        "            <tr key={c.key}>",
+        "              <td style={{ padding: \"4px 8px\", borderBottom: \"1px solid #222\" }}>{c.variant}</td>",
+        "              <td style={{ padding: \"4px 8px\", borderBottom: \"1px solid #222\" }}>{c.size}</td>",
+        "              <td style={{ padding: \"4px 8px\", borderBottom: \"1px solid #222\" }}>{c.asChild ? \"yes\" : \"no\"}</td>",
+        "              <td style={{ padding: \"4px 8px\", borderBottom: \"1px solid #222\", textAlign: \"right\" }}>{c.count}</td>",
+        "            </tr>",
+        "          ))}",
+        "        </tbody>",
+        "      </table>",
+        "    </div>",
+        "  ),",
+        "};",
+      ].join("\n");
+    fs.writeFileSync(path.join(foundationsDir, "Buttons.stories.tsx"), buttonsContent, "utf-8");
+    console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Buttons.stories.tsx")));
+  }
 }
 
 function writeComponentSuggestionsStory(componentSuggestions) {
@@ -1310,7 +1393,7 @@ function writeComponentSuggestionsStory(componentSuggestions) {
       "  render: () => (",
       "    <div style={{ padding: 24, fontFamily: \"system-ui, sans-serif\" }}>",
       "      <h2 style={{ marginBottom: 16 }}>Visual section candidates (component suggestions)</h2>",
-      "      <p style={{ color: \"#888\", marginBottom: 24 }}>From src/pages and src/app: own className, 2+ child elements, pattern repeated 2+ times. Not yet in src/components. Consider extracting as components.</p>",
+      "      <p style={{ color: \"#888\", marginBottom: 24 }}>From src/pages, src/app ve src/components: kendi className kümeleri, 2+ child element, 2+ tekrar. Aynı yapı birden fazla dosyada geçiyorsa ayrı component olarak düşünün.</p>",
       "      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 24 }}>",
       "        {suggestions.map((s, i) => (",
       "          <div key={i} style={{ border: \"1px solid #333\", borderRadius: 8, padding: 16, background: \"#111\" }}>",