@protobase/ui 0.7.0 → 0.8.1

package/dist/organizations/organization-page.js

@@ -0,0 +1,204 @@
+import { Input } from "../primitives/input.js";
+import { PageHeader } from "../app-shell/page-header.js";
+import { useAuth } from "../auth/auth-provider.js";
+import { Button } from "../primitives/button.js";
+import { Dialog } from "../primitives/dialog.js";
+import { AccountSection, SectionError } from "../account/account-section.js";
+import { managesOrganization, organizationRoleLabels } from "./organization-paths.js";
+import { useAction } from "./use-action.js";
+import { reopenIn } from "./use-organizations.js";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/organizations/organization-page.tsx
+const Details = ({ organization, editable, onSaved }) => {
+	const { session } = useAuth();
+	const [name, setName] = useState(organization.name);
+	const [slug, setSlug] = useState(organization.slug);
+	const { busy, error, run } = useAction();
+	const changed = name.trim() !== organization.name || slug !== organization.slug;
+	return /* @__PURE__ */ jsxs(AccountSection, {
+		title: "Details",
+		description: editable ? "The name people see, and the slug that names it in links." : "Owners and admins can change these.",
+		children: [/* @__PURE__ */ jsx(SectionError, { message: error }), /* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-2 sm:flex-row",
+			onSubmit: (event) => {
+				event.preventDefault();
+				run(async () => {
+					await session.organizations.rename(organization.id, {
+						name: name.trim(),
+						slug
+					});
+					onSaved();
+				});
+			},
+			children: [
+				/* @__PURE__ */ jsx(Input, {
+					"aria-label": "Name",
+					value: name,
+					disabled: !editable,
+					onChange: (event) => setName(event.target.value),
+					wrapperClassName: "flex-1"
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					"aria-label": "Slug",
+					value: slug,
+					disabled: !editable,
+					onChange: (event) => setSlug(event.target.value),
+					wrapperClassName: "sm:w-48"
+				}),
+				editable && /* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					variant: "primary",
+					loading: busy,
+					disabled: !changed || !name.trim(),
+					children: "Save"
+				})
+			]
+		})]
+	});
+};
+const HandOver = ({ organization, memberId }) => {
+	const { session } = useAuth();
+	const [members, setMembers] = useState([]);
+	const [target, setTarget] = useState("");
+	const { busy, error, run } = useAction();
+	useEffect(() => {
+		session.organizations.members(organization.id).then((list) => setMembers(list.filter((member) => member.id !== memberId)), () => setMembers([]));
+	}, [
+		session,
+		organization.id,
+		memberId
+	]);
+	return /* @__PURE__ */ jsxs(AccountSection, {
+		title: "Hand over",
+		description: "Make another member the owner. You stay as an admin.",
+		children: [/* @__PURE__ */ jsx(SectionError, { message: error }), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2 sm:flex-row",
+			children: [/* @__PURE__ */ jsxs("select", {
+				"aria-label": "New owner",
+				value: target,
+				onChange: (event) => setTarget(event.target.value),
+				className: "h-8 flex-1 rounded-md border border-border-strong bg-background px-2 text-[13px]",
+				children: [/* @__PURE__ */ jsx("option", {
+					value: "",
+					children: "Choose a member"
+				}), members.map((member) => /* @__PURE__ */ jsxs("option", {
+					value: member.id,
+					children: [
+						member.name,
+						" (",
+						member.email,
+						")"
+					]
+				}, member.id))]
+			}), /* @__PURE__ */ jsx(Button, {
+				loading: busy,
+				disabled: !target,
+				onClick: () => void run(async () => {
+					await session.organizations.transferOwnership(target);
+					window.location.reload();
+				}),
+				children: "Hand over"
+			})]
+		})]
+	});
+};
+const Delete = ({ organization, basePath }) => {
+	const { session } = useAuth();
+	const [confirming, setConfirming] = useState(false);
+	const [typed, setTyped] = useState("");
+	const { busy, error, run } = useAction();
+	const remove = () => run(async () => {
+		await session.organizations.remove(organization.id);
+		reopenIn(basePath);
+	});
+	return /* @__PURE__ */ jsxs(AccountSection, {
+		title: "Delete organization",
+		description: "Takes the organization and its members and invitations away. Its records must be deleted first.",
+		children: [
+			/* @__PURE__ */ jsx(SectionError, { message: confirming ? void 0 : error }),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "danger",
+				onClick: () => setConfirming(true),
+				children: "Delete organization"
+			}),
+			confirming && /* @__PURE__ */ jsxs(Dialog, {
+				title: `Delete ${organization.name}?`,
+				description: "Type its name to confirm. This cannot be undone.",
+				onClose: () => setConfirming(false),
+				actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+					onClick: () => setConfirming(false),
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "danger",
+					loading: busy,
+					disabled: typed !== organization.name,
+					onClick: () => void remove(),
+					children: "Delete"
+				})] }),
+				children: [/* @__PURE__ */ jsx(SectionError, { message: error }), /* @__PURE__ */ jsx(Input, {
+					"aria-label": "Organization name",
+					value: typed,
+					onChange: (event) => setTyped(event.target.value)
+				})]
+			})
+		]
+	});
+};
+const Leave = ({ organization, basePath, owner }) => {
+	const { session } = useAuth();
+	const { busy, error, run } = useAction();
+	return /* @__PURE__ */ jsxs(AccountSection, {
+		title: "Leave",
+		description: owner ? "An organization keeps an owner: hand it over before you leave, unless it has another owner." : "You stop being a member, and lose your roles here.",
+		children: [/* @__PURE__ */ jsx(SectionError, { message: error }), /* @__PURE__ */ jsxs(Button, {
+			loading: busy,
+			onClick: () => void run(async () => {
+				await session.organizations.leave(organization.id);
+				reopenIn(basePath);
+			}),
+			children: ["Leave ", organization.name]
+		})]
+	});
+};
+/** The organization one works in: its details, and handing it over, leaving and deleting it, as one's role allows. */
+const OrganizationPage = ({ current, basePath, onChanged }) => {
+	const organization = current?.organization;
+	if (!organization) return /* @__PURE__ */ jsx("div", {
+		className: "mx-auto w-full max-w-3xl px-4 py-6 md:px-6",
+		children: /* @__PURE__ */ jsx(PageHeader, {
+			title: "Organization",
+			subtitle: "You do not work in an organization now. Choose one under Organizations."
+		})
+	});
+	const owner = current.role === "owner";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto flex w-full max-w-3xl flex-col gap-4 px-4 py-6 md:px-6",
+		children: [
+			/* @__PURE__ */ jsx(PageHeader, {
+				title: organization.name,
+				subtitle: current.role ? `You are ${organizationRoleLabels[current.role].toLowerCase()} here.` : "You work here through your global roles, without being a member."
+			}),
+			/* @__PURE__ */ jsx(Details, {
+				organization,
+				editable: managesOrganization(current),
+				onSaved: onChanged
+			}, `${organization.name}/${organization.slug}`),
+			owner && current.memberId && /* @__PURE__ */ jsx(HandOver, {
+				organization,
+				memberId: current.memberId
+			}),
+			current.role && /* @__PURE__ */ jsx(Leave, {
+				organization,
+				basePath,
+				owner
+			}),
+			owner && /* @__PURE__ */ jsx(Delete, {
+				organization,
+				basePath
+			})
+		]
+	});
+};
+//#endregion
+export { OrganizationPage };

package/dist/organizations/organization-paths.js

@@ -0,0 +1,49 @@
+import { Building2, Mail, Network, Users } from "lucide-react";
+//#region src/organizations/organization-paths.ts
+const organizationsPath = "/-/organizations";
+const organizationPath = "/-/organization";
+const membersPath = "/-/organization/members";
+const invitationsPath = "/-/organization/invitations";
+const organizationPageTitles = {
+	[organizationsPath]: "Organizations",
+	[organizationPath]: "Organization",
+	[membersPath]: "Members",
+	[invitationsPath]: "Invitations"
+};
+const organizationRoleLabels = {
+	owner: "Owner",
+	admin: "Admin",
+	member: "Member"
+};
+/** The label of an app role, as the server names it. */
+const roleLabel = (roles, name) => roles.find((role) => role.name === name)?.label ?? name;
+/** Whether the person manages the current organization: its owners and admins. */
+const managesOrganization = (current) => current?.role === "owner" || current?.role === "admin";
+/**
+* The organization pages in the profile menu: every organization of the person, and for the one they work in its
+* details, and for its owners and admins its members and invitations.
+*/
+const organizationMenuItems = (basePath, path, current) => {
+	const item = (id, label, icon, target) => ({
+		id,
+		label,
+		icon,
+		href: `${basePath}${target}`,
+		active: path === target
+	});
+	return [
+		item("organizations", "Organizations", Network, organizationsPath),
+		...current?.organization ? [item("organization", "Organization", Building2, organizationPath)] : [],
+		...managesOrganization(current) ? [item("members", "Members", Users, membersPath), item("invitations", "Invitations", Mail, invitationsPath)] : []
+	];
+};
+/** The app roles someone may give or take away: those they hold, those their roles grant, and every one for a superuser. */
+const grantableRoles = (roles, current) => {
+	const held = [...current?.globalRoles ?? [], ...current?.appRoles ?? []];
+	const membership = roles.filter((role) => role.membership).map((role) => role.name);
+	if (held.includes("admin")) return new Set(membership);
+	const granted = held.flatMap((name) => roles.find((role) => role.name === name)?.grants ?? []);
+	return new Set([...held, ...granted].filter((name) => membership.includes(name)));
+};
+//#endregion
+export { grantableRoles, invitationsPath, managesOrganization, membersPath, organizationMenuItems, organizationPageTitles, organizationPath, organizationRoleLabels, organizationsPath, roleLabel };

package/dist/organizations/organizations-page.js

@@ -0,0 +1,196 @@
+import { Badge } from "../primitives/badge.js";
+import { Input } from "../primitives/input.js";
+import { PageHeader } from "../app-shell/page-header.js";
+import { useAuth } from "../auth/auth-provider.js";
+import { Button } from "../primitives/button.js";
+import { AccountSection, SectionError } from "../account/account-section.js";
+import { roleLabel } from "./organization-paths.js";
+import { useAction } from "./use-action.js";
+import { isAdmin } from "../auth/user-to-shell.js";
+import { reopenIn } from "./use-organizations.js";
+import { useEffect, useState } from "react";
+import { Search } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/organizations/organizations-page.tsx
+/** A slug from a name: lowercase ASCII words joined by dashes, as the server accepts them. */
+const slugOf = (name) => name.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 63);
+const OrganizationRow = ({ organization, current, busy, onOpen }) => /* @__PURE__ */ jsxs("li", {
+	className: "flex items-center gap-3 px-3 py-2.5",
+	children: [/* @__PURE__ */ jsxs("span", {
+		className: "min-w-0 flex-1",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "block truncate text-[13px] font-medium",
+			children: organization.name
+		}), /* @__PURE__ */ jsx("span", {
+			className: "block text-xs text-muted-foreground",
+			children: organization.slug
+		})]
+	}), current ? /* @__PURE__ */ jsx(Badge, {
+		tone: "green",
+		children: "Current"
+	}) : /* @__PURE__ */ jsx(Button, {
+		size: "sm",
+		loading: busy,
+		onClick: onOpen,
+		children: "Open"
+	})]
+});
+const NewOrganization = ({ basePath }) => {
+	const { session } = useAuth();
+	const [name, setName] = useState("");
+	const [slug, setSlug] = useState();
+	const { busy, error, run } = useAction();
+	const create = () => run(async () => {
+		await session.organizations.create({
+			name: name.trim(),
+			slug: slug ?? slugOf(name)
+		});
+		reopenIn(basePath);
+	});
+	return /* @__PURE__ */ jsxs(AccountSection, {
+		title: "New organization",
+		description: "You become its owner, with every role, and work in it once it is made.",
+		children: [/* @__PURE__ */ jsx(SectionError, { message: error }), /* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-2 sm:flex-row",
+			onSubmit: (event) => {
+				event.preventDefault();
+				create();
+			},
+			children: [
+				/* @__PURE__ */ jsx(Input, {
+					"aria-label": "Name",
+					placeholder: "Name",
+					value: name,
+					onChange: (event) => setName(event.target.value),
+					wrapperClassName: "flex-1"
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					"aria-label": "Slug",
+					placeholder: "slug",
+					value: slug ?? slugOf(name),
+					onChange: (event) => setSlug(event.target.value),
+					wrapperClassName: "sm:w-48"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					variant: "primary",
+					loading: busy,
+					disabled: !name.trim(),
+					children: "Create"
+				})
+			]
+		})]
+	});
+};
+const FindOrganization = ({ basePath, currentId }) => {
+	const { session } = useAuth();
+	const [query, setQuery] = useState("");
+	const [found, setFound] = useState([]);
+	const { busy, error, run } = useAction();
+	useEffect(() => {
+		const timer = setTimeout(() => void session.organizations.search(query).then(setFound, () => setFound([])), 200);
+		return () => clearTimeout(timer);
+	}, [session, query]);
+	return /* @__PURE__ */ jsxs(AccountSection, {
+		title: "Find an organization",
+		description: "Your global roles let you work in any organization, with what those roles allow there. Opening one you are not a member of is written to the audit log.",
+		children: [
+			/* @__PURE__ */ jsx(SectionError, { message: error }),
+			/* @__PURE__ */ jsx(Input, {
+				"aria-label": "Find an organization",
+				placeholder: "Name or slug",
+				value: query,
+				onChange: (event) => setQuery(event.target.value),
+				leading: /* @__PURE__ */ jsx(Search, { className: "size-3.5" }),
+				wrapperClassName: "mb-3"
+			}),
+			found.length > 0 && /* @__PURE__ */ jsx("ul", {
+				className: "divide-y rounded-md border",
+				children: found.map((organization) => /* @__PURE__ */ jsx(OrganizationRow, {
+					organization,
+					current: organization.id === currentId,
+					busy,
+					onOpen: () => void run(async () => {
+						await session.organizations.switchTo(organization.id);
+						reopenIn(basePath);
+					})
+				}, organization.id))
+			})
+		]
+	});
+};
+const YourInvitations = () => {
+	const { session, organizations } = useAuth();
+	const [invitations, setInvitations] = useState([]);
+	useEffect(() => {
+		session.organizations.myInvitations().then(setInvitations, () => setInvitations([]));
+	}, [session]);
+	if (invitations.length === 0) return null;
+	const roles = organizations?.roles ?? [];
+	return /* @__PURE__ */ jsx(AccountSection, {
+		title: "Invitations for you",
+		description: "Open the link in the invitation email to accept one.",
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "divide-y rounded-md border",
+			children: invitations.map((invitation) => /* @__PURE__ */ jsxs("li", {
+				className: "px-3 py-2.5 text-[13px]",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: invitation.organizationName ?? "An organization"
+					}),
+					": ",
+					invitation.appRoles.map((name) => roleLabel(roles, name)).join(", ") || "no app roles",
+					/* @__PURE__ */ jsxs("span", {
+						className: "block text-xs text-muted-foreground",
+						children: ["Until ", new Date(invitation.expiresAt).toLocaleDateString()]
+					})
+				]
+			}, invitation.id))
+		})
+	});
+};
+/**
+* The person's organizations: switching between them, making a new one when the app allows it, and for people with a
+* global role finding any organization. Someone in none sees their invitations here.
+*/
+const OrganizationsPage = ({ state, basePath }) => {
+	const { session, organizations: settings, state: auth } = useAuth();
+	const { busy, error, run } = useAction();
+	const user = auth.kind === "signed-in" ? auth.user : void 0;
+	const mayCreate = settings?.create === "everyone" || user !== void 0 && isAdmin(user);
+	const currentId = state.current?.organization?.id;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto flex w-full max-w-3xl flex-col gap-4 px-4 py-6 md:px-6",
+		children: [
+			/* @__PURE__ */ jsx(PageHeader, {
+				title: "Organizations",
+				subtitle: "You work in one organization at a time; what you see follows from your roles there."
+			}),
+			/* @__PURE__ */ jsxs(AccountSection, {
+				title: "Your organizations",
+				description: state.organizations.length > 0 ? "The organizations you are a member of." : "You are not a member of an organization yet.",
+				children: [/* @__PURE__ */ jsx(SectionError, { message: error ?? state.error }), state.organizations.length > 0 && /* @__PURE__ */ jsx("ul", {
+					className: "divide-y rounded-md border",
+					children: state.organizations.map((organization) => /* @__PURE__ */ jsx(OrganizationRow, {
+						organization,
+						current: organization.id === currentId,
+						busy,
+						onOpen: () => void run(async () => {
+							await session.organizations.switchTo(organization.id);
+							reopenIn(basePath);
+						})
+					}, organization.id))
+				})]
+			}),
+			/* @__PURE__ */ jsx(YourInvitations, {}),
+			mayCreate && /* @__PURE__ */ jsx(NewOrganization, { basePath }),
+			(state.current?.globalRoles.length ?? 0) > 0 && /* @__PURE__ */ jsx(FindOrganization, {
+				basePath,
+				currentId
+			})
+		]
+	});
+};
+//#endregion
+export { OrganizationsPage, slugOf };

package/dist/organizations/use-action.js

@@ -0,0 +1,28 @@
+import { authMessage } from "../auth/auth-messages.js";
+import { useState } from "react";
+import { AuthError } from "@protobase/client";
+//#region src/organizations/use-action.ts
+/** Runs one change at a time and keeps the server's refusal, in words, for the form to show. */
+const useAction = () => {
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	const run = async (action) => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			await action();
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(authMessage(failure));
+		}
+		setBusy(false);
+	};
+	return {
+		busy,
+		error,
+		run,
+		setError
+	};
+};
+//#endregion
+export { useAction };

package/dist/organizations/use-organizations.js

@@ -0,0 +1,38 @@
+import { authMessage } from "../auth/auth-messages.js";
+import { useAuth } from "../auth/auth-provider.js";
+import { useCallback, useEffect, useState } from "react";
+import { AuthError } from "@protobase/client";
+//#region src/organizations/use-organizations.ts
+/** The current organization and the person's organizations, read again with `reload` after a change. */
+const useOrganizations = (enabled) => {
+	const { session } = useAuth();
+	const [current, setCurrent] = useState();
+	const [organizations, setOrganizations] = useState([]);
+	const [error, setError] = useState();
+	const [round, setRound] = useState(0);
+	const reload = useCallback(() => setRound((value) => value + 1), []);
+	useEffect(() => {
+		if (!enabled) return;
+		Promise.all([session.organizations.current(), session.organizations.list()]).then(([currentOrganization, list]) => {
+			setCurrent(currentOrganization);
+			setOrganizations(list);
+		}, (failure) => setError(failure instanceof AuthError ? authMessage(failure) : "Could not read your organizations"));
+	}, [
+		enabled,
+		session,
+		round
+	]);
+	return {
+		current,
+		organizations,
+		...error && { error },
+		reload
+	};
+};
+/**
+* Starts the app again in another organization: what it shows, the menu included, follows from the roles there, so it
+* loads afresh rather than keeping what it read for the last one.
+*/
+const reopenIn = (basePath) => window.location.assign(`${basePath}/`);
+//#endregion
+export { reopenIn, useOrganizations };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protobase/ui",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "The Protobase admin app and the React hooks and components for custom UI.",
   "license": "Apache-2.0",
   "repository": {
@@ -34,9 +34,9 @@
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
-    "@protobase/client": "0.7.0",
-    "@protobase/layout": "0.7.0",
-    "@protobase/schema": "0.7.0",
+    "@protobase/client": "0.8.1",
+    "@protobase/layout": "0.8.1",
+    "@protobase/schema": "0.8.1",
     "@tanstack/react-query": "^5.104.1",
     "@tanstack/react-table": "^9.2.6",
     "@tanstack/react-virtual": "^3.14.13",