vibe-design-system 2.5.10 → 2.5.11

package/bin/init.js

@@ -63,18 +63,21 @@ const preview: Preview = {
           "Foundations",
           ["Introduction", "Page to Components", "Colors", "Typography", "Brand", "Icons", "Component Suggestions", "Changelog"],
           "Layout",
-          ["Navigation", "Footer", "ScrollToTop"],
           "Components",
           "Actions",
           "Data Display",
           "Examples",
-          ["Pages"],
         ],
       },
     },
   },
   decorators: [
-    (Story) => React.createElement(MemoryRouter, null, React.createElement(Story, null)),
+    (Story, context) => {
+      const needsRouter = context.parameters?.router !== false;
+      return needsRouter
+        ? React.createElement(MemoryRouter, null, React.createElement(Story, null))
+        : React.createElement(Story, null);
+    },
   ],
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.5.10",
+  "version": "2.5.11",
   "description": "Auto-generate design systems for vibe coding projects",
   "type": "module",
   "bin": {

package/vds-core-template/scan.mjs

@@ -774,6 +774,24 @@ function parseCssVarBlock(block) {
   return out;
 }
 
+/** Return only theme.extend.colors from tailwind config (user-defined colors), not the default Tailwind palette. */
+function getTailwindExtendColors() {
+  try {
+    const twPath = path.join(PROJECT_ROOT, "tailwind.config.js");
+    const twPathMjs = path.join(PROJECT_ROOT, "tailwind.config.mjs");
+    let config = null;
+    if (fs.existsSync(twPath)) {
+      config = projectRequire(twPath);
+    } else if (fs.existsSync(twPathMjs)) {
+      config = projectRequire(twPathMjs);
+    }
+    if (config && typeof config === "object" && config.default) config = config.default;
+    return config?.theme?.extend?.colors ?? null;
+  } catch (_) {
+    return null;
+  }
+}
+
 /** Resolve Tailwind theme for boxShadow, spacing, screens, zIndex, motion. Uses resolveConfig when available. */
 function getTailwindTheme() {
   const empty = { shadows: {}, spacing: {}, breakpoints: {}, zIndex: {}, transitionDuration: {}, transitionTimingFunction: {}, animation: {}, colors: {} };
@@ -1041,9 +1059,9 @@ function extractFoundations() {
   const foundationsColors = { ...colors };
   if (Object.keys(colorsDark).length > 0) foundationsColors._dark = colorsDark;
 
-  const twTheme = getTailwindTheme();
-  if (twTheme.colors && typeof twTheme.colors === "object") {
-    for (const [key, val] of Object.entries(twTheme.colors)) {
+  const extendColors = getTailwindExtendColors();
+  if (extendColors && typeof extendColors === "object") {
+    for (const [key, val] of Object.entries(extendColors)) {
       if (typeof val === "string" && (val.startsWith("#") || /^[a-z]/.test(val))) {
         foundationsColors[key] = { value: val, hex: val.startsWith("#") ? val : val };
       } else if (typeof val === "object" && val !== null && !Array.isArray(val)) {
@@ -1054,6 +1072,7 @@ function extractFoundations() {
     }
   }
 
+  const twTheme = getTailwindTheme();
   const normalizeThemeObj = (obj) => {
     if (!obj || typeof obj !== "object") return {};
     const out = {};

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

@@ -350,6 +350,12 @@ function needsRouter(source) {
   return false;
 }
 
+/** Detect if component provides its own router (BrowserRouter or RouterProvider). Preview should not wrap with MemoryRouter. */
+function usesOwnRouter(source) {
+  if (!source || typeof source !== "string") return false;
+  return /\bBrowserRouter\b|\bRouterProvider\b/.test(source);
+}
+
 /** Void HTML elements: img, input, hr, br — must not receive children. If component wraps one and has children in props, omit children in story args. */
 function componentWrapsVoidElement(source) {
   if (!source || typeof source !== "string") return false;
@@ -486,7 +492,6 @@ function buildSpecialStories(componentName, variants) {
 function buildRecipeStoryContent(comp, componentName, importPath, title, source, exportStyle, recipe) {
   const lines = [];
   lines.push(`import type { Meta, StoryObj } from "@storybook/react";`);
-  const useRouterDecorator = needsRouter(source);
   if (exportStyle === "default") {
     lines.push(`import ${componentName} from "${importPath}";`);
     if (recipe.imports?.length) {
@@ -507,18 +512,14 @@ function buildRecipeStoryContent(comp, componentName, importPath, title, source,
   for (const ext of recipe.extraImports || []) {
     lines.push(`import { ${ext.names.join(", ")} } from "${ext.from}";`);
   }
-  if (useRouterDecorator) lines.push(`import { MemoryRouter } from "react-router-dom";`);
+  const skipPreviewRouter = usesOwnRouter(source);
   lines.push("");
   lines.push(`const meta = {`);
   lines.push(`  title: ${JSON.stringify(title)},`);
   lines.push(`  component: ComponentRef,`);
   lines.push(`  tags: ["autodocs"],`);
-  if (useRouterDecorator) {
-    lines.push(`  decorators: [(Story) => (`);
-    lines.push(`    <MemoryRouter>`);
-    lines.push(`      <Story />`);
-    lines.push(`    </MemoryRouter>`);
-    lines.push(`  )],`);
+  if (skipPreviewRouter) {
+    lines.push(`  parameters: { router: false },`);
   }
   lines.push(`} satisfies Meta<typeof ComponentRef>;`);
   lines.push("");
@@ -619,22 +620,14 @@ function buildStoryFileContent(comp) {
     lines.push(`const ComponentRef = ${namedAlias} ?? ${defaultAlias};`);
   }
 
-  const useRouterDecorator = needsRouter(source);
-  if (useRouterDecorator) {
-    lines.push(`import { MemoryRouter } from "react-router-dom";`);
-  }
-
+  const skipPreviewRouter = usesOwnRouter(source);
   lines.push("");
   lines.push(`const meta = {`);
   lines.push(`  title: ${JSON.stringify(title)},`);
   lines.push(`  component: ComponentRef,`);
   lines.push(`  tags: ["autodocs"],`);
-  if (useRouterDecorator) {
-    lines.push(`  decorators: [(Story) => (`);
-    lines.push(`    <MemoryRouter>`);
-    lines.push(`      <Story />`);
-    lines.push(`    </MemoryRouter>`);
-    lines.push(`  )],`);
+  if (skipPreviewRouter) {
+    lines.push(`  parameters: { router: false },`);
   }
   lines.push(`} satisfies Meta<typeof ComponentRef>;`);
   lines.push("");