@btst/stack 1.4.1 → 1.5.0

package/src/plugins/cms/client/components/loading/index.tsx

@@ -0,0 +1,3 @@
+export { DashboardSkeleton } from "./dashboard-skeleton";
+export { ListSkeleton } from "./list-skeleton";
+export { EditorSkeleton } from "./editor-skeleton";

package/src/plugins/cms/client/components/loading/list-skeleton.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { Skeleton } from "@workspace/ui/components/skeleton";
+import { PageWrapper } from "../shared/page-wrapper";
+
+export function ListSkeleton() {
+	return (
+		<PageWrapper testId="cms-list-skeleton">
+			<div className="w-full max-w-5xl space-y-6">
+				<div className="flex items-center justify-between">
+					<div className="space-y-2">
+						<Skeleton className="h-8 w-48" />
+						<Skeleton className="h-4 w-32" />
+					</div>
+					<Skeleton className="h-10 w-28" />
+				</div>
+				<div className="border rounded-lg">
+					<div className="border-b px-4 py-3">
+						<div className="flex gap-4">
+							<Skeleton className="h-4 w-24" />
+							<Skeleton className="h-4 w-24" />
+							<Skeleton className="h-4 w-24" />
+						</div>
+					</div>
+					{Array.from({ length: 5 }).map((_, i) => (
+						<div key={i} className="px-4 py-3 border-b last:border-b-0">
+							<div className="flex gap-4">
+								<Skeleton className="h-4 w-32" />
+								<Skeleton className="h-4 w-24" />
+								<Skeleton className="h-4 w-24" />
+							</div>
+						</div>
+					))}
+				</div>
+			</div>
+		</PageWrapper>
+	);
+}

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

@@ -0,0 +1,27 @@
+"use client";
+
+import { Button } from "@workspace/ui/components/button";
+import { usePluginOverrides, useBasePath } from "@btst/stack/context";
+import type { CMSPluginOverrides } from "../../overrides";
+
+export function NotFoundPage() {
+	const { navigate, Link } = usePluginOverrides<CMSPluginOverrides>("cms");
+	const basePath = useBasePath();
+
+	const LinkComponent = Link || "a";
+
+	return (
+		<div className="flex flex-col items-center justify-center py-12 px-4 text-center">
+			<h1 className="text-6xl font-bold text-muted-foreground mb-4">404</h1>
+			<h2 className="text-xl font-medium text-foreground mb-2">
+				Page not found
+			</h2>
+			<p className="text-sm text-muted-foreground mb-6 max-w-sm">
+				The page you're looking for doesn't exist or has been moved.
+			</p>
+			<Button asChild>
+				<LinkComponent href={`${basePath}/cms`}>Back to CMS</LinkComponent>
+			</Button>
+		</div>
+	);
+}

package/src/plugins/cms/client/components/pages/content-editor-page.internal.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { ArrowLeft } from "lucide-react";
+import { Button } from "@workspace/ui/components/button";
+import { usePluginOverrides, useBasePath } from "@btst/stack/context";
+import type { CMSPluginOverrides } from "../../overrides";
+import {
+	useSuspenseContentTypes,
+	useContentItem,
+	useCreateContent,
+	useUpdateContent,
+} from "../../hooks";
+import { ContentForm } from "../forms/content-form";
+import { EmptyState } from "../shared/empty-state";
+import { PageWrapper } from "../shared/page-wrapper";
+import { EditorSkeleton } from "../loading/editor-skeleton";
+import { CMS_LOCALIZATION } from "../../localization";
+
+interface ContentEditorPageProps {
+	typeSlug: string;
+	id?: string;
+}
+
+export function ContentEditorPage({ typeSlug, id }: ContentEditorPageProps) {
+	const { navigate, localization: customLocalization } =
+		usePluginOverrides<CMSPluginOverrides>("cms");
+	const localization = { ...CMS_LOCALIZATION, ...customLocalization };
+	const basePath = useBasePath();
+
+	const { contentTypes } = useSuspenseContentTypes();
+	const contentType = contentTypes.find((ct) => ct.slug === typeSlug);
+
+	const isEditing = !!id;
+
+	// useContentItem has enabled: !!id built-in, so it won't fetch when creating new items
+	// This avoids conditional hook calls which violate React's Rules of Hooks
+	const { item, isLoading: isLoadingItem } = useContentItem(typeSlug, id ?? "");
+
+	const createContent = useCreateContent(typeSlug);
+	const updateContent = useUpdateContent(typeSlug);
+
+	if (!contentType) {
+		return (
+			<PageWrapper testId="cms-editor-page">
+				<div className="w-full max-w-2xl">
+					<EmptyState
+						title={localization.CMS_ERROR_NOT_FOUND}
+						description="Content type not found"
+					/>
+				</div>
+			</PageWrapper>
+		);
+	}
+
+	// Show loading skeleton while fetching item in edit mode
+	if (isEditing && isLoadingItem) {
+		return (
+			<PageWrapper testId="cms-editor-page">
+				<div className="w-full max-w-2xl">
+					<EditorSkeleton />
+				</div>
+			</PageWrapper>
+		);
+	}
+
+	if (isEditing && !item) {
+		return (
+			<PageWrapper testId="cms-editor-page">
+				<div className="w-full max-w-2xl">
+					<EmptyState
+						title={localization.CMS_ERROR_NOT_FOUND}
+						description="Content item not found"
+					/>
+				</div>
+			</PageWrapper>
+		);
+	}
+
+	const handleSubmit = async (data: {
+		slug: string;
+		data: Record<string, unknown>;
+	}) => {
+		if (isEditing && id) {
+			await updateContent.mutateAsync({ id, data });
+		} else {
+			await createContent.mutateAsync(data);
+		}
+		navigate(`${basePath}/cms/${typeSlug}`);
+	};
+
+	const title = isEditing
+		? localization.CMS_EDITOR_TITLE_EDIT.replace("{typeName}", contentType.name)
+		: localization.CMS_EDITOR_TITLE_NEW.replace("{typeName}", contentType.name);
+
+	return (
+		<PageWrapper testId="cms-editor-page">
+			<div className="w-full max-w-2xl space-y-6">
+				<div className="flex items-center gap-4">
+					<Button
+						variant="ghost"
+						size="icon"
+						onClick={() => navigate(`${basePath}/cms/${typeSlug}`)}
+					>
+						<ArrowLeft className="h-4 w-4" />
+					</Button>
+					<h1 className="text-2xl font-bold tracking-tight">{title}</h1>
+				</div>
+
+				<ContentForm
+					key={isEditing ? `edit-${id}` : "create"}
+					contentType={contentType}
+					initialData={item?.parsedData}
+					initialSlug={item?.slug}
+					isEditing={isEditing}
+					onSubmit={handleSubmit}
+					onCancel={() => navigate(`${basePath}/cms/${typeSlug}`)}
+				/>
+			</div>
+		</PageWrapper>
+	);
+}

package/src/plugins/cms/client/components/pages/content-editor-page.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { lazy } from "react";
+import { usePluginOverrides } from "@btst/stack/context";
+import type { CMSPluginOverrides } from "../../overrides";
+import { ComposedRoute } from "@btst/stack/client/components";
+import { DefaultError } from "../shared/default-error";
+import { EditorSkeleton } from "../loading";
+import { NotFoundPage } from "./404-page";
+
+const ContentEditorPageInternal = lazy(() =>
+	import("./content-editor-page.internal").then((m) => ({
+		default: m.ContentEditorPage,
+	})),
+);
+
+interface ContentEditorPageComponentProps {
+	typeSlug: string;
+	id?: string;
+}
+
+export function ContentEditorPageComponent({
+	typeSlug,
+	id,
+}: ContentEditorPageComponentProps) {
+	const { onRouteError } = usePluginOverrides<CMSPluginOverrides>("cms");
+
+	const isNew = !id;
+	const path = isNew ? `/cms/${typeSlug}/new` : `/cms/${typeSlug}/${id}`;
+
+	return (
+		<ComposedRoute
+			path={path}
+			PageComponent={ContentEditorPageInternal}
+			ErrorComponent={DefaultError}
+			LoadingComponent={EditorSkeleton}
+			NotFoundComponent={NotFoundPage}
+			props={{ typeSlug, id }}
+			onError={(error) => {
+				if (onRouteError) {
+					onRouteError("contentEditor", error, {
+						path,
+						params: { typeSlug, id: id ?? "" },
+						isSSR: typeof window === "undefined",
+					});
+				}
+			}}
+		/>
+	);
+}

package/src/plugins/cms/client/components/pages/content-list-page.internal.tsx

@@ -0,0 +1,198 @@
+"use client";
+
+import { Plus, ArrowLeft, Pencil, Trash2, Loader2 } from "lucide-react";
+import { Button } from "@workspace/ui/components/button";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@workspace/ui/components/table";
+import { usePluginOverrides, useBasePath } from "@btst/stack/context";
+import type { CMSPluginOverrides } from "../../overrides";
+import {
+	useSuspenseContent,
+	useSuspenseContentTypes,
+	useDeleteContent,
+} from "../../hooks";
+import { EmptyState } from "../shared/empty-state";
+import { PageWrapper } from "../shared/page-wrapper";
+import { CMS_LOCALIZATION } from "../../localization";
+import { toast } from "sonner";
+
+interface ContentListPageProps {
+	typeSlug: string;
+}
+
+export function ContentListPage({ typeSlug }: ContentListPageProps) {
+	const {
+		navigate,
+		Link,
+		localization: customLocalization,
+	} = usePluginOverrides<CMSPluginOverrides>("cms");
+	const localization = { ...CMS_LOCALIZATION, ...customLocalization };
+	const basePath = useBasePath();
+
+	const limit = 20;
+
+	const { contentTypes } = useSuspenseContentTypes();
+	const contentType = contentTypes.find((ct) => ct.slug === typeSlug);
+
+	const { items, total, refetch, loadMore, hasMore, isLoadingMore } =
+		useSuspenseContent(typeSlug, {
+			limit,
+		});
+
+	const deleteContent = useDeleteContent(typeSlug);
+
+	const LinkComponent = Link || "a";
+
+	const handleDelete = async (id: string) => {
+		try {
+			await deleteContent.mutateAsync(id);
+			toast.success(localization.CMS_TOAST_DELETE_SUCCESS);
+			void refetch();
+		} catch {
+			toast.error(localization.CMS_TOAST_ERROR);
+		}
+	};
+
+	const formatDate = (dateString: string) => {
+		return new Date(dateString).toLocaleDateString();
+	};
+
+	if (!contentType) {
+		return (
+			<PageWrapper testId="cms-list-page">
+				<div className="w-full max-w-5xl">
+					<EmptyState
+						title={localization.CMS_ERROR_NOT_FOUND}
+						description="Content type not found"
+					/>
+				</div>
+			</PageWrapper>
+		);
+	}
+
+	return (
+		<PageWrapper testId="cms-list-page">
+			<div className="w-full max-w-5xl space-y-6">
+				<div className="flex items-center justify-between">
+					<div className="flex items-center gap-4">
+						<Button
+							variant="ghost"
+							size="icon"
+							onClick={() => navigate(`${basePath}/cms`)}
+						>
+							<ArrowLeft className="h-4 w-4" />
+						</Button>
+						<div>
+							<h1 className="text-2xl font-bold tracking-tight">
+								{contentType.name}
+							</h1>
+							{contentType.description && (
+								<p className="text-muted-foreground">
+									{contentType.description}
+								</p>
+							)}
+						</div>
+					</div>
+					<Button onClick={() => navigate(`${basePath}/cms/${typeSlug}/new`)}>
+						<Plus className="h-4 w-4 mr-2" />
+						{localization.CMS_BUTTON_NEW_ITEM}
+					</Button>
+				</div>
+
+				{items.length === 0 ? (
+					<EmptyState
+						title={localization.CMS_LIST_EMPTY}
+						description={localization.CMS_LIST_EMPTY_DESCRIPTION}
+						action={
+							<Button
+								onClick={() => navigate(`${basePath}/cms/${typeSlug}/new`)}
+							>
+								<Plus className="h-4 w-4 mr-2" />
+								{localization.CMS_BUTTON_CREATE}
+							</Button>
+						}
+					/>
+				) : (
+					<div className="border rounded-lg">
+						<Table>
+							<TableHeader>
+								<TableRow>
+									<TableHead>{localization.CMS_LIST_COLUMN_SLUG}</TableHead>
+									<TableHead>{localization.CMS_LIST_COLUMN_CREATED}</TableHead>
+									<TableHead>{localization.CMS_LIST_COLUMN_UPDATED}</TableHead>
+									<TableHead className="w-[100px]">
+										{localization.CMS_LIST_COLUMN_ACTIONS}
+									</TableHead>
+								</TableRow>
+							</TableHeader>
+							<TableBody>
+								{items.map((item) => (
+									<TableRow key={item.id}>
+										<TableCell className="font-medium">
+											<LinkComponent
+												href={`${basePath}/cms/${typeSlug}/${item.id}`}
+												className="hover:underline"
+											>
+												{item.slug}
+											</LinkComponent>
+										</TableCell>
+										<TableCell>{formatDate(item.createdAt)}</TableCell>
+										<TableCell>{formatDate(item.updatedAt)}</TableCell>
+										<TableCell>
+											<div className="flex items-center gap-1">
+												<Button
+													variant="ghost"
+													size="icon"
+													onClick={() =>
+														navigate(`${basePath}/cms/${typeSlug}/${item.id}`)
+													}
+												>
+													<Pencil className="h-4 w-4" />
+												</Button>
+												<Button
+													variant="ghost"
+													size="icon"
+													onClick={() => handleDelete(item.id)}
+													disabled={deleteContent.isPending}
+												>
+													<Trash2 className="h-4 w-4 text-destructive" />
+												</Button>
+											</div>
+										</TableCell>
+									</TableRow>
+								))}
+							</TableBody>
+						</Table>
+						{/* Load More and pagination info */}
+						<div className="flex items-center justify-between px-4 py-3 border-t">
+							<p className="text-sm text-muted-foreground">
+								{localization.CMS_LIST_PAGINATION_SHOWING.replace("{from}", "1")
+									.replace("{to}", String(items.length))
+									.replace("{total}", String(total))}
+							</p>
+							{hasMore && (
+								<Button
+									variant="outline"
+									size="sm"
+									onClick={() => loadMore()}
+									disabled={isLoadingMore}
+								>
+									{isLoadingMore && (
+										<Loader2 className="h-4 w-4 mr-2 animate-spin" />
+									)}
+									{localization.CMS_LIST_PAGINATION_NEXT}
+								</Button>
+							)}
+						</div>
+					</div>
+				)}
+			</div>
+		</PageWrapper>
+	);
+}

package/src/plugins/cms/client/components/pages/content-list-page.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { lazy } from "react";
+import { usePluginOverrides } from "@btst/stack/context";
+import type { CMSPluginOverrides } from "../../overrides";
+import { ComposedRoute } from "@btst/stack/client/components";
+import { DefaultError } from "../shared/default-error";
+import { ListSkeleton } from "../loading";
+import { NotFoundPage } from "./404-page";
+
+const ContentListPageInternal = lazy(() =>
+	import("./content-list-page.internal").then((m) => ({
+		default: m.ContentListPage,
+	})),
+);
+
+interface ContentListPageComponentProps {
+	typeSlug: string;
+}
+
+export function ContentListPageComponent({
+	typeSlug,
+}: ContentListPageComponentProps) {
+	const { onRouteError } = usePluginOverrides<CMSPluginOverrides>("cms");
+
+	return (
+		<ComposedRoute
+			path={`/cms/${typeSlug}`}
+			PageComponent={ContentListPageInternal}
+			ErrorComponent={DefaultError}
+			LoadingComponent={ListSkeleton}
+			NotFoundComponent={NotFoundPage}
+			props={{ typeSlug }}
+			onError={(error) => {
+				if (onRouteError) {
+					onRouteError("contentList", error, {
+						path: `/cms/${typeSlug}`,
+						params: { typeSlug },
+						isSSR: typeof window === "undefined",
+					});
+				}
+			}}
+		/>
+	);
+}

package/src/plugins/cms/client/components/pages/dashboard-page.internal.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { FileText } from "lucide-react";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "@workspace/ui/components/card";
+import { usePluginOverrides, useBasePath } from "@btst/stack/context";
+import type { CMSPluginOverrides } from "../../overrides";
+import { useSuspenseContentTypes } from "../../hooks";
+import { EmptyState } from "../shared/empty-state";
+import { PageWrapper } from "../shared/page-wrapper";
+import { CMS_LOCALIZATION } from "../../localization";
+
+export function DashboardPage() {
+	const { navigate, localization: customLocalization } =
+		usePluginOverrides<CMSPluginOverrides>("cms");
+	const localization = { ...CMS_LOCALIZATION, ...customLocalization };
+	const basePath = useBasePath();
+	const { contentTypes } = useSuspenseContentTypes();
+
+	if (contentTypes.length === 0) {
+		return (
+			<PageWrapper testId="cms-dashboard-page">
+				<div className="w-full max-w-5xl space-y-6">
+					<div>
+						<h1 className="text-2xl font-bold tracking-tight">
+							{localization.CMS_DASHBOARD_TITLE}
+						</h1>
+						<p className="text-muted-foreground">
+							{localization.CMS_DASHBOARD_SUBTITLE}
+						</p>
+					</div>
+					<EmptyState
+						title={localization.CMS_DASHBOARD_NO_TYPES}
+						description={localization.CMS_DASHBOARD_NO_TYPES_DESCRIPTION}
+					/>
+				</div>
+			</PageWrapper>
+		);
+	}
+
+	const formatItemCount = (count: number) => {
+		if (count === 0) return localization.CMS_DASHBOARD_ITEMS_COUNT_ZERO;
+		if (count === 1) return localization.CMS_DASHBOARD_ITEMS_COUNT_ONE;
+		return localization.CMS_DASHBOARD_ITEMS_COUNT.replace(
+			"{count}",
+			String(count),
+		);
+	};
+
+	return (
+		<PageWrapper testId="cms-dashboard-page">
+			<div className="w-full max-w-5xl space-y-6">
+				<div>
+					<h1 className="text-2xl font-bold tracking-tight">
+						{localization.CMS_DASHBOARD_TITLE}
+					</h1>
+					<p className="text-muted-foreground">
+						{localization.CMS_DASHBOARD_SUBTITLE}
+					</p>
+				</div>
+
+				<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+					{contentTypes.map((ct) => (
+						<Card
+							key={ct.id}
+							className="hover:border-primary/50 transition-colors cursor-pointer"
+							onClick={() => navigate(`${basePath}/cms/${ct.slug}`)}
+						>
+							<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+								<CardTitle className="text-lg font-medium">{ct.name}</CardTitle>
+								<FileText className="h-5 w-5 text-muted-foreground" />
+							</CardHeader>
+							<CardContent>
+								<div className="text-2xl font-bold">{ct.itemCount}</div>
+								<p className="text-xs text-muted-foreground">
+									{formatItemCount(ct.itemCount)}
+								</p>
+								{ct.description && (
+									<p className="text-sm text-muted-foreground mt-2 line-clamp-2">
+										{ct.description}
+									</p>
+								)}
+							</CardContent>
+						</Card>
+					))}
+				</div>
+			</div>
+		</PageWrapper>
+	);
+}

package/src/plugins/cms/client/components/pages/dashboard-page.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { lazy } from "react";
+import { usePluginOverrides } from "@btst/stack/context";
+import type { CMSPluginOverrides } from "../../overrides";
+import { ComposedRoute } from "@btst/stack/client/components";
+import { DefaultError } from "../shared/default-error";
+import { DashboardSkeleton } from "../loading";
+import { NotFoundPage } from "./404-page";
+
+const DashboardPageInternal = lazy(() =>
+	import("./dashboard-page.internal").then((m) => ({
+		default: m.DashboardPage,
+	})),
+);
+
+export function DashboardPageComponent() {
+	const { onRouteError } = usePluginOverrides<CMSPluginOverrides>("cms");
+
+	return (
+		<ComposedRoute
+			path="/cms"
+			PageComponent={DashboardPageInternal}
+			ErrorComponent={DefaultError}
+			LoadingComponent={DashboardSkeleton}
+			NotFoundComponent={NotFoundPage}
+			onError={(error) => {
+				if (onRouteError) {
+					onRouteError("dashboard", error, {
+						path: "/cms",
+						isSSR: typeof window === "undefined",
+					});
+				}
+			}}
+		/>
+	);
+}

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

@@ -0,0 +1,30 @@
+"use client";
+
+import { AlertCircle } from "lucide-react";
+import { Button } from "@workspace/ui/components/button";
+
+interface DefaultErrorProps {
+	error: Error;
+	resetErrorBoundary?: () => void;
+}
+
+export function DefaultError({ error, resetErrorBoundary }: DefaultErrorProps) {
+	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>
+			<p className="text-sm text-muted-foreground mb-4 max-w-sm">
+				{error.message || "An unexpected error occurred"}
+			</p>
+			{resetErrorBoundary && (
+				<Button variant="outline" onClick={resetErrorBoundary}>
+					Try again
+				</Button>
+			)}
+		</div>
+	);
+}

package/src/plugins/cms/client/components/shared/empty-state.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { Inbox } from "lucide-react";
+
+interface EmptyStateProps {
+	title: string;
+	description?: string;
+	action?: React.ReactNode;
+}
+
+export function EmptyState({ title, description, action }: EmptyStateProps) {
+	return (
+		<div className="flex flex-col items-center justify-center py-12 px-4 text-center">
+			<div className="rounded-full bg-muted p-4 mb-4">
+				<Inbox className="h-8 w-8 text-muted-foreground" />
+			</div>
+			<h3 className="text-lg font-medium text-foreground mb-2">{title}</h3>
+			{description && (
+				<p className="text-sm text-muted-foreground mb-4 max-w-sm">
+					{description}
+				</p>
+			)}
+			{action}
+		</div>
+	);
+}