vibe-design-system 2.8.32 → 2.8.34

package/package.json

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

package/vds-core-template/scan.mjs

@@ -385,6 +385,10 @@ function classifyByPath(rel) {
   // ui/ → always "UI" (shadcn primitives)
   if (firstSegment === "ui") return { group: "UI", category: null };
 
+  // Root-level file (no subdirectory): firstSegment is a filename like "NavLink.tsx"
+  // Use "Components" instead of the filename as the group
+  if (firstSegment.includes(".")) return { group: "Components", category: null };
+
   // Convert kebab-case folder to Title Case (time-resources → Time Resources)
   const group = firstSegment
     .split("-")

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

@@ -974,7 +974,13 @@ function getExampleItemForArrayType(itemType) {
 
 function capitalize(str) {
   if (!str) return "";
-  return str.charAt(0).toUpperCase() + str.slice(1);
+  // Convert to valid JS identifier: remove invalid chars, camelCase hyphens, prefix digit-starts
+  const safe = str
+    .replace(/[:\s]+([a-z])/g, (_, c) => c.toUpperCase()) // sm:full → smFull
+    .replace(/-+([a-zA-Z0-9])/g, (_, c) => c.toUpperCase()) // outline-ghost → outlineGhost
+    .replace(/[^a-zA-Z0-9_$]/g, "") // strip remaining invalid chars
+    .replace(/^([0-9])/, "_$1"); // 2xl → _2xl
+  return safe.charAt(0).toUpperCase() + safe.slice(1);
 }
 
 function detectExportStyle(source, componentName) {
@@ -1304,9 +1310,11 @@ function buildStoryFileContent(comp) {
   }
   if (!importPath.startsWith(".")) importPath = "./" + importPath;
 
-  // Normalize legacy "shadcn" group → "UI", everything else kept as-is
+  // Normalize legacy "shadcn" group → "UI"; filename groups (e.g. "NavLink.tsx") → "Components"
   const rawGroup = comp.group || "Components";
-  const group = rawGroup === "shadcn" ? "UI" : rawGroup;
+  const group = rawGroup === "shadcn" ? "UI"
+    : rawGroup.includes(".") ? "Components"   // root-level file without subdirectory
+    : rawGroup;
   // Title: "Module/ComponentName"  (category intentionally dropped — folder is the context)
   const title = `${group}/${componentName}`;
 
@@ -1400,7 +1408,8 @@ function buildStoryFileContent(comp) {
   lines.push(`const meta = {`);
   lines.push(`  title: ${JSON.stringify(title)},`);
   lines.push(`  component: ComponentRef,`);
-  lines.push(`  tags: ["autodocs"],`);
+  // SECTION: no props/args → autodocs tries to render React.lazy without Suspense → useRef crash
+  if (profile !== "SECTION") lines.push(`  tags: ["autodocs"],`);
 
   // Build argTypes from extracted TypeScript props + icon-specific overrides
   const argTypeEntries = [];

package/vds-core-template/storybook-adapt.mjs

@@ -204,12 +204,33 @@ function injectAliases(projectRoot, specifiers) {
   }
 }
 
+/** Inject resolve.dedupe into .storybook/main.* viteFinal to prevent multiple React instances.
+ *  Multiple React instances cause "Cannot read properties of null (reading 'useRef')" at MemoryRouter. */
+function injectDedupe(projectRoot) {
+  const mainPath = getMainPath(projectRoot);
+  if (!mainPath) return;
+  let content = fs.readFileSync(mainPath, "utf-8");
+  if (content.includes("dedupe")) return; // idempotent
+  // Match: alias block + its trailing comma + whitespace/newline + resolve closing }
+  // e.g.  alias: { "@": path.resolve(...) },\n    },
+  // [^{}]* ensures we skip injection if alias has nested object values (safe fallback)
+  const pattern = /(\balias\s*:\s*\{[^{}]*\}),(\s*\})/;
+  if (!pattern.test(content)) return;
+  content = content.replace(pattern, (_, aliasBlock, resolveClose) =>
+    `${aliasBlock},\n        dedupe: ["react", "react-dom", "react-router-dom"],${resolveClose}`
+  );
+  fs.writeFileSync(mainPath, content, "utf-8");
+  console.log("[VDS] Storybook adapt: injected React dedupe into viteFinal");
+}
+
 function main() {
   const projectRoot = PROJECT_ROOT;
   if (!fs.existsSync(path.join(projectRoot, ".storybook"))) {
     console.log("[VDS] .storybook not found; skip storybook-adapt.");
     return;
   }
+  // Always inject dedupe — prevents "useRef null" crashes from multiple React instances
+  injectDedupe(projectRoot);
   reportUnresolvedImports(projectRoot);
   const problematic = collectProblematicImports(projectRoot);
   if (problematic.size === 0) return;