@digiform/wizard 0.2.10 → 0.2.11

package/wizard/src/features/trigger-action-system/components/ActionManager.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { ActionDialog as d } from "../../dialog-system/components/ActionDialog/ActionDialog.js";
+import { useFormMachine as p } from "../../state-management/machines/useFormMachine.js";
+import { memo as I } from "react";
+const D = I(({ className: g = "" }) => {
+  const [i, a] = p(), { context: n } = i, l = (e) => {
+    switch (console.log("🔥 ActionManager: Dialog button clicked!", e), console.log("🔥 ActionManager: Button action type:", e.type), e.type) {
+      case "close":
+        console.log("🔥 ActionManager: Executing CLOSE action"), n.pendingNavigation ? (console.log(
+          "🔥 ActionManager: Dialog cancelled during navigation - sending DIALOG_CANCELLED"
+        ), a({ type: "DIALOG_CANCELLED" })) : a({ type: "HIDE_ACTION_DIALOG" });
+        break;
+      case "navigate":
+        e.type === "navigate" && console.log("🔥 ActionManager: Executing NAVIGATE action", {
+          direction: e.direction,
+          targetStep: e.targetStep,
+          currentStep: n.currentStepIndex,
+          updateOriginalValue: e.updateOriginalValue,
+          componentId: e.componentId
+        }), e.type === "navigate" && e.updateOriginalValue && e.componentId && (console.log(
+          "🔥 ActionManager: Updating original value before navigation"
+        ), a({
+          type: "UPDATE_COMPONENT_ORIGINAL_VALUE",
+          componentId: e.componentId
+        })), n.pendingNavigation ? (console.log(
+          "🔥 ActionManager: Dialog verified during navigation - sending DIALOG_VERIFIED"
+        ), a({ type: "DIALOG_VERIFIED" })) : e.type === "navigate" && (e.direction === "next" ? (console.log("🔥 ActionManager: Sending NEXT event to machine"), a({ type: "NEXT" })) : e.direction === "previous" ? (console.log(
+          "🔥 ActionManager: Sending PREVIOUS event to machine"
+        ), a({ type: "PREVIOUS" })) : e.targetStep && (console.log(
+          "🔥 ActionManager: Sending GO_TO_STEP event to machine"
+        ), a({ type: "GO_TO_STEP", stepId: e.targetStep })));
+        break;
+      case "custom":
+        console.log("🔥 ActionManager: Executing CUSTOM action", e), e.type === "custom" && e.handler === "updateOriginalValue" && e.componentId ? (console.log(
+          "🔥 ActionManager: Executing updateOriginalValue handler",
+          {
+            componentId: e.componentId,
+            pendingNavigation: n.pendingNavigation,
+            saveState: n.saveState,
+            isInSaveContext: n.saveState.savingSection !== null
+          }
+        ), a({
+          type: "UPDATE_COMPONENT_ORIGINAL_VALUE",
+          componentId: e.componentId
+        }), n.saveState.savingSection !== null ? (console.log(
+          "🔥 ActionManager: updateOriginalValue in SAVE context - hiding dialog without navigation"
+        ), a({ type: "HIDE_ACTION_DIALOG" })) : (console.log(
+          "🔥 ActionManager: updateOriginalValue in non-save context - hiding dialog"
+        ), a({ type: "HIDE_ACTION_DIALOG" }))) : (console.warn(
+          "Custom dialog action not implemented:",
+          e.handler
+        ), a({ type: "HIDE_ACTION_DIALOG" }));
+        break;
+      case "updateOriginalValue":
+        console.log(
+          "🔥 ActionManager: Executing UPDATE_ORIGINAL_VALUE action",
+          {
+            componentId: e.componentId,
+            pendingNavigation: n.pendingNavigation,
+            saveState: n.saveState,
+            isInSaveContext: n.saveState.savingSection !== null
+          }
+        ), a({
+          type: "UPDATE_COMPONENT_ORIGINAL_VALUE",
+          componentId: e.componentId
+        }), n.saveState.savingSection !== null ? (console.log(
+          "🔥 ActionManager: Update original value in SAVE context - hiding dialog without navigation"
+        ), a({ type: "HIDE_ACTION_DIALOG" })) : n.pendingNavigation ? (console.log(
+          "🔥 ActionManager: Update original value verified during navigation - sending DIALOG_VERIFIED"
+        ), a({ type: "DIALOG_VERIFIED" })) : a({ type: "HIDE_ACTION_DIALOG" });
+        break;
+      default:
+        console.log("🔥 ActionManager: Unknown action type, hiding dialog"), a({ type: "HIDE_ACTION_DIALOG" });
+    }
+  }, c = () => {
+    n.pendingNavigation ? (console.log(
+      "🔥 ActionManager: Dialog closed during navigation - sending DIALOG_CANCELLED"
+    ), a({ type: "DIALOG_CANCELLED" })) : a({ type: "HIDE_ACTION_DIALOG" });
+  }, o = i.matches("showingActionDialog") && n.activeDialog !== null, t = i.matches("executingActions");
+  return console.log(" ActionManager state:", {
+    currentState: i.value,
+    isDialogOpen: o,
+    isExecutingActions: t,
+    activeDialog: n.activeDialog,
+    executingTrigger: n.executingTrigger
+  }), i.matches("showingActionDialog") && console.log(" ActionManager: In showingActionDialog state!", {
+    activeDialog: n.activeDialog,
+    isDialogOpen: o
+  }), /* @__PURE__ */ s("div", { className: g, children: [
+    t && !1,
+    /* @__PURE__ */ r(
+      d,
+      {
+        config: n.activeDialog,
+        formData: n.data,
+        onButtonClick: l,
+        onClose: c,
+        isOpen: o
+      }
+    )
+  ] });
+});
+D.displayName = "ActionManager";
+export {
+  D as ActionManager,
+  D as default
+};

package/wizard/src/features/trigger-action-system/components/ComponentAlert/ComponentAlert.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import n from "./ComponentAlert.module.css.js";
+import { Alert as o } from "@rijkshuisstijl-community/components-react";
+const s = ({ alert: e }) => /* @__PURE__ */ t(o, { type: "warning", children: e.message }), p = ({ alerts: e }) => e.length === 0 ? null : /* @__PURE__ */ t("div", { className: n.alertList, children: e.map((r) => /* @__PURE__ */ t(s, { alert: r }, r.id)) });
+export {
+  s as ComponentAlert,
+  p as ComponentAlerts,
+  s as default
+};

package/wizard/src/features/trigger-action-system/components/ComponentAlert/ComponentAlert.module.css.js

@@ -0,0 +1,8 @@
+"use client";
+const t = "fb-alertList_d0DxG", s = {
+  alertList: t
+};
+export {
+  t as alertList,
+  s as default
+};

package/wizard/src/features/trigger-action-system/utils/GenericTriggerEngine.js

@@ -0,0 +1,376 @@
+"use client";
+class l {
+  constructor(e) {
+    this.services = e;
+  }
+  triggers = /* @__PURE__ */ new Map();
+  debounceTimers = /* @__PURE__ */ new Map();
+  throttleTimers = /* @__PURE__ */ new Map();
+  /**
+   * Register triggers for a specific context and target
+   */
+  registerTriggers(e, a) {
+    this.triggers.set(
+      e,
+      a.filter((i) => i.enabled !== !1)
+    );
+  }
+  /**
+   * Unregister triggers for a target
+   */
+  unregisterTriggers(e) {
+    this.triggers.delete(e), this.clearTimers(e);
+  }
+  /**
+   * Evaluate triggers for a given context
+   */
+  async evaluateTriggers(e) {
+    const a = this.triggers.get(e.targetId);
+    if (!a || a.length === 0)
+      return;
+    const i = a.filter(
+      (n) => n.type === e.triggerType
+    );
+    if (i.length === 0)
+      return;
+    const t = i.sort(
+      (n, o) => (n.order || 0) - (o.order || 0)
+    );
+    for (const n of t)
+      await this.executeTrigger(n, e);
+  }
+  /**
+   * Execute a single trigger
+   */
+  async executeTrigger(e, a) {
+    if (!(e.conditions && e.conditions.length > 0 && !this.evaluateConditions(
+      e.conditions,
+      a
+    ))) {
+      if (e.debounceMs && e.debounceMs > 0) {
+        this.handleDebounce(e, a);
+        return;
+      }
+      if (e.throttleMs && e.throttleMs > 0) {
+        if (this.isThrottled(e.id))
+          return;
+        this.setThrottle(e.id, e.throttleMs);
+      }
+      e.actions && await this.executeActions(e.actions, a);
+    }
+  }
+  /**
+   * Execute actions for a trigger
+   */
+  async executeActions(e, a) {
+    const i = e.filter((t) => t.enabled !== !1).sort((t, n) => (t.order || 0) - (n.order || 0));
+    for (const t of i)
+      await this.executeAction(t, a);
+  }
+  /**
+   * Execute a single action
+   */
+  async executeAction(e, a) {
+    if (e.condition && !this.evaluateConditions(
+      [e.condition],
+      a
+    ))
+      return;
+    e.delay && e.delay > 0 && await new Promise((t) => setTimeout(t, e.delay));
+    const i = {
+      action: e,
+      triggerContext: a,
+      formData: a.formData,
+      services: this.services
+    };
+    try {
+      await this.dispatchAction(i);
+    } catch (t) {
+      console.error(`Failed to execute action ${e.id}:`, t);
+    }
+  }
+  /**
+   * Dispatch action to appropriate handler based on type
+   */
+  async dispatchAction(e) {
+    const { action: a, services: i } = e, t = a.config;
+    if (!this.isTypedActionConfig(t)) {
+      console.warn("Action config is missing type property", t);
+      return;
+    }
+    switch (t.type) {
+      // UI Actions
+      case "ui:showAlert":
+        this.isUIShowAlertConfig(t) && i.ui.showAlert(t);
+        break;
+      case "ui:showDialog":
+        this.isUIShowDialogConfig(t) && i.ui.showDialog(t);
+        break;
+      case "ui:showNotification":
+        this.isUIShowNotificationConfig(t) && i.ui.showNotification(t);
+        break;
+      case "ui:hideDialog":
+        i.ui.hideDialog();
+        break;
+      // Navigation Actions
+      case "navigation:goToStep":
+        this.isNavigationGoToStepConfig(t) && i.navigation.goToStep(t.stepId, t.behavior);
+        break;
+      case "navigation:goNext":
+        this.isNavigationGoNextConfig(t) && i.navigation.goNext(t.skipValidation);
+        break;
+      case "navigation:goPrevious":
+        this.isNavigationGoPreviousConfig(t) && i.navigation.goPrevious(t.skipValidation);
+        break;
+      case "navigation:goToSection":
+        this.isNavigationGoToSectionConfig(t) && i.navigation.goToSection(t.sectionId, t.stepId);
+        break;
+      // Component Actions
+      case "component:enable":
+        this.isComponentEnableConfig(t) && this.handleComponentAction("enable", t.componentIds, e);
+        break;
+      case "component:disable":
+        this.isComponentDisableConfig(t) && this.handleComponentAction("disable", t.componentIds, e);
+        break;
+      case "component:show":
+      case "component:hide":
+        if (this.isComponentShowHideConfig(t)) {
+          const n = t.type === "component:show" ? "show" : "hide";
+          this.handleComponentAction(n, t.componentIds, e);
+        }
+        break;
+      case "component:setValue":
+      case "component:clearValue":
+        this.isComponentSetValueConfig(t) && (t.type === "component:setValue" ? i.data.setValue(
+          `component.${t.componentId}`,
+          t.value
+        ) : i.data.clearValue(`component.${t.componentId}`));
+        break;
+      case "component:updateOriginalValue":
+        this.isComponentUpdateOriginalValueConfig(t) && this.handleUpdateOriginalValue(t.componentId, e);
+        break;
+      // Data Actions
+      case "data:apiCall":
+        this.isDataApiCallConfig(t) && await i.data.apiCall(t);
+        break;
+      case "data:setValue":
+      case "data:clearValue":
+        this.isDataSetValueConfig(t) && (t.type === "data:setValue" ? i.data.setValue(t.fieldPath, t.value) : i.data.clearValue(t.fieldPath));
+        break;
+      case "data:validateField":
+      case "data:validateSection":
+      case "data:validateStep":
+        this.isDataValidationConfig(t) && (t.type === "data:validateField" ? i.validation.validateField(t.targetId) : t.type === "data:validateSection" ? i.validation.validateSection(t.targetId) : i.validation.validateStep(t.targetId));
+        break;
+      // Custom Actions
+      case "custom:execute":
+        this.isCustomActionConfig(t) && await this.handleCustomAction(t, e);
+        break;
+      default:
+        console.warn(`Unknown action type: ${t.type}`);
+    }
+  }
+  /**
+   * Evaluate trigger conditions
+   */
+  evaluateConditions(e, a) {
+    if (e.length === 0)
+      return !0;
+    let i = this.evaluateCondition(e[0], a);
+    for (let t = 1; t < e.length; t++) {
+      const n = e[t], o = this.evaluateCondition(n, a);
+      (e[t - 1].logicalOperator || "AND") === "AND" ? i = i && o : i = i || o;
+    }
+    return i;
+  }
+  /**
+   * Evaluate a single condition
+   */
+  evaluateCondition(e, a) {
+    let i;
+    switch (e.field ? i = this.services.data.getValue(e.field) : i = a.currentValue, e.operator) {
+      case "equals":
+        return i === e.value;
+      case "notEquals":
+        return i !== e.value;
+      case "contains":
+        return String(i || "").includes(String(e.value || ""));
+      case "notContains":
+        return !String(i || "").includes(String(e.value || ""));
+      case "empty":
+        return i == null || i === "";
+      case "notEmpty":
+        return i != null && i !== "";
+      case "greaterThan":
+        return Number(i) > Number(e.value);
+      case "lessThan":
+        return Number(i) < Number(e.value);
+      case "greaterThanOrEqual":
+        return Number(i) >= Number(e.value);
+      case "lessThanOrEqual":
+        return Number(i) <= Number(e.value);
+      case "in":
+        return e.values ? e.values.includes(i) : !1;
+      case "notIn":
+        return e.values ? !e.values.includes(i) : !0;
+      case "matches":
+        try {
+          return new RegExp(String(e.value), "i").test(String(i || ""));
+        } catch {
+          return !1;
+        }
+      case "custom":
+        return this.evaluateCustomCondition(e, a);
+      default:
+        return console.warn(`Unknown condition operator: ${e.operator}`), !1;
+    }
+  }
+  /**
+   * Handle debouncing for triggers
+   */
+  handleDebounce(e, a) {
+    const i = `${e.id}-${a.targetId}`, t = this.debounceTimers.get(i);
+    t && clearTimeout(t);
+    const n = setTimeout(async () => {
+      this.debounceTimers.delete(i), e.actions && await this.executeActions(e.actions, a);
+    }, e.debounceMs);
+    this.debounceTimers.set(i, n);
+  }
+  /**
+   * Check if trigger is currently throttled
+   */
+  isThrottled(e) {
+    return this.throttleTimers.has(e);
+  }
+  /**
+   * Set throttle timer for trigger
+   */
+  setThrottle(e, a) {
+    const i = setTimeout(() => {
+      this.throttleTimers.delete(e);
+    }, a);
+    this.throttleTimers.set(e, i);
+  }
+  /**
+   * Clear all timers for a target
+   */
+  clearTimers(e) {
+    for (const [a, i] of Array.from(this.debounceTimers.entries()))
+      a.includes(e) && (clearTimeout(i), this.debounceTimers.delete(a));
+  }
+  /**
+   * Handle component-specific actions
+   */
+  handleComponentAction(e, a, i) {
+    for (const t of a) {
+      const n = `component:${e}`;
+      this.emitEvent(n, { componentId: t, context: i });
+    }
+  }
+  /**
+   * Handle original value updates
+   */
+  handleUpdateOriginalValue(e, a) {
+    this.emitEvent("component:updateOriginalValue", { componentId: e, context: a });
+  }
+  /**
+   * Handle custom actions
+   */
+  async handleCustomAction(e, a) {
+    this.emitEvent("action:custom", { config: e, context: a });
+  }
+  /**
+   * Evaluate custom conditions
+   */
+  evaluateCustomCondition(e, a) {
+    return console.warn(
+      `Custom condition evaluator not implemented: ${e.customEvaluator}`
+    ), !1;
+  }
+  /**
+   * Emit events for external handling
+   */
+  emitEvent(e, a) {
+    typeof window < "u" && window.dispatchEvent(new CustomEvent(e, { detail: a }));
+  }
+  /**
+   * Type guards for action config validation
+   */
+  isTypedActionConfig(e) {
+    return typeof e == "object" && e !== null && "type" in e && typeof e.type == "string";
+  }
+  isUIShowAlertConfig(e) {
+    return this.isTypedActionConfig(e) && e.type === "ui:showAlert" && "message" in e;
+  }
+  isUIShowDialogConfig(e) {
+    return this.isTypedActionConfig(e) && e.type === "ui:showDialog" && "dialogType" in e;
+  }
+  isUIShowNotificationConfig(e) {
+    return this.isTypedActionConfig(e) && e.type === "ui:showNotification" && "message" in e;
+  }
+  isNavigationGoToStepConfig(e) {
+    return this.isTypedActionConfig(e) && e.type === "navigation:goToStep" && "stepId" in e;
+  }
+  isNavigationGoNextConfig(e) {
+    return this.isTypedActionConfig(e) && e.type === "navigation:goNext";
+  }
+  isNavigationGoPreviousConfig(e) {
+    return this.isTypedActionConfig(e) && e.type === "navigation:goPrevious";
+  }
+  isNavigationGoToSectionConfig(e) {
+    return this.isTypedActionConfig(e) && e.type === "navigation:goToSection" && "sectionId" in e;
+  }
+  isComponentEnableConfig(e) {
+    return this.isTypedActionConfig(e) && e.type === "component:enable" && "componentIds" in e;
+  }
+  isComponentDisableConfig(e) {
+    return this.isTypedActionConfig(e) && e.type === "component:disable" && "componentIds" in e;
+  }
+  isComponentShowHideConfig(e) {
+    return this.isTypedActionConfig(e) && (e.type === "component:show" || e.type === "component:hide") && "componentIds" in e;
+  }
+  isComponentSetValueConfig(e) {
+    return this.isTypedActionConfig(e) && (e.type === "component:setValue" || e.type === "component:clearValue") && "componentId" in e;
+  }
+  isComponentUpdateOriginalValueConfig(e) {
+    return this.isTypedActionConfig(e) && e.type === "component:updateOriginalValue" && "componentId" in e;
+  }
+  isDataApiCallConfig(e) {
+    return this.isTypedActionConfig(e) && e.type === "data:apiCall" && "url" in e;
+  }
+  isDataSetValueConfig(e) {
+    return this.isTypedActionConfig(e) && (e.type === "data:setValue" || e.type === "data:clearValue") && "fieldPath" in e;
+  }
+  isDataValidationConfig(e) {
+    return this.isTypedActionConfig(e) && (e.type === "data:validateField" || e.type === "data:validateSection" || e.type === "data:validateStep") && "targetId" in e;
+  }
+  isCustomActionConfig(e) {
+    return this.isTypedActionConfig(e) && e.type === "custom:execute" && "handler" in e;
+  }
+  /**
+   * Cleanup resources
+   */
+  dispose() {
+    for (const e of Array.from(this.debounceTimers.values()))
+      clearTimeout(e);
+    for (const e of Array.from(this.throttleTimers.values()))
+      clearTimeout(e);
+    this.debounceTimers.clear(), this.throttleTimers.clear(), this.triggers.clear();
+  }
+}
+function u(s, e, a, i = {}) {
+  return {
+    triggerType: s,
+    context: e,
+    targetId: a,
+    currentValue: i.currentValue,
+    previousValue: i.previousValue,
+    formData: i.formData || {},
+    metadata: i.metadata || {},
+    timestamp: Date.now()
+  };
+}
+export {
+  l as GenericTriggerEngine,
+  u as createTriggerContext
+};

package/wizard/src/features/validation-system/components/ValidationDebugger.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { useFormContext as l } from "../../form-runtime/hooks/useFormContext.js";
+const p = () => {
+  const s = l();
+  return process.env.NODE_ENV !== "development" ? null : /* @__PURE__ */ t(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        // bottom: "10px",
+        top: "50px",
+        right: "10px",
+        width: "400px",
+        maxHeight: "300px",
+        overflow: "auto",
+        backgroundColor: "#1a1a1a",
+        color: "#fff",
+        padding: "10px",
+        fontSize: "12px",
+        borderRadius: "4px",
+        zIndex: 9999,
+        fontFamily: "monospace"
+      },
+      children: [
+        /* @__PURE__ */ i("strong", { children: "🔍 Validation Debug" }),
+        /* @__PURE__ */ i(s.Subscribe, { selector: (e) => e, children: (e) => /* @__PURE__ */ t("div", { children: [
+          /* @__PURE__ */ i("h4", { children: "Form State:" }),
+          /* @__PURE__ */ i("pre", { style: { fontSize: "10px", whiteSpace: "pre-wrap" }, children: JSON.stringify(
+            {
+              isValid: e.isValid,
+              isSubmitted: e.isSubmitted,
+              canSubmit: e.canSubmit,
+              errors: e.errors,
+              values: e.values
+            },
+            null,
+            2
+          ) }),
+          /* @__PURE__ */ i("h4", { children: "Field States:" }),
+          Object.keys(e.values || {}).map((o) => {
+            const r = s.getFieldApi?.(o)?.state;
+            return /* @__PURE__ */ t("details", { style: { marginBottom: "8px" }, children: [
+              /* @__PURE__ */ t("summary", { style: { cursor: "pointer", fontWeight: "bold" }, children: [
+                o,
+                " ",
+                r?.meta?.errors?.length ? `(${r.meta.errors.length} errors)` : ""
+              ] }),
+              /* @__PURE__ */ i("pre", { style: { fontSize: "10px", marginLeft: "10px" }, children: JSON.stringify(
+                {
+                  value: r?.value,
+                  isValid: r?.meta?.isValid,
+                  isTouched: r?.meta?.isTouched,
+                  errors: r?.meta?.errors,
+                  errorMap: r?.meta?.errorMap
+                },
+                null,
+                2
+              ) })
+            ] }, o);
+          })
+        ] }) })
+      ]
+    }
+  );
+};
+export {
+  p as default
+};