vibe-design-system 2.8.2 → 2.8.3

package/package.json

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

package/vds-core-template/scan.mjs

@@ -951,6 +951,17 @@ function writeVdsGeneratedComponents(suggestions) {
 
     let bodyJsx;
     const tokens = [];
+    // Known shadcn/UI component names — not Lucide icons
+    const KNOWN_UI_COMPONENTS = new Set([
+      "Button", "Card", "CardHeader", "CardTitle", "CardContent", "CardFooter",
+      "Input", "Label", "Textarea", "Select", "Checkbox", "Switch", "Badge",
+      "Avatar", "Dialog", "Sheet", "Drawer", "Tooltip", "Popover", "Tabs",
+      "Table", "Accordion", "Alert", "Toast", "Form", "Skeleton", "Separator",
+      "Progress", "Slider", "RadioGroup", "Toggle", "Command", "Calendar",
+      "DropdownMenu", "ContextMenu", "NavigationMenu", "Menubar", "HoverCard",
+      "Collapsible", "ScrollArea", "AspectRatio", "Carousel", "Resizable",
+      "Link", "Nav", "Header", "Footer", "Section", "Container", "Wrapper",
+    ]);
     if (s.fullJsx && s.fullJsx.trim().length > 0) {
       bodyJsx = flattenJsx(s.fullJsx);
       bodyJsx = convertHtmlStyleToReact(bodyJsx);
@@ -958,17 +969,28 @@ function writeVdsGeneratedComponents(suggestions) {
       const lucideTags = [];
       const uiTags = [];
       for (const tag of componentTags) {
-        if (/^[A-Z][a-z0-9]+$/.test(tag) && tag.length > 2) lucideTags.push(tag);
-        else uiTags.push(tag);
+        if (KNOWN_UI_COMPONENTS.has(tag)) {
+          uiTags.push(tag);
+        } else if (/^[A-Z][a-zA-Z0-9]+$/.test(tag) && tag.length > 2) {
+          lucideTags.push(tag); // likely a Lucide icon or unknown component
+        } else {
+          uiTags.push(tag);
+        }
+      }
+      if (lucideTags.length > 0) {
+        bodyJsx = applyLucideNamespace(bodyJsx, lucideTags);
+      }
+      const importLines = ['import React from "react";'];
+      if (bodyJsx.includes("motion.") || bodyJsx.includes("<motion")) {
+        importLines.push('import { motion } from "framer-motion";');
+      }
+      if (lucideTags.length > 0) {
+        importLines.push('import * as LucideIcons from "lucide-react";');
+      }
+      for (const tag of uiTags) {
+        if (!KNOWN_UI_COMPONENTS.has(tag)) continue;
+        importLines.push(`import { ${tag} } from "@/components/ui/${toKebab(tag)}";`);
       }
-      bodyJsx = applyLucideNamespace(bodyJsx, lucideTags);
-      const standardImports = [
-        'import React from "react";',
-        'import { motion } from "framer-motion";',
-        'import * as LucideIcons from "lucide-react";',
-      ];
-      const uiImportLines = uiTags.map((tag) => `import { ${tag} } from "@/components/ui/${toKebab(tag)}";`);
-      const importLines = [...standardImports, ...uiImportLines];
       const content = importLines.join("\n") + "\n\n" +
         `export function ${componentName}() {\n  return (\n    ` +
         bodyJsx.replace(/\n/g, "\n    ") + "\n  );\n}\n";
@@ -978,16 +1000,7 @@ function writeVdsGeneratedComponents(suggestions) {
       const tagName = s.tagName || "div";
       const className = s.pattern || "";
       bodyJsx = `<${tagName} className="${className.replace(/"/g, '\\"')}">\n      {null}\n    </${tagName}>`;
-      const content = `import React from "react";
-import { motion } from "framer-motion";
-import * as LucideIcons from "lucide-react";
-
-export function ${componentName}() {
-  return (
-    ${bodyJsx}
-  );
-}
-`;
+      const content = `import React from "react";\n\nexport function ${componentName}() {\n  return (\n    ${bodyJsx}\n  );\n}\n`;
       fs.writeFileSync(fullPath, content, "utf-8");
       tokens.push(...(className || "").split(/\s+/).filter(Boolean));
     }
@@ -995,8 +1008,9 @@ export function ${componentName}() {
     entries.push({
       file: relPath,
       name: componentName.replace(/([A-Z])/g, " $1").trim(),
-      group: "VDS Generated",
-      category: "Extracted",
+      exportName: componentName,
+      group: "Generated",
+      category: "Generated",
       description: "Auto-extracted from repeated className patterns.",
       tokens: [...new Set(tokens)],
       occurrences: s.occurrences ?? 0,
@@ -1635,6 +1649,7 @@ function scan() {
     engineer: getGitEngineer(),
     scannedAt: new Date().toISOString(),
     totalComponents: results.length,
+    componentsRelDir: COMPONENTS_DIR ? path.relative(PROJECT_ROOT, COMPONENTS_DIR).replace(/\\/g, "/") : "src/components",
     components: results,
     foundations,
     componentSuggestions,

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

@@ -22,6 +22,8 @@ const STORIES_DIR = path.join(SRC_DIR, "stories");
 
 // Filled in main() after reading vds-output.json so helpers (buildSpecialStories) can see foundations data (e.g. buttonUsage).
 let FOUNDATIONS_DATA = null;
+// componentsRelDir from vds-output.json — defaults to "src/components"
+let COMPONENTS_REL_DIR = "src/components";
 
 // CSS is loaded from .storybook/preview.tsx — never add CSS import to story files.
 
@@ -1052,12 +1054,18 @@ function buildRecipeStoryContent(comp, componentName, importPath, title, source,
 function buildStoryFileContent(comp) {
   const componentName = toSafeComponentName(comp.name, comp.file);
   const fileNoExt = comp.file.replace(/\.(tsx|jsx)$/, "");
+  // Compute import path relative to src/stories/ using the actual components directory.
   let importPath = "";
-  if (fileNoExt.startsWith("pages/")) {
-    importPath = "../" + fileNoExt; // Sonuç: "../pages/Home" olacak
+  const isPageFile = fileNoExt.startsWith("pages/") || fileNoExt.startsWith("src/pages/");
+  if (isPageFile) {
+    const normalized = fileNoExt.replace(/^src\//, "");
+    importPath = path.posix.relative("src/stories", normalized);
   } else {
-    importPath = "../components/" + fileNoExt; // Sonuç: "../components/ui/button" olacak
+    const targetPath = path.posix.join(COMPONENTS_REL_DIR, fileNoExt);
+    importPath = path.posix.relative("src/stories", targetPath);
   }
+  if (!importPath.startsWith(".")) importPath = "./" + importPath;
+
   const group = comp.group || "Components";
   const category = comp.category || null;
   const titleParts = [group, category, componentName].filter(Boolean);
@@ -1067,9 +1075,9 @@ function buildStoryFileContent(comp) {
   const variantProp = props.find((p) => p.name === "variant");
   let variants = parseUnionLiterals(variantProp && variantProp.type);
 
-  const srcPath = comp.file.startsWith("pages/")
-    ? path.join(SRC_DIR, comp.file)
-    : path.join(SRC_DIR, "components", comp.file);
+  const srcPath = isPageFile
+    ? path.join(PROJECT_ROOT, fileNoExt.replace(/^src\//, "src/") + ".tsx")
+    : path.join(PROJECT_ROOT, COMPONENTS_REL_DIR, comp.file);
 
   // Fallback: if manifest doesn't have variant metadata yet, parse cva() directly from component file.
   if (!variants.length) {
@@ -1105,7 +1113,7 @@ function buildStoryFileContent(comp) {
   }
   const exportStyle = detectExportStyle(source, componentName);
   const omitChildren = componentWrapsVoidElement(source);
-  const isPage = comp.file.startsWith("pages/");
+  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);
@@ -1499,6 +1507,7 @@ function main() {
   }
   const raw = fs.readFileSync(VDS_OUTPUT, "utf-8");
   const data = JSON.parse(raw);
+  COMPONENTS_REL_DIR = data.componentsRelDir || "src/components";
   const components = Array.isArray(data.components) ? data.components : [];
   const foundations = data.foundations || null;
   FOUNDATIONS_DATA = foundations;