vibe-design-system 2.8.3 → 2.8.5

package/package.json

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

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: () => {},",
@@ -538,6 +538,12 @@ const COMPONENT_EXTRA_ARGS = {
     "    totalEstimated: 0,",
     "    projectTotalEstimated: 0,",
   ],
+  TimeTable: [
+    "    logs: [{ id: \"1\", taskId: \"t1\", userId: \"u1\", date: \"2024-01-15\", hours: 8, description: \"Work session\", billable: true, status: \"submitted\" }, { id: \"2\", taskId: \"t1\", userId: \"u1\", date: \"2024-01-16\", hours: 6, description: \"Review session\", billable: false, status: \"draft\" }],",
+    "    users: [],",
+    "    tasks: [],",
+    "    onLogClick: () => {},",
+  ],
 };
 
 /** Render'da args'a uygulanacak fallback (useState(estimate.toString()) gibi kullanımlar için; args/Controls undefined yapsa bile). */
@@ -548,8 +554,9 @@ 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 }`,
+  TimeTable: `{ logs: [{ id: "1", taskId: "t1", userId: "u1", date: "2024-01-15", hours: 8, description: "Work session", billable: true, status: "submitted" }, { id: "2", taskId: "t1", userId: "u1", date: "2024-01-16", hours: 6, description: "Review session", billable: false, status: "draft" }], users: [], tasks: [], onLogClick: () => {} }`,
 };
 
 /** Recursive list of .tsx/.jsx file paths under dir (relative to dir). Index.tsx / index.tsx first for deterministic "first usage". */
@@ -821,15 +828,23 @@ function buildDefaultArgsForRequiredProps(props, usageFromPages = null, componen
       }
     }
   }
-  // COMPONENT_EXTRA_ARGS: props listesi boş olsa bile (örn. parse edilemeyen component) uygula
+  // COMPONENT_EXTRA_ARGS: props listesi boş olsa bile (örn. parse edilemeyen component) uygula.
+  // Bu blok her zaman override eder — auto-generated değerleri daha doğru olanlarla değiştirir.
   if (componentName && COMPONENT_EXTRA_ARGS[componentName]) {
     for (const line of COMPONENT_EXTRA_ARGS[componentName]) {
       const keyMatch = line.match(/^\s*(\w+)\s*:/);
       const key = keyMatch ? keyMatch[1] : null;
-      if (key && !added.has(key)) {
-        argLines.push(line);
-        added.add(key);
+      if (!key) continue;
+      if (added.has(key)) {
+        // Remove the previously auto-generated line for this key so we can replace it
+        const idx = argLines.findIndex(l => {
+          const m = l.match(/^\s*(\w+)\s*:/);
+          return m && m[1] === key;
+        });
+        if (idx !== -1) argLines.splice(idx, 1);
       }
+      argLines.push(line);
+      added.add(key);
     }
   }
   for (const name of Object.keys(fromPages)) {