vibe-design-system 2.5.8 → 2.5.10

package/bin/init.js

@@ -22,6 +22,11 @@ const INSTALLER_ROOT = path.join(__dirname, "..");
 const TEMPLATE_DIR = path.join(INSTALLER_ROOT, "vds-core-template");
 
 const STORYBOOK_MAIN_TS = `import type { StorybookConfig } from "@storybook/react-vite";
+import { mergeConfig } from "vite";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -31,11 +36,13 @@ const config: StorybookConfig = {
     options: {},
   },
   async viteFinal(config) {
-    const { default: tailwindcss } = await import("tailwindcss");
-    config.css = {
-      postcss: { plugins: [tailwindcss] },
-    };
-    return config;
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          "@": path.resolve(__dirname, "../src"),
+        },
+      },
+    });
   },
 };
 
@@ -50,6 +57,21 @@ import "../src/index.css";
 const preview: Preview = {
   parameters: {
     layout: "fullscreen",
+    options: {
+      storySort: {
+        order: [
+          "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)),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.5.8",
+  "version": "2.5.10",
   "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));
@@ -874,7 +776,7 @@ function parseCssVarBlock(block) {
 
 /** 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 +798,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 +808,7 @@ function getTailwindTheme() {
       transitionDuration: toObj(transitionDuration),
       transitionTimingFunction: toObj(transitionTimingFunction),
       animation: toObj(animation),
+      colors: toObj(themeColors),
     };
   } catch (_) {
     return empty;
@@ -919,8 +823,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)) {
@@ -1131,6 +1042,18 @@ function extractFoundations() {
   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)) {
+      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 normalizeThemeObj = (obj) => {
     if (!obj || typeof obj !== "object") return {};
     const out = {};
@@ -1173,7 +1096,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 +1115,7 @@ function scan() {
       results.push({
         file: "pages/" + rel,
         name,
-        group: "Sections",
+        group: "Pages",
         category: "Pages",
         description: "",
         tokens,

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

@@ -958,9 +958,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);