@protobase/ui 0.19.5 → 0.19.7

package/dist/app/export/export-dialog.js

@@ -0,0 +1,235 @@
+import { Segmented } from "../../primitives/segmented.js";
+import { formatApproxRows, formatInt } from "../../format/number.js";
+import { Button } from "../../primitives/button.js";
+import { Checkbox } from "../../primitives/checkbox.js";
+import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
+import { exportLimit } from "./export-options.js";
+import { useState } from "react";
+import { ArrowDown, ArrowUp } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/export/export-dialog.tsx
+const formatOptions = [{
+	value: "xlsx",
+	label: "Excel (.xlsx)"
+}, {
+	value: "csv",
+	label: "CSV"
+}];
+const modeOptions = [{
+	value: "shown",
+	label: "As shown"
+}, {
+	value: "raw",
+	label: "Raw values"
+}];
+const modeHelp = {
+	shown: "Labels, dates and numbers as the list shows them.",
+	raw: "Values as they are stored, such as keys and codes."
+};
+const countText = (count) => {
+	if (count.kind === "counting") return "Counting rows…";
+	if (count.kind === "exact") return formatApproxRows(count.rows);
+	return count.rows > 1e4 ? formatApproxRows(count.rows) : "more than 10,000 rows";
+};
+/** The fewest rows the list finds, as far as the count tells: an estimate stands only above 10,000. */
+const countedRows = (count) => {
+	if (count.kind === "counting") return void 0;
+	return count.kind === "exact" ? count.rows : Math.max(count.rows, 10001);
+};
+const Setting = ({ label, help, children }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex flex-col items-start gap-1.5",
+	children: [
+		/* @__PURE__ */ jsx("span", {
+			className: "text-[13px] font-medium",
+			children: label
+		}),
+		children,
+		help && /* @__PURE__ */ jsx("span", {
+			className: "text-xs text-muted-foreground",
+			children: help
+		})
+	]
+});
+const move = (columns, name, by) => {
+	const index = columns.indexOf(name);
+	const next = [...columns];
+	next.splice(index, 1);
+	next.splice(index + by, 0, name);
+	return next;
+};
+/**
+* The columns a file holds, in order: the chosen ones first, each with buttons that move it up or down, then the
+* fields left out, to add. The dialog scrolls when the list is long, so it has no scroll box of its own.
+*/
+const ColumnPicker = ({ fields, columns, onChange }) => {
+	const labels = Object.fromEntries(fields.map((field) => [field.name, field.label]));
+	const ordered = [...columns, ...fields.map((field) => field.name).filter((name) => !columns.includes(name))];
+	return /* @__PURE__ */ jsx("ul", {
+		className: "divide-y self-stretch rounded-md border",
+		"aria-label": "Columns",
+		children: ordered.map((name) => {
+			const chosen = columns.includes(name);
+			const index = columns.indexOf(name);
+			return /* @__PURE__ */ jsxs("li", {
+				className: "flex min-h-10 items-center gap-2 px-3 py-1",
+				children: [/* @__PURE__ */ jsxs("label", {
+					className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2.5",
+					children: [/* @__PURE__ */ jsx(Checkbox, {
+						checked: chosen,
+						label: labels[name],
+						onChange: (checked) => onChange(checked ? [...columns, name] : columns.filter((column) => column !== name))
+					}), /* @__PURE__ */ jsx("span", {
+						className: chosen ? "truncate" : "truncate text-muted-foreground",
+						children: labels[name]
+					})]
+				}), chosen && /* @__PURE__ */ jsxs("span", {
+					className: "flex shrink-0 gap-1",
+					children: [/* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "ghost",
+						className: "min-h-8 px-2",
+						"aria-label": `Move ${labels[name]} up`,
+						disabled: index === 0,
+						onClick: () => onChange(move(columns, name, -1)),
+						children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-3.5" })
+					}), /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "ghost",
+						className: "min-h-8 px-2",
+						"aria-label": `Move ${labels[name]} down`,
+						disabled: index === columns.length - 1,
+						onClick: () => onChange(move(columns, name, 1)),
+						children: /* @__PURE__ */ jsx(ArrowDown, { className: "size-3.5" })
+					})]
+				})]
+			}, name);
+		})
+	});
+};
+/**
+* The Export dialog: the file's format, which rows (the list's, or the selected ones), which columns in which order, and
+* whether values are exported as shown or raw, with the number of rows before it starts.
+*/
+const ExportDialog = ({ plural, view, fields, initialColumns, count, selected, open, onExport, onClose }) => {
+	const [format, setFormat] = useState("xlsx");
+	const [scope, setScope] = useState(selected ? "selected" : "list");
+	const [columns, setColumns] = useState(initialColumns);
+	const [mode, setMode] = useState("shown");
+	const limit = exportLimit(view, format);
+	const rows = scope === "selected" ? `${formatInt(selected ?? 0)} selected ${selected === 1 ? "row" : "rows"}` : countText(count);
+	const overLimit = (scope === "selected" ? selected ?? 0 : countedRows(count) ?? 0) > limit;
+	const scopeOptions = [{
+		value: "list",
+		label: "Rows in the list"
+	}, {
+		value: "selected",
+		label: `Selected (${formatInt(selected ?? 0)})`
+	}];
+	return /* @__PURE__ */ jsx(ResponsiveDialog, {
+		title: `Export ${plural.toLowerCase()}`,
+		open,
+		onClose,
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+			onClick: onClose,
+			children: "Cancel"
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			disabled: columns.length === 0,
+			onClick: () => onExport({
+				format,
+				scope,
+				columns,
+				mode
+			}),
+			children: "Export"
+		})] }),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4 text-[13px]",
+			children: [
+				/* @__PURE__ */ jsx(Setting, {
+					label: "Format",
+					children: /* @__PURE__ */ jsx(Segmented, {
+						size: "md",
+						label: "Format",
+						value: format,
+						options: formatOptions,
+						onChange: setFormat
+					})
+				}),
+				selected !== void 0 && selected > 0 && /* @__PURE__ */ jsx(Setting, {
+					label: "Rows",
+					help: scope === "list" ? "With the list’s filters, search and sort." : void 0,
+					children: /* @__PURE__ */ jsx(Segmented, {
+						size: "md",
+						label: "Rows",
+						value: scope,
+						options: scopeOptions,
+						onChange: setScope
+					})
+				}),
+				/* @__PURE__ */ jsx(Setting, {
+					label: "Values",
+					help: modeHelp[mode],
+					children: /* @__PURE__ */ jsx(Segmented, {
+						size: "md",
+						label: "Values",
+						value: mode,
+						options: modeOptions,
+						onChange: setMode
+					})
+				}),
+				/* @__PURE__ */ jsx(Setting, {
+					label: "Columns",
+					children: /* @__PURE__ */ jsx(ColumnPicker, {
+						fields,
+						columns,
+						onChange: setColumns
+					})
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					role: "status",
+					className: "text-muted-foreground",
+					children: [
+						"Exports ",
+						rows,
+						".",
+						overLimit && ` A file holds at most ${formatInt(limit)} rows; the rest are left out.`
+					]
+				})
+			]
+		})
+	});
+};
+/** While the file is built: how many rows are in it so far, out of how many, and a way to stop. */
+const ExportProgressDialog = ({ plural, done, total, onCancel }) => {
+	const share = total ? Math.min(1, done / total) : void 0;
+	return /* @__PURE__ */ jsx(ResponsiveDialog, {
+		title: `Exporting ${plural.toLowerCase()}`,
+		open: true,
+		onClose: onCancel,
+		actions: /* @__PURE__ */ jsx(Button, {
+			onClick: onCancel,
+			children: "Cancel"
+		}),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2 text-[13px]",
+			children: [/* @__PURE__ */ jsx("div", {
+				role: "progressbar",
+				"aria-label": "Rows exported",
+				"aria-valuemin": 0,
+				"aria-valuemax": total,
+				"aria-valuenow": done,
+				className: "h-1.5 overflow-hidden rounded-full bg-muted",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "h-full rounded-full bg-primary transition-[width]",
+					style: { width: `${(share ?? 0) * 100}%` }
+				})
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				children: total ? `${formatInt(done)} of ${formatInt(total)} rows` : `${formatInt(done)} rows`
+			})]
+		})
+	});
+};
+//#endregion
+export { ExportDialog, ExportProgressDialog, countedRows };

package/dist/app/export/export-options.js

@@ -0,0 +1,49 @@
+import { columnsFromModel, listColumnNames } from "../../live/columns-from-model.js";
+import { xlsxMaxRows } from "./xlsx.js";
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/app/export/export-options.ts
+const where = createWhere();
+/** Whether the view's list offers Export: unless the view takes it away. */
+const exportOffered = (view) => view?.export !== false;
+/**
+* The fields a file may hold, in the resource's order: those the user may read, which `/meta` gives, but the sensitive
+* ones, which no list carries and the page shows only when revealed one at a time.
+*/
+const exportableFields = (model) => Object.values(model.fields).flatMap((field) => field.sensitive ? [] : [field.name]);
+/** The columns a file starts with: the list's own, in its order. */
+const defaultExportColumns = (model, view) => {
+	const exportable = new Set(exportableFields(model));
+	return listColumnNames(model, view).filter((name) => exportable.has(name));
+};
+/** Each field's header, as the list's column for it reads. */
+const exportHeaders = (model, view, names) => Object.fromEntries(columnsFromModel(model, view, [], names).map((column) => [column.id, column.header]));
+/** The columns of a file, each with its field, header and the view's hints for showing it. */
+const exportColumns = (model, view, names) => {
+	const headers = exportHeaders(model, view, names);
+	return names.flatMap((name) => {
+		const field = model.fields[name];
+		return field ? [{
+			name,
+			header: headers[name],
+			field,
+			hints: view?.fields[name] ?? {}
+		}] : [];
+	});
+};
+/** The most rows a file of `format` holds: the view's limit, and for a workbook what one sheet can hold. */
+const exportLimit = (view, format) => {
+	const viewLimit = view?.export ? view.export.maxRows ?? Infinity : Infinity;
+	return Math.min(viewLimit, format === "xlsx" ? xlsxMaxRows : Infinity);
+};
+/** Whether selected rows can be exported: they are found again by their key, which must be a single field. */
+const exportsSelection = (model) => model.primaryKey.length === 1;
+/** Filters that find the selected records again by key, a page's worth in each. */
+const selectionFilters = (model, keys) => {
+	const [keyField] = model.primaryKey;
+	if (!keyField || model.primaryKey.length !== 1) throw new Error("Not implemented: selected rows are exported by a single-field key");
+	const filters = [];
+	for (let start = 0; start < keys.length; start += 500) filters.push(printFilter(where.in(keyField, keys.slice(start, start + 500))));
+	return filters;
+};
+//#endregion
+export { defaultExportColumns, exportColumns, exportHeaders, exportLimit, exportOffered, exportableFields, exportsSelection, selectionFilters };

package/dist/app/export/export-worker.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/app/export/export-worker.js

@@ -0,0 +1,9 @@
+import { createBuilderHandler } from "./builder-port.js";
+//#region src/app/export/export-worker.ts
+const handle = createBuilderHandler();
+const scope = self;
+scope.onmessage = (event) => {
+	const bytes = handle(event.data);
+	scope.postMessage({ bytes }, [bytes.buffer]);
+};
+//#endregion

package/dist/app/export/run-export.js

@@ -0,0 +1,62 @@
+const aborted = () => new DOMException("The export was cancelled", "AbortError");
+/**
+* Reads the rows through the list API, page by page with its page tokens, and has the port build the file from each;
+* each piece is written to the sink as it is built, so only a page is held at a time. A cancel stops at the next page
+* and discards what was written.
+*/
+const runExport = async ({ client, resource, filters, orderBy, plan, labels, limit, port, sink, signal, onProgress }) => {
+	const fields = plan.columns.map((column) => column.name);
+	let rows = 0;
+	try {
+		await sink.write(await port.send({
+			kind: "start",
+			plan
+		}));
+		for (const [index, filter] of filters.entries()) {
+			let pageToken = "";
+			do {
+				const page = await client.search(resource, {
+					filter,
+					orderBy,
+					pageSize: 500,
+					pageToken,
+					fields,
+					labels
+				});
+				if (signal.aborted) throw aborted();
+				const records = page.items.slice(0, limit - rows);
+				await sink.write(await port.send({
+					kind: "page",
+					records,
+					labels: page.labels ?? {}
+				}));
+				rows += records.length;
+				onProgress(rows);
+				pageToken = page.nextPageToken;
+				if (rows >= limit) {
+					await finish(port, sink);
+					return {
+						rows,
+						truncated: records.length < page.items.length || pageToken !== "" || index + 1 < filters.length
+					};
+				}
+			} while (pageToken !== "");
+		}
+		await finish(port, sink);
+		return {
+			rows,
+			truncated: false
+		};
+	} catch (error) {
+		await sink.abort();
+		throw error;
+	} finally {
+		port.close();
+	}
+};
+const finish = async (port, sink) => {
+	await sink.write(await port.send({ kind: "finish" }));
+	await sink.close();
+};
+//#endregion
+export { runExport };

package/dist/app/export/sink.js

@@ -0,0 +1,91 @@
+//#region src/app/export/sink.ts
+const types = {
+	xlsx: {
+		mime: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+		extension: ".xlsx",
+		description: "Excel workbook"
+	},
+	csv: {
+		mime: "text/csv",
+		extension: ".csv",
+		description: "CSV file"
+	}
+};
+const unsafeName = /[\\/:*?"<>|\u0000-\u001f]/g;
+/** The file's name: the resource's label and the day, such as `Orders 2026-10-16.xlsx`. */
+const exportFileName = (label, format, now = /* @__PURE__ */ new Date()) => {
+	const day = [
+		now.getFullYear(),
+		String(now.getMonth() + 1).padStart(2, "0"),
+		String(now.getDate()).padStart(2, "0")
+	].join("-");
+	return `${label.replace(unsafeName, " ").trim()} ${day}${types[format].extension}`;
+};
+const blobFlushBytes = 8e6;
+/** Collects the file in a Blob and downloads it under `name` once it is complete, for browsers without a save picker. */
+const createDownloadSink = (name, format) => {
+	let blob = new Blob([], { type: types[format].mime });
+	let pending = [];
+	let pendingBytes = 0;
+	const flush = () => {
+		blob = new Blob([blob, ...pending], { type: types[format].mime });
+		pending = [];
+		pendingBytes = 0;
+	};
+	return {
+		write: async (bytes) => {
+			if (bytes.length === 0) return;
+			pending.push(bytes);
+			pendingBytes += bytes.length;
+			if (pendingBytes >= blobFlushBytes) flush();
+		},
+		close: async () => {
+			flush();
+			const url = URL.createObjectURL(blob);
+			const link = document.createElement("a");
+			link.href = url;
+			link.download = name;
+			link.click();
+			setTimeout(() => URL.revokeObjectURL(url), 6e4);
+		},
+		abort: async () => {
+			pending = [];
+			blob = new Blob([]);
+		}
+	};
+};
+const savePicker = () => globalThis.showSaveFilePicker;
+/** Whether the browser can write the file to disk as it is built (the File System Access API). */
+const canSaveAsBuilt = () => typeof savePicker() === "function";
+/**
+* Asks where to save the file and writes it there as it is built, so the page holds none of it; `undefined` when the
+* user closes the picker. Call it from the click that starts the export, as the browser asks.
+*/
+const pickFileSink = async (name, format) => {
+	const pick = savePicker();
+	if (!pick) throw new Error("This browser cannot save a file as it is built");
+	const type = types[format];
+	let handle;
+	try {
+		handle = await pick({
+			suggestedName: name,
+			types: [{
+				description: type.description,
+				accept: { [type.mime]: [type.extension] }
+			}]
+		});
+	} catch (error) {
+		if (error instanceof DOMException && error.name === "AbortError") return void 0;
+		throw error;
+	}
+	const writable = await handle.createWritable();
+	return {
+		write: async (bytes) => {
+			if (bytes.length > 0) await writable.write(bytes);
+		},
+		close: () => writable.close(),
+		abort: () => writable.abort()
+	};
+};
+//#endregion
+export { canSaveAsBuilt, createDownloadSink, exportFileName, pickFileSink };

package/dist/app/export/use-export-flow.js

@@ -0,0 +1,139 @@
+import { formatInt } from "../../format/number.js";
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { useToast } from "../../toasts/toast-provider.js";
+import { listLabels } from "../../live/relation-labels.js";
+import { runExport } from "./run-export.js";
+import { defaultExportColumns, exportColumns, exportHeaders, exportLimit, exportableFields, exportsSelection, selectionFilters } from "./export-options.js";
+import { createWorkerPort } from "./builder-port.js";
+import { ExportDialog, ExportProgressDialog, countedRows } from "./export-dialog.js";
+import { canSaveAsBuilt, createDownloadSink, exportFileName, pickFileSink } from "./sink.js";
+import { useRef, useState } from "react";
+import { isApiError } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+//#region src/app/export/use-export-flow.tsx
+const defaultSink = (name, format) => canSaveAsBuilt() ? pickFileSink(name, format) : Promise.resolve(createDownloadSink(name, format));
+const selectedKey = (model, row) => {
+	const value = row[model.primaryKey[0]];
+	return typeof value === "object" && value !== null && "id" in value ? value.id : value;
+};
+/**
+* The list's Export: `open` shows its settings, with the selected rows when there are some, and `dialogs` draws them and
+* the progress while the file is built. Rows come through the list API as the user may read them; the file is built in
+* a worker and written as it goes.
+*/
+const useExportFlow = ({ model, view, resources, views, plural, filter, orderBy, createPort = createWorkerPort, createSink = defaultSink }) => {
+	const client = useClient();
+	const toast = useToast();
+	const [stage, setStage] = useState({ kind: "closed" });
+	const abort = useRef(void 0);
+	const count = useQuery({
+		queryKey: keys.exportCount(model.name, filter),
+		enabled: stage.kind === "settings",
+		queryFn: async () => {
+			const page = await client.list(model.name, {
+				filter: filter || void 0,
+				pageSize: 1,
+				count: "exact",
+				fields: model.primaryKey
+			});
+			return page.totalSize === void 0 ? {
+				kind: "estimate",
+				rows: page.totalSizeEstimate
+			} : {
+				kind: "exact",
+				rows: page.totalSize
+			};
+		}
+	}).data ?? { kind: "counting" };
+	const open = (rows = []) => setStage({
+		kind: "settings",
+		selected: exportsSelection(model) ? rows.map((row) => selectedKey(model, row)) : []
+	});
+	const start = async (settings, selected) => {
+		const name = exportFileName(plural, settings.format);
+		const sink = await createSink(name, settings.format);
+		if (!sink) return;
+		const limit = exportLimit(view, settings.format);
+		const rows = settings.scope === "selected" ? selected.length : countedRows(count);
+		const total = rows === void 0 ? void 0 : Math.min(rows, limit);
+		const controller = new AbortController();
+		abort.current = controller;
+		setStage({
+			kind: "running",
+			done: 0,
+			total
+		});
+		try {
+			const result = await runExport({
+				client,
+				resource: model.name,
+				filters: settings.scope === "selected" ? selectionFilters(model, selected) : [filter],
+				orderBy,
+				plan: {
+					format: settings.format,
+					mode: settings.mode,
+					name: plural,
+					columns: exportColumns(model, view, settings.columns)
+				},
+				labels: settings.mode === "shown" ? listLabels(resources, views, model, settings.columns) : {},
+				limit,
+				port: createPort(),
+				sink,
+				signal: controller.signal,
+				onProgress: (done) => controller.signal.aborted || setStage({
+					kind: "running",
+					done,
+					total
+				})
+			});
+			toast.show({
+				state: "success",
+				title: `Exported ${formatInt(result.rows)} ${plural.toLowerCase()}`,
+				description: result.truncated ? `${name}: the first ${formatInt(result.rows)} rows, as many as a file holds.` : name
+			});
+		} catch (error) {
+			if (error instanceof DOMException && error.name === "AbortError") return;
+			if (!isApiError(error)) throw error;
+			toast.show({
+				state: "error",
+				title: `Could not export ${plural.toLowerCase()}`,
+				description: error.message
+			});
+		} finally {
+			abort.current = void 0;
+			setStage((current) => current.kind === "running" ? { kind: "closed" } : current);
+		}
+	};
+	const cancel = () => {
+		abort.current?.abort();
+		setStage({ kind: "closed" });
+	};
+	const fields = exportableFields(model);
+	const labels = exportHeaders(model, view, fields);
+	return {
+		open,
+		dialogs: stage.kind === "settings" ? /* @__PURE__ */ jsx(ExportDialog, {
+			plural,
+			view,
+			fields: fields.map((name) => ({
+				name,
+				label: labels[name]
+			})),
+			initialColumns: defaultExportColumns(model, view),
+			count,
+			selected: stage.selected.length > 0 ? stage.selected.length : void 0,
+			open: true,
+			onExport: (settings) => void start(settings, stage.selected),
+			onClose: () => setStage({ kind: "closed" })
+		}) : stage.kind === "running" ? /* @__PURE__ */ jsx(ExportProgressDialog, {
+			plural,
+			done: stage.done,
+			total: stage.total,
+			onCancel: cancel
+		}) : null
+	};
+};
+//#endregion
+export { useExportFlow };