@declarion/react 0.61.1 → 0.63.0

package/dist-lib/AdminCatalogPage.impl-BJGn7EvA.js

@@ -0,0 +1,441 @@
+import { Ft as e, Nt as t, wn as n, wt as r, xt as i } from "./useCurrentScreen--UovgvRj.js";
+import { r as a } from "./CopyButton-C0iEvaT1.js";
+import { t as o } from "./Pill-D-wsfRhx.js";
+import { t as s } from "./DynamicIcon-DuBSz6TZ.js";
+import { t as c } from "./page-inset-D_kkVwwN.js";
+import { useMemo as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/pages/AdminCatalogPage.impl.tsx
+var p = "string", m = "handler";
+function h() {
+	let { data: t } = e(), n = r(), [o, s] = u("handlers"), l = i().isPhone;
+	return t ? /* @__PURE__ */ f("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			height: "100%"
+		},
+		children: [/* @__PURE__ */ f("div", {
+			style: {
+				paddingTop: l ? 14 : 20,
+				paddingBottom: 0,
+				...l ? c(14) : {
+					paddingLeft: 20,
+					paddingRight: 20
+				}
+			},
+			children: [/* @__PURE__ */ d("div", {
+				style: {
+					display: "flex",
+					alignItems: "baseline",
+					gap: 10,
+					marginBottom: 12
+				},
+				children: /* @__PURE__ */ d("h1", {
+					style: {
+						margin: 0,
+						fontSize: 20,
+						fontWeight: 600,
+						letterSpacing: 0,
+						color: "var(--text)",
+						overflowWrap: "anywhere"
+					},
+					children: n("catalog.title", "Handler & Action Catalog")
+				})
+			}), /* @__PURE__ */ f("div", {
+				style: {
+					display: "flex",
+					gap: 6,
+					marginBottom: 14
+				},
+				children: [/* @__PURE__ */ d(a, {
+					kind: o === "handlers" ? "primary" : "default",
+					active: o === "handlers",
+					onClick: () => s("handlers"),
+					children: n("catalog.tab.handlers", "Handlers")
+				}), /* @__PURE__ */ d(a, {
+					kind: o === "actions" ? "primary" : "default",
+					active: o === "actions",
+					onClick: () => s("actions"),
+					children: n("catalog.tab.actions", "Actions")
+				})]
+			})]
+		}), /* @__PURE__ */ f("div", {
+			style: {
+				flex: 1,
+				overflowY: "auto",
+				paddingTop: 0,
+				paddingBottom: 20,
+				...l ? c(14) : {
+					paddingLeft: 20,
+					paddingRight: 20
+				}
+			},
+			children: [o === "handlers" && /* @__PURE__ */ d(g, { schema: t }), o === "actions" && /* @__PURE__ */ d(y, { schema: t })]
+		})]
+	}) : null;
+}
+function g({ schema: e }) {
+	let n = r(), i = l(() => {
+		let t = [];
+		if (e.handlers) for (let [n, r] of Object.entries(e.handlers)) t.push({
+			code: n,
+			handler: r
+		});
+		for (let [n, r] of Object.entries(e.entities)) if (r.handlers) for (let [e, i] of Object.entries(r.handlers)) t.push({
+			code: `${n}.${e}`,
+			handler: i,
+			entity: n
+		});
+		return t.sort((e, t) => e.code.localeCompare(t.code));
+	}, [e]);
+	return /* @__PURE__ */ f("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 10
+		},
+		children: [/* @__PURE__ */ d("p", {
+			style: {
+				fontSize: 12.5,
+				color: "var(--text-3)",
+				margin: 0
+			},
+			children: t(n, "catalog.handlers.count", i.length, {
+				one: "{count} handler registered (view-only — source of truth is code/YAML)",
+				other: "{count} handlers registered (view-only — source of truth is code/YAML)"
+			})
+		}), /* @__PURE__ */ d("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 8
+			},
+			children: i.map(({ code: e, handler: t, entity: n }) => /* @__PURE__ */ d(_, {
+				code: e,
+				handler: t,
+				entity: n
+			}, e))
+		})]
+	});
+}
+function _({ code: e, handler: t, entity: n }) {
+	let a = r(), [c, l] = u(!1), p = i().isPhone, m = t.display?.name ? a(t.display.name) : e;
+	return /* @__PURE__ */ f("div", {
+		style: {
+			border: "1px solid var(--border)",
+			borderRadius: 8,
+			padding: 14,
+			background: "var(--surface)"
+		},
+		children: [/* @__PURE__ */ f("div", {
+			style: {
+				display: "flex",
+				alignItems: p ? "stretch" : "center",
+				flexDirection: p ? "column" : "row",
+				justifyContent: "space-between",
+				gap: p ? 10 : 12,
+				cursor: "pointer",
+				minWidth: 0
+			},
+			onClick: () => l((e) => !e),
+			children: [/* @__PURE__ */ f("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 10,
+					minWidth: 0
+				},
+				children: [t.display?.icon && /* @__PURE__ */ d("span", {
+					style: {
+						color: "var(--text-3)",
+						display: "flex"
+					},
+					children: /* @__PURE__ */ d(s, {
+						name: t.display.icon,
+						size: 14
+					})
+				}), /* @__PURE__ */ f("div", {
+					style: { minWidth: 0 },
+					children: [/* @__PURE__ */ d("span", {
+						className: "mono",
+						style: {
+							fontSize: 12.5,
+							fontWeight: 500,
+							overflowWrap: "anywhere"
+						},
+						children: e
+					}), m !== e && /* @__PURE__ */ d("span", {
+						style: {
+							marginLeft: 8,
+							fontSize: 12.5,
+							color: "var(--text-3)",
+							overflowWrap: "anywhere"
+						},
+						children: m
+					})]
+				})]
+			}), /* @__PURE__ */ f("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 6,
+					flexWrap: "wrap",
+					justifyContent: p ? "flex-start" : "flex-end"
+				},
+				children: [/* @__PURE__ */ d(o, {
+					tone: "slate",
+					size: "xs",
+					children: t.type
+				}), n && /* @__PURE__ */ d(o, {
+					tone: "violet",
+					size: "xs",
+					children: n
+				})]
+			})]
+		}), c && t.params && t.params.length > 0 && /* @__PURE__ */ f("div", {
+			style: {
+				marginTop: 12,
+				borderTop: "1px solid var(--divider)",
+				paddingTop: 12
+			},
+			children: [/* @__PURE__ */ d("p", {
+				style: {
+					fontSize: 10.5,
+					fontWeight: 600,
+					color: "var(--text-3)",
+					marginBottom: 8,
+					marginTop: 0,
+					textTransform: "uppercase",
+					letterSpacing: "0.04em"
+				},
+				children: a("catalog.handler.parameters", "Parameters")
+			}), /* @__PURE__ */ d("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 4
+				},
+				children: (t.params?.names() ?? []).map((e) => {
+					let n = t.params.get(e);
+					return n ? /* @__PURE__ */ d(v, {
+						code: e,
+						param: n
+					}, e) : null;
+				})
+			})]
+		})]
+	});
+}
+function v({ code: e, param: t }) {
+	let a = r(), s = t.display?.name ? a(t.display.name) : void 0, c = i().isPhone;
+	return /* @__PURE__ */ f("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: 8,
+			fontSize: 12,
+			padding: "2px 0",
+			flexWrap: "wrap",
+			minWidth: 0
+		},
+		children: [
+			/* @__PURE__ */ d("span", {
+				className: "mono",
+				style: {
+					fontSize: 11,
+					width: c ? "auto" : 128,
+					flexShrink: 0,
+					overflowWrap: "anywhere"
+				},
+				children: e
+			}),
+			/* @__PURE__ */ d(o, {
+				tone: "slate",
+				size: "xs",
+				children: t.type || p
+			}),
+			t.required && /* @__PURE__ */ d(o, {
+				tone: "rose",
+				size: "xs",
+				children: a("catalog.param.required", "required")
+			}),
+			t.hidden && /* @__PURE__ */ d(o, {
+				tone: "slate",
+				size: "xs",
+				children: a("catalog.param.hidden", "hidden")
+			}),
+			t.default != null && /* @__PURE__ */ d("span", {
+				style: {
+					fontSize: 11,
+					color: "var(--text-3)",
+					overflowWrap: "anywhere"
+				},
+				children: a("catalog.param.default", "default: {value}", { value: n(t.default) })
+			}),
+			s && /* @__PURE__ */ d("span", {
+				style: {
+					fontSize: 11,
+					color: "var(--text-3)",
+					overflowWrap: "anywhere"
+				},
+				children: s
+			})
+		]
+	});
+}
+function y({ schema: e }) {
+	let n = r(), i = l(() => {
+		let t = [];
+		if (e.actions) for (let [n, r] of Object.entries(e.actions)) t.push({
+			code: n,
+			action: r
+		});
+		for (let [n, r] of Object.entries(e.entities)) if (r.actions) for (let [e, i] of Object.entries(r.actions)) t.push({
+			code: `${n}.${e}`,
+			action: i,
+			entity: n
+		});
+		return t.sort((e, t) => e.code.localeCompare(t.code));
+	}, [e]), a = l(() => {
+		let e = {};
+		for (let t of i) {
+			let n = t.entity ?? "";
+			e[n] || (e[n] = []), e[n].push(t);
+		}
+		return Object.entries(e).sort(([e], [t]) => e.localeCompare(t));
+	}, [i]);
+	return /* @__PURE__ */ f("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 14
+		},
+		children: [/* @__PURE__ */ d("p", {
+			style: {
+				fontSize: 12.5,
+				color: "var(--text-3)",
+				margin: 0
+			},
+			children: t(n, "catalog.actions.count", i.length, {
+				one: "{count} action defined (view-only — source of truth is code/YAML)",
+				other: "{count} actions defined (view-only — source of truth is code/YAML)"
+			})
+		}), a.map(([e, t]) => /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h3", {
+			style: {
+				fontSize: 12.5,
+				fontWeight: 600,
+				margin: "0 0 8px 0",
+				color: "var(--text)"
+			},
+			children: e || n("catalog.actions.global", "(global)")
+		}), /* @__PURE__ */ d("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 6
+			},
+			children: t.map(({ code: e, action: t }) => /* @__PURE__ */ d(b, {
+				code: e,
+				action: t
+			}, e))
+		})] }, e))]
+	});
+}
+function b({ code: e, action: t }) {
+	let n = r()(t.display?.name), a = i().isPhone;
+	return /* @__PURE__ */ f("div", {
+		style: {
+			border: "1px solid var(--border)",
+			borderRadius: 8,
+			padding: 12,
+			display: "flex",
+			flexDirection: a ? "column" : "row",
+			alignItems: a ? "stretch" : "center",
+			justifyContent: "space-between",
+			gap: a ? 10 : 12,
+			background: "var(--surface)",
+			minWidth: 0
+		},
+		children: [/* @__PURE__ */ f("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 10,
+				minWidth: 0
+			},
+			children: [t.display?.icon && /* @__PURE__ */ d("span", {
+				style: {
+					color: "var(--text-3)",
+					display: "flex"
+				},
+				children: /* @__PURE__ */ d(s, {
+					name: t.display.icon,
+					size: 14
+				})
+			}), /* @__PURE__ */ f("div", {
+				style: { minWidth: 0 },
+				children: [/* @__PURE__ */ d("span", {
+					className: "mono",
+					style: {
+						fontSize: 12.5,
+						overflowWrap: "anywhere"
+					},
+					children: e
+				}), n && n !== e && /* @__PURE__ */ d("span", {
+					style: {
+						marginLeft: 8,
+						fontSize: 12.5,
+						color: "var(--text-3)",
+						overflowWrap: "anywhere"
+					},
+					children: n
+				})]
+			})]
+		}), /* @__PURE__ */ f("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 6,
+				flexWrap: "wrap",
+				justifyContent: a ? "flex-start" : "flex-end"
+			},
+			children: [
+				(() => {
+					let e = t.handler ? "handler" : t.association ? "association" : t.widget ? "widget" : t.href ? "href" : null;
+					return e ? /* @__PURE__ */ d(o, {
+						tone: "slate",
+						size: "xs",
+						children: e
+					}) : null;
+				})(),
+				t.handler && /* @__PURE__ */ f("span", {
+					className: "mono",
+					style: {
+						fontSize: 11,
+						color: "var(--text-3)",
+						overflowWrap: "anywhere"
+					},
+					children: [
+						m,
+						": ",
+						t.handler
+					]
+				}),
+				t.visibility && t.visibility.length > 0 && /* @__PURE__ */ d("div", {
+					style: {
+						display: "flex",
+						gap: 4
+					},
+					children: t.visibility.map((e) => /* @__PURE__ */ d(o, {
+						tone: "slate",
+						size: "xs",
+						children: e
+					}, e))
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { h as AdminCatalogPage };