@protobase/ui 0.0.0-stage → 0.1.0

package/dist/auth/reset-link.js

@@ -0,0 +1,29 @@
+//#region src/auth/reset-link.ts
+/** Marks the address an emailed reset link leads back to, so the app opens the set-password page there. */
+const resetMarker = "password-reset";
+/** Where the emailed link leads back to: this page, marked. */
+const resetLinkTarget = (href) => {
+	const url = new URL(href);
+	return `${url.origin}${url.pathname}?${resetMarker}`;
+};
+/**
+* The reset link this page was opened from, or `undefined`. Better Auth adds the `token`, or `error=INVALID_TOKEN`
+* instead for a used or expired link; then `token` is `undefined`.
+*/
+const readResetLink = (href) => {
+	const params = new URL(href).searchParams;
+	if (!params.has("password-reset")) return void 0;
+	return { token: params.get("token") || void 0 };
+};
+/** The address without the reset link's parameters, for the address bar once the link is used. */
+const withoutResetLink = (href) => {
+	const url = new URL(href);
+	for (const name of [
+		resetMarker,
+		"token",
+		"error"
+	]) url.searchParams.delete(name);
+	return `${url.pathname}${url.search}${url.hash}`;
+};
+//#endregion
+export { readResetLink, resetLinkTarget, resetMarker, withoutResetLink };

package/dist/auth/reset-password-form.js

@@ -0,0 +1,88 @@
+import { Input } from "../primitives/input.js";
+import { Button } from "../primitives/button.js";
+import { AuthLayout } from "./auth-layout.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const ResetPasswordForm = ({ onSubmit, invalidLink, onRequestNewLink, onBack, busy, error }) => {
+	const [password, setPassword] = useState("");
+	const [repeat, setRepeat] = useState("");
+	const [mismatch, setMismatch] = useState(false);
+	if (invalidLink) return /* @__PURE__ */ jsxs(AuthLayout, {
+		title: "This link no longer works",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-[13px] text-muted-foreground",
+			children: "A reset link works once, for a limited time. Ask for a new one to choose your password."
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-4 flex flex-col gap-2",
+			children: [onRequestNewLink && /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				className: "min-h-10",
+				onClick: onRequestNewLink,
+				children: "Send a new link"
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: onRequestNewLink ? "ghost" : "primary",
+				className: "min-h-10",
+				onClick: onBack,
+				children: "Back to sign in"
+			})]
+		})]
+	});
+	const shown = mismatch ? "The passwords are not the same." : error;
+	return /* @__PURE__ */ jsx(AuthLayout, {
+		title: "Choose a new password",
+		description: `At least 12 characters.`,
+		children: /* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-4",
+			onSubmit: (event) => {
+				event.preventDefault();
+				setMismatch(password !== repeat);
+				if (password === repeat) onSubmit(password);
+			},
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					children: ["New password", /* @__PURE__ */ jsx(Input, {
+						type: "password",
+						name: "new-password",
+						autoComplete: "new-password",
+						required: true,
+						minLength: 12,
+						autoFocus: true,
+						value: password,
+						invalid: Boolean(shown),
+						onChange: (event) => setPassword(event.target.value),
+						className: "min-h-6"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					children: ["Repeat new password", /* @__PURE__ */ jsx(Input, {
+						type: "password",
+						name: "repeat-password",
+						autoComplete: "new-password",
+						required: true,
+						minLength: 12,
+						value: repeat,
+						invalid: Boolean(shown),
+						onChange: (event) => setRepeat(event.target.value),
+						className: "min-h-6"
+					})]
+				}),
+				shown && /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "text-xs font-medium text-danger-text",
+					children: shown
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					type: "submit",
+					loading: busy,
+					className: "min-h-10",
+					children: "Set new password"
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { ResetPasswordForm };

package/dist/auth/reset-password-page.js

@@ -0,0 +1,43 @@
+import { useAuth } from "./auth-provider.js";
+import { ResetPasswordForm } from "./reset-password-form.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { AuthError } from "@protobase/client";
+//#region src/auth/reset-password-page.tsx
+/** Better Auth's answers to a new password, in words for the person at the keyboard. */
+const resetPasswordMessage = (error) => {
+	if (error.status === 429) return "Too many attempts. Wait a minute and try again.";
+	if (error.code === "PASSWORD_TOO_SHORT") return `Use at least 12 characters.`;
+	if (error.code === "PASSWORD_TOO_LONG") return "That password is too long.";
+	return error.message;
+};
+/** Sets a new password with the token of an emailed reset link. */
+const ResetPasswordPage = ({ token, onDone, onRequestNewLink, onBack }) => {
+	const { session } = useAuth();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	const [invalid, setInvalid] = useState(!token);
+	const submit = async (password) => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			await session.resetPassword(token, password);
+			onDone();
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			if (failure.code === "INVALID_TOKEN") setInvalid(true);
+			else setError(resetPasswordMessage(failure));
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(ResetPasswordForm, {
+		busy,
+		error,
+		invalidLink: invalid,
+		onRequestNewLink,
+		onBack,
+		onSubmit: (password) => void submit(password)
+	});
+};
+//#endregion
+export { ResetPasswordPage, resetPasswordMessage };

package/dist/auth/sign-in-form.js

@@ -0,0 +1,74 @@
+import { Input } from "../primitives/input.js";
+import { Button } from "../primitives/button.js";
+import { AuthLayout } from "./auth-layout.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/sign-in-form.tsx
+const SignInForm = ({ onSubmit, busy, error, workspace, notice, onForgotPassword }) => {
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	return /* @__PURE__ */ jsxs(AuthLayout, {
+		title: "Sign in to Protobase",
+		description: workspace,
+		children: [notice && /* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: "mb-4 rounded-md bg-success-soft px-3 py-2 text-xs font-medium text-success-text",
+			children: notice
+		}), /* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-4",
+			onSubmit: (event) => {
+				event.preventDefault();
+				onSubmit(email.trim(), password);
+			},
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					children: ["Email", /* @__PURE__ */ jsx(Input, {
+						type: "email",
+						name: "email",
+						autoComplete: "username",
+						required: true,
+						autoFocus: true,
+						value: email,
+						invalid: Boolean(error),
+						onChange: (event) => setEmail(event.target.value),
+						className: "min-h-6"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					children: ["Password", /* @__PURE__ */ jsx(Input, {
+						type: "password",
+						name: "password",
+						autoComplete: "current-password",
+						required: true,
+						value: password,
+						invalid: Boolean(error),
+						onChange: (event) => setPassword(event.target.value),
+						className: "min-h-6"
+					})]
+				}),
+				error && /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "text-xs font-medium text-danger-text",
+					children: error
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					type: "submit",
+					loading: busy,
+					className: "min-h-10",
+					children: "Sign in"
+				}),
+				onForgotPassword && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onForgotPassword,
+					className: "self-center text-[13px] font-medium text-primary-text hover:underline",
+					children: "Forgot password?"
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { SignInForm };

package/dist/auth/sign-in-page.js

@@ -0,0 +1,38 @@
+import { useAuth } from "./auth-provider.js";
+import { SignInForm } from "./sign-in-form.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { AuthError } from "@protobase/client";
+//#region src/auth/sign-in-page.tsx
+/** Better Auth's messages, in words for the person at the keyboard. */
+const signInMessage = (error) => {
+	if (error.status === 429) return "Too many attempts. Wait a minute and try again.";
+	if (error.status === 401 || error.code === "INVALID_EMAIL_OR_PASSWORD") return "The email or password is not right.";
+	return error.message;
+};
+const SignInPage = ({ workspace, notice, onForgotPassword }) => {
+	const { signIn } = useAuth();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	const submit = async (email, password) => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			await signIn(email, password);
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(signInMessage(failure));
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(SignInForm, {
+		busy,
+		error,
+		workspace,
+		notice,
+		onForgotPassword,
+		onSubmit: (email, password) => void submit(email, password)
+	});
+};
+//#endregion
+export { SignInPage, signInMessage };

package/dist/auth/user-to-shell.js

@@ -0,0 +1,18 @@
+//#region src/auth/user-to-shell.ts
+const hueOf = (text) => [...text].reduce((sum, char) => (sum * 31 + char.charCodeAt(0)) % 360, 7);
+const initialsOf = (name) => name.split(/[\s@.]+/).filter(Boolean).slice(0, 2).map((part) => part[0].toUpperCase()).join("");
+/** What the sidebar's profile menu shows for a signed-in user. */
+const userToShell = (user) => {
+	const roles = (user.role ?? "user").split(",").map((role) => role.trim());
+	const admin = roles.includes("admin");
+	return {
+		name: user.name || user.email,
+		email: user.email,
+		initials: initialsOf(user.name || user.email) || "?",
+		hue: hueOf(user.id || user.email),
+		role: admin ? "Admin" : (roles[0] ?? "user").replace(/^./, (char) => char.toUpperCase()),
+		roleTone: admin ? "violet" : "blue"
+	};
+};
+//#endregion
+export { userToShell };

package/dist/data/api-provider.d.ts

@@ -0,0 +1,54 @@
+import { ReactNode } from "react";
+import { QueryClient } from "@tanstack/react-query";
+import { Client, ClientOptions } from "@protobase/client";
+//#region src/data/api-provider.d.ts
+export declare const useClient: () => {
+  list: <R extends import("@protobase/client").ResourceRef>(resource: R, params?: import("@protobase/client").ListParams) => Promise<import("@protobase/client").ListPage<import("@protobase/client").RecordOf<R>>>;
+  search: <R extends import("@protobase/client").ResourceRef>(resource: R, params?: import("@protobase/client").ListParams) => Promise<import("@protobase/client").ListPage<import("@protobase/client").RecordOf<R>>>;
+  get: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[]) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
+  create: <R extends import("@protobase/client").ResourceRef>(resource: R, body: Partial<import("@protobase/client").RecordOf<R>>) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>> & {
+    location: string;
+  }>;
+  update: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], patch: Partial<import("@protobase/client").RecordOf<R>>, etag: string) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
+  remove: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], { etag }?: {
+    etag?: string;
+  }) => Promise<void>;
+  undelete: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[]) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
+  reveal: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], field: string) => Promise<unknown>;
+  batchWrite: (ops: import("@protobase/client").BatchOp[]) => Promise<import("@protobase/client").BatchResult>;
+  facets: (resource: import("@protobase/client").ResourceRef, field: string, o?: {
+    filter?: import("@protobase/client").FilterInput;
+    limit?: number;
+  }) => Promise<import("@protobase/client").Facet[]>;
+  series: (resource: import("@protobase/client").ResourceRef, params: import("@protobase/client").SeriesParams & {
+    filter?: import("@protobase/client").FilterInput;
+  }) => Promise<import("@protobase/client").Series>;
+  histogram: (resource: import("@protobase/client").ResourceRef, field: string, o?: {
+    filter?: import("@protobase/client").FilterInput;
+    buckets?: number;
+  }) => Promise<import("@protobase/client").Histogram>;
+  seek: <R extends import("@protobase/client").ResourceRef>(resource: R, params: import("@protobase/client").ListParams & {
+    position: number;
+  }) => Promise<import("@protobase/client").ListPage<import("@protobase/client").RecordOf<R>>>;
+  meta: (etag?: string) => Promise<import("@protobase/client").MetaResult>;
+};
+export type ApiProviderProps = {
+  /** Defaults to `/api/v1` on the current origin. */
+  baseUrl?: string;
+  /** A ready-made client, for tests; skips the meta-version watcher. */
+  client?: Client;
+  /** The `fetch` the built client uses, for tests that keep the meta-version watcher. */
+  fetch?: ClientOptions['fetch'];
+  queryClient?: QueryClient;
+  /** The bearer token source, and what to do when the session is over; see `createAuthSession`. */
+  token?: ClientOptions['token'];
+  onUnauthenticated?: () => void;
+  children: ReactNode;
+};
+/**
+ * Owns the query cache and the API client; refetches `/meta` whenever `X-Meta-Version` changes. The version is
+ * compared only with the last one seen: it hashes the models and roles, while the `/meta` ETag hashes the whole
+ * per-caller body, so the two never match.
+ */
+export declare const ApiProvider: ({ baseUrl, client: given, fetch, queryClient: givenQueryClient, token, onUnauthenticated, children }: ApiProviderProps) => import("react").JSX.Element;
+//#endregion

package/dist/data/api-provider.js

@@ -0,0 +1,53 @@
+import { keys } from "./query-keys.js";
+import { createContext, useContext, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createClient } from "@protobase/client";
+//#region src/data/api-provider.tsx
+const ApiContext = createContext(null);
+const useClient = () => {
+	const client = useContext(ApiContext);
+	if (!client) throw new Error("useClient must be used inside ApiProvider");
+	return client;
+};
+/**
+* Owns the query cache and the API client; refetches `/meta` whenever `X-Meta-Version` changes. The version is
+* compared only with the last one seen: it hashes the models and roles, while the `/meta` ETag hashes the whole
+* per-caller body, so the two never match.
+*/
+const ApiProvider = ({ baseUrl, client: given, fetch, queryClient: givenQueryClient, token, onUnauthenticated, children }) => {
+	const [queryClient] = useState(() => givenQueryClient ?? new QueryClient({ defaultOptions: { queries: {
+		staleTime: 3e4,
+		retry: false,
+		refetchOnWindowFocus: false
+	} } }));
+	const metaVersion = useRef(void 0);
+	const client = useMemo(() => given ?? createClient({
+		baseUrl,
+		fetch,
+		token,
+		onUnauthenticated,
+		onMetaVersion: (version) => {
+			const previous = metaVersion.current;
+			metaVersion.current = version;
+			if (previous === void 0 || previous === version) return;
+			queryClient.invalidateQueries({ queryKey: keys.meta }, { cancelRefetch: false });
+		}
+	}), [
+		given,
+		baseUrl,
+		fetch,
+		queryClient,
+		token,
+		onUnauthenticated
+	]);
+	return /* @__PURE__ */ jsx(QueryClientProvider, {
+		client: queryClient,
+		children: /* @__PURE__ */ jsx(ApiContext.Provider, {
+			value: client,
+			children
+		})
+	});
+};
+//#endregion
+export { ApiProvider, useClient };

package/dist/data/meta-data.d.ts

@@ -0,0 +1,14 @@
+import { ResourcePermissions } from "@protobase/client";
+import { ResourceModel, UserMenuModel, ViewModel } from "@protobase/schema";
+import { PageModel } from "@protobase/layout";
+//#region src/data/meta-data.d.ts
+export type MetaData = {
+  etag: string;
+  resources: Record<string, ResourceModel>;
+  views: Record<string, ViewModel>;
+  /** Composed pages by name. */
+  pages: Record<string, PageModel>;
+  permissions: Record<string, ResourcePermissions>;
+  userMenu?: UserMenuModel;
+};
+//#endregion

package/dist/data/meta-data.js

@@ -0,0 +1,9 @@
+//#region src/data/meta-data.ts
+const allowEverything = {
+	create: true,
+	update: true,
+	delete: true,
+	conditional: []
+};
+//#endregion
+export { allowEverything };

package/dist/data/query-keys.js

@@ -0,0 +1,95 @@
+//#region src/data/query-keys.ts
+const keys = {
+	meta: ["meta"],
+	list: (resource, filter, orderBy, pageSize, startToken) => [
+		"list",
+		resource,
+		filter,
+		orderBy,
+		pageSize,
+		startToken
+	],
+	page: (resource, filter, orderBy, pageSize, page) => [
+		"page",
+		resource,
+		filter,
+		orderBy,
+		pageSize,
+		page
+	],
+	/** A sidebar group's records; starts with `list`, so invalidating a resource's lists refreshes it too. */
+	navRecent: (resource, filter, orderBy, pageSize) => [
+		"list",
+		resource,
+		filter,
+		orderBy,
+		pageSize,
+		"nav-recent"
+	],
+	first: (resource, filter, orderBy) => [
+		"first-page",
+		resource,
+		filter,
+		orderBy
+	],
+	record: (resource, key) => [
+		"record",
+		resource,
+		key
+	],
+	facets: (resource, field, filter) => [
+		"facets",
+		resource,
+		field,
+		filter
+	],
+	series: (resource, field, range, granularity, filter) => [
+		"series",
+		resource,
+		field,
+		range,
+		granularity,
+		filter
+	],
+	histogram: (resource, field, buckets, filter) => [
+		"histogram",
+		resource,
+		field,
+		buckets,
+		filter
+	],
+	relatedLabel: (resource, id) => [
+		"related-label",
+		resource,
+		id
+	],
+	labels: (resource, ids) => [
+		"labels",
+		resource,
+		ids
+	],
+	count: (resource, filter) => [
+		"count",
+		resource,
+		filter
+	],
+	firstRecord: (resource, filter, orderBy) => [
+		"first-record",
+		resource,
+		filter,
+		orderBy
+	],
+	pathValue: (resource, key, path) => [
+		"path-value",
+		resource,
+		key,
+		path
+	],
+	labelMap: (resource, ids) => [
+		"label-map",
+		resource,
+		ids
+	]
+};
+//#endregion
+export { keys };

package/dist/data/use-aggregates.d.ts

@@ -0,0 +1,8 @@
+import { FilterInput, SeriesParams } from "@protobase/client";
+//#region src/data/use-aggregates.d.ts
+export declare const useFacets: (resource: string, field: string, filter?: FilterInput, enabled?: boolean) => import("@tanstack/react-query").UseQueryResult<import("@protobase/client").Facet[], Error>;
+export declare const useSeries: (resource: string, params: SeriesParams & {
+  filter?: FilterInput;
+}, enabled?: boolean) => import("@tanstack/react-query").UseQueryResult<import("@protobase/client").Series, Error>;
+export declare const useHistogram: (resource: string, field: string, filter?: FilterInput, buckets?: number, enabled?: boolean) => import("@tanstack/react-query").UseQueryResult<import("@protobase/client").Histogram, Error>;
+//#endregion

package/dist/data/use-aggregates.js

@@ -0,0 +1,43 @@
+import { keys } from "./query-keys.js";
+import { useClient } from "./api-provider.js";
+import { useQuery } from "@tanstack/react-query";
+import { filterText } from "@protobase/client";
+//#region src/data/use-aggregates.ts
+const useFacets = (resource, field, filter, enabled = true) => {
+	const client = useClient();
+	const text = filterText(filter) ?? "";
+	return useQuery({
+		queryKey: keys.facets(resource, field, text),
+		enabled,
+		queryFn: () => client.facets(resource, field, {
+			filter: text,
+			limit: 50
+		})
+	});
+};
+const useSeries = (resource, params, enabled = true) => {
+	const client = useClient();
+	const text = filterText(params.filter) ?? "";
+	return useQuery({
+		queryKey: keys.series(resource, params.field, `${params.range ?? ""}${params.from ?? ""}${params.to ?? ""}`, params.granularity ?? "", text),
+		enabled,
+		queryFn: () => client.series(resource, {
+			...params,
+			filter: text
+		})
+	});
+};
+const useHistogram = (resource, field, filter, buckets = 20, enabled = true) => {
+	const client = useClient();
+	const text = filterText(filter) ?? "";
+	return useQuery({
+		queryKey: keys.histogram(resource, field, buckets, text),
+		enabled,
+		queryFn: () => client.histogram(resource, field, {
+			filter: text,
+			buckets
+		})
+	});
+};
+//#endregion
+export { useFacets, useHistogram, useSeries };