@btst/stack 1.5.2 → 1.6.0

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

@@ -0,0 +1,231 @@
+"use client";
+
+import { useState } from "react";
+import { usePluginOverrides, useBasePath } from "@btst/stack/context";
+import { Button } from "@workspace/ui/components/button";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@workspace/ui/components/table";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@workspace/ui/components/dropdown-menu";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@workspace/ui/components/alert-dialog";
+import { MoreHorizontal, Plus, Pencil, Trash2, FileText } from "lucide-react";
+import { toast } from "sonner";
+
+import {
+	useSuspenseForms,
+	useDeleteForm,
+} from "../../hooks/form-builder-hooks";
+import type { FormBuilderPluginOverrides } from "../../overrides";
+import { FORM_BUILDER_LOCALIZATION } from "../../localization";
+import { PageWrapper } from "../shared/page-wrapper";
+import { EmptyState } from "../shared/empty-state";
+import { Pagination } from "../shared/pagination";
+
+export function FormListPage() {
+	const { navigate, Link, localization } = usePluginOverrides<
+		FormBuilderPluginOverrides,
+		Partial<FormBuilderPluginOverrides>
+	>("form-builder", {
+		localization: FORM_BUILDER_LOCALIZATION,
+	});
+	const basePath = useBasePath();
+	const { forms, total, hasMore, isLoadingMore, loadMore, refetch } =
+		useSuspenseForms();
+	const deleteMutation = useDeleteForm();
+
+	const [deleteId, setDeleteId] = useState<string | null>(null);
+
+	const loc = localization || FORM_BUILDER_LOCALIZATION;
+	const LinkComponent = Link || "a";
+
+	const handleDelete = async () => {
+		if (!deleteId) return;
+
+		try {
+			await deleteMutation.mutateAsync(deleteId);
+			toast.success(loc.FORM_BUILDER_TOAST_DELETE_SUCCESS);
+			setDeleteId(null);
+			await refetch();
+		} catch (error) {
+			toast.error(loc.FORM_BUILDER_TOAST_ERROR);
+		}
+	};
+
+	const getStatusBadge = (status: string) => {
+		const colors: Record<string, string> = {
+			active:
+				"bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
+			inactive:
+				"bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
+			archived: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200",
+		};
+		return (
+			<span
+				className={`px-2 py-1 rounded-full text-xs font-medium ${colors[status] || colors.inactive}`}
+			>
+				{status}
+			</span>
+		);
+	};
+
+	return (
+		<PageWrapper testId="form-list-page">
+			<div className="w-full max-w-5xl space-y-6">
+				<div className="flex items-center justify-between">
+					<div>
+						<h1 className="text-2xl font-bold">
+							{loc.FORM_BUILDER_LIST_TITLE}
+						</h1>
+						<p className="text-muted-foreground">
+							{loc.FORM_BUILDER_LIST_SUBTITLE}
+						</p>
+					</div>
+					<Button asChild>
+						<LinkComponent href={`${basePath}/forms/new`}>
+							<Plus className="mr-2 h-4 w-4" />
+							{loc.FORM_BUILDER_BUTTON_NEW_FORM}
+						</LinkComponent>
+					</Button>
+				</div>
+
+				{forms.length === 0 ? (
+					<EmptyState
+						title={loc.FORM_BUILDER_LIST_EMPTY}
+						description={loc.FORM_BUILDER_LIST_EMPTY_DESCRIPTION}
+						action={
+							<Button asChild>
+								<LinkComponent href={`${basePath}/forms/new`}>
+									<Plus className="mr-2 h-4 w-4" />
+									{loc.FORM_BUILDER_BUTTON_NEW_FORM}
+								</LinkComponent>
+							</Button>
+						}
+					/>
+				) : (
+					<>
+						<div className="rounded-lg border">
+							<Table>
+								<TableHeader>
+									<TableRow>
+										<TableHead>{loc.FORM_BUILDER_LIST_COLUMN_NAME}</TableHead>
+										<TableHead>{loc.FORM_BUILDER_LIST_COLUMN_SLUG}</TableHead>
+										<TableHead>{loc.FORM_BUILDER_LIST_COLUMN_STATUS}</TableHead>
+										<TableHead>
+											{loc.FORM_BUILDER_LIST_COLUMN_CREATED}
+										</TableHead>
+										<TableHead className="w-12">
+											{loc.FORM_BUILDER_LIST_COLUMN_ACTIONS}
+										</TableHead>
+									</TableRow>
+								</TableHeader>
+								<TableBody>
+									{forms.map((form) => (
+										<TableRow key={form.id}>
+											<TableCell className="font-medium">{form.name}</TableCell>
+											<TableCell className="text-muted-foreground font-mono text-sm">
+												{form.slug}
+											</TableCell>
+											<TableCell>{getStatusBadge(form.status)}</TableCell>
+											<TableCell className="text-muted-foreground">
+												{new Date(form.createdAt).toLocaleDateString()}
+											</TableCell>
+											<TableCell>
+												<DropdownMenu>
+													<DropdownMenuTrigger asChild>
+														<Button variant="ghost" size="icon">
+															<MoreHorizontal className="h-4 w-4" />
+															<span className="sr-only">Actions</span>
+														</Button>
+													</DropdownMenuTrigger>
+													<DropdownMenuContent align="end">
+														<DropdownMenuItem
+															onClick={() =>
+																navigate?.(`${basePath}/forms/${form.id}/edit`)
+															}
+														>
+															<Pencil className="mr-2 h-4 w-4" />
+															{loc.FORM_BUILDER_LIST_ACTION_EDIT}
+														</DropdownMenuItem>
+														<DropdownMenuItem
+															onClick={() =>
+																navigate?.(
+																	`${basePath}/forms/${form.id}/submissions`,
+																)
+															}
+														>
+															<FileText className="mr-2 h-4 w-4" />
+															{loc.FORM_BUILDER_LIST_ACTION_SUBMISSIONS}
+														</DropdownMenuItem>
+														<DropdownMenuItem
+															className="text-destructive"
+															onClick={() => setDeleteId(form.id)}
+														>
+															<Trash2 className="mr-2 h-4 w-4" />
+															{loc.FORM_BUILDER_LIST_ACTION_DELETE}
+														</DropdownMenuItem>
+													</DropdownMenuContent>
+												</DropdownMenu>
+											</TableCell>
+										</TableRow>
+									))}
+								</TableBody>
+							</Table>
+						</div>
+
+						<Pagination
+							total={total}
+							showing={forms.length}
+							hasMore={hasMore}
+							isLoadingMore={isLoadingMore}
+							onLoadMore={loadMore}
+						/>
+					</>
+				)}
+			</div>
+
+			{/* Delete confirmation dialog */}
+			<AlertDialog open={!!deleteId} onOpenChange={() => setDeleteId(null)}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete Form</AlertDialogTitle>
+						<AlertDialogDescription>
+							{loc.FORM_BUILDER_EDITOR_DELETE_CONFIRM}
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>
+							{loc.FORM_BUILDER_BUTTON_CANCEL}
+						</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={handleDelete}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							{deleteMutation.isPending
+								? loc.FORM_BUILDER_STATUS_DELETING
+								: loc.FORM_BUILDER_BUTTON_DELETE}
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</PageWrapper>
+	);
+}

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

@@ -0,0 +1,22 @@
+"use client";
+
+import { lazy, Suspense } from "react";
+import { FormListSkeleton } from "../loading/form-list-skeleton";
+import { ErrorBoundary } from "react-error-boundary";
+import { DefaultError } from "../shared/default-error";
+
+const FormListPage = lazy(() =>
+	import("./form-list-page.internal").then((m) => ({
+		default: m.FormListPage,
+	})),
+);
+
+export function FormListPageComponent() {
+	return (
+		<ErrorBoundary FallbackComponent={DefaultError}>
+			<Suspense fallback={<FormListSkeleton />}>
+				<FormListPage />
+			</Suspense>
+		</ErrorBoundary>
+	);
+}

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

@@ -0,0 +1,268 @@
+"use client";
+
+import { useState } from "react";
+import { usePluginOverrides, useBasePath } from "@btst/stack/context";
+import { Button } from "@workspace/ui/components/button";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@workspace/ui/components/table";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@workspace/ui/components/alert-dialog";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+} from "@workspace/ui/components/dialog";
+import { ArrowLeft, Trash2, Eye } from "lucide-react";
+import { toast } from "sonner";
+
+import {
+	useSuspenseFormById,
+	useSuspenseSubmissions,
+	useDeleteSubmission,
+} from "../../hooks/form-builder-hooks";
+import type { FormBuilderPluginOverrides } from "../../overrides";
+import { FORM_BUILDER_LOCALIZATION } from "../../localization";
+import type { SerializedFormSubmissionWithData } from "../../../types";
+import { PageWrapper } from "../shared/page-wrapper";
+import { EmptyState } from "../shared/empty-state";
+import { Pagination } from "../shared/pagination";
+
+export interface SubmissionsPageProps {
+	formId: string;
+}
+
+export function SubmissionsPage({ formId }: SubmissionsPageProps) {
+	const { navigate, Link, localization } = usePluginOverrides<
+		FormBuilderPluginOverrides,
+		Partial<FormBuilderPluginOverrides>
+	>("form-builder", {
+		localization: FORM_BUILDER_LOCALIZATION,
+	});
+	const basePath = useBasePath();
+
+	const { form } = useSuspenseFormById(formId);
+	const { submissions, total, hasMore, isLoadingMore, loadMore, refetch } =
+		useSuspenseSubmissions(formId);
+	const deleteMutation = useDeleteSubmission(formId);
+
+	const [deleteId, setDeleteId] = useState<string | null>(null);
+	const [viewSubmission, setViewSubmission] =
+		useState<SerializedFormSubmissionWithData | null>(null);
+
+	const loc = localization || FORM_BUILDER_LOCALIZATION;
+	const LinkComponent = Link || "a";
+
+	const handleDelete = async () => {
+		if (!deleteId) return;
+
+		try {
+			await deleteMutation.mutateAsync(deleteId);
+			toast.success(loc.FORM_BUILDER_TOAST_SUBMISSION_DELETED);
+			setDeleteId(null);
+			await refetch();
+		} catch (error) {
+			toast.error(loc.FORM_BUILDER_TOAST_ERROR);
+		}
+	};
+
+	const formatSubmissionData = (data: Record<string, unknown>) => {
+		const entries = Object.entries(data).slice(0, 3);
+		return entries
+			.map(([key, value]) => {
+				const strValue =
+					typeof value === "string" ? value : JSON.stringify(value);
+				const truncated =
+					strValue.length > 30 ? `${strValue.slice(0, 30)}...` : strValue;
+				return `${key}: ${truncated}`;
+			})
+			.join(", ");
+	};
+
+	return (
+		<PageWrapper testId="submissions-page">
+			<div className="w-full max-w-5xl space-y-6">
+				<div className="flex items-center gap-4">
+					<Button variant="ghost" size="icon" asChild>
+						<LinkComponent href={`${basePath}/forms`}>
+							<ArrowLeft className="h-4 w-4" />
+						</LinkComponent>
+					</Button>
+					<div>
+						<h1 className="text-2xl font-bold">
+							{form?.name || loc.FORM_BUILDER_SUBMISSIONS_TITLE}
+						</h1>
+						<p className="text-muted-foreground">
+							{loc.FORM_BUILDER_SUBMISSIONS_SUBTITLE}
+						</p>
+					</div>
+				</div>
+
+				{submissions.length === 0 ? (
+					<EmptyState
+						title={loc.FORM_BUILDER_SUBMISSIONS_EMPTY}
+						description={loc.FORM_BUILDER_SUBMISSIONS_EMPTY_DESCRIPTION}
+					/>
+				) : (
+					<>
+						<div className="rounded-lg border">
+							<Table>
+								<TableHeader>
+									<TableRow>
+										<TableHead className="w-24">
+											{loc.FORM_BUILDER_SUBMISSIONS_COLUMN_ID}
+										</TableHead>
+										<TableHead>
+											{loc.FORM_BUILDER_SUBMISSIONS_COLUMN_DATA}
+										</TableHead>
+										<TableHead>
+											{loc.FORM_BUILDER_SUBMISSIONS_COLUMN_SUBMITTED_AT}
+										</TableHead>
+										<TableHead>
+											{loc.FORM_BUILDER_SUBMISSIONS_COLUMN_IP_ADDRESS}
+										</TableHead>
+										<TableHead className="w-24">
+											{loc.FORM_BUILDER_SUBMISSIONS_COLUMN_ACTIONS}
+										</TableHead>
+									</TableRow>
+								</TableHeader>
+								<TableBody>
+									{submissions.map((sub) => (
+										<TableRow key={sub.id}>
+											<TableCell className="font-mono text-xs">
+												{sub.id.slice(0, 8)}...
+											</TableCell>
+											<TableCell className="max-w-xs truncate text-sm text-muted-foreground">
+												{formatSubmissionData(sub.parsedData)}
+											</TableCell>
+											<TableCell className="text-muted-foreground">
+												{new Date(sub.submittedAt).toLocaleString()}
+											</TableCell>
+											<TableCell className="text-muted-foreground font-mono text-xs">
+												{sub.ipAddress || "-"}
+											</TableCell>
+											<TableCell>
+												<div className="flex gap-1">
+													<Button
+														variant="ghost"
+														size="icon"
+														onClick={() => setViewSubmission(sub)}
+													>
+														<Eye className="h-4 w-4" />
+														<span className="sr-only">View</span>
+													</Button>
+													<Button
+														variant="ghost"
+														size="icon"
+														className="text-destructive"
+														onClick={() => setDeleteId(sub.id)}
+													>
+														<Trash2 className="h-4 w-4" />
+														<span className="sr-only">Delete</span>
+													</Button>
+												</div>
+											</TableCell>
+										</TableRow>
+									))}
+								</TableBody>
+							</Table>
+						</div>
+
+						<Pagination
+							total={total}
+							showing={submissions.length}
+							hasMore={hasMore}
+							isLoadingMore={isLoadingMore}
+							onLoadMore={loadMore}
+						/>
+					</>
+				)}
+			</div>
+
+			{/* View submission dialog */}
+			<Dialog
+				open={!!viewSubmission}
+				onOpenChange={() => setViewSubmission(null)}
+			>
+				<DialogContent className="max-w-2xl max-h-[80vh] overflow-auto">
+					<DialogHeader>
+						<DialogTitle>Submission Details</DialogTitle>
+					</DialogHeader>
+					{viewSubmission && (
+						<div className="space-y-4">
+							<div className="grid grid-cols-2 gap-4 text-sm">
+								<div>
+									<span className="text-muted-foreground">ID:</span>
+									<p className="font-mono truncate">{viewSubmission.id}</p>
+								</div>
+								<div>
+									<span className="text-muted-foreground">Submitted:</span>
+									<p className="truncate">
+										{new Date(viewSubmission.submittedAt).toLocaleString()}
+									</p>
+								</div>
+								<div>
+									<span className="text-muted-foreground">IP Address:</span>
+									<p className="font-mono truncate">
+										{viewSubmission.ipAddress || "-"}
+									</p>
+								</div>
+								<div>
+									<span className="text-muted-foreground">User Agent:</span>
+									<p className="text-xs truncate">
+										{viewSubmission.userAgent || "-"}
+									</p>
+								</div>
+							</div>
+							<div>
+								<span className="text-muted-foreground text-sm">Data:</span>
+								<pre className="mt-2 p-4 bg-muted rounded-lg text-sm overflow-auto">
+									{JSON.stringify(viewSubmission.parsedData, null, 2)}
+								</pre>
+							</div>
+						</div>
+					)}
+				</DialogContent>
+			</Dialog>
+
+			{/* Delete confirmation dialog */}
+			<AlertDialog open={!!deleteId} onOpenChange={() => setDeleteId(null)}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete Submission</AlertDialogTitle>
+						<AlertDialogDescription>
+							{loc.FORM_BUILDER_SUBMISSIONS_DELETE_CONFIRM}
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>
+							{loc.FORM_BUILDER_BUTTON_CANCEL}
+						</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={handleDelete}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							{deleteMutation.isPending
+								? loc.FORM_BUILDER_STATUS_DELETING
+								: loc.FORM_BUILDER_BUTTON_DELETE}
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</PageWrapper>
+	);
+}

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

@@ -0,0 +1,26 @@
+"use client";
+
+import { lazy, Suspense } from "react";
+import { SubmissionsSkeleton } from "../loading/submissions-skeleton";
+import { ErrorBoundary } from "react-error-boundary";
+import { DefaultError } from "../shared/default-error";
+
+const SubmissionsPage = lazy(() =>
+	import("./submissions-page.internal").then((m) => ({
+		default: m.SubmissionsPage,
+	})),
+);
+
+export interface SubmissionsPageProps {
+	formId: string;
+}
+
+export function SubmissionsPageComponent({ formId }: SubmissionsPageProps) {
+	return (
+		<ErrorBoundary FallbackComponent={DefaultError}>
+			<Suspense fallback={<SubmissionsSkeleton />}>
+				<SubmissionsPage formId={formId} />
+			</Suspense>
+		</ErrorBoundary>
+	);
+}

package/src/plugins/form-builder/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/form-builder/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>
+	);
+}

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

@@ -0,0 +1,32 @@
+"use client";
+
+import { usePluginOverrides } from "@btst/stack/context";
+import { PageWrapper as SharedPageWrapper } from "@workspace/ui/components/page-wrapper";
+import type { FormBuilderPluginOverrides } from "../../overrides";
+
+export function PageWrapper({
+	children,
+	className,
+	testId,
+}: {
+	children: React.ReactNode;
+	className?: string;
+	testId?: string;
+}) {
+	const { showAttribution } = usePluginOverrides<
+		FormBuilderPluginOverrides,
+		Partial<FormBuilderPluginOverrides>
+	>("form-builder", {
+		showAttribution: true,
+	});
+
+	return (
+		<SharedPageWrapper
+			className={className}
+			testId={testId}
+			showAttribution={showAttribution}
+		>
+			{children}
+		</SharedPageWrapper>
+	);
+}

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

@@ -0,0 +1,52 @@
+"use client";
+
+import { Button } from "@workspace/ui/components/button";
+import { ChevronRight } from "lucide-react";
+
+interface PaginationProps {
+	total: number;
+	showing: number;
+	hasMore: boolean;
+	isLoadingMore: boolean;
+	onLoadMore: () => void;
+	labels?: {
+		showing?: string;
+		previous?: string;
+		next?: string;
+	};
+}
+
+export function Pagination({
+	total,
+	showing,
+	hasMore,
+	isLoadingMore,
+	onLoadMore,
+	labels = {},
+}: PaginationProps) {
+	const {
+		showing: showingLabel = "Showing {count} of {total}",
+		next = "Load More",
+	} = labels;
+
+	const showingText = showingLabel
+		.replace("{count}", String(showing))
+		.replace("{total}", String(total));
+
+	return (
+		<div className="flex items-center justify-between py-4">
+			<p className="text-sm text-muted-foreground">{showingText}</p>
+			{hasMore && (
+				<Button
+					variant="outline"
+					size="sm"
+					onClick={onLoadMore}
+					disabled={isLoadingMore}
+				>
+					{isLoadingMore ? "Loading..." : next}
+					<ChevronRight className="ml-2 h-4 w-4" />
+				</Button>
+			)}
+		</div>
+	);
+}