@digiform/wizard 0.2.18 → 0.3.1

package/wizard/src/features/form-runtime/config/templateLoader.js

@@ -1,6 +1,6 @@
 "use client";
 /* empty css                               */
-import { isGenericTemplate as y, isTeamTemplate as b } from "../../../../../ui/src/lib/utils/templateUtils.js";
+import { isGenericTemplate as v, isTeamTemplate as h } from "../../../../../ui/src/lib/utils/templateUtils.js";
 async function m() {
   try {
     const { templateStorageService: e } = await import("@formbuilder/builder");
@@ -9,22 +9,22 @@ async function m() {
     return console.warn("Template storage service not available:", e), null;
   }
 }
-async function u() {
+async function y() {
   try {
     const e = await m();
     if (!e) return;
     if (!e.isReady()) {
-      const r = await fetch("/form.config.json");
-      if (r.ok) {
-        const t = (await r.json()).storage?.paths?.templates;
-        t && await e.initialize(t);
+      const i = await fetch("/form.config.json");
+      if (i.ok) {
+        const r = (await i.json()).storage?.paths?.templates;
+        r && await e.initialize(r);
       }
     }
   } catch (e) {
     console.warn("Failed to initialize template storage service:", e);
   }
 }
-function f(e) {
+function d(e) {
   return {
     metadata: e.metadata,
     stepsData: e.stepsData || [],
@@ -40,7 +40,7 @@ function f(e) {
     }
   };
 }
-const p = /* @__PURE__ */ new Map(), o = {
+const f = /* @__PURE__ */ new Map(), c = {
   "generic-contact-information": async () => {
     const e = await fetch(
       "/src/packages/form-wizard/admin/templates/generic/contact-information.json"
@@ -82,100 +82,100 @@ const p = /* @__PURE__ */ new Map(), o = {
     return e.json();
   }
 };
-async function v(e) {
-  if (p.has(e))
-    return p.get(e);
+async function b(e) {
+  if (f.has(e))
+    return f.get(e);
   try {
-    let r;
-    if (y(e)) {
-      const i = o[e];
-      if (!i) {
-        const s = Object.keys(o);
+    let i;
+    if (v(e)) {
+      const a = c[e];
+      if (!a) {
+        const o = Object.keys(c);
         throw new Error(
-          `Generic template '${e}' not found. Available generic templates: ${s.join(", ")}`
+          `Generic template '${e}' not found. Available generic templates: ${o.join(", ")}`
         );
       }
-      const t = await i();
-      r = f(
-        t
+      const r = await a();
+      i = d(
+        r
       );
-    } else if (b(e)) {
-      await u();
-      const i = await m();
-      if (!i)
+    } else if (h(e)) {
+      await y();
+      const a = await m();
+      if (!a)
         throw new Error(
           `Team template '${e}' could not be loaded: template storage service is not available`
         );
-      const t = await i.loadTemplate(
+      const r = await a.loadTemplate(
         e,
         "team"
       );
-      if (!t.success)
+      if (!r.success)
         throw new Error(
-          `Team template '${e}' not found: ${"error" in t && t.error?.message || "Unknown error"}`
+          `Team template '${e}' not found: ${"error" in r && r.error?.message || "Unknown error"}`
         );
-      r = f(t.data);
+      i = d(r.data);
     } else {
-      const i = o[e];
-      if (i) {
-        const t = await i();
-        r = f(
-          t
+      const a = c[e];
+      if (a) {
+        const r = await a();
+        i = d(
+          r
         );
       } else {
-        const t = Object.keys(o);
+        const r = Object.keys(c);
         throw new Error(
-          `Template '${e}' not found. Available generic templates: ${t.join(", ")}`
+          `Template '${e}' not found. Available generic templates: ${r.join(", ")}`
         );
       }
     }
-    if (!r.metadata || !Array.isArray(r.stepsData))
+    if (!i.metadata || !Array.isArray(i.stepsData))
       throw new Error(
         `Invalid template structure for template: ${e}. Templates must have metadata and stepsData array.`
       );
-    return p.set(e, r), r;
-  } catch (r) {
+    return f.set(e, i), i;
+  } catch (i) {
     throw new Error(
-      `Failed to load template '${e}': ${r instanceof Error ? r.message : "Unknown error"}`
+      `Failed to load template '${e}': ${i instanceof Error ? i.message : "Unknown error"}`
     );
   }
 }
-async function S(e, r, i) {
+async function E(e, i, a) {
   console.log(
     "Resolving template step:",
     e,
     "stepIndex:",
-    i
+    a
   );
-  const t = await v(e.templateId);
-  console.log("Loaded template:", t);
-  let s;
-  if (t.stepsData && Array.isArray(t.stepsData) && t.stepsData.length > 0)
-    i !== void 0 && i >= 0 && i < t.stepsData.length ? (s = t.stepsData[i], console.log(`Using template data for step ${i}:`, s)) : (s = t.stepsData[0], console.warn(
-      `Invalid stepIndex ${i} for template, using first step`
+  const r = await b(e.templateId);
+  console.log("Loaded template:", r);
+  let o;
+  if (r.stepsData && Array.isArray(r.stepsData) && r.stepsData.length > 0)
+    a !== void 0 && a >= 0 && a < r.stepsData.length ? (o = r.stepsData[a], console.log(`Using template data for step ${a}:`, o)) : (o = r.stepsData[0], console.warn(
+      `Invalid stepIndex ${a} for template, using first step`
     ));
   else
     throw new Error(`Template ${e.templateId} has no steps data`);
-  const h = s.sections?.map((w) => ({
+  const u = o.sections?.map((w) => ({
     ...w,
-    components: w.components.map((a) => {
-      const g = ((c) => `comp-${e.id}-${a.id || c}`)(a.id), n = {
+    components: w.components.map((t) => {
+      const g = ((l) => `comp-${e.id}-${t.id || l}`)(t.id), s = {
         id: g,
-        type: a.type,
+        type: t.type,
         properties: {
           // Use properties from component.properties if it exists, otherwise fallback to root level
-          label: a.properties?.label || a.label || "",
-          placeholder: a.properties?.placeholder || a.placeholder || "",
-          description: a.properties?.description || a.description || "",
-          required: a.properties?.required || a.required || !1,
-          disabled: a.properties?.disabled || a.disabled || !1,
-          readOnly: a.properties?.readOnly || a.readOnly || !1,
-          invalid: a.properties?.invalid || !1,
+          label: t.properties?.label || t.label || "",
+          placeholder: t.properties?.placeholder || t.placeholder || "",
+          description: t.properties?.description || t.description || "",
+          required: t.properties?.required || t.required || !1,
+          disabled: t.properties?.disabled || t.disabled || !1,
+          readOnly: t.properties?.readOnly || t.readOnly || !1,
+          invalid: t.properties?.invalid || !1,
           // Add type-specific properties
-          type: a.properties?.type || a.type,
+          type: t.properties?.type || t.type,
           // Copy all other properties from component.properties if it exists
-          ...a.properties && Object.keys(a.properties).reduce(
-            (c, d) => ([
+          ...t.properties && Object.keys(t.properties).reduce(
+            (l, p) => ([
               "label",
               "placeholder",
               "description",
@@ -184,82 +184,52 @@ async function S(e, r, i) {
               "readOnly",
               "invalid",
               "type"
-            ].includes(d) || (c[d] = a.properties[d]), c),
+            ].includes(p) || (l[p] = t.properties[p]), l),
             {}
           )
         },
         // Copy validation if it exists
-        ...a.validation && { validation: a.validation }
-      }, l = e.componentOverrides?.[g];
-      return l ? {
+        ...t.validation && { validation: t.validation }
+      }, n = e.componentOverrides?.[g];
+      return n ? {
+        ...s,
         ...n,
-        ...l,
         // Merge properties deeply to allow partial property updates
         properties: {
-          ...n.properties,
-          ...l.properties
+          ...s.properties,
+          ...n.properties
         },
         // Merge validation deeply if both exist
-        ...n.validation && l.validation && {
+        ...s.validation && n.validation && {
           validation: {
-            ...n.validation,
-            ...l.validation
+            ...s.validation,
+            ...n.validation
           }
         }
-      } : n;
+      } : s;
     })
   }));
   return {
     id: e.id,
     // Use the step ID from the form config
-    title: e.title || s.title,
-    displayTitle: s.displayTitle,
-    showStepNumber: e.showStepNumber !== void 0 ? e.showStepNumber : s.showStepNumber,
-    sections: h,
+    title: e.title || o.title,
+    displayTitle: o.displayTitle,
+    showStepNumber: e.showStepNumber !== void 0 ? e.showStepNumber : o.showStepNumber,
+    sections: u,
     navigation: {
       // Use default navigation, then template navigation if available, then step override
-      ...r,
-      ...s.navigation,
+      ...i,
+      ...o.navigation,
       // Cast since navigation might not exist in Omit type
       ...e.navigation
     },
     // Copy actions if they exist
-    ...s.actions && {
-      actions: s.actions
+    ...o.actions && {
+      actions: o.actions
     }
   };
 }
-async function E(e) {
-  return (await v(e)).metadata;
-}
-async function D() {
-  const e = Object.keys(o);
-  try {
-    await u();
-    const r = await m();
-    if (r) {
-      const i = await r.listTemplates("team");
-      if (i.success && i.data) {
-        const t = i.data.map((s) => s.metadata.id);
-        return [...e, ...t];
-      }
-    }
-  } catch (r) {
-    console.warn("Failed to load team templates:", r);
-  }
-  return e;
-}
-function O() {
-  return Object.keys(o);
-}
-function A() {
-  p.clear();
-}
 export {
-  A as clearTemplateCache,
-  O as getAvailableGenericTemplates,
-  D as getAvailableTemplates,
-  E as getTemplateMetadata,
-  v as loadTemplate,
-  S as resolveTemplateStep
+  b as loadTemplate,
+  E as resolveTemplateStep
 };

package/wizard/src/features/form-runtime/hooks/useComponentTriggers.js

@@ -1,102 +1,78 @@
 "use client";
-import { useFormMachine as M } from "../../state-management/machines/useFormMachine.js";
-import { useRef as T, useCallback as n } from "react";
-const S = ({
+import { useRef as C, useCallback as g } from "react";
+import { useFormMachine as x } from "../../state-management/machines/useFormMachine.js";
+const M = ({
   componentId: e,
-  initialValue: o,
-  onValueChange: l
+  initialValue: l,
+  onValueChange: i
 }) => {
-  const [, , f] = M(), {
-    evaluateComponentTriggers: a,
-    setComponentOriginalValue: i,
+  const [, , T] = x(), {
+    evaluateComponentTriggers: n,
+    setComponentOriginalValue: u,
     getComponentAlerts: h,
-    dismissComponentAlert: u,
+    dismissComponentAlert: c,
     hasComponentTriggers: A,
     hasComponentActions: m,
-    getComponentTriggerState: F
-  } = f, C = T(!1), g = T(o);
-  o !== void 0 && !C.current && (i(e, o), g.current = o, C.current = !0);
-  const t = n(
-    (r, c) => {
+    getComponentTriggerState: p
+  } = T, f = C(!1), o = C(l);
+  l !== void 0 && !f.current && (u(e, l), o.current = l, f.current = !0);
+  const t = g(
+    (r, a) => {
       console.log(
         `🧪 [useComponentTriggers] evaluateTriggers called for ${e}:`,
         {
           eventType: r,
-          value: c,
-          evaluateComponentTriggers: !!a
+          value: a,
+          evaluateComponentTriggers: !!n
         }
-      ), a(e, r, c);
+      ), n(e, r, a);
     },
-    [e, a]
-  ), p = n(
-    (r, c = "api_populated") => {
-      i(e, r, c), g.current = r;
+    [e, n]
+  ), $ = g(
+    (r, a = "api_populated") => {
+      u(e, r, a), o.current = r;
     },
-    [e, i]
-  ), $ = h(e), b = n(
+    [e, u]
+  ), b = h(e), R = g(
     (r) => {
-      u(e, r);
+      c(e, r);
     },
-    [e, u]
-  ), s = A(e), B = m(e), O = F(e), R = n(
+    [e, c]
+  ), s = A(e), F = m(e), O = p(e), S = g(
     (r) => {
       console.log(
         `🧪 [useComponentTriggers] handleValueChange called for ${e}:`,
         {
           value: r,
-          oldValue: g.current,
+          oldValue: o.current,
           hasTriggers: s,
-          onValueChange: !!l
+          onValueChange: !!i
         }
-      ), g.current = r, l && l(r), s ? (console.log(
+      ), o.current = r, i && i(r), s ? (console.log(
         `🧪 [useComponentTriggers] About to call evaluateTriggers for ${e}`
       ), t("valueChange", r)) : console.log(
         `🧪 [useComponentTriggers] hasTriggers is false for ${e}`
       );
     },
-    [t, s, l, e]
-  ), V = n(() => {
-    s && t("focus", g.current);
-  }, [t, s]), d = n(() => {
-    s && t("blur", g.current);
+    [t, s, i, e]
+  ), k = g(() => {
+    s && t("focus", o.current);
+  }, [t, s]), v = g(() => {
+    s && t("blur", o.current);
   }, [t, s]);
   return {
     evaluateTriggers: t,
-    setOriginalValue: p,
-    alerts: $,
-    dismissAlert: b,
+    setOriginalValue: $,
+    alerts: b,
+    dismissAlert: R,
     hasTriggers: s,
-    hasActions: B,
+    hasActions: F,
     triggerState: O,
-    handleValueChange: R,
-    handleFocus: V,
-    handleBlur: d
-  };
-}, x = (e, o) => {
-  const {
-    handleValueChange: l,
-    handleFocus: f,
-    handleBlur: a,
-    alerts: i,
-    dismissAlert: h,
-    setOriginalValue: u
-  } = S({
-    componentId: e,
-    initialValue: o
-  });
-  return {
-    // Event handlers to attach to form fields
-    onChange: l,
-    onFocus: f,
-    onBlur: a,
-    // Alert management
-    alerts: i,
-    dismissAlert: h,
-    // For setting original value after API population
-    setOriginalValue: u
+    handleValueChange: S,
+    handleFocus: k,
+    handleBlur: v
   };
 };
 export {
-  S as useComponentTriggers,
-  x as useFieldTriggerMonitor
+  M as useComponentTriggers
 };

package/wizard/src/features/form-runtime/hooks/useFieldEventHandlers.js

@@ -1,8 +1,8 @@
 "use client";
-import { useFormMachine as B } from "../../state-management/machines/useFormMachine.js";
 import { useCallback as g } from "react";
 import { markFieldAsUserInteracted as u } from "../utils/validationUX.js";
-import { useComponentTriggers as F } from "./useComponentTriggers.js";
+import { useComponentTriggers as B } from "./useComponentTriggers.js";
+import { useFormMachine as F } from "../../state-management/machines/useFormMachine.js";
 const E = ({
   componentId: s,
   hasIsDirtyTriggers: r,
@@ -10,7 +10,7 @@ const E = ({
   getEnhancedIsDirty: n,
   resetValidationState: f
 }) => {
-  const [, , d] = B(), { setData: h } = d, t = F({ componentId: s }), C = g(
+  const [, , d] = F(), { setData: h } = d, t = B({ componentId: s }), C = g(
     (a) => (e) => {
       const l = a.state.value;
       if (console.log(

package/wizard/src/features/form-runtime/hooks/useFormFieldState.js

@@ -1,12 +1,12 @@
 "use client";
-import { useFormMachine as p } from "../../state-management/machines/useFormMachine.js";
-import { useRef as F, useCallback as u, useEffect as O } from "react";
-import { useFormContext as h } from "./useFormContext.js";
+import { useRef as F, useCallback as u, useEffect as p } from "react";
+import { useFormContext as O } from "./useFormContext.js";
+import { useFormMachine as h } from "../../state-management/machines/useFormMachine.js";
 const b = ({
   componentId: r,
   hasIsDirtyTriggers: s
 }) => {
-  const [V] = p(), t = h(), a = F(!1), c = F(), d = (e) => typeof e == "string" || typeof e == "boolean" || typeof e == "number" || e === null || e === void 0, f = V.context.componentOriginalValues[r]?.value, i = d(f) ? f : void 0, g = u(() => {
+  const [V] = h(), t = O(), a = F(!1), c = F(), d = (e) => typeof e == "string" || typeof e == "boolean" || typeof e == "number" || e === null || e === void 0, f = V.context.componentOriginalValues[r]?.value, i = d(f) ? f : void 0, g = u(() => {
     if (a.current) return;
     const e = t.getFieldValue(r);
     return a.current = !0, e;
@@ -26,7 +26,7 @@ const b = ({
     (e, l) => i !== void 0 ? e !== i : l,
     [i]
   );
-  return O(() => {
+  return p(() => {
     o();
   }, [o]), {
     originalValueFromMachine: i,

package/wizard/src/features/form-runtime/utils/errorUtils.js

@@ -1,6 +1,6 @@
 "use client";
-import { z as a } from "zod";
-const u = {
+import { z as s } from "zod";
+const l = {
   required: 10,
   minLength: 8,
   maxLength: 7,
@@ -10,19 +10,19 @@ const u = {
   email: 3,
   custom: 2,
   default: 1
-}, i = (t) => {
+}, e = (t) => {
   if (typeof t == "string")
     return t.includes("verplicht") || t.includes("required") ? "required" : t.includes("minimaal") && t.includes("tekens") ? "minLength" : t.includes("maximaal") && t.includes("tekens") ? "maxLength" : t.includes("minimaal") && !t.includes("tekens") ? "min" : t.includes("maximaal") && !t.includes("tekens") ? "max" : t.includes("formaat") || t.includes("format") || t.includes("pattern") ? "pattern" : t.includes("e-mail") || t.includes("email") ? "email" : "default";
-  if (t instanceof a.ZodError) {
-    const e = t.errors[0];
-    if (e?.code)
-      switch (e.code) {
+  if (t instanceof s.ZodError) {
+    const i = t.errors[0];
+    if (i?.code)
+      switch (i.code) {
         case "too_small":
-          return e.type === "string" ? "minLength" : "min";
+          return i.type === "string" ? "minLength" : "min";
         case "too_big":
-          return e.type === "string" ? "maxLength" : "max";
+          return i.type === "string" ? "maxLength" : "max";
         case "invalid_string":
-          return e.validation === "email" ? "email" : "pattern";
+          return i.validation === "email" ? "email" : "pattern";
         case "custom":
           return "custom";
         default:
@@ -30,27 +30,27 @@ const u = {
       }
   }
   if (typeof t == "object" && t !== null && "code" in t) {
-    const e = t.code;
-    if (e === "too_small") return "minLength";
-    if (e === "too_big") return "maxLength";
-    if (e === "invalid_string") return "email";
+    const i = t.code;
+    if (i === "too_small") return "minLength";
+    if (i === "too_big") return "maxLength";
+    if (i === "invalid_string") return "email";
   }
   return "default";
-}, s = (t) => {
+}, a = (t) => {
   if (t == null) return "";
   if (typeof t == "string")
     return t;
-  if (t instanceof a.ZodError)
-    return t.errors.map((e) => e.message).join(", ");
+  if (t instanceof s.ZodError)
+    return t.errors.map((i) => i.message).join(", ");
   if (typeof t == "object" && t !== null) {
     if ("message" in t && typeof t.message == "string")
       return t.message;
     if ("_errors" in t && Array.isArray(t._errors))
       return t._errors.filter(Boolean).join(", ");
     if ("issues" in t && Array.isArray(t.issues))
-      return t.issues.map((e) => e.message || "Validation error").join(", ");
+      return t.issues.map((i) => i.message || "Validation error").join(", ");
     if ("error" in t)
-      return s(t.error);
+      return a(t.error);
     try {
       if (Object.keys(t).length > 0) {
         for (const n of ["message", "msg", "error", "description"])
@@ -61,33 +61,22 @@ const u = {
     }
   }
   try {
-    const e = JSON.stringify(t);
-    if (e.length < 200)
-      return e;
+    const i = JSON.stringify(t);
+    if (i.length < 200)
+      return i;
   } catch {
   }
   return "Validation error occurred";
-}, c = (t) => t.filter((e) => e != null).map((e) => s(e)).filter((e) => e.length > 0), m = (t) => {
+}, f = (t) => {
   if (!t || t.length === 0) return "";
-  const e = t.filter((n) => n != null).map((n) => ({
-    message: s(n),
-    type: i(n),
-    priority: u[i(n)]
+  const i = t.filter((n) => n != null).map((n) => ({
+    message: a(n),
+    type: e(n),
+    priority: l[e(n)]
   })).filter((n) => n.message.length > 0);
-  return e.length === 0 ? "" : (e.sort((n, l) => l.priority - n.priority), e[0].message);
-}, g = (t) => c(t)[0] || "", d = (t) => t.map((e, n) => ({
-  index: n,
-  type: typeof e,
-  constructor: e?.constructor?.name,
-  raw: e,
-  parsed: s(e),
-  validationType: i(e),
-  priority: u[i(e)]
-}));
+  return i.length === 0 ? "" : (i.sort((n, u) => u.priority - n.priority), i[0].message);
+};
 export {
-  d as getErrorDebugInfo,
-  g as getFirstErrorMessage,
-  m as getMostRelevantError,
-  c as parseAllErrors,
-  s as parseError
+  f as getMostRelevantError,
+  a as parseError
 };