admin-ui-starter-kit 0.1.4 → 0.4.3

package/dist/components/features/schema-form/index.js

@@ -0,0 +1,721 @@
+import { useStrings as e } from "../../../lib/strings.js";
+import { cn as t } from "../../../lib/utils.js";
+import { n } from "../../../_shared/heading-HeP06nXG.js";
+import { t as r } from "../../../_shared/button-SuocMQFT.js";
+import { t as i } from "../../../_shared/smart-card-DYZGY_Su.js";
+import { t as a } from "../../../_shared/input-C7t-RHYq.js";
+import { B as o, H as s, V as c, z as l } from "../../../_shared/forms-CwJci54_.js";
+import { t as u } from "../../../_shared/textarea-CsMkelmp.js";
+import { a as d, n as f } from "../../../_shared/form-field-B7taMVbC.js";
+import { n as p, t as m } from "../../../_shared/card-radio-group-D_CY1HRy.js";
+import { Fragment as h, useCallback as g, useEffect as _, useId as v, useMemo as y, useState as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/components/features/schema-form/schema-form.utils.ts
+var C = {
+	1: "grid grid-cols-1 gap-4",
+	2: "grid grid-cols-1 gap-4 md:grid-cols-2",
+	3: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3"
+}, w = {
+	auto: "",
+	half: "md:col-span-1",
+	third: "xl:col-span-1",
+	full: "md:col-span-full xl:col-span-full"
+};
+function T(e, t, n) {
+	if (typeof e.hidden == "function") try {
+		return e.hidden(t);
+	} catch (e) {
+		return n?.(e), !1;
+	}
+	return e.hidden ?? !1;
+}
+function E(e, t, n) {
+	if (typeof e.disabled == "function") try {
+		return e.disabled(t);
+	} catch (e) {
+		return n?.(e), !0;
+	}
+	return e.disabled ?? !1;
+}
+function D(e, t, n) {
+	return e.filter((e) => !T(e, t, n));
+}
+function ee(e, t, n, r, i) {
+	let a = D(e.fields, t, i), o = new Map(a.map((e) => [e.key, e])), s = /* @__PURE__ */ new Set(), c = [];
+	for (let t of e.sections ?? []) {
+		let e = t.fields ? t.fields.map((e) => o.get(e)).filter((e) => e !== void 0) : a.filter((e) => e.sectionId === t.id);
+		for (let t of e) s.add(t.key);
+		c.push({
+			id: t.id,
+			title: t.title,
+			description: t.description,
+			icon: t.icon,
+			fields: e,
+			columns: t.columns ?? r,
+			footerSlot: t.footerSlot,
+			className: t.className
+		});
+	}
+	let l = a.filter((e) => !s.has(e.key));
+	return (l.length > 0 || c.length === 0) && c.unshift({
+		id: "default",
+		title: e.sections?.length ? n : void 0,
+		fields: l,
+		columns: r
+	}), c.filter((e) => e.fields.length > 0);
+}
+function O(e) {
+	return e == null ? "" : typeof e == "string" ? e : typeof e == "number" || typeof e == "boolean" ? String(e) : JSON.stringify(e);
+}
+function k(e) {
+	return Array.isArray(e) ? e.map((e) => String(e)) : [];
+}
+function A(e) {
+	return e === !0 || e === "true" || e === 1;
+}
+function j(e, t = !1) {
+	let n = e.trim();
+	if (n.length === 0) return null;
+	let r = t ? Number.parseInt(n, 10) : Number.parseFloat(n);
+	return Number.isNaN(r) ? null : r;
+}
+function M(e, t = 2) {
+	if (e == null) return "";
+	if (typeof e == "string") return e;
+	try {
+		return JSON.stringify(e, null, t);
+	} catch {
+		return String(e);
+	}
+}
+function N(e) {
+	let t = e.trim();
+	if (t.length === 0) return {
+		value: null,
+		valid: !0
+	};
+	try {
+		return {
+			value: JSON.parse(t),
+			valid: !0
+		};
+	} catch {
+		return {
+			value: e,
+			valid: !1
+		};
+	}
+}
+//#endregion
+//#region src/components/features/schema-form/hooks/use-schema-form.ts
+function P(e, t) {
+	let n = { ...t ?? {} };
+	for (let t of e) t.defaultValue !== void 0 && n[t.key] === void 0 && (n[t.key] = t.defaultValue);
+	return n;
+}
+function F(e) {
+	return e == null ? !0 : typeof e == "string" ? e.trim().length === 0 : Array.isArray(e) ? e.length === 0 : !1;
+}
+function I(e) {
+	let t = {};
+	for (let [n, r] of Object.entries(e ?? {})) r && (t[n] = r);
+	return t;
+}
+function te({ fields: e, value: t, defaultValue: n, errors: r, onValueChange: i, onFieldChange: a, formatRequiredError: o, validationError: s, onError: c }) {
+	let l = t !== void 0, u = y(() => P(e, n), [n, e]), [d, f] = b(() => u), [p, m] = b({}), h = y(() => l ? {
+		...u,
+		...t ?? {}
+	} : d, [
+		u,
+		d,
+		l,
+		t
+	]), _ = y(() => ({
+		...p,
+		...I(r)
+	}), [r, p]), v = g((e) => {
+		l || f(e), i?.(e);
+	}, [l, i]), x = g((e, t) => {
+		let n = {
+			...h,
+			[e]: t
+		};
+		l || f(n), m((t) => {
+			if (!t[e]) return t;
+			let n = { ...t };
+			return delete n[e], n;
+		}), a?.(e, t, n), i?.(n);
+	}, [
+		l,
+		a,
+		i,
+		h
+	]), S = g(() => {
+		let t = P(e, n);
+		return l || f(t), m({}), i?.(t), t;
+	}, [
+		n,
+		e,
+		l,
+		i
+	]), C = g(() => {
+		let t = {};
+		for (let n of e) {
+			if (T(n, h, c)) continue;
+			let e = h[n.key];
+			if (n.required && F(e)) {
+				t[n.key] = o(n.label);
+				continue;
+			}
+			let r = Array.isArray(n.validate) ? n.validate : n.validate ? [n.validate] : [];
+			for (let i of r) try {
+				let r = i(e, h, n);
+				if (typeof r == "string" && r.length > 0) {
+					t[n.key] = r;
+					break;
+				}
+			} catch (e) {
+				c?.(e), t[n.key] = s;
+				break;
+			}
+		}
+		return m(t), Object.keys(t).length === 0;
+	}, [
+		e,
+		o,
+		c,
+		s,
+		h
+	]);
+	return {
+		values: h,
+		errors: _,
+		getFieldError: g((e) => _[e], [_]),
+		getFieldValue: g((e) => h[e], [h]),
+		setFieldValue: x,
+		setValues: v,
+		reset: S,
+		validate: C
+	};
+}
+//#endregion
+//#region src/components/features/schema-form/partials/schema-form-actions.tsx
+function L({ submitLabel: e, resetLabel: n, showReset: i = !1, disabled: a = !1, submitDisabled: o = !1, resetDisabled: s = !1, isSubmitting: c = !1, onReset: l, className: u }) {
+	return /* @__PURE__ */ S("div", {
+		className: t("schema-form-actions--component flex items-center justify-end gap-2", u),
+		children: [!!i && /* @__PURE__ */ x(r, {
+			type: "button",
+			variant: "secondary",
+			buttonStyle: "outline",
+			disabled: a || s || c,
+			onClick: l,
+			children: n
+		}), /* @__PURE__ */ x(r, {
+			type: "submit",
+			variant: "primary",
+			loading: c,
+			disabled: a || o,
+			children: e
+		})]
+	});
+}
+L.displayName = "SchemaFormActions";
+//#endregion
+//#region src/components/features/schema-form/partials/schema-form-empty.tsx
+function R({ title: e, description: r, className: i }) {
+	return /* @__PURE__ */ S("div", {
+		className: t("schema-form-empty--component rounded-md border border-dashed border-border bg-muted/20 p-6 text-center", i),
+		children: [/* @__PURE__ */ x(n, {
+			weight: "semibold",
+			children: e
+		}), /* @__PURE__ */ x(n, {
+			size: "xs",
+			type: "secondary",
+			className: "mt-1",
+			children: r
+		})]
+	});
+}
+R.displayName = "SchemaFormEmpty";
+//#endregion
+//#region src/components/features/schema-form/partials/schema-form-field.tsx
+function z(e) {
+	return e.hint ?? e.description;
+}
+function B(e, t, n, r) {
+	if (e.formatValue) try {
+		return e.formatValue(t, n);
+	} catch (e) {
+		r?.(e);
+	}
+	return O(t);
+}
+function V(e, t, n, r) {
+	if (e.parseValue) try {
+		return e.parseValue(t, n);
+	} catch (e) {
+		r?.(e);
+	}
+	return t;
+}
+function H(e, t, n, r, i) {
+	if (e.parseValue) try {
+		return e.parseValue(t, n);
+	} catch (e) {
+		i?.(e);
+	}
+	return j(t, r);
+}
+function U(e, t, n, r) {
+	if (e.type === "json" && e.parseValue) try {
+		return {
+			value: e.parseValue(t, n),
+			valid: !0
+		};
+	} catch (e) {
+		return r?.(e), {
+			value: t,
+			valid: !1
+		};
+	}
+	return N(t);
+}
+function W(e) {
+	if (!e.icon) return;
+	let t = e.icon;
+	return /* @__PURE__ */ x(t, {
+		className: "size-4",
+		"aria-hidden": "true"
+	});
+}
+function G({ field: e, value: n, values: r, error: i, disabled: a, fieldId: o, onValueChange: s, onError: c, strings: l }) {
+	let d = e.type === "json" ? e.jsonIndent ?? 2 : 2, [p, m] = b(() => M(n, d)), [h, g] = b(), [v, y] = b(!1);
+	if (_(() => {
+		v || m(M(n, d));
+	}, [
+		d,
+		v,
+		n
+	]), e.type !== "json") return null;
+	let S = (t) => {
+		let n = U(e, t, r, c);
+		return g(n.valid ? void 0 : l.jsonParseError), s(n.value), n;
+	};
+	return /* @__PURE__ */ x(f, {
+		label: e.label,
+		required: e.required,
+		hint: z(e),
+		helperText: e.helperText,
+		error: i ?? h,
+		htmlFor: o,
+		className: "schema-form-field--component schema-form-field--json",
+		children: /* @__PURE__ */ x(u, {
+			id: o,
+			name: e.key,
+			value: p,
+			rows: e.rows ?? 6,
+			disabled: a,
+			invalid: !!(i ?? h),
+			placeholder: e.placeholder,
+			spellCheck: !1,
+			className: t("font-mono", e.controlClassName),
+			onFocus: () => y(!0),
+			onChange: (t) => {
+				let n = t.target.value;
+				m(n);
+				let i = U(e, n, r, c);
+				g(i.valid ? void 0 : l.jsonParseError), s(i.value);
+			},
+			onBlur: () => {
+				y(!1);
+				let e = S(p);
+				e.valid && m(M(e.value, d));
+			},
+			...e.textareaProps
+		})
+	});
+}
+function K({ field: e, value: n, values: r, error: i, disabled: h, required: g, fieldId: _, onValueChange: v, onError: y, strings: b, className: S }) {
+	let C = e.type ?? "text", w = {
+		label: e.label,
+		required: g,
+		hint: z(e),
+		helperText: e.helperText,
+		error: i,
+		htmlFor: _,
+		className: t("schema-form-field--component", S)
+	}, T = e.controlClassName;
+	if (C === "custom" && e.type === "custom") return /* @__PURE__ */ x("div", {
+		className: t("schema-form-field--component schema-form-field--custom", S),
+		children: e.render({
+			field: e,
+			value: n,
+			values: r,
+			error: i,
+			disabled: h,
+			required: g,
+			fieldId: _,
+			onValueChange: v,
+			onError: y
+		})
+	});
+	if (C === "switch" && e.type === "switch") {
+		let r = A(n);
+		return e.switchStyle === "card" ? /* @__PURE__ */ x(f, {
+			error: i,
+			className: t("schema-form-field--component schema-form-field--switch-card", S),
+			children: /* @__PURE__ */ x(c, {
+				label: e.label,
+				description: e.description,
+				hint: e.hint,
+				name: e.key,
+				value: r,
+				disabled: h,
+				invalid: !!i,
+				className: T,
+				onChange: (e) => v(e),
+				...e.switchCardProps
+			})
+		}) : /* @__PURE__ */ x(f, {
+			error: i,
+			className: t("schema-form-field--component schema-form-field--switch", S),
+			children: /* @__PURE__ */ x(o, {
+				label: e.label,
+				description: e.description ?? e.hint,
+				name: e.key,
+				value: r,
+				disabled: h,
+				invalid: !!i,
+				className: T,
+				onChange: (e) => v(e),
+				...e.switchProps
+			})
+		});
+	}
+	if (C === "json") return /* @__PURE__ */ x(G, {
+		field: e,
+		value: n,
+		values: r,
+		error: i,
+		disabled: h,
+		required: g,
+		fieldId: _,
+		onValueChange: v,
+		onError: y,
+		strings: b
+	});
+	if (C === "textarea" && e.type === "textarea") {
+		let t = B(e, n, r, y);
+		return /* @__PURE__ */ x(f, {
+			...w,
+			children: /* @__PURE__ */ x(u, {
+				id: _,
+				name: e.key,
+				value: t,
+				rows: e.rows,
+				disabled: h,
+				required: g,
+				invalid: !!i,
+				placeholder: e.placeholder,
+				className: T,
+				onChange: (t) => v(V(e, t.target.value, r, y)),
+				...e.textareaProps
+			})
+		});
+	}
+	if ((C === "number" || C === "integer" || C === "decimal") && (e.type === "number" || e.type === "integer" || e.type === "decimal")) {
+		let t = B(e, n, r, y), a = e.type === "integer", o = a ? 0 : e.decimalPlaces ?? (e.type === "decimal" ? 2 : 4);
+		return /* @__PURE__ */ x(f, {
+			...w,
+			children: /* @__PURE__ */ x(d, {
+				id: _,
+				name: e.key,
+				value: t,
+				min: e.min,
+				max: e.max,
+				step: e.step,
+				decimalPlaces: o,
+				disabled: h,
+				required: g,
+				invalid: !!i,
+				placeholder: e.placeholder,
+				className: T,
+				onChange: (t) => {
+					let n = t.target.value;
+					v(H(e, n, r, a, y));
+				},
+				...e.numberProps
+			})
+		});
+	}
+	if (C === "select" && e.type === "select") {
+		let t = e.options.map((e) => ({
+			value: e.value,
+			label: e.label,
+			disabled: e.disabled,
+			icon: W(e)
+		}));
+		return /* @__PURE__ */ x(f, {
+			...w,
+			children: /* @__PURE__ */ x(s, {
+				name: e.key,
+				value: O(n),
+				options: t,
+				allowClear: e.allowClear,
+				disabled: h,
+				required: g,
+				invalid: !!i,
+				placeholder: e.placeholder,
+				"aria-label": e.label,
+				className: T,
+				onChange: (e) => v(e ?? null),
+				...e.selectProps
+			})
+		});
+	}
+	if (C === "radio-cards" && e.type === "radio-cards") return /* @__PURE__ */ x(f, {
+		...w,
+		children: /* @__PURE__ */ x(m, {
+			name: e.key,
+			value: O(n),
+			options: e.options,
+			columns: e.columns,
+			disabled: h,
+			invalid: !!i,
+			className: T,
+			onChange: (e) => v(e),
+			...e.radioProps
+		})
+	});
+	if (C === "checkbox-cards" && e.type === "checkbox-cards") return /* @__PURE__ */ x(f, {
+		...w,
+		children: /* @__PURE__ */ x(p, {
+			name: e.key,
+			value: k(n),
+			options: e.options,
+			columns: e.columns,
+			disabled: h,
+			invalid: !!i,
+			className: T,
+			onChange: (e) => v(e),
+			...e.checkboxProps
+		})
+	});
+	if (C === "tags" && e.type === "tags") return /* @__PURE__ */ x(f, {
+		...w,
+		children: /* @__PURE__ */ x(l, {
+			value: k(n),
+			recommendations: e.recommendations,
+			maxTags: e.maxTags,
+			disabled: h,
+			invalid: !!i,
+			placeholder: e.placeholder,
+			className: T,
+			onChange: (e) => v(e),
+			...e.tagsProps
+		})
+	});
+	let E = C === "text" ? "text" : C, D = B(e, n, r, y);
+	return /* @__PURE__ */ x(f, {
+		...w,
+		children: /* @__PURE__ */ x(a, {
+			id: _,
+			name: e.key,
+			type: E,
+			value: D,
+			disabled: h,
+			required: g,
+			invalid: !!i,
+			placeholder: e.placeholder,
+			className: T,
+			onChange: (t) => v(V(e, t.target.value, r, y)),
+			...e.type === void 0 || e.type === "text" || e.type === "email" || e.type === "password" || e.type === "url" || e.type === "tel" || e.type === "search" ? e.inputProps : {}
+		})
+	});
+}
+K.displayName = "SchemaFormFieldRenderer";
+//#endregion
+//#region src/components/features/schema-form/schema-form.strings.ts
+var ne = {
+	submitLabel: "Save changes",
+	resetLabel: "Reset",
+	defaultSectionTitle: "General",
+	emptyTitle: "No fields configured",
+	emptyDescription: "Add fields to the schema to render a form.",
+	jsonParseError: "Enter valid JSON.",
+	validationError: "Invalid value.",
+	formatRequiredError: (e) => `${e} is required.`
+};
+//#endregion
+//#region src/components/features/schema-form/schema-form.tsx
+function re(e) {
+	return e.replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+function ie({ section: e }) {
+	return !e.title && !e.description ? null : /* @__PURE__ */ S("div", {
+		className: "schema-form--section-heading mb-3 space-y-1",
+		children: [!!e.title && /* @__PURE__ */ x(n, {
+			weight: "semibold",
+			className: "schema-form--section-title",
+			children: e.title
+		}), !!e.description && /* @__PURE__ */ x(n, {
+			size: "xs",
+			type: "secondary",
+			className: "schema-form--section-description",
+			children: e.description
+		})]
+	});
+}
+function q({ schema: r, value: a, defaultValue: o, errors: s, disabled: c = !1, layout: l = "form", columns: u = 2, id: d, name: f, title: p, description: m, headerSlot: g, footerSlot: _, actionsSlot: b, emptySlot: T, showActions: D, submitLabel: O, resetLabel: k, submitDisabled: A = !1, resetDisabled: j = !1, isSubmitting: M = !1, onValueChange: N, onFieldChange: P, onSubmit: F, onReset: I, onError: z, renderField: B, renderSection: V, strings: H, className: U, contentClassName: W, sectionClassName: G, fieldClassName: q }) {
+	let ae = v(), J = d ?? `schema-form-${ae}`, Y = e(ne, H), X = te({
+		fields: r.fields,
+		value: a,
+		defaultValue: o,
+		errors: s,
+		onValueChange: N,
+		onFieldChange: P,
+		formatRequiredError: Y.formatRequiredError,
+		validationError: Y.validationError,
+		onError: z
+	}), Z = y(() => ee(r, X.values, Y.defaultSectionTitle, u, z), [
+		u,
+		X.values,
+		z,
+		r,
+		Y.defaultSectionTitle
+	]), oe = Z.some((e) => e.fields.length > 0), se = {
+		setFieldValue: X.setFieldValue,
+		setValues: X.setValues,
+		reset: X.reset,
+		validate: X.validate
+	}, ce = D ?? !!(F || I || b), le = O ?? Y.submitLabel, ue = k ?? Y.resetLabel, de = (e) => {
+		let n = `${J}-${re(e.key)}`, r = c || E(e, X.values, z), i = {
+			field: e,
+			value: X.getFieldValue(e.key),
+			values: X.values,
+			error: X.getFieldError(e.key),
+			disabled: r,
+			required: !!e.required,
+			fieldId: n,
+			onValueChange: (t) => X.setFieldValue(e.key, t),
+			onError: z
+		}, a = /* @__PURE__ */ x(K, {
+			...i,
+			strings: Y
+		});
+		return /* @__PURE__ */ x("div", {
+			className: t("schema-form--field", w[e.width ?? "auto"], e.className, q),
+			children: B?.({
+				...i,
+				defaultField: a
+			}) ?? a
+		}, e.key);
+	}, Q = (e) => /* @__PURE__ */ x("div", {
+		className: t("schema-form--section-fields", C[e.columns]),
+		children: e.fields.map(de)
+	}), fe = (e) => {
+		let n = Q(e), r = V?.({
+			section: e,
+			fields: n,
+			values: X.values
+		});
+		return r == null ? /* @__PURE__ */ S("section", {
+			className: t("schema-form--section", e.className, G),
+			children: [
+				/* @__PURE__ */ x(ie, { section: e }),
+				n,
+				!!e.footerSlot && /* @__PURE__ */ x("div", {
+					className: "schema-form--section-footer mt-3",
+					children: e.footerSlot
+				})
+			]
+		}, e.id) : /* @__PURE__ */ x(h, { children: r }, e.id);
+	}, pe = (e) => {
+		let n = Q(e), r = V?.({
+			section: e,
+			fields: n,
+			values: X.values
+		});
+		return r == null ? /* @__PURE__ */ x(i, {
+			className: t("schema-form--section-card", e.className, G),
+			icon: e.icon,
+			title: e.title,
+			description: e.description,
+			footerSlot: e.footerSlot,
+			headerDivider: !0,
+			children: n
+		}, e.id) : /* @__PURE__ */ x(h, { children: r }, e.id);
+	}, $ = b ?? (ce ? /* @__PURE__ */ x(L, {
+		submitLabel: le,
+		resetLabel: ue,
+		showReset: !!I,
+		disabled: c,
+		submitDisabled: A,
+		resetDisabled: j,
+		isSubmitting: M,
+		onReset: () => {
+			let e = X.reset();
+			I?.(e, se);
+		}
+	}) : null), me = T ?? /* @__PURE__ */ x(R, {
+		title: Y.emptyTitle,
+		description: Y.emptyDescription
+	});
+	return /* @__PURE__ */ x("form", {
+		id: J,
+		name: f,
+		noValidate: !0,
+		className: t("schema-form--component", U),
+		onSubmit: async (e) => {
+			if (e.preventDefault(), !(c || A || M) && X.validate()) try {
+				await F?.(X.values, se, e);
+			} catch (e) {
+				z?.(e);
+			}
+		},
+		children: l === "cards" ? /* @__PURE__ */ S("div", {
+			className: t("schema-form--cards space-y-4", W),
+			children: [
+				!!(p ?? r.title ?? m ?? r.description ?? g) && /* @__PURE__ */ S("div", {
+					className: "schema-form--header flex items-start justify-between gap-4",
+					children: [/* @__PURE__ */ S("div", {
+						className: "min-w-0 space-y-1",
+						children: [!!(p ?? r.title) && /* @__PURE__ */ x(n, {
+							weight: "semibold",
+							className: "schema-form--title",
+							children: p ?? r.title
+						}), !!(m ?? r.description) && /* @__PURE__ */ x(n, {
+							size: "xs",
+							type: "secondary",
+							className: "schema-form--description",
+							children: m ?? r.description
+						})]
+					}), g]
+				}),
+				oe ? Z.map(pe) : me,
+				_,
+				$
+			]
+		}) : /* @__PURE__ */ x(i, {
+			className: "schema-form--surface",
+			title: p ?? r.title,
+			description: m ?? r.description,
+			headerEnd: g,
+			footerSlot: _ || $ ? /* @__PURE__ */ S("div", {
+				className: "schema-form--footer flex flex-col gap-3",
+				children: [_, $]
+			}) : void 0,
+			headerDivider: !!(p ?? r.title ?? m ?? r.description ?? g),
+			footerDivider: !!(_ || $),
+			children: /* @__PURE__ */ x("div", {
+				className: t("schema-form--content space-y-6", W),
+				children: oe ? Z.map(fe) : me
+			})
+		})
+	});
+}
+q.displayName = "SchemaForm";
+//#endregion
+export { q as SchemaForm, L as SchemaFormActions, R as SchemaFormEmpty, K as SchemaFormFieldRenderer, ne as defaultSchemaFormStrings, te as useSchemaForm };
+
+//# sourceMappingURL=index.js.map