@protobase/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,231 @@
+import { FilterInput, ListPage } from "@protobase/client";
+//#region src/data/use-list.d.ts
+export type UseListParams = {
+  filter?: FilterInput;
+  orderBy?: string;
+  pageSize?: number;
+  fields?: string[];
+  /** Start at this page token instead of the first page, for example one from `useAnchors`. */
+  startToken?: string;
+  enabled?: boolean;
+};
+type Row = Record<string, unknown>;
+/** Infinite pages of a resource, following `next_page_token`. */
+export declare const useList: (resource: string, { filter, orderBy, pageSize, fields, startToken, enabled }?: UseListParams) => {
+  items: Row[];
+  totalEstimate: number | undefined;
+  data: import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>;
+  error: Error;
+  isError: true;
+  isPending: false;
+  isLoading: false;
+  isLoadingError: false;
+  isRefetchError: true;
+  isSuccess: false;
+  isPlaceholderData: false;
+  status: "error";
+  fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
+  fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  isFetchNextPageError: boolean;
+  isFetchingNextPage: boolean;
+  isFetchPreviousPageError: boolean;
+  isFetchingPreviousPage: boolean;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isFetching: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
+  fetchStatus: import("@tanstack/react-query").FetchStatus;
+} | {
+  items: Row[];
+  totalEstimate: number | undefined;
+  data: import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>;
+  error: null;
+  isError: false;
+  isPending: false;
+  isLoading: false;
+  isLoadingError: false;
+  isRefetchError: false;
+  isFetchNextPageError: false;
+  isFetchPreviousPageError: false;
+  isSuccess: true;
+  isPlaceholderData: false;
+  status: "success";
+  fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
+  fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetchingPreviousPage: boolean;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isFetching: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
+  fetchStatus: import("@tanstack/react-query").FetchStatus;
+} | {
+  items: Row[];
+  totalEstimate: number | undefined;
+  data: undefined;
+  error: Error;
+  isError: true;
+  isPending: false;
+  isLoading: false;
+  isLoadingError: true;
+  isRefetchError: false;
+  isFetchNextPageError: false;
+  isFetchPreviousPageError: false;
+  isSuccess: false;
+  isPlaceholderData: false;
+  status: "error";
+  fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
+  fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetchingPreviousPage: boolean;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isFetching: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
+  fetchStatus: import("@tanstack/react-query").FetchStatus;
+} | {
+  items: Row[];
+  totalEstimate: number | undefined;
+  data: undefined;
+  error: null;
+  isError: false;
+  isPending: true;
+  isLoading: true;
+  isLoadingError: false;
+  isRefetchError: false;
+  isFetchNextPageError: false;
+  isFetchPreviousPageError: false;
+  isSuccess: false;
+  isPlaceholderData: false;
+  status: "pending";
+  fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
+  fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetchingPreviousPage: boolean;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isFetching: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
+  fetchStatus: import("@tanstack/react-query").FetchStatus;
+} | {
+  items: Row[];
+  totalEstimate: number | undefined;
+  data: undefined;
+  error: null;
+  isError: false;
+  isPending: true;
+  isLoadingError: false;
+  isRefetchError: false;
+  isFetchNextPageError: false;
+  isFetchPreviousPageError: false;
+  isSuccess: false;
+  isPlaceholderData: false;
+  status: "pending";
+  fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
+  fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetchingPreviousPage: boolean;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isFetching: boolean;
+  isLoading: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
+  fetchStatus: import("@tanstack/react-query").FetchStatus;
+} | {
+  items: Row[];
+  totalEstimate: number | undefined;
+  data: import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>;
+  isError: false;
+  error: null;
+  isPending: false;
+  isLoading: false;
+  isLoadingError: false;
+  isRefetchError: false;
+  isSuccess: true;
+  isPlaceholderData: true;
+  isFetchNextPageError: false;
+  isFetchPreviousPageError: false;
+  status: "success";
+  fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
+  fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetchingPreviousPage: boolean;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isFetching: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
+  fetchStatus: import("@tanstack/react-query").FetchStatus;
+};
+//#endregion

package/dist/data/use-list.js

@@ -0,0 +1,31 @@
+import { keys } from "./query-keys.js";
+import { useClient } from "./api-provider.js";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { filterText } from "@protobase/client";
+//#region src/data/use-list.ts
+/** Infinite pages of a resource, following `next_page_token`. */
+const useList = (resource, { filter, orderBy, pageSize = 50, fields, startToken = "", enabled = true } = {}) => {
+	const client = useClient();
+	const text = filterText(filter) ?? "";
+	const query = useInfiniteQuery({
+		queryKey: [...keys.list(resource, text, orderBy ?? "", pageSize, startToken), fields?.join(",") ?? ""],
+		enabled,
+		initialPageParam: startToken,
+		queryFn: ({ pageParam }) => client.list(resource, {
+			filter: text,
+			orderBy,
+			pageSize,
+			fields,
+			pageToken: pageParam
+		}),
+		getNextPageParam: (last) => last.nextPageToken || void 0
+	});
+	const pages = query.data?.pages ?? [];
+	return {
+		...query,
+		items: pages.flatMap((page) => page.items),
+		totalEstimate: pages[0]?.totalSizeEstimate
+	};
+};
+//#endregion
+export { useList };

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

@@ -0,0 +1,8 @@
+import { MetaData } from "./meta-data.js";
+//#region src/data/use-meta.d.ts
+/**
+ * The resource and view models. Refetches on window focus with `If-None-Match`, so an unchanged
+ * `/meta` costs a 304, and the cached object keeps its identity.
+ */
+export declare const useMeta: () => import("@tanstack/react-query").UseQueryResult<MetaData, Error>;
+//#endregion

package/dist/data/use-meta.js

@@ -0,0 +1,35 @@
+import { keys } from "./query-keys.js";
+import { useClient } from "./api-provider.js";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+//#region src/data/use-meta.ts
+/**
+* The resource and view models. Refetches on window focus with `If-None-Match`, so an unchanged
+* `/meta` costs a 304, and the cached object keeps its identity.
+*/
+const useMeta = () => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	return useQuery({
+		queryKey: keys.meta,
+		staleTime: 0,
+		refetchOnWindowFocus: "always",
+		queryFn: async () => {
+			const previous = queryClient.getQueryData(keys.meta);
+			const result = await client.meta(previous?.etag);
+			if (result.status === "unchanged") {
+				if (!previous) throw new Error("The server answered 304 to a request without If-None-Match");
+				return previous;
+			}
+			return {
+				etag: result.etag,
+				resources: Object.fromEntries(result.meta.resources.map((model) => [model.name, model])),
+				views: Object.fromEntries(result.meta.views.map((model) => [model.resource, model])),
+				pages: Object.fromEntries((result.meta.pages ?? []).map((model) => [model.name, model])),
+				permissions: result.meta.permissions ?? {},
+				...result.meta.userMenu && { userMenu: result.meta.userMenu }
+			};
+		}
+	});
+};
+//#endregion
+export { useMeta };

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

@@ -0,0 +1,6 @@
+import { Stored } from "@protobase/client";
+import { KeyValue } from "@protobase/schema";
+//#region src/data/use-record.d.ts
+export type LiveRecord = Stored<Record<string, unknown>>;
+export declare const useRecord: (resource: string, key: KeyValue | readonly KeyValue[], enabled?: boolean) => import("@tanstack/react-query").UseQueryResult<LiveRecord, Error>;
+//#endregion

package/dist/data/use-record.js

@@ -0,0 +1,16 @@
+import { keys } from "./query-keys.js";
+import { useClient } from "./api-provider.js";
+import { useQuery } from "@tanstack/react-query";
+import { encodeKey } from "@protobase/schema";
+//#region src/data/use-record.ts
+const useRecord = (resource, key, enabled = true) => {
+	const client = useClient();
+	const encoded = encodeKey(key);
+	return useQuery({
+		queryKey: keys.record(resource, encoded),
+		enabled,
+		queryFn: () => client.get(resource, key)
+	});
+};
+//#endregion
+export { useRecord };

package/dist/data/use-update-record.d.ts

@@ -0,0 +1,15 @@
+import { LiveRecord } from "./use-record.js";
+import { PreconditionFailedError } from "@protobase/client";
+import { KeyValue } from "@protobase/schema";
+//#region src/data/use-update-record.d.ts
+export type UpdateArgs = {
+  patch: Record<string, unknown>;
+  etag: string;
+};
+/**
+ * PATCH with `If-Match`. On success the cached record gets the new ETag and lists refetch;
+ * a `412` rejects with `PreconditionFailedError`, which `isConflict` recognises.
+ */
+export declare const useUpdateRecord: (resource: string, key: KeyValue | readonly KeyValue[]) => import("@tanstack/react-query").UseMutationResult<LiveRecord, Error, UpdateArgs, unknown>;
+export declare const isConflict: (error: unknown) => error is PreconditionFailedError;
+//#endregion

package/dist/data/use-update-record.js

@@ -0,0 +1,26 @@
+import { keys } from "./query-keys.js";
+import { useClient } from "./api-provider.js";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { PreconditionFailedError } from "@protobase/client";
+import { encodeKey } from "@protobase/schema";
+//#region src/data/use-update-record.ts
+/**
+* PATCH with `If-Match`. On success the cached record gets the new ETag and lists refetch;
+* a `412` rejects with `PreconditionFailedError`, which `isConflict` recognises.
+*/
+const useUpdateRecord = (resource, key) => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const encoded = encodeKey(key);
+	return useMutation({
+		mutationFn: ({ patch, etag }) => client.update(resource, key, patch, etag),
+		onSuccess: (stored) => {
+			queryClient.setQueryData(keys.record(resource, encoded), stored);
+			queryClient.invalidateQueries({ queryKey: ["page", resource] });
+			queryClient.invalidateQueries({ queryKey: ["list", resource] });
+		}
+	});
+};
+const isConflict = (error) => error instanceof PreconditionFailedError;
+//#endregion
+export { isConflict, useUpdateRecord };

package/dist/data-grid/cells.js

@@ -0,0 +1,85 @@
+import { cn } from "../lib/cn.js";
+import { Avatar } from "../primitives/avatar.js";
+import { Badge } from "../primitives/badge.js";
+import { formatDate, formatDateTime } from "../format/date.js";
+import { userById } from "../mocks/users.js";
+import { formatMoney } from "../format/money.js";
+import { formatInt, formatPercent, formatSigned } from "../format/number.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import { enumLabel } from "@protobase/schema";
+//#region src/data-grid/cells.tsx
+const muted = (text) => /* @__PURE__ */ jsx("span", {
+	className: "text-faint-foreground",
+	children: text
+});
+const relationLabel = (value) => typeof value === "object" && value !== null && "name" in value ? String(value.name) : String(value);
+const renderCell = (spec, value) => {
+	if (value === null || value === void 0) return muted("—");
+	switch (spec.kind) {
+		case "text": return /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: String(value)
+		});
+		case "id": return /* @__PURE__ */ jsx("span", {
+			className: "truncate font-mono text-xs text-muted-foreground",
+			children: String(value)
+		});
+		case "money": return /* @__PURE__ */ jsx("span", {
+			className: "tabular-nums",
+			children: formatMoney(Number(value), spec.currency)
+		});
+		case "date": return /* @__PURE__ */ jsx("span", {
+			className: "tabular-nums text-muted-foreground",
+			children: formatDate(Number(value))
+		});
+		case "datetime": return /* @__PURE__ */ jsx("span", {
+			className: "tabular-nums text-muted-foreground",
+			children: formatDateTime(Number(value))
+		});
+		case "number": return /* @__PURE__ */ jsx("span", {
+			className: "tabular-nums",
+			children: formatInt(Number(value))
+		});
+		case "signed": return /* @__PURE__ */ jsx("span", {
+			className: cn("tabular-nums", Number(value) < 0 ? "text-danger-text" : "text-success-text"),
+			children: formatSigned(Number(value))
+		});
+		case "percent": return Number(value) === 0 ? muted("—") : /* @__PURE__ */ jsx("span", {
+			className: "tabular-nums",
+			children: formatPercent(Number(value))
+		});
+		case "status": return /* @__PURE__ */ jsx(Badge, {
+			tone: spec.tones?.[String(value)] ?? "neutral",
+			children: enumLabel(String(value), spec.labels)
+		});
+		case "relation": return /* @__PURE__ */ jsx("span", {
+			className: "truncate font-medium text-primary-text hover:underline",
+			children: relationLabel(value)
+		});
+		case "boolean": return value ? /* @__PURE__ */ jsx("span", {
+			className: "inline-flex size-4 items-center justify-center rounded-full bg-success-soft text-success-text",
+			children: /* @__PURE__ */ jsx(Check, {
+				className: "size-3",
+				strokeWidth: 3
+			})
+		}) : muted("No");
+		case "user": {
+			const user = userById(String(value));
+			return /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex items-center gap-2 truncate",
+				children: [/* @__PURE__ */ jsx(Avatar, {
+					initials: user.initials,
+					hue: user.hue,
+					size: "xs",
+					className: "ring-0"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "truncate text-muted-foreground",
+					children: user.name
+				})]
+			});
+		}
+	}
+};
+//#endregion
+export { renderCell };

package/dist/data-grid/column-spec.js

@@ -0,0 +1,4 @@
+//#region src/data-grid/column-spec.ts
+const isRightAligned = (kind) => kind === "money" || kind === "number" || kind === "signed" || kind === "percent";
+//#endregion
+export { isRightAligned };

package/dist/data-grid/columns.js

@@ -0,0 +1,16 @@
+import { renderCell } from "./cells.js";
+import { createColumnHelper, rowSelectionFeature, rowSortingFeature, tableFeatures } from "@tanstack/react-table";
+//#region src/data-grid/columns.ts
+const features = tableFeatures({
+	rowSortingFeature,
+	rowSelectionFeature
+});
+const helper = createColumnHelper();
+const buildColumns = (specs) => helper.columns(specs.map((spec) => helper.accessor((row) => spec.value ? spec.value(row) : row[spec.id], {
+	id: spec.id,
+	header: spec.header,
+	enableSorting: spec.sortable ?? false,
+	cell: (context) => renderCell(spec, context.getValue())
+})));
+//#endregion
+export { buildColumns, features };