vibe-design-system 2.8.24 → 2.8.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.8.24",
+  "version": "2.8.26",
   "description": "Auto-generate design systems for vibe coding projects",
   "homepage": "https://vibedesign.tech",
   "repository": {

package/vds-core-template/scan.mjs

@@ -369,10 +369,29 @@ function compareComponents(prevList, newResults) {
   return { added, removed, modified };
 }
 
-/** Path-based classification: ui/ → shadcn, components root → Components, else Uncategorized. */
+/**
+ * Path-based classification: derive Storybook group from the first folder segment.
+ * Examples:
+ *   ui/button.tsx              → group: "UI"
+ *   circles/CircleCard.tsx     → group: "Circles"
+ *   time/TimeDashboard.tsx     → group: "Time"
+ *   time-resources/planning/… → group: "Time Resources"
+ *   settings/UserProfile.tsx   → group: "Settings"
+ */
 function classifyByPath(rel) {
-  if (rel.startsWith("ui/")) return { group: "shadcn", category: "UI" };
-  return { group: "Components", category: "Components" };
+  const normalized = rel.replace(/\\/g, "/");
+  const firstSegment = normalized.split("/")[0] || "";
+
+  // ui/ → always "UI" (shadcn primitives)
+  if (firstSegment === "ui") return { group: "UI", category: null };
+
+  // Convert kebab-case folder to Title Case (time-resources → Time Resources)
+  const group = firstSegment
+    .split("-")
+    .map(w => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(" ") || "Components";
+
+  return { group, category: null };
 }
 
 /**
@@ -382,16 +401,22 @@ function classifyByPath(rel) {
  *   feature    → medium, contains state / multiple sub-parts
  *   page       → full page/view — reference only, not for direct reuse
  */
+// Semantic filename keywords that indicate a view-level (feature) component
+// even if the file is small (data fetched via context/hooks, not passed as props)
+const FEATURE_FILENAME_KEYWORDS = /Dashboard|Profile|Hub|Overview|Planning|Timesheet|Pipeline|Workload|Schedule|Portfolio|Chart|Board|Reports?|Analytics|Settings$/i;
+
 function inferTier(rel, content) {
   const normalized = rel.replace(/\\/g, "/");
   if (normalized.startsWith("ui/") || normalized.includes("/ui/")) return "primitive";
 
+  const filename = normalized.split("/").pop()?.replace(/\.(tsx|jsx|ts|js)$/, "") || "";
   const lines = content.split("\n").length;
   // Count relative imports (../ ./) AND path-alias imports (@/components/) as local dependencies
   const localImports = (content.match(/from\s+['"](?:\.\.?\/?|@\/components\/)/g) || []).length;
 
   if (lines >= 400 || localImports >= 12) return "page";
-  if (lines >= 200 || localImports >= 7)  return "feature";
+  // Semantic keyword: treat as feature even if small (fetches data via context/hooks)
+  if (lines >= 200 || localImports >= 7 || FEATURE_FILENAME_KEYWORDS.test(filename)) return "feature";
   return "component";
 }
 

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

@@ -742,6 +742,12 @@ function buildDefaultArgsForRequiredProps(props, usageFromPages = null, componen
         continue;
       }
       if (!required) continue;
+      // Function/callback types must be caught before name-based type checks (e.g. "Task" in "(task: Task) => void")
+      if (isFunctionType(type)) {
+        argLines.push(`    ${name}: () => {},`);
+        added.add(name);
+        continue;
+      }
       if (/LucideIcon|lucide-react/.test(type)) {
         const iconName = LUCIDE_ICON_DEFAULT;
         lucideImports.add(iconName);
@@ -1071,6 +1077,52 @@ function buildRecipeStoryContent(comp, componentName, importPath, title, source,
   return lines.join("\n");
 }
 
+/**
+ * Map a single extracted TypeScript prop to a Storybook argType entry string.
+ * Returns something like: `{ control: "text", description: "string" }`
+ */
+function buildArgTypeEntry(prop) {
+  const t = (prop.type || "").trim();
+  const name = prop.name;
+
+  // Function / callback — disable control widget, show as action
+  if (/=>\s*(void|any|never|Promise)/.test(t) || /^\([^)]*\)\s*=>/.test(t)) {
+    const safe = t.replace(/"/g, '\\"').slice(0, 60);
+    return `{ action: "${name}", control: false, description: "${safe}" }`;
+  }
+  // Boolean
+  if (/^boolean/.test(t)) {
+    return `{ control: "boolean", description: "boolean" }`;
+  }
+  // Number
+  if (/^number/.test(t)) {
+    return `{ control: "number", description: "number" }`;
+  }
+  // String union literals: "a" | "b" | "c" → select control
+  if (/^"[^"]+"(\s*\|\s*"[^"]+")+/.test(t)) {
+    const opts = (t.match(/"([^"]+)"/g) || []).map(s => s.replace(/"/g, ""));
+    return `{ control: "select", options: ${JSON.stringify(opts)}, description: ${JSON.stringify(t)} }`;
+  }
+  // Plain string (including union with null/undefined)
+  if (/^string/.test(t) || t === "string | null" || t === "string | undefined" || t === "string | null | undefined") {
+    return `{ control: "text", description: "string" }`;
+  }
+  // ReactNode
+  if (/ReactNode/.test(t)) {
+    return `{ control: "text", description: "ReactNode" }`;
+  }
+  // Arrays → object control
+  if (t.endsWith("[]") || /^Array</.test(t)) {
+    return `{ control: "object", description: ${JSON.stringify(t.slice(0, 60))} }`;
+  }
+  // Inline object / any
+  if (t === "any" || t.startsWith("{")) {
+    return `{ control: "object", description: ${JSON.stringify(t.slice(0, 60))} }`;
+  }
+  // Imported / custom named types (Circle, Task, etc.) — object control so user can inspect
+  return `{ control: "object", description: ${JSON.stringify(t.slice(0, 60))} }`;
+}
+
 function buildStoryFileContent(comp) {
   const componentName = toSafeComponentName(comp.name, comp.file);
   const fileNoExt = comp.file.replace(/\.(tsx|jsx)$/, "");
@@ -1086,10 +1138,11 @@ function buildStoryFileContent(comp) {
   }
   if (!importPath.startsWith(".")) importPath = "./" + importPath;
 
-  const group = comp.group || "Components";
-  const category = comp.category || null;
-  const titleParts = [group, category, componentName].filter(Boolean);
-  const title = titleParts.join("/");
+  // Normalize legacy "shadcn" group → "UI", everything else kept as-is
+  const rawGroup = comp.group || "Components";
+  const group = rawGroup === "shadcn" ? "UI" : rawGroup;
+  // Title: "Module/ComponentName"  (category intentionally dropped — folder is the context)
+  const title = `${group}/${componentName}`;
 
   const props = Array.isArray(comp.props) ? comp.props : [];
   const variantProp = props.find((p) => p.name === "variant");
@@ -1173,13 +1226,27 @@ function buildStoryFileContent(comp) {
   lines.push(`  title: ${JSON.stringify(title)},`);
   lines.push(`  component: ComponentRef,`);
   lines.push(`  tags: ["autodocs"],`);
+
+  // Build argTypes from extracted TypeScript props + icon-specific overrides
+  const argTypeEntries = [];
+  for (const p of effectiveProps) {
+    if (!p || !p.name) continue;
+    if (p.name === "children") continue; // Storybook infers children from JSX
+    if (iconPropNames && iconPropNames.includes(p.name)) continue; // handled below
+    const entry = buildArgTypeEntry(p);
+    argTypeEntries.push(`    ${p.name}: ${entry},`);
+  }
   if (iconPropNames && iconPropNames.length > 0) {
-    lines.push(`  argTypes: {`);
     for (const name of iconPropNames) {
-      lines.push(`    ${name}: { control: false },`);
+      argTypeEntries.push(`    ${name}: { control: false },`);
     }
+  }
+  if (argTypeEntries.length > 0) {
+    lines.push(`  argTypes: {`);
+    for (const entry of argTypeEntries) lines.push(entry);
     lines.push(`  },`);
   }
+
   lines.push(`} satisfies Meta<typeof ComponentRef>;`);
   lines.push("");
   lines.push(`export default meta;`);
@@ -2778,9 +2845,8 @@ function main() {
 
   for (const comp of components) {
     const componentName = toSafeComponentName(comp.name, comp.file);
-    // Şu ana kadar shadcn grubunu atlıyorduk; Button için istisna tanıyalım
-    if ((comp.group === "shadcn" || comp.group === "Uncategorized") && componentName !== "Button") continue;
-    if (comp.group !== "Components" && componentName !== "Button") continue;
+    // Skip only truly unclassified components; all module groups (UI, Circles, Time, …) are welcome
+    if (comp.group === "Uncategorized") continue;
     if (onlyName && componentName !== onlyName) continue;
 
     const storyFileName = `${componentName}.stories.tsx`;