vibe-design-system 2.5.41 → 2.5.43

package/package.json

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

@@ -20,6 +20,9 @@ const VDS_OUTPUT = path.join(PROJECT_ROOT, "vds-output.json");
 const SRC_DIR = path.join(PROJECT_ROOT, "src");
 const STORIES_DIR = path.join(SRC_DIR, "stories");
 
+// Filled in main() after reading vds-output.json so helpers (buildSpecialStories) can see foundations data (e.g. buttonUsage).
+let FOUNDATIONS_DATA = null;
+
 // CSS is loaded from .storybook/preview.tsx — never add CSS import to story files.
 
 // Components we don't want to auto-generate stories for (project-specific dashboards, heavy UIs, etc.)
@@ -478,7 +481,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 +494,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). */
@@ -501,6 +520,8 @@ const RENDER_ARGS_FALLBACKS = {
 /** 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". */
@@ -825,6 +846,30 @@ function detectExportStyle(source, componentName) {
 function buildSpecialStories(componentName, variants) {
   const lines = [];
 
+  // Button: show used variant/size/asChild combinations from buttonUsage (if available)
+  if (componentName === "Button") {
+    const usage = FOUNDATIONS_DATA?.buttonUsage;
+    const combos = Array.isArray(usage?.combos) && usage.combos.length
+      ? usage.combos
+      : (variants && variants.length ? variants.map((v) => ({ key: v, variant: v, size: "default", asChild: false, count: 1 })) : []);
+    lines.push(`export const UsedVariants: Story = {`);
+    lines.push(`  render: () => (`);
+    lines.push(`    <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>`);
+    lines.push(`      {${JSON.stringify(combos)}.map((c) => (`);
+    lines.push(`        <ComponentRef`);
+    lines.push(`          key={c.key}`);
+    lines.push(`          variant={c.variant}`);
+    lines.push(`          size={c.size}`);
+    lines.push(`        >`);
+    lines.push(`          {c.variant}{c.size !== "default" ? " · " + c.size : ""}`);
+    lines.push(`        </ComponentRef>`);
+    lines.push(`      ))}`);
+    lines.push(`    </div>`);
+    lines.push(`  ),`);
+    lines.push(`};`);
+    return lines.join("\\n");
+  }
+
   // Simple input-like primitives — always render real component with args
   if (componentName === "Input") {
     lines.push(`export const Default: Story = {`);
@@ -1295,6 +1340,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) {
@@ -1323,7 +1420,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\" }}>",
@@ -1382,6 +1479,7 @@ function main() {
   const data = JSON.parse(raw);
   const components = Array.isArray(data.components) ? data.components : [];
   const foundations = data.foundations || null;
+  FOUNDATIONS_DATA = foundations;
 
   const onlyName = process.argv[2] || null;