vibe-design-system 2.8.53 → 2.8.56

package/bin/init.js

@@ -606,9 +606,17 @@ function runStorybookAdapt(projectRoot) {
 }
 
 // ADIM 9b — vds.config.js oluştur (yoksa)
-function ensureVdsConfig(projectRoot) {
+function ensureVdsConfig(projectRoot, srcPrefix) {
   const configPath = path.join(projectRoot, "vds.config.js");
   if (fs.existsSync(configPath)) return;
+
+  // Detect shadcn/ui: if components/ui/ directory exists, add includeGroups by default
+  const uiDir = path.join(projectRoot, srcPrefix || "src", "components", "ui");
+  const hasShadcn = fs.existsSync(uiDir);
+  const includeGroupsLine = hasShadcn
+    ? `  includeGroups: ["shadcn", "UI", "ui"], // Auto-detected shadcn/ui: generate stories for UI components\n`
+    : `  // includeGroups: ["shadcn", "UI"],    // Uncomment to generate stories for shadcn/ui primitives\n`;
+
   const content = `/**
  * VDS Configuration — auto-created by VDS installer
  * All fields are optional. Remove comments to activate overrides.
@@ -617,7 +625,7 @@ module.exports = {
   // skipList: ["MyHeavyPage"],    // Replace the default story skip list entirely
   // extraSkipList: ["OrderCard"], // Add to the default skip list
   // extraIgnoreDirs: ["fixtures"], // Additional dirs to skip during component scan
-};
+${includeGroupsLine}};
 `;
   fs.writeFileSync(configPath, content, "utf-8");
   console.log("⚙️ vds.config.js oluşturuldu.");
@@ -697,7 +705,7 @@ ensureStoriesDir(projectRoot, srcPrefix);
 removeStorybookExamples(projectRoot, srcPrefix);
 
 // ADIM 9b
-ensureVdsConfig(projectRoot);
+ensureVdsConfig(projectRoot, srcPrefix);
 
 // ADIM 7
 runScan(projectRoot);

package/package.json

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

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

@@ -425,13 +425,21 @@ function componentWrapsVoidElement(source) {
 }
 
 function toSafeComponentName(name, file) {
-  if (name && typeof name === "string") {
-    return name.replace(/[^A-Za-z0-9]+/g, " ").trim().replace(/\s+([a-z])/g, (_, c) => c.toUpperCase()).replace(/^\w/, (c) => c.toUpperCase()).replace(/\s+/g, "");
-  }
+  // Convert any string (spaces, hyphens, underscores) to PascalCase.
+  // If no separators present, treat as already-PascalCase and just capitalise the first letter.
+  const toPascal = (s) => {
+    if (!s) return "Component";
+    if (!/[-\s_]/.test(s)) return s.charAt(0).toUpperCase() + s.slice(1); // already camel/PascalCase
+    return s.replace(/[^A-Za-z0-9]+/g, " ").trim()
+      .split(" ").filter(Boolean)
+      .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+      .join("") || "Component";
+  };
+  if (name && typeof name === "string") return toPascal(name);
   const base = (file || "").replace(/\.[^.]+$/, "");
   const parts = base.split(/[\\/]/g);
   const last = parts[parts.length - 1] || "Component";
-  return last.charAt(0).toUpperCase() + last.slice(1);
+  return toPascal(last);
 }
 
 function parseUnionLiterals(type) {
@@ -1686,16 +1694,26 @@ function buildProfileChildrenArgLine(profile) {
 
 function buildStoryFileContent(comp) {
   const componentName = toSafeComponentName(comp.name, comp.file);
-  const fileNoExt = comp.file.replace(/\.(tsx|jsx)$/, "");
-  // Compute import path relative to src/stories/ using the actual components directory.
-  let importPath = "";
-  const isPageFile = fileNoExt.startsWith("pages/") || fileNoExt.startsWith("src/pages/");
-  if (isPageFile) {
-    // Keep full path with src/ prefix so relative is computed correctly from src/stories/
-    // e.g. "src/pages/Admin" → "../pages/Admin"  (NOT "../../pages/Admin")
-    const fullPath = fileNoExt.startsWith("src/") ? fileNoExt : "src/" + fileNoExt;
-    importPath = path.posix.relative("src/stories", fullPath);
+  const fileNoExt = comp.file.replace(/\.(tsx|jsx|ts|js)$/, "");
+
+  // Determine if comp.file is project-root-relative (e.g. "client/src/pages/Foo.tsx")
+  // or components-dir-relative (e.g. "ui/badge.tsx").
+  // Try project-root first; fall back to components-dir.
+  const absoluteFromRoot = path.join(PROJECT_ROOT, comp.file);
+  const absoluteFromComponents = path.join(PROJECT_ROOT, COMPONENTS_REL_DIR, comp.file);
+  const isProjectRelative = fs.existsSync(absoluteFromRoot);
+  const srcPath = isProjectRelative ? absoluteFromRoot : absoluteFromComponents;
+
+  // isPageFile: detect components that live inside a pages/ directory
+  const isPageFile = fileNoExt.includes("/pages/") || fileNoExt.startsWith("pages/");
+
+  // Compute import path relative to src/stories/
+  let importPath;
+  if (isProjectRelative) {
+    // File path is already relative to project root — use directly
+    importPath = path.posix.relative("src/stories", fileNoExt);
   } else {
+    // File path is relative to components dir — prefix with components dir
     const targetPath = path.posix.join(COMPONENTS_REL_DIR, fileNoExt);
     importPath = path.posix.relative("src/stories", targetPath);
   }
@@ -1709,10 +1727,6 @@ function buildStoryFileContent(comp) {
   // Title: "Module/ComponentName"  (category intentionally dropped — folder is the context)
   const title = `${group}/${componentName}`;
 
-  const srcPath = isPageFile
-    ? path.join(PROJECT_ROOT, fileNoExt.replace(/^src\//, "src/") + ".tsx")
-    : path.join(PROJECT_ROOT, COMPONENTS_REL_DIR, comp.file);
-
   // Read component source once (used for export style, props, CVA parsing)
   let source = "";
   try {
@@ -2577,11 +2591,11 @@ function writeFoundationsStories(foundations) {
       "            </p>",
       "            <p style={{ margin: \"0 0 12px\", fontSize: 12, color: \"#475569\" }}>gap-* values across all components.</p>",
       "            <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 8 }}>",
-      "              {(gapEntries as [string, number][]).map(([val, count]) => (",
+      "              {(gapEntries as [string, { count: number; topFiles: string[] }][]).map(([val, data]) => (",
       "                <span key={val} style={{ display: \"flex\", alignItems: \"center\", gap: 6,",
       "                  background: \"#0a0f1a\", border: \"1px solid #1e293b\", borderRadius: 6, padding: \"5px 10px\", fontSize: 12 }}>",
       "                  <code style={{ color: \"#67e8f9\" }}>gap-{val}</code>",
-      "                  <span style={{ color: \"#475569\", fontSize: 11 }}>×{count}</span>",
+      "                  <span style={{ color: \"#475569\", fontSize: 11 }}>×{data.count}</span>",
       "                </span>",
       "              ))}",
       "            </div>",
@@ -3383,9 +3397,12 @@ function writeCursorRules(components, foundations) {
   const gridSystem = foundations?.gridSystem;
   if (gridSystem) {
     lines.push(`## 📐 Spacing & Layout (detected in this project)`);
-    if (Object.keys(gaps).length > 0) {
-      const gapLine = Object.entries(gaps).sort((a,b)=>b[1]-a[1]).slice(0,8)
-        .map(([v, c]) => `\`gap-${v}\` ×${c}`).join("  ·  ");
+    const _gaps = gridSystem.gaps || {};
+    if (Object.keys(_gaps).length > 0) {
+      const gapLine = Object.entries(_gaps)
+        .sort((a,b) => (typeof b[1] === "object" ? b[1].count : b[1]) - (typeof a[1] === "object" ? a[1].count : a[1]))
+        .slice(0,8)
+        .map(([v, d]) => `\`gap-${v}\` ×${typeof d === "object" ? d.count : d}`).join("  ·  ");
       lines.push(`**Common gaps:** ${gapLine}`);
     }
     if (Object.keys(gridSystem.gridCols || {}).length > 0) {
@@ -3506,6 +3523,7 @@ function main() {
     }
   }
 
+  let writtenCount = 0;
   for (const comp of components) {
     const componentName = toSafeComponentName(comp.name, comp.file);
     // Skip unclassified and shadcn/ui primitives (UI group) — they're documented at ui.shadcn.com
@@ -3515,8 +3533,9 @@ function main() {
     // Users can override with vds.config.js: includeGroups: ["shadcn"] or includeComponents: ["Button", "Badge"]
     const includeGroups = VDS_CONFIG.includeGroups || [];
     const includeComponents = VDS_CONFIG.includeComponents || [];
-    if (g === "Uncategorized" || g === "UI" || g === "shadcn" || g === "ui") {
-      const groupIncluded = includeGroups.some((ig) => ig.toLowerCase() === g.toLowerCase());
+    const gLower = g.toLowerCase();
+    if (g === "Uncategorized" || gLower === "ui" || gLower === "shadcn") {
+      const groupIncluded = includeGroups.some((ig) => ig.toLowerCase() === gLower);
       const compIncluded = includeComponents.includes(componentName);
       if (!groupIncluded && !compIncluded) {
         // Clean up leftover story files for components that are now in the skip group
@@ -3539,7 +3558,10 @@ function main() {
     const storyPath = path.join(STORIES_DIR, storyFileName);
     if (SKIP_LIST.includes(componentName)) continue;
     const requiredCount = Array.isArray(comp.props) ? comp.props.filter((p) => p.required === true).length : 0;
-    if (requiredCount > 3) continue;
+    if (requiredCount > 3) {
+      console.log(`[VDS] ${componentName} → skipped (${requiredCount} required props — too complex to auto-generate)`);
+      continue;
+    }
 
     // Never overwrite existing story files — only create new ones
     // To regenerate a story: delete the file and re-run VDS
@@ -3551,6 +3573,22 @@ function main() {
     if (content == null) continue;
     fs.writeFileSync(storyPath, content, "utf-8");
     console.log(`[VDS] Wrote ${path.relative(PROJECT_ROOT, storyPath)}`);
+    writtenCount++;
+  }
+
+  // Summary
+  if (writtenCount === 0 && components.length > 0) {
+    const hasShadcnGroup = components.some(c => {
+      const gr = (c.group || "").toLowerCase();
+      return gr === "shadcn" || gr === "ui";
+    });
+    console.log("[VDS] ⚠️  No new component stories were generated.");
+    if (hasShadcnGroup && (VDS_CONFIG.includeGroups || []).length === 0) {
+      console.log("[VDS] Tip: shadcn/ui components detected. Add to vds.config.js:");
+      console.log('[VDS]   includeGroups: ["shadcn", "UI"]');
+    }
+  } else if (writtenCount > 0) {
+    console.log(`[VDS] ✓ Generated ${writtenCount} new component stories.`);
   }
 }