@digiform/wizard 0.2.10 → 0.2.16

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

@@ -0,0 +1,167 @@
+"use client";
+import { jsxs as f, jsx as i, Fragment as M } from "react/jsx-runtime";
+import h from "./FormStep.module.css.js";
+/* empty css                                  */
+import { isTemplateStep as m } from "../../../../../../ui/src/lib/types/guards.js";
+import { logger as U } from "../../../../../../ui/src/lib/logger.js";
+import { EnhancedActionExecutor as C } from "../../../api-integration/components/EnhancedActionExecutor/EnhancedActionExecutor.js";
+import { useFormMachine as k } from "../../../state-management/machines/useFormMachine.js";
+import { useForm as W } from "@tanstack/react-form";
+import { useRef as p } from "react";
+import { LoaderProvider as G, useLoaderContext as H } from "../../context/LoaderContext.js";
+import { FormProvider as j } from "../../hooks/useFormContext.js";
+import { buildDefaultValues as E } from "../../utils/formDataBuilder.js";
+import { resetFormDirtyStateAfterApiPopulation as z } from "../../utils/formDirtyStateSync.js";
+import q from "../FormFooter.js";
+import K from "../FormHeader.js";
+import Q from "../FormSection/FormSection.js";
+import { ProgressLoaderRuntime as X } from "../ProgressLoaderRuntime.js";
+import { ValidationEngine as B } from "../../../validation-system/validation/ValidationEngine.js";
+const J = ({
+  currentStep: s,
+  hasStepLoader: a,
+  loaderConfig: o
+}) => {
+  const { isLoadingComplete: t } = H(), d = m(s) ? [] : s.sections || [];
+  return /* @__PURE__ */ f("div", { className: h.stepContent, children: [
+    a && /* @__PURE__ */ i("div", { className: h.loaderWrapper, children: /* @__PURE__ */ i(
+      X,
+      {
+        properties: {
+          label: o?.label,
+          showPercentage: o?.showPercentage ?? !0,
+          duration: o?.duration ?? 3,
+          size: o?.size ?? "md",
+          variant: o?.variant ?? "default",
+          animationSpeed: o?.animationSpeed ?? "normal",
+          autoStart: !0,
+          hideOnComplete: !0,
+          onComplete: o?.completionMessage ? {
+            showMessage: {
+              enabled: !0,
+              text: o.completionMessage,
+              type: "success"
+            }
+          } : void 0
+        }
+      }
+    ) }),
+    (!a || t) && /* @__PURE__ */ i(M, { children: d.map((c) => /* @__PURE__ */ i(Q, { section: c }, c.id)) })
+  ] });
+}, Y = () => {
+  const [s, a, o] = k(), { currentStep: t, config: d } = o, c = p(), u = p(), F = p(), b = d.validationMessageStyle || "withLabel";
+  c.current || (c.current = new B({ messageStyle: b })), (!u.current || F.current !== t.id) && (m(t) ? u.current = c.current.getStepSchema({
+    ...t,
+    sections: []
+  }) : u.current = c.current.getStepSchema(t), F.current = t.id);
+  const v = { ...m(t) ? E({
+    ...t,
+    sections: []
+  }) : E(t), ...o.data }, y = (e) => {
+    (t.actions || []).length > 0 && a({ type: "EXECUTE_ACTIONS", trigger: e });
+  }, x = p(), g = p(!1);
+  t.id !== x.current && (t.actions || []).length > 0 && !g.current && (x.current = t.id, g.current = !0, setTimeout(() => {
+    y("onStepLoad"), setTimeout(() => {
+      g.current = !1;
+    }, 1e3);
+  }, 0));
+  const N = async ({
+    value: e
+  }) => {
+    const n = t.actions || [], r = n.some(
+      (S) => S.trigger === "onStepFinish"
+    );
+    console.log("🎯 [FormStep] handleSubmit called with form values:", {
+      stepActions: n.length,
+      hasFinishActions: r,
+      formValue: e
+    }), r ? (console.log(
+      "🎯 [FormStep] Step has onStepFinish actions, requesting navigation first"
+    ), a({ type: "REQUEST_NAVIGATION", navigationType: "next" })) : (console.log("🎯 [FormStep] No step actions, direct navigation"), o.nextStep());
+  }, D = (e) => {
+  }, L = (e) => {
+    U.error("Action execution failed", { error: e.message }, e);
+  }, O = (e) => {
+    console.log("🔥 FormStep: handleShowDialog called", { dialogConfig: e }), a({ type: "SHOW_ACTION_DIALOG", dialogConfig: e }), console.log("🔥 FormStep: SHOW_ACTION_DIALOG event sent");
+  }, V = (e) => {
+    switch (e.type) {
+      case "next":
+        o.nextStep();
+        break;
+      case "previous":
+        o.previousStep();
+        break;
+      case "step":
+        e.targetStep && o.goToStep(e.targetStep);
+        break;
+    }
+  }, l = W({
+    defaultValues: v,
+    onSubmit: N
+  }), w = (e, n) => {
+    console.log("🎯 handleFieldUpdate called:", { fieldPath: e, value: n });
+    const r = e, S = l.getFieldValue(r), R = s.context.componentOriginalValues[r]?.value;
+    if (S !== n) {
+      console.log("🔄 Updating TanStack Form field:", { componentId: r, value: n });
+      const I = n;
+      o.setData(r, I), l.setFieldValue(r, n);
+      try {
+        z(l, {
+          updatedFields: [r],
+          debug: process.env.NODE_ENV === "development"
+        }), console.log("✅ Dirty state reset complete for:", r);
+      } catch (P) {
+        console.error("❌ Failed to reset dirty state:", P);
+      }
+    }
+    R !== n && (console.log("🎯 Marking component as populated:", { componentId: r, value: n }), setTimeout(() => {
+      a({
+        type: "MARK_COMPONENT_AS_POPULATED",
+        componentId: r,
+        value: n
+      });
+    }, 0));
+  }, A = t, T = !m(t) && A.waitForLoader === !0, _ = T ? A.loaderConfig : void 0;
+  return /* @__PURE__ */ f(j, { value: l, children: [
+    s.matches("executingActions") && (s.context.executingTrigger === "onStepLoad" || s.context.executingTrigger === "onStepFinish") && /* @__PURE__ */ i(
+      C,
+      {
+        actions: t.actions || [],
+        trigger: s.context.executingTrigger || "onStepLoad",
+        formData: s.context.data,
+        onComplete: D,
+        onError: L,
+        onFieldUpdate: w,
+        onShowDialog: O,
+        onNavigate: V,
+        machineRef: {
+          send: a
+        }
+      }
+    ),
+    /* @__PURE__ */ f(
+      "form",
+      {
+        onSubmit: (e) => {
+          e.preventDefault(), e.stopPropagation(), l.handleSubmit();
+        },
+        children: [
+          /* @__PURE__ */ i(K, {}),
+          /* @__PURE__ */ i(G, { children: /* @__PURE__ */ i(
+            J,
+            {
+              currentStep: t,
+              hasStepLoader: T,
+              loaderConfig: _
+            }
+          ) }),
+          /* @__PURE__ */ i(q, { className: h.footer })
+        ]
+      }
+    )
+  ] });
+};
+Y.displayName = "FormStep";
+export {
+  Y as default
+};

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

@@ -0,0 +1,12 @@
+"use client";
+const e = "fb-stepContent_EU1uV", t = "fb-loaderWrapper_00phH", o = "fb-footer_r0kdp", r = {
+  stepContent: e,
+  loaderWrapper: t,
+  footer: o
+};
+export {
+  r as default,
+  o as footer,
+  t as loaderWrapper,
+  e as stepContent
+};

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

@@ -0,0 +1,88 @@
+"use client";
+import { jsx as C } from "react/jsx-runtime";
+/* empty css                               */
+import { memo as A, useState as d, useRef as f, useEffect as i } from "react";
+import { useLoaderContext as B } from "../context/LoaderContext.js";
+import { ProgressLoaderBar as N } from "../../../../../ui/src/components/ProgressLoaderBar/ProgressLoaderBar.js";
+const O = (t) => t > 90 ? Math.random() * 1 + 0.5 : t > 80 ? Math.random() * 2 + 1 : t > 60 ? Math.random() * 3 + 2 : Math.random() * 4 + 3, P = (t) => {
+  const m = {
+    slow: { min: 200, max: 400 },
+    normal: { min: 80, max: 200 },
+    fast: { min: 30, max: 100 }
+  }, { min: n, max: r } = m[t];
+  return Math.random() * (r - n) + n;
+}, q = A(
+  ({ properties: t, className: m }) => {
+    const { setLoadingComplete: n } = B(), [r, p] = d("idle"), [u, R] = d(0), [D, M] = d(!1), e = f(null), y = f(Date.now()), T = f(!1), {
+      autoStart: g = !0,
+      hideOnComplete: h = !0,
+      duration: L = 3,
+      // Default 3 seconds
+      mode: S = "determinate",
+      label: w,
+      showPercentage: b = !0,
+      size: v = "md",
+      variant: H = "default",
+      barColor: E,
+      trackColor: I,
+      animationSpeed: s = "normal",
+      onComplete: j,
+      errorHandling: k
+    } = t, c = L * 1e3;
+    return i(() => {
+      if (!g || T.current) return;
+      T.current = !0, p("loading");
+      const l = setTimeout(() => {
+        const a = () => {
+          R((o) => {
+            if (o >= 100)
+              return e.current && (clearTimeout(e.current), e.current = null), 100;
+            e.current = setTimeout(
+              a,
+              P(s)
+            );
+            const z = O(o), x = o + z;
+            return x > 100 ? 100 : x;
+          });
+        };
+        a();
+      }, 100);
+      return () => {
+        clearTimeout(l), e.current && (clearTimeout(e.current), e.current = null);
+      };
+    }, [g, s]), i(() => {
+      if (u >= 100 && r === "loading") {
+        const l = Date.now() - y.current, a = Math.max(0, c - l), o = setTimeout(() => {
+          p("complete");
+        }, a);
+        return () => clearTimeout(o);
+      }
+    }, [u, r, c]), i(() => {
+      r === "complete" && (n(!0), h && M(!0));
+    }, [r, h, n]), i(() => () => {
+      e.current && clearTimeout(e.current);
+    }, []), D ? null : /* @__PURE__ */ C("div", { className: m, children: /* @__PURE__ */ C(
+      N,
+      {
+        label: w,
+        showPercentage: b,
+        mode: S,
+        value: u,
+        duration: c,
+        size: v,
+        variant: H,
+        barColor: E,
+        trackColor: I,
+        status: r,
+        completionConfig: j,
+        errorConfig: k,
+        animationSpeed: s
+      }
+    ) });
+  }
+);
+q.displayName = "ProgressLoaderRuntime";
+export {
+  q as ProgressLoaderRuntime,
+  q as default
+};

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

@@ -0,0 +1,61 @@
+"use client";
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+/* empty css                                  */
+import { useFormMachine as h } from "../../../state-management/machines/useFormMachine.js";
+import o from "clsx";
+import e from "./StepProgressIndicator.module.css.js";
+import v from "../../../../../../ui/src/lib/assets/icons/Check.js";
+import N from "../../../../../../ui/src/lib/assets/icons/ChevronRight.js";
+import { Heading as f } from "@rijkshuisstijl-community/components-react";
+const x = () => {
+  const [, , m] = h(), { currentStepIndex: l, steps: c, config: p } = m;
+  return console.log("🏁 StepProgressIndicator render:", {
+    currentStepIndex: l,
+    totalSteps: c.length,
+    formId: p.id,
+    stepIds: c.map((s) => s.id),
+    stepTitles: c.map((s) => s.title)
+  }), /* @__PURE__ */ r("div", { className: e.stepListWrapper, children: [
+    /* @__PURE__ */ t(f, { level: 2, children: "Stappenplan" }),
+    /* @__PURE__ */ t("ul", { className: e.stepList, children: c.map((s, i) => {
+      const n = i === l, d = i > l, a = i < l;
+      return /* @__PURE__ */ r(
+        "li",
+        {
+          className: o(e.stepListItem, {
+            [e.inactive]: d,
+            [e.completed]: a,
+            [e.current]: n
+          }),
+          children: [
+            /* @__PURE__ */ r("div", { className: e.leftContainer, children: [
+              /* @__PURE__ */ t("div", { className: e.circle, children: a ? /* @__PURE__ */ t(v, {}) : /* @__PURE__ */ t(
+                "div",
+                {
+                  className: o({
+                    [e.currentDot]: n
+                  })
+                }
+              ) }),
+              i < c.length - 1 && /* @__PURE__ */ t("div", { className: e.connector })
+            ] }),
+            /* @__PURE__ */ r("div", { className: e.content, children: [
+              /* @__PURE__ */ r("div", { className: e.contentText, children: [
+                /* @__PURE__ */ r("div", { className: e.stepNumber, children: [
+                  "Stap ",
+                  i + 1
+                ] }),
+                /* @__PURE__ */ t("span", { className: e.stepTitle, children: s.title })
+              ] }),
+              n ? /* @__PURE__ */ t("div", { className: e.iconRightContainer, children: /* @__PURE__ */ t(N, {}) }) : null
+            ] })
+          ]
+        },
+        s.id
+      );
+    }) })
+  ] });
+};
+export {
+  x as default
+};

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

@@ -0,0 +1,34 @@
+"use client";
+const t = "fb-stepListWrapper_RTLUk", e = "fb-stepList_b7ucJ", n = "fb-stepListItem_G8Nh4", c = "fb-leftContainer_o-gBE", s = "fb-circle_3oinV", o = "fb-currentDot_0e9gN", i = "fb-connector_bDvRA", r = "fb-content_u43H4", p = "fb-stepNumber_c2YRs", b = "fb-stepTitle_w5Be8", f = "fb-iconRightContainer_DCjrS", l = "fb-completed_F-mOG", a = "fb-current_QAO1e", _ = "fb-inactive_tYqvV", u = {
+  stepListWrapper: t,
+  stepList: e,
+  stepListItem: n,
+  leftContainer: c,
+  circle: s,
+  currentDot: o,
+  connector: i,
+  content: r,
+  stepNumber: p,
+  stepTitle: b,
+  iconRightContainer: f,
+  completed: l,
+  current: a,
+  inactive: _
+};
+export {
+  s as circle,
+  l as completed,
+  i as connector,
+  r as content,
+  a as current,
+  o as currentDot,
+  u as default,
+  f as iconRightContainer,
+  _ as inactive,
+  c as leftContainer,
+  e as stepList,
+  n as stepListItem,
+  t as stepListWrapper,
+  p as stepNumber,
+  b as stepTitle
+};

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

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import t from "./displayValue.module.css.js";
+const c = (r, e) => e == null || r.type !== "checkbox" && e === "" ? /* @__PURE__ */ n("p", { className: t.emptyValue, children: "No value" }) : /* @__PURE__ */ n("p", { className: t.valueText, children: String(e) }), a = (r, e) => e == null || e === "" ? /* @__PURE__ */ n("p", { className: t.emptyValue, children: "No value" }) : /* @__PURE__ */ n("p", { className: t.valueText, children: String(e) }), d = (r, e) => /* @__PURE__ */ n("p", { className: t.valueText, children: e ? "Checked" : "Unchecked" }), u = (r, e) => {
+  if (e == null || e === "")
+    return /* @__PURE__ */ n("p", { className: t.emptyValue, children: "No value" });
+  const o = (r.properties?.options || []).find((s) => s.value === e);
+  return /* @__PURE__ */ n("p", { className: t.valueText, children: o?.label || String(e) });
+}, m = (r, e) => {
+  if (e == null || e === "")
+    return /* @__PURE__ */ n("p", { className: t.emptyValue, children: "No value" });
+  const o = (r.properties?.options || []).find((s) => s.value === e);
+  return /* @__PURE__ */ n("p", { className: t.valueText, children: o?.label || String(e) });
+};
+export {
+  d as renderCheckboxDisplayValue,
+  c as renderDefaultDisplayValue,
+  m as renderDropdownDisplayValue,
+  u as renderRadioGroupDisplayValue,
+  a as renderTextDisplayValue
+};

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

@@ -0,0 +1,10 @@
+"use client";
+const e = "fb-emptyValue_baQFk", t = "fb-valueText_JCRsN", a = {
+  emptyValue: e,
+  valueText: t
+};
+export {
+  a as default,
+  e as emptyValue,
+  t as valueText
+};

package/wizard/src/features/form-runtime/components/renderers/DisplayModeRenderer/DisplayModeRenderer.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { clsx as a } from "clsx";
+import d from "./DisplayModeRenderer.module.css.js";
+import { FormFieldWrapper as m } from "../../../../../../../ui/src/design-system/components/FormFieldWrapper.js";
+import { renderComponentDisplayValue as t } from "../../../utils/componentDisplayValue.js";
+const u = ({
+  component: e,
+  fieldValue: s
+}) => {
+  const l = t(e, s), i = e.properties?.description, o = /* @__PURE__ */ p("div", { className: "form-field-display", children: [
+    /* @__PURE__ */ r("div", { className: "rhc-form-field-label", children: e.properties?.label }),
+    l,
+    i && /* @__PURE__ */ r("p", { className: "rhc-form-field-description", children: i })
+  ] });
+  return /* @__PURE__ */ r(
+    m,
+    {
+      invalid: !1,
+      errorMessage: void 0,
+      className: a("form-field-wrapper form-field-display-mode", d.displayWrapper),
+      input: o
+    }
+  );
+};
+export {
+  u as DisplayModeRenderer
+};

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

@@ -0,0 +1,8 @@
+"use client";
+const p = "fb-displayWrapper_VYcQC", s = {
+  displayWrapper: p
+};
+export {
+  s as default,
+  p as displayWrapper
+};

package/wizard/src/features/form-runtime/components/renderers/InteractiveFieldRenderer/InteractiveFieldRenderer.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { clsx as u } from "clsx";
+import v from "./InteractiveFieldRenderer.module.css.js";
+import { FormFieldWrapper as g } from "../../../../../../../ui/src/design-system/components/FormFieldWrapper.js";
+import { adaptComponentForRegistry as y } from "../../../ComponentAdapterComplete/ComponentAdapterComplete.js";
+import { shouldShowValidationError as E, getDisplayErrorMessage as F, markFieldAsUserInteracted as w } from "../../../utils/validationUX.js";
+const O = ({
+  component: e,
+  field: r,
+  readOnly: n,
+  needsFormFieldWrapper: d,
+  isSubmitAttempted: t,
+  onChange: l,
+  onBlur: m
+}) => {
+  const p = r.state.value, c = r.state.meta.errors || [], f = !r.state.meta.isValid && c.length > 0, s = E(
+    r.state.meta,
+    t,
+    e.id
+    // Pass component ID for validation cache
+  ), a = F(
+    r.state.meta,
+    t
+  ), h = y(
+    e,
+    p,
+    l,
+    n,
+    () => {
+      w(e.id), m();
+    },
+    void 0,
+    // errors parameter
+    void 0
+    // state parameter
+  ), i = /* @__PURE__ */ o(
+    "div",
+    {
+      style: { display: "contents" },
+      children: h
+    }
+  );
+  return d ? /* @__PURE__ */ o(
+    g,
+    {
+      invalid: s && f,
+      errorMessage: s && a ? a : void 0,
+      className: u("form-field-wrapper", v.fieldWrapper),
+      input: i
+    }
+  ) : /* @__PURE__ */ o("div", { className: "form-field", children: i });
+};
+export {
+  O as InteractiveFieldRenderer
+};

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

@@ -0,0 +1,8 @@
+"use client";
+const e = "fb-fieldWrapper_rnKUQ", r = {
+  fieldWrapper: e
+};
+export {
+  r as default,
+  e as fieldWrapper
+};

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

@@ -0,0 +1,38 @@
+"use client";
+import { resolveTemplateStep as i } from "./templateLoader.js";
+import { isTemplateStep as r } from "../../../../../core/src/types/guards.js";
+async function m(e) {
+  const t = {
+    next: { label: "Next", enabled: !0 },
+    previous: { label: "Previous", enabled: !0 }
+  }, l = await Promise.all(
+    e.steps.map(async (s, n) => {
+      if (r(s)) {
+        const a = { ...t };
+        n === 0 && (a.previous.enabled = !1), n === e.steps.length - 1 && (a.next.label = "Submit");
+        const o = s.stepIndex;
+        return await i(
+          s,
+          a,
+          o
+        );
+      }
+      return s;
+    })
+  );
+  return {
+    ...e,
+    steps: l
+  };
+}
+function f(e) {
+  return e.steps.some((t) => r(t));
+}
+function d(e) {
+  return e.steps.filter(r).map((t) => t.templateId);
+}
+export {
+  d as getUsedTemplateIds,
+  f as hasTemplateSteps,
+  m as resolveFormWizardConfig
+};