vibe-design-system 2.8.2 → 2.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "description": "Auto-generate design systems for vibe coding projects",
   "type": "module",
   "bin": {
@@ -38,4 +38,4 @@
     "typescript": "^5.8.3",
     "vite": "^5.4.19"
   }
-}
+}

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/setup-storybook-providers.mjs

@@ -294,6 +294,29 @@ function buildWithProvidersCode(providers) {
   return `const withProviders = (Story: any) => ${inner};`;
 }
 
+/** ErrorBoundary class – injected into .storybook/preview to catch story render errors (missing providers, undefined props, etc.) */
+function buildErrorBoundaryCode() {
+  return [
+    "class VdsErrorBoundary extends React.Component {",
+    "  constructor(props) { super(props); this.state = { error: null }; }",
+    "  static getDerivedStateFromError(error) { return { error }; }",
+    "  componentDidCatch(err) { console.error(\"[VDS Story Error]\", err); }",
+    "  render() {",
+    "    const s = this.state; const p = this.props;",
+    "    if (s && s.error) return React.createElement(\"div\", {",
+    "      style: { padding: 16, color: \"#ff6b6b\", border: \"1px solid #ff6b6b\", borderRadius: 8, fontFamily: \"monospace\", margin: 8 }",
+    "    }, React.createElement(\"b\", null, \"⚠️ Story Error: \"), React.createElement(\"code\", { style: { whiteSpace: \"pre-wrap\" } }, String(s.error.message)));",
+    "    return p.children;",
+    "  }",
+    "}",
+    "const withErrorBoundary = (Story) => React.createElement(VdsErrorBoundary, null, React.createElement(Story));",
+  ].join("\n");
+}
+
+// VDS markers for idempotent preview injection
+const VDS_BLOCK_START = "// [VDS:providers-start]";
+const VDS_BLOCK_END = "// [VDS:providers-end]";
+
 function injectProviderDecorators(projectRoot) {
   const previewPath = getPreviewPath(projectRoot);
   if (!previewPath) {
@@ -302,44 +325,83 @@ function injectProviderDecorators(projectRoot) {
   }
 
   const { providersToAdd, hooksWithoutProvider, hooksByFile } = collectProvidersAndWarnings(projectRoot);
-  if (providersToAdd.length === 0 && hooksWithoutProvider.size === 0) return;
-
-  if (providersToAdd.length > 0) {
-    let content = fs.readFileSync(previewPath, "utf-8");
-    const uniqueProviders = [...new Map(providersToAdd.map((p) => [p.name, p])).values()];
-    if (!content.includes("import React") && !content.includes("import React from")) {
-      const firstImport = content.match(/^import\s+/m);
-      const insertAt = firstImport ? content.indexOf(firstImport[0]) : 0;
-      content = content.slice(0, insertAt) + "import React from \"react\";\n" + content.slice(insertAt);
-    }
-    for (const p of uniqueProviders) {
-      if (!content.includes(p.name)) {
-        const lastImportIdx = content.search(/\nimport\s+.+?;\s*$/m);
-        const insertAt = lastImportIdx >= 0 ? content.indexOf("\n", lastImportIdx) + 1 : content.indexOf("\n") + 1;
-        let importLine = `import { ${p.name} } from "${p.importPath}";\n`;
-        if (p.extraImport && !content.includes(p.extraImport.name)) {
-          importLine += `import { ${p.extraImport.name} } from "${p.extraImport.from}";\n`;
-        }
-        content = content.slice(0, insertAt) + importLine + content.slice(insertAt);
+  let content = fs.readFileSync(previewPath, "utf-8");
+
+  // 1. Ensure React import exists (needed for error boundary + providers)
+  if (!content.includes("import React") && !content.includes("import React from")) {
+    const firstImport = content.match(/^import\s+/m);
+    const insertAt = firstImport ? content.indexOf(firstImport[0]) : 0;
+    content = content.slice(0, insertAt) + "import React from \"react\";\n" + content.slice(insertAt);
+  }
+
+  // 2. Add provider imports if not already present (use regex to detect existing import)
+  const uniqueProviders = [...new Map(providersToAdd.map((p) => [p.name, p])).values()];
+  for (const p of uniqueProviders) {
+    const alreadyImported = new RegExp(`\\bimport[^;]*\\b${p.name}\\b[^;]*from`).test(content);
+    if (!alreadyImported) {
+      const importMatches = [...content.matchAll(/^import\s+[^\n]+;/gm)];
+      const lastMatch = importMatches[importMatches.length - 1];
+      const insertAt = lastMatch ? lastMatch.index + lastMatch[0].length + 1 : content.indexOf("\n") + 1;
+      let importLine = `import { ${p.name} } from "${p.importPath}";\n`;
+      if (p.extraImport && !new RegExp(`\\b${p.extraImport.name}\\b`).test(content)) {
+        importLine += `import { ${p.extraImport.name} } from "${p.extraImport.from}";\n`;
       }
+      content = content.slice(0, insertAt) + importLine + content.slice(insertAt);
     }
-    content = content.replace(/const withProviders\s*=\s*\([^)]*\)\s*=>\s*[\s\S]+?;\s*\n?/g, "").replace(/\n{3,}/g, "\n\n");
-    const withProvidersCode = buildWithProvidersCode(providersToAdd);
-    const insertBefore = content.indexOf("const preview");
-    if (insertBefore !== -1) {
-      content = content.slice(0, insertBefore) + withProvidersCode + "\n\n" + content.slice(insertBefore);
-      if (content.includes("decorators:")) {
-        if (!content.includes("decorators: [withProviders")) {
-          content = content.replace(/decorators:\s*\[/, "decorators: [withProviders, ");
-        }
-      } else {
-        content = content.replace(/(const preview\s*[^=]*=\s*\{\s*)/, "$1\n  decorators: [withProviders],\n  ");
+  }
+
+  // 3. Remove previous VDS injections (idempotent re-runs)
+  content = content.replace(new RegExp(VDS_BLOCK_START.replace(/[\[\]]/g, "\\$&") + "[\\s\\S]*?" + VDS_BLOCK_END.replace(/[\[\]]/g, "\\$&") + "\\n?"), "");
+  // Remove old-style single-line withProviders (pre-marker era)
+  content = content.replace(/^const withProviders\s*=\s*\([^)]*\)\s*=>.*;\n?/m, "");
+  // Remove VDS decorator names from decorators arrays so we can re-inject cleanly
+  content = content.replace(/\bwithErrorBoundary\s*,\s*/g, "").replace(/,\s*\bwithErrorBoundary\b/g, "").replace(/\bwithErrorBoundary\b/g, "");
+  content = content.replace(/\bwithProviders\s*,\s*/g, "").replace(/,\s*\bwithProviders\b/g, "").replace(/\bwithProviders\b/g, "");
+  // Fix any syntax damage: leading comma, trailing comma, empty decorators
+  content = content.replace(/\[\s*,\s*/g, "[").replace(/,\s*\]/g, "]");
+  content = content.replace(/\s*decorators:\s*\[\s*\]\s*,?\n?/g, "");
+  content = content.replace(/\n{3,}/g, "\n\n");
+
+  // 4. Build new VDS block (error boundary + optional provider wrapper)
+  const errorBoundaryCode = buildErrorBoundaryCode();
+  const withProvidersCode = uniqueProviders.length > 0 ? buildWithProvidersCode(providersToAdd) : null;
+  const vdsCode = [errorBoundaryCode, withProvidersCode].filter(Boolean).join("\n\n");
+  const vdsBlock = VDS_BLOCK_START + "\n" + vdsCode + "\n" + VDS_BLOCK_END;
+
+  // 5. Find insertion point: before "const preview" or "export default {"
+  let insertBefore = content.indexOf("const preview");
+  if (insertBefore === -1) {
+    const edMatch = content.match(/export\s+default\s*[\{(]/);
+    if (edMatch) insertBefore = content.indexOf(edMatch[0]);
+  }
+  if (insertBefore === -1) insertBefore = content.length;
+  content = content.slice(0, insertBefore) + vdsBlock + "\n\n" + content.slice(insertBefore);
+
+  // 6. Inject decorators into preview object
+  const decoratorItems = ["withErrorBoundary", ...(withProvidersCode ? ["withProviders"] : [])];
+  const decoratorsStr = decoratorItems.join(", ");
+  if (content.includes("decorators:")) {
+    // Prepend VDS decorators to existing decorators array
+    content = content.replace(/\bdecorators:\s*\[/, `decorators: [${decoratorsStr}, `);
+    content = content.replace(/,\s*\]/g, "]");
+  } else {
+    // Add new decorators key to preview object
+    const constPreviewMatch = content.match(/(const\s+preview\s*[^=\n]*=\s*\{)/);
+    if (constPreviewMatch) {
+      content = content.replace(constPreviewMatch[0], constPreviewMatch[0] + `\n  decorators: [${decoratorsStr}],`);
+    } else {
+      const exportDefaultMatch = content.match(/(export\s+default\s*\{)/);
+      if (exportDefaultMatch) {
+        content = content.replace(exportDefaultMatch[0], exportDefaultMatch[0] + `\n  decorators: [${decoratorsStr}],`);
       }
     }
-    fs.writeFileSync(previewPath, content, "utf-8");
-    console.log("[VDS] Storybook preview: " + uniqueProviders.map((p) => p.name).join(", "));
   }
 
+  content = content.replace(/\n{3,}/g, "\n\n");
+  fs.writeFileSync(previewPath, content, "utf-8");
+  console.log("[VDS] Storybook preview: ErrorBoundary" + (uniqueProviders.length ? " + " + uniqueProviders.map((p) => p.name).join(", ") : ""));
+
+  // 7. Handle hooks without provider: add warning comment to affected story files
   if (hooksWithoutProvider.size > 0) {
     const componentNameFromPath = (rel) => path.basename(rel, path.extname(rel));
     const storiesDir = path.join(projectRoot, "src", "stories");

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.
 
@@ -521,7 +523,7 @@ const COMPONENT_EXTRA_ARGS = {
     "    taskId: \"1\",",
   ],
   TimeFilterPanel: [
-    "    filter: { dateRange: {}, userIds: [], tags: [], billable: \"all\" },",
+    "    filter: { preset: null, dateRange: {}, userIds: [], tags: [], billable: \"all\" },",
     "    onFilterChange: () => {},",
     "    onSaveFilter: () => {},",
     "    onDeleteFilter: () => {},",
@@ -546,7 +548,7 @@ const RENDER_ARGS_FALLBACKS = {
 /** Kalıcı çözüm: Storybook Docs/Controls args'ı geçmezse bile component'a güvenli props veren wrapper. Önce safeDefaults uygulanır, sonra gelen props. */
 const SAFE_WRAPPER_DEFAULTS = {
   TaskEstimateInput: `{ estimate: 0, onUpdate: () => {}, value: 0, task: { id: "1", title: "Example", estimate: 0 }, compact: false }`,
-  TimeFilterPanel: `{ filter: { dateRange: {}, userIds: [], tags: [], billable: "all" }, onFilterChange: () => {}, onSaveFilter: () => {}, onDeleteFilter: () => {}, filteredCount: 0, savedFilters: [] }`,
+  TimeFilterPanel: `{ filter: { preset: null, dateRange: {}, userIds: [], tags: [], billable: "all" }, onFilterChange: () => {}, onSaveFilter: () => {}, onDeleteFilter: () => {}, filteredCount: 0, savedFilters: [] }`,
   TimeStats: `{ totalLogged: 0, totalBillable: 0, totalNonBillable: 0, totalBilled: 0, totalEstimated: 0, projectTotalEstimated: 0 }`,
 };
 
@@ -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;