vibe-design-system 2.8.3 → 2.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.8.3",
+  "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/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

@@ -523,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: () => {},",
@@ -548,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 }`,
 };