@plumile/backoffice-react 0.1.99 → 0.1.101

package/lib/esm/BackofficeLayoutPage-DQ0sVv24.js

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