@digiform/wizard 0.3.0 → 0.3.1

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 (58) hide show
  1. package/core/src/types/guards.js +0 -12
  2. package/core/src/utils/apiBodyUtils.js +43 -75
  3. package/index.d.ts +2 -8
  4. package/index.js +2 -108
  5. package/package.json +1 -28
  6. package/styles.css +1 -1
  7. package/ui/src/lib/utils/templateUtils.js +11 -43
  8. package/wizard/src/features/form-runtime/FormWizard/FormWizard.js +36 -33
  9. package/wizard/src/features/form-runtime/components/FormField.js +28 -28
  10. package/wizard/src/features/form-runtime/components/FormFooter.js +4 -4
  11. package/wizard/src/features/form-runtime/components/FormSection/FormSection.js +19 -19
  12. package/wizard/src/features/form-runtime/components/FormStep/FormStep.js +21 -21
  13. package/wizard/src/features/form-runtime/components/StepProgressIndicator/StepProgressIndicator.js +1 -1
  14. package/wizard/src/features/form-runtime/config/configResolver.js +10 -14
  15. package/wizard/src/features/form-runtime/config/templateLoader.js +82 -112
  16. package/wizard/src/features/form-runtime/hooks/useComponentTriggers.js +42 -66
  17. package/wizard/src/features/form-runtime/hooks/useFieldEventHandlers.js +3 -3
  18. package/wizard/src/features/form-runtime/hooks/useFormFieldState.js +5 -5
  19. package/wizard/src/features/form-runtime/utils/errorUtils.js +31 -42
  20. package/wizard/src/features/form-runtime/utils/validationUX.js +14 -55
  21. package/wizard/src/features/state-management/machines/useFormMachine.js +3 -3
  22. package/wizard/src/features/trigger-action-system/components/ActionManager.js +4 -4
  23. package/wizard/src/features/validation-system/validation/ValidationEngine.js +24 -29
  24. package/FormWizard.d.ts +0 -10
  25. package/core/src/types/api.js +0 -12
  26. package/core/src/types/form-config.js +0 -60
  27. package/core/src/types/form-wizard-config-schema.js +0 -113
  28. package/core/src/types/validation.js +0 -61
  29. package/features/api-integration.d.ts +0 -2
  30. package/features/api-integration.js +0 -17
  31. package/features/dialog-system.d.ts +0 -2
  32. package/features/dialog-system.js +0 -9
  33. package/features/form-runtime.d.ts +0 -2
  34. package/features/form-runtime.js +0 -63
  35. package/features/index.d.ts +0 -11
  36. package/features/state-management.d.ts +0 -2
  37. package/features/state-management.js +0 -21
  38. package/features/trigger-action-system.d.ts +0 -2
  39. package/features/trigger-action-system.js +0 -12
  40. package/features/validation-system.d.ts +0 -2
  41. package/features/validation-system.js +0 -23
  42. package/styles/index.d.ts +0 -0
  43. package/ui/src/components/badge/badge.js +0 -20
  44. package/ui/src/components/badge/badge.module.css.js +0 -12
  45. package/wizard/src/features/api-integration/services/ActionExecutor.js +0 -339
  46. package/wizard/src/features/api-integration/services/ApiCallExecutor.js +0 -6
  47. package/wizard/src/features/api-integration/services/DialogExecutor.js +0 -6
  48. package/wizard/src/features/api-integration/services/GenericTriggerService.js +0 -284
  49. package/wizard/src/features/api-integration/services/NavigationExecutor.js +0 -6
  50. package/wizard/src/features/form-runtime/config/templateConfig.js +0 -156
  51. package/wizard/src/features/form-runtime/config/templateUtils.js +0 -14
  52. package/wizard/src/features/form-runtime/utils/validation.js +0 -100
  53. package/wizard/src/features/trigger-action-system/components/ActionLoadingIndicator/ActionLoadingIndicator.js +0 -46
  54. package/wizard/src/features/trigger-action-system/components/ActionLoadingIndicator/ActionLoadingIndicator.module.css.js +0 -30
  55. package/wizard/src/features/trigger-action-system/utils/GenericTriggerEngine.js +0 -376
  56. package/wizard/src/features/validation-system/components/ValidationDebugger.js +0 -69
  57. package/wizard/src/features/validation-system/validation/tanstackSchemaAdapter.js +0 -17
  58. package/wizard/src/features/validation-system/validation/validationService.js +0 -74
@@ -1,376 +0,0 @@
1
- "use client";
2
- class l {
3
- constructor(e) {
4
- this.services = e;
5
- }
6
- triggers = /* @__PURE__ */ new Map();
7
- debounceTimers = /* @__PURE__ */ new Map();
8
- throttleTimers = /* @__PURE__ */ new Map();
9
- /**
10
- * Register triggers for a specific context and target
11
- */
12
- registerTriggers(e, a) {
13
- this.triggers.set(
14
- e,
15
- a.filter((i) => i.enabled !== !1)
16
- );
17
- }
18
- /**
19
- * Unregister triggers for a target
20
- */
21
- unregisterTriggers(e) {
22
- this.triggers.delete(e), this.clearTimers(e);
23
- }
24
- /**
25
- * Evaluate triggers for a given context
26
- */
27
- async evaluateTriggers(e) {
28
- const a = this.triggers.get(e.targetId);
29
- if (!a || a.length === 0)
30
- return;
31
- const i = a.filter(
32
- (n) => n.type === e.triggerType
33
- );
34
- if (i.length === 0)
35
- return;
36
- const t = i.sort(
37
- (n, o) => (n.order || 0) - (o.order || 0)
38
- );
39
- for (const n of t)
40
- await this.executeTrigger(n, e);
41
- }
42
- /**
43
- * Execute a single trigger
44
- */
45
- async executeTrigger(e, a) {
46
- if (!(e.conditions && e.conditions.length > 0 && !this.evaluateConditions(
47
- e.conditions,
48
- a
49
- ))) {
50
- if (e.debounceMs && e.debounceMs > 0) {
51
- this.handleDebounce(e, a);
52
- return;
53
- }
54
- if (e.throttleMs && e.throttleMs > 0) {
55
- if (this.isThrottled(e.id))
56
- return;
57
- this.setThrottle(e.id, e.throttleMs);
58
- }
59
- e.actions && await this.executeActions(e.actions, a);
60
- }
61
- }
62
- /**
63
- * Execute actions for a trigger
64
- */
65
- async executeActions(e, a) {
66
- const i = e.filter((t) => t.enabled !== !1).sort((t, n) => (t.order || 0) - (n.order || 0));
67
- for (const t of i)
68
- await this.executeAction(t, a);
69
- }
70
- /**
71
- * Execute a single action
72
- */
73
- async executeAction(e, a) {
74
- if (e.condition && !this.evaluateConditions(
75
- [e.condition],
76
- a
77
- ))
78
- return;
79
- e.delay && e.delay > 0 && await new Promise((t) => setTimeout(t, e.delay));
80
- const i = {
81
- action: e,
82
- triggerContext: a,
83
- formData: a.formData,
84
- services: this.services
85
- };
86
- try {
87
- await this.dispatchAction(i);
88
- } catch (t) {
89
- console.error(`Failed to execute action ${e.id}:`, t);
90
- }
91
- }
92
- /**
93
- * Dispatch action to appropriate handler based on type
94
- */
95
- async dispatchAction(e) {
96
- const { action: a, services: i } = e, t = a.config;
97
- if (!this.isTypedActionConfig(t)) {
98
- console.warn("Action config is missing type property", t);
99
- return;
100
- }
101
- switch (t.type) {
102
- // UI Actions
103
- case "ui:showAlert":
104
- this.isUIShowAlertConfig(t) && i.ui.showAlert(t);
105
- break;
106
- case "ui:showDialog":
107
- this.isUIShowDialogConfig(t) && i.ui.showDialog(t);
108
- break;
109
- case "ui:showNotification":
110
- this.isUIShowNotificationConfig(t) && i.ui.showNotification(t);
111
- break;
112
- case "ui:hideDialog":
113
- i.ui.hideDialog();
114
- break;
115
- // Navigation Actions
116
- case "navigation:goToStep":
117
- this.isNavigationGoToStepConfig(t) && i.navigation.goToStep(t.stepId, t.behavior);
118
- break;
119
- case "navigation:goNext":
120
- this.isNavigationGoNextConfig(t) && i.navigation.goNext(t.skipValidation);
121
- break;
122
- case "navigation:goPrevious":
123
- this.isNavigationGoPreviousConfig(t) && i.navigation.goPrevious(t.skipValidation);
124
- break;
125
- case "navigation:goToSection":
126
- this.isNavigationGoToSectionConfig(t) && i.navigation.goToSection(t.sectionId, t.stepId);
127
- break;
128
- // Component Actions
129
- case "component:enable":
130
- this.isComponentEnableConfig(t) && this.handleComponentAction("enable", t.componentIds, e);
131
- break;
132
- case "component:disable":
133
- this.isComponentDisableConfig(t) && this.handleComponentAction("disable", t.componentIds, e);
134
- break;
135
- case "component:show":
136
- case "component:hide":
137
- if (this.isComponentShowHideConfig(t)) {
138
- const n = t.type === "component:show" ? "show" : "hide";
139
- this.handleComponentAction(n, t.componentIds, e);
140
- }
141
- break;
142
- case "component:setValue":
143
- case "component:clearValue":
144
- this.isComponentSetValueConfig(t) && (t.type === "component:setValue" ? i.data.setValue(
145
- `component.${t.componentId}`,
146
- t.value
147
- ) : i.data.clearValue(`component.${t.componentId}`));
148
- break;
149
- case "component:updateOriginalValue":
150
- this.isComponentUpdateOriginalValueConfig(t) && this.handleUpdateOriginalValue(t.componentId, e);
151
- break;
152
- // Data Actions
153
- case "data:apiCall":
154
- this.isDataApiCallConfig(t) && await i.data.apiCall(t);
155
- break;
156
- case "data:setValue":
157
- case "data:clearValue":
158
- this.isDataSetValueConfig(t) && (t.type === "data:setValue" ? i.data.setValue(t.fieldPath, t.value) : i.data.clearValue(t.fieldPath));
159
- break;
160
- case "data:validateField":
161
- case "data:validateSection":
162
- case "data:validateStep":
163
- 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));
164
- break;
165
- // Custom Actions
166
- case "custom:execute":
167
- this.isCustomActionConfig(t) && await this.handleCustomAction(t, e);
168
- break;
169
- default:
170
- console.warn(`Unknown action type: ${t.type}`);
171
- }
172
- }
173
- /**
174
- * Evaluate trigger conditions
175
- */
176
- evaluateConditions(e, a) {
177
- if (e.length === 0)
178
- return !0;
179
- let i = this.evaluateCondition(e[0], a);
180
- for (let t = 1; t < e.length; t++) {
181
- const n = e[t], o = this.evaluateCondition(n, a);
182
- (e[t - 1].logicalOperator || "AND") === "AND" ? i = i && o : i = i || o;
183
- }
184
- return i;
185
- }
186
- /**
187
- * Evaluate a single condition
188
- */
189
- evaluateCondition(e, a) {
190
- let i;
191
- switch (e.field ? i = this.services.data.getValue(e.field) : i = a.currentValue, e.operator) {
192
- case "equals":
193
- return i === e.value;
194
- case "notEquals":
195
- return i !== e.value;
196
- case "contains":
197
- return String(i || "").includes(String(e.value || ""));
198
- case "notContains":
199
- return !String(i || "").includes(String(e.value || ""));
200
- case "empty":
201
- return i == null || i === "";
202
- case "notEmpty":
203
- return i != null && i !== "";
204
- case "greaterThan":
205
- return Number(i) > Number(e.value);
206
- case "lessThan":
207
- return Number(i) < Number(e.value);
208
- case "greaterThanOrEqual":
209
- return Number(i) >= Number(e.value);
210
- case "lessThanOrEqual":
211
- return Number(i) <= Number(e.value);
212
- case "in":
213
- return e.values ? e.values.includes(i) : !1;
214
- case "notIn":
215
- return e.values ? !e.values.includes(i) : !0;
216
- case "matches":
217
- try {
218
- return new RegExp(String(e.value), "i").test(String(i || ""));
219
- } catch {
220
- return !1;
221
- }
222
- case "custom":
223
- return this.evaluateCustomCondition(e, a);
224
- default:
225
- return console.warn(`Unknown condition operator: ${e.operator}`), !1;
226
- }
227
- }
228
- /**
229
- * Handle debouncing for triggers
230
- */
231
- handleDebounce(e, a) {
232
- const i = `${e.id}-${a.targetId}`, t = this.debounceTimers.get(i);
233
- t && clearTimeout(t);
234
- const n = setTimeout(async () => {
235
- this.debounceTimers.delete(i), e.actions && await this.executeActions(e.actions, a);
236
- }, e.debounceMs);
237
- this.debounceTimers.set(i, n);
238
- }
239
- /**
240
- * Check if trigger is currently throttled
241
- */
242
- isThrottled(e) {
243
- return this.throttleTimers.has(e);
244
- }
245
- /**
246
- * Set throttle timer for trigger
247
- */
248
- setThrottle(e, a) {
249
- const i = setTimeout(() => {
250
- this.throttleTimers.delete(e);
251
- }, a);
252
- this.throttleTimers.set(e, i);
253
- }
254
- /**
255
- * Clear all timers for a target
256
- */
257
- clearTimers(e) {
258
- for (const [a, i] of Array.from(this.debounceTimers.entries()))
259
- a.includes(e) && (clearTimeout(i), this.debounceTimers.delete(a));
260
- }
261
- /**
262
- * Handle component-specific actions
263
- */
264
- handleComponentAction(e, a, i) {
265
- for (const t of a) {
266
- const n = `component:${e}`;
267
- this.emitEvent(n, { componentId: t, context: i });
268
- }
269
- }
270
- /**
271
- * Handle original value updates
272
- */
273
- handleUpdateOriginalValue(e, a) {
274
- this.emitEvent("component:updateOriginalValue", { componentId: e, context: a });
275
- }
276
- /**
277
- * Handle custom actions
278
- */
279
- async handleCustomAction(e, a) {
280
- this.emitEvent("action:custom", { config: e, context: a });
281
- }
282
- /**
283
- * Evaluate custom conditions
284
- */
285
- evaluateCustomCondition(e, a) {
286
- return console.warn(
287
- `Custom condition evaluator not implemented: ${e.customEvaluator}`
288
- ), !1;
289
- }
290
- /**
291
- * Emit events for external handling
292
- */
293
- emitEvent(e, a) {
294
- typeof window < "u" && window.dispatchEvent(new CustomEvent(e, { detail: a }));
295
- }
296
- /**
297
- * Type guards for action config validation
298
- */
299
- isTypedActionConfig(e) {
300
- return typeof e == "object" && e !== null && "type" in e && typeof e.type == "string";
301
- }
302
- isUIShowAlertConfig(e) {
303
- return this.isTypedActionConfig(e) && e.type === "ui:showAlert" && "message" in e;
304
- }
305
- isUIShowDialogConfig(e) {
306
- return this.isTypedActionConfig(e) && e.type === "ui:showDialog" && "dialogType" in e;
307
- }
308
- isUIShowNotificationConfig(e) {
309
- return this.isTypedActionConfig(e) && e.type === "ui:showNotification" && "message" in e;
310
- }
311
- isNavigationGoToStepConfig(e) {
312
- return this.isTypedActionConfig(e) && e.type === "navigation:goToStep" && "stepId" in e;
313
- }
314
- isNavigationGoNextConfig(e) {
315
- return this.isTypedActionConfig(e) && e.type === "navigation:goNext";
316
- }
317
- isNavigationGoPreviousConfig(e) {
318
- return this.isTypedActionConfig(e) && e.type === "navigation:goPrevious";
319
- }
320
- isNavigationGoToSectionConfig(e) {
321
- return this.isTypedActionConfig(e) && e.type === "navigation:goToSection" && "sectionId" in e;
322
- }
323
- isComponentEnableConfig(e) {
324
- return this.isTypedActionConfig(e) && e.type === "component:enable" && "componentIds" in e;
325
- }
326
- isComponentDisableConfig(e) {
327
- return this.isTypedActionConfig(e) && e.type === "component:disable" && "componentIds" in e;
328
- }
329
- isComponentShowHideConfig(e) {
330
- return this.isTypedActionConfig(e) && (e.type === "component:show" || e.type === "component:hide") && "componentIds" in e;
331
- }
332
- isComponentSetValueConfig(e) {
333
- return this.isTypedActionConfig(e) && (e.type === "component:setValue" || e.type === "component:clearValue") && "componentId" in e;
334
- }
335
- isComponentUpdateOriginalValueConfig(e) {
336
- return this.isTypedActionConfig(e) && e.type === "component:updateOriginalValue" && "componentId" in e;
337
- }
338
- isDataApiCallConfig(e) {
339
- return this.isTypedActionConfig(e) && e.type === "data:apiCall" && "url" in e;
340
- }
341
- isDataSetValueConfig(e) {
342
- return this.isTypedActionConfig(e) && (e.type === "data:setValue" || e.type === "data:clearValue") && "fieldPath" in e;
343
- }
344
- isDataValidationConfig(e) {
345
- return this.isTypedActionConfig(e) && (e.type === "data:validateField" || e.type === "data:validateSection" || e.type === "data:validateStep") && "targetId" in e;
346
- }
347
- isCustomActionConfig(e) {
348
- return this.isTypedActionConfig(e) && e.type === "custom:execute" && "handler" in e;
349
- }
350
- /**
351
- * Cleanup resources
352
- */
353
- dispose() {
354
- for (const e of Array.from(this.debounceTimers.values()))
355
- clearTimeout(e);
356
- for (const e of Array.from(this.throttleTimers.values()))
357
- clearTimeout(e);
358
- this.debounceTimers.clear(), this.throttleTimers.clear(), this.triggers.clear();
359
- }
360
- }
361
- function u(s, e, a, i = {}) {
362
- return {
363
- triggerType: s,
364
- context: e,
365
- targetId: a,
366
- currentValue: i.currentValue,
367
- previousValue: i.previousValue,
368
- formData: i.formData || {},
369
- metadata: i.metadata || {},
370
- timestamp: Date.now()
371
- };
372
- }
373
- export {
374
- l as GenericTriggerEngine,
375
- u as createTriggerContext
376
- };
@@ -1,69 +0,0 @@
1
- "use client";
2
- import { jsxs as t, jsx as i } from "react/jsx-runtime";
3
- import { useFormContext as l } from "../../form-runtime/hooks/useFormContext.js";
4
- const p = () => {
5
- const s = l();
6
- return process.env.NODE_ENV !== "development" ? null : /* @__PURE__ */ t(
7
- "div",
8
- {
9
- style: {
10
- position: "fixed",
11
- // bottom: "10px",
12
- top: "50px",
13
- right: "10px",
14
- width: "400px",
15
- maxHeight: "300px",
16
- overflow: "auto",
17
- backgroundColor: "#1a1a1a",
18
- color: "#fff",
19
- padding: "10px",
20
- fontSize: "12px",
21
- borderRadius: "4px",
22
- zIndex: 9999,
23
- fontFamily: "monospace"
24
- },
25
- children: [
26
- /* @__PURE__ */ i("strong", { children: "🔍 Validation Debug" }),
27
- /* @__PURE__ */ i(s.Subscribe, { selector: (e) => e, children: (e) => /* @__PURE__ */ t("div", { children: [
28
- /* @__PURE__ */ i("h4", { children: "Form State:" }),
29
- /* @__PURE__ */ i("pre", { style: { fontSize: "10px", whiteSpace: "pre-wrap" }, children: JSON.stringify(
30
- {
31
- isValid: e.isValid,
32
- isSubmitted: e.isSubmitted,
33
- canSubmit: e.canSubmit,
34
- errors: e.errors,
35
- values: e.values
36
- },
37
- null,
38
- 2
39
- ) }),
40
- /* @__PURE__ */ i("h4", { children: "Field States:" }),
41
- Object.keys(e.values || {}).map((o) => {
42
- const r = s.getFieldApi?.(o)?.state;
43
- return /* @__PURE__ */ t("details", { style: { marginBottom: "8px" }, children: [
44
- /* @__PURE__ */ t("summary", { style: { cursor: "pointer", fontWeight: "bold" }, children: [
45
- o,
46
- " ",
47
- r?.meta?.errors?.length ? `(${r.meta.errors.length} errors)` : ""
48
- ] }),
49
- /* @__PURE__ */ i("pre", { style: { fontSize: "10px", marginLeft: "10px" }, children: JSON.stringify(
50
- {
51
- value: r?.value,
52
- isValid: r?.meta?.isValid,
53
- isTouched: r?.meta?.isTouched,
54
- errors: r?.meta?.errors,
55
- errorMap: r?.meta?.errorMap
56
- },
57
- null,
58
- 2
59
- ) })
60
- ] }, o);
61
- })
62
- ] }) })
63
- ]
64
- }
65
- );
66
- };
67
- export {
68
- p as default
69
- };
@@ -1,17 +0,0 @@
1
- "use client";
2
- import { ValidationEngine as a, defaultValidationEngine as r } from "./ValidationEngine.js";
3
- function c(e, n = "withLabel") {
4
- return new a({ messageStyle: n }).getComponentSchema(e);
5
- }
6
- function u(e, n, t = "withLabel") {
7
- const i = new a({ messageStyle: t }).validateField(e, n);
8
- return i.isValid ? void 0 : i.errors[0];
9
- }
10
- function d(e, n) {
11
- return r.validateField(e, n).errors;
12
- }
13
- export {
14
- c as createTanStackSchema,
15
- u as validateWithTanStack,
16
- d as validateWithTanStackReturnArray
17
- };
@@ -1,74 +0,0 @@
1
- "use client";
2
- import { ValidationEngine as c } from "./ValidationEngine.js";
3
- const s = new c();
4
- async function d(t, e) {
5
- const n = await s.validateFieldDebounced(
6
- t,
7
- e
8
- );
9
- return n.isValid ? void 0 : n.errors[0];
10
- }
11
- async function l(t, e) {
12
- return (await s.validateFieldDebounced(
13
- t,
14
- e
15
- )).errors;
16
- }
17
- function a(t) {
18
- return "sections" in t && Array.isArray(t.sections);
19
- }
20
- function f(t, e) {
21
- for (const n of t.steps)
22
- if (a(n))
23
- for (const i of n.sections || []) {
24
- const o = (i.components || []).find(
25
- (r) => r.id === e
26
- );
27
- if (o) return o;
28
- }
29
- }
30
- function p(t, e) {
31
- const n = t.steps.find((o) => o.id === e);
32
- if (!n || !a(n)) return [];
33
- const i = [];
34
- return n.sections?.forEach((o) => {
35
- o.components?.forEach((r) => {
36
- i.push(r);
37
- });
38
- }), i;
39
- }
40
- function m(t) {
41
- const e = [];
42
- return t.steps.forEach((n) => {
43
- a(n) && n.sections?.forEach((i) => {
44
- i.components?.forEach((o) => {
45
- e.push(o);
46
- });
47
- });
48
- }), e;
49
- }
50
- async function v(t, e, n) {
51
- const i = t.steps.find((r) => r.id === e);
52
- return !i || !a(i) ? {} : (await s.validateStep(i, n)).fieldErrors;
53
- }
54
- async function y(t, e, n) {
55
- const i = t.steps.find((r) => r.id === e);
56
- return !i || !a(i) ? !0 : (await s.validateStep(i, n)).isValid;
57
- }
58
- async function E(t, e) {
59
- return (await s.validateForm(t, e)).fieldErrors;
60
- }
61
- async function F(t, e) {
62
- return (await s.validateForm(t, e)).isValid;
63
- }
64
- export {
65
- f as findComponentById,
66
- m as getAllComponents,
67
- p as getStepComponents,
68
- F as isFormValid,
69
- y as isStepValid,
70
- d as validateField,
71
- l as validateFieldReturnArray,
72
- E as validateForm,
73
- v as validateStep
74
- };