@btst/stack 2.12.2 → 3.0.0-rc.1

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

@@ -1,9 +1,11 @@
 "use client";
 
-import { lazy, Suspense } from "react";
+import { lazy } from "react";
+import { ComposedRoute } from "@btst/stack/client/components";
+import { usePluginOverrides } from "@btst/stack/context";
 import { PageBuilderSkeleton } from "../loading/page-builder-skeleton";
-import { ErrorBoundary } from "react-error-boundary";
 import { DefaultError } from "../shared/default-error";
+import type { UIBuilderPluginOverrides } from "../../overrides";
 
 const PageBuilderPageInternal = lazy(() =>
 	import("./page-builder-page.internal").then((m) => ({
@@ -16,11 +18,30 @@ export interface PageBuilderPageProps {
 }
 
 export function PageBuilderPage({ id }: PageBuilderPageProps) {
+	const { onRouteError } =
+		usePluginOverrides<UIBuilderPluginOverrides>("ui-builder");
+	const path = id ? `/ui-builder/${id}/edit` : "/ui-builder/new";
+
 	return (
-		<ErrorBoundary FallbackComponent={DefaultError}>
-			<Suspense fallback={<PageBuilderSkeleton />}>
-				<PageBuilderPageInternal id={id} />
-			</Suspense>
-		</ErrorBoundary>
+		<ComposedRoute
+			path={path}
+			permission={
+				id
+					? { resource: "ui-builder:page", action: "update", params: { id } }
+					: { resource: "ui-builder:page", action: "create" }
+			}
+			PageComponent={PageBuilderPageInternal}
+			ErrorComponent={DefaultError}
+			LoadingComponent={PageBuilderSkeleton}
+			NotFoundComponent={() => null}
+			props={{ id }}
+			onError={(error) => {
+				onRouteError?.("pageBuilder", error, {
+					path,
+					params: id ? { id } : {},
+					isSSR: typeof window === "undefined",
+				});
+			}}
+		/>
 	);
 }

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

@@ -1,7 +1,14 @@
 "use client";
 
 import { useState } from "react";
-import { usePluginOverrides, useBasePath } from "@btst/stack/context";
+import {
+	CanAccess,
+	useBasePath,
+	useNotify,
+	usePluginOverrides,
+	useStack,
+	useTranslate,
+} from "@btst/stack/context";
 import { Button } from "@workspace/ui/components/button";
 import {
 	Table,
@@ -28,7 +35,6 @@ import {
 	AlertDialogTitle,
 } from "@workspace/ui/components/alert-dialog";
 import { MoreHorizontal, Plus, Pencil, Trash2 } from "lucide-react";
-import { toast } from "sonner";
 
 import {
 	useSuspenseUIBuilderPages,
@@ -41,29 +47,44 @@ import { EmptyState } from "../shared/empty-state";
 import { Pagination } from "../shared/pagination";
 
 export function PageListPage() {
-	const { navigate, Link } =
+	const t = useTranslate();
+	const notify = useNotify();
+	const { localization } =
 		usePluginOverrides<UIBuilderPluginOverrides>("ui-builder");
+	const { router } = useStack();
+	const navigate = router?.navigate;
 	const basePath = useBasePath();
-	const { pages, total, hasMore, isLoadingMore, loadMore, refetch } =
+	const { pages, total, hasMore, isLoadingMore, loadMore } =
 		useSuspenseUIBuilderPages();
 	const deleteMutation = useDeleteUIBuilderPage();
 
 	const [deleteId, setDeleteId] = useState<string | null>(null);
 
-	const loc = uiBuilderLocalization;
-	const LinkComponent = Link || "a";
+	const LinkComponent = router?.Link ?? "a";
 
 	const handleDelete = async () => {
 		if (!deleteId) return;
 
 		try {
 			await deleteMutation.mutateAsync(deleteId);
-			toast.success("Page deleted successfully");
-			setDeleteId(null);
-			await refetch();
 		} catch {
-			toast.error("Failed to delete page");
+			notify.error(
+				localization?.pageList?.deleteError ??
+					t(
+						"uiBuilder.pageList.deleteError",
+						uiBuilderLocalization.pageList.deleteError,
+					),
+			);
+			return;
 		}
+		notify.success(
+			localization?.pageList?.deleteSuccess ??
+				t(
+					"uiBuilder.pageList.deleteSuccess",
+					uiBuilderLocalization.pageList.deleteSuccess,
+				),
+		);
+		setDeleteId(null);
 	};
 
 	const getStatusBadge = (status: string) => {
@@ -78,41 +99,74 @@ export function PageListPage() {
 			<span
 				className={`px-2 py-1 rounded-full text-xs font-medium ${colors[status] || colors.draft}`}
 			>
-				{loc.pageBuilder.statusOptions[
-					status as keyof typeof loc.pageBuilder.statusOptions
-				] || status}
+				{localization?.pageBuilder?.statusOptions?.[
+					status as keyof typeof uiBuilderLocalization.pageBuilder.statusOptions
+				] ??
+					t(
+						`uiBuilder.pageBuilder.statusOptions.${status}`,
+						uiBuilderLocalization.pageBuilder.statusOptions[
+							status as keyof typeof uiBuilderLocalization.pageBuilder.statusOptions
+						] ?? status,
+					)}
 			</span>
 		);
 	};
 
+	const createButton = (
+		<CanAccess resource="ui-builder:page" action="create">
+			<Button asChild>
+				<LinkComponent href={`${basePath}/ui-builder/new`}>
+					<Plus data-icon="inline-start" />
+					{localization?.pageList?.createButton ??
+						t(
+							"uiBuilder.pageList.createButton",
+							uiBuilderLocalization.pageList.createButton,
+						)}
+				</LinkComponent>
+			</Button>
+		</CanAccess>
+	);
+
 	return (
 		<PageWrapper testId="page-list-page">
-			<div className="w-full max-w-5xl space-y-6">
+			<div className="flex w-full max-w-5xl flex-col gap-6">
 				<div className="flex items-center justify-between">
 					<div>
-						<h1 className="text-2xl font-bold">{loc.pageList.title}</h1>
-						<p className="text-muted-foreground">{loc.pageList.description}</p>
+						<h1 className="text-2xl font-bold">
+							{localization?.pageList?.title ??
+								t(
+									"uiBuilder.pageList.title",
+									uiBuilderLocalization.pageList.title,
+								)}
+						</h1>
+						<p className="text-muted-foreground">
+							{localization?.pageList?.description ??
+								t(
+									"uiBuilder.pageList.description",
+									uiBuilderLocalization.pageList.description,
+								)}
+						</p>
 					</div>
-					<Button asChild>
-						<LinkComponent href={`${basePath}/ui-builder/new`}>
-							<Plus className="mr-2 h-4 w-4" />
-							{loc.pageList.createButton}
-						</LinkComponent>
-					</Button>
+					{createButton}
 				</div>
 
 				{pages.length === 0 ? (
 					<EmptyState
-						title={loc.pageList.emptyState.title}
-						description={loc.pageList.emptyState.description}
-						action={
-							<Button asChild>
-								<LinkComponent href={`${basePath}/ui-builder/new`}>
-									<Plus className="mr-2 h-4 w-4" />
-									{loc.pageList.createButton}
-								</LinkComponent>
-							</Button>
+						title={
+							localization?.pageList?.emptyState?.title ??
+							t(
+								"uiBuilder.pageList.emptyState.title",
+								uiBuilderLocalization.pageList.emptyState.title,
+							)
+						}
+						description={
+							localization?.pageList?.emptyState?.description ??
+							t(
+								"uiBuilder.pageList.emptyState.description",
+								uiBuilderLocalization.pageList.emptyState.description,
+							)
 						}
+						action={createButton}
 					/>
 				) : (
 					<>
@@ -120,11 +174,33 @@ export function PageListPage() {
 							<Table>
 								<TableHeader>
 									<TableRow>
-										<TableHead>{loc.pageList.columns.slug}</TableHead>
-										<TableHead>{loc.pageList.columns.status}</TableHead>
-										<TableHead>{loc.pageList.columns.updatedAt}</TableHead>
+										<TableHead>
+											{localization?.pageList?.columns?.slug ??
+												t(
+													"uiBuilder.pageList.columns.slug",
+													uiBuilderLocalization.pageList.columns.slug,
+												)}
+										</TableHead>
+										<TableHead>
+											{localization?.pageList?.columns?.status ??
+												t(
+													"uiBuilder.pageList.columns.status",
+													uiBuilderLocalization.pageList.columns.status,
+												)}
+										</TableHead>
+										<TableHead>
+											{localization?.pageList?.columns?.updatedAt ??
+												t(
+													"uiBuilder.pageList.columns.updatedAt",
+													uiBuilderLocalization.pageList.columns.updatedAt,
+												)}
+										</TableHead>
 										<TableHead className="w-12">
-											{loc.pageList.columns.actions}
+											{localization?.pageList?.columns?.actions ??
+												t(
+													"uiBuilder.pageList.columns.actions",
+													uiBuilderLocalization.pageList.columns.actions,
+												)}
 										</TableHead>
 									</TableRow>
 								</TableHeader>
@@ -144,28 +220,56 @@ export function PageListPage() {
 												<DropdownMenu>
 													<DropdownMenuTrigger asChild>
 														<Button variant="ghost" size="icon">
-															<MoreHorizontal className="h-4 w-4" />
-															<span className="sr-only">Actions</span>
+															<MoreHorizontal />
+															<span className="sr-only">
+																{localization?.pageList?.actions?.label ??
+																	t(
+																		"uiBuilder.pageList.actions.label",
+																		uiBuilderLocalization.pageList.actions
+																			.label,
+																	)}
+															</span>
 														</Button>
 													</DropdownMenuTrigger>
 													<DropdownMenuContent align="end">
-														<DropdownMenuItem
-															onClick={() =>
-																navigate?.(
-																	`${basePath}/ui-builder/${page.id}/edit`,
-																)
-															}
+														<CanAccess
+															resource="ui-builder:page"
+															action="update"
+															params={{ id: page.id }}
 														>
-															<Pencil className="mr-2 h-4 w-4" />
-															{loc.pageList.actions.edit}
-														</DropdownMenuItem>
-														<DropdownMenuItem
-															className="text-destructive"
-															onClick={() => setDeleteId(page.id)}
+															<DropdownMenuItem
+																onClick={() =>
+																	navigate?.(
+																		`${basePath}/ui-builder/${page.id}/edit`,
+																	)
+																}
+															>
+																<Pencil data-icon="inline-start" />
+																{localization?.pageList?.actions?.edit ??
+																	t(
+																		"uiBuilder.pageList.actions.edit",
+																		uiBuilderLocalization.pageList.actions.edit,
+																	)}
+															</DropdownMenuItem>
+														</CanAccess>
+														<CanAccess
+															resource="ui-builder:page"
+															action="delete"
+															params={{ id: page.id }}
 														>
-															<Trash2 className="mr-2 h-4 w-4" />
-															{loc.pageList.actions.delete}
-														</DropdownMenuItem>
+															<DropdownMenuItem
+																className="text-destructive"
+																onClick={() => setDeleteId(page.id)}
+															>
+																<Trash2 data-icon="inline-start" />
+																{localization?.pageList?.actions?.delete ??
+																	t(
+																		"uiBuilder.pageList.actions.delete",
+																		uiBuilderLocalization.pageList.actions
+																			.delete,
+																	)}
+															</DropdownMenuItem>
+														</CanAccess>
 													</DropdownMenuContent>
 												</DropdownMenu>
 											</TableCell>
@@ -181,6 +285,26 @@ export function PageListPage() {
 							hasMore={hasMore}
 							isLoadingMore={isLoadingMore}
 							onLoadMore={loadMore}
+							labels={{
+								showing:
+									localization?.pageList?.pagination?.showing ??
+									t(
+										"uiBuilder.pageList.pagination.showing",
+										uiBuilderLocalization.pageList.pagination.showing,
+									),
+								next:
+									localization?.pageList?.pagination?.loadMore ??
+									t(
+										"uiBuilder.pageList.pagination.loadMore",
+										uiBuilderLocalization.pageList.pagination.loadMore,
+									),
+								loading:
+									localization?.pageList?.pagination?.loading ??
+									t(
+										"uiBuilder.pageList.pagination.loading",
+										uiBuilderLocalization.pageList.pagination.loading,
+									),
+							}}
 						/>
 					</>
 				)}
@@ -191,23 +315,43 @@ export function PageListPage() {
 				<AlertDialogContent>
 					<AlertDialogHeader>
 						<AlertDialogTitle>
-							{loc.pageList.deleteDialog.title}
+							{localization?.pageList?.deleteDialog?.title ??
+								t(
+									"uiBuilder.pageList.deleteDialog.title",
+									uiBuilderLocalization.pageList.deleteDialog.title,
+								)}
 						</AlertDialogTitle>
 						<AlertDialogDescription>
-							{loc.pageList.deleteDialog.description}
+							{localization?.pageList?.deleteDialog?.description ??
+								t(
+									"uiBuilder.pageList.deleteDialog.description",
+									uiBuilderLocalization.pageList.deleteDialog.description,
+								)}
 						</AlertDialogDescription>
 					</AlertDialogHeader>
 					<AlertDialogFooter>
 						<AlertDialogCancel>
-							{loc.pageList.deleteDialog.cancel}
+							{localization?.pageList?.deleteDialog?.cancel ??
+								t(
+									"uiBuilder.pageList.deleteDialog.cancel",
+									uiBuilderLocalization.pageList.deleteDialog.cancel,
+								)}
 						</AlertDialogCancel>
 						<AlertDialogAction
 							onClick={handleDelete}
 							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
 						>
 							{deleteMutation.isPending
-								? "Deleting..."
-								: loc.pageList.deleteDialog.confirm}
+								? (localization?.pageList?.deleteDialog?.deleting ??
+									t(
+										"uiBuilder.pageList.deleteDialog.deleting",
+										uiBuilderLocalization.pageList.deleteDialog.deleting,
+									))
+								: (localization?.pageList?.deleteDialog?.confirm ??
+									t(
+										"uiBuilder.pageList.deleteDialog.confirm",
+										uiBuilderLocalization.pageList.deleteDialog.confirm,
+									))}
 						</AlertDialogAction>
 					</AlertDialogFooter>
 				</AlertDialogContent>

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

@@ -1,9 +1,11 @@
 "use client";
 
-import { lazy, Suspense } from "react";
+import { lazy } from "react";
+import { ComposedRoute } from "@btst/stack/client/components";
+import { usePluginOverrides } from "@btst/stack/context";
 import { PageListSkeleton } from "../loading/page-list-skeleton";
-import { ErrorBoundary } from "react-error-boundary";
 import { DefaultError } from "../shared/default-error";
+import type { UIBuilderPluginOverrides } from "../../overrides";
 
 const PageListPageInternal = lazy(() =>
 	import("./page-list-page.internal").then((m) => ({
@@ -12,11 +14,23 @@ const PageListPageInternal = lazy(() =>
 );
 
 export function PageListPage() {
+	const { onRouteError } =
+		usePluginOverrides<UIBuilderPluginOverrides>("ui-builder");
+
 	return (
-		<ErrorBoundary FallbackComponent={DefaultError}>
-			<Suspense fallback={<PageListSkeleton />}>
-				<PageListPageInternal />
-			</Suspense>
-		</ErrorBoundary>
+		<ComposedRoute
+			path="/ui-builder"
+			permission={{ resource: "ui-builder:page", action: "read" }}
+			PageComponent={PageListPageInternal}
+			ErrorComponent={DefaultError}
+			LoadingComponent={PageListSkeleton}
+			NotFoundComponent={() => null}
+			onError={(error) => {
+				onRouteError?.("pageList", error, {
+					path: "/ui-builder",
+					isSSR: typeof window === "undefined",
+				});
+			}}
+		/>
 	);
 }

package/src/plugins/ui-builder/client/components/shared/default-error.tsx

@@ -2,6 +2,9 @@
 
 import { AlertCircle } from "lucide-react";
 import { Button } from "@workspace/ui/components/button";
+import { usePluginOverrides, useTranslate } from "@btst/stack/context";
+import type { UIBuilderPluginOverrides } from "../../overrides";
+import { uiBuilderLocalization } from "../../localization";
 
 interface DefaultErrorProps {
 	error: unknown;
@@ -9,21 +12,35 @@ interface DefaultErrorProps {
 }
 
 export function DefaultError({ error, resetErrorBoundary }: DefaultErrorProps) {
+	const t = useTranslate();
+	const { localization } =
+		usePluginOverrides<UIBuilderPluginOverrides>("ui-builder");
+	const title =
+		localization?.common?.errorTitle ??
+		t("uiBuilder.common.errorTitle", uiBuilderLocalization.common.errorTitle);
+	const unexpectedError =
+		localization?.common?.unexpectedError ??
+		t(
+			"uiBuilder.common.unexpectedError",
+			uiBuilderLocalization.common.unexpectedError,
+		);
+	const tryAgain =
+		localization?.common?.tryAgain ??
+		t("uiBuilder.common.tryAgain", uiBuilderLocalization.common.tryAgain);
+
 	return (
 		<div className="flex flex-col items-center justify-center py-12 px-4 text-center">
 			<div className="rounded-full bg-destructive/10 p-4 mb-4">
 				<AlertCircle className="h-8 w-8 text-destructive" />
 			</div>
-			<h3 className="text-lg font-medium text-foreground mb-2">
-				Something went wrong
-			</h3>
+			<h3 className="text-lg font-medium text-foreground mb-2">{title}</h3>
 			<p className="text-sm text-muted-foreground mb-4 max-w-sm">
 				{(error instanceof Error ? error.message : undefined) ||
-					"An unexpected error occurred"}
+					unexpectedError}
 			</p>
 			{resetErrorBoundary && (
 				<Button variant="outline" onClick={resetErrorBoundary}>
-					Try again
+					{tryAgain}
 				</Button>
 			)}
 		</div>

package/src/plugins/ui-builder/client/components/shared/pagination.tsx

@@ -13,6 +13,7 @@ interface PaginationProps {
 		showing?: string;
 		previous?: string;
 		next?: string;
+		loading?: string;
 	};
 }
 
@@ -27,6 +28,7 @@ export function Pagination({
 	const {
 		showing: showingLabel = "Showing {count} of {total}",
 		next = "Load More",
+		loading = "Loading...",
 	} = labels;
 
 	const showingText = showingLabel
@@ -43,7 +45,7 @@ export function Pagination({
 					onClick={onLoadMore}
 					disabled={isLoadingMore}
 				>
-					{isLoadingMore ? "Loading..." : next}
+					{isLoadingMore ? loading : next}
 					<ChevronRight className="ml-2 h-4 w-4" />
 				</Button>
 			)}

package/src/plugins/ui-builder/client/hooks/index.tsx

@@ -12,9 +12,12 @@ export {
 	useCreateUIBuilderPage,
 	useUpdateUIBuilderPage,
 	useDeleteUIBuilderPage,
+	useUIBuilderPageForm,
 	// Types
 	type UseUIBuilderPagesOptions,
 	type UseUIBuilderPagesResult,
 	type CreateUIBuilderPageInput,
 	type UpdateUIBuilderPageInput,
+	type UIBuilderPageFormValues,
+	type UIBuilderPageUpdateValues,
 } from "./ui-builder-hooks";