@protobase/ui 0.0.0-stage → 0.1.0

package/dist/live/field-values.js

@@ -0,0 +1,32 @@
+//#region src/live/field-values.ts
+/** What the editor's text input holds for a stored value. */
+const toDraft = (value) => value === null || value === void 0 ? "" : typeof value === "object" ? JSON.stringify(value) : String(value);
+const textEdited = /* @__PURE__ */ new Set([
+	"text",
+	"integer",
+	"bigint",
+	"decimal",
+	"date",
+	"currency",
+	"country"
+]);
+const isEditable = (field) => !field.readOnly && field.type !== "json" && field.type !== "uuid" && field.type !== "file" && field.type !== "timestamp" && field.type !== "relation";
+/** The JSON value to send for an edited field: integers become numbers, empty optional fields become null. */
+const toPatchValue = (field, draft) => {
+	if (field.type === "boolean") return Boolean(draft);
+	const text = String(draft).trim();
+	if (text === "") return field.nullable ? null : "";
+	if (field.type === "integer") return Number(text);
+	if (textEdited.has(field.type) || field.type === "enum") return text;
+	throw new Error(`Not implemented: editing ${field.type} fields`);
+};
+/** Whether the draft differs from what the server holds, comparing numbers by value. */
+const differs = (field, draft, stored) => {
+	if (field.type === "boolean") return Boolean(draft) !== Boolean(stored);
+	const a = String(draft ?? "").trim();
+	const b = toDraft(stored);
+	if (field.type === "decimal" || field.type === "integer") return a === "" || b === "" ? a !== b : Number(a) !== Number(b);
+	return a !== b;
+};
+//#endregion
+export { differs, isEditable, toDraft, toPatchValue };

package/dist/live/filter-string.js

@@ -0,0 +1,135 @@
+import { createWhere, parseFilter, printFilter } from "@protobase/schema";
+//#region src/live/filter-string.ts
+const w = createWhere();
+const span = {
+	start: 0,
+	end: 0
+};
+const relative = {
+	"7d": {
+		amount: 7,
+		unit: "d"
+	},
+	"30d": {
+		amount: 30,
+		unit: "d"
+	},
+	"90d": {
+		amount: 90,
+		unit: "d"
+	}
+};
+const iso = (ms) => new Date(ms).toISOString().replace(".000Z", "Z");
+/** First instant of the period a calendar preset starts at, in UTC. */
+const periodStart = (preset, now) => {
+	const [year, month, day] = [
+		now.getUTCFullYear(),
+		now.getUTCMonth(),
+		now.getUTCDate()
+	];
+	if (preset === "year") return iso(Date.UTC(year, 0, 1));
+	if (preset === "quarter") return iso(Date.UTC(year, Math.floor(month / 3) * 3, 1));
+	if (preset === "month") return iso(Date.UTC(year, month, 1));
+	if (preset === "yesterday") return iso(Date.UTC(year, month, day - 1));
+	return iso(Date.UTC(year, month, day));
+};
+const calendarPresets = [
+	"year",
+	"quarter",
+	"month",
+	"yesterday",
+	"today"
+];
+/** Date fields take a plain date, timestamp fields an instant. */
+const instant = (value, kind) => kind === "date" ? {
+	kind: "string",
+	value: value.slice(0, 10),
+	span
+} : {
+	kind: "timestamp",
+	value,
+	span
+};
+const dateClauses = (field, preset, now, kind) => {
+	if (preset in relative) return [w.gte(field, w.ago(preset))];
+	const from = w.gte(field, instant(periodStart(preset, now), kind));
+	return preset === "yesterday" ? [from, w.lt(field, instant(periodStart("today", now), kind))] : [from];
+};
+/** The panel's state as filter clauses, in a fixed order so the text is stable. */
+const stateToClauses = (config, state, now = /* @__PURE__ */ new Date()) => {
+	const facets = config.facets.flatMap((group) => {
+		const values = state.facets[group.id] ?? [];
+		if (values.length === 0) return [];
+		return [values.length === 1 ? w.eq(group.id, values[0]) : w.in(group.id, values)];
+	});
+	const range = config.range && state.range ? [w.gte(config.range.id, state.range[0]), w.lte(config.range.id, state.range[1])] : [];
+	const date = config.dateField && state.date ? dateClauses(config.dateField, state.date, now, config.dateKind) : [];
+	const toggles = (config.toggles ?? []).filter((toggle) => state.toggles.includes(toggle.id)).map((toggle) => w.eq(toggle.id, true));
+	return [
+		...facets,
+		...range,
+		...date,
+		...toggles
+	];
+};
+const clausesToText = (clauses) => clauses.length === 0 ? "" : printFilter(w.and(...clauses));
+const stateToText = (config, state, extras = [], now = /* @__PURE__ */ new Date()) => clausesToText([...stateToClauses(config, state, now), ...extras]);
+const flatten = (expr) => expr.kind === "and" ? expr.args.flatMap(flatten) : [expr];
+const fieldName = (expr) => expr.field.path.join(".");
+const literalText = (value) => value.kind === "number" ? String(value.raw) : value.kind === "string" ? String(value.value) : void 0;
+const presetOf = (clause, now) => {
+	const v = clause.value;
+	if (v.kind === "now" && v.offset?.sign === "-") {
+		const { amount, unit } = v.offset.duration;
+		return Object.entries(relative).find(([, d]) => d.amount === amount && d.unit === unit)?.[0];
+	}
+	if (v.kind === "timestamp") return calendarPresets.find((preset) => periodStart(preset, now) === v.value);
+	if (v.kind === "string") return calendarPresets.find((preset) => periodStart(preset, now).slice(0, 10) === v.value);
+};
+/**
+* The inverse of `stateToText`: clauses that match a widget fill the panel state, everything else
+* (search text, hand-written conditions) is returned as `extras` and survives the round trip.
+*/
+const textToState = (config, text, now = /* @__PURE__ */ new Date()) => {
+	const parsed = parseFilter(text);
+	if (!parsed.ok) return {
+		ok: false,
+		errors: parsed.errors
+	};
+	const state = {
+		facets: {},
+		toggles: []
+	};
+	const extras = [];
+	const facetIds = new Set(config.facets.map((group) => group.id));
+	const toggleIds = new Set((config.toggles ?? []).map((toggle) => toggle.id));
+	const bounds = { clauses: [] };
+	let dateClause;
+	let todayEnd;
+	for (const clause of parsed.ast ? flatten(parsed.ast) : []) if (clause.kind === "compare" && facetIds.has(fieldName(clause)) && clause.op === "=" && literalText(clause.value) !== void 0) state.facets[fieldName(clause)] = [...state.facets[fieldName(clause)] ?? [], literalText(clause.value)];
+	else if (clause.kind === "in" && facetIds.has(fieldName(clause)) && clause.values.every((value) => literalText(value) !== void 0)) state.facets[fieldName(clause)] = [...state.facets[fieldName(clause)] ?? [], ...clause.values.map((value) => literalText(value))];
+	else if (clause.kind === "compare" && config.dateField === fieldName(clause) && clause.op === ">=" && presetOf(clause, now) && !state.date) {
+		state.date = presetOf(clause, now);
+		dateClause = clause;
+	} else if (clause.kind === "compare" && config.dateField === fieldName(clause) && clause.op === "<" && (clause.value.kind === "timestamp" || clause.value.kind === "string") && periodStart("today", now).startsWith(clause.value.value.slice(0, 10))) todayEnd = clause;
+	else if (clause.kind === "compare" && toggleIds.has(fieldName(clause)) && clause.op === "=" && clause.value.kind === "boolean" && clause.value.value) state.toggles.push(fieldName(clause));
+	else if (clause.kind === "compare" && config.range?.id === fieldName(clause) && (clause.op === ">=" || clause.op === "<=") && clause.value.kind === "number") {
+		if (clause.op === ">=") bounds.low = clause.value.value;
+		else bounds.high = clause.value.value;
+		bounds.clauses.push(clause);
+	} else extras.push(clause);
+	if (state.date === "yesterday" && !todayEnd) {
+		extras.push(dateClause);
+		state.date = void 0;
+	}
+	if (todayEnd && state.date !== "yesterday") extras.push(todayEnd);
+	if (bounds.low !== void 0 && bounds.high !== void 0) state.range = [bounds.low, bounds.high];
+	else extras.push(...bounds.clauses);
+	return {
+		ok: true,
+		state,
+		extras
+	};
+};
+//#endregion
+export { clausesToText, periodStart, stateToClauses, stateToText, textToState };

package/dist/live/grid-loader.js

@@ -0,0 +1,63 @@
+import { keys } from "../data/query-keys.js";
+import { recordId } from "./model-helpers.js";
+import { withLabels } from "./relation-labels.js";
+//#region src/live/grid-loader.ts
+const exactBelow = 5e3;
+/**
+* Loads fixed-size pages by number. Sequential scrolling follows `next_page_token`; a jump asks `:seek` for the
+* page at that row position. Every page is cached by TanStack Query.
+*/
+const createGridLoader = ({ queryClient, client, resources, views, model, columns, filter, orderBy }) => {
+	const tokens = /* @__PURE__ */ new Map();
+	/** The server's total is a planner estimate, off by a lot for small results; settle those exactly. */
+	const firstPageTotal = async (result) => {
+		if (result.nextPageToken === "") return result.items.length;
+		if (result.totalSizeEstimate > exactBelow) return result.totalSizeEstimate;
+		return (await client.list(model.name, {
+			filter,
+			orderBy,
+			pageSize: 1,
+			count: "exact"
+		})).totalSize ?? result.totalSizeEstimate;
+	};
+	const fetchPage = async (page) => {
+		const token = tokens.get(page);
+		const params = {
+			filter,
+			orderBy,
+			pageSize: 40
+		};
+		const result = page === 0 || token !== void 0 ? await client.list(model.name, {
+			...params,
+			pageToken: token ?? ""
+		}) : await client.seek(model.name, {
+			...params,
+			position: page * 40
+		});
+		if (result.items.length === 0 && page > 0) return {
+			rows: [],
+			total: 0
+		};
+		tokens.set(page + 1, result.nextPageToken);
+		const ids = result.items.map((record) => recordId(model, record));
+		return {
+			rows: (await withLabels(queryClient, client, resources, views, model, columns, result.items)).map((record, index) => ({
+				...record,
+				id: ids[index]
+			})),
+			total: page === 0 ? await firstPageTotal(result) : result.totalSizeEstimate
+		};
+	};
+	const page = (number) => queryClient.fetchQuery({
+		queryKey: keys.page(model.name, filter, orderBy, 40, number),
+		staleTime: 6e4,
+		queryFn: () => fetchPage(number)
+	});
+	const loadRows = async (start) => (await page(Math.floor(start / 40))).rows;
+	return {
+		page,
+		loadRows
+	};
+};
+//#endregion
+export { createGridLoader };

package/dist/live/model-helpers.js

@@ -0,0 +1,30 @@
+import { enumLabel } from "@protobase/schema";
+//#region src/live/model-helpers.ts
+const labelCandidates = [
+	"name",
+	"title",
+	"number",
+	"sku",
+	"email",
+	"code",
+	"description"
+];
+/** The field that names a record when another record points at it. */
+const labelFieldOf = (model, view) => view?.title ?? labelCandidates.find((name) => model.fields[name]?.type === "text") ?? Object.values(model.fields).find((field) => field.type === "text")?.name ?? model.primaryKey[0];
+/** What names a record: the view's `title`, else the first text column of its list, else `labelFieldOf`. */
+const recordTitleField = (model, view) => view?.title ?? view?.list?.columns.find((name) => model.fields[name]?.type === "text") ?? labelFieldOf(model);
+/** A record's name as shown: its title field's value, an enum's by its label, else `fallback` when the value is missing. */
+const recordTitle = (model, view, record, fallback) => {
+	const name = recordTitleField(model, view);
+	const value = record[name];
+	if (value === null || value === void 0) return fallback;
+	return model.fields[name]?.type === "enum" ? enumLabel(String(value), view?.fields[name]?.valueLabels) : String(value);
+};
+const recordId = (model, record) => model.primaryKey.map((name) => String(record[name])).join(",");
+/** The key as the URL carries it, for `get` and `update`. */
+const recordKey = (model, record) => {
+	const parts = model.primaryKey.map((name) => record[name]);
+	return parts.length === 1 ? parts[0] : parts;
+};
+//#endregion
+export { labelFieldOf, recordId, recordKey, recordTitle, recordTitleField };

package/dist/live/naming.js

@@ -0,0 +1,9 @@
+//#region src/live/naming.ts
+const capitalise = (text) => text.charAt(0).toUpperCase() + text.slice(1);
+/** `companyId` becomes "Company", `discountPercent` becomes "Discount percent". */
+const humanize = (name) => {
+	const words = name.replace(/(Id|Code)$/, "").replace(/([a-z0-9])([A-Z])/g, "$1 $2").toLowerCase();
+	return capitalise(words || name);
+};
+//#endregion
+export { capitalise, humanize };

package/dist/live/relation-labels.js

@@ -0,0 +1,53 @@
+import { keys } from "../data/query-keys.js";
+import { labelFieldOf } from "./model-helpers.js";
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/live/relation-labels.ts
+const where = createWhere();
+/** Names for the given keys of a single-key resource, fetched in one list call and cached. */
+const fetchLabels = async (queryClient, client, target, ids, view) => {
+	const keyField = target.primaryKey[0];
+	const unique = [...new Set(ids)].sort();
+	if (unique.length === 0 || target.primaryKey.length !== 1) return /* @__PURE__ */ new Map();
+	const labelField = labelFieldOf(target, view);
+	const entries = await queryClient.fetchQuery({
+		queryKey: keys.labels(target.name, unique.join(",")),
+		staleTime: 3e5,
+		queryFn: async () => {
+			return (await client.list(target.name, {
+				filter: printFilter(where.in(keyField, unique)),
+				fields: [keyField, labelField],
+				pageSize: unique.length
+			})).items.map((item) => [String(item[keyField]), String(item[labelField])]);
+		}
+	});
+	return new Map(entries);
+};
+/** Replaces each relation value with `{ id, name }` so grid cells can show the name. */
+const withLabels = async (queryClient, client, resources, views, model, columns, rows) => {
+	const relations = columns.flatMap((name) => {
+		const field = model.fields[name];
+		const target = field?.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
+		return target ? [{
+			name,
+			target
+		}] : [];
+	});
+	const resolved = await Promise.all(relations.map(async ({ name, target }) => {
+		const ids = rows.flatMap((row) => row[name] == null ? [] : [String(row[name])]);
+		return [name, await fetchLabels(queryClient, client, target, ids, views[target.name])];
+	}));
+	const labels = new Map(resolved);
+	return rows.map((row) => {
+		const next = { ...row };
+		for (const [name, names] of labels) {
+			if (row[name] == null) continue;
+			next[name] = {
+				id: row[name],
+				name: names.get(String(row[name])) ?? String(row[name])
+			};
+		}
+		return next;
+	});
+};
+//#endregion
+export { fetchLabels, withLabels };

package/dist/live/use-filter-config.js

@@ -0,0 +1,88 @@
+import { keys } from "../data/query-keys.js";
+import { useClient } from "../data/api-provider.js";
+import { humanize } from "./naming.js";
+import { formatMoney } from "../format/money.js";
+import { stateToText } from "./filter-string.js";
+import { useHistogram } from "../data/use-aggregates.js";
+import { fetchLabels } from "./relation-labels.js";
+import { widgetFields } from "./view-fields.js";
+import { useQueries, useQueryClient } from "@tanstack/react-query";
+import { enumLabel } from "@protobase/schema";
+//#region src/live/use-filter-config.ts
+/**
+* The panel's config for a view: facet counts come from `:facets`, each computed with every
+* other active filter applied but not its own, so choosing one value does not hide the rest.
+*/
+const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const skeleton = widgetFields(view, model);
+	const label = (name) => view?.fields[name]?.label ?? humanize(name);
+	const facetQueries = useQueries({ queries: skeleton.facets.map((group) => {
+		const filter = stateToText(skeleton, {
+			...state,
+			facets: {
+				...state.facets,
+				[group.id]: []
+			}
+		}, extras);
+		return {
+			queryKey: keys.facets(model.name, group.id, filter),
+			queryFn: () => client.facets(model.name, group.id, {
+				filter,
+				limit: 50
+			})
+		};
+	}) });
+	const labelQueries = useQueries({ queries: skeleton.facets.map((group, index) => {
+		const field = model.fields[group.id];
+		const target = field?.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
+		const ids = (facetQueries[index]?.data ?? []).map((facet) => String(facet.value));
+		return {
+			queryKey: keys.labels(`facet:${model.name}.${group.id}`, ids.join(",")),
+			enabled: Boolean(target) && ids.length > 0,
+			queryFn: async () => [...await fetchLabels(queryClient, client, target, ids, views[target.name])]
+		};
+	}) });
+	const rangeFilter = stateToText({
+		...skeleton,
+		range: void 0
+	}, state, extras);
+	const histogram = useHistogram(model.name, skeleton.range?.id ?? "", rangeFilter, 24, Boolean(skeleton.range));
+	const prefix = skeleton.range ? view?.fields[skeleton.range.id]?.prefix : void 0;
+	return {
+		facets: skeleton.facets.map((group, index) => {
+			const field = model.fields[group.id];
+			const names = new Map(labelQueries[index]?.data ?? []);
+			return {
+				...group,
+				label: label(group.id),
+				options: (facetQueries[index]?.data ?? []).flatMap((facet) => facet.value === null ? [] : [{
+					value: String(facet.value),
+					label: field?.type === "enum" ? enumLabel(String(facet.value), view?.fields[group.id]?.valueLabels) : names.get(String(facet.value)) ?? String(facet.value),
+					count: facet.count
+				}])
+			};
+		}),
+		...skeleton.range && histogram.data && histogram.data.min !== null && histogram.data.max !== null && { range: {
+			...skeleton.range,
+			label: label(skeleton.range.id),
+			min: Math.floor(histogram.data.min),
+			max: Math.ceil(histogram.data.max),
+			step: Math.max(1, Math.round((histogram.data.max - histogram.data.min) / 100)),
+			histogram: histogram.data.buckets.map((bucket) => bucket.count),
+			format: (value) => prefix === "€" ? formatMoney(value * 100).replace(".00", "") : String(value)
+		} },
+		...skeleton.dateField && {
+			datePresets: skeleton.datePresets ?? true,
+			dateField: skeleton.dateField,
+			dateKind: skeleton.dateKind
+		},
+		toggles: skeleton.toggles?.map((toggle) => ({
+			...toggle,
+			label: label(toggle.id)
+		}))
+	};
+};
+//#endregion
+export { useFilterConfig };

package/dist/live/use-live-rows.js

@@ -0,0 +1,45 @@
+import { keys } from "../data/query-keys.js";
+import { useClient } from "../data/api-provider.js";
+import { createGridLoader } from "./grid-loader.js";
+import { useMemo } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+//#region src/live/use-live-rows.ts
+/** A grid row source backed by the API; `total` is the server's estimate from the first page. */
+const useLiveRows = ({ resources, views, model, columns, filter, orderBy }) => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const columnKey = columns.join(",");
+	const loader = useMemo(() => createGridLoader({
+		queryClient,
+		client,
+		resources,
+		views,
+		model,
+		columns,
+		filter,
+		orderBy
+	}), [
+		queryClient,
+		client,
+		resources,
+		views,
+		model,
+		columnKey,
+		filter,
+		orderBy
+	]);
+	const first = useQuery({
+		queryKey: [...keys.first(model.name, filter, orderBy), columnKey],
+		queryFn: () => loader.page(0)
+	});
+	return {
+		source: useMemo(() => first.data ? {
+			total: first.data.total,
+			loadRows: loader.loadRows
+		} : void 0, [first.data, loader]),
+		error: first.error,
+		isLoading: first.isLoading
+	};
+};
+//#endregion
+export { useLiveRows };

package/dist/live/view-fields.js

@@ -0,0 +1,35 @@
+//#region src/live/view-fields.ts
+/** The widgets of a view in the shape `filter-string` talks to; options and counts are filled in later. */
+const widgetFields = (view, model) => {
+	const widgets = view?.filters ?? [];
+	const range = widgets.find((widget) => widget.kind === "range");
+	const date = widgets.find((widget) => widget.kind === "dateRange");
+	return {
+		facets: widgets.flatMap((widget) => widget.kind === "facets" ? [{
+			id: widget.field,
+			label: widget.field,
+			options: [],
+			searchable: widget.search
+		}] : []),
+		...range && { range: {
+			id: range.field,
+			label: range.field,
+			min: 0,
+			max: 0,
+			step: 1,
+			histogram: [],
+			format: String
+		} },
+		...date && {
+			dateField: date.field,
+			dateKind: model?.fields[date.field]?.type === "date" ? "date" : "timestamp",
+			...date.presets.length > 0 && { datePresets: date.presets }
+		},
+		toggles: widgets.flatMap((widget) => widget.kind === "toggle" ? [{
+			id: widget.field,
+			label: widget.field
+		}] : [])
+	};
+};
+//#endregion
+export { widgetFields };

package/dist/mocks/activity.js

@@ -0,0 +1,24 @@
+import { mockNow, rngAt } from "./rng.js";
+//#region src/mocks/activity.ts
+const dayMs = 864e5;
+const dailyCounts = (days) => Array.from({ length: days }, (_, offset) => {
+	const at = mockNow - (days - 1 - offset) * dayMs;
+	const weekday = new Date(at).getUTCDay();
+	return {
+		at,
+		count: Math.round((weekday === 0 || weekday === 6 ? 120 : 410) * (.8 + rngAt(71, offset)() * .45) * (1 + offset / days / 3))
+	};
+});
+const activitySeries = (granularity) => {
+	if (granularity === "day") return dailyCounts(30);
+	const daily = dailyCounts(84);
+	return Array.from({ length: 12 }, (_, week) => {
+		const chunk = daily.slice(week * 7, week * 7 + 7);
+		return {
+			at: chunk[0].at,
+			count: chunk.reduce((sum, day) => sum + day.count, 0)
+		};
+	});
+};
+//#endregion
+export { activitySeries };

package/dist/mocks/invoices.js

@@ -0,0 +1,13 @@
+//#region src/mocks/invoices.ts
+const lineTotalCents = (line) => line.quantity * line.unitPriceCents;
+const invoiceTotals = (lines, vatRate = .21) => {
+	const subtotalCents = lines.reduce((sum, line) => sum + lineTotalCents(line), 0);
+	const vatCents = Math.round(subtotalCents * vatRate);
+	return {
+		subtotalCents,
+		vatCents,
+		totalCents: subtotalCents + vatCents
+	};
+};
+//#endregion
+export { invoiceTotals, lineTotalCents };