@picked/client 0.0.50 → 0.0.51-next.1

package/dist/esm/form/index.js

@@ -0,0 +1,466 @@
+import { t as e } from "../../rules-logic-BIkBWZmf.js";
+import { attach as t, combine as n, createEffect as r, createEvent as i, createStore as a, sample as o, split as s } from "effector";
+//#region src/form/build-responses.ts
+function c(e, t, n) {
+	let r = e[t];
+	if (r === void 0) {
+		e[t] = n;
+		return;
+	}
+	if (Array.isArray(r) && Array.isArray(n) && n.length > 0) {
+		typeof r[0] == "string" ? e[t] = [...r, ...n].map(String) : typeof r[0] == "number" ? e[t] = [...r, ...n].map(Number) : typeof r[0] == "boolean" ? e[t] = [...r, ...n].map((e) => !!e) : e[t] = n;
+		return;
+	}
+	e[t] = n;
+}
+function l(e, t) {
+	let n = Array.from(t.entries()), r = {};
+	return e.forEach((e) => {
+		let t = n.filter(([t]) => t === e.id);
+		t.length === 0 && (t = [[e.id, ""]]), t.forEach(([, t]) => {
+			if (t === "") {
+				c(r, e.id, null);
+				return;
+			}
+			switch (e.type) {
+				case "text":
+				case "object":
+					c(r, e.id, e.multiple ? [String(t)] : String(t));
+					break;
+				case "number":
+					c(r, e.id, e.multiple ? [Number(t)] : Number(t));
+					break;
+				case "boolean":
+					c(r, e.id, e.multiple ? [t === "true"] : t === "true");
+					break;
+			}
+		});
+	}), r;
+}
+//#endregion
+//#region src/form/get-step-fields.ts
+function u(e) {
+	return Array.isArray(e.options) && e.options.some((e) => "condition" in e);
+}
+function d(e) {
+	return e.some((e) => e.condition || u(e));
+}
+async function f(t, n, r) {
+	return n.length === 0 || !d(n) ? n : (await Promise.all(n.map(async (n) => {
+		if (!(!n.condition || await e(t, n.condition, r))) return null;
+		if (!Array.isArray(n.options) || !u(n)) return n;
+		let i = (await Promise.all(n.options.map(async (n) => n.condition ? await e(t, n.condition, r) ? n : null : n))).filter((e) => e !== null);
+		return i.length === n.options.length ? n : i.length === 0 ? null : {
+			...n,
+			options: i
+		};
+	}))).filter((e) => e !== null);
+}
+//#endregion
+//#region src/form/create-field-evaluator.ts
+function p(e, n, i) {
+	let s = a([]), c = t({
+		source: {
+			allFields: e.fields.listStore,
+			fieldIds: n,
+			staged: i,
+			committed: e.responses.getAllStore
+		},
+		effect: r(async ({ allFields: t, fieldIds: n, staged: r, committed: i }) => await f(e, t.filter((e) => n.includes(e.id)), { responses: {
+			...i,
+			...r
+		} }))
+	});
+	return o({
+		clock: c.doneData,
+		target: s
+	}), c(), o({
+		clock: [
+			e.responses.listStore,
+			n,
+			e.fields.listStore,
+			i
+		],
+		target: c
+	}), { fieldsStore: s };
+}
+//#endregion
+//#region src/form/create-field-validation.ts
+function m(e) {
+	return e === null || e === "" || Array.isArray(e) && e.length === 0;
+}
+function h(n, r, s) {
+	let c = i(), l = i(), u = i(), d = a({});
+	o({
+		clock: u,
+		source: d,
+		fn: (e, { fieldId: t }) => ({
+			...e,
+			[t]: !0
+		}),
+		target: d
+	});
+	let f = a({}), p = f.map((e) => Object.values(e).filter((e) => e !== void 0)), h = t({
+		source: {
+			fields: r,
+			staged: s,
+			committed: n.responses.getAllStore
+		},
+		effect: async ({ fields: t, staged: r, committed: i }, { fieldId: a, value: o, checkRequired: s }) => {
+			let c = t.find((e) => e.id === a);
+			if (!c) return {
+				fieldId: a,
+				error: null
+			};
+			if (c.validation && Object.keys(c.validation).length > 0) {
+				let t = {
+					...i,
+					...r
+				}, s = await e(n, c.validation, {
+					responses: t,
+					$input: o
+				});
+				if (typeof s == "string") return {
+					fieldId: a,
+					error: {
+						fieldId: a,
+						userMessage: s,
+						systemMessage: s,
+						value: o
+					}
+				};
+				if (s === !1) return {
+					fieldId: a,
+					error: {
+						fieldId: a,
+						userMessage: "This field is invalid",
+						systemMessage: "Field validation rule returned false.",
+						value: o
+					}
+				};
+			}
+			return s && c.required && m(o) ? {
+				fieldId: a,
+				error: {
+					fieldId: a,
+					userMessage: "This field is required",
+					systemMessage: "Field is required.",
+					value: o
+				}
+			} : {
+				fieldId: a,
+				error: null
+			};
+		}
+	});
+	return o({
+		clock: c,
+		source: d,
+		filter: (e, { fieldId: t }) => e[t] === !0,
+		fn: (e, { fieldId: t, value: n }) => ({
+			fieldId: t,
+			value: n,
+			checkRequired: !1
+		}),
+		target: h
+	}), o({
+		clock: l,
+		source: d,
+		filter: (e, { fieldId: t }) => e[t] === !0,
+		fn: (e, { fieldId: t, value: n }) => ({
+			fieldId: t,
+			value: n,
+			checkRequired: !1
+		}),
+		target: h
+	}), o({
+		clock: u,
+		fn: ({ fieldId: e, value: t }) => ({
+			fieldId: e,
+			value: t,
+			checkRequired: !0
+		}),
+		target: h
+	}), s.on(c, (e, { fieldId: t, value: n }) => ({
+		...e,
+		[t]: n
+	})), s.on(l, (e, { fieldId: t, value: n }) => ({
+		...e,
+		[t]: n
+	})), s.on(u, (e, { fieldId: t, value: n }) => ({
+		...e,
+		[t]: n
+	})), f.on(h.doneData, (e, { fieldId: t, error: n }) => {
+		if (n === null) {
+			let n = { ...e };
+			return delete n[t], n;
+		}
+		return {
+			...e,
+			[t]: n
+		};
+	}), {
+		fieldInputEvent: c,
+		fieldChangeEvent: l,
+		fieldBlurEvent: u,
+		touchedStore: d,
+		fieldErrorsStore: f,
+		formErrorsStore: p,
+		stagedValuesStore: s
+	};
+}
+//#endregion
+//#region src/form/create-submit-pipeline.ts
+function g(e) {
+	let t = [];
+	return {
+		executeFx: r(async (...n) => await e(t, ...n)),
+		register: (e) => (t.push(e), () => {
+			t = t.filter((t) => t !== e);
+		})
+	};
+}
+function _({ client: e, experienceInstance: n, formId: c, title: u, stepStore: d, fieldsStore: f, goToNextStep: p }) {
+	let m = i(), h = i(), _ = i(), v = i(), y = i(), b = a(!1), x = a(!1);
+	x.on(v, () => !0).on(m, () => !1);
+	let S = m.map(() => void 0), C = g(async (e, t) => {
+		await Promise.all(e.map((e) => Promise.resolve(e(t))));
+	}), w = g(async (e, t) => {
+		await Promise.all(e.map((e) => Promise.resolve(e(t))));
+	}), T = g(async (e, t) => {
+		let n = t;
+		for (let t of e) {
+			let e = await Promise.resolve(t(n));
+			e !== void 0 && (n = e);
+		}
+		return n;
+	}), E = r(async (t) => ({
+		data: t,
+		errors: (await e.responses.commit(t)).errors
+	})), D = t({
+		source: {
+			step: d,
+			title: u
+		},
+		mapParams: (e, t) => ({
+			step: t.step,
+			title: t.title,
+			data: e.data
+		}),
+		effect: r(async ({ step: t, title: r, data: i }) => (e.eventBus({
+			type: "form_submit_success",
+			form: {
+				id: c,
+				title: r
+			},
+			experience: n,
+			step: t ?? void 0
+		}), i))
+	}), O = t({
+		source: {
+			step: d,
+			title: u
+		},
+		mapParams: (e, t) => ({
+			step: t.step,
+			title: t.title,
+			errors: e.errors
+		}),
+		effect: r(async ({ step: t, title: r, errors: i }) => (e.eventBus({
+			type: "form_submit_error",
+			form: {
+				id: c,
+				title: r
+			},
+			exception: { reason: i },
+			experience: n,
+			step: t ?? void 0
+		}), i.forEach((r) => {
+			e.eventBus({
+				type: "field_validation_error",
+				exception: { reason: [r] },
+				experience: n,
+				step: t ?? void 0
+			});
+		}), i))
+	});
+	return o({
+		clock: m,
+		fn: () => !0,
+		target: b
+	}), o({
+		clock: m,
+		source: {
+			step: d,
+			title: u
+		},
+		fn: ({ step: e, title: t }) => ({
+			formId: c,
+			title: t,
+			step: e
+		}),
+		target: r(({ formId: t, title: r, step: i }) => {
+			e.eventBus({
+				type: "form_submit",
+				form: {
+					id: t,
+					title: r
+				},
+				experience: n,
+				step: i ?? void 0
+			});
+		})
+	}), o({
+		clock: m,
+		source: { stepFields: f },
+		fn: ({ stepFields: e }, t) => (t.preventDefault(), l(e, new FormData(t.currentTarget))),
+		target: T.executeFx
+	}), o({
+		clock: T.executeFx.doneData,
+		target: E
+	}), s({
+		source: E.doneData,
+		match: { hasErrors: ({ errors: e }) => e.length > 0 },
+		cases: {
+			hasErrors: O,
+			__: D
+		}
+	}), o({
+		clock: D.doneData,
+		target: h
+	}), o({
+		clock: h,
+		fn: (e) => ({
+			data: e,
+			stopNavigation: v
+		}),
+		target: C.executeFx
+	}), o({
+		clock: C.executeFx.done,
+		target: y
+	}), o({
+		clock: y,
+		source: x,
+		filter: (e) => !e,
+		target: p
+	}), o({
+		clock: O.doneData,
+		target: _
+	}), o({
+		clock: _,
+		target: w.executeFx
+	}), o({
+		clock: [y, w.executeFx.done],
+		fn: () => !1,
+		target: b
+	}), {
+		submitEvent: m,
+		isFormSubmitting: b,
+		onBeforeSubmit: T.register,
+		onSuccess: C.register,
+		onError: w.register,
+		submitStarted: S,
+		validationErrorsReceived: _
+	};
+}
+//#endregion
+//#region src/form/create-form.ts
+function v(e) {
+	let t = e.currentTarget;
+	if (t instanceof HTMLInputElement) return t.type === "checkbox" ? t.checked : t.value;
+	if (t instanceof HTMLSelectElement || t instanceof HTMLTextAreaElement) return t.value;
+}
+function y(e, t, r, i) {
+	let { client: s, experienceInstance: c } = e, { currentStepStore: l, goToNextStep: u } = c, d = n(l, c, (e, t) => ({
+		stepId: e?.id,
+		experienceId: t.id
+	})), f = a({}), { fieldsStore: m } = p(s, i, f);
+	o({
+		clock: m,
+		source: f,
+		fn: (e, t) => {
+			let n = !1, r = { ...e };
+			for (let e of t) e.defaultValue != null && !(e.id in r) && (r[e.id] = e.defaultValue, n = !0);
+			return n ? r : e;
+		},
+		target: f
+	});
+	let { fieldInputEvent: g, fieldChangeEvent: y, fieldBlurEvent: b, touchedStore: x, fieldErrorsStore: S, formErrorsStore: C } = h(s, m, f), w = n({
+		fields: m,
+		responses: s.responses.listStore,
+		staged: f,
+		fieldErrors: S,
+		touched: x,
+		experienceAndStepId: d
+	}, ({ fields: e, responses: t, staged: n, fieldErrors: r, touched: i, experienceAndStepId: a }) => e.map((e) => {
+		let o = (t) => {
+			let n = v(t);
+			n !== void 0 && g({
+				fieldId: e.id,
+				value: n
+			});
+		}, s = (t) => {
+			let n = v(t);
+			n !== void 0 && y({
+				fieldId: e.id,
+				value: n
+			});
+		}, c = (t) => {
+			let n = v(t);
+			n !== void 0 && b({
+				fieldId: e.id,
+				value: n
+			});
+		}, l = n[e.id] ?? t.find((t) => t.fieldId === e.id)?.value ?? e.defaultValue, u = r[e.id], d = e.type === "number" ? "number" : "text", f = e.type === "boolean" ? "checkbox" : d, { experienceId: p, stepId: m } = a, h = `${p}-${m ?? "step"}-${e.id}`;
+		return {
+			...e,
+			value: l,
+			error: u,
+			touched: i[e.id] ?? !1,
+			props: {
+				id: h,
+				name: e.name,
+				value: l,
+				type: f,
+				required: e.required,
+				placeholder: e.placeholder,
+				oninput: o,
+				onchange: s,
+				onblur: c
+			}
+		};
+	})), { submitEvent: T, isFormSubmitting: E, onBeforeSubmit: D, onSuccess: O, onError: k, submitStarted: A, validationErrorsReceived: j } = _({
+		client: s,
+		experienceInstance: c,
+		formId: t,
+		title: r,
+		stepStore: l,
+		fieldsStore: m,
+		goToNextStep: u
+	});
+	return o({
+		clock: A,
+		fn: () => ({}),
+		target: x
+	}), o({
+		clock: A,
+		fn: () => ({}),
+		target: S
+	}), o({
+		clock: j,
+		fn: (e) => Object.fromEntries(e.map((e) => [e.fieldId, e])),
+		target: S
+	}), {
+		form: {
+			props: { onsubmit: T },
+			errors: C,
+			submitting: E,
+			onBeforeSubmit: D,
+			onSuccess: O,
+			onError: k
+		},
+		fields: w
+	};
+}
+//#endregion
+export { l as buildResponsesFromFormData, p as createFieldEvaluator, h as createFieldValidation, y as createForm, _ as createSubmitPipeline, v as getEventValue, f as getStepFields };