@digiform/wizard 0.2.9 → 0.2.11

package/ui/src/lib/error-boundaries/BaseErrorBoundary.js

@@ -0,0 +1,155 @@
+"use client";
+import { jsx as s, jsxs as t } from "react/jsx-runtime";
+import { AlertTriangle as d, RefreshCw as h } from "lucide-react";
+import { Component as u } from "react";
+import { Button as i } from "../../components/button/button.js";
+import { Card as m, CardHeader as g, CardTitle as f, CardDescription as E, CardContent as v } from "../../components/card/card.js";
+const x = ({
+  error: a,
+  resetError: r,
+  level: e,
+  context: o,
+  errorId: n
+}) => {
+  const c = () => {
+    switch (e) {
+      case "app":
+        return "Application Error";
+      case "feature":
+        return "Feature Unavailable";
+      case "component":
+        return "Component Error";
+      default:
+        return "Something went wrong";
+    }
+  }, l = () => {
+    switch (e) {
+      case "app":
+        return "The application has encountered an unexpected error. Please try refreshing the page or contact support if the problem persists.";
+      case "feature":
+        return `The ${o || "feature"} is temporarily unavailable due to an error. You can try reloading this section or continue using other parts of the application.`;
+      case "component":
+        return `A component ${o ? `in ${o} ` : ""}has encountered an error. This shouldn't affect the rest of the application.`;
+      default:
+        return "An unexpected error occurred. Please try again.";
+    }
+  }, p = e === "app" || process.env.NODE_ENV === "development";
+  return /* @__PURE__ */ t(m, { className: "w-full max-w-2xl mx-auto my-8 border-destructive/50", children: [
+    /* @__PURE__ */ t(g, { children: [
+      /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ s(d, { className: "h-5 w-5 text-destructive" }),
+        /* @__PURE__ */ s(f, { className: "text-destructive", children: c() })
+      ] }),
+      /* @__PURE__ */ s(E, { children: l() })
+    ] }),
+    /* @__PURE__ */ t(v, { className: "space-y-4", children: [
+      /* @__PURE__ */ t("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ t(i, { onClick: r, variant: "outline", size: "sm", children: [
+          /* @__PURE__ */ s(h, { className: "h-4 w-4 mr-2" }),
+          "Try Again"
+        ] }),
+        e === "app" && /* @__PURE__ */ s(
+          i,
+          {
+            onClick: () => window.location.reload(),
+            variant: "default",
+            size: "sm",
+            children: "Reload Page"
+          }
+        )
+      ] }),
+      p && /* @__PURE__ */ t("details", { className: "mt-4", children: [
+        /* @__PURE__ */ t("summary", { className: "cursor-pointer text-sm font-medium text-muted-foreground hover:text-foreground", children: [
+          "Technical Details (Error ID: ",
+          n,
+          ")"
+        ] }),
+        /* @__PURE__ */ s("div", { className: "mt-2 p-3 bg-muted rounded-md", children: /* @__PURE__ */ t("div", { className: "text-sm space-y-2", children: [
+          /* @__PURE__ */ t("div", { children: [
+            /* @__PURE__ */ s("strong", { children: "Error:" }),
+            " ",
+            a.message
+          ] }),
+          /* @__PURE__ */ t("div", { children: [
+            /* @__PURE__ */ s("strong", { children: "Stack:" }),
+            /* @__PURE__ */ s("pre", { className: "text-xs mt-1 whitespace-pre-wrap break-all", children: a.stack })
+          ] })
+        ] }) })
+      ] })
+    ] })
+  ] });
+};
+class k extends u {
+  constructor(r) {
+    super(r), this.state = {
+      hasError: !1,
+      error: null,
+      errorInfo: null,
+      errorId: null
+    };
+  }
+  static getDerivedStateFromError(r) {
+    const e = `err_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    return {
+      hasError: !0,
+      error: r,
+      errorId: e
+    };
+  }
+  componentDidCatch(r, e) {
+    const o = this.state.errorId || `err_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    this.setState({
+      errorInfo: e,
+      errorId: o
+    }), process.env.NODE_ENV === "development" && (console.group(
+      `🚨 Error Boundary Caught Error (${this.props.level || "unknown"} level)`
+    ), console.error("Error:", r), console.error("Error Info:", e), console.error("Context:", this.props.context), console.error("Error ID:", o), console.groupEnd()), this.props.onError && this.props.onError(r, e, o), process.env.NODE_ENV === "production" && this.logErrorToService(r, e, o);
+  }
+  logErrorToService = (r, e, o) => {
+    try {
+      const n = {
+        errorId: o,
+        message: r.message,
+        stack: r.stack,
+        componentStack: e.componentStack,
+        level: this.props.level,
+        context: this.props.context,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        userAgent: navigator.userAgent,
+        url: window.location.href
+      };
+      console.error("Error logged to service:", n);
+    } catch (n) {
+      console.error("Failed to log error to service:", n);
+    }
+  };
+  resetError = () => {
+    this.setState({
+      hasError: !1,
+      error: null,
+      errorInfo: null,
+      errorId: null
+    });
+  };
+  render() {
+    if (this.state.hasError && this.state.error && this.state.errorId && this.state.errorInfo) {
+      const r = this.props.fallbackComponent || x;
+      return /* @__PURE__ */ s(
+        r,
+        {
+          error: this.state.error,
+          errorInfo: this.state.errorInfo,
+          resetError: this.resetError,
+          level: this.props.level || "component",
+          context: this.props.context,
+          errorId: this.state.errorId
+        }
+      );
+    }
+    return this.props.children;
+  }
+}
+export {
+  k as BaseErrorBoundary,
+  k as default
+};

package/ui/src/lib/error-boundaries/ComponentErrorBoundary.js

@@ -0,0 +1,153 @@
+"use client";
+import { jsx as r, jsxs as e } from "react/jsx-runtime";
+import { AlertCircle as d, RefreshCw as v, X as x } from "lucide-react";
+import { useState as f } from "react";
+import { Alert as h, AlertDescription as p } from "../../components/alert/alert.js";
+import { Button as o } from "../../components/button/button.js";
+import { BaseErrorBoundary as g } from "./BaseErrorBoundary.js";
+const N = ({
+  error: i,
+  resetError: t,
+  errorId: a,
+  context: n = "Component"
+}) => {
+  const [c, s] = f(!1);
+  return c ? /* @__PURE__ */ e(h, { className: "border-destructive/50 bg-destructive/5", children: [
+    /* @__PURE__ */ r(d, { className: "h-4 w-4 text-destructive" }),
+    /* @__PURE__ */ e(p, { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ e("span", { className: "text-sm", children: [
+        n,
+        " temporarily unavailable"
+      ] }),
+      /* @__PURE__ */ e("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ r(
+          o,
+          {
+            onClick: t,
+            size: "sm",
+            variant: "ghost",
+            className: "h-6 px-2 text-xs",
+            children: "Retry"
+          }
+        ),
+        /* @__PURE__ */ r(
+          o,
+          {
+            onClick: () => s(!1),
+            size: "sm",
+            variant: "ghost",
+            className: "h-6 px-2 text-xs",
+            children: "Show"
+          }
+        )
+      ] })
+    ] })
+  ] }) : /* @__PURE__ */ e(h, { className: "border-destructive/50 bg-destructive/5", children: [
+    /* @__PURE__ */ r(d, { className: "h-4 w-4 text-destructive" }),
+    /* @__PURE__ */ e(p, { children: [
+      /* @__PURE__ */ e("div", { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ e("div", { className: "flex-1", children: [
+          /* @__PURE__ */ e("div", { className: "font-medium text-destructive mb-1", children: [
+            n,
+            " Error"
+          ] }),
+          /* @__PURE__ */ r("div", { className: "text-sm text-muted-foreground mb-2", children: "This component encountered an error and couldn't render properly. The rest of the application should work normally." }),
+          /* @__PURE__ */ e("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ e(o, { onClick: t, size: "sm", variant: "outline", children: [
+              /* @__PURE__ */ r(v, { className: "h-3 w-3 mr-1" }),
+              "Retry"
+            ] }),
+            /* @__PURE__ */ r(
+              o,
+              {
+                onClick: () => s(!0),
+                size: "sm",
+                variant: "ghost",
+                className: "text-xs",
+                children: "Hide"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ r(
+          o,
+          {
+            onClick: () => s(!0),
+            size: "sm",
+            variant: "ghost",
+            className: "h-6 w-6 p-0 shrink-0",
+            children: /* @__PURE__ */ r(x, { className: "h-3 w-3" })
+          }
+        )
+      ] }),
+      process.env.NODE_ENV === "development" && /* @__PURE__ */ e("details", { className: "mt-3 text-xs", children: [
+        /* @__PURE__ */ e("summary", { className: "cursor-pointer text-muted-foreground hover:text-foreground", children: [
+          "Debug Info (ID: ",
+          a,
+          ")"
+        ] }),
+        /* @__PURE__ */ e("div", { className: "mt-1 p-2 bg-muted rounded text-xs", children: [
+          /* @__PURE__ */ e("div", { children: [
+            /* @__PURE__ */ r("strong", { children: "Component:" }),
+            " ",
+            n
+          ] }),
+          /* @__PURE__ */ e("div", { children: [
+            /* @__PURE__ */ r("strong", { children: "Error:" }),
+            " ",
+            i.message
+          ] }),
+          /* @__PURE__ */ e("div", { className: "mt-1", children: [
+            /* @__PURE__ */ r("strong", { children: "Stack:" }),
+            /* @__PURE__ */ r("pre", { className: "whitespace-pre-wrap break-all text-xs mt-1 max-h-20 overflow-y-auto", children: i.stack })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}, z = ({
+  children: i,
+  componentName: t = "Component",
+  fallback: a,
+  onError: n
+}) => /* @__PURE__ */ r(
+  g,
+  {
+    level: "component",
+    context: t,
+    fallbackComponent: a || N,
+    onError: (s, m, l) => {
+      if (console.warn(`⚠️ Component error in ${t}:`, {
+        error: s.message,
+        errorId: l,
+        componentName: t
+      }), process.env.NODE_ENV === "development" && console.error("Component error details:", {
+        error: s,
+        errorInfo: m,
+        errorId: l,
+        componentName: t
+      }), n && n(s, m, l), process.env.NODE_ENV === "production")
+        try {
+          console.log("Would send component error to monitoring service:", {
+            level: "warning",
+            // Lower priority than feature/app errors
+            message: s.message,
+            extra: {
+              errorId: l,
+              componentName: t,
+              context: "Component"
+            }
+          });
+        } catch (u) {
+          console.warn(
+            "Failed to send component error to monitoring service:",
+            u
+          );
+        }
+    },
+    children: i
+  }
+);
+export {
+  z as default
+};

package/ui/src/lib/error-boundaries/FormWizardErrorBoundary.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx as r, jsxs as e } from "react/jsx-runtime";
+import { FileX as m, RefreshCw as h, ArrowLeft as u } from "lucide-react";
+import { Button as d } from "../../components/button/button.js";
+import { Card as f, CardHeader as p, CardTitle as x, CardDescription as g, CardContent as N } from "../../components/card/card.js";
+import { BaseErrorBoundary as v } from "./BaseErrorBoundary.js";
+const w = ({
+  error: n,
+  resetError: a,
+  errorId: o,
+  context: i = "Form"
+}) => /* @__PURE__ */ r("div", { className: "flex items-center justify-center min-h-[50vh] p-4", children: /* @__PURE__ */ e(f, { className: "w-full max-w-lg border-destructive/50", children: [
+  /* @__PURE__ */ e(p, { className: "text-center", children: [
+    /* @__PURE__ */ r("div", { className: "flex justify-center mb-2", children: /* @__PURE__ */ r(m, { className: "h-8 w-8 text-destructive" }) }),
+    /* @__PURE__ */ e(x, { className: "text-destructive", children: [
+      i,
+      " Unavailable"
+    ] }),
+    /* @__PURE__ */ r(g, { children: "The form wizard encountered an error and cannot be displayed. This might be due to invalid configuration or a temporary issue." })
+  ] }),
+  /* @__PURE__ */ e(N, { className: "space-y-4", children: [
+    /* @__PURE__ */ r("div", { className: "text-center space-y-2", children: /* @__PURE__ */ r("p", { className: "text-sm text-muted-foreground", children: "Your progress has been preserved. Please try reloading the form." }) }),
+    /* @__PURE__ */ e("div", { className: "flex flex-col sm:flex-row gap-2", children: [
+      /* @__PURE__ */ e(d, { onClick: a, className: "flex-1", children: [
+        /* @__PURE__ */ r(h, { className: "h-4 w-4 mr-2" }),
+        "Reload Form"
+      ] }),
+      /* @__PURE__ */ e(d, { onClick: () => {
+        window.history.length > 1 ? window.history.back() : window.location.href = "/";
+      }, variant: "outline", className: "flex-1", children: [
+        /* @__PURE__ */ r(u, { className: "h-4 w-4 mr-2" }),
+        "Go Back"
+      ] })
+    ] }),
+    process.env.NODE_ENV === "development" && /* @__PURE__ */ e("details", { className: "mt-4", children: [
+      /* @__PURE__ */ e("summary", { className: "cursor-pointer text-xs text-muted-foreground hover:text-foreground", children: [
+        "Technical Details (ID: ",
+        o,
+        ")"
+      ] }),
+      /* @__PURE__ */ e("div", { className: "mt-2 p-2 bg-muted rounded text-xs", children: [
+        /* @__PURE__ */ e("div", { children: [
+          /* @__PURE__ */ r("strong", { children: "Error:" }),
+          " ",
+          n.message
+        ] }),
+        /* @__PURE__ */ e("div", { className: "mt-1", children: [
+          /* @__PURE__ */ r("strong", { children: "Component Stack:" }),
+          /* @__PURE__ */ r("pre", { className: "whitespace-pre-wrap break-all text-xs mt-1", children: n.stack })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "text-center", children: /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground", children: [
+      "Error ID: ",
+      o
+    ] }) })
+  ] })
+] }) }), C = ({
+  children: n,
+  formId: a,
+  onError: o
+}) => /* @__PURE__ */ r(
+  v,
+  {
+    level: "feature",
+    context: "Form Wizard",
+    fallbackComponent: w,
+    onError: (c, l, s) => {
+      console.error("🚨 Form Wizard error:", {
+        error: c,
+        errorInfo: l,
+        errorId: s,
+        formId: a,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        url: window.location.href
+      });
+      try {
+        const t = localStorage.getItem(`form-data-${a}`);
+        t && (localStorage.setItem(`form-data-backup-${s}`, t), console.log("Form data backed up with error ID:", s));
+      } catch (t) {
+        console.warn("Failed to backup form data:", t);
+      }
+      if (o && o(c, l, s), process.env.NODE_ENV === "production")
+        try {
+          console.log("Would send form error to monitoring service:", {
+            level: "error",
+            message: c.message,
+            extra: {
+              errorId: s,
+              formId: a,
+              componentStack: l.componentStack,
+              context: "FormWizard"
+            }
+          });
+        } catch (t) {
+          console.error(
+            "Failed to send form error to monitoring service:",
+            t
+          );
+        }
+    },
+    children: n
+  }
+);
+export {
+  C as default
+};

package/ui/src/lib/logger.js

@@ -0,0 +1,106 @@
+"use client";
+var l = /* @__PURE__ */ ((o) => (o[o.DEBUG = 0] = "DEBUG", o[o.INFO = 1] = "INFO", o[o.WARN = 2] = "WARN", o[o.ERROR = 3] = "ERROR", o))(l || {});
+class f {
+  level = 1;
+  isDevelopment = process.env.NODE_ENV === "development";
+  /**
+   * Sets the minimum log level for this logger instance
+   * @param level - The minimum log level to display
+   */
+  setLevel(e) {
+    this.level = e;
+  }
+  /**
+   * Determines if a log entry should be processed based on current log level
+   * @param level - The log level to check
+   * @returns true if the log should be processed
+   */
+  shouldLog(e) {
+    return e >= this.level;
+  }
+  /**
+   * Formats a log entry into a human-readable string
+   * @param entry - The log entry to format
+   * @returns Formatted log message string
+   */
+  formatMessage(e) {
+    const { timestamp: t, level: r, message: a, context: n, error: s } = e, c = l[r];
+    let i = `[${t}] ${c}: ${a}`;
+    return n && Object.keys(n).length > 0 && (i += ` | Context: ${JSON.stringify(n)}`), s && (i += ` | Error: ${s.message}`, this.isDevelopment && s.stack && (i += `
+Stack: ${s.stack}`)), i;
+  }
+  log(e, t, r, a) {
+    if (!this.shouldLog(e)) return;
+    const n = {
+      level: e,
+      message: t,
+      context: r,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      error: a
+    }, s = this.formatMessage(n);
+    if (this.isDevelopment)
+      switch (e) {
+        case 0:
+          console.debug(s);
+          break;
+        case 1:
+          console.info(s);
+          break;
+        case 2:
+          console.warn(s);
+          break;
+        case 3:
+          console.error(s);
+          break;
+      }
+    else
+      e >= 3 && console.error(s);
+  }
+  debug(e, t) {
+    this.log(0, e, t);
+  }
+  info(e, t) {
+    this.log(1, e, t);
+  }
+  warn(e, t, r) {
+    this.log(2, e, t, r);
+  }
+  error(e, t, r) {
+    this.log(3, e, t, r);
+  }
+  // Utility methods for common logging scenarios
+  componentError(e, t, r) {
+    this.error(
+      `Component error in ${e}`,
+      { component: e, action: t },
+      r
+    );
+  }
+  validationError(e, t, r) {
+    this.error(
+      `Validation failed for field: ${e}`,
+      {
+        component: "ValidationEngine",
+        field: e,
+        value: typeof t == "object" ? JSON.stringify(t) : String(t)
+      },
+      r
+    );
+  }
+  performanceWarning(e, t, r = 1e3) {
+    t > r && this.warn(`Performance warning: ${e} took ${t}ms`, {
+      operation: e,
+      duration: t,
+      threshold: r
+    });
+  }
+}
+const m = new f();
+process.env.NODE_ENV === "development" && (m.setLevel(
+  0
+  /* DEBUG */
+), console.log("🔧 Logger initialized in development mode with DEBUG level"));
+export {
+  l as LogLevel,
+  m as logger
+};

package/ui/src/lib/providers/FormEditingContext.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as d } from "react/jsx-runtime";
+import { useState as u, useMemo as m, createContext as c, useContext as g } from "react";
+let o = null;
+const n = () => (o || (o = c(
+  void 0
+)), o), l = () => {
+  const e = n(), t = g(e);
+  if (!t)
+    throw new Error("useFormEditing must be used within a FormEditingProvider");
+  return t;
+}, C = ({
+  children: e
+}) => {
+  const [t, i] = u(!1), r = m(() => ({ isEditing: t, setEditing: i }), [t]), s = n();
+  return /* @__PURE__ */ d(s.Provider, { value: r, children: e });
+};
+export {
+  C as FormEditingProvider,
+  l as useFormEditing
+};

package/ui/src/lib/queryClient.js

@@ -0,0 +1,26 @@
+"use client";
+import { QueryClient as e } from "@tanstack/react-query";
+const r = () => new e({
+  defaultOptions: {
+    queries: {
+      // Default cache time: 5 minutes
+      gcTime: 300 * 1e3,
+      // Default stale time: 30 seconds
+      staleTime: 30 * 1e3,
+      // Retry failed requests 2 times with exponential backoff
+      retry: 2,
+      // Don't refetch on window focus by default for form wizards
+      refetchOnWindowFocus: !1,
+      // Don't refetch on reconnect for form data consistency
+      refetchOnReconnect: !1
+    },
+    mutations: {
+      // Retry failed mutations once
+      retry: 1
+    }
+  }
+}), n = r();
+export {
+  r as createFormWizardQueryClient,
+  n as formWizardQueryClient
+};

package/ui/src/lib/types/guards.js

@@ -0,0 +1,11 @@
+"use client";
+function t(e) {
+  return typeof e == "object" && e !== null && "templateId" in e;
+}
+function l(e) {
+  return e && typeof e.template == "object" && typeof e.template.typeId == "string";
+}
+export {
+  l as isTemplateDialogConfig,
+  t as isTemplateStep
+};

package/ui/src/lib/utils/componentUtils.js

@@ -0,0 +1,38 @@
+"use client";
+const n = (e) => ![
+  "button",
+  "submit",
+  "reset",
+  "heading",
+  "paragraph",
+  "alert"
+].includes(e), t = {
+  text: "",
+  date: "",
+  time: "",
+  "datetime-local": "",
+  tel: "",
+  email: "",
+  password: "",
+  textarea: "",
+  number: void 0,
+  range: 0,
+  radioGroup: "",
+  radio: "",
+  dropdown: [],
+  select: "",
+  checkbox: !1,
+  file: null,
+  hidden: "",
+  button: null,
+  submit: null,
+  reset: null,
+  heading: null,
+  paragraph: null,
+  alert: null,
+  "code-input": ""
+}, r = (e) => t[e] ?? "";
+export {
+  r as getDefaultValue,
+  n as isFormField
+};