@btst/stack 2.12.2 → 3.0.0-rc.2

package/src/plugins/ui-builder/__tests__/client-sweep.test.tsx

@@ -0,0 +1,333 @@
+// @vitest-environment jsdom
+import { QueryClient } from "@tanstack/react-query";
+import { act, type ReactNode } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+	StackProvider,
+	type StackAuthProvider,
+	type StackI18nProvider,
+} from "@btst/stack/context";
+import { createApiClient } from "@btst/stack/plugins/client";
+import type { CMSApiRouter } from "../../cms/api";
+import { createCMSQueryKeys } from "../../cms/query-keys";
+import { PageBuilderPage } from "../client/components/pages/page-builder-page.internal";
+import { PageListPage } from "../client/components/pages/page-list-page.internal";
+import { createUIBuilderQueryKeys } from "../query-keys";
+import { UI_BUILDER_TYPE_SLUG } from "../schemas";
+import type { SerializedUIBuilderPage } from "../types";
+
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+const hooks = vi.hoisted(() => ({
+	useSuspenseUIBuilderPages: vi.fn(),
+	useDeleteUIBuilderPage: vi.fn(),
+	useSuspenseUIBuilderPage: vi.fn(),
+	useUIBuilderPageForm: vi.fn(),
+}));
+
+vi.mock("../client/hooks/ui-builder-hooks", () => hooks);
+vi.mock("@btst/stack/plugins/ai-chat/client/context", () => ({
+	useRegisterPageAIContext: vi.fn(),
+}));
+vi.mock("@workspace/ui/lib/ui-builder/store/layer-store", () => ({
+	useLayerStore: { getState: vi.fn() },
+}));
+vi.mock("@workspace/ui/components/ui-builder", () => ({
+	default: ({
+		navLeftChildren,
+		navRightChildren,
+		onChange,
+	}: {
+		navLeftChildren?: ReactNode;
+		navRightChildren?: ReactNode;
+		onChange?: (layers: unknown[]) => void;
+	}) => (
+		<div data-testid="upstream-ui-builder">
+			{navLeftChildren}
+			{navRightChildren}
+			<button
+				type="button"
+				onClick={() =>
+					onChange?.([
+						{
+							id: "root",
+							type: "div",
+							name: "Home Page",
+							props: {},
+							children: [],
+						},
+					])
+				}
+			>
+				Add layer
+			</button>
+		</div>
+	),
+}));
+
+const page: SerializedUIBuilderPage = {
+	id: "page-1",
+	contentTypeId: "type-1",
+	slug: "home",
+	data: JSON.stringify({
+		layers: "[]",
+		variables: "[]",
+		status: "draft",
+	}),
+	createdAt: new Date("2024-01-01").toISOString(),
+	updatedAt: new Date("2024-01-02").toISOString(),
+	parsedData: { layers: "[]", variables: "[]", status: "draft" },
+};
+
+let container: HTMLDivElement;
+let root: Root;
+let queryClient: QueryClient;
+
+beforeEach(() => {
+	container = document.createElement("div");
+	document.body.appendChild(container);
+	root = createRoot(container);
+	queryClient = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
+
+	hooks.useSuspenseUIBuilderPages.mockReturnValue({
+		pages: [page],
+		total: 1,
+		loadMore: vi.fn(),
+		hasMore: false,
+		isLoadingMore: false,
+		refetch: vi.fn(),
+	});
+	hooks.useDeleteUIBuilderPage.mockReturnValue({
+		mutateAsync: vi.fn().mockResolvedValue({ success: true }),
+		isPending: false,
+	});
+	hooks.useSuspenseUIBuilderPage.mockReturnValue({ page, refetch: vi.fn() });
+	hooks.useUIBuilderPageForm.mockReturnValue({
+		action: "create",
+		record: null,
+		isLoadingRecord: false,
+		recordError: null,
+		defaultValues: undefined,
+		submit: vi.fn().mockResolvedValue(page),
+		isSubmitting: false,
+		error: null,
+		fieldErrors: {},
+		clearErrors: vi.fn(),
+	});
+});
+
+afterEach(async () => {
+	await act(async () => root.unmount());
+	container.remove();
+	document.body.innerHTML = "";
+	queryClient.clear();
+	vi.clearAllMocks();
+});
+
+function createMockRouter() {
+	return {
+		navigate: vi.fn(),
+		getSearchParams: () => new URLSearchParams(),
+		setSearchParams: vi.fn(),
+	};
+}
+
+function overrides() {
+	return {
+		queryClient,
+		componentRegistry: {},
+	};
+}
+
+async function renderPage(
+	pageNode: ReactNode,
+	options: {
+		auth?: StackAuthProvider;
+		i18n?: StackI18nProvider;
+		notify?: {
+			success: ReturnType<typeof vi.fn>;
+			error: ReturnType<typeof vi.fn>;
+		};
+		localization?: Record<string, unknown>;
+	} = {},
+) {
+	await act(async () => {
+		root.render(
+			<StackProvider
+				basePath="/pages"
+				api={{ baseURL: "http://test.local", basePath: "/api/data" }}
+				router={createMockRouter()}
+				overrides={{
+					"ui-builder": { ...overrides(), localization: options.localization },
+				}}
+				auth={options.auth}
+				i18n={options.i18n}
+				notify={options.notify}
+			>
+				{pageNode}
+			</StackProvider>,
+		);
+	});
+}
+
+function buttonWithText(text: string) {
+	return Array.from(
+		document.querySelectorAll<HTMLButtonElement>("button"),
+	).find((button) => button.textContent?.includes(text));
+}
+
+describe("UI Builder query keys", () => {
+	it("matches the underlying CMS keys used by SSR and CMS consumers", () => {
+		const client = createApiClient<CMSApiRouter>({
+			baseURL: "http://test.local",
+			basePath: "/api/data",
+		});
+		const uiBuilderQueries = createUIBuilderQueryKeys(client);
+		const cmsQueries = createCMSQueryKeys(client);
+
+		expect(
+			uiBuilderQueries.cmsContent.list({ limit: 10, offset: 0 }).queryKey,
+		).toEqual(
+			cmsQueries.cmsContent.list({
+				typeSlug: UI_BUILDER_TYPE_SLUG,
+				limit: 10,
+				offset: 0,
+			}).queryKey,
+		);
+		expect(uiBuilderQueries.cmsContent.detail(page.id).queryKey).toEqual(
+			cmsQueries.cmsContent.detail(UI_BUILDER_TYPE_SLUG, page.id).queryKey,
+		);
+	});
+});
+
+describe("UI Builder page permissions", () => {
+	it("keeps create controls visible without an auth provider", async () => {
+		await renderPage(<PageListPage />);
+		expect(document.body.textContent).toContain("Create Page");
+	});
+
+	it("hides writes when the auth provider only grants read", async () => {
+		const can = vi.fn(
+			({ action }: { resource: string; action: string }) => action === "read",
+		);
+		await renderPage(<PageListPage />, {
+			auth: { getIdentity: () => ({ id: "viewer" }), can },
+		});
+
+		expect(document.body.textContent).not.toContain("Create Page");
+		expect(can).toHaveBeenCalledWith(
+			expect.objectContaining({
+				resource: "ui-builder:page",
+				action: "create",
+			}),
+		);
+	});
+});
+
+describe("UI Builder notifications and localization", () => {
+	it("sends delete success through the notify provider", async () => {
+		const notify = { success: vi.fn(), error: vi.fn() };
+		await renderPage(<PageListPage />, { notify });
+
+		const actionsTrigger =
+			container.querySelector<HTMLButtonElement>("tbody button")!;
+		await act(async () => {
+			actionsTrigger.dispatchEvent(
+				new MouseEvent("pointerdown", { bubbles: true, button: 0 }),
+			);
+		});
+		const deleteItem = Array.from(
+			document.querySelectorAll<HTMLElement>("[role=menuitem]"),
+		).find((item) => item.textContent?.includes("Delete"));
+		await act(async () => deleteItem?.click());
+		const deleteButtons = Array.from(
+			document.querySelectorAll<HTMLButtonElement>("button"),
+		).filter((button) => button.textContent === "Delete");
+		await act(async () => deleteButtons.at(-1)?.click());
+
+		expect(
+			hooks.useDeleteUIBuilderPage.mock.results[0]!.value.mutateAsync,
+		).toHaveBeenCalledWith(page.id);
+		expect(notify.success).toHaveBeenCalledWith("Page deleted successfully");
+		expect(notify.error).not.toHaveBeenCalled();
+	});
+
+	it("routes copy through i18n and lets localization overrides win", async () => {
+		hooks.useSuspenseUIBuilderPages.mockReturnValue({
+			pages: [],
+			total: 0,
+			loadMore: vi.fn(),
+			hasMore: false,
+			isLoadingMore: false,
+			refetch: vi.fn(),
+		});
+		const translate = vi.fn((key: string, fallback: string) =>
+			key === "uiBuilder.pageList.emptyState.title"
+				? "Noch keine Seiten"
+				: fallback,
+		);
+
+		await renderPage(<PageListPage />, { i18n: { translate } });
+		expect(document.body.textContent).toContain("Noch keine Seiten");
+
+		await act(async () => root.unmount());
+		root = createRoot(container);
+		await renderPage(<PageListPage />, {
+			i18n: { translate },
+			localization: { pageList: { emptyState: { title: "Custom empty" } } },
+		});
+		expect(document.body.textContent).toContain("Custom empty");
+	});
+});
+
+describe("UI Builder editor resource form", () => {
+	it("uses the notify provider for local validation", async () => {
+		const notify = { success: vi.fn(), error: vi.fn() };
+		await renderPage(<PageBuilderPage />, { notify });
+
+		await act(async () => buttonWithText("Save")?.click());
+
+		expect(notify.error).toHaveBeenCalledWith("Slug is required");
+		expect(
+			hooks.useUIBuilderPageForm.mock.results[0]!.value.submit,
+		).not.toHaveBeenCalled();
+	});
+
+	it("submits editor state through the resource form", async () => {
+		await renderPage(<PageBuilderPage />);
+		await act(async () => buttonWithText("Add layer")?.click());
+		await act(async () => buttonWithText("Save")?.click());
+
+		expect(
+			hooks.useUIBuilderPageForm.mock.results.at(-1)!.value.submit,
+		).toHaveBeenCalledWith(
+			expect.objectContaining({
+				slug: "home-page",
+				status: "draft",
+				layers: [expect.objectContaining({ id: "root" })],
+			}),
+		);
+	});
+
+	it("renders server slug errors inline", async () => {
+		hooks.useUIBuilderPageForm.mockReturnValue({
+			action: "create",
+			record: null,
+			isLoadingRecord: false,
+			recordError: null,
+			defaultValues: undefined,
+			submit: vi.fn(),
+			isSubmitting: false,
+			error: new Error("Validation failed"),
+			fieldErrors: { slug: "Slug is invalid" },
+			clearErrors: vi.fn(),
+		});
+
+		await renderPage(<PageBuilderPage />);
+		expect(document.body.textContent).toContain("Slug is invalid");
+		expect(container.querySelector("input[aria-invalid=true]")).toBeTruthy();
+	});
+});

package/src/plugins/ui-builder/client/components/page-renderer.tsx

@@ -3,6 +3,7 @@
 import type { ComponentType, ReactNode } from "react";
 import { Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
+import { usePluginOverrides, useTranslate } from "@btst/stack/context";
 import LayerRenderer from "@workspace/ui/components/ui-builder/layer-renderer";
 import type {
 	ComponentRegistry,
@@ -12,15 +13,23 @@ import type {
 import { useSuspenseUIBuilderPageBySlug } from "../hooks/ui-builder-hooks";
 import { defaultComponentRegistry } from "../registry";
 import { uiBuilderLocalization } from "../localization";
+import type { UIBuilderPluginOverrides } from "../overrides";
 
 /**
  * Default loading component for PageRenderer
  */
 function DefaultLoadingComponent(): ReactNode {
+	const t = useTranslate();
+	const { localization } =
+		usePluginOverrides<UIBuilderPluginOverrides>("ui-builder");
 	return (
 		<div className="flex items-center justify-center min-h-[200px]">
 			<div className="animate-pulse text-muted-foreground">
-				{uiBuilderLocalization.pageRenderer.loading}
+				{localization?.pageRenderer?.loading ??
+					t(
+						"uiBuilder.pageRenderer.loading",
+						uiBuilderLocalization.pageRenderer.loading,
+					)}
 			</div>
 		</div>
 	);
@@ -30,10 +39,17 @@ function DefaultLoadingComponent(): ReactNode {
  * Default error component for PageRenderer
  */
 function DefaultErrorComponent({ error }: { error: unknown }): ReactNode {
+	const t = useTranslate();
+	const { localization } =
+		usePluginOverrides<UIBuilderPluginOverrides>("ui-builder");
 	return (
 		<div className="flex flex-col items-center justify-center min-h-[200px] p-4">
 			<div className="text-destructive font-medium">
-				{uiBuilderLocalization.pageRenderer.error}
+				{localization?.pageRenderer?.error ??
+					t(
+						"uiBuilder.pageRenderer.error",
+						uiBuilderLocalization.pageRenderer.error,
+					)}
 			</div>
 			<div className="text-sm text-muted-foreground mt-2">
 				{error instanceof Error ? error.message : String(error)}
@@ -46,10 +62,17 @@ function DefaultErrorComponent({ error }: { error: unknown }): ReactNode {
  * Default not found component for PageRenderer
  */
 function DefaultNotFoundComponent(): ReactNode {
+	const t = useTranslate();
+	const { localization } =
+		usePluginOverrides<UIBuilderPluginOverrides>("ui-builder");
 	return (
 		<div className="flex items-center justify-center min-h-[200px]">
 			<div className="text-muted-foreground">
-				{uiBuilderLocalization.pageRenderer.notFound}
+				{localization?.pageRenderer?.notFound ??
+					t(
+						"uiBuilder.pageRenderer.notFound",
+						uiBuilderLocalization.pageRenderer.notFound,
+					)}
 			</div>
 		</div>
 	);

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

@@ -1,7 +1,13 @@
 "use client";
 
 import { useState, useCallback } from "react";
-import { usePluginOverrides, useBasePath } from "@btst/stack/context";
+import {
+	useBasePath,
+	useNotify,
+	usePluginOverrides,
+	useStack,
+	useTranslate,
+} from "@btst/stack/context";
 import { Button } from "@workspace/ui/components/button";
 import { Input } from "@workspace/ui/components/input";
 import {
@@ -18,7 +24,6 @@ import {
 } from "@workspace/ui/components/popover";
 import { Label } from "@workspace/ui/components/label";
 import { ArrowLeft, Save, Settings2 } from "lucide-react";
-import { toast } from "sonner";
 import UIBuilder from "@workspace/ui/components/ui-builder";
 import type {
 	ComponentLayer,
@@ -30,8 +35,7 @@ import { useLayerStore } from "@workspace/ui/lib/ui-builder/store/layer-store";
 import { useRegisterPageAIContext } from "@btst/stack/plugins/ai-chat/client/context";
 import {
 	useSuspenseUIBuilderPage,
-	useCreateUIBuilderPage,
-	useUpdateUIBuilderPage,
+	useUIBuilderPageForm,
 } from "../../hooks/ui-builder-hooks";
 import type { UIBuilderPluginOverrides } from "../../overrides";
 import { uiBuilderLocalization } from "../../localization";
@@ -186,6 +190,13 @@ interface PageBuilderPageContentProps {
 	existingPage?: SerializedUIBuilderPage | null;
 }
 
+interface PageBuilderFormValues {
+	slug: string;
+	layers: ComponentLayer[];
+	variables: Variable[];
+	status: "published" | "draft" | "archived";
+}
+
 /**
  * Parse JSON strings safely
  */
@@ -211,20 +222,93 @@ function PageBuilderPageContent({
 	id,
 	existingPage,
 }: PageBuilderPageContentProps) {
+	const t = useTranslate();
+	const notify = useNotify();
 	const {
-		navigate,
-		Link,
 		componentRegistry: customRegistry,
 		functionRegistry,
+		localization,
 	} = usePluginOverrides<UIBuilderPluginOverrides>("ui-builder");
+	const { router } = useStack();
 	const basePath = useBasePath();
-
-	const createMutation = useCreateUIBuilderPage();
-	const updateMutation = useUpdateUIBuilderPage();
-
-	const loc = uiBuilderLocalization;
-	const LinkComponent = Link || "a";
+	const LinkComponent = router?.Link ?? "a";
 	const componentRegistry = customRegistry || defaultComponentRegistry;
+	const localized = (
+		override: string | undefined,
+		key: string,
+		fallback: string,
+	) => override ?? t(key, fallback);
+	const savedMessage = localized(
+		localization?.pageBuilder?.saved,
+		"uiBuilder.pageBuilder.saved",
+		uiBuilderLocalization.pageBuilder.saved,
+	);
+	const saveErrorMessage = localized(
+		localization?.pageBuilder?.saveError,
+		"uiBuilder.pageBuilder.saveError",
+		uiBuilderLocalization.pageBuilder.saveError,
+	);
+	const duplicateSlugMessage = localized(
+		localization?.pageBuilder?.duplicateSlug,
+		"uiBuilder.pageBuilder.duplicateSlug",
+		uiBuilderLocalization.pageBuilder.duplicateSlug,
+	);
+	const loc = {
+		pageBuilder: {
+			slugLabel: localized(
+				localization?.pageBuilder?.slugLabel,
+				"uiBuilder.pageBuilder.slugLabel",
+				uiBuilderLocalization.pageBuilder.slugLabel,
+			),
+			slugPlaceholder: localized(
+				localization?.pageBuilder?.slugPlaceholder,
+				"uiBuilder.pageBuilder.slugPlaceholder",
+				uiBuilderLocalization.pageBuilder.slugPlaceholder,
+			),
+			statusLabel: localized(
+				localization?.pageBuilder?.statusLabel,
+				"uiBuilder.pageBuilder.statusLabel",
+				uiBuilderLocalization.pageBuilder.statusLabel,
+			),
+			settingsTitle: localized(
+				localization?.pageBuilder?.settingsTitle,
+				"uiBuilder.pageBuilder.settingsTitle",
+				uiBuilderLocalization.pageBuilder.settingsTitle,
+			),
+			settingsDescription: localized(
+				localization?.pageBuilder?.settingsDescription,
+				"uiBuilder.pageBuilder.settingsDescription",
+				uiBuilderLocalization.pageBuilder.settingsDescription,
+			),
+			save: localized(
+				localization?.pageBuilder?.save,
+				"uiBuilder.pageBuilder.save",
+				uiBuilderLocalization.pageBuilder.save,
+			),
+			saving: localized(
+				localization?.pageBuilder?.saving,
+				"uiBuilder.pageBuilder.saving",
+				uiBuilderLocalization.pageBuilder.saving,
+			),
+			statusOptions: {
+				draft: localized(
+					localization?.pageBuilder?.statusOptions?.draft,
+					"uiBuilder.pageBuilder.statusOptions.draft",
+					uiBuilderLocalization.pageBuilder.statusOptions.draft,
+				),
+				published: localized(
+					localization?.pageBuilder?.statusOptions?.published,
+					"uiBuilder.pageBuilder.statusOptions.published",
+					uiBuilderLocalization.pageBuilder.statusOptions.published,
+				),
+				archived: localized(
+					localization?.pageBuilder?.statusOptions?.archived,
+					"uiBuilder.pageBuilder.statusOptions.archived",
+					uiBuilderLocalization.pageBuilder.statusOptions.archived,
+				),
+			},
+		},
+	};
 
 	// Parse existing page data
 	const existingLayers = parseLayers(existingPage?.parsedData?.layers);
@@ -237,6 +321,27 @@ function PageBuilderPageContent({
 	);
 	const [layers, setLayers] = useState<ComponentLayer[]>(existingLayers);
 	const [variables, setVariables] = useState<Variable[]>(existingVariables);
+	const pageForm = useUIBuilderPageForm<PageBuilderFormValues>({
+		action: id ? "edit" : "create",
+		id,
+		record: existingPage,
+		toCreateVars: (values) => values,
+		toUpdateVars: (values) => ({
+			id: id!,
+			data: {
+				layers: values.layers,
+				variables: values.variables,
+				status: values.status,
+			},
+		}),
+		successMessage: savedMessage,
+		errorMessage: (error) =>
+			error.message.includes("slug already exists")
+				? duplicateSlugMessage
+				: saveErrorMessage,
+		redirect: (page, action) =>
+			action === "create" ? `${basePath}/ui-builder/${page.id}/edit` : false,
+	});
 
 	// Auto-generate slug from first page name
 	const [autoSlug, setAutoSlug] = useState(!id);
@@ -292,52 +397,46 @@ function PageBuilderPageContent({
 
 	const handleSave = async () => {
 		if (!slug.trim()) {
-			toast.error(loc.pageBuilder.validation.slugRequired);
+			notify.error(
+				localized(
+					localization?.pageBuilder?.validation?.slugRequired,
+					"uiBuilder.pageBuilder.validation.slugRequired",
+					uiBuilderLocalization.pageBuilder.validation.slugRequired,
+				),
+			);
 			return;
 		}
 
 		if (!/^[a-z0-9-]+$/.test(slug)) {
-			toast.error(loc.pageBuilder.validation.slugFormat);
+			notify.error(
+				localized(
+					localization?.pageBuilder?.validation?.slugFormat,
+					"uiBuilder.pageBuilder.validation.slugFormat",
+					uiBuilderLocalization.pageBuilder.validation.slugFormat,
+				),
+			);
 			return;
 		}
 
 		if (layers.length === 0) {
-			toast.error(loc.pageBuilder.validation.layersRequired);
+			notify.error(
+				localized(
+					localization?.pageBuilder?.validation?.layersRequired,
+					"uiBuilder.pageBuilder.validation.layersRequired",
+					uiBuilderLocalization.pageBuilder.validation.layersRequired,
+				),
+			);
 			return;
 		}
 
-		try {
-			if (id) {
-				await updateMutation.mutateAsync({
-					id,
-					data: {
-						layers,
-						variables,
-						status,
-					},
-				});
-				toast.success(loc.pageBuilder.saved);
-			} else {
-				const newPage = await createMutation.mutateAsync({
-					slug,
-					layers,
-					variables,
-					status,
-				});
-				toast.success(loc.pageBuilder.saved);
-				navigate?.(`${basePath}/ui-builder/${newPage.id}/edit`);
-			}
-		} catch (error) {
-			const message = error instanceof Error ? error.message : "Unknown error";
-			if (message.includes("slug already exists")) {
-				toast.error("A page with this slug already exists");
-			} else {
-				toast.error(loc.pageBuilder.saveError);
-			}
-		}
+		await pageForm.submit({ slug, layers, variables, status });
 	};
 
-	const isSaving = createMutation.isPending || updateMutation.isPending;
+	const isSaving = pageForm.isSubmitting;
+	const slugFieldError = pageForm.fieldErrors.slug;
+	const slugErrorMessage = Array.isArray(slugFieldError)
+		? slugFieldError[0]
+		: slugFieldError;
 
 	// Shared form fields - used in both mobile popover and desktop inline
 	const pageSettingsFields = (isMobile: boolean) => (
@@ -356,13 +455,20 @@ function PageBuilderPageContent({
 					onChange={(e) => {
 						setSlug(e.target.value);
 						setAutoSlug(false);
+						pageForm.clearErrors();
 					}}
 					placeholder={loc.pageBuilder.slugPlaceholder}
 					className={
 						isMobile ? "h-9 font-mono text-sm" : "h-8 w-48 font-mono text-sm"
 					}
 					disabled={!!id}
+					aria-invalid={!!slugErrorMessage}
 				/>
+				{slugErrorMessage && (
+					<p className="text-xs text-destructive" role="alert">
+						{slugErrorMessage}
+					</p>
+				)}
 			</div>
 
 			<div className={isMobile ? "flex flex-col gap-2" : ""}>
@@ -417,9 +523,11 @@ function PageBuilderPageContent({
 					<PopoverContent className="z-[9999] w-72" align="start">
 						<div className="grid gap-4">
 							<div className="space-y-2">
-								<h4 className="font-medium leading-none">Page Settings</h4>
+								<h4 className="font-medium leading-none">
+									{loc.pageBuilder.settingsTitle}
+								</h4>
 								<p className="text-sm text-muted-foreground">
-									Configure page slug and status
+									{loc.pageBuilder.settingsDescription}
 								</p>
 							</div>
 							{pageSettingsFields(true)}