@digiform/wizard 0.3.0 → 0.3.2

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

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

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

@@ -1,61 +1,47 @@
 "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";
-const E = ({
-  componentId: s,
-  hasIsDirtyTriggers: r,
-  originalValueFromMachine: i,
+import { useCallback as m } from "react";
+import { markFieldAsUserInteracted as o } from "../utils/validationUX.js";
+import { useComponentTriggers as B } from "./useComponentTriggers.js";
+import { useFormMachine as k } from "../../state-management/machines/useFormMachine.js";
+const b = ({
+  componentId: r,
+  hasIsDirtyTriggers: i,
+  originalValueFromMachine: l,
   getEnhancedIsDirty: n,
   resetValidationState: f
 }) => {
-  const [, , d] = B(), { setData: h } = d, t = F({ componentId: s }), C = g(
-    (a) => (e) => {
-      const l = a.state.value;
-      if (console.log(
-        `🔍 [useFieldEventHandlers] handleChange for ${s}:`,
-        {
-          oldValue: l,
-          newValue: e,
-          valueType: typeof e,
-          isSameValue: l === e
-        }
-      ), u(s), a.handleChange(e), console.log(
-        `🔍 [useFieldEventHandlers] AFTER field.handleChange for ${s}:`,
-        {
-          fieldStateValue: a.state.value,
-          fieldStateMeta: a.state.meta
-        }
-      ), l !== e && h(s, e), f(), r && i !== void 0) {
-        const c = n(
-          l,
-          a.state.meta.isDirty
-        ), o = e !== i;
-        o !== c && (o ? t.evaluateTriggers("valueChange", e) : t.dismissAlert());
+  const [, , u] = k(), { setData: h } = u, s = B({ componentId: r }), C = m(
+    (t) => (e) => {
+      const a = t.state.value;
+      if (o(r), t.handleChange(e), a !== e && h(r, e), f(), i && l !== void 0) {
+        const d = n(
+          a,
+          t.state.meta.isDirty
+        ), g = e !== l;
+        g !== d && (g ? s.evaluateTriggers("valueChange", e) : s.dismissAlert());
       }
-      t.hasTriggers && !r && l !== e && t.handleValueChange(e);
+      s.hasTriggers && !i && a !== e && s.handleValueChange(e);
     },
     [
-      s,
+      r,
       h,
       f,
-      r,
       i,
+      l,
       n,
-      t
+      s
     ]
-  ), m = g(
-    (a) => () => {
-      u(s), a.handleBlur(), t.hasTriggers && t.handleBlur();
+  ), c = m(
+    (t) => () => {
+      o(r), t.handleBlur(), s.hasTriggers && s.handleBlur();
     },
-    [s, t]
+    [r, s]
   );
   return {
     handleChange: C,
-    handleBlur: m
+    handleBlur: c
   };
 };
 export {
-  E as useFieldEventHandlers
+  b as useFieldEventHandlers
 };

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/hooks/useValidationEvents.js

@@ -1,37 +1,34 @@
 "use client";
-import { useState as s, useRef as u, useCallback as c, useEffect as f } from "react";
+import { useState as c, useCallback as f, useMemo as u, useEffect as r } from "react";
+import { useFormMachine as V } from "../../state-management/machines/useFormMachine.js";
 const w = ({
-  componentId: t
+  componentId: e
 }) => {
-  const [d, i] = s(!1), a = u(null), o = c(() => {
-    i(!1);
-  }, []);
-  return f(() => {
-    const r = (n) => {
-      const { fieldId: e } = n.detail;
-      e === t && i(!0);
-    }, l = (n) => {
-      const { fieldIds: e } = n.detail;
-      Array.isArray(e) && e.includes(t) && i(!0);
+  const [i] = V(), [n, t] = c(!1), s = f(() => {
+    t(!1);
+  }, []), a = u(
+    () => i.context.forcedValidationFields.includes(e),
+    [i.context.forcedValidationFields, e]
+  );
+  return r(() => {
+    a && t(!0);
+  }, [a]), r(() => {
+    const o = (d) => {
+      const { fieldId: l } = d.detail;
+      l === e && t(!0);
     };
-    return a.current = r, window.addEventListener(
+    return window.addEventListener(
       "triggerFieldValidation",
-      r
-    ), window.addEventListener(
-      "triggerStepValidation",
-      l
+      o
     ), () => {
       window.removeEventListener(
         "triggerFieldValidation",
-        r
-      ), window.removeEventListener(
-        "triggerStepValidation",
-        l
-      ), a.current = null;
+        o
+      );
     };
-  }, [t]), {
-    forceShowValidation: d,
-    resetValidationState: o
+  }, [e]), {
+    forceShowValidation: n,
+    resetValidationState: s
   };
 };
 export {

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
 };

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

@@ -1,50 +1,39 @@
 "use client";
-function n(u, f = {}) {
-  const t = u, { updatedFields: a, debug: r = !1 } = f;
-  r && console.log("🔄 [formDirtyStateSync] Starting dirty state reset:", {
-    updatedFields: a,
-    formState: {
-      isDirty: t.state.isDirty,
-      dirtyFields: t.state.dirtyFields,
-      values: t.state.values
-    }
-  });
+function n(a, u = {}) {
+  const e = a, { updatedFields: c, debug: o = !1 } = u;
   try {
-    const i = Object.keys(t.state.values), c = a || i;
-    r && console.log("🔄 [formDirtyStateSync] Fields to reset:", c), c.forEach((e) => {
-      const s = t.getFieldValue(e), o = t.getFieldMeta(e);
-      if (r && console.log(`🔄 [formDirtyStateSync] Resetting field ${e}:`, {
-        currentValue: s,
-        isDirtyBefore: o?.isDirty,
-        isTouchedBefore: o?.isTouched,
-        isDefaultValueBefore: o?.isDefaultValue
-      }), t.resetField(e), s != null && s !== "" && t.setFieldValue(e, s, {
+    const s = Object.keys(e.state.values);
+    (c || s).forEach((t) => {
+      const r = e.getFieldValue(t), i = e.getFieldMeta(t);
+      if (o && console.log(`[formDirtyStateSync] Field ${t} before reset:`, {
+        currentValue: r,
+        isDirtyBefore: i?.isDirty,
+        isTouchedBefore: i?.isTouched,
+        isDefaultValueBefore: i?.isDefaultValue
+      }), e.resetField(t), r != null && r !== "" && e.setFieldValue(t, r, {
         dontUpdateMeta: !0
         // This prevents updating isDirty/isTouched flags
-      }), r) {
-        const l = t.getFieldMeta(e);
-        console.log(
-          `✅ [formDirtyStateSync] Field ${e} reset complete:`,
-          {
-            isDirtyAfter: l?.isDirty,
-            isTouchedAfter: l?.isTouched,
-            isDefaultValueAfter: l?.isDefaultValue,
-            currentValueAfter: t.getFieldValue(e)
-          }
-        );
+      }), o) {
+        const l = e.getFieldMeta(t);
+        console.log(`[formDirtyStateSync] Field ${t} reset complete:`, {
+          isDirtyAfter: l?.isDirty,
+          isTouchedAfter: l?.isTouched,
+          isDefaultValueAfter: l?.isDefaultValue,
+          currentValueAfter: e.getFieldValue(t)
+        });
       }
-    }), r && console.log("✅ [formDirtyStateSync] Dirty state reset complete:", {
+    }), o && console.log("[formDirtyStateSync] Reset complete:", {
       formStateAfter: {
-        isDirty: t.state.isDirty,
-        dirtyFields: t.state.dirtyFields,
-        values: t.state.values
+        isDirty: e.state.isDirty,
+        dirtyFields: e.state.dirtyFields,
+        values: e.state.values
       }
     });
-  } catch (i) {
+  } catch (s) {
     throw console.error(
       "❌ [formDirtyStateSync] Error during dirty state reset:",
-      i
-    ), i;
+      s
+    ), s;
   }
 }
 export {

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

@@ -39,13 +39,13 @@ class n {
    * Debug level logging
    */
   debug(e, o) {
-    this.config.enabled && console.log(`🔧 [FormField] ${e}`, o);
+    this.config.enabled && console.log(`[FormField] ${e}`, ...o !== void 0 ? [o] : []);
   }
   /**
    * Info level logging
    */
   info(e, o) {
-    this.config.enabled && console.log(`ℹ️ [FormField] ${e}`, o);
+    this.config.enabled && console.log(`[FormField] ${e}`, ...o !== void 0 ? [o] : []);
   }
   /**
    * Warning level logging
@@ -69,43 +69,43 @@ class n {
    * Validation specific logging
    */
   validation(e, o) {
-    this.config.enabled && console.log(`🔍 [FormField] ${e}`, o);
+    this.config.enabled && console.log(`[FormField:validation] ${e}`, ...o !== void 0 ? [o] : []);
   }
   /**
    * State management specific logging
    */
   state(e, o) {
-    this.config.enabled && console.log(`📋 [FormField] ${e}`, o);
+    this.config.enabled && console.log(`[FormField:state] ${e}`, ...o !== void 0 ? [o] : []);
   }
   /**
    * Component lifecycle logging
    */
   lifecycle(e, o) {
-    this.config.enabled && console.log(`🏁 [FormField] ${e}`, o);
+    this.config.enabled && console.log(`[FormField:lifecycle] ${e}`, ...o !== void 0 ? [o] : []);
   }
   /**
    * Change event logging
    */
   change(e, o) {
-    this.config.enabled && console.log(`🔄 [FormField] ${e}`, o);
+    this.config.enabled && console.log(`[FormField:change] ${e}`, ...o !== void 0 ? [o] : []);
   }
   /**
    * Test/experimental logging
    */
   test(e, o) {
-    this.config.enabled && console.log(`🧪 [FormField] ${e}`, o);
+    this.config.enabled && console.log(`[FormField:test] ${e}`, ...o !== void 0 ? [o] : []);
   }
 }
-const i = new n(), l = () => i.setEnabled(!0), t = () => i.setEnabled(!1), d = () => i.isEnabled();
+const i = new n(), l = () => i.setEnabled(!0), d = () => i.setEnabled(!1), t = () => i.isEnabled();
 typeof window < "u" && (window.formFieldLogger = {
   enable: l,
-  disable: t,
-  isEnabled: d,
+  disable: d,
+  isEnabled: t,
   logger: i
 });
 export {
-  t as disableFormFieldLogging,
+  d as disableFormFieldLogging,
   l as enableFormFieldLogging,
-  d as isFormFieldLoggingEnabled,
+  t as isFormFieldLoggingEnabled,
   i as logger
 };