@digiform/wizard 0.2.10 → 0.2.16

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

@@ -0,0 +1,61 @@
+"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,
+  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());
+      }
+      t.hasTriggers && !r && l !== e && t.handleValueChange(e);
+    },
+    [
+      s,
+      h,
+      f,
+      r,
+      i,
+      n,
+      t
+    ]
+  ), m = g(
+    (a) => () => {
+      u(s), a.handleBlur(), t.hasTriggers && t.handleBlur();
+    },
+    [s, t]
+  );
+  return {
+    handleChange: C,
+    handleBlur: m
+  };
+};
+export {
+  E as useFieldEventHandlers
+};

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

@@ -0,0 +1,13 @@
+"use client";
+import { createContext as t, useContext as e } from "react";
+const r = t(null), s = r.Provider, m = () => {
+  const o = e(r);
+  if (!o)
+    throw new Error("useFormContext must be used within a FormProvider");
+  return o;
+};
+export {
+  r as FormContext,
+  s as FormProvider,
+  m as useFormContext
+};

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

@@ -0,0 +1,40 @@
+"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";
+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(() => {
+    if (a.current) return;
+    const e = t.getFieldValue(r);
+    return a.current = !0, e;
+  }, [r, t]), o = u(() => {
+    const e = i, l = c.current;
+    if (s && e !== void 0 && e !== l)
+      try {
+        const n = t.getFieldValue(r);
+        t.resetField(r), n != null && n !== "" && t.setFieldValue(r, n, {
+          dontUpdateMeta: !0
+        });
+      } catch (n) {
+        console.error(`Error resetting form state for ${r}:`, n);
+      }
+    c.current = e;
+  }, [i, r, t, s]), m = u(
+    (e, l) => i !== void 0 ? e !== i : l,
+    [i]
+  );
+  return O(() => {
+    o();
+  }, [o]), {
+    originalValueFromMachine: i,
+    initializeField: g,
+    handleFormReset: o,
+    getEnhancedIsDirty: m
+  };
+};
+export {
+  b as useFormFieldState
+};

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

@@ -0,0 +1,39 @@
+"use client";
+import { useState as s, useRef as u, useCallback as c, useEffect as f } from "react";
+const w = ({
+  componentId: t
+}) => {
+  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);
+    };
+    return a.current = r, window.addEventListener(
+      "triggerFieldValidation",
+      r
+    ), window.addEventListener(
+      "triggerStepValidation",
+      l
+    ), () => {
+      window.removeEventListener(
+        "triggerFieldValidation",
+        r
+      ), window.removeEventListener(
+        "triggerStepValidation",
+        l
+      ), a.current = null;
+    };
+  }, [t]), {
+    forceShowValidation: d,
+    resetValidationState: o
+  };
+};
+export {
+  w as useValidationEvents
+};

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

@@ -0,0 +1,22 @@
+"use client";
+import { renderDefaultDisplayValue as a, renderDropdownDisplayValue as n, renderRadioGroupDisplayValue as t, renderCheckboxDisplayValue as u, renderTextDisplayValue as l } from "../components/displayValue/displayValue.js";
+const s = (e) => {
+  switch (e) {
+    case "text":
+    case "email":
+    case "number":
+      return l;
+    case "checkbox":
+      return u;
+    case "radioGroup":
+      return t;
+    case "dropdown":
+      return n;
+    default:
+      return a;
+  }
+}, p = (e, r) => s(e.type)(e, r);
+export {
+  s as getDisplayValueRenderer,
+  p as renderComponentDisplayValue
+};

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

@@ -0,0 +1,93 @@
+"use client";
+import { z as a } from "zod";
+const u = {
+  required: 10,
+  minLength: 8,
+  maxLength: 7,
+  min: 6,
+  max: 5,
+  pattern: 4,
+  email: 3,
+  custom: 2,
+  default: 1
+}, i = (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) {
+        case "too_small":
+          return e.type === "string" ? "minLength" : "min";
+        case "too_big":
+          return e.type === "string" ? "maxLength" : "max";
+        case "invalid_string":
+          return e.validation === "email" ? "email" : "pattern";
+        case "custom":
+          return "custom";
+        default:
+          return "default";
+      }
+  }
+  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";
+  }
+  return "default";
+}, s = (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 (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(", ");
+    if ("error" in t)
+      return s(t.error);
+    try {
+      if (Object.keys(t).length > 0) {
+        for (const n of ["message", "msg", "error", "description"])
+          if (n in t && typeof t[n] == "string")
+            return t[n];
+      }
+    } catch {
+    }
+  }
+  try {
+    const e = JSON.stringify(t);
+    if (e.length < 200)
+      return e;
+  } catch {
+  }
+  return "Validation error occurred";
+}, c = (t) => t.filter((e) => e != null).map((e) => s(e)).filter((e) => e.length > 0), m = (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)]
+  })).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)]
+}));
+export {
+  d as getErrorDebugInfo,
+  g as getFirstErrorMessage,
+  m as getMostRelevantError,
+  c as parseAllErrors,
+  s as parseError
+};

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

@@ -0,0 +1,17 @@
+"use client";
+const n = (r) => !(r.type === "button" || r.type === "submit" || r.type === "reset" || r.type === "paragraph" || r.type === "heading" || r.type === "alert"), g = (r) => (r.triggerActions?.triggers || r.triggers || []).some((e) => e.type === "isDirty"), o = (r, t) => r == null ? !1 : t === "checkbox" ? !0 : r !== "", a = (r, t) => r && t, l = (r, t, e) => {
+  const s = r.errors || [], i = !r.isValid && s.length > 0, u = e || t.isSubmitting;
+  return {
+    fieldErrors: s,
+    isInvalid: i,
+    isSubmitAttempted: u
+  };
+}, y = (r, t, e) => r ? t && e > 0 : e > 0;
+export {
+  o as checkFieldHasValue,
+  g as checkHasIsDirtyTriggers,
+  l as getValidationDisplayState,
+  n as shouldBeFormField,
+  y as shouldShowComponentAlerts,
+  a as shouldShowDisplayMode
+};

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

@@ -0,0 +1,10 @@
+"use client";
+/* empty css                               */
+import { isFormField as r, getDefaultValue as s } from "../../../../../ui/src/lib/utils/componentUtils.js";
+const u = (i) => (i.sections ?? []).flatMap((e) => e.components).filter((e) => r(e.type)).reduce(
+  (e, t) => (e[t.id] = s(t.type), e),
+  {}
+);
+export {
+  u as buildDefaultValues
+};

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

@@ -0,0 +1,52 @@
+"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
+    }
+  });
+  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, {
+        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)
+          }
+        );
+      }
+    }), r && console.log("✅ [formDirtyStateSync] Dirty state reset complete:", {
+      formStateAfter: {
+        isDirty: t.state.isDirty,
+        dirtyFields: t.state.dirtyFields,
+        values: t.state.values
+      }
+    });
+  } catch (i) {
+    throw console.error(
+      "❌ [formDirtyStateSync] Error during dirty state reset:",
+      i
+    ), i;
+  }
+}
+export {
+  n as resetFormDirtyStateAfterApiPopulation
+};

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

@@ -0,0 +1,111 @@
+"use client";
+class n {
+  config;
+  constructor() {
+    this.config = {
+      enabled: this.getInitialEnabledState(),
+      level: "debug"
+    };
+  }
+  getInitialEnabledState() {
+    if (typeof process < "u" && process.env?.VITE_FORM_FIELD_DEBUG === "true")
+      return !0;
+    if (typeof window < "u" && window.localStorage) {
+      const e = window.localStorage.getItem("form-field-debug");
+      if (e !== null)
+        return e === "true";
+    }
+    return !1;
+  }
+  /**
+   * Enable or disable logging
+   */
+  setEnabled(e) {
+    this.config.enabled = e, typeof window < "u" && window.localStorage && window.localStorage.setItem("form-field-debug", e.toString());
+  }
+  /**
+   * Check if logging is enabled
+   */
+  isEnabled() {
+    return this.config.enabled;
+  }
+  /**
+   * Set logging level
+   */
+  setLevel(e) {
+    this.config.level = e;
+  }
+  /**
+   * Debug level logging
+   */
+  debug(e, o) {
+    this.config.enabled && console.log(`🔧 [FormField] ${e}`, o);
+  }
+  /**
+   * Info level logging
+   */
+  info(e, o) {
+    this.config.enabled && console.log(`ℹ️ [FormField] ${e}`, o);
+  }
+  /**
+   * Warning level logging
+   */
+  warn(e, o) {
+    this.config.enabled && console.warn(`⚠️ [FormField] ${e}`, o);
+  }
+  /**
+   * Error level logging (always shown regardless of enabled state)
+   */
+  error(e, o) {
+    console.error(`❌ [FormField] ${e}`, o);
+  }
+  /**
+   * Critical error logging (always shown regardless of enabled state)
+   */
+  critical(e, o) {
+    console.error(`🚨 [FormField] ${e}`, o);
+  }
+  /**
+   * Validation specific logging
+   */
+  validation(e, o) {
+    this.config.enabled && console.log(`🔍 [FormField] ${e}`, o);
+  }
+  /**
+   * State management specific logging
+   */
+  state(e, o) {
+    this.config.enabled && console.log(`📋 [FormField] ${e}`, o);
+  }
+  /**
+   * Component lifecycle logging
+   */
+  lifecycle(e, o) {
+    this.config.enabled && console.log(`🏁 [FormField] ${e}`, o);
+  }
+  /**
+   * Change event logging
+   */
+  change(e, o) {
+    this.config.enabled && console.log(`🔄 [FormField] ${e}`, o);
+  }
+  /**
+   * Test/experimental logging
+   */
+  test(e, o) {
+    this.config.enabled && console.log(`🧪 [FormField] ${e}`, o);
+  }
+}
+const i = new n(), l = () => i.setEnabled(!0), t = () => i.setEnabled(!1), d = () => i.isEnabled();
+typeof window < "u" && (window.formFieldLogger = {
+  enable: l,
+  disable: t,
+  isEnabled: d,
+  logger: i
+});
+export {
+  t as disableFormFieldLogging,
+  l as enableFormFieldLogging,
+  d as isFormFieldLoggingEnabled,
+  i as logger
+};

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

@@ -0,0 +1,100 @@
+"use client";
+const o = (r) => r === void 0 ? { value: void 0 } : typeof r == "object" && r !== null && "value" in r ? {
+  value: r.value,
+  message: r.message
+} : { value: r }, y = (r, t, a) => {
+  if (!r.validation)
+    return [];
+  const i = [], n = r.validation;
+  if (n.required) {
+    const { value: e, message: s } = o(
+      n.required
+    );
+    e && !u(t) && i.push(s || "This field is required");
+  }
+  if (n.minLength) {
+    const { value: e, message: s } = o(
+      n.minLength
+    );
+    e !== void 0 && !d(t, e) && i.push(s || `Minimum length is ${e} characters`);
+  }
+  if (n.maxLength) {
+    const { value: e, message: s } = o(
+      n.maxLength
+    );
+    e !== void 0 && !m(t, e) && i.push(s || `Maximum length is ${e} characters`);
+  }
+  if (n.pattern) {
+    const { value: e, message: s } = o(
+      n.pattern
+    );
+    e && !c(t, e) && i.push(s || "Invalid format");
+  }
+  if (n.email) {
+    const { value: e, message: s } = o(
+      n.email
+    );
+    e && !l(t) && i.push(s || "Invalid email address");
+  }
+  if (n.min) {
+    const { value: e, message: s } = o(n.min);
+    e !== void 0 && !f(t, e) && i.push(s || `Minimum value is ${e}`);
+  }
+  if (n.max) {
+    const { value: e, message: s } = o(n.max);
+    e !== void 0 && !g(t, e) && i.push(s || `Maximum value is ${e}`);
+  }
+  if (n.rules && n.rules.length > 0)
+    for (const e of n.rules)
+      h(e, t, a) || i.push(e.message || "Validation failed");
+  return i;
+}, h = (r, t, a) => {
+  const i = r.params;
+  switch (r.type) {
+    case "required":
+      return u(t);
+    case "minLength":
+      return d(t, i?.min);
+    case "maxLength":
+      return m(t, i?.max);
+    case "pattern":
+      return c(t, i?.pattern);
+    case "email":
+      return l(t);
+    case "number":
+      return p(t);
+    case "min":
+      return f(t, i?.min);
+    case "max":
+      return g(t, i?.max);
+    case "custom":
+      return x(t, i?.validator, a);
+    default:
+      return !0;
+  }
+}, u = (r) => r == null ? !1 : typeof r == "string" ? r.trim() !== "" : Array.isArray(r) ? r.length > 0 : !0, d = (r, t) => t === void 0 || r === void 0 || r === null ? !0 : typeof r == "string" || Array.isArray(r) ? r.length >= t : !0, m = (r, t) => t === void 0 || r === void 0 || r === null ? !0 : typeof r == "string" || Array.isArray(r) ? r.length <= t : !0, c = (r, t) => {
+  if (t === void 0 || r === void 0 || r === null || typeof r != "string") return !0;
+  try {
+    return new RegExp(t).test(r);
+  } catch {
+    return console.error("Invalid regex pattern:", t), !0;
+  }
+}, l = (r) => r == null || r === "" ? !0 : typeof r != "string" ? !1 : /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r), p = (r) => r == null || r === "" ? !0 : !Number.isNaN(Number(r)), f = (r, t) => t === void 0 || r === void 0 || r === null || r === "" ? !0 : Number(r) >= t, g = (r, t) => t === void 0 || r === void 0 || r === null || r === "" ? !0 : Number(r) <= t, x = (r, t, a) => {
+  if (!t) return !0;
+  console.warn(
+    "[DEPRECATED] String-based custom validators are deprecated and pose security risks. Please migrate to function-based validators using the ValidationEngine."
+  );
+  try {
+    return new Function(
+      "value",
+      "formData",
+      `return ${t}`
+    )(r, a);
+  } catch (i) {
+    return console.error("Error in custom validator:", i), !1;
+  }
+};
+export {
+  y as validateComponentValue,
+  h as validateRule
+};

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

@@ -0,0 +1,58 @@
+"use client";
+import { getMostRelevantError as l } from "./errorUtils.js";
+const a = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Set(), g = (r) => {
+  s.add(r);
+}, u = (r) => s.has(r), w = () => {
+  s.clear();
+}, h = (r, t = !1, e) => {
+  const { errors: i, isTouched: n, isValid: c } = r;
+  return e && a.has(e) && a.get(e) ? !1 : c ? (e && a.set(e, !0), !1) : !i || i.length === 0 ? !1 : (e && a.set(e, !1), t ? !0 : e && !u(e) ? !1 : n);
+}, A = (r, t) => {
+  a.set(r, t);
+}, E = (r, t = !1) => h(r, t) ? l(r.errors || []) : "", o = {
+  // Text inputs: validate on blur, show errors after touch
+  textInput: {
+    validateOn: "blur",
+    showErrorsAfter: "touch"
+  },
+  // Email: validate on blur, show errors after touch
+  email: {
+    validateOn: "blur",
+    showErrorsAfter: "touch"
+  },
+  // Numbers: validate on blur, show errors after touch
+  number: {
+    validateOn: "blur",
+    showErrorsAfter: "touch"
+  },
+  // Radio groups: validate on change, show errors after touch
+  radioGroup: {
+    validateOn: "change",
+    showErrorsAfter: "touch"
+  },
+  // Selects: validate on change, show errors after touch
+  select: {
+    validateOn: "change",
+    showErrorsAfter: "touch"
+  },
+  // Checkboxes: validate on change, show errors after touch
+  checkbox: {
+    validateOn: "change",
+    showErrorsAfter: "touch"
+  },
+  // Multi-select: validate on change, show errors after touch
+  multiselect: {
+    validateOn: "change",
+    showErrorsAfter: "touch"
+  }
+}, v = (r) => o[r] || o.textInput;
+export {
+  o as VALIDATION_TIMING,
+  w as clearUserInteractionTracking,
+  E as getDisplayErrorMessage,
+  v as getValidationTiming,
+  u as hasUserInteracted,
+  g as markFieldAsUserInteracted,
+  h as shouldShowValidationError,
+  A as updateValidationCache
+};