@plumile/backoffice-react 0.1.101 → 0.1.102

package/lib/esm/BackofficeLayoutPage-BiSUwAi9.js

@@ -0,0 +1,625 @@
+import { o as e } from "./environment-DQfVyWHJ.js";
+import { t } from "./useRelayEnvironment-vQ86aW-n.js";
+import { r as n, t as r } from "./useBackofficeReactTranslation-Btt58EIo.js";
+import { a as i, c as a, i as o, n as s, o as c, r as l, s as u, t as d, u as f } from "./sidebarUtils-BZETlHea.js";
+import { t as p } from "./BackofficeErrorBoundary-BwRVSDHU.js";
+import { t as m } from "./BackofficeTopbarPortalContext-CphoSrZD.js";
+import { t as h } from "./backofficeAuthPaths-2KMmkBLv.js";
+import { t as g } from "./BackofficePermissionsContext-CmWwudBU.js";
+import { Suspense as _, useCallback as v, useContext as y, useEffect as b, useMemo as x, useState as S } from "react";
+import { useTranslation as C } from "react-i18next";
+import { RoutingContext as ee, useLocation as te } from "@plumile/router";
+import { AdminShellLayout as ne, BackofficeSidebarProfileMenu as w, Button as T, EnvironmentBadge as E, GlobalSearchInput as D, GripDotsSvg as O, InlineBanner as k, PinFilledSvg as A, PinSvg as j, SidebarHomeSvg as M, SidebarTasksSvg as N, Skeleton as P, ToastProvider as re } from "@plumile/ui";
+import { commitMutation as F, usePreloadedQuery as ie } from "react-relay";
+import { jsx as I, jsxs as L } from "react/jsx-runtime";
+//#region src/hooks/useBackofficeSidebarPins.ts
+var R = "backoffice.sidebar.pins.v1", z = (e) => {
+	if (typeof window > "u") return [];
+	try {
+		let t = window.localStorage.getItem(e);
+		if (t == null) return [];
+		let n = JSON.parse(t);
+		return Array.isArray(n) ? n.filter((e) => typeof e == "string") : [];
+	} catch {
+		return [];
+	}
+}, B = (e, t) => {
+	let n = [], r = /* @__PURE__ */ new Set();
+	return e.forEach((e) => {
+		t.has(e) && (r.has(e) || (r.add(e), n.push(e)));
+	}), n;
+}, ae = (e) => {
+	let { storageKey: t = R, visibleEntityIds: n } = e, r = x(() => new Set(n), [n]), [i, a] = S(() => B(z(t), r));
+	b(() => {
+		a((e) => {
+			let t = B(e, r);
+			if (t.length === e.length) {
+				let n = !0;
+				for (let r = 0; r < t.length; r += 1) if (t[r] !== e[r]) {
+					n = !1;
+					break;
+				}
+				if (n) return e;
+			}
+			return t;
+		});
+	}, [r]), b(() => {
+		a(B(z(t), r));
+	}, [t, r]), b(() => {
+		if (!(typeof window > "u")) try {
+			window.localStorage.setItem(t, JSON.stringify(i));
+		} catch {}
+	}, [i, t]);
+	let o = x(() => new Set(i), [i]), s = v((e) => {
+		r.has(e) && a((t) => t.includes(e) ? t : [...t, e]);
+	}, [r]), c = v((e) => {
+		a((t) => t.filter((t) => t !== e));
+	}, []), l = v((e) => {
+		o.has(e) ? c(e) : s(e);
+	}, [
+		s,
+		o,
+		c
+	]), u = v((e, t) => {
+		e !== t && a((n) => {
+			let r = n.indexOf(e), i = n.indexOf(t);
+			if (r === -1 || i === -1 || r === i) return n;
+			let a = [...n];
+			return a.splice(r, 1), a.splice(i, 0, e), a;
+		});
+	}, []);
+	return {
+		pins: i,
+		isPinned: v((e) => o.has(e), [o]),
+		pin: s,
+		unpin: c,
+		toggle: l,
+		reorder: u
+	};
+}, V = (e, t, n) => {
+	let r = {};
+	return e.forEach((e) => {
+		r[e] = n?.[e] ?? !0;
+	}), t != null && e.includes(t) && (r[t] = !1), r;
+}, oe = (e) => {
+	let { groupIds: t, activeGroupId: n, defaultCollapsedByGroupId: r } = e, i = x(() => [...t], [t]), [a, o] = S(() => V(i, n, r));
+	return b(() => {
+		o((e) => {
+			let t = {};
+			return i.forEach((n) => {
+				t[n] = e[n] ?? r?.[n] ?? !0;
+			}), n != null && i.includes(n) && (t[n] = !1), t;
+		});
+	}, [
+		n,
+		r,
+		i
+	]), b(() => {
+		n != null && o((e) => e[n] === !1 ? e : {
+			...e,
+			[n]: !1
+		});
+	}, [n]), {
+		collapsedByGroupId: a,
+		setCollapsed: v((e, t) => {
+			o((n) => n[e] === t ? n : {
+				...n,
+				[e]: t
+			});
+		}, [])
+	};
+}, H = "_1xws1b00 txvbqb9jg txvbqbcp txvbqbdoy txvbqbtxp txvbqbc6p txvbqb1rg txvbqb12g txvbqb1py txvbqblag txvbqbv0t txvbqbva1 txvbqbv txvbqb78 txvbqb6x txvbqb7k", U = (e, t) => e == null ? t ?? null : /* @__PURE__ */ I(e, {
+	width: 18,
+	height: 18,
+	"aria-hidden": "true"
+});
+function se(e) {
+	let { basePath: t, pathname: n, entities: r, sidebar: l, permissions: f, searchQuery: p, tApp: m, t: h, pinnedEntityIds: g = [], recentItems: _ = [], onTogglePin: v, onReorderPin: y, collapsedByGroupId: b, onGroupCollapsedChange: x } = e, S = u(r, l), C = Object.entries(S), ee = new Set(g), te = h("sidebar.actions.pin"), ne = h("sidebar.actions.unpin"), w = h("sidebar.actions.reorder"), T = d(S, l), E = p?.trim().toLowerCase() ?? "", D = (e) => E === "" || e.toLowerCase().includes(E), k = (e) => {
+		if (v == null) return null;
+		let t = ee.has(e), n = te, r = j;
+		return t && (n = ne, r = A), /* @__PURE__ */ I("button", {
+			type: "button",
+			className: H,
+			"aria-pressed": t,
+			"aria-label": n,
+			title: n,
+			onClick: (t) => {
+				t.preventDefault(), t.stopPropagation(), v(e);
+			},
+			children: /* @__PURE__ */ I(r, {
+				width: 14,
+				height: 14,
+				"aria-hidden": "true"
+			})
+		});
+	}, P = (e) => {
+		let { entityId: t, groupId: i, groupIcon: a, itemIcon: o, itemLabel: u, enableReorder: d } = e, p = r[t];
+		if (p == null) return null;
+		let h = {
+			kind: "entity",
+			id: t
+		};
+		if (p.kind === "tool" && (h = {
+			kind: "tool",
+			id: t
+		}), l?.isItemVisible?.(h, f) === !1) return null;
+		if (p.kind === "tool") {
+			let e = u ?? c(p.label, m);
+			return E !== "" && !e.toLowerCase().includes(E) ? null : {
+				id: `tool-${t}`,
+				data: {
+					kind: "tool",
+					id: t,
+					groupId: i
+				},
+				label: e,
+				href: p.routes.list,
+				icon: U(o ?? a, /* @__PURE__ */ I(N, {
+					width: 18,
+					height: 18,
+					"aria-hidden": "true"
+				})),
+				isActive: s(n, p.routes.list),
+				ariaLabel: e,
+				actionSlot: k(t)
+			};
+		}
+		if (!p.hasList) return null;
+		let g = u ?? c(p.label, m);
+		if (E !== "" && !g.toLowerCase().includes(E)) return null;
+		let _, v, b, x, S = !1;
+		d === !0 && y != null && (S = !0, _ = /* @__PURE__ */ I(O, {
+			width: 14,
+			height: 14,
+			"aria-hidden": "true"
+		}), v = (e) => {
+			let { dataTransfer: n } = e;
+			n.effectAllowed = "move", n.setData("text/plain", t);
+		}, b = (e) => {
+			e.preventDefault();
+			let { dataTransfer: t } = e;
+			t.dropEffect = "move";
+		}, x = (e) => {
+			e.preventDefault();
+			let n = e.dataTransfer.getData("text/plain");
+			n === "" || n === t || y(n, t);
+		});
+		let C;
+		return _ != null && (C = w), {
+			id: t,
+			data: {
+				kind: "entity",
+				id: t,
+				groupId: i
+			},
+			label: g,
+			href: p.routes.list,
+			icon: U(o ?? a, /* @__PURE__ */ I(N, {
+				width: 18,
+				height: 18,
+				"aria-hidden": "true"
+			})),
+			isActive: s(n, p.routes.list),
+			ariaLabel: g,
+			actionSlot: k(t),
+			dragHandleSlot: _,
+			dragHandleLabel: C,
+			draggable: S,
+			onDragStart: v,
+			onDragOver: b,
+			onDrop: x
+		};
+	}, re = (e) => {
+		let { hub: t, groupId: a, icon: o } = e, u = {
+			kind: "hub",
+			id: t.id
+		};
+		if (l?.isItemVisible?.(u, f) === !1) return null;
+		let d = i(t), p = d.map((e) => r[e] ?? null).filter((e) => {
+			if (e == null) return !1;
+			let t = "entity";
+			e.kind === "tool" && (t = "tool");
+			let n = {
+				kind: t,
+				id: e.id
+			};
+			return !(l?.isItemVisible?.(n, f) === !1 || e.kind !== "tool" && !e.hasList);
+		});
+		if (d.length > 0 && p.length === 0) return null;
+		let h = c(t.title, m), g = D(h), _ = p.some((e) => D(c(e.label, m)));
+		if (!g && !_) return null;
+		let v = s(n, t.href) || p.some((e) => s(n, e.routes.list));
+		return {
+			id: `hub-${t.id}`,
+			data: {
+				kind: "hub",
+				id: t.id,
+				groupId: a
+			},
+			label: h,
+			href: t.href,
+			icon: U(o, /* @__PURE__ */ I(N, {
+				width: 18,
+				height: 18,
+				"aria-hidden": "true"
+			})),
+			isActive: v,
+			ariaLabel: h
+		};
+	}, F = [];
+	if (g.length > 0) {
+		let e = g.map((e) => {
+			let t = T.get(e);
+			return P({
+				entityId: e,
+				groupId: t?.groupId,
+				groupIcon: t?.icon,
+				enableReorder: !0
+			});
+		}).filter((e) => e != null);
+		e.length > 0 && F.push({
+			id: "pinned",
+			title: h("sidebar.sections.pinned"),
+			items: e,
+			collapsible: !1
+		});
+	}
+	if (_.length > 0) {
+		let e = _.map((e) => {
+			if (r[e.id] == null) return null;
+			let t = {
+				kind: e.kind,
+				id: e.id
+			};
+			if (l?.isItemVisible?.(t, f) === !1 || E !== "" && !e.label.toLowerCase().includes(E)) return null;
+			let i = T.get(e.id);
+			return {
+				id: `recent-${e.kind}-${e.id}`,
+				data: {
+					kind: e.kind,
+					id: e.id,
+					groupId: i?.groupId
+				},
+				label: e.label,
+				href: e.href,
+				icon: U(i?.icon, /* @__PURE__ */ I(N, {
+					width: 18,
+					height: 18,
+					"aria-hidden": "true"
+				})),
+				isActive: s(n, e.href),
+				ariaLabel: e.label
+			};
+		}).filter((e) => e != null);
+		e.length > 0 && F.push({
+			id: "recent",
+			title: h("sidebar.sections.recent"),
+			items: e,
+			collapsible: !1
+		});
+	}
+	return C.forEach(([e, r], i) => {
+		if (r.isVisible != null && !r.isVisible(f)) return;
+		let u = [];
+		if (i === 0 && l?.isItemVisible?.({
+			kind: "dashboard",
+			id: "dashboard"
+		}, f) !== !1) {
+			let r = h("sidebar.items.dashboard");
+			E !== "" && !r.toLowerCase().includes(E) || u.push({
+				id: "dashboard",
+				data: {
+					kind: "dashboard",
+					id: "dashboard",
+					groupId: e
+				},
+				label: r,
+				href: t,
+				icon: U(void 0, /* @__PURE__ */ I(M, {
+					width: 18,
+					height: 18,
+					"aria-hidden": "true"
+				})),
+				isActive: s(n, t),
+				ariaLabel: h("sidebar.items.dashboard")
+			});
+		}
+		let d = o(r);
+		if (d.length > 0 && d.forEach((t) => {
+			if (t.kind === "dashboard") return;
+			if (t.kind === "hub") {
+				let n = re({
+					hub: a(t, l),
+					groupId: e,
+					icon: t.icon ?? r.icon
+				});
+				n != null && u.push(n);
+				return;
+			}
+			let n;
+			t.label != null && (n = c(t.label, m));
+			let i = P({
+				entityId: t.id,
+				groupId: e,
+				groupIcon: r.icon,
+				itemIcon: t.icon,
+				itemLabel: n
+			});
+			i != null && u.push(i);
+		}), u.length === 0) return;
+		let p;
+		r.title != null && (p = c(r.title, m));
+		let g = b?.[e], _;
+		x != null && (_ = (t) => {
+			x(e, t);
+		}), F.push({
+			id: e,
+			title: p,
+			items: u,
+			collapsible: r.behavior?.collapsible ?? !0,
+			defaultCollapsed: r.behavior?.defaultCollapsed ?? !0,
+			isCollapsed: g,
+			onCollapsedChange: _
+		});
+	}), F;
+}
+//#endregion
+//#region src/components/backoffice/routing/backofficeContentError.css.ts
+var W = "txvbqb9ip txvbqbai7 txvbqbu7g", G = "txvbqbwy", ce = (e) => {
+	if (e instanceof Error) {
+		let t = e.message.trim();
+		return t.length > 0 ? t : null;
+	}
+	if (typeof e == "string") {
+		let t = e.trim();
+		return t.length > 0 ? t : null;
+	}
+	return null;
+}, K = ({ error: e, onRetry: t }) => {
+	let { t: n } = r(), i = ce(e);
+	return /* @__PURE__ */ I("div", {
+		className: W,
+		role: "alert",
+		children: /* @__PURE__ */ I(k, {
+			tone: "danger",
+			className: G,
+			actions: /* @__PURE__ */ I(T, {
+				type: "button",
+				variant: "secondary",
+				size: "small",
+				onClick: t,
+				children: n("common.actions.retry")
+			}),
+			children: i
+		})
+	});
+}, le = "txvbqb9ip txvbqbai7 txvbqbaop txvbqbu7g txvbqbjs7", ue = "txvbqbjfg", de = "txvbqb9iy txvbqbaop txvbqbc17", q = "txvbqb9ip txvbqbai7 txvbqbaog txvbqblbg txvbqbjny txvbqb1ry txvbqb1cp txvbqb1qg txvbqbwp txvbqbv45", J = () => /* @__PURE__ */ L("div", {
+	className: le,
+	role: "status",
+	"aria-live": "polite",
+	"aria-busy": "true",
+	children: [
+		/* @__PURE__ */ I(P, {
+			variant: "text",
+			width: "38%",
+			className: ue
+		}),
+		/* @__PURE__ */ I(P, {
+			variant: "text",
+			width: "62%"
+		}),
+		/* @__PURE__ */ I("div", {
+			className: de,
+			children: Array.from({ length: 4 }, (e, t) => /* @__PURE__ */ L("div", {
+				className: q,
+				children: [
+					/* @__PURE__ */ I(P, {
+						variant: "text",
+						width: "46%"
+					}),
+					/* @__PURE__ */ I(P, {
+						variant: "text",
+						width: "82%",
+						lines: 2
+					}),
+					/* @__PURE__ */ I(P, {
+						variant: "block",
+						width: "100%",
+						height: 120
+					})
+				]
+			}, `content-skeleton-${t}`))
+		})
+	]
+}), Y = "txvbqb9ip txvbqbai7 txvbqbjs7 txvbqbu7g txvbqbk5y", fe = ({ children: e }) => /* @__PURE__ */ I("div", {
+	className: Y,
+	children: /* @__PURE__ */ I(p, {
+		fallback: ({ error: e, reset: t }) => /* @__PURE__ */ I(K, {
+			error: e,
+			onRetry: t
+		}),
+		children: /* @__PURE__ */ I(_, {
+			fallback: /* @__PURE__ */ I(J, {}),
+			children: e
+		})
+	})
+}), X = (e) => e?.trim() ?? "", pe = ({ viewer: e, unknownUserLabel: t }) => {
+	let n = [X(e?.firstName), X(e?.lastName)].filter((e) => e !== "").join(" ").trim();
+	n === "" && (n = t);
+	let r = X(e?.email), i = X(e?.initials);
+	i === "" && (i = "?");
+	let a = [n];
+	return r !== "" && a.push(r), {
+		displayName: n,
+		email: r,
+		initials: i,
+		ariaLabel: a.join(" - ")
+	};
+}, me = "plumile:backoffice:recent-items", he = (e) => {
+	if (typeof window > "u") return [];
+	try {
+		let t = window.localStorage.getItem(e);
+		if (t == null) return [];
+		let n = JSON.parse(t);
+		return Array.isArray(n) ? n.filter((e) => {
+			if (typeof e != "object" || !e) return !1;
+			let t = e;
+			return (t.kind === "entity" || t.kind === "tool") && typeof t.id == "string" && typeof t.label == "string" && typeof t.href == "string" && typeof t.visitedAt == "number";
+		}) : [];
+	} catch {
+		return [];
+	}
+}, ge = (e, t) => {
+	if (!(typeof window > "u")) try {
+		window.localStorage.setItem(e, JSON.stringify(t));
+	} catch {}
+}, Z = ({ children: i, permissions: a, authStatus: o, activeGroupId: s }) => {
+	let { t: c } = C(), { t: d } = r(), { pathname: p } = te(), _ = y(ee), T = t(), { auth: O, basePath: k, entities: A, sidebar: j } = n(), [M, N] = S(""), [P, ie] = S(!1), [L, R] = S(!1), [z, B] = S(null), V = j?.recentItems, H = V?.enabled === !0, U = V?.storageKey ?? me, W = V?.maxItems ?? 8, [G, ce] = S(() => H ? he(U) : []), K = x(() => u(A, j), [A, j]), le = x(() => Object.keys(K), [K]), ue = x(() => Object.fromEntries(Object.entries(K).map(([e, t]) => [e, t.behavior?.defaultCollapsed ?? !0])), [K]), de = x(() => f(K, A, j, a), [
+		A,
+		K,
+		a,
+		j
+	]), q = x(() => l(p, A), [A, p]);
+	b(() => {
+		if (!H || q == null) return;
+		let e = A[q];
+		if (e == null || e.kind !== "tool" && !e.hasList) return;
+		let t = e.routes.list, n = "entity";
+		e.kind === "tool" && (n = "tool");
+		let r = {
+			kind: n,
+			id: q,
+			label: e.label(c),
+			href: t,
+			visitedAt: Date.now()
+		};
+		ce((e) => {
+			let t = [r, ...e.filter((e) => e.id !== r.id || e.kind !== r.kind)].slice(0, W);
+			return ge(U, t), t;
+		});
+	}, [
+		q,
+		A,
+		H,
+		W,
+		U,
+		c
+	]);
+	let { pins: J, toggle: Y, reorder: X } = ae({ visibleEntityIds: de }), { collapsedByGroupId: Z, setCollapsed: Q } = oe({
+		groupIds: le,
+		activeGroupId: s,
+		defaultCollapsedByGroupId: ue
+	}), $ = x(() => se({
+		basePath: k,
+		pathname: p,
+		entities: A,
+		sidebar: j,
+		permissions: a,
+		searchQuery: M,
+		tApp: c,
+		t: d,
+		pinnedEntityIds: J,
+		recentItems: G,
+		onTogglePin: Y,
+		onReorderPin: X,
+		collapsedByGroupId: Z,
+		onGroupCollapsedChange: Q
+	}), [
+		k,
+		Z,
+		A,
+		p,
+		a,
+		J,
+		G,
+		X,
+		Q,
+		j,
+		M,
+		d,
+		c,
+		Y
+	]), _e = x(() => import.meta.env?.DEV === !0 ? "dev" : "prod", []), ve = v(() => {
+		L || (R(!0), (async () => {
+			try {
+				let t = await O.logout.load();
+				await new Promise((e, n) => {
+					F(T, {
+						mutation: t.logoutMutation,
+						variables: {},
+						onCompleted: () => {
+							e();
+						},
+						onError: (e) => {
+							n(e);
+						}
+					});
+				}), localStorage.removeItem("auth_token"), localStorage.removeItem("remember_me"), e(), _?.history.push({ pathname: h(k) });
+			} finally {
+				R(!1);
+			}
+		})().catch(() => {}));
+	}, [
+		O.logout,
+		k,
+		L,
+		T,
+		_
+	]), ye = o?.me ?? null, be = /* @__PURE__ */ I(w, {
+		collapsed: P,
+		viewer: x(() => pe({
+			viewer: ye,
+			unknownUserLabel: d("sidebar.profile.unknownUser")
+		}), [d, ye]),
+		labels: {
+			sectionTitle: d("sidebar.profile.title"),
+			menuAriaLabel: d("sidebar.profile.menuAriaLabel"),
+			signOut: d("sidebar.profile.actions.signOut")
+		},
+		onSignOut: ve,
+		isSigningOut: L
+	}), xe = null;
+	return z != null && (xe = /* @__PURE__ */ I(fe, { children: i })), /* @__PURE__ */ I(re, { children: /* @__PURE__ */ I(ne, {
+		sidebar: {
+			sections: $,
+			header: /* @__PURE__ */ I(E, { environment: _e }),
+			search: /* @__PURE__ */ I(D, {
+				value: M,
+				onChange: N,
+				placeholder: d("sidebar.search.placeholder"),
+				ariaLabel: d("sidebar.search.placeholder")
+			}),
+			footer: be,
+			isCollapsed: P,
+			onCollapsedChange: ie
+		},
+		topbar: { breadcrumb: /* @__PURE__ */ I("div", { ref: B }) },
+		children: /* @__PURE__ */ I(g, {
+			permissions: a,
+			children: /* @__PURE__ */ I(m, {
+				value: { target: z },
+				children: xe
+			})
+		})
+	}) });
+}, Q = ({ children: e, permissionsQuery: t, prepared: n, authStatus: r, activeGroupId: i }) => /* @__PURE__ */ I(Z, {
+	permissions: ie(t, n),
+	authStatus: r,
+	activeGroupId: i,
+	children: e
+}), $ = ({ children: e, permissionsQuery: t, prepared: n, authStatus: r, activeGroupId: i }) => t != null && n != null ? /* @__PURE__ */ I(Q, {
+	permissionsQuery: t,
+	prepared: n,
+	authStatus: r,
+	activeGroupId: i,
+	children: e
+}) : /* @__PURE__ */ I(Z, {
+	permissions: null,
+	authStatus: r,
+	activeGroupId: i,
+	children: e
+});
+//#endregion
+export { $ as BackofficeLayoutPage, $ as default };
+
+//# sourceMappingURL=BackofficeLayoutPage-BiSUwAi9.js.map