vibe-design-system 2.5.9 → 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.9",
+  "version": "2.5.11",
   "description": "Auto-generate design systems for vibe coding projects",
   "type": "module",
   "bin": {

package/vds-core-template/scan.mjs

@@ -237,101 +237,11 @@ function compareComponents(prevList, newResults) {
   return { added, removed, modified };
 }
 
-const CLASSIFICATION_RULES = [
-  { keywords: ["analysisdashboard", "componentlibrary"], group: "Sections", category: "Dashboard" },
-  {
-    keywords: [
-      "enterprisepushpanel",
-      "figmalibrarygenerator",
-      "integrationguide",
-      "projectdropzone",
-      "repoconnect",
-      "tokensstudioguide",
-    ],
-    group: "Sections",
-    category: "Features",
-  },
-  { keywords: ["hover-card"], group: "Feedback", category: "Feedback" },
-  {
-    keywords: [
-      "card",
-      "table",
-      "list",
-      "badge",
-      "avatar",
-      "chart",
-      "accordion",
-      "tabs",
-      "collapsible",
-      "toggle-group",
-      "carousel",
-      "scroll-area",
-    ],
-    group: "Data Display",
-    category: "Data Display",
-  },
-  { keywords: ["toggle"], group: "Actions", category: "Toggle" },
-  { keywords: ["button", "cta"], group: "Actions", category: "Button" },
-  { keywords: ["drawer", "sheet"], group: "Feedback", category: "Overlay" },
-  {
-    keywords: [
-      "modal",
-      "dialog",
-      "alert",
-      "toast",
-      "toaster",
-      "sonner",
-      "tooltip",
-      "popover",
-      "hover-card",
-      "progress",
-      "skeleton",
-    ],
-    group: "Feedback",
-    category: "Feedback",
-  },
-  {
-    keywords: [
-      "input",
-      "form",
-      "select",
-      "checkbox",
-      "textarea",
-      "label",
-      "switch",
-      "radio",
-      "slider",
-      "calendar",
-      "input-otp",
-      "command",
-    ],
-    group: "Forms",
-    category: "Forms",
-  },
-  {
-    keywords: [
-      "nav",
-      "header",
-      "sidebar",
-      "menu",
-      "menubar",
-      "dropdown-menu",
-      "navigation-menu",
-      "context-menu",
-      "navlink",
-      "breadcrumb",
-      "pagination",
-    ],
-    group: "Navigation",
-    category: "Navigation",
-  },
-  { keywords: ["separator", "aspect-ratio", "resizable"], group: "Layout", category: "Layout" },
-  {
-    keywords: ["hero", "banner", "section", "pricing", "feature", "featuresgrid", "interactivedemo", "modernhero"],
-    group: "Sections",
-    category: "Sections",
-  },
-];
+/** Path-based classification: ui/ → shadcn, components root → Components, else Uncategorized. */
+function classifyByPath(rel) {
+  if (rel.startsWith("ui/")) return { group: "shadcn", category: "UI" };
+  return { group: "Components", category: "Components" };
+}
 
 function getAllComponentFiles(dir, baseDir = dir) {
   const entries = fs.readdirSync(dir, { withFileTypes: true });
@@ -441,14 +351,6 @@ function extractVdsTags(content) {
   return Object.keys(tags).length ? tags : null;
 }
 
-function classifyByFileName(filePath) {
-  const baseName = path.basename(filePath, path.extname(filePath)).toLowerCase();
-  for (const rule of CLASSIFICATION_RULES) {
-    const found = rule.keywords.some((kw) => baseName.includes(kw));
-    if (found) return { group: rule.group, category: rule.category };
-  }
-  return { group: "Uncategorized", category: "Uncategorized" };
-}
 
 function humanizeName(filePath) {
   const base = path.basename(filePath, path.extname(filePath));
@@ -872,9 +774,27 @@ 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: {} };
+  const empty = { shadows: {}, spacing: {}, breakpoints: {}, zIndex: {}, transitionDuration: {}, transitionTimingFunction: {}, animation: {}, colors: {} };
   try {
     const resolveConfig = projectRequire("tailwindcss/resolveConfig");
     let config = { content: [{ raw: "", extension: "html" }], theme: {} };
@@ -896,6 +816,7 @@ function getTailwindTheme() {
     const transitionDuration = theme.transitionDuration;
     const transitionTimingFunction = theme.transitionTimingFunction;
     const animation = theme.animation;
+    const themeColors = theme.colors;
     const toObj = (v) => (v && typeof v === "object" && !Array.isArray(v) ? v : {});
     return {
       shadows: toObj(boxShadow),
@@ -905,6 +826,7 @@ function getTailwindTheme() {
       transitionDuration: toObj(transitionDuration),
       transitionTimingFunction: toObj(transitionTimingFunction),
       animation: toObj(animation),
+      colors: toObj(themeColors),
     };
   } catch (_) {
     return empty;
@@ -919,8 +841,15 @@ function extractFoundations() {
   const borderRadiusScale = {};
   const cssPath = path.join(PROJECT_ROOT, "src", "index.css");
   const globalsCss = path.join(PROJECT_ROOT, "src", "globals.css");
+  const stylesGlobals = path.join(PROJECT_ROOT, "src", "styles", "globals.css");
   const appGlobals = path.join(PROJECT_ROOT, "app", "globals.css");
-  const cssToRead = fs.existsSync(cssPath) ? cssPath : fs.existsSync(globalsCss) ? globalsCss : appGlobals;
+  const cssToRead = fs.existsSync(cssPath)
+    ? cssPath
+    : fs.existsSync(globalsCss)
+      ? globalsCss
+      : fs.existsSync(stylesGlobals)
+        ? stylesGlobals
+        : appGlobals;
 
   try {
     if (fs.existsSync(cssToRead)) {
@@ -1130,6 +1059,19 @@ function extractFoundations() {
   const foundationsColors = { ...colors };
   if (Object.keys(colorsDark).length > 0) foundationsColors._dark = colorsDark;
 
+  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)) {
+        for (const [k, v] of Object.entries(val)) {
+          if (typeof v === "string") foundationsColors[`${key}-${k}`] = { value: v, hex: v.startsWith("#") ? v : v };
+        }
+      }
+    }
+  }
+
   const twTheme = getTailwindTheme();
   const normalizeThemeObj = (obj) => {
     if (!obj || typeof obj !== "object") return {};
@@ -1173,7 +1115,7 @@ function scan() {
       name = vdsTags.name ?? humanizeName(rel);
       description = vdsTags.description ?? "";
     } else {
-      const classified = classifyByFileName(rel);
+      const classified = classifyByPath(rel);
       group = classified.group;
       category = classified.category;
       name = humanizeName(rel);
@@ -1192,7 +1134,7 @@ function scan() {
       results.push({
         file: "pages/" + rel,
         name,
-        group: "Sections",
+        group: "Pages",
         category: "Pages",
         description: "",
         tokens,

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("");
@@ -958,9 +951,11 @@ function main() {
   }
 
   for (const comp of components) {
+    if (comp.group === "shadcn" || comp.group === "Uncategorized") continue;
+    if (comp.group !== "Components") continue;
+
     const componentName = toSafeComponentName(comp.name, comp.file);
     if (onlyName && componentName !== onlyName) continue;
-    if (!comp.file.startsWith("ui/") && !comp.file.startsWith("pages/")) continue;
 
     const storyFileName = `${componentName}.stories.tsx`;
     const storyPath = path.join(STORIES_DIR, storyFileName);