@digiform/wizard 0.3.1 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/features/form-runtime/components/FormFooter.d.ts +5 -0
  2. package/features/form-runtime/hooks/useValidationEvents.d.ts +0 -1
  3. package/features/state-management/machines/formMachine.d.ts +3 -0
  4. package/features/state-management/machines/types.d.ts +4 -0
  5. package/features/state-management/machines/useFormMachine.d.ts +18 -0
  6. package/package.json +1 -3
  7. package/styles.css +1 -1
  8. package/wizard/src/features/api-integration/services/ApiCallService.js +65 -74
  9. package/wizard/src/features/dialog-system/components/ActionDialog/ActionDialog.js +39 -43
  10. package/wizard/src/features/dialog-system/components/ConfirmationDialog/ConfirmationDialog.js +37 -41
  11. package/wizard/src/features/dialog-system/components/EmailVerificationDialog/EmailVerificationDialog.js +44 -45
  12. package/wizard/src/features/form-runtime/FormWizard/FormWizard.js +54 -79
  13. package/wizard/src/features/form-runtime/components/FormFooter.js +53 -184
  14. package/wizard/src/features/form-runtime/components/FormSection/FormSection.js +150 -194
  15. package/wizard/src/features/form-runtime/components/FormStep/FormStep.js +83 -92
  16. package/wizard/src/features/form-runtime/components/StepProgressIndicator/StepProgressIndicator.js +24 -30
  17. package/wizard/src/features/form-runtime/config/templateLoader.js +48 -55
  18. package/wizard/src/features/form-runtime/hooks/useComponentTriggers.js +44 -63
  19. package/wizard/src/features/form-runtime/hooks/useFieldEventHandlers.js +26 -40
  20. package/wizard/src/features/form-runtime/hooks/useValidationEvents.js +22 -25
  21. package/wizard/src/features/form-runtime/utils/formDirtyStateSync.js +26 -37
  22. package/wizard/src/features/form-runtime/utils/logger.js +12 -12
  23. package/wizard/src/features/state-management/machines/actions/navigationActions.js +13 -8
  24. package/wizard/src/features/state-management/machines/componentTriggerEngine.js +167 -432
  25. package/wizard/src/features/state-management/machines/formMachine.js +558 -677
  26. package/wizard/src/features/state-management/machines/useFormMachine.js +172 -190
  27. package/wizard/src/features/trigger-action-system/components/ActionManager.js +35 -86
  28. package/wizard/src/features/validation-system/validation/SchemaBuilder.js +28 -82
  29. package/wizard/src/features/validation-system/validation/ValidationCache.js +11 -27
  30. package/wizard/src/features/validation-system/validation/ValidationExecutor.js +26 -58
  31. package/features/form-runtime/utils/formSaver.d.ts +0 -22
  32. package/features/state-management/components/ValidationBuilder/ValidationBuilder.d.ts +0 -9
  33. package/features/state-management/machines/__tests__/setup.d.ts +0 -0
  34. package/features/state-management/machines/__tests__/vitest.config.d.ts +0 -2
  35. package/features/state-management/machines/actions/validationActions.d.ts +0 -68
  36. package/features/state-management/machines/lazyLoading.d.ts +0 -34
  37. package/features/state-management/machines/validation/index.d.ts +0 -5
  38. package/features/state-management/machines/validation/validateField.d.ts +0 -2
  39. package/features/state-management/machines/validation/validateForm.d.ts +0 -2
  40. package/features/state-management/machines/validation/validateSection.d.ts +0 -2
  41. package/features/state-management/machines/validation/validateStep.d.ts +0 -2
  42. package/features/state-management/machines/validation/validationTypes.d.ts +0 -1
  43. package/features/trigger-action-system/components/FieldWarning/FieldWarning.d.ts +0 -20
@@ -1,209 +1,78 @@
1
1
  "use client";
2
- import { jsx as f, jsxs as p } from "react/jsx-runtime";
3
- import { clsx as S } from "clsx";
2
+ import { jsx as h, jsxs as F } from "react/jsx-runtime";
3
+ import { clsx as b } from "clsx";
4
4
  /* empty css */
5
- import { useFormContext as V } from "../hooks/useFormContext.js";
6
- import { useFormEditing as y } from "../../../../../ui/src/lib/providers/FormEditingContext.js";
7
- import { useFormMachine as v } from "../../state-management/machines/useFormMachine.js";
8
- import { Button as E } from "@rijkshuisstijl-community/components-react";
9
- const M = ({
10
- navigation: l,
11
- children: d,
12
- isDisplayOnly: a = !1,
13
- onNext: g,
14
- isLastStep: m = !1,
5
+ import { useFormContext as S } from "../hooks/useFormContext.js";
6
+ import { useFormEditing as g } from "../../../../../ui/src/lib/providers/FormEditingContext.js";
7
+ import { useFormMachine as N } from "../../state-management/machines/useFormMachine.js";
8
+ import { Button as A } from "@rijkshuisstijl-community/components-react";
9
+ const I = ({
10
+ navigation: r,
11
+ children: a,
12
+ isDisplayOnly: e = !1,
13
+ onNext: c,
14
+ isLastStep: p = !1,
15
15
  isDisabled: n = !1,
16
- ...r
16
+ labels: i,
17
+ ...o
17
18
  }) => {
18
- const u = () => {
19
- a || n || g?.();
20
- };
21
- return /* @__PURE__ */ p(
19
+ const l = () => {
20
+ e || n || c?.();
21
+ }, m = r?.next?.label || (p ? i?.finish ?? "Voltooien" : i?.next ?? "Volgende");
22
+ return /* @__PURE__ */ F(
22
23
  "div",
23
24
  {
24
- className: S(
25
- (n || a) && "opacity-50",
26
- r.className
25
+ className: b(
26
+ (n || e) && "opacity-50",
27
+ o.className
27
28
  ),
28
- ...r,
29
+ ...o,
29
30
  children: [
30
- d,
31
- l?.next?.enabled !== !1 && /* @__PURE__ */ f(
32
- E,
31
+ a,
32
+ r?.next?.enabled !== !1 && /* @__PURE__ */ h(
33
+ A,
33
34
  {
34
35
  appearance: "primary-action-button",
35
- onClick: u,
36
- disabled: n || a,
37
- children: l?.next?.label || (m ? "Voltooien" : "Volgende")
36
+ onClick: l,
37
+ disabled: n || e,
38
+ children: m
38
39
  }
39
40
  )
40
41
  ]
41
42
  }
42
43
  );
43
- }, A = ({ children: l, ...d }) => {
44
- const { isEditing: a } = y(), [g, m, n] = v(), { currentStep: r, isLastStep: u } = n, { navigation: b } = r, e = V();
45
- return /* @__PURE__ */ f(
46
- M,
44
+ }, k = ({ children: r, labels: a, ...e }) => {
45
+ const { isEditing: c } = g(), [p, n, i] = N(), { currentStep: o, isLastStep: l, nextStep: m } = i, { navigation: u } = o, s = S(), x = () => {
46
+ const d = Object.keys(s.state.fieldMeta).filter((f) => {
47
+ const t = s.state.fieldMeta[f];
48
+ return !t.isValid && t.errors?.length > 0;
49
+ });
50
+ d.length > 0 && n({ type: "TRIGGER_STEP_VALIDATION", fieldIds: d });
51
+ };
52
+ return /* @__PURE__ */ h(
53
+ I,
47
54
  {
48
- navigation: b,
55
+ navigation: u,
49
56
  onNext: async () => {
57
+ if (!s.state.canSubmit) {
58
+ x();
59
+ return;
60
+ }
61
+ const f = (o.actions ?? []).some((t) => t.trigger === "onStepFinish");
50
62
  try {
51
- const c = r.actions || [], h = c.some(
52
- (s) => s.trigger === "onStepFinish"
53
- );
54
- if (console.log("🔍 [FormFooter] Starting form submission check:", {
55
- stepId: r.id,
56
- stepActions: c.length,
57
- hasFinishActions: h
58
- }), h) {
59
- const s = Object.keys(e.state.fieldMeta).map(
60
- (t) => {
61
- const o = e.state.fieldMeta[t], i = e.getFieldValue(t);
62
- return {
63
- fieldId: t,
64
- value: i,
65
- isValid: o.isValid,
66
- isDirty: o.isDirty,
67
- isTouched: o.isTouched,
68
- errors: o.errors,
69
- errorCount: o.errors?.length || 0
70
- };
71
- }
72
- );
73
- if (console.log(
74
- "🔍 [FormFooter] Step has finish actions - checking form state:",
75
- {
76
- canSubmit: e.state.canSubmit,
77
- isValid: e.state.isValid,
78
- isSubmitting: e.state.isSubmitting,
79
- fieldCount: Object.keys(e.state.fieldMeta).length,
80
- fieldAnalysis: s,
81
- formErrors: e.state.formErrors
82
- }
83
- ), console.log("📋 [FormFooter] Detailed field analysis:"), s.forEach((t, o) => {
84
- console.log(` Field ${o + 1}:`, {
85
- fieldId: t.fieldId,
86
- value: t.value,
87
- isValid: t.isValid,
88
- isDirty: t.isDirty,
89
- isTouched: t.isTouched,
90
- errors: t.errors,
91
- errorCount: t.errorCount
92
- });
93
- }), e.state.canSubmit)
94
- await e.handleSubmit();
95
- else {
96
- console.log(
97
- "🚫 [FormFooter] Form validation failed for step with finish actions, triggering error display:",
98
- {
99
- canSubmit: e.state.canSubmit,
100
- isValid: e.state.isValid,
101
- isSubmitting: e.state.isSubmitting,
102
- fieldMeta: e.state.fieldMeta,
103
- formErrors: e.state.formErrors
104
- }
105
- );
106
- const t = Object.keys(e.state.fieldMeta).filter(
107
- (o) => {
108
- const i = e.state.fieldMeta[o];
109
- return !i.isValid && i.errors?.length > 0;
110
- }
111
- );
112
- t.length > 0 && (console.log(
113
- `🔍 [FormFooter] Triggering error display for ${t.length} invalid fields:`,
114
- t
115
- ), window.dispatchEvent(
116
- new CustomEvent("triggerStepValidation", {
117
- detail: { fieldIds: t }
118
- })
119
- ));
120
- }
121
- } else {
122
- const s = Object.keys(e.state.fieldMeta).map(
123
- (t) => {
124
- const o = e.state.fieldMeta[t], i = e.getFieldValue(t);
125
- return {
126
- fieldId: t,
127
- value: i,
128
- isValid: o.isValid,
129
- isDirty: o.isDirty,
130
- isTouched: o.isTouched,
131
- errors: o.errors,
132
- errorCount: o.errors?.length || 0
133
- };
134
- }
135
- );
136
- if (console.log(
137
- "🔍 [FormFooter] Step has no finish actions - checking form state:",
138
- {
139
- canSubmit: e.state.canSubmit,
140
- isValid: e.state.isValid,
141
- isSubmitting: e.state.isSubmitting,
142
- fieldCount: Object.keys(e.state.fieldMeta).length,
143
- fieldAnalysis: s,
144
- formErrors: e.state.formErrors
145
- }
146
- ), console.log("📋 [FormFooter] Detailed field analysis:"), s.forEach((t, o) => {
147
- console.log(` Field ${o + 1}:`, {
148
- fieldId: t.fieldId,
149
- value: t.value,
150
- isValid: t.isValid,
151
- isDirty: t.isDirty,
152
- isTouched: t.isTouched,
153
- errors: t.errors,
154
- errorCount: t.errorCount
155
- });
156
- }), e.state.canSubmit) {
157
- const t = e.state.values, o = {};
158
- console.log("🔄 [FormFooter] Preparing form values for navigation:", {
159
- formValues: t,
160
- fieldIds: Object.keys(t)
161
- }), Object.keys(t).forEach((i) => {
162
- const F = e.getFieldValue(i);
163
- o[i] = F, console.log(`🔄 [FormFooter] Prepared field ${i}:`, F);
164
- }), m({
165
- type: "REQUEST_NAVIGATION",
166
- navigationType: "next"
167
- });
168
- } else {
169
- console.log(
170
- "🚫 [FormFooter] Form cannot be submitted (validation failed or form is submitting), triggering error display:",
171
- {
172
- canSubmit: e.state.canSubmit,
173
- isValid: e.state.isValid,
174
- isSubmitting: e.state.isSubmitting,
175
- fieldMeta: e.state.fieldMeta,
176
- formErrors: e.state.formErrors,
177
- values: e.state.values
178
- }
179
- );
180
- const t = Object.keys(e.state.fieldMeta).filter(
181
- (o) => {
182
- const i = e.state.fieldMeta[o];
183
- return !i.isValid && i.errors?.length > 0;
184
- }
185
- );
186
- t.length > 0 && (console.log(
187
- `🔍 [FormFooter] Triggering error display for ${t.length} invalid fields:`,
188
- t
189
- ), window.dispatchEvent(
190
- new CustomEvent("triggerStepValidation", {
191
- detail: { fieldIds: t }
192
- })
193
- ));
194
- }
195
- }
196
- } catch (c) {
197
- console.log("🚫 [FormFooter] Form submission failed:", c);
63
+ f ? await s.handleSubmit() : m();
64
+ } catch (t) {
65
+ console.error("Form submission failed:", t);
198
66
  }
199
67
  },
200
- isLastStep: u,
201
- isDisabled: a,
202
- ...d,
203
- children: /* @__PURE__ */ f(e.Subscribe, { children: l })
68
+ isLastStep: l,
69
+ isDisabled: c,
70
+ labels: a,
71
+ ...e,
72
+ children: /* @__PURE__ */ h(s.Subscribe, { children: r })
204
73
  }
205
74
  );
206
75
  };
207
76
  export {
208
- A as default
77
+ k as default
209
78
  };