@digiform/wizard 0.3.0 → 0.3.2

package/wizard/src/features/dialog-system/components/EmailVerificationDialog/EmailVerificationDialog.js

@@ -1,50 +1,49 @@
 "use client";
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
 /* empty css                                  */
 import { Alert as E, AlertDescription as $ } from "../../../../../../ui/src/components/alert/alert.js";
 import { Button as m } from "../../../../../../ui/src/components/button/button.js";
-import { Dialog as D, DialogContent as V, DialogHeader as x, DialogTitle as A, DialogDescription as L } from "../../../../../../ui/src/components/dialog/dialog.js";
+import { Dialog as x, DialogContent as D, DialogHeader as V, DialogTitle as A, DialogDescription as L } from "../../../../../../ui/src/components/dialog/dialog.js";
 import { ValidationCode as P } from "../../../../../../ui/src/components/ValidationCode/ValidationCode.js";
 import { CheckCircle as _, Mail as j, AlertCircle as q } from "lucide-react";
-import { memo as H, useState as f, useEffect as I, useCallback as W } from "react";
+import { memo as H, useState as f, useEffect as I, useCallback as O } from "react";
 import i from "./EmailVerificationDialog.module.css.js";
-const Y = H(
+const W = H(
   ({
     config: h,
-    formData: z,
-    onButtonClick: g,
-    onClose: F,
-    isOpen: u
+    formData: Y,
+    onButtonClick: u,
+    onClose: z,
+    isOpen: C
   }) => {
-    console.log("🔥 EmailVerificationDialog rendering!", { isOpen: u, config: h });
-    const t = h.templateMetadata, [c, C] = f(""), [n, r] = f("idle"), [p, l] = f(""), [d, v] = f(0), [b, k] = f(0);
+    const t = h.templateMetadata, [c, p] = f(""), [n, s] = f("idle"), [g, l] = f(""), [d, v] = f(0), [b, k] = f(0);
     I(() => {
       if (d > 0) {
-        const a = setTimeout(() => v(d - 1), 1e3);
-        return () => clearTimeout(a);
+        const o = setTimeout(() => v(d - 1), 1e3);
+        return () => clearTimeout(o);
       }
     }, [d]);
-    const N = W(async () => {
-      r("verifying");
-      const a = b + 1;
-      k(a);
+    const N = O(async () => {
+      s("verifying");
+      const o = b + 1;
+      k(o);
       try {
-        if (await new Promise((s) => setTimeout(s, 1500)), c === "123456" || c === "000000" || c === "111111")
-          r("success");
+        if (await new Promise((r) => setTimeout(r, 1500)), c === "123456" || c === "000000" || c === "111111")
+          s("success");
         else {
-          const s = t?.maxAttempts;
-          if (s && a >= s)
-            r("blocked"), l(
+          const r = t?.maxAttempts;
+          if (r && o >= r)
+            s("blocked"), l(
               "Maximum verification attempts exceeded. Please request a new verification code."
             );
           else {
-            r("error");
-            const M = s ? s - a : null, R = t?.errorMessage || "Invalid code. Please try again.", S = M ? ` (${M} attempts remaining)` : "";
+            s("error");
+            const M = r ? r - o : null, R = t?.errorMessage || "Invalid code. Please try again.", S = M ? ` (${M} attempts remaining)` : "";
             l(R + S);
           }
         }
       } catch {
-        r("error"), l(
+        s("error"), l(
           t?.errorMessage || "Verification failed. Please try again."
         );
       }
@@ -53,18 +52,18 @@ const Y = H(
       t?.errorMessage,
       t?.maxAttempts,
       b
-    ]), w = (a) => {
-      C(a), (n === "error" || n === "blocked") && (r("idle"), l(""));
-    }, T = (a) => {
-      console.log("completedCode", a), t?.enableAutoSubmit && n === "idle" && N();
+    ]), w = (o) => {
+      p(o), (n === "error" || n === "blocked") && (s("idle"), l(""));
+    }, T = (o) => {
+      t?.enableAutoSubmit && n === "idle" && N();
     }, y = () => {
-      v(t?.resendTimer || 60), C(""), r("idle"), l(""), k(0);
+      v(t?.resendTimer || 60), p(""), s("idle"), l(""), k(0);
     }, B = () => {
-      g({ type: "close" });
+      u({ type: "close" });
     };
-    return n === "success" ? /* @__PURE__ */ e(D, { open: u, onOpenChange: () => !1, children: /* @__PURE__ */ o(V, { className: i.dialogContent, children: [
-      /* @__PURE__ */ o(x, { children: [
-        /* @__PURE__ */ o("div", { className: i.headerRow, children: [
+    return n === "success" ? /* @__PURE__ */ e(x, { open: C, onOpenChange: () => !1, children: /* @__PURE__ */ a(D, { className: i.dialogContent, children: [
+      /* @__PURE__ */ a(V, { children: [
+        /* @__PURE__ */ a("div", { className: i.headerRow, children: [
           /* @__PURE__ */ e(_, { className: `${i.iconMd} ${i.iconSuccess}` }),
           /* @__PURE__ */ e(A, { children: t?.successTitle || "Verification Successful" })
         ] }),
@@ -73,7 +72,7 @@ const Y = H(
       /* @__PURE__ */ e("div", { className: i.successButtonRow, children: /* @__PURE__ */ e(
         m,
         {
-          onClick: () => g(
+          onClick: () => u(
             t?.onVerifiedAction || {
               type: "navigate",
               direction: "next"
@@ -83,16 +82,16 @@ const Y = H(
           children: t?.continueButtonLabel || "Continue"
         }
       ) })
-    ] }) }) : /* @__PURE__ */ e(D, { open: u, onOpenChange: () => !1, children: /* @__PURE__ */ o(V, { className: i.dialogContent, children: [
-      /* @__PURE__ */ o(x, { children: [
-        /* @__PURE__ */ o("div", { className: i.headerRow, children: [
+    ] }) }) : /* @__PURE__ */ e(x, { open: C, onOpenChange: () => !1, children: /* @__PURE__ */ a(D, { className: i.dialogContent, children: [
+      /* @__PURE__ */ a(V, { children: [
+        /* @__PURE__ */ a("div", { className: i.headerRow, children: [
           /* @__PURE__ */ e(j, { className: `${i.iconMd} ${i.iconMail}` }),
           /* @__PURE__ */ e(A, { children: h.title })
         ] }),
         /* @__PURE__ */ e(L, { children: h.content })
       ] }),
-      /* @__PURE__ */ o("div", { className: i.formContent, children: [
-        /* @__PURE__ */ o("div", { className: i.codeSection, children: [
+      /* @__PURE__ */ a("div", { className: i.formContent, children: [
+        /* @__PURE__ */ a("div", { className: i.codeSection, children: [
           /* @__PURE__ */ e("div", { className: i.codeLabel, children: "Verification Code" }),
           /* @__PURE__ */ e("div", { className: i.codeCenter, children: /* @__PURE__ */ e(
             P,
@@ -105,9 +104,9 @@ const Y = H(
             }
           ) })
         ] }),
-        (n === "error" || n === "blocked") && p && /* @__PURE__ */ o(E, { variant: "destructive", children: [
+        (n === "error" || n === "blocked") && g && /* @__PURE__ */ a(E, { variant: "destructive", children: [
           /* @__PURE__ */ e(q, { className: i.iconSm }),
-          /* @__PURE__ */ e($, { children: p })
+          /* @__PURE__ */ e($, { children: g })
         ] }),
         t?.enableResend && n !== "blocked" && /* @__PURE__ */ e("div", { className: i.resendText, children: d > 0 ? `Resend code in ${d}s` : /* @__PURE__ */ e(
           m,
@@ -128,7 +127,7 @@ const Y = H(
           }
         ) })
       ] }),
-      /* @__PURE__ */ o("div", { className: i.footerButtonRow, children: [
+      /* @__PURE__ */ a("div", { className: i.footerButtonRow, children: [
         /* @__PURE__ */ e(m, { variant: "secondary", onClick: B, children: t?.cancelButtonLabel || "Cancel" }),
         /* @__PURE__ */ e(
           m,
@@ -142,8 +141,8 @@ const Y = H(
     ] }) });
   }
 );
-Y.displayName = "EmailVerificationDialog";
+W.displayName = "EmailVerificationDialog";
 export {
-  Y as EmailVerificationDialog,
-  Y as default
+  W as EmailVerificationDialog,
+  W as default
 };

package/wizard/src/features/form-runtime/FormWizard/FormWizard.js

@@ -1,107 +1,85 @@
 "use client";
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { useFormMachineProvider as E, FormMachineContext as z } from "../../state-management/machines/useFormMachine.js";
-import { ActionManager as M } from "../../trigger-action-system/components/ActionManager.js";
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { wizardDefaultRenderer as E } from "../../../renderer/wizardRenderer.js";
 /* empty css                               */
 import { FormLayout as s } from "../../../../../ui/src/components/FormLayout/FormLayout.js";
-import { formWizardQueryClient as N } from "../../../../../ui/src/lib/queryClient.js";
-import { QueryClientProvider as W } from "@tanstack/react-query";
-import { clsx as g } from "clsx";
-import { memo as w, useState as h, useEffect as L, useMemo as u } from "react";
-import n from "./FormWizard.module.css.js";
-import P from "../components/FormStep/FormStep.js";
-import T from "../components/StepProgressIndicator/StepProgressIndicator.js";
-import { hasTemplateSteps as I, resolveFormWizardConfig as x } from "../config/configResolver.js";
-import { ThemeProvider as b, useThemeConfig as U } from "../../../../../ui/src/theme/ThemeProvider.js";
-import j from "../../../../../ui/src/lib/error-boundaries/FormWizardErrorBoundary.js";
-import { FormEditingProvider as O } from "../../../../../ui/src/lib/providers/FormEditingContext.js";
-import m from "../../../../../ui/src/lib/error-boundaries/ComponentErrorBoundary.js";
-import { ValidationEngine as V } from "../../validation-system/validation/ValidationEngine.js";
-import { Heading as k } from "@rijkshuisstijl-community/components-react";
-const v = w(
+import { formWizardQueryClient as z } from "../../../../../ui/src/lib/queryClient.js";
+import { QueryClientProvider as N } from "@tanstack/react-query";
+import { clsx as u } from "clsx";
+import { memo as M, useState as h, useEffect as P, useMemo as g } from "react";
+import t from "./FormWizard.module.css.js";
+import W from "../components/FormStep/FormStep.js";
+import w from "../components/StepProgressIndicator/StepProgressIndicator.js";
+import { hasTemplateSteps as x, resolveFormWizardConfig as L } from "../config/configResolver.js";
+import { ThemeProvider as T, useThemeConfig as I } from "../../../../../ui/src/theme/ThemeProvider.js";
+import { useFormMachineProvider as R, FormMachineContext as j } from "../../state-management/machines/useFormMachine.js";
+import A from "../../../../../ui/src/lib/error-boundaries/FormWizardErrorBoundary.js";
+import { FormEditingProvider as B } from "../../../../../ui/src/lib/providers/FormEditingContext.js";
+import l from "../../../../../ui/src/lib/error-boundaries/ComponentErrorBoundary.js";
+import { ActionManager as H } from "../../trigger-action-system/components/ActionManager.js";
+import { registerRenderComponent as Q } from "../../../../../ui/src/component-registry/renderComponent.js";
+import { ValidationEngine as b } from "../../validation-system/validation/ValidationEngine.js";
+import { Heading as D } from "@rijkshuisstijl-community/components-react";
+Q(E);
+const v = M(
   ({
-    config: r,
-    initialData: a = {},
-    onSubmit: y,
-    queryClient: C = N
+    config: e,
+    initialData: n = {},
+    onSubmit: C,
+    queryClient: y = z
   }) => {
-    console.log(
-      "🏁 [FormWizard] FormWizardCore component MOUNTING with config:",
-      {
-        configId: r.id,
-        configTitle: r.title,
-        stepCount: r.steps?.length,
-        validationMessageStyle: r.validationMessageStyle,
-        hasInitialData: Object.keys(a).length > 0
-      }
-    ), typeof window < "u" && setTimeout(() => {
-      console.log(
-        "🚨 [FormWizard] MOUNTED SUCCESSFULLY - Check console for detailed logs"
-      );
-    }, 100);
-    const [t, d] = h(null), [c, f] = h(null);
-    L(() => {
+    const [i, d] = h(null), [c, f] = h(null);
+    P(() => {
       (async () => {
         try {
-          if (f(null), I(r)) {
-            const o = await x(r);
+          if (f(null), x(e)) {
+            const o = await L(e);
             d(o);
           } else
-            d(r);
+            d(e);
         } catch (o) {
           f(
             o instanceof Error ? o.message : "Failed to resolve configuration"
           ), console.error("Error resolving form configuration:", o);
         }
       })();
-    }, [r]);
-    const p = u(() => {
-      console.log(
-        "🚀 [FormWizard] Creating ValidationEngine with messageStyle:",
-        r.validationMessageStyle || "withLabel"
-      );
-      const i = new V({
-        messageStyle: r.validationMessageStyle || "withLabel"
-      });
-      return console.log("✅ [FormWizard] ValidationEngine created:", {
-        engine: !!i,
-        validateField: typeof i.validateField,
-        messageStyle: r.validationMessageStyle || "withLabel"
-      }), i;
-    }, [r.validationMessageStyle]), S = u(() => t ? {
-      ...t,
-      steps: t.steps.map((i) => {
-        const o = i;
+    }, [e]);
+    const p = g(() => new b({
+      messageStyle: e.validationMessageStyle || "withLabel"
+    }), [e.validationMessageStyle]), S = g(() => i ? {
+      ...i,
+      steps: i.steps.map((m) => {
+        const o = m;
         return {
           ...o,
           schema: o.schema || p.getStepSchema(o)
         };
       })
-    } : null, [t, p]), F = E({
-      config: S || r,
+    } : null, [i, p]), F = R({
+      config: S || e,
       // Fallback to original config if resolution fails
-      initialData: a,
-      onSubmit: y
+      initialData: n,
+      onSubmit: C
     });
-    return c ? /* @__PURE__ */ l("div", { className: g("form-wizard-error", n.errorState), children: [
-      /* @__PURE__ */ e("h3", { className: n.errorHeading, children: "Configuration Error" }),
-      /* @__PURE__ */ e("p", { children: c })
-    ] }) : t ? /* @__PURE__ */ e(W, { client: C, children: /* @__PURE__ */ e(j, { formId: r.id, children: /* @__PURE__ */ e(O, { children: /* @__PURE__ */ l(z.Provider, { value: F, children: [
-      /* @__PURE__ */ e(m, { componentName: "ActionManager", children: /* @__PURE__ */ e(M, {}) }),
-      /* @__PURE__ */ l(s, { className: n.formLayout, children: [
-        /* @__PURE__ */ e(s.Title, { children: /* @__PURE__ */ e(k, { level: 1, children: r.title }) }),
-        /* @__PURE__ */ e(s.LeftColumn, { children: /* @__PURE__ */ e(m, { componentName: "StepProgressIndicator", children: /* @__PURE__ */ e(T, {}) }) }),
-        /* @__PURE__ */ e(m, { componentName: "FormStep", children: /* @__PURE__ */ e(P, {}) })
+    return c ? /* @__PURE__ */ a("div", { className: u("form-wizard-error", t.errorState), children: [
+      /* @__PURE__ */ r("h3", { className: t.errorHeading, children: "Configuration Error" }),
+      /* @__PURE__ */ r("p", { children: c })
+    ] }) : i ? /* @__PURE__ */ r(N, { client: y, children: /* @__PURE__ */ r(A, { formId: e.id, children: /* @__PURE__ */ r(B, { children: /* @__PURE__ */ a(j.Provider, { value: F, children: [
+      /* @__PURE__ */ r(l, { componentName: "ActionManager", children: /* @__PURE__ */ r(H, {}) }),
+      /* @__PURE__ */ a(s, { className: t.formLayout, children: [
+        /* @__PURE__ */ r(s.Title, { children: /* @__PURE__ */ r(D, { level: 1, children: e.title }) }),
+        /* @__PURE__ */ r(s.LeftColumn, { children: /* @__PURE__ */ r(l, { componentName: "StepProgressIndicator", children: /* @__PURE__ */ r(w, {}) }) }),
+        /* @__PURE__ */ r(l, { componentName: "FormStep", children: /* @__PURE__ */ r(W, {}) })
       ] })
-    ] }) }) }) }) : /* @__PURE__ */ e("div", { className: g("form-wizard-loading", n.loadingState), children: /* @__PURE__ */ e("div", { className: n.loadingPulse, children: "Loading form templates..." }) });
+    ] }) }) }) }) : /* @__PURE__ */ r("div", { className: u("form-wizard-loading", t.loadingState), children: /* @__PURE__ */ r("div", { className: t.loadingPulse, children: "Loading form templates..." }) });
   }
 );
 v.displayName = "FormWizardCore";
-const A = (r) => {
-  const a = U();
-  return /* @__PURE__ */ e(b, { config: a, children: /* @__PURE__ */ e(v, { ...r }) });
+const V = (e) => {
+  const n = I();
+  return /* @__PURE__ */ r(T, { config: n, children: /* @__PURE__ */ r(v, { ...e }) });
 };
-A.displayName = "FormWizard";
+V.displayName = "FormWizard";
 export {
-  A as default
+  V as default
 };

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

@@ -1,42 +1,42 @@
 "use client";
 import { jsx as n, jsxs as p } from "react/jsx-runtime";
-import { useFormMachine as M } from "../../state-management/machines/useFormMachine.js";
 import { ComponentAlerts as F } from "../../trigger-action-system/components/ComponentAlert/ComponentAlert.js";
 /* empty css                               */
-import { memo as N, useMemo as x } from "react";
-import { adaptComponentForRegistry as _ } from "../ComponentAdapterComplete/ComponentAdapterComplete.js";
-import { useComponentTriggers as B } from "../hooks/useComponentTriggers.js";
-import { useComponentVisibility as H } from "../hooks/useComponentVisibility.js";
-import { useFieldEventHandlers as O } from "../hooks/useFieldEventHandlers.js";
-import { useFormContext as U } from "../hooks/useFormContext.js";
-import { useFormFieldState as G } from "../hooks/useFormFieldState.js";
-import { useValidationEvents as z } from "../hooks/useValidationEvents.js";
-import { checkHasIsDirtyTriggers as P, shouldBeFormField as j, checkFieldHasValue as q, getValidationDisplayState as J, shouldShowComponentAlerts as W, shouldShowDisplayMode as X } from "../utils/fieldHelpers.js";
+import { memo as M, useMemo as N } from "react";
+import { adaptComponentForRegistry as x } from "../ComponentAdapterComplete/ComponentAdapterComplete.js";
+import { useComponentTriggers as _ } from "../hooks/useComponentTriggers.js";
+import { useComponentVisibility as B } from "../hooks/useComponentVisibility.js";
+import { useFieldEventHandlers as H } from "../hooks/useFieldEventHandlers.js";
+import { useFormContext as O } from "../hooks/useFormContext.js";
+import { useFormFieldState as U } from "../hooks/useFormFieldState.js";
+import { useValidationEvents as G } from "../hooks/useValidationEvents.js";
+import { checkHasIsDirtyTriggers as z, shouldBeFormField as P, checkFieldHasValue as j, getValidationDisplayState as q, shouldShowComponentAlerts as J, shouldShowDisplayMode as W } from "../utils/fieldHelpers.js";
 import { logger as e } from "../utils/logger.js";
 import { updateValidationCache as C } from "../utils/validationUX.js";
-import { ProgressLoaderRuntime as Z } from "./ProgressLoaderRuntime.js";
-import { DisplayModeRenderer as K } from "./renderers/DisplayModeRenderer/DisplayModeRenderer.js";
-import { InteractiveFieldRenderer as Q } from "./renderers/InteractiveFieldRenderer/InteractiveFieldRenderer.js";
+import { ProgressLoaderRuntime as X } from "./ProgressLoaderRuntime.js";
+import { DisplayModeRenderer as Z } from "./renderers/DisplayModeRenderer/DisplayModeRenderer.js";
+import { InteractiveFieldRenderer as K } from "./renderers/InteractiveFieldRenderer/InteractiveFieldRenderer.js";
+import { useFormMachine as Q } from "../../state-management/machines/useFormMachine.js";
 import Y from "../../../../../ui/src/lib/error-boundaries/ComponentErrorBoundary.js";
-const ii = N(
+const ii = M(
   ({ component: i, readOnly: V = !1 }) => {
-    const [D, ai, g] = M(), c = U(), { isVisible: T } = H({
+    const [D, ai, g] = Q(), c = O(), { isVisible: T } = B({
       visibilityConditions: i.visibilityConditions,
       formData: D.context.data
-    }), { forceShowValidation: A, resetValidationState: $ } = z({
+    }), { forceShowValidation: A, resetValidationState: $ } = G({
       componentId: i.id
-    }), y = P(i), { originalValueFromMachine: b, initializeField: R, getEnhancedIsDirty: S } = G({
+    }), y = z(i), { originalValueFromMachine: b, initializeField: R, getEnhancedIsDirty: S } = U({
       componentId: i.id,
       hasIsDirtyTriggers: y
-    }), { handleChange: L, handleBlur: k } = O({
+    }), { handleChange: L, handleBlur: k } = H({
       componentId: i.id,
       hasIsDirtyTriggers: y,
       originalValueFromMachine: b,
       getEnhancedIsDirty: S,
       resetValidationState: $
-    }), f = B({
+    }), f = _({
       componentId: i.id
-    }), m = x(() => {
+    }), m = N(() => {
       const a = g.validationEngine;
       return e.debug(`ValidationEngine instance check for ${i.id}:`, {
         validationEngine: !!a,
@@ -156,7 +156,7 @@ const ii = N(
       validationRules: i.validation,
       validationEngineExists: !!g.validationEngine
     });
-    const w = j(i);
+    const w = P(i);
     if (i.validation && g.validationEngine)
       try {
         const a = g.validationEngine.validateField(
@@ -316,21 +316,21 @@ const ii = N(
                         r
                       );
                     }
-                  const s = q(t, i.type), d = X(
+                  const s = j(t, i.type), d = W(
                     V,
                     s
-                  ), { isSubmitAttempted: u } = J(
+                  ), { isSubmitAttempted: u } = q(
                     a.state.meta,
                     c.state,
                     A
-                  ), o = W(
+                  ), o = J(
                     y,
                     l,
                     f.alerts.length
                   );
                   return d && I ? /* @__PURE__ */ p("div", { children: [
                     /* @__PURE__ */ n(
-                      K,
+                      Z,
                       {
                         component: i,
                         fieldValue: t
@@ -339,7 +339,7 @@ const ii = N(
                     o && f.alerts.length > 0 && /* @__PURE__ */ n(F, { alerts: f.alerts })
                   ] }) : /* @__PURE__ */ p("div", { children: [
                     /* @__PURE__ */ n(
-                      Q,
+                      K,
                       {
                         component: i,
                         field: a,
@@ -369,14 +369,14 @@ const ii = N(
             ) : i.type === "progress-loader" ? (
               // Special handling for progress-loader: use runtime wrapper for auto-start
               /* @__PURE__ */ n(
-                Z,
+                X,
                 {
                   properties: i.properties || {}
                 }
               )
             ) : (
               // For display-only components, render directly without form.Field wrapper
-              _(
+              x(
                 i,
                 null,
                 // no form value