vibe-design-system 2.8.31 → 2.8.33

package/package.json

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

package/vds-core-template/scan.mjs

@@ -415,6 +415,11 @@ function inferTier(rel, content) {
   const localImports = (content.match(/from\s+['"](?:\.\.?\/?|@\/components\/)/g) || []).length;
 
   if (lines >= 400 || localImports >= 12) return "page";
+  // Section/Layout/View/Panel/Screen named components with few imports are view-level feature tier.
+  // e.g. BusinessModelSection, HeroSection, CheckoutView, AppLayout, CartPanel — regardless of line count.
+  // Threshold localImports <= 3: genuine sections import very little; aggregators already hit lines/imports above.
+  const SECTION_FILENAME_PATTERNS = /Section$|Layout$|View$|Panel$|Screen$/;
+  if (SECTION_FILENAME_PATTERNS.test(filename) && localImports <= 3) 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

@@ -1219,6 +1219,74 @@ function buildArgTypeEntry(prop) {
   return `{ control: "object", description: ${JSON.stringify(t.slice(0, 60))} }`;
 }
 
+// ─── Component Profile System ─────────────────────────────────────────────────
+// Replaces the 6 scattered boolean flags (omitChildren, useReactNodeChildrenRender,
+// isNoPropsFeature, useSafeWrapper, argsParam, propsArg) with a single canonical
+// profile that drives all story generation decisions deterministically.
+//
+// Priority order (first match wins):
+//   SAFE       — SAFE_WRAPPER_DEFAULTS entry exists (complex required props)
+//   SECTION    — no extractable props (context/hook-driven, e.g. HeroSection, Footer)
+//   WRAPPER    — has children: ReactNode prop (wraps child content)
+//   VARIANT    — has variant prop (cva-based, produces multi-story exports)
+//   CONFIGURED — default: has props, no special pattern
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Classifies a component into one of 5 story profiles.
+ * @param {string} componentName
+ * @param {string} source — raw component source
+ * @param {Array<{name:string,type:string,required:boolean}>} effectiveProps
+ * @returns {"SAFE"|"SECTION"|"WRAPPER"|"VARIANT"|"CONFIGURED"}
+ */
+function getStoryProfile(componentName, source, effectiveProps) {
+  if (componentName && SAFE_WRAPPER_DEFAULTS[componentName]) return "SAFE";
+  if (effectiveProps.length === 0) return "SECTION";
+  if (hasChildrenPropReactNode(effectiveProps)) return "WRAPPER";
+  if (effectiveProps.some(p => p.name === "variant")) return "VARIANT";
+  return "CONFIGURED";
+}
+
+/**
+ * Builds the render: line for a story based on its component profile.
+ * @param {"SAFE"|"SECTION"|"WRAPPER"|"VARIANT"|"CONFIGURED"} profile
+ * @param {"SafeWrapper"|"ComponentRef"} RenderTarget
+ * @param {string} argsFallback — extra inline props spread or ""
+ * @returns {string}
+ */
+function buildProfileRenderLine(profile, RenderTarget, argsFallback) {
+  const suspense = (inner) =>
+    `React.createElement(React.Suspense, { fallback: null }, ${inner})`;
+  switch (profile) {
+    case "SECTION":
+      return `  render: () => ${suspense(`React.createElement(${RenderTarget})`)},`;
+    case "WRAPPER":
+      return `  render: (args) => ${suspense(
+        `React.createElement(${RenderTarget}, { ...args, children: args.children || React.createElement('span', null, 'Example') })`
+      )},`;
+    case "SAFE":
+      return `  render: (args = {}) => ${suspense(`React.createElement(${RenderTarget}, args)`)},`;
+    default: { // CONFIGURED, VARIANT
+      const argsParam = argsFallback ? "(args = {})" : "(args)";
+      const propsArg  = argsFallback ? `{ ...args${argsFallback} }` : "args";
+      return `  render: ${argsParam} => ${suspense(`React.createElement(${RenderTarget}, ${propsArg})`)},`;
+    }
+  }
+}
+
+/**
+ * Returns a function that produces a `children: "label",` arg line or null.
+ * Only WRAPPER profile includes a children arg so Storybook shows a children control.
+ * @param {"SAFE"|"SECTION"|"WRAPPER"|"VARIANT"|"CONFIGURED"} profile
+ * @returns {(label: string) => string|null}
+ */
+function buildProfileChildrenArgLine(profile) {
+  return (label) => {
+    if (profile === "WRAPPER") return `    children: ${JSON.stringify(label)},`;
+    return null;
+  };
+}
+
 function buildStoryFileContent(comp) {
   const componentName = toSafeComponentName(comp.name, comp.file);
   const fileNoExt = comp.file.replace(/\.(tsx|jsx)$/, "");
@@ -1283,17 +1351,23 @@ function buildStoryFileContent(comp) {
     // ignore
   }
   const exportStyle = detectExportStyle(source, componentName);
-  const omitChildren = componentWrapsVoidElement(source);
   const isPage = isPageFile;
 
   // Props: manifest or parse from source for default args (LucideIcon, array types, ReactNode, contextual placeholders)
   const effectiveProps = Array.isArray(comp.props) && comp.props.length > 0 ? comp.props : parsePropsFromSource(source);
   const usageFromPages = findComponentUsageInPages(componentName, PROJECT_ROOT);
-  const { argLines: defaultArgLines, lucideImports, iconPropNames, needReact } = buildDefaultArgsForRequiredProps(effectiveProps, usageFromPages, componentName, source);
-  const useReactNodeChildrenRender = !omitChildren && hasChildrenPropReactNode(effectiveProps);
-  // Any component with no extractable props: suppress children arg + simplify render.
-  // Covers feature, page, and section-type components regardless of tier classification (e.g. HeroSection, Footer)
-  const isNoPropsFeature = effectiveProps.length === 0;
+
+  // Profile: single source of truth — replaces omitChildren, useReactNodeChildrenRender,
+  // isNoPropsFeature, useSafeWrapper, argsParam, propsArg flags.
+  const profile = getStoryProfile(componentName, source, effectiveProps);
+  const propSummary = effectiveProps.length > 0 ? ` (${effectiveProps.length} props)` : "";
+  console.log(`[VDS] ${componentName} → ${profile}${propSummary}`);
+
+  // For SECTION, argLines are unused; still need lucideImports/iconPropNames/needReact for imports+argTypes.
+  const { argLines: defaultArgLines, lucideImports, iconPropNames, needReact } =
+    profile === "SECTION"
+      ? { argLines: [], lucideImports: [], iconPropNames: [], needReact: false }
+      : buildDefaultArgsForRequiredProps(effectiveProps, usageFromPages, componentName, source);
 
   // Skip story only if not a page and no export found
   if (exportStyle === "unknown" && !isPage && (!source.includes("export") || !new RegExp(`\\b${componentName}\\b`).test(source))) {
@@ -1326,7 +1400,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 = [];
@@ -1361,21 +1436,12 @@ function buildStoryFileContent(comp) {
     return lines.join("\n");
   }
 
-  // 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(${RenderTarget}, { ...args, children: args.children || React.createElement('span', null, 'Example') })),`
-    : isNoPropsFeature
-      ? `  render: () => React.createElement(React.Suspense, { fallback: null }, React.createElement(${RenderTarget})),`
-      : `  render: ${argsParam} => React.createElement(React.Suspense, { fallback: null }, React.createElement(${RenderTarget}, ${propsArg})),`;
-  const childrenArgLine = (label) => {
-    if (isNoPropsFeature) return null; // Feature/page with no props: no children arg
-    return !omitChildren && !useReactNodeChildrenRender ? `    children: ${JSON.stringify(label)},` : null;
-  };
+  // Profile-driven render + children — single source of truth via getStoryProfile()
+  const useSafeWrapper = profile === "SAFE";
+  const RenderTarget   = useSafeWrapper ? "SafeWrapper" : "ComponentRef";
+  const argsFallback   = !useSafeWrapper && (componentName && RENDER_ARGS_FALLBACKS[componentName]) || "";
+  const renderLine     = buildProfileRenderLine(profile, RenderTarget, argsFallback);
+  const childrenArgLine = buildProfileChildrenArgLine(profile);
 
   if (!variants.length) {
     lines.push(`export const Default: Story = {`);

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

@@ -204,12 +204,32 @@ 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    },
+  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;