@btst/stack 3.0.0-rc.2 → 3.0.0-rc.4

package/src/plugins/form-builder/api/query-key-defs.ts

@@ -75,6 +75,13 @@ export const FORM_QUERY_KEYS = {
 	 */
 	formById: (id: string) => ["forms", "byId", "byId", id] as const,
 
+	/**
+	 * Key for forms.forUpdate(id) query.
+	 * Full key: ["forms", "forUpdate", "forUpdate", id]
+	 */
+	formForUpdate: (id: string) =>
+		["forms", "forUpdate", "forUpdate", id] as const,
+
 	/**
 	 * Key for formSubmissions.list(params) query.
 	 * Full key: ["formSubmissions", "list", { formId, limit, offset }]

package/src/plugins/form-builder/api/serializers.ts

@@ -8,5 +8,6 @@
 export {
 	serializeForm,
 	serializeFormSubmission,
+	serializeFormSubmissionSummary,
 	serializeFormSubmissionWithData,
 } from "./getters";

package/src/plugins/form-builder/client/components/forms/form-renderer.tsx

@@ -1,7 +1,11 @@
 "use client";
 
 import { useState, useMemo, type ComponentType } from "react";
-import { usePluginOverrides, useTranslate } from "@btst/stack/context";
+import {
+	PermissionAccess,
+	usePluginOverrides,
+	useTranslate,
+} from "@btst/stack/context";
 import { SteppedAutoForm } from "@workspace/ui/components/auto-form/stepped-auto-form";
 import { buildFieldConfigFromJsonSchema } from "@workspace/ui/components/auto-form/helpers";
 import { formSchemaToZod } from "@workspace/ui/lib/schema-converter";
@@ -12,6 +16,8 @@ import type { AutoFormInputComponentProps } from "@workspace/ui/components/auto-
 import { useFormBySlug, useSubmitForm } from "../../hooks/form-builder-hooks";
 import type { FormBuilderPluginOverrides } from "../../overrides";
 import type { SerializedFormSubmission } from "../../../types";
+import { formBuilderPermissions } from "../../../permissions";
+import { FORM_BUILDER_PLUGIN_ID } from "../../constants";
 
 export interface FormRendererProps {
 	/** Form slug to render */
@@ -51,8 +57,9 @@ function DefaultLoadingComponent() {
 
 function DefaultErrorComponent({ error }: { error: Error }) {
 	const t = useTranslate();
-	const { localization } =
-		usePluginOverrides<FormBuilderPluginOverrides>("form-builder");
+	const { localization } = usePluginOverrides<FormBuilderPluginOverrides>(
+		FORM_BUILDER_PLUGIN_ID,
+	);
 
 	return (
 		<div className="flex flex-col items-center justify-center py-8 text-center">
@@ -77,8 +84,9 @@ function DefaultErrorComponent({ error }: { error: Error }) {
 
 function DefaultSuccessComponent({ message }: { message: React.ReactNode }) {
 	const t = useTranslate();
-	const { localization } =
-		usePluginOverrides<FormBuilderPluginOverrides>("form-builder");
+	const { localization } = usePluginOverrides<FormBuilderPluginOverrides>(
+		FORM_BUILDER_PLUGIN_ID,
+	);
 
 	return (
 		<div className="flex flex-col items-center justify-center py-8 text-center">
@@ -125,7 +133,7 @@ export function FormRenderer({
 }: FormRendererProps) {
 	const t = useTranslate();
 	const { fieldComponents: overrideFieldComponents, localization } =
-		usePluginOverrides<FormBuilderPluginOverrides>("form-builder");
+		usePluginOverrides<FormBuilderPluginOverrides>(FORM_BUILDER_PLUGIN_ID);
 
 	const { form, isLoading, error } = useFormBySlug(slug);
 	const submitMutation = useSubmitForm(slug);
@@ -274,18 +282,40 @@ export function FormRenderer({
 	// Render form using SteppedAutoForm
 	// It automatically handles both single-step and multi-step forms
 	return (
-		<div className={className} data-testid="form-renderer">
-			<SteppedAutoForm
-				formSchema={zodSchema}
-				fieldConfig={fieldConfig}
-				onSubmit={(values) => handleSubmit(values as Record<string, unknown>)}
-				isSubmitting={submitMutation.isPending}
-				submitButtonText={
-					submitButtonText ||
-					(localization?.FORM_BUILDER_BUTTON_SUBMIT ??
-						t("formBuilder.common.buttonSubmit", "Submit"))
-				}
-			/>
-		</div>
+		<PermissionAccess
+			permission={formBuilderPermissions.form.render({
+				slug: form.slug,
+				exists: true,
+				formId: form.id,
+				...(form.createdBy ? { ownerId: form.createdBy } : {}),
+				status: form.status,
+			})}
+		>
+			<PermissionAccess
+				permission={formBuilderPermissions.submission.create({
+					slug: form.slug,
+					exists: true,
+					formId: form.id,
+					...(form.createdBy ? { ownerId: form.createdBy } : {}),
+					status: form.status,
+				})}
+			>
+				<div className={className} data-testid="form-renderer">
+					<SteppedAutoForm
+						formSchema={zodSchema}
+						fieldConfig={fieldConfig}
+						onSubmit={(values) =>
+							handleSubmit(values as Record<string, unknown>)
+						}
+						isSubmitting={submitMutation.isPending}
+						submitButtonText={
+							submitButtonText ||
+							(localization?.FORM_BUILDER_BUTTON_SUBMIT ??
+								t("formBuilder.common.buttonSubmit", "Submit"))
+						}
+					/>
+				</div>
+			</PermissionAccess>
+		</PermissionAccess>
 	);
 }

package/src/plugins/form-builder/client/components/pages/404-page.tsx

@@ -3,20 +3,20 @@
 import { Button } from "@workspace/ui/components/button";
 import {
 	usePluginOverrides,
-	useBasePath,
-	useStack,
+	usePluginSiteNavigation,
 	useTranslate,
 } from "@btst/stack/context";
 import type { FormBuilderPluginOverrides } from "../../overrides";
+import { FORM_BUILDER_PLUGIN_ID } from "../../constants";
 
 export function NotFoundPage() {
 	const t = useTranslate();
-	const { localization } =
-		usePluginOverrides<FormBuilderPluginOverrides>("form-builder");
-	const { router } = useStack();
-	const basePath = useBasePath();
-
-	const LinkComponent = router?.Link ?? "a";
+	const { localization } = usePluginOverrides<FormBuilderPluginOverrides>(
+		FORM_BUILDER_PLUGIN_ID,
+	);
+	const { Link: LinkComponent, resolve } = usePluginSiteNavigation(
+		FORM_BUILDER_PLUGIN_ID,
+	);
 
 	return (
 		<div className="flex flex-col items-center justify-center py-12 px-4 text-center">
@@ -33,7 +33,7 @@ export function NotFoundPage() {
 					)}
 			</p>
 			<Button asChild>
-				<LinkComponent href={`${basePath}/forms`}>
+				<LinkComponent href={resolve("forms").href}>
 					{localization?.FORM_BUILDER_404_BACK ??
 						t("formBuilder.common.404Back", "Back to Forms")}
 				</LinkComponent>

package/src/plugins/form-builder/client/components/pages/form-builder-page.internal.tsx

@@ -3,9 +3,9 @@
 import { useState, useEffect, useCallback } from "react";
 import {
 	useNotify,
+	PermissionAccess,
 	usePluginOverrides,
-	useBasePath,
-	useStack,
+	usePluginSiteNavigation,
 	useTranslate,
 } from "@btst/stack/context";
 import { Button } from "@workspace/ui/components/button";
@@ -22,10 +22,13 @@ import { ArrowLeft, Save } from "lucide-react";
 import { FormBuilder } from "@workspace/ui/components/form-builder";
 import type { JSONSchema } from "@workspace/ui/components/form-builder/types";
 
-import { useSuspenseFormById, useFormBuilderForm } from "../../hooks";
+import { useSuspenseFormForUpdate, useFormBuilderForm } from "../../hooks";
 import type { FormBuilderPluginOverrides } from "../../overrides";
 import { slugify } from "../../../utils";
 import type { SerializedForm } from "../../../types";
+import { formBuilderPermissions } from "../../../permissions";
+import { NotFoundPage } from "./404-page";
+import { FORM_BUILDER_PLUGIN_ID } from "../../constants";
 
 export interface FormBuilderPageProps {
 	id?: string;
@@ -45,10 +48,11 @@ export function FormBuilderPage({ id }: FormBuilderPageProps) {
 
 /**
  * Component for editing an existing form.
- * Uses useSuspenseFormById unconditionally since id is always defined.
+ * Uses the update-authorized editor query unconditionally since id is defined.
  */
 function EditFormBuilderPage({ id }: { id: string }) {
-	const { form: existingForm } = useSuspenseFormById(id);
+	const { form: existingForm } = useSuspenseFormForUpdate(id);
+	if (!existingForm) return <NotFoundPage />;
 	return <FormBuilderPageContent id={id} existingForm={existingForm} />;
 }
 
@@ -78,18 +82,20 @@ function FormBuilderPageContent({
 }: FormBuilderPageContentProps) {
 	const t = useTranslate();
 	const notify = useNotify();
-	const { localization } =
-		usePluginOverrides<FormBuilderPluginOverrides>("form-builder");
-	const { router } = useStack();
-	const basePath = useBasePath();
-
-	const LinkComponent = router?.Link ?? "a";
+	const { localization } = usePluginOverrides<FormBuilderPluginOverrides>(
+		FORM_BUILDER_PLUGIN_ID,
+	);
+	const {
+		Link: LinkComponent,
+		navigate,
+		resolve,
+	} = usePluginSiteNavigation(FORM_BUILDER_PLUGIN_ID);
 
 	// Form state
 	const [name, setName] = useState(existingForm?.name || "");
 	const [slug, setSlug] = useState(existingForm?.slug || "");
 	const [status, setStatus] = useState<"active" | "inactive" | "archived">(
-		(existingForm?.status as "active" | "inactive" | "archived") || "active",
+		existingForm?.status || "active",
 	);
 	const [schema, setSchema] = useState<JSONSchema | undefined>(() => {
 		if (existingForm?.schema) {
@@ -148,10 +154,9 @@ function FormBuilderPageContent({
 				status: values.status,
 			},
 		}),
-		redirect: (result, action) =>
-			action === "create" && result
-				? `${basePath}/forms/${result.id}/edit`
-				: false,
+		onSuccess: (result) => {
+			if (!id && result) return navigate("forms", result.id, "edit");
+		},
 	});
 
 	const handleSave = async () => {
@@ -196,13 +201,28 @@ function FormBuilderPageContent({
 		if (!error) return undefined;
 		return Array.isArray(error) ? error[0] : error;
 	};
+	const saveButton = (
+		<div className="ml-auto">
+			<Button onClick={handleSave} disabled={isSaving}>
+				<Save className="mr-2 h-4 w-4" />
+				{isSaving
+					? (localization?.FORM_BUILDER_STATUS_SAVING ??
+						t("formBuilder.common.statusSaving", "Saving..."))
+					: id
+						? (localization?.FORM_BUILDER_BUTTON_SAVE ??
+							t("formBuilder.common.buttonSave", "Save"))
+						: (localization?.FORM_BUILDER_BUTTON_CREATE ??
+							t("formBuilder.common.buttonCreate", "Create"))}
+			</Button>
+		</div>
+	);
 
 	return (
 		<div className="flex h-full flex-col" data-testid="form-builder-page">
 			{/* Header */}
 			<div className="flex items-center gap-4 border-b p-4">
 				<Button variant="ghost" size="icon" asChild>
-					<LinkComponent href={`${basePath}/forms`}>
+					<LinkComponent href={resolve("forms").href}>
 						<ArrowLeft className="h-4 w-4" />
 					</LinkComponent>
 				</Button>
@@ -283,19 +303,23 @@ function FormBuilderPageContent({
 					</Select>
 				</div>
 
-				<div className="ml-auto">
-					<Button onClick={handleSave} disabled={isSaving}>
-						<Save className="mr-2 h-4 w-4" />
-						{isSaving
-							? (localization?.FORM_BUILDER_STATUS_SAVING ??
-								t("formBuilder.common.statusSaving", "Saving..."))
-							: id
-								? (localization?.FORM_BUILDER_BUTTON_SAVE ??
-									t("formBuilder.common.buttonSave", "Save"))
-								: (localization?.FORM_BUILDER_BUTTON_CREATE ??
-									t("formBuilder.common.buttonCreate", "Create"))}
-					</Button>
-				</div>
+				{id && existingForm ? (
+					<PermissionAccess
+						permission={formBuilderPermissions.form.update({
+							formId: existingForm.id,
+							...(existingForm.createdBy
+								? { ownerId: existingForm.createdBy }
+								: {}),
+							status: existingForm.status,
+						})}
+					>
+						{saveButton}
+					</PermissionAccess>
+				) : !id ? (
+					<PermissionAccess permission={formBuilderPermissions.form.create()}>
+						{saveButton}
+					</PermissionAccess>
+				) : null}
 			</div>
 
 			{/* Form Builder */}

package/src/plugins/form-builder/client/components/pages/form-builder-page.tsx

@@ -3,10 +3,16 @@
 import { lazy } from "react";
 import { usePluginOverrides } from "@btst/stack/context";
 import type { FormBuilderPluginOverrides } from "../../overrides";
-import { ComposedRoute } from "@btst/stack/client/components";
+import {
+	ComposedRoute,
+	PermissionRouteAccess,
+} from "@btst/stack/client/components";
 import { DefaultError } from "../shared/default-error";
 import { FormBuilderSkeleton } from "../loading/form-builder-skeleton";
 import { NotFoundPage } from "./404-page";
+import { formBuilderPermissions } from "../../../permissions";
+import { FORM_BUILDER_PLUGIN_ID } from "../../constants";
+import { useSuspenseFormForUpdate } from "../../hooks";
 
 const FormBuilderPage = lazy(() =>
 	import("./form-builder-page.internal").then((m) => ({
@@ -19,8 +25,9 @@ export interface FormBuilderPageProps {
 }
 
 export function FormBuilderPageComponent({ id }: FormBuilderPageProps) {
-	const { onRouteError } =
-		usePluginOverrides<FormBuilderPluginOverrides>("form-builder");
+	const { onRouteError } = usePluginOverrides<FormBuilderPluginOverrides>(
+		FORM_BUILDER_PLUGIN_ID,
+	);
 
 	const isNew = !id;
 	const path = isNew ? "/forms/new" : `/forms/${id}/edit`;
@@ -28,15 +35,10 @@ export function FormBuilderPageComponent({ id }: FormBuilderPageProps) {
 	return (
 		<ComposedRoute
 			path={path}
-			PageComponent={FormBuilderPage}
+			PageComponent={AuthorizedFormBuilderPage}
 			ErrorComponent={DefaultError}
 			LoadingComponent={FormBuilderSkeleton}
 			NotFoundComponent={NotFoundPage}
-			permission={
-				isNew
-					? { resource: "form-builder:form", action: "create" }
-					: { resource: "form-builder:form", action: "update", params: { id } }
-			}
 			props={{ id }}
 			onError={(error) => {
 				if (onRouteError) {
@@ -50,3 +52,34 @@ export function FormBuilderPageComponent({ id }: FormBuilderPageProps) {
 		/>
 	);
 }
+
+function AuthorizedFormBuilderPage({ id }: FormBuilderPageProps) {
+	if (!id) {
+		return (
+			<PermissionRouteAccess
+				permission={formBuilderPermissions.form.create()}
+				LoadingComponent={FormBuilderSkeleton}
+			>
+				<FormBuilderPage />
+			</PermissionRouteAccess>
+		);
+	}
+	return <AuthorizedExistingFormBuilderPage id={id} />;
+}
+
+function AuthorizedExistingFormBuilderPage({ id }: { id: string }) {
+	const { form } = useSuspenseFormForUpdate(id);
+	if (!form) return <NotFoundPage />;
+	return (
+		<PermissionRouteAccess
+			permission={formBuilderPermissions.form.update({
+				formId: form.id,
+				...(form.createdBy ? { ownerId: form.createdBy } : {}),
+				status: form.status,
+			})}
+			LoadingComponent={FormBuilderSkeleton}
+		>
+			<FormBuilderPage id={id} />
+		</PermissionRouteAccess>
+	);
+}

package/src/plugins/form-builder/client/components/pages/form-list-page.internal.tsx

@@ -2,14 +2,13 @@
 
 import { useEffect, useRef, useState } from "react";
 import {
-	CanAccess,
 	useNotify,
+	PermissionAccess,
 	usePluginOverrides,
-	useBasePath,
-	useStack,
+	usePluginSiteNavigation,
 	useTranslate,
 } from "@btst/stack/context";
-import { useListState, type ListStateSchema } from "@btst/stack/client";
+import { useListState, type ListStateSchema } from "@btst/stack/client/hooks";
 import { Button } from "@workspace/ui/components/button";
 import { Input } from "@workspace/ui/components/input";
 import {
@@ -51,6 +50,8 @@ import type { FormBuilderPluginOverrides } from "../../overrides";
 import { PageWrapper } from "../shared/page-wrapper";
 import { EmptyState } from "../shared/empty-state";
 import { Pagination } from "../shared/pagination";
+import { formBuilderPermissions } from "../../../permissions";
+import { FORM_BUILDER_PLUGIN_ID } from "../../constants";
 
 // URL-synced search state: `?q=...` while typing (history: replace), clean
 // URL when the query is empty (the default is omitted from the URL).
@@ -63,12 +64,12 @@ const SEARCH_DEBOUNCE_MS = 300;
 export function FormListPage() {
 	const t = useTranslate();
 	const notify = useNotify();
-	const { localization } =
-		usePluginOverrides<FormBuilderPluginOverrides>("form-builder");
-	const { router } = useStack();
-	const navigate = router?.navigate;
-	const Link = router?.Link;
-	const basePath = useBasePath();
+	const { localization } = usePluginOverrides<FormBuilderPluginOverrides>(
+		FORM_BUILDER_PLUGIN_ID,
+	);
+	const { Link, navigate, resolve } = usePluginSiteNavigation(
+		FORM_BUILDER_PLUGIN_ID,
+	);
 
 	const [{ q: search }, setListState] = useListState(
 		"form-builder-forms",
@@ -154,15 +155,15 @@ export function FormListPage() {
 	};
 
 	const newFormButton = (
-		<CanAccess resource="form-builder:form" action="create">
+		<PermissionAccess permission={formBuilderPermissions.form.create()}>
 			<Button asChild>
-				<LinkComponent href={`${basePath}/forms/new`}>
+				<LinkComponent href={resolve("forms", "new").href}>
 					<Plus className="mr-2 h-4 w-4" />
 					{localization?.FORM_BUILDER_BUTTON_NEW_FORM ??
 						t("formBuilder.common.buttonNewForm", "New Form")}
 				</LinkComponent>
 			</Button>
-		</CanAccess>
+		</PermissionAccess>
 	);
 
 	return (
@@ -284,33 +285,40 @@ export function FormListPage() {
 														</Button>
 													</DropdownMenuTrigger>
 													<DropdownMenuContent align="end">
-														<CanAccess
-															resource="form-builder:form"
-															action="update"
-															params={{ id: form.id }}
+														<PermissionAccess
+															permission={formBuilderPermissions.form.update({
+																formId: form.id,
+																...(form.createdBy
+																	? { ownerId: form.createdBy }
+																	: {}),
+																status: form.status,
+															})}
 														>
 															<DropdownMenuItem
 																onClick={() =>
-																	navigate?.(
-																		`${basePath}/forms/${form.id}/edit`,
-																	)
+																	navigate("forms", form.id, "edit")
 																}
 															>
 																<Pencil className="mr-2 h-4 w-4" />
 																{localization?.FORM_BUILDER_LIST_ACTION_EDIT ??
 																	t("formBuilder.list.actionEdit", "Edit")}
 															</DropdownMenuItem>
-														</CanAccess>
-														<CanAccess
-															resource="form-builder:submission"
-															action="read"
-															params={{ formId: form.id }}
+														</PermissionAccess>
+														<PermissionAccess
+															permission={formBuilderPermissions.submission.read(
+																{
+																	scope: "collection",
+																	formId: form.id,
+																	formExists: true,
+																	...(form.createdBy
+																		? { ownerId: form.createdBy }
+																		: {}),
+																},
+															)}
 														>
 															<DropdownMenuItem
 																onClick={() =>
-																	navigate?.(
-																		`${basePath}/forms/${form.id}/submissions`,
-																	)
+																	navigate("forms", form.id, "submissions")
 																}
 															>
 																<FileText className="mr-2 h-4 w-4" />
@@ -320,11 +328,15 @@ export function FormListPage() {
 																		"Submissions",
 																	)}
 															</DropdownMenuItem>
-														</CanAccess>
-														<CanAccess
-															resource="form-builder:form"
-															action="delete"
-															params={{ id: form.id }}
+														</PermissionAccess>
+														<PermissionAccess
+															permission={formBuilderPermissions.form.delete({
+																formId: form.id,
+																...(form.createdBy
+																	? { ownerId: form.createdBy }
+																	: {}),
+																status: form.status,
+															})}
 														>
 															<DropdownMenuItem
 																className="text-destructive"
@@ -334,7 +346,7 @@ export function FormListPage() {
 																{localization?.FORM_BUILDER_LIST_ACTION_DELETE ??
 																	t("formBuilder.list.actionDelete", "Delete")}
 															</DropdownMenuItem>
-														</CanAccess>
+														</PermissionAccess>
 													</DropdownMenuContent>
 												</DropdownMenu>
 											</TableCell>

package/src/plugins/form-builder/client/components/pages/form-list-page.tsx

@@ -7,6 +7,8 @@ import { ComposedRoute } from "@btst/stack/client/components";
 import { DefaultError } from "../shared/default-error";
 import { FormListSkeleton } from "../loading/form-list-skeleton";
 import { NotFoundPage } from "./404-page";
+import { formBuilderPermissions } from "../../../permissions";
+import { FORM_BUILDER_PLUGIN_ID } from "../../constants";
 
 const FormListPage = lazy(() =>
 	import("./form-list-page.internal").then((m) => ({
@@ -15,12 +17,14 @@ const FormListPage = lazy(() =>
 );
 
 export function FormListPageComponent() {
-	const { onRouteError } =
-		usePluginOverrides<FormBuilderPluginOverrides>("form-builder");
+	const { onRouteError } = usePluginOverrides<FormBuilderPluginOverrides>(
+		FORM_BUILDER_PLUGIN_ID,
+	);
 
 	return (
 		<ComposedRoute
 			path="/forms"
+			permission={formBuilderPermissions.form.read({ scope: "collection" })}
 			PageComponent={FormListPage}
 			ErrorComponent={DefaultError}
 			LoadingComponent={FormListSkeleton}