@protobase/ui 0.21.6 → 0.21.7

package/dist/auth/auth-layout.d.ts

@@ -3,8 +3,10 @@ import { ReactNode } from "react";
 export type AuthLayoutProps = {
   title: string;
   description?: string;
+  /** How wide the card is: `sm`, the default, for a few short inputs; `md` for a form with longer ones. */
+  size?: 'sm' | 'md';
   children: ReactNode;
 };
-/** The frame of the sign-in and first-run pages: logo, title and a card. */
-export declare const AuthLayout: ({ title, description, children }: AuthLayoutProps) => import("react").JSX.Element;
+/** The frame of the sign-in and first-run pages and of public forms: logo, title and a card. */
+export declare const AuthLayout: ({ title, description, size, children }: AuthLayoutProps) => import("react").JSX.Element;
 //#endregion

package/dist/auth/auth-layout.js

@@ -1,11 +1,12 @@
+import { cn } from "../lib/cn.js";
 import { LogoMark } from "../app-shell/logo.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/auth-layout.tsx
-/** The frame of the sign-in and first-run pages: logo, title and a card. */
-const AuthLayout = ({ title, description, children }) => /* @__PURE__ */ jsx("div", {
+/** The frame of the sign-in and first-run pages and of public forms: logo, title and a card. */
+const AuthLayout = ({ title, description, size = "sm", children }) => /* @__PURE__ */ jsx("div", {
 	className: "flex min-h-full w-full items-center justify-center bg-surface px-4 py-10",
 	children: /* @__PURE__ */ jsxs("div", {
-		className: "w-full max-w-sm",
+		className: cn("w-full", size === "sm" ? "max-w-sm" : "max-w-lg"),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "mb-6 flex flex-col items-center text-center",
 			children: [

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

@@ -43,6 +43,9 @@ export declare const useClient: () => {
   }) => Promise<import("@protobase/client").MetaResult>;
   invoke: <T = unknown>(name: string, { method, body, path, query, headers }?: import("@protobase/client").InvokeOptions) => Promise<T>;
   upload: (resource: import("@protobase/client").ResourceRef, field: string, file: Blob, { onProgress, signal }?: import("@protobase/client").UploadOptions) => Promise<import("@protobase/client").UploadResult>;
+  form: (name: string) => Promise<import("@protobase/client").PublicForm>;
+  formChallenge: (name: string) => Promise<import("@protobase/client").FormChallenge>;
+  submitForm: (name: string, values: Record<string, unknown>, proof: import("@protobase/client").FormProof) => Promise<void>;
 };
 /**
  * The client of the API that serves `resource`: a source's for a resource the app draws from one, the app's own
@@ -88,6 +91,9 @@ export declare const useResourceClient: (resource: string) => {
   }) => Promise<import("@protobase/client").MetaResult>;
   invoke: <T = unknown>(name: string, { method, body, path, query, headers }?: import("@protobase/client").InvokeOptions) => Promise<T>;
   upload: (resource: import("@protobase/client").ResourceRef, field: string, file: Blob, { onProgress, signal }?: import("@protobase/client").UploadOptions) => Promise<import("@protobase/client").UploadResult>;
+  form: (name: string) => Promise<import("@protobase/client").PublicForm>;
+  formChallenge: (name: string) => Promise<import("@protobase/client").FormChallenge>;
+  submitForm: (name: string, values: Record<string, unknown>, proof: import("@protobase/client").FormProof) => Promise<void>;
 };
 export type ApiProviderProps = {
   /** Defaults to `/api/v1` on the current origin. */

package/dist/data/query-keys.js

@@ -134,7 +134,9 @@ const keys = {
 		resource,
 		key,
 		path
-	]
+	],
+	/** A public form, as `/-/forms/<name>` draws it. */
+	publicForm: (name) => ["public-form", name]
 };
 //#endregion
 export { keys };

package/dist/forms/prove-human.js

@@ -0,0 +1,24 @@
+import { solveChallenge } from "altcha-lib";
+import { deriveKey } from "altcha-lib/algorithms/web/sha";
+//#region src/forms/prove-human.ts
+/**
+* The bot check of a public form, done: fetches a fresh challenge and solves it in this browser, about a second of its
+* work, so a check never expires while someone types.
+*/
+const proveHuman = async (client, name) => {
+	const challenge = await client.formChallenge(name);
+	const solution = await solveChallenge({
+		challenge,
+		deriveKey
+	});
+	if (!solution) throw new Error("The check that you are not a bot took too long; send the form again");
+	return {
+		challenge,
+		solution: {
+			counter: solution.counter,
+			derivedKey: solution.derivedKey
+		}
+	};
+};
+//#endregion
+export { proveHuman };

package/dist/forms/public-form-page.js

@@ -0,0 +1,142 @@
+import { Spinner } from "../primitives/spinner.js";
+import { Button } from "../primitives/button.js";
+import { keys } from "../data/query-keys.js";
+import { useClient } from "../data/api-provider.js";
+import { AuthLayout } from "../auth/auth-layout.js";
+import { humanize } from "../live/naming.js";
+import { Field } from "../record-view/field.js";
+import { createBody, hasDatabaseDefault, initialDraft, isRequired } from "../app/create/create-values.js";
+import { useDocumentTitle } from "../app/document-title.js";
+import { ErrorBanner } from "../app/error-banner.js";
+import { Notice } from "../app/meta-gate.js";
+import { FieldEditor } from "../app/field-editor.js";
+import { fieldErrors, fieldMessage } from "../app/field-errors.js";
+import { useFocusFirstInvalid } from "../app/use-focus-first-invalid.js";
+import { proveHuman } from "./prove-human.js";
+import { useState } from "react";
+import { isApiError } from "@protobase/client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+//#region src/forms/public-form-page.tsx
+/**
+* `/-/forms/<name>`: a public form, for anyone, signed in or not. It sends with a bot check its browser solves, and
+* then shows the form's thanks in its place.
+*/
+const PublicFormPage = ({ name }) => {
+	const client = useClient();
+	const form = useQuery({
+		queryKey: keys.publicForm(name),
+		queryFn: () => client.form(name)
+	});
+	if (form.isPending) return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full min-h-48 items-center justify-center gap-2 text-muted-foreground",
+		children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
+	});
+	if (form.error) {
+		if (isApiError(form.error) && form.error.status === 404) return /* @__PURE__ */ jsx(Notice, {
+			title: "Not found",
+			children: "There is no form at this address."
+		});
+		return /* @__PURE__ */ jsx(Notice, {
+			title: "Cannot reach the API",
+			children: isApiError(form.error) ? form.error.message : "The server did not answer. Is it running?"
+		});
+	}
+	return /* @__PURE__ */ jsx(LoadedForm, { form: form.data });
+};
+const LoadedForm = ({ form }) => {
+	const client = useClient();
+	const { resource: model, view } = form;
+	const title = form.title ?? view.names?.singular ?? humanize(view.resource);
+	useDocumentTitle(title);
+	const [draft, setDraft] = useState(() => initialDraft(model, [{
+		title,
+		fields: form.fields
+	}]));
+	const [errors, setErrors] = useState({});
+	const [failure, setFailure] = useState();
+	const [sending, setSending] = useState(false);
+	const [sent, setSent] = useState(false);
+	const [rejections, setRejections] = useState(0);
+	const formRef = useFocusFirstInvalid(rejections);
+	if (sent) return /* @__PURE__ */ jsx(AuthLayout, {
+		title,
+		size: "md",
+		children: /* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: "rounded-md bg-success-soft px-3 py-2 text-xs font-medium text-success-text",
+			children: form.thanks
+		})
+	});
+	const change = (name, value) => {
+		setErrors((current) => Object.fromEntries(Object.entries(current).filter(([field]) => field !== name)));
+		setDraft((current) => ({
+			...current,
+			[name]: value
+		}));
+	};
+	const send = async () => {
+		setSending(true);
+		setFailure(void 0);
+		try {
+			await client.submitForm(form.name, createBody(model, {}, draft), await proveHuman(client, form.name));
+			setSent(true);
+		} catch (error) {
+			const found = fieldErrors(error);
+			setErrors(found);
+			if (Object.keys(found).length > 0) setRejections((count) => count + 1);
+			else setFailure(error);
+		} finally {
+			setSending(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(AuthLayout, {
+		title,
+		size: "md",
+		children: /* @__PURE__ */ jsxs("form", {
+			ref: formRef,
+			className: "flex flex-col gap-4",
+			onSubmit: (event) => {
+				event.preventDefault();
+				send();
+			},
+			children: [
+				form.fields.map((name) => {
+					const field = model.fields[name];
+					const hints = view.fields[name];
+					const label = hints?.label ?? humanize(name);
+					const problem = errors[name];
+					return /* @__PURE__ */ jsx(Field, {
+						name,
+						label,
+						help: hints?.help,
+						required: isRequired(field),
+						error: problem && fieldMessage(field, label, problem),
+						children: /* @__PURE__ */ jsx(FieldEditor, {
+							field,
+							hints,
+							value: draft[name] ?? (field.type === "boolean" ? false : ""),
+							stored: void 0,
+							placeholder: hasDatabaseDefault(field) ? "Set by the database" : void 0,
+							invalid: Boolean(problem),
+							onChange: (next) => change(name, next)
+						})
+					}, name);
+				}),
+				failure !== void 0 && /* @__PURE__ */ jsx(ErrorBanner, {
+					title: "Not sent",
+					error: failure
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					type: "submit",
+					loading: sending,
+					className: "min-h-10",
+					children: "Send"
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { PublicFormPage };

package/dist/forms/use-form-address.js

@@ -0,0 +1,11 @@
+import { useRouter } from "../app/router.js";
+import { useMemo } from "react";
+import { readFormAddress } from "@protobase/schema";
+//#region src/forms/use-form-address.ts
+/** The public form the address shows, `/-/forms/<name>`, as logical values; `undefined` on any other page. */
+const useFormAddress = () => {
+	const { path } = useRouter();
+	return useMemo(() => readFormAddress(path), [path]);
+};
+//#endregion
+export { useFormAddress };

package/dist/index.js

@@ -16,6 +16,13 @@ import { usePlugin } from "./plugins/plugin-context.js";
 import { pluginApi, protobaseVersion } from "./plugins/plugin-api.js";
 import { useApiToken } from "./auth/use-api-token.js";
 import { useRecord } from "./data/use-record.js";
+import { Field } from "./record-view/field.js";
+import { Section } from "./record-view/section.js";
+import { Textarea } from "./primitives/textarea.js";
+import { useMeta } from "./data/use-meta.js";
+import { AppLink, useAppAddress } from "./app/use-app-address.js";
+import { useList } from "./data/use-list.js";
+import { definePlugin, defineUi } from "./app/pages/project-ui.js";
 import { ChatMessage } from "./chat/chat-message.js";
 import { ChatThread } from "./chat/chat-thread.js";
 import { Composer } from "./chat/composer.js";
@@ -26,19 +33,12 @@ import { CompactTable } from "./compact-table/compact-table.js";
 import { diffStats, parseDiff } from "./diff-view/diff.js";
 import { DiffView } from "./diff-view/diff-view.js";
 import { StepList } from "./step-list/step-list.js";
-import { definePlugin, defineUi } from "./app/pages/project-ui.js";
 import { PartView } from "./assistant-dock/part-view.js";
 import { useBackendData } from "./assistant-dock/use-backend-data.js";
 import { AssistantDock } from "./assistant-dock/assistant-dock.js";
 import { useAssistant } from "./assistant-dock/use-assistant.js";
 import { useAssistantClient } from "./assistant-dock/use-assistant-client.js";
-import { useMeta } from "./data/use-meta.js";
 import { ResponsiveDialog } from "./primitives/responsive-dialog.js";
-import { Field } from "./record-view/field.js";
-import { Section } from "./record-view/section.js";
-import { Textarea } from "./primitives/textarea.js";
-import { AppLink, useAppAddress } from "./app/use-app-address.js";
-import { useList } from "./data/use-list.js";
 import { ActionInputError } from "./app/pages/action-inputs/input-errors.js";
 import { useLayoutRecord } from "./app/pages/record-scope.js";
 import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";

package/dist/live/columns-from-model.js

@@ -1,8 +1,8 @@
-import { recordTitleField } from "./model-helpers.js";
 import { humanize } from "./naming.js";
 import { badgeWidth, headerWidth } from "../data-grid/content-widths.js";
 import { markdownExcerpt } from "../markdown/markdown-excerpt.js";
 import { isMarkdown } from "../markdown/markdown-hint.js";
+import { recordTitleField } from "./model-helpers.js";
 import { enumLabel } from "@protobase/schema";
 //#region src/live/columns-from-model.ts
 const tones = {

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

@@ -1,7 +1,7 @@
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
-import { labelFieldOf } from "./model-helpers.js";
 import { humanize } from "./naming.js";
+import { labelFieldOf } from "./model-helpers.js";
 import { fetchLabels } from "./relation-labels.js";
 import { setRange } from "../filter-panel/filter-state.js";
 import { stateToText } from "./filter-string.js";

package/dist/package.js

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

package/dist/plugins/plugin-gate.js

@@ -2,8 +2,8 @@ import { Spinner } from "../primitives/spinner.js";
 import { mergePlugins } from "./merge-plugins.js";
 import { usePluginSource } from "./plugin-source.js";
 import { usePluginLoads } from "./use-plugin-loads.js";
-import { ProjectUiContext } from "../app/pages/project-ui.js";
 import { useAdminMeta } from "../app/meta-gate.js";
+import { ProjectUiContext } from "../app/pages/project-ui.js";
 import { createContext, useContext, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/plugins/plugin-gate.tsx