@protobase/ui 0.22.0 → 0.22.2

package/dist/organizations/invitations-page.js

@@ -1,142 +1,67 @@
-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 { AccountSection } from "../account/account-section.js";
 import { grantableRoles, organizationRoleLabels, roleLabel } from "./organization-paths.js";
-import { useAction } from "./use-action.js";
+import { InviteForm } from "../invitations/invite-form.js";
+import { PendingInvitationRow } from "../invitations/pending-invitation-row.js";
 import { AppRolesPicker } from "./app-roles-picker.js";
 import { assignableOrganizationRoles } from "./members-page.js";
 import { useCallback, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/organizations/invitations-page.tsx
-const LinkNotice = ({ link }) => link ? /* @__PURE__ */ jsxs("p", {
-	className: "mt-3 break-all rounded-md border bg-muted px-3 py-2 text-xs",
-	children: ["This app cannot send email, so pass this link on yourself. It works once, until the invitation expires: ", /* @__PURE__ */ jsx("span", {
-		className: "font-mono",
-		children: link
-	})]
-}) : null;
-const InviteForm = ({ current, onSent }) => {
+const InviteToOrganization = ({ current, onSent }) => {
 	const { session, organizations } = useAuth();
 	const roles = organizations?.roles ?? [];
-	const [email, setEmail] = useState("");
 	const [role, setRole] = useState("member");
 	const [appRoles, setAppRoles] = useState([]);
-	const [link, setLink] = useState();
-	const { busy, error, run } = useAction();
-	const invite = () => run(async () => {
+	const invite = async (email) => {
 		const sent = await session.organizations.invite(current.organization.id, {
-			email: email.trim(),
+			email,
 			role,
 			appRoles
 		});
-		setLink(sent.link);
-		setEmail("");
 		setAppRoles([]);
 		onSent();
-	});
-	return /* @__PURE__ */ jsxs(AccountSection, {
+		return sent;
+	};
+	return /* @__PURE__ */ jsx(InviteForm, {
 		title: "Invite someone",
 		description: "They get an email with a link to join, or to make an account first. You can give the app roles you hold, and those your roles grant.",
-		children: [
-			/* @__PURE__ */ jsx(SectionError, { message: error }),
-			/* @__PURE__ */ jsxs("form", {
-				className: "flex flex-col gap-3",
-				onSubmit: (event) => {
-					event.preventDefault();
-					invite();
-				},
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col gap-2 sm:flex-row",
-					children: [
-						/* @__PURE__ */ jsx(Input, {
-							"aria-label": "Email",
-							type: "email",
-							placeholder: "name@example.com",
-							value: email,
-							onChange: (event) => setEmail(event.target.value),
-							wrapperClassName: "flex-1"
-						}),
-						/* @__PURE__ */ jsx("select", {
-							"aria-label": "Organization role",
-							value: role,
-							onChange: (event) => setRole(event.target.value),
-							className: "h-8 rounded-md border border-border-strong bg-background px-2",
-							children: assignableOrganizationRoles(current).map((option) => /* @__PURE__ */ jsx("option", {
-								value: option,
-								children: organizationRoleLabels[option]
-							}, option))
-						}),
-						/* @__PURE__ */ jsx(Button, {
-							type: "submit",
-							variant: "primary",
-							loading: busy,
-							disabled: !email.trim(),
-							children: "Invite"
-						})
-					]
-				}), /* @__PURE__ */ jsx(AppRolesPicker, {
-					roles,
-					selected: appRoles,
-					grantable: grantableRoles(roles, current),
-					onChange: setAppRoles
-				})]
-			}),
-			/* @__PURE__ */ jsx(LinkNotice, { link })
-		]
+		onInvite: invite,
+		beside: /* @__PURE__ */ jsx("select", {
+			"aria-label": "Organization role",
+			value: role,
+			onChange: (event) => setRole(event.target.value),
+			className: "h-8 rounded-md border border-border-strong bg-background px-2",
+			children: assignableOrganizationRoles(current).map((option) => /* @__PURE__ */ jsx("option", {
+				value: option,
+				children: organizationRoleLabels[option]
+			}, option))
+		}),
+		children: /* @__PURE__ */ jsx(AppRolesPicker, {
+			roles: roles.filter((candidate) => candidate.membership),
+			selected: appRoles,
+			grantable: grantableRoles(roles, current),
+			onChange: setAppRoles
+		})
 	});
 };
 const PendingRow = ({ invitation, organizationId, onChanged }) => {
 	const { session, organizations } = useAuth();
-	const [link, setLink] = useState();
-	const { busy, error, run } = useAction();
-	const expired = new Date(invitation.expiresAt).getTime() < Date.now();
-	return /* @__PURE__ */ jsxs("li", {
-		className: "px-3 py-2.5",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex flex-wrap items-center gap-2",
-				children: [
-					/* @__PURE__ */ jsxs("span", {
-						className: "min-w-0 flex-1",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "block truncate font-medium",
-							children: invitation.email
-						}), /* @__PURE__ */ jsxs("span", {
-							className: "block text-xs text-muted-foreground",
-							children: [
-								organizationRoleLabels[invitation.role],
-								invitation.appRoles.length > 0 && ` · ${invitation.appRoles.map((name) => roleLabel(organizations?.roles ?? [], name)).join(", ")}`,
-								" · ",
-								expired ? "Expired" : `Until ${new Date(invitation.expiresAt).toLocaleDateString()}`
-							]
-						})]
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						size: "sm",
-						loading: busy,
-						onClick: () => void run(async () => {
-							setLink((await session.organizations.resend(organizationId, invitation)).link);
-							onChanged();
-						}),
-						children: "Send again"
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						size: "sm",
-						variant: "danger",
-						loading: busy,
-						onClick: () => void run(async () => {
-							await session.organizations.revoke(invitation.id);
-							onChanged();
-						}),
-						children: "Revoke"
-					})
-				]
-			}),
-			/* @__PURE__ */ jsx(SectionError, { message: error }),
-			/* @__PURE__ */ jsx(LinkNotice, { link })
-		]
+	const appRoles = invitation.appRoles.map((name) => roleLabel(organizations?.roles ?? [], name));
+	return /* @__PURE__ */ jsx(PendingInvitationRow, {
+		email: invitation.email,
+		gives: `${organizationRoleLabels[invitation.role]}${appRoles.length > 0 ? ` · ${appRoles.join(", ")}` : ""}`,
+		expiresAt: invitation.expiresAt,
+		onResend: async () => {
+			const sent = await session.organizations.resend(organizationId, invitation);
+			onChanged();
+			return sent;
+		},
+		onRevoke: async () => {
+			await session.organizations.revoke(invitation.id);
+			onChanged();
+		}
 	});
 };
 /** Inviting people to the organization one works in, and the invitations not yet accepted, for its owners and admins. */
@@ -156,7 +81,7 @@ const InvitationsPage = ({ current }) => {
 				title: "Invitations",
 				subtitle: `People invited to ${current.organization.name}.`
 			}),
-			/* @__PURE__ */ jsx(InviteForm, {
+			/* @__PURE__ */ jsx(InviteToOrganization, {
 				current,
 				onSent: load
 			}),

package/dist/organizations/members-page.js

@@ -7,9 +7,10 @@ import { AccountSection, SectionError } from "../account/account-section.js";
 import { grantableRoles, organizationRoleLabels } from "./organization-paths.js";
 import { useAction } from "./use-action.js";
 import { AppRolesPicker } from "./app-roles-picker.js";
+import { PersonRow } from "../people/person-row.js";
 import { useCallback, useEffect, useState } from "react";
 import { AuthError } from "@protobase/client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/organizations/members-page.tsx
 /** The organization roles the person may set: owners every one, admins those below owner. */
 const assignableOrganizationRoles = (current) => current?.role === "owner" ? [
@@ -25,61 +26,46 @@ const MemberRow = ({ member, current, onChanged }) => {
 	const self = member.id === current.memberId;
 	const organizationRoles = assignableOrganizationRoles(current);
 	const roleLocked = member.role === "owner" && current.role !== "owner";
-	return /* @__PURE__ */ jsxs("li", {
-		className: "flex flex-col gap-2 px-3 py-3",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex flex-wrap items-center gap-2",
-				children: [
-					/* @__PURE__ */ jsxs("span", {
-						className: "min-w-0 flex-1",
-						children: [/* @__PURE__ */ jsxs("span", {
-							className: "block truncate font-medium",
-							children: [member.name, self && " (you)"]
-						}), /* @__PURE__ */ jsx("span", {
-							className: "block truncate text-xs text-muted-foreground",
-							children: member.email
-						})]
-					}),
-					/* @__PURE__ */ jsx("select", {
-						"aria-label": `Organization role of ${member.name}`,
-						value: member.role,
-						disabled: busy || roleLocked,
-						onChange: (event) => void run(async () => {
-							await session.organizations.setRole(organizationId, member.id, event.target.value);
-							onChanged();
-						}),
-						className: "h-7 rounded-md border border-border-strong bg-background px-2 text-xs",
-						children: (roleLocked ? [member.role] : organizationRoles).map((role) => /* @__PURE__ */ jsx("option", {
-							value: role,
-							children: organizationRoleLabels[role]
-						}, role))
-					}),
-					!self && /* @__PURE__ */ jsx(Button, {
-						size: "sm",
-						variant: "danger",
-						loading: busy,
-						disabled: roleLocked,
-						onClick: () => void run(async () => {
-							await session.organizations.removeMember(organizationId, member.id);
-							onChanged();
-						}),
-						children: "Remove"
-					})
-				]
+	const membershipRoles = roles.filter((role) => role.membership);
+	return /* @__PURE__ */ jsx(PersonRow, {
+		name: member.name,
+		email: member.email,
+		self,
+		error,
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("select", {
+			"aria-label": `Organization role of ${member.name}`,
+			value: member.role,
+			disabled: busy || roleLocked,
+			onChange: (event) => void run(async () => {
+				await session.organizations.setRole(organizationId, member.id, event.target.value);
+				onChanged();
 			}),
-			/* @__PURE__ */ jsx(AppRolesPicker, {
-				roles,
-				selected: member.appRoles,
-				grantable: grantableRoles(roles, current),
-				disabled: busy,
-				onChange: (selected) => void run(async () => {
-					await session.organizations.setAppRoles(member.id, selected);
-					onChanged();
-				})
+			className: "h-7 rounded-md border border-border-strong bg-background px-2 text-xs",
+			children: (roleLocked ? [member.role] : organizationRoles).map((role) => /* @__PURE__ */ jsx("option", {
+				value: role,
+				children: organizationRoleLabels[role]
+			}, role))
+		}), !self && /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "danger",
+			loading: busy,
+			disabled: roleLocked,
+			onClick: () => void run(async () => {
+				await session.organizations.removeMember(organizationId, member.id);
+				onChanged();
 			}),
-			/* @__PURE__ */ jsx(SectionError, { message: error })
-		]
+			children: "Remove"
+		})] }),
+		children: /* @__PURE__ */ jsx(AppRolesPicker, {
+			roles: membershipRoles,
+			selected: member.appRoles,
+			grantable: grantableRoles(roles, current),
+			disabled: busy,
+			onChange: (selected) => void run(async () => {
+				await session.organizations.setAppRoles(member.id, selected);
+				onChanged();
+			})
+		})
 	});
 };
 /**

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.22.0";
+var version = "0.22.2";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/people/person-row.js

@@ -0,0 +1,26 @@
+import { SectionError } from "../account/account-section.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/people/person-row.tsx
+/** Someone in a list of people: their name, " (you)" on one's own row, their address, what can be done and their roles. */
+const PersonRow = ({ name, email, self, actions, children, error }) => /* @__PURE__ */ jsxs("li", {
+	className: "flex flex-col gap-2 px-3 py-3",
+	children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center gap-2",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "block truncate font-medium",
+					children: [name, self && " (you)"]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "block truncate text-xs text-muted-foreground",
+					children: email
+				})]
+			}), actions]
+		}),
+		children,
+		/* @__PURE__ */ jsx(SectionError, { message: error })
+	]
+});
+//#endregion
+export { PersonRow };