@digiform/wizard 0.3.1 → 0.3.3

package/wizard/src/features/api-integration/services/ApiCallService.js

@@ -2,11 +2,11 @@
 import { compileApiRequestBody as h } from "../../../../../core/src/utils/apiBodyUtils.js";
 import { ActionValidationError as c } from "../../validation-system/validation/ActionValidation.js";
 import "@tanstack/react-query";
-function y(l) {
-  return l !== null && typeof l == "object" && !Array.isArray(l);
+function y(n) {
+  return n !== null && typeof n == "object" && !Array.isArray(n);
 }
-function d(l) {
-  return typeof l == "object" && l !== null && "message" in l && typeof l.message == "string";
+function d(n) {
+  return typeof n == "object" && n !== null && "message" in n && typeof n.message == "string";
 }
 class C {
   options;
@@ -18,15 +18,15 @@ class C {
     if (e.cacheKey)
       return this.interpolateTemplate(e.cacheKey, r);
     const t = this.interpolateTemplate(e.url, r), i = e.method;
-    let s = "";
+    let o = "";
     if (i === "POST" || i === "PUT")
       try {
-        const n = h(e, r);
-        s = n ? `:${JSON.stringify(n)}` : "";
+        const a = h(e, r);
+        o = a ? `:${JSON.stringify(a)}` : "";
       } catch {
-        s = "";
+        o = "";
       }
-    return `api-call:${i}:${t}${s}`;
+    return `api-call:${i}:${t}${o}`;
   }
   // Create query options for React Query
   createQueryOptions(e, r) {
@@ -62,12 +62,12 @@ class C {
     let t = this.interpolateTemplate(e.url, r);
     const i = this.buildQueryParams(e, r);
     if (i.size > 0) {
-      const o = new URL(t, window.location.origin);
+      const s = new URL(t, window.location.origin);
       i.forEach((p, m) => {
-        o.searchParams.set(m, p);
-      }), t = o.toString();
+        s.searchParams.set(m, p);
+      }), t = s.toString();
     }
-    const s = this.buildHeaders(e, r);
+    const o = this.buildHeaders(e, r);
     try {
       new URL(t, window.location.origin);
     } catch {
@@ -78,63 +78,63 @@ class C {
         { url: t, originalUrl: e.url }
       );
     }
-    const n = {
+    const a = {
       method: e.method,
-      headers: s
+      headers: o
     };
     if (e.method === "POST" || e.method === "PUT")
       try {
-        const o = h(e, r);
-        o && (n.body = o, s["Content-Type"] = s["Content-Type"] || "application/json");
-      } catch (o) {
+        const s = h(e, r);
+        s && (a.body = s, o["Content-Type"] = o["Content-Type"] || "application/json");
+      } catch (s) {
         throw new c(
           "api-call-error",
           "apiCall",
-          `Failed to compile request body: ${o.message}`,
+          `Failed to compile request body: ${s.message}`,
           { config: e, formData: r }
         );
       }
-    const a = new AbortController(), u = setTimeout(
-      () => a.abort(),
+    const l = new AbortController(), u = setTimeout(
+      () => l.abort(),
       e.timeout || 1e4
     );
     try {
-      const o = await fetch(t, {
-        ...n,
-        signal: a.signal
+      const s = await fetch(t, {
+        ...a,
+        signal: l.signal
       });
-      if (clearTimeout(u), !o.ok) {
-        const p = await o.text().catch(() => "Unknown error");
+      if (clearTimeout(u), !s.ok) {
+        const p = await s.text().catch(() => "Unknown error");
         throw new c(
           "api-call-error",
           "apiCall",
-          `API call failed: ${o.status} ${o.statusText}`,
+          `API call failed: ${s.status} ${s.statusText}`,
           {
-            status: o.status,
-            statusText: o.statusText,
+            status: s.status,
+            statusText: s.statusText,
             errorText: p,
             url: t
           }
         );
       }
       try {
-        return await o.json();
+        return await s.json();
       } catch {
-        return await o.text();
+        return await s.text();
       }
-    } catch (o) {
-      throw clearTimeout(u), o instanceof c ? o : o instanceof DOMException && o.name === "AbortError" ? new c(
+    } catch (s) {
+      throw clearTimeout(u), s instanceof c ? s : s instanceof DOMException && s.name === "AbortError" ? new c(
         "api-call-error",
         "apiCall",
         `API call timed out after ${e.timeout || 1e4}ms`,
         { url: t, timeout: e.timeout || 1e4 }
-      ) : this.isCorsError(o, t) ? new c(
+      ) : this.isCorsError(s, t) ? new c(
         "api-cors-error",
         "apiCall",
         "Unable to connect to the external service due to security restrictions. This typically happens when the target server doesn't allow cross-origin requests from this website.",
         {
           url: t,
-          originalError: o.message,
+          originalError: s.message,
           errorType: "CORS",
           userFriendlyMessage: "The external service is not accessible from this application due to security policies.",
           suggestedActions: [
@@ -143,13 +143,13 @@ class C {
             "Check if the API endpoint URL is correct"
           ]
         }
-      ) : this.isNetworkError(o) ? new c(
+      ) : this.isNetworkError(s) ? new c(
         "api-network-error",
         "apiCall",
         "Failed to connect to the external service. Please check your internet connection or try again later.",
         {
           url: t,
-          originalError: o.message,
+          originalError: s.message,
           errorType: "NETWORK",
           userFriendlyMessage: "Unable to connect to the external service. This could be due to network issues or the service being unavailable.",
           suggestedActions: [
@@ -161,10 +161,10 @@ class C {
       ) : new c(
         "api-call-error",
         "apiCall",
-        `Network error: ${o.message}`,
+        `Network error: ${s.message}`,
         {
           url: t,
-          originalError: o.message,
+          originalError: s.message,
           userFriendlyMessage: "An unexpected error occurred while calling the external service."
         }
       );
@@ -174,7 +174,7 @@ class C {
    * Detects if an error is likely a CORS error
    */
   isCorsError(e, r) {
-    const t = d(e) ? e.message.toLowerCase() : "", s = [
+    const t = d(e) ? e.message.toLowerCase() : "", o = [
       "cors",
       "cross-origin",
       "access to fetch",
@@ -184,8 +184,8 @@ class C {
       "cors error"
     ].some(
       (u) => t.includes(u)
-    ), n = r.startsWith("http") && !r.includes(window.location.hostname), a = e instanceof TypeError && t.includes("failed to fetch") && n;
-    return s || a;
+    ), a = r.startsWith("http") && !r.includes(window.location.hostname), l = e instanceof TypeError && t.includes("failed to fetch") && a;
+    return o || l;
   }
   /**
    * Detects if an error is a network-related error (but not CORS)
@@ -202,21 +202,12 @@ class C {
       "unreachable",
       "connection failed"
     ], i = e instanceof TypeError && r.includes("failed to fetch");
-    return t.some((s) => r.includes(s)) || i;
+    return t.some((o) => r.includes(o)) || i;
   }
   applyFlattenedResponseMappings(e, r, t) {
-    console.log("🔄 Applying response mappings:", {
-      response: e,
-      mappings: r
-    });
-    for (const [i, s] of Object.entries(r)) {
-      const n = this.getValueFromPath(e, i), a = this.extractFieldNameFromTemplate(s);
-      console.log("📝 Field mapping:", {
-        apiField: i,
-        formFieldTemplate: s,
-        actualFieldName: a,
-        rawValue: n
-      }), t(a, n);
+    for (const [i, o] of Object.entries(r)) {
+      const a = this.getValueFromPath(e, i), l = this.extractFieldNameFromTemplate(o);
+      t(l, a);
     }
   }
   /**
@@ -262,44 +253,44 @@ class C {
   // }
   buildHeaders(e, r) {
     const t = {}, i = e.headers || e.headersConfig || [];
-    for (const s of i)
-      if (s.key.trim() && s.value.trim()) {
-        const n = this.interpolateTemplate(
-          s.value,
+    for (const o of i)
+      if (o.key.trim() && o.value.trim()) {
+        const a = this.interpolateTemplate(
+          o.value,
           r
         );
-        t[s.key] = n;
+        t[o.key] = a;
       }
     return t;
   }
   buildQueryParams(e, r) {
     const t = new URLSearchParams(), i = e.params || e.paramsConfig || [];
-    for (const s of i)
-      if (s.key.trim() && s.value.trim()) {
-        const n = this.interpolateTemplate(
-          s.value,
+    for (const o of i)
+      if (o.key.trim() && o.value.trim()) {
+        const a = this.interpolateTemplate(
+          o.value,
           r
         );
-        t.set(s.key, n);
+        t.set(o.key, a);
       }
     return t;
   }
   interpolateTemplate(e, r) {
     let t = e.replace(
       /\$\{data\.([^}]+)\}/g,
-      (i, s) => {
-        const n = this.getValueFromPath(r, s);
-        return n != null ? String(n) : i;
+      (i, o) => {
+        const a = this.getValueFromPath(r, o);
+        return a != null ? String(a) : i;
       }
     );
-    return t = t.replace(/\$\{([^}]+)\}/g, (i, s) => {
+    return t = t.replace(/\$\{([^}]+)\}/g, (i, o) => {
       if (i.includes("data.")) return i;
-      if (s.includes(".")) {
-        const a = s.split("."), u = a[a.length - 1], o = r[u];
-        return o != null ? String(o) : i;
+      if (o.includes(".")) {
+        const l = o.split("."), u = l[l.length - 1], s = r[u];
+        return s != null ? String(s) : i;
       }
-      const n = this.getValueFromPath(r, s);
-      return n != null ? String(n) : i;
+      const a = this.getValueFromPath(r, o);
+      return a != null ? String(a) : i;
     }), t;
   }
 }

package/wizard/src/features/dialog-system/components/ActionDialog/ActionDialog.js

@@ -1,54 +1,50 @@
 "use client";
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
 /* empty css                                  */
 import { Button as N } from "../../../../../../ui/src/components/button/button.js";
-import { Dialog as g, DialogContent as D, DialogHeader as S, DialogTitle as f, DialogDescription as I } from "../../../../../../ui/src/components/dialog/dialog.js";
-import { Sheet as T, SheetContent as M, SheetHeader as _, SheetTitle as B } from "../../../../../../ui/src/components/sheet/sheet.js";
-import { memo as H, useState as x } from "react";
+import { Dialog as f, DialogContent as g, DialogHeader as D, DialogTitle as S, DialogDescription as T } from "../../../../../../ui/src/components/dialog/dialog.js";
+import { Sheet as I, SheetContent as _, SheetHeader as B, SheetTitle as H } from "../../../../../../ui/src/components/sheet/sheet.js";
+import { memo as M, useState as x } from "react";
 import { ConfirmationDialog as $ } from "../ConfirmationDialog/ConfirmationDialog.js";
 import { EmailVerificationDialog as b } from "../EmailVerificationDialog/EmailVerificationDialog.js";
-import l from "./ActionDialog.module.css.js";
-const w = H(
-  ({ config: t, formData: n, onButtonClick: s, onClose: o, isOpen: i }) => {
+import r from "./ActionDialog.module.css.js";
+const w = M(
+  ({ config: a, formData: n, onButtonClick: s, onClose: o, isOpen: i }) => {
     const [c, h] = x(!1);
-    if (!t) return null;
-    if (console.log("🔍 ActionDialog config:", {
-      config: t,
-      typeId: t.templateMetadata?.typeId,
-      title: t.title
-    }), t.templateMetadata?.typeId === "verify-dialog")
+    if (!a) return null;
+    if (a.templateMetadata?.typeId === "verify-dialog")
       return /* @__PURE__ */ e(
         b,
         {
-          config: t,
+          config: a,
           formData: n,
           onButtonClick: s,
           onClose: o,
           isOpen: i
         }
       );
-    if (t.templateMetadata?.typeId === "confirmation-dialog")
+    if (a.templateMetadata?.typeId === "confirmation-dialog")
       return /* @__PURE__ */ e(
         $,
         {
-          config: t,
+          config: a,
           formData: n,
           onButtonClick: s,
           onClose: o,
           isOpen: i
         }
       );
-    const y = async (a) => {
+    const y = async (t) => {
       h(!0);
       try {
-        s(a.action);
+        s(t.action);
       } finally {
         h(!1);
       }
     }, u = () => {
-      t.dismissible !== !1 && !c && o();
-    }, v = (a) => {
-      switch (a) {
+      a.dismissible !== !1 && !c && o();
+    }, v = (t) => {
+      switch (t) {
         case "primary":
           return "default";
         case "secondary":
@@ -58,53 +54,53 @@ const w = H(
         default:
           return "secondary";
       }
-    }, d = t.content.replace(
+    }, d = a.content.replace(
       /\$\{data\.([^}]+)\}/g,
-      (a, C) => {
+      (t, C) => {
         const p = n[C];
-        return p != null ? String(p) : a;
+        return p != null ? String(p) : t;
       }
-    ), m = () => /* @__PURE__ */ e("div", { className: l.buttonRow, children: t.buttons.map((a) => /* @__PURE__ */ e(
+    ), m = () => /* @__PURE__ */ e("div", { className: r.buttonRow, children: a.buttons.map((t) => /* @__PURE__ */ e(
       N,
       {
-        variant: v(a.variant),
-        onClick: () => y(a),
+        variant: v(t.variant),
+        onClick: () => y(t),
         disabled: c,
-        className: l.minWidthButton,
-        children: a.label
+        className: r.minWidthButton,
+        children: t.label
       },
-      `${a.label}-${a.action}`
+      `${t.label}-${t.action}`
     )) });
-    return t.type === "toast" ? i ? /* @__PURE__ */ e("div", { className: l.toastContainer, children: /* @__PURE__ */ r("div", { className: l.toastCard, children: [
-      /* @__PURE__ */ r("div", { children: [
-        /* @__PURE__ */ e("h3", { className: l.toastTitle, children: t.title }),
+    return a.type === "toast" ? i ? /* @__PURE__ */ e("div", { className: r.toastContainer, children: /* @__PURE__ */ l("div", { className: r.toastCard, children: [
+      /* @__PURE__ */ l("div", { children: [
+        /* @__PURE__ */ e("h3", { className: r.toastTitle, children: a.title }),
         /* @__PURE__ */ e(
           "div",
           {
-            className: l.toastContent,
+            className: r.toastContent,
             dangerouslySetInnerHTML: { __html: d }
           }
         )
       ] }),
       /* @__PURE__ */ e(m, {})
-    ] }) }) : null : t.type === "sidebar" ? /* @__PURE__ */ e(T, { open: i, onOpenChange: (a) => !a && u(), children: /* @__PURE__ */ r(M, { className: l.sheetContent, children: [
-      /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e(B, { children: t.title }) }),
-      /* @__PURE__ */ r("div", { className: l.sheetBody, children: [
+    ] }) }) : null : a.type === "sidebar" ? /* @__PURE__ */ e(I, { open: i, onOpenChange: (t) => !t && u(), children: /* @__PURE__ */ l(_, { className: r.sheetContent, children: [
+      /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(H, { children: a.title }) }),
+      /* @__PURE__ */ l("div", { className: r.sheetBody, children: [
         /* @__PURE__ */ e(
           "div",
           {
-            className: l.sheetText,
+            className: r.sheetText,
             dangerouslySetInnerHTML: { __html: d }
           }
         ),
         /* @__PURE__ */ e(m, {})
       ] })
-    ] }) }) : /* @__PURE__ */ e(g, { open: i, onOpenChange: (a) => !a && u(), children: /* @__PURE__ */ r(D, { className: l[`size-${t.size || "medium"}`], children: [
-      /* @__PURE__ */ r(S, { children: [
-        /* @__PURE__ */ e(f, { children: t.title }),
-        /* @__PURE__ */ e(I, { asChild: !0, children: /* @__PURE__ */ e("div", { dangerouslySetInnerHTML: { __html: d } }) })
+    ] }) }) : /* @__PURE__ */ e(f, { open: i, onOpenChange: (t) => !t && u(), children: /* @__PURE__ */ l(g, { className: r[`size-${a.size || "medium"}`], children: [
+      /* @__PURE__ */ l(D, { children: [
+        /* @__PURE__ */ e(S, { children: a.title }),
+        /* @__PURE__ */ e(T, { asChild: !0, children: /* @__PURE__ */ e("div", { dangerouslySetInnerHTML: { __html: d } }) })
       ] }),
-      /* @__PURE__ */ e("div", { className: l.modalButtonRow, children: /* @__PURE__ */ e(m, {}) })
+      /* @__PURE__ */ e("div", { className: r.modalButtonRow, children: /* @__PURE__ */ e(m, {}) })
     ] }) });
   }
 );

package/wizard/src/features/dialog-system/components/ConfirmationDialog/ConfirmationDialog.js

@@ -1,64 +1,60 @@
 "use client";
-import { jsx as o, jsxs as a, Fragment as f } from "react/jsx-runtime";
+import { jsx as e, jsxs as t, Fragment as h } from "react/jsx-runtime";
 /* empty css                                  */
-import { Button as p } from "../../../../../../ui/src/components/button/button.js";
-import { Dialog as h, DialogContent as u, DialogHeader as C, DialogTitle as c, DialogDescription as s } from "../../../../../../ui/src/components/dialog/dialog.js";
-import { HelpCircle as m, Info as D, AlertTriangle as N } from "lucide-react";
+import { Button as f } from "../../../../../../ui/src/components/button/button.js";
+import { Dialog as u, DialogContent as g, DialogHeader as C, DialogTitle as l, DialogDescription as c } from "../../../../../../ui/src/components/dialog/dialog.js";
+import { HelpCircle as s, Info as N, AlertTriangle as D } from "lucide-react";
 import { memo as v } from "react";
-import e from "./ConfirmationDialog.module.css.js";
-const y = v(
+import n from "./ConfirmationDialog.module.css.js";
+const I = v(
   ({
     config: i,
-    formData: I,
-    onButtonClick: d,
-    onClose: w,
-    isOpen: t
+    formData: w,
+    onButtonClick: m,
+    onClose: y,
+    isOpen: d
   }) => {
-    console.log("🔍 ConfirmationDialog rendering!", { isOpen: t, config: i });
-    const l = i.templateMetadata, g = (n) => {
-      console.log("🔥 ConfirmationDialog: Button clicked with action:", n), console.log("🔥 ConfirmationDialog: Action type:", n.type), console.log(
-        "🔥 ConfirmationDialog: Action details:",
-        JSON.stringify(n, null, 2)
-      ), d(n), console.log("🔥 ConfirmationDialog: onButtonClick called");
+    const o = i.templateMetadata, p = (a) => {
+      m(a);
     }, r = (() => {
-      if (!l?.showIcon) return null;
-      switch (l?.iconType) {
+      if (!o?.showIcon) return null;
+      switch (o?.iconType) {
         case "warning":
-          return /* @__PURE__ */ o(N, { className: e.iconWarning });
+          return /* @__PURE__ */ e(D, { className: n.iconWarning });
         case "question":
-          return /* @__PURE__ */ o(m, { className: e.iconInfo });
+          return /* @__PURE__ */ e(s, { className: n.iconInfo });
         case "info":
-          return /* @__PURE__ */ o(D, { className: e.iconInfo });
+          return /* @__PURE__ */ e(N, { className: n.iconInfo });
         default:
-          return /* @__PURE__ */ o(m, { className: e.iconInfo });
+          return /* @__PURE__ */ e(s, { className: n.iconInfo });
       }
     })();
-    return /* @__PURE__ */ o(h, { open: t, onOpenChange: () => !1, children: /* @__PURE__ */ a(u, { className: e.dialogContent, children: [
-      /* @__PURE__ */ o(C, { children: r ? /* @__PURE__ */ a("div", { className: e.iconRow, children: [
-        /* @__PURE__ */ o("div", { className: e.iconCircle, children: r }),
-        /* @__PURE__ */ a("div", { children: [
-          /* @__PURE__ */ o(c, { children: i.title }),
-          /* @__PURE__ */ o(s, { className: e.descriptionSpaced, children: i.content })
+    return /* @__PURE__ */ e(u, { open: d, onOpenChange: () => !1, children: /* @__PURE__ */ t(g, { className: n.dialogContent, children: [
+      /* @__PURE__ */ e(C, { children: r ? /* @__PURE__ */ t("div", { className: n.iconRow, children: [
+        /* @__PURE__ */ e("div", { className: n.iconCircle, children: r }),
+        /* @__PURE__ */ t("div", { children: [
+          /* @__PURE__ */ e(l, { children: i.title }),
+          /* @__PURE__ */ e(c, { className: n.descriptionSpaced, children: i.content })
         ] })
-      ] }) : /* @__PURE__ */ a(f, { children: [
-        /* @__PURE__ */ o(c, { children: i.title }),
-        /* @__PURE__ */ o(s, { children: i.content })
+      ] }) : /* @__PURE__ */ t(h, { children: [
+        /* @__PURE__ */ e(l, { children: i.title }),
+        /* @__PURE__ */ e(c, { children: i.content })
       ] }) }),
-      /* @__PURE__ */ o("div", { className: e.buttonRow, children: i.buttons.map((n) => /* @__PURE__ */ o(
-        p,
+      /* @__PURE__ */ e("div", { className: n.buttonRow, children: i.buttons.map((a) => /* @__PURE__ */ e(
+        f,
         {
-          variant: n.variant === "danger" ? "destructive" : n.variant === "secondary" ? "outline" : "default",
-          onClick: () => g(n.action),
-          className: e.minWidthButton,
-          children: n.label
+          variant: a.variant === "danger" ? "destructive" : a.variant === "secondary" ? "outline" : "default",
+          onClick: () => p(a.action),
+          className: n.minWidthButton,
+          children: a.label
         },
-        n.id
+        a.id
       )) })
     ] }) });
   }
 );
-y.displayName = "ConfirmationDialog";
+I.displayName = "ConfirmationDialog";
 export {
-  y as ConfirmationDialog,
-  y as default
+  I as ConfirmationDialog,
+  I as default
 };