@openrails/contentkit-ui 0.79.0 → 0.81.0

package/dist/components/admin/content-manager.js

@@ -0,0 +1,591 @@
+import { toContentKitError as e } from "../../client/errors.js";
+import { useMessages as t } from "../../i18n/context.js";
+import { useContentKitClient as n, useErrorReporter as r } from "../../react/context.js";
+import { Alert as i, AlertDescription as a } from "../../ui/alert.js";
+import { Button as o, buttonVariants as s } from "../../ui/button.js";
+import { keyOf as c, useContentScope as l, usePaged as ee } from "../../react/use-resource.js";
+import { Badge as te } from "../../ui/badge.js";
+import { Input as u } from "../../ui/input.js";
+import { Label as d } from "../../ui/label.js";
+import { Select as ne, SelectContent as re, SelectItem as f, SelectTrigger as ie, SelectValue as ae } from "../../ui/select.js";
+import { Skeleton as p } from "../../ui/skeleton.js";
+import { Textarea as m } from "../../ui/textarea.js";
+import { ErrorLine as h, RelativeTime as g, contentError as _, formatDate as oe, useAction as se } from "../social/parts.js";
+import { AdminRoot as v, LoadFailed as ce, NoAccess as y, Pager as le, Rows as b, pageOf as x, useConfirm as ue } from "./shell.js";
+import { localInput as de } from "../social/bans.js";
+import { imageRefs as S } from "../../client/contents.js";
+import { useAdminLocation as C, useFlowClient as w, useStaffAccess as T } from "../../react/admin.js";
+import { ContentSections as E } from "../content/editors.js";
+import { useContent as D } from "../../react/contents.js";
+import { useEffect as O, useId as k, useMemo as A, useRef as j, useState as M } from "react";
+import { Fragment as N, jsx as P, jsxs as F } from "react/jsx-runtime";
+//#region src/components/admin/content-manager.tsx
+function I(e = {}) {
+	return T(["contents"], e);
+}
+function L(e) {
+	return e.moderation === "rejected" ? "rejected" : e.moderation === "held" ? "held" : e.state === "draft" ? "draft" : e.live ? "published" : "scheduled";
+}
+var fe = (e) => (e ?? []).map((e) => typeof e == "string" ? {
+	value: e,
+	label: e
+} : e), R = {
+	published: "default",
+	scheduled: "secondary",
+	draft: "outline",
+	held: "secondary",
+	rejected: "destructive"
+}, z = [
+	"draft",
+	"scheduled",
+	"published"
+];
+function B({ client: e, baseUrl: t, auth: n, guard: r, appearance: i, className: a, language: o, messages: s, ...c }) {
+	let l = w({
+		client: e,
+		baseUrl: t,
+		auth: n
+	});
+	return /* @__PURE__ */ P(v, {
+		flow: "content-manager",
+		appearance: i,
+		className: a,
+		language: o,
+		messages: s,
+		guard: r,
+		children: /* @__PURE__ */ P(V, {
+			...c,
+			client: l
+		})
+	});
+}
+function V({ basePath: e, navigation: n, ...r }) {
+	let { t: i } = t(), a = C(e, n), s = I({ client: r.client });
+	return s.loading ? /* @__PURE__ */ P(b, {}) : s.allowed.contents ? a.view ? /* @__PURE__ */ F(N, { children: [/* @__PURE__ */ P(o, {
+		variant: "ghost",
+		size: "sm",
+		className: "justify-self-start",
+		onClick: () => a.go(""),
+		children: i("contentManager.back")
+	}), /* @__PURE__ */ P(W, {
+		...r,
+		id: a.view === "new" ? null : a.view,
+		onCreated: (e) => a.go(e.id, void 0, { replace: !0 }),
+		onDeleted: () => a.go("", void 0, { replace: !0 })
+	}, a.view)] }) : /* @__PURE__ */ P(H, {
+		...r,
+		loc: a
+	}) : /* @__PURE__ */ P(y, { children: i("contentManager.noAccess") });
+}
+function H({ loc: e, client: n, kind: r, languages: i, contentHref: a, pageSize: p = 20, onError: m }) {
+	let _ = t(), { t: v } = _, y = k(), de = fe(i)[0]?.value, S = e.query.get("q") ?? "", C = z.find((t) => t === e.query.get("status")) ?? "", w = e.query.get("deleted") === "1", T = x(e.query), E = {
+		q: S,
+		status: C,
+		deleted: w ? "1" : void 0
+	}, D = (t) => e.go("", {
+		...E,
+		...t
+	}), [A, j] = M(S);
+	O(() => j(S), [S]);
+	let { store: I, scope: B } = l(n), V = w ? "deleted" : C || void 0, H = ee(I, c("contents-page", B, r, S, V, p), {
+		type: "contents",
+		scope: w ? "deleted" : void 0
+	}, T, p, (e, t) => n.contents.manage({
+		...e,
+		kind: r,
+		q: S || void 0,
+		state: V,
+		language: de
+	}, t)), U = se("content.save", m), { confirm: W, dialog: pe } = ue(), G = async (e) => {
+		await W({
+			title: v("contentManager.deleteTitle", { title: e.title }),
+			description: v("contentManager.deleteBody"),
+			confirm: v("contentManager.delete")
+		}) && await U.run(() => n.contents.remove(e.id));
+	};
+	return /* @__PURE__ */ F("div", {
+		className: "grid gap-4",
+		children: [
+			/* @__PURE__ */ F("div", {
+				className: "flex flex-wrap items-center justify-between gap-2",
+				children: [/* @__PURE__ */ P("h2", {
+					className: "text-base font-semibold",
+					children: v("contentManager.title")
+				}), /* @__PURE__ */ P(o, {
+					size: "sm",
+					onClick: () => e.go("new"),
+					children: v("contentManager.new")
+				})]
+			}),
+			/* @__PURE__ */ F("div", {
+				className: "flex gap-2",
+				role: "group",
+				"aria-label": v("contentManager.title"),
+				children: [/* @__PURE__ */ P(o, {
+					size: "sm",
+					variant: w ? "outline" : "default",
+					"aria-pressed": !w,
+					onClick: () => e.go("", { q: S }),
+					children: v("contentManager.items")
+				}), /* @__PURE__ */ P(o, {
+					size: "sm",
+					variant: w ? "default" : "outline",
+					"aria-pressed": w,
+					onClick: () => e.go("", {
+						q: S,
+						deleted: "1"
+					}),
+					children: v("contentManager.deleted")
+				})]
+			}),
+			/* @__PURE__ */ F("div", {
+				className: "grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto]",
+				children: [/* @__PURE__ */ F("form", {
+					className: "flex gap-2",
+					role: "search",
+					onSubmit: (e) => {
+						e.preventDefault(), D({ q: A.trim() });
+					},
+					children: [
+						/* @__PURE__ */ P(d, {
+							htmlFor: `${y}-q`,
+							className: "sr-only",
+							children: v("contentManager.search")
+						}),
+						/* @__PURE__ */ P(u, {
+							id: `${y}-q`,
+							className: "h-8",
+							type: "search",
+							value: A,
+							placeholder: v("contentManager.search"),
+							onChange: (e) => j(e.target.value)
+						}),
+						/* @__PURE__ */ P(o, {
+							type: "submit",
+							size: "sm",
+							variant: "outline",
+							children: v("moderation.filter")
+						})
+					]
+				}), !w && /* @__PURE__ */ F(ne, {
+					value: C,
+					onValueChange: (e) => D({ status: String(e ?? "") }),
+					children: [/* @__PURE__ */ P(ie, {
+						size: "sm",
+						"aria-label": v("contentManager.status"),
+						children: /* @__PURE__ */ P(ae, { children: (e) => v(e ? `contentManager.${e}` : "contentManager.allStatuses") })
+					}), /* @__PURE__ */ F(re, { children: [/* @__PURE__ */ P(f, {
+						value: "",
+						children: v("contentManager.allStatuses")
+					}), z.map((e) => /* @__PURE__ */ P(f, {
+						value: e,
+						children: v(`contentManager.${e}`)
+					}, e))] })]
+				})]
+			}),
+			/* @__PURE__ */ P(h, { error: U.error }),
+			H.loading && !H.items.length ? /* @__PURE__ */ P(b, {}) : H.error && !H.items.length ? /* @__PURE__ */ P(ce, {
+				error: H.error,
+				message: v("contentManager.loadFailed"),
+				retry: H.reload
+			}) : H.items.length ? /* @__PURE__ */ P("ul", {
+				className: "grid divide-y divide-border rounded-lg border border-border",
+				"aria-busy": H.loading,
+				children: H.items.map((t) => {
+					let r = L(t), i = r === "published" ? a?.(t) : void 0;
+					return /* @__PURE__ */ F("li", {
+						className: "flex flex-wrap items-start gap-3 p-3",
+						"data-ckui": "content-row",
+						"data-status": w ? "deleted" : r,
+						children: [/* @__PURE__ */ F("div", {
+							className: "grid min-w-0 flex-1 gap-1",
+							children: [w ? /* @__PURE__ */ P("span", {
+								className: "font-medium break-words",
+								children: t.title
+							}) : /* @__PURE__ */ P("button", {
+								type: "button",
+								className: "text-left font-medium break-words hover:underline",
+								onClick: () => e.go(t.id),
+								children: t.title
+							}), /* @__PURE__ */ F("div", {
+								className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground",
+								children: [
+									!w && /* @__PURE__ */ P(te, {
+										variant: R[r],
+										children: v(`contentManager.${r}`)
+									}),
+									/* @__PURE__ */ P("span", { children: t.language }),
+									/* @__PURE__ */ P(g, { at: w && t.deleted_at ? t.deleted_at : t.updated_at }),
+									r === "scheduled" && t.publish_at && /* @__PURE__ */ P("span", { children: v("pollManager.goesLive", { date: oe(_, t.publish_at) }) })
+								]
+							})]
+						}), /* @__PURE__ */ P("div", {
+							className: "flex flex-wrap gap-2",
+							children: w ? /* @__PURE__ */ P(o, {
+								size: "sm",
+								variant: "outline",
+								disabled: U.pending,
+								onClick: () => void U.run(() => n.contents.restore(t.id)),
+								children: v("moderation.restore")
+							}) : /* @__PURE__ */ F(N, { children: [
+								i && /* @__PURE__ */ P("a", {
+									className: s({
+										size: "sm",
+										variant: "ghost"
+									}),
+									href: i,
+									children: v("contentManager.view")
+								}),
+								/* @__PURE__ */ P(o, {
+									size: "sm",
+									variant: "outline",
+									onClick: () => e.go(t.id),
+									children: v("comments.edit")
+								}),
+								/* @__PURE__ */ P(o, {
+									size: "sm",
+									variant: "destructive",
+									disabled: U.pending,
+									onClick: () => void G(t),
+									children: v("comments.delete")
+								})
+							] })
+						})]
+					}, t.id);
+				})
+			}) : /* @__PURE__ */ P("p", {
+				className: "text-muted-foreground",
+				children: v(w ? "contentManager.noDeleted" : "contentManager.empty")
+			}),
+			/* @__PURE__ */ P(le, {
+				page: T,
+				hasNext: H.hasNext,
+				disabled: H.loading,
+				onPage: (t) => e.go("", {
+					...E,
+					page: t > 1 ? t : void 0
+				})
+			}),
+			pe
+		]
+	});
+}
+var U = {
+	title: "",
+	slug: "",
+	description: "",
+	publishAt: "",
+	body: ""
+};
+function W({ id: s, client: c, kind: l, languages: ee, renderEditor: g, contentHref: oe, labels: se, ownerGroup: v, onCreated: y, onDeleted: le, onError: b }) {
+	let x = n(c), C = t(), { t: w } = C, T = k(), j = fe(ee), [I, z] = M(j[0]?.value ?? "en"), B = D(s, l, I, { client: x }), V = r(b), [H, W] = M(s ? null : U), [G, K] = M(null), [me, q] = M(null), { confirm: he, dialog: ge } = ue(), J = B.content;
+	O(() => {
+		if (!J) return;
+		let e = J.text?.[I];
+		W((t) => t ?? {
+			title: e?.title ?? "",
+			slug: e?.slug ?? "",
+			description: e?.description ?? "",
+			body: e?.body ?? "",
+			publishAt: J.publish_at && !J.live ? de(new Date(J.publish_at)) : ""
+		});
+	}, [J, I]);
+	let { imageSrc: _e } = B, ve = A(() => (H?.body ?? "").replace(S(), (e, t) => {
+		let n = _e(t);
+		return n && n !== t ? n.replaceAll("&", "&") : e;
+	}), [H?.body, _e]);
+	if (s && !H) return B.error ? /* @__PURE__ */ P(ce, {
+		error: B.error,
+		message: w("contentManager.loadFailed"),
+		retry: B.reload
+	}) : /* @__PURE__ */ F("div", {
+		className: "grid gap-3",
+		"aria-busy": !0,
+		children: [/* @__PURE__ */ P(p, { className: "h-9 w-full" }), /* @__PURE__ */ P(p, { className: "h-48 w-full" })]
+	});
+	let Y = H, X = (e) => W((t) => ({
+		...t,
+		...e
+	})), Z = (t) => {
+		let n = e(t);
+		K(n), V(n, "content.save");
+	}, ye = () => ({
+		title: Y.title.trim(),
+		slug: Y.slug.trim() || void 0,
+		description: Y.description.trim(),
+		body: Y.body
+	}), be = async () => {
+		if (K(null), q(null), !Y.title.trim()) return K(w("contentManager.titleRequired"));
+		try {
+			if (!J) {
+				let e = await B.create({
+					kind: l,
+					text: { [I]: ye() },
+					owner_group_id: v
+				});
+				y?.(e);
+				return;
+			}
+			let e = await B.putText(ye());
+			q(w("pollEditor.saved")), W((t) => ({
+				...t,
+				slug: e.text?.[I]?.slug ?? t.slug
+			}));
+		} catch (e) {
+			Z(e);
+		}
+	}, xe = async (e) => {
+		K(null), q(null);
+		try {
+			e ? await B.publish(Y.publishAt ? new Date(Y.publishAt).toISOString() : void 0) : await B.unpublish(), q(w(e ? "contentManager.publishedNotice" : "contentManager.unpublishedNotice"));
+		} catch (e) {
+			Z(e);
+		}
+	}, Se = async () => {
+		if (J && await he({
+			title: w("contentManager.deleteTitle", { title: J.title }),
+			description: w("contentManager.deleteBody"),
+			confirm: w("contentManager.delete")
+		})) try {
+			await B.remove(), le?.(J);
+		} catch (e) {
+			Z(e);
+		}
+	}, Q = J ? L(J) : "draft", Ce = J && Q === "published" ? oe?.(J) : void 0, $ = {
+		value: ve,
+		onChange: (e) => X({ body: B.storedBody(e) }),
+		uploadImage: J ? (e) => B.uploadImage(e) : void 0,
+		disabled: B.saving,
+		placeholder: w("contentManager.bodyPlaceholder"),
+		"aria-label": w("contentManager.body")
+	};
+	return /* @__PURE__ */ F(N, { children: [/* @__PURE__ */ F("form", {
+		className: "grid gap-4",
+		"data-ckui": "content-form",
+		onSubmit: (e) => {
+			e.preventDefault(), be();
+		},
+		children: [
+			/* @__PURE__ */ F("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [
+					/* @__PURE__ */ P("h2", {
+						className: "text-base font-semibold",
+						children: w(J ? "contentManager.editTitle" : "contentManager.newTitle")
+					}),
+					J && /* @__PURE__ */ P(te, {
+						variant: R[Q],
+						children: w(`contentManager.${Q}`)
+					}),
+					Ce && /* @__PURE__ */ P("a", {
+						className: "text-xs text-muted-foreground hover:underline",
+						href: Ce,
+						children: w("contentManager.view")
+					})
+				]
+			}),
+			J?.moderation && /* @__PURE__ */ P(i, {
+				variant: J.moderation === "rejected" ? "destructive" : "default",
+				children: /* @__PURE__ */ P(a, { children: J.moderation_reason ? w(`contentManager.${J.moderation === "rejected" ? "rejectedBecause" : "heldBecause"}`, { reason: J.moderation_reason }) : w(`contentManager.${J.moderation === "rejected" ? "rejectedNote" : "heldNote"}`) })
+			}),
+			j.length > 1 && /* @__PURE__ */ F("div", {
+				className: "grid gap-1.5",
+				children: [/* @__PURE__ */ P(d, {
+					htmlFor: `${T}-lang`,
+					children: w("contentManager.language")
+				}), /* @__PURE__ */ F(ne, {
+					value: I,
+					onValueChange: (e) => {
+						z(String(e ?? "")), W(J ? null : U);
+					},
+					children: [/* @__PURE__ */ P(ie, {
+						id: `${T}-lang`,
+						className: "w-full",
+						children: /* @__PURE__ */ P(ae, { children: (e) => j.find((t) => t.value === e)?.label ?? e })
+					}), /* @__PURE__ */ P(re, { children: j.map((e) => /* @__PURE__ */ P(f, {
+						value: e.value,
+						children: e.label
+					}, e.value)) })]
+				})]
+			}),
+			/* @__PURE__ */ F("div", {
+				className: "grid gap-1.5",
+				children: [/* @__PURE__ */ P(d, {
+					htmlFor: `${T}-title`,
+					children: w("contentManager.itemTitle")
+				}), /* @__PURE__ */ P(u, {
+					id: `${T}-title`,
+					value: Y.title,
+					required: !0,
+					maxLength: 300,
+					onChange: (e) => X({ title: e.target.value })
+				})]
+			}),
+			/* @__PURE__ */ F("div", {
+				className: "grid gap-4 sm:grid-cols-2",
+				children: [/* @__PURE__ */ F("div", {
+					className: "grid gap-1.5",
+					children: [/* @__PURE__ */ P(d, {
+						htmlFor: `${T}-slug`,
+						children: w("contentManager.slug")
+					}), /* @__PURE__ */ P(u, {
+						id: `${T}-slug`,
+						value: Y.slug,
+						placeholder: w("contentManager.slugAuto"),
+						onChange: (e) => X({ slug: e.target.value })
+					})]
+				}), /* @__PURE__ */ F("div", {
+					className: "grid gap-1.5",
+					children: [/* @__PURE__ */ P(d, {
+						htmlFor: `${T}-publish`,
+						children: w("contentManager.publishAt")
+					}), /* @__PURE__ */ P(u, {
+						id: `${T}-publish`,
+						type: "datetime-local",
+						value: Y.publishAt,
+						onChange: (e) => X({ publishAt: e.target.value })
+					})]
+				})]
+			}),
+			/* @__PURE__ */ F("div", {
+				className: "grid gap-1.5",
+				children: [/* @__PURE__ */ P(d, {
+					htmlFor: `${T}-description`,
+					children: w("contentManager.description")
+				}), /* @__PURE__ */ P(m, {
+					id: `${T}-description`,
+					rows: 2,
+					value: Y.description,
+					onChange: (e) => X({ description: e.target.value })
+				})]
+			}),
+			/* @__PURE__ */ P(pe, {
+				item: J,
+				src: B.coverSrc,
+				saving: B.saving,
+				onFile: (e) => void B.setCover(e).catch(Z)
+			}),
+			/* @__PURE__ */ F("div", {
+				className: "grid gap-1.5",
+				children: [
+					/* @__PURE__ */ P("span", {
+						className: "text-sm font-medium",
+						children: w("contentManager.body")
+					}),
+					g ? g($) : /* @__PURE__ */ P(m, {
+						"aria-label": $["aria-label"],
+						rows: 12,
+						value: Y.body,
+						placeholder: $.placeholder,
+						onChange: (e) => X({ body: e.target.value })
+					}),
+					!J && /* @__PURE__ */ P("p", {
+						className: "text-xs text-muted-foreground",
+						children: w("contentManager.imagesAfterCreate")
+					})
+				]
+			}),
+			G && /* @__PURE__ */ P(h, { children: typeof G == "string" ? G : _(C, G) }),
+			me && !G && /* @__PURE__ */ P("p", {
+				role: "status",
+				className: "text-sm text-muted-foreground",
+				children: me
+			}),
+			/* @__PURE__ */ F("div", {
+				className: "flex flex-wrap gap-2 border-t border-border pt-4",
+				children: [
+					/* @__PURE__ */ P(o, {
+						type: "submit",
+						disabled: B.saving,
+						children: B.saving ? w("common.saving") : w(J ? "common.save" : "contentManager.createDraft")
+					}),
+					J && !J.live && /* @__PURE__ */ P(o, {
+						type: "button",
+						variant: "outline",
+						disabled: B.saving,
+						onClick: () => void xe(!0),
+						children: w("contentManager.publish")
+					}),
+					J?.state === "published" && /* @__PURE__ */ P(o, {
+						type: "button",
+						variant: "outline",
+						disabled: B.saving,
+						onClick: () => void xe(!1),
+						children: w("contentManager.unpublish")
+					}),
+					J && /* @__PURE__ */ P(o, {
+						type: "button",
+						variant: "destructive",
+						className: "ms-auto",
+						disabled: B.saving,
+						onClick: () => void Se(),
+						children: w("contentManager.delete")
+					})
+				]
+			}),
+			ge
+		]
+	}), J && /* @__PURE__ */ P(E, {
+		content: J,
+		client: x,
+		onError: b,
+		labels: se
+	})] });
+}
+function pe({ item: e, src: n, saving: r, onFile: i }) {
+	let { t: a } = t(), s = j(null);
+	return /* @__PURE__ */ F("div", {
+		className: "grid gap-1.5",
+		"data-ckui": "content-cover",
+		children: [/* @__PURE__ */ P("span", {
+			className: "text-sm font-medium",
+			children: a("contentManager.cover")
+		}), e ? /* @__PURE__ */ F("div", {
+			className: "flex flex-wrap items-center gap-3",
+			children: [
+				n ? /* @__PURE__ */ P("img", {
+					src: n,
+					alt: "",
+					className: "h-20 w-36 rounded-md border border-border object-cover"
+				}) : /* @__PURE__ */ P("span", {
+					className: "text-muted-foreground",
+					children: a("contentManager.noCover")
+				}),
+				/* @__PURE__ */ P(o, {
+					type: "button",
+					size: "sm",
+					variant: "outline",
+					disabled: r,
+					onClick: () => s.current?.click(),
+					children: a(n ? "pollEditor.replaceImage" : "contentManager.addCover")
+				}),
+				n && /* @__PURE__ */ P(o, {
+					type: "button",
+					size: "sm",
+					variant: "ghost",
+					disabled: r,
+					onClick: () => i(null),
+					children: a("pollEditor.removeImage")
+				}),
+				/* @__PURE__ */ P("input", {
+					ref: s,
+					type: "file",
+					accept: "image/*",
+					hidden: !0,
+					"aria-label": a("contentManager.cover"),
+					onChange: (e) => {
+						let t = e.target.files?.[0];
+						e.target.value = "", t && i(t);
+					}
+				})
+			]
+		}) : /* @__PURE__ */ P("p", {
+			className: "text-xs text-muted-foreground",
+			children: a("contentManager.imagesAfterCreate")
+		})]
+	});
+}
+//#endregion
+export { W as ContentEditor, B as ContentManager, L as contentStatus, I as useContentManagerAccess };
+
+//# sourceMappingURL=content-manager.js.map