@voltro/cms 0.84.0 → 0.86.0

package/dist/ContentForm.js

@@ -0,0 +1,282 @@
+import { newInstanceId as e } from "./validation.js";
+import { contentFormStrings as t } from "./formStrings.js";
+import { RichDocumentEditor as n } from "./RichDocumentEditor.js";
+import { createElement as r, useId as i, useRef as a, useState as o } from "react";
+//#region src/ContentForm.tsx
+var s = ({ id: e, name: t, field: n, value: i, onChange: a }) => r("input", {
+	type: "text",
+	id: e,
+	name: t,
+	...n.maxLength === void 0 ? {} : { maxLength: n.maxLength },
+	value: i == null ? "" : String(i),
+	onChange: (e) => a(e.target.value)
+}), c = ({ id: e, name: t, field: n, value: i, onChange: a }) => r("textarea", {
+	id: e,
+	name: t,
+	...n.maxLength === void 0 ? {} : { maxLength: n.maxLength },
+	value: i == null ? "" : String(i),
+	onChange: (e) => a(e.target.value)
+}), l = ({ id: e, name: t, field: n, value: i, onChange: a }) => r("input", {
+	type: "number",
+	...n.fraction === !0 ? { step: "any" } : {},
+	id: e,
+	name: t,
+	value: i == null ? "" : String(i),
+	onChange: (e) => a(e.target.value === "" ? null : Number(e.target.value))
+}), u = ({ id: e, name: t, value: n, onChange: i }) => r("input", {
+	type: "checkbox",
+	id: e,
+	name: t,
+	checked: n === !0,
+	onChange: (e) => i(e.target.checked)
+}), d = (e) => ({ id: t, name: n, value: i, onChange: a }) => r("input", {
+	type: e,
+	id: t,
+	name: n,
+	value: i == null ? "" : String(i),
+	onChange: (e) => a(e.target.value)
+}), f = ({ id: e, name: t, field: n, value: i, onChange: a }) => r("select", {
+	id: e,
+	name: t,
+	value: i == null ? "" : String(i),
+	onChange: (e) => a(e.target.value)
+}, [r("option", {
+	key: "",
+	value: ""
+}, ""), ...(n.literals ?? []).map((e) => r("option", {
+	key: e,
+	value: e
+}, n.literalLabels?.[e] ?? e))]), p = (e) => ({ id: t, name: n, value: i, onChange: a }) => r("textarea", {
+	id: t,
+	name: n,
+	"data-cms-widget": e,
+	value: i == null ? "" : typeof i == "string" ? i : JSON.stringify(i),
+	onChange: (e) => a(e.target.value)
+}), m = (e) => {
+	let { id: n, label: i, element: o, value: s, onChange: c, widgets: l, strings: u } = e, d = t(u), f = Array.isArray(s) ? s : [], p = a(f);
+	p.current = f;
+	let m = v(o.editorHint, l), h = (e, t) => {
+		if (t < 0 || t >= f.length) return;
+		let n = [...f], [r] = n.splice(e, 1);
+		n.splice(t, 0, r), c(n);
+	}, g = o.kind === "number" ? 0 : o.kind !== "boolean" && "", _ = f.map((e, t) => {
+		let a = d.item(i, t + 1), s = `${n}-${t}`;
+		return r("fieldset", {
+			key: t,
+			"data-cms-array-entry": t
+		}, r("legend", null, r("label", { htmlFor: s }, a)), r(m, {
+			id: s,
+			name: `${n}[${t}]`,
+			field: o,
+			value: e,
+			onChange: (e) => c(p.current.map((n, r) => r === t ? e : n))
+		}), r("div", { "data-cms-array-actions": !0 }, r("button", {
+			type: "button",
+			"aria-label": d.moveUpLabel(a),
+			disabled: t === 0,
+			onClick: () => h(t, t - 1)
+		}, d.moveUp), r("button", {
+			type: "button",
+			"aria-label": d.moveDownLabel(a),
+			disabled: t === f.length - 1,
+			onClick: () => h(t, t + 1)
+		}, d.moveDown), r("button", {
+			type: "button",
+			"aria-label": d.removeLabel(a),
+			onClick: () => c(f.filter((e, n) => n !== t))
+		}, d.remove)));
+	});
+	return r("div", {
+		id: n,
+		"data-cms-array": !0
+	}, _, r("button", {
+		type: "button",
+		"data-cms-array-add": !0,
+		onClick: () => c([...p.current, g])
+	}, d.addItem));
+}, h = (e) => Array.isArray(e) ? e.filter((e) => typeof e == "object" && !!e && typeof e.componentId == "string") : [], g = (n) => {
+	let { id: i, definitions: s, value: c, onChange: l, widgets: u, renderPicker: d, fieldLabel: f, strings: p } = n, m = t(p), g = h(c), _ = a(g);
+	_.current = g;
+	let [v, b] = o(s[0]?.id ?? ""), [x, S] = o(""), C = new Map(s.map((e) => [e.id, e])), w = (e) => l(e), T = (e, t) => w(_.current.map((n, r) => r === e ? {
+		...n,
+		props: t
+	} : n)), E = (e, t) => {
+		if (t < 0 || t >= g.length) return;
+		let n = [...g], [r] = n.splice(e, 1);
+		r !== void 0 && n.splice(t, 0, r), w(n);
+	}, D = g.map((e, t) => {
+		let i = C.get(e.componentId), a = `${i?.displayName ?? e.componentId} ${t + 1}`;
+		return r("fieldset", {
+			key: e.instanceId ?? `new-${t}`,
+			"data-cms-component": e.componentId,
+			...e.instanceId === void 0 ? {} : { "data-cms-instance": e.instanceId }
+		}, r("legend", null, a), i === void 0 ? r("p", null, m.unknownComponent(e.componentId)) : r(y, {
+			contentType: { fields: i.props },
+			value: e.props,
+			onChange: (e) => T(t, e),
+			...((e) => e === void 0 ? {} : { widgetTarget: (t) => ({
+				field: n.field,
+				instanceId: e,
+				prop: t
+			}) })(e.instanceId),
+			...u ? { widgets: u } : {},
+			...d ? { renderPicker: d } : {},
+			...f ? { fieldLabel: (e) => f(`${i.id}.${e}`) } : {},
+			...p ? { strings: p } : {}
+		}), r("div", { "data-cms-component-actions": !0 }, r("button", {
+			type: "button",
+			"aria-label": m.moveUpLabel(a),
+			disabled: t === 0,
+			onClick: () => E(t, t - 1)
+		}, m.moveUp), r("button", {
+			type: "button",
+			"aria-label": m.moveDownLabel(a),
+			disabled: t === g.length - 1,
+			onClick: () => E(t, t + 1)
+		}, m.moveDown), r("button", {
+			type: "button",
+			"aria-label": m.removeLabel(a),
+			onClick: () => w(g.filter((e, n) => n !== t))
+		}, m.remove)));
+	}), O = `${i}-add`, k = x.trim().toLowerCase(), A = s.filter((e) => k === "" || [
+		e.displayName,
+		e.description ?? "",
+		...e.jobs ?? []
+	].some((e) => e.toLowerCase().includes(k))), j = /* @__PURE__ */ new Map();
+	for (let e of A) {
+		let t = e.jobs?.[0] ?? "";
+		j.set(t, [...j.get(t) ?? [], e]);
+	}
+	let M = (e) => [r("option", {
+		key: e.id,
+		value: e.id,
+		title: e.description
+	}, e.displayName), ...Object.keys(e.variants ?? {}).map((t) => r("option", {
+		key: `${e.id}::${t}`,
+		value: `${e.id}::${t}`,
+		title: e.description
+	}, `${e.displayName} — ${t}`))], N = [...j].sort(([e], [t]) => e === "" ? 1 : t === "" ? -1 : e.localeCompare(t)), [P = ""] = v.split("::"), F = A.some((e) => e.id === P) ? v : A[0]?.id ?? "", [I = "", L] = F.split("::"), R = `${i}-find`;
+	return r("div", {
+		id: i,
+		"data-cms-components": !0
+	}, D, r("div", { "data-cms-component-add": !0 }, r("label", { htmlFor: R }, m.findComponent), r("input", {
+		id: R,
+		type: "search",
+		value: x,
+		onChange: (e) => S(e.target.value)
+	}), r("label", { htmlFor: O }, m.addComponent), A.length === 0 ? r("p", { role: "status" }, m.noComponentFound) : r("select", {
+		id: O,
+		value: F,
+		onChange: (e) => b(e.target.value)
+	}, j.size === 1 && N[0]?.[0] === "" ? A.flatMap(M) : N.map(([e, t]) => r("optgroup", {
+		key: e || "~other",
+		label: e || m.otherComponents
+	}, t.flatMap(M)))), I !== "" && C.get(I)?.description !== void 0 ? r("p", { "data-cms-component-description": !0 }, C.get(I)?.description) : null, r("button", {
+		type: "button",
+		disabled: !C.has(I),
+		onClick: () => w([...g, {
+			instanceId: e(),
+			componentId: I,
+			props: { ...L === void 0 ? {} : C.get(I)?.variants?.[L] ?? {} }
+		}])
+	}, m.add)));
+}, _ = {
+	text: s,
+	textarea: c,
+	number: l,
+	boolean: u,
+	date: d("date"),
+	datetime: d("datetime-local"),
+	select: f,
+	richText: n,
+	media: p("media"),
+	reference: p("reference"),
+	array: p("array"),
+	struct: p("struct"),
+	components: p("components")
+}, v = (e, t) => t?.[e] ?? _[e], y = (e) => {
+	let { contentType: t, value: o, onChange: s, widgets: c, fieldWidgets: l, renderPicker: u, renderFieldAside: d, renderBlockAside: f, fieldLabel: p, strings: h, richTextSurface: _, widgetTarget: b } = e, x = i(), S = a(o);
+	S.current = o;
+	let C = (e, t) => s({
+		...S.current,
+		[e]: t
+	}), w = Object.entries(t.fields).map(([e, t]) => {
+		let i = `${x}-${e}`, a = d?.(e) ?? null, s = p?.(e) ?? e, S = l?.[e];
+		return S === void 0 && t.editorHint === "array" && c?.array === void 0 && t.element !== void 0 && t.element.kind !== "struct" && t.element.kind !== "array" ? r("div", {
+			key: e,
+			"data-cms-field": e,
+			role: "group",
+			"aria-labelledby": `${i}-label`
+		}, r("span", {
+			id: `${i}-label`,
+			"data-cms-field-label": !0
+		}, s), r(m, {
+			id: i,
+			label: s,
+			element: t.element,
+			value: o[e],
+			onChange: (t) => C(e, t),
+			widgets: c,
+			strings: h
+		}), a) : S === void 0 && t.editorHint === "components" && c?.components === void 0 ? r("div", {
+			key: e,
+			"data-cms-field": e,
+			role: "group",
+			"aria-labelledby": `${i}-label`
+		}, r("span", {
+			id: `${i}-label`,
+			"data-cms-field-label": !0
+		}, s), r(g, {
+			id: i,
+			field: e,
+			definitions: t.components ?? [],
+			value: o[e],
+			onChange: (t) => C(e, t),
+			widgets: c,
+			renderPicker: u,
+			fieldLabel: p,
+			strings: h
+		}), a) : S === void 0 && t.editorHint === "richText" && c?.richText === void 0 ? r("div", {
+			key: e,
+			"data-cms-field": e,
+			role: "group",
+			"aria-labelledby": `${i}-label`
+		}, r("span", {
+			id: `${i}-label`,
+			"data-cms-field-label": !0
+		}, s), r(n, {
+			id: i,
+			name: e,
+			field: t,
+			value: o[e],
+			onChange: (t) => C(e, t),
+			...u ? { renderPicker: u } : {},
+			...f ? { renderBlockAside: (t, n) => f(e, t, n) } : {},
+			...h ? { strings: h } : {},
+			..._ ? { surface: _ } : {},
+			renderComponentProps: (e, t, n) => r(y, {
+				contentType: { fields: e.props },
+				value: { ...t },
+				onChange: n,
+				...c ? { widgets: c } : {},
+				...u ? { renderPicker: u } : {},
+				...p ? { fieldLabel: (t) => p(`${e.id}.${t}`) } : {},
+				...h ? { strings: h } : {}
+			})
+		}), a) : r("div", {
+			key: e,
+			"data-cms-field": e,
+			...t.publishRequired === !0 ? { "data-cms-required-to-publish": !0 } : {}
+		}, r("label", { htmlFor: i }, s), r(S ?? v(t.editorHint, c), {
+			id: i,
+			name: e,
+			field: t,
+			value: o[e],
+			onChange: (t) => C(e, t),
+			target: b?.(e) ?? { field: e }
+		}), a);
+	});
+	return r("div", { "data-cms-form": !0 }, ...w);
+};
+//#endregion
+export { y as ContentForm, v as widgetFor };