@digiform/wizard 0.2.10 → 0.2.16

package/wizard/src/features/form-runtime/components/FormFooter.js

@@ -0,0 +1,209 @@
+"use client";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { clsx as S } from "clsx";
+/* empty css                               */
+import { useFormMachine as V } from "../../state-management/machines/useFormMachine.js";
+import { useFormContext as y } from "../hooks/useFormContext.js";
+import { useFormEditing as v } from "../../../../../ui/src/lib/providers/FormEditingContext.js";
+import { Button as E } from "@rijkshuisstijl-community/components-react";
+const M = ({
+  navigation: l,
+  children: d,
+  isDisplayOnly: a = !1,
+  onNext: g,
+  isLastStep: m = !1,
+  isDisabled: n = !1,
+  ...r
+}) => {
+  const u = () => {
+    a || n || g?.();
+  };
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: S(
+        (n || a) && "opacity-50",
+        r.className
+      ),
+      ...r,
+      children: [
+        d,
+        l?.next?.enabled !== !1 && /* @__PURE__ */ f(
+          E,
+          {
+            appearance: "primary-action-button",
+            onClick: u,
+            disabled: n || a,
+            children: l?.next?.label || (m ? "Voltooien" : "Volgende")
+          }
+        )
+      ]
+    }
+  );
+}, A = ({ children: l, ...d }) => {
+  const { isEditing: a } = v(), [g, m, n] = V(), { currentStep: r, isLastStep: u } = n, { navigation: b } = r, e = y();
+  return /* @__PURE__ */ f(
+    M,
+    {
+      navigation: b,
+      onNext: async () => {
+        try {
+          const c = r.actions || [], h = c.some(
+            (s) => s.trigger === "onStepFinish"
+          );
+          if (console.log("🔍 [FormFooter] Starting form submission check:", {
+            stepId: r.id,
+            stepActions: c.length,
+            hasFinishActions: h
+          }), h) {
+            const s = Object.keys(e.state.fieldMeta).map(
+              (t) => {
+                const o = e.state.fieldMeta[t], i = e.getFieldValue(t);
+                return {
+                  fieldId: t,
+                  value: i,
+                  isValid: o.isValid,
+                  isDirty: o.isDirty,
+                  isTouched: o.isTouched,
+                  errors: o.errors,
+                  errorCount: o.errors?.length || 0
+                };
+              }
+            );
+            if (console.log(
+              "🔍 [FormFooter] Step has finish actions - checking form state:",
+              {
+                canSubmit: e.state.canSubmit,
+                isValid: e.state.isValid,
+                isSubmitting: e.state.isSubmitting,
+                fieldCount: Object.keys(e.state.fieldMeta).length,
+                fieldAnalysis: s,
+                formErrors: e.state.formErrors
+              }
+            ), console.log("📋 [FormFooter] Detailed field analysis:"), s.forEach((t, o) => {
+              console.log(`  Field ${o + 1}:`, {
+                fieldId: t.fieldId,
+                value: t.value,
+                isValid: t.isValid,
+                isDirty: t.isDirty,
+                isTouched: t.isTouched,
+                errors: t.errors,
+                errorCount: t.errorCount
+              });
+            }), e.state.canSubmit)
+              await e.handleSubmit();
+            else {
+              console.log(
+                "🚫 [FormFooter] Form validation failed for step with finish actions, triggering error display:",
+                {
+                  canSubmit: e.state.canSubmit,
+                  isValid: e.state.isValid,
+                  isSubmitting: e.state.isSubmitting,
+                  fieldMeta: e.state.fieldMeta,
+                  formErrors: e.state.formErrors
+                }
+              );
+              const t = Object.keys(e.state.fieldMeta).filter(
+                (o) => {
+                  const i = e.state.fieldMeta[o];
+                  return !i.isValid && i.errors?.length > 0;
+                }
+              );
+              t.length > 0 && (console.log(
+                `🔍 [FormFooter] Triggering error display for ${t.length} invalid fields:`,
+                t
+              ), window.dispatchEvent(
+                new CustomEvent("triggerStepValidation", {
+                  detail: { fieldIds: t }
+                })
+              ));
+            }
+          } else {
+            const s = Object.keys(e.state.fieldMeta).map(
+              (t) => {
+                const o = e.state.fieldMeta[t], i = e.getFieldValue(t);
+                return {
+                  fieldId: t,
+                  value: i,
+                  isValid: o.isValid,
+                  isDirty: o.isDirty,
+                  isTouched: o.isTouched,
+                  errors: o.errors,
+                  errorCount: o.errors?.length || 0
+                };
+              }
+            );
+            if (console.log(
+              "🔍 [FormFooter] Step has no finish actions - checking form state:",
+              {
+                canSubmit: e.state.canSubmit,
+                isValid: e.state.isValid,
+                isSubmitting: e.state.isSubmitting,
+                fieldCount: Object.keys(e.state.fieldMeta).length,
+                fieldAnalysis: s,
+                formErrors: e.state.formErrors
+              }
+            ), console.log("📋 [FormFooter] Detailed field analysis:"), s.forEach((t, o) => {
+              console.log(`  Field ${o + 1}:`, {
+                fieldId: t.fieldId,
+                value: t.value,
+                isValid: t.isValid,
+                isDirty: t.isDirty,
+                isTouched: t.isTouched,
+                errors: t.errors,
+                errorCount: t.errorCount
+              });
+            }), e.state.canSubmit) {
+              const t = e.state.values, o = {};
+              console.log("🔄 [FormFooter] Preparing form values for navigation:", {
+                formValues: t,
+                fieldIds: Object.keys(t)
+              }), Object.keys(t).forEach((i) => {
+                const F = e.getFieldValue(i);
+                o[i] = F, console.log(`🔄 [FormFooter] Prepared field ${i}:`, F);
+              }), m({
+                type: "REQUEST_NAVIGATION",
+                navigationType: "next"
+              });
+            } else {
+              console.log(
+                "🚫 [FormFooter] Form cannot be submitted (validation failed or form is submitting), triggering error display:",
+                {
+                  canSubmit: e.state.canSubmit,
+                  isValid: e.state.isValid,
+                  isSubmitting: e.state.isSubmitting,
+                  fieldMeta: e.state.fieldMeta,
+                  formErrors: e.state.formErrors,
+                  values: e.state.values
+                }
+              );
+              const t = Object.keys(e.state.fieldMeta).filter(
+                (o) => {
+                  const i = e.state.fieldMeta[o];
+                  return !i.isValid && i.errors?.length > 0;
+                }
+              );
+              t.length > 0 && (console.log(
+                `🔍 [FormFooter] Triggering error display for ${t.length} invalid fields:`,
+                t
+              ), window.dispatchEvent(
+                new CustomEvent("triggerStepValidation", {
+                  detail: { fieldIds: t }
+                })
+              ));
+            }
+          }
+        } catch (c) {
+          console.log("🚫 [FormFooter] Form submission failed:", c);
+        }
+      },
+      isLastStep: u,
+      isDisabled: a,
+      ...d,
+      children: /* @__PURE__ */ f(e.Subscribe, { children: l })
+    }
+  );
+};
+export {
+  A as default
+};

package/wizard/src/features/form-runtime/components/FormHeader.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as u } from "react/jsx-runtime";
+/* empty css                               */
+import { FormHeaderBase as c } from "../../../../../ui/src/components/form-header-base/form-header-base.js";
+import { useFormMachine as l } from "../../state-management/machines/useFormMachine.js";
+import { useFormEditing as d } from "../../../../../ui/src/lib/providers/FormEditingContext.js";
+const N = (t) => {
+  const { isEditing: o } = d(), [, , i] = l(), { steps: n, currentStep: e, currentStepIndex: s, previousStep: a, goToStep: m } = i, p = (r) => {
+    r === "previous" ? a() : m(r);
+  };
+  return /* @__PURE__ */ u(
+    c,
+    {
+      showStepNumber: e.showStepNumber,
+      title: e?.title || t.title,
+      stepNumber: {
+        current: s + 1,
+        total: n.length
+      },
+      navigation: e?.navigation,
+      onNavigate: p,
+      isEditing: o,
+      children: t.children
+    }
+  );
+};
+export {
+  N as default
+};

package/wizard/src/features/form-runtime/components/FormSection/FormSection.js

@@ -0,0 +1,279 @@
+"use client";
+import { jsx as g, jsxs as h } from "react/jsx-runtime";
+import { ComponentTriggerEngine as k } from "../../../state-management/machines/componentTriggerEngine.js";
+import { useFormMachine as _ } from "../../../state-management/machines/useFormMachine.js";
+import { clsx as D } from "clsx";
+import { X as P, Edit as w, Check as L } from "lucide-react";
+import { memo as M, useState as R, useMemo as x, useEffect as $, useCallback as S } from "react";
+import u from "./FormSection.module.css.js";
+import { useFormContext as B } from "../../hooks/useFormContext.js";
+import U from "../FormField.js";
+import { evaluateVisibility as G } from "../../utils/visibilityUtils.js";
+import { Heading as q, Button as j } from "@rijkshuisstijl-community/components-react";
+const H = M(({ section: e }) => {
+  const [a, d, p] = _(), {
+    validateSection: y,
+    validateField: C,
+    startSectionEdit: T,
+    cancelSectionEdit: F
+  } = p, m = B(), [f, E] = R(!1), N = x(() => {
+    if (!e.visibilityConditions)
+      return !0;
+    const o = a.context.data;
+    return G(e.visibilityConditions, o);
+  }, [e.visibilityConditions, a.context.data]), r = x(
+    () => ({
+      title: e.title,
+      components: e.components || [],
+      mode: e.mode || "default",
+      // Default to always-editable mode when no mode is specified
+      editText: e.editText || "Edit",
+      cancelText: e.cancelText || "Cancel",
+      saveText: e.saveText || "Save",
+      showTitle: e.showTitle ?? !0,
+      showActionLink: e.showActionLink ?? !0
+    }),
+    [e]
+  ), I = x(() => {
+    const o = r.mode === "isEditable" ? "default" : r.mode;
+    return o === "readOnly" ? !0 : o === "editable" ? !f : !1;
+  }, [r.mode, f]), n = x(
+    () => r.components.map((o) => o.id),
+    [r.components]
+  ), b = x(
+    () => a.context.activeDialog,
+    [a.context.activeDialog]
+  );
+  $(() => {
+    r.mode !== "editable" || !f || b && !a.context.activeDialog && (console.log(
+      "🔥 FormSection: Dialog closed, checking if verification completed"
+    ), n.every((t) => {
+      const c = a.context.data[t], l = a.context.componentOriginalValues[t];
+      return c === l?.value;
+    }) && (console.log(
+      "🔥 FormSection: All fields clean after verification, clearing alerts and exiting edit mode"
+    ), n.forEach((t) => {
+      d({
+        type: "CLEAR_COMPONENT_ALERT",
+        componentId: t
+      });
+    }), E(!1)));
+  }, [
+    a.context.activeDialog,
+    a.context.data,
+    a.context.componentOriginalValues,
+    n,
+    d,
+    r.mode,
+    f,
+    b
+  ]);
+  const O = S(() => {
+    console.log("Start edit - creating backup for fields:", n);
+    const o = n.map((t) => ({
+      fieldId: t,
+      value: m.getFieldValue(t)
+    }));
+    console.log("Start edit - current form values:", o), n.forEach((t) => {
+      const c = m.getFieldValue(t);
+      p.setData(t, c);
+      const l = a.context.componentOriginalValues[t];
+      (!l || !l.isPopulated) && (console.log(
+        `Setting original value for ${t} on edit start:`,
+        c
+      ), d({
+        type: "SET_COMPONENT_ORIGINAL_VALUE",
+        componentId: t,
+        value: c,
+        source: "edit_start"
+      }));
+    }), T(e.id, n), E(!0);
+  }, [
+    T,
+    e.id,
+    n,
+    m,
+    p,
+    a.context.componentOriginalValues,
+    d
+  ]), V = S(() => {
+    const o = a.context.sectionBackups[e.id];
+    console.log("Cancel edit - backup data:", o), console.log("Cancel edit - section fields:", n), o ? n.forEach((t) => {
+      const c = o[t], l = m.getFieldValue(t);
+      console.log(
+        `Restoring field ${t}: ${l} -> ${c}`
+      ), c !== void 0 && m.setFieldValue(t, c), console.log(
+        `🧹 [FormSection] Dismissing alerts for field ${t} after cancel edit`
+      ), d({
+        type: "DISMISS_COMPONENT_ALERT",
+        componentId: t
+        // Don't specify alertId to clear all alerts for this component
+      });
+    }) : console.warn("No backup data found for section:", e.id), F(e.id), E(!1);
+  }, [
+    a.context.sectionBackups,
+    e.id,
+    n,
+    m,
+    F,
+    d
+  ]), A = S(async () => {
+    console.log(
+      "FormSection: Triggering validation display for fields:",
+      n
+    ), n.forEach((c) => {
+      const l = new CustomEvent("triggerFieldValidation", {
+        detail: { fieldId: c, sectionId: e.id }
+      });
+      console.log(
+        `FormSection: Dispatching validation trigger for field ${c}`
+      ), window.dispatchEvent(l);
+    });
+    let o = !1;
+    const t = n.map((c) => C(c));
+    await Promise.all(t);
+    for (const c of n) {
+      const l = m.getFieldMeta(c);
+      if (l.errors && l.errors.length > 0) {
+        o = !0;
+        break;
+      }
+    }
+    if (y(e.id), !o) {
+      console.log(
+        "🔄 [FormSection] Syncing current form values to XState before trigger evaluation"
+      ), n.forEach((i) => {
+        const s = m.getFieldValue(i);
+        p.setData(i, s), console.log(`🔄 [FormSection] Synced field ${i}:`, s);
+      }), console.log(
+        "🎯 [FormSection] Checking for dirty fields with verification requirements"
+      );
+      const c = p.config, l = a.context.currentStepIndex, v = k.createExecutionPlan(
+        c,
+        "save",
+        l,
+        a.context
+      );
+      if (console.log("🎯 [FormSection] save execution plan:", {
+        totalActions: v.totalActions,
+        executionsCount: v.executions.length,
+        requiresUserInteraction: v.requiresUserInteraction,
+        executions: v.executions.map((i) => ({
+          componentId: i.componentId,
+          triggerId: i.trigger.id,
+          actionsCount: i.actions.length,
+          actions: i.actions.map((s) => ({
+            id: s.id,
+            type: s.type,
+            contexts: s.contexts
+          }))
+        }))
+      }), v.totalActions > 0) {
+        v.executions.forEach((i) => {
+          i.actions.forEach((s) => {
+            console.log(
+              `🎯 [FormSection] Executing ${s.type} action for component ${i.componentId}`,
+              {
+                componentId: i.componentId,
+                triggerId: i.trigger.id,
+                actionId: s.id,
+                actionType: s.type
+              }
+            ), d({
+              type: "TRIGGER_COMPONENT_ACTION",
+              componentId: i.componentId,
+              triggerId: i.trigger.id,
+              actionId: s.id,
+              eventType: "sectionSave"
+            });
+          });
+        });
+        return;
+      }
+      n.forEach((i) => {
+        d({
+          type: "CLEAR_COMPONENT_ALERT",
+          componentId: i
+        });
+      }), n.forEach((i) => {
+        d({
+          type: "UPDATE_COMPONENT_ORIGINAL_VALUE",
+          componentId: i
+        });
+      }), E(!1);
+    }
+  }, [
+    n,
+    C,
+    m,
+    y,
+    e.id,
+    p,
+    a.context.currentStepIndex,
+    a.context,
+    d
+  ]);
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      style: {
+        display: N ? "block" : "none"
+      },
+      "data-section-id": e.id,
+      "data-visible": N,
+      children: /* @__PURE__ */ h("div", { className: D("form-section", u.section), children: [
+        r.showTitle && /* @__PURE__ */ h("div", { className: u.sectionHeader, children: [
+          /* @__PURE__ */ g(q, { level: 3, children: r.title }),
+          r.mode === "editable" && r.showActionLink && /* @__PURE__ */ g("div", { children: f ? /* @__PURE__ */ h(
+            "button",
+            {
+              type: "button",
+              onClick: V,
+              className: u.cancelButton,
+              children: [
+                /* @__PURE__ */ g(P, { className: u.iconSm }),
+                r.cancelText
+              ]
+            }
+          ) : /* @__PURE__ */ h(
+            "button",
+            {
+              type: "button",
+              onClick: O,
+              className: u.editButton,
+              children: [
+                /* @__PURE__ */ g(w, { className: u.iconSm }),
+                r.editText
+              ]
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ h("div", { className: u.sectionContent, children: [
+          r.components.map((o) => /* @__PURE__ */ g(
+            U,
+            {
+              component: o,
+              readOnly: I
+            },
+            o.id
+          )),
+          f && /* @__PURE__ */ g("div", { className: u.saveButtonsWrapper, children: /* @__PURE__ */ h(
+            j,
+            {
+              appearance: "primary-action-button",
+              onClick: A,
+              children: [
+                /* @__PURE__ */ g(L, { className: u.iconSm }),
+                r.saveText
+              ]
+            }
+          ) })
+        ] })
+      ] })
+    }
+  );
+});
+H.displayName = "FormSection";
+export {
+  H as default
+};

package/wizard/src/features/form-runtime/components/FormSection/FormSection.module.css.js

@@ -0,0 +1,20 @@
+"use client";
+const t = "fb-section_5kbZU", n = "fb-sectionHeader_aVzgk", e = "fb-cancelButton_PyIZH", o = "fb-editButton_dbSFX", c = "fb-sectionContent_wTlW-", s = "fb-saveButtonsWrapper_VGuwW", i = "fb-iconSm_yLpHW", a = {
+  section: t,
+  sectionHeader: n,
+  cancelButton: e,
+  editButton: o,
+  sectionContent: c,
+  saveButtonsWrapper: s,
+  iconSm: i
+};
+export {
+  e as cancelButton,
+  a as default,
+  o as editButton,
+  i as iconSm,
+  s as saveButtonsWrapper,
+  t as section,
+  c as sectionContent,
+  n as sectionHeader
+};