@btst/stack 1.5.2 → 1.6.0

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

@@ -0,0 +1,253 @@
+"use client";
+
+import { useState, useMemo, type ComponentType } from "react";
+import { usePluginOverrides } from "@btst/stack/context";
+import { SteppedAutoForm } from "@workspace/ui/components/auto-form/stepped-auto-form";
+import { buildFieldConfigFromJsonSchema } from "@workspace/ui/components/auto-form/utils";
+import { formSchemaToZod } from "@workspace/ui/lib/schema-converter";
+import { Skeleton } from "@workspace/ui/components/skeleton";
+import { AlertCircle, CheckCircle } from "lucide-react";
+import type { AutoFormInputComponentProps } from "@workspace/ui/components/auto-form/types";
+
+import { useFormBySlug, useSubmitForm } from "../../hooks/form-builder-hooks";
+import type { FormBuilderPluginOverrides } from "../../overrides";
+import { FORM_BUILDER_LOCALIZATION } from "../../localization";
+import type { SerializedFormSubmission } from "../../../types";
+
+export interface FormRendererProps {
+	/** Form slug to render */
+	slug: string;
+	/** Callback when form submission succeeds */
+	onSuccess?: (
+		submission: SerializedFormSubmission & {
+			form: { successMessage?: string; redirectUrl?: string };
+		},
+	) => void;
+	/** Callback when form submission fails */
+	onError?: (error: Error) => void;
+	/** Custom field components (same as FormBuilder) */
+	fieldComponents?: Record<string, ComponentType<AutoFormInputComponentProps>>;
+	/** Override success message */
+	successMessage?: React.ReactNode;
+	/** Override submit button text */
+	submitButtonText?: string;
+	/** Custom loading component */
+	LoadingComponent?: ComponentType;
+	/** Custom error component */
+	ErrorComponent?: ComponentType<{ error: Error }>;
+	/** Class name for the form container */
+	className?: string;
+}
+
+function DefaultLoadingComponent() {
+	return (
+		<div className="space-y-4">
+			<Skeleton className="h-10 w-full" />
+			<Skeleton className="h-10 w-full" />
+			<Skeleton className="h-10 w-full" />
+			<Skeleton className="h-10 w-32" />
+		</div>
+	);
+}
+
+function DefaultErrorComponent({ error }: { error: Error }) {
+	return (
+		<div className="flex flex-col items-center justify-center py-8 text-center">
+			<div className="rounded-full bg-destructive/10 p-3 mb-4">
+				<AlertCircle className="h-6 w-6 text-destructive" />
+			</div>
+			<h3 className="text-lg font-medium text-foreground mb-2">
+				Failed to load form
+			</h3>
+			<p className="text-sm text-muted-foreground max-w-sm">
+				{error.message || "An unexpected error occurred"}
+			</p>
+		</div>
+	);
+}
+
+function DefaultSuccessComponent({ message }: { message: React.ReactNode }) {
+	return (
+		<div className="flex flex-col items-center justify-center py-8 text-center">
+			<div className="rounded-full bg-green-100 dark:bg-green-900 p-3 mb-4">
+				<CheckCircle className="h-6 w-6 text-green-600 dark:text-green-400" />
+			</div>
+			<h3 className="text-lg font-medium text-foreground mb-2">
+				Form Submitted
+			</h3>
+			<p className="text-sm text-muted-foreground max-w-sm">{message}</p>
+		</div>
+	);
+}
+
+/**
+ * FormRenderer component for rendering forms on the frontend.
+ *
+ * Uses SteppedAutoForm which automatically handles both single-step and multi-step forms.
+ *
+ * @example
+ * ```tsx
+ * <FormRenderer
+ *   slug="contact-form"
+ *   onSuccess={() => {
+ *     toast.success("Thank you!");
+ *   }}
+ *   onError={(error) => {
+ *     toast.error("Something went wrong");
+ *   }}
+ * />
+ * ```
+ */
+export function FormRenderer({
+	slug,
+	onSuccess,
+	onError,
+	fieldComponents: propFieldComponents,
+	successMessage: propSuccessMessage,
+	submitButtonText,
+	LoadingComponent = DefaultLoadingComponent,
+	ErrorComponent = DefaultErrorComponent,
+	className,
+}: FormRendererProps) {
+	const { fieldComponents: overrideFieldComponents, localization } =
+		usePluginOverrides<
+			FormBuilderPluginOverrides,
+			Partial<FormBuilderPluginOverrides>
+		>("form-builder", {
+			localization: FORM_BUILDER_LOCALIZATION,
+		});
+
+	const loc = localization || FORM_BUILDER_LOCALIZATION;
+
+	const { form, isLoading, error } = useFormBySlug(slug);
+	const submitMutation = useSubmitForm(slug);
+
+	const [submitted, setSubmitted] = useState(false);
+	const [finalSuccessMessage, setFinalSuccessMessage] = useState<string | null>(
+		null,
+	);
+
+	// Merge field components from props and overrides
+	const mergedFieldComponents = useMemo(
+		() => ({
+			...overrideFieldComponents,
+			...propFieldComponents,
+		}),
+		[overrideFieldComponents, propFieldComponents],
+	);
+
+	// Parse JSON Schema and create Zod schema
+	const { zodSchema, fieldConfig } = useMemo(() => {
+		if (!form?.schema) {
+			return { zodSchema: null, fieldConfig: {} };
+		}
+
+		try {
+			const parsedSchema = JSON.parse(form.schema);
+			const zod = formSchemaToZod(parsedSchema);
+			const config = buildFieldConfigFromJsonSchema(
+				parsedSchema,
+				mergedFieldComponents,
+			);
+
+			return { zodSchema: zod, fieldConfig: config };
+		} catch {
+			return { zodSchema: null, fieldConfig: {} };
+		}
+	}, [form?.schema, mergedFieldComponents]);
+
+	const handleSubmit = async (data: Record<string, unknown>) => {
+		try {
+			const result = await submitMutation.mutateAsync({ data });
+
+			// Set success message
+			const message =
+				propSuccessMessage ||
+				result.form.successMessage ||
+				"Thank you for your submission!";
+			setFinalSuccessMessage(message as string);
+			setSubmitted(true);
+
+			// Call onSuccess callback before any redirect
+			onSuccess?.(result);
+
+			// Handle redirect
+			if (result.form.redirectUrl) {
+				window.location.href = result.form.redirectUrl;
+				return;
+			}
+		} catch (err) {
+			onError?.(err as Error);
+		}
+	};
+
+	// Loading state
+	if (isLoading) {
+		return (
+			<div className={className}>
+				<LoadingComponent />
+			</div>
+		);
+	}
+
+	// Error state
+	if (error) {
+		return (
+			<div className={className}>
+				<ErrorComponent error={error} />
+			</div>
+		);
+	}
+
+	// Form not found
+	if (!form) {
+		return (
+			<div className={className}>
+				<ErrorComponent error={new Error("Form not found")} />
+			</div>
+		);
+	}
+
+	// Form not active
+	if (form.status !== "active") {
+		return (
+			<div className={className}>
+				<ErrorComponent
+					error={new Error("This form is not currently accepting submissions")}
+				/>
+			</div>
+		);
+	}
+
+	// Schema parsing failed
+	if (!zodSchema) {
+		return (
+			<div className={className}>
+				<ErrorComponent error={new Error("Failed to parse form schema")} />
+			</div>
+		);
+	}
+
+	// Success state
+	if (submitted && finalSuccessMessage) {
+		return (
+			<div className={className}>
+				<DefaultSuccessComponent message={finalSuccessMessage} />
+			</div>
+		);
+	}
+
+	// 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 || loc.FORM_BUILDER_BUTTON_SUBMIT}
+			/>
+		</div>
+	);
+}

package/src/plugins/form-builder/client/components/index.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { FormListPageComponent as FormListPageImpl } from "./pages/form-list-page";
+import { FormBuilderPageComponent as FormBuilderPageImpl } from "./pages/form-builder-page";
+import { SubmissionsPageComponent as SubmissionsPageImpl } from "./pages/submissions-page";
+import { FormRenderer as FormRendererImpl } from "./forms/form-renderer";
+
+// Re-export to ensure the client boundary is preserved
+export const FormListPage = FormListPageImpl;
+export const FormBuilderPage = FormBuilderPageImpl;
+export const SubmissionsPage = SubmissionsPageImpl;
+export const FormRenderer = FormRendererImpl;
+
+// Export loading skeletons
+export {
+	FormListSkeleton,
+	FormBuilderSkeleton,
+	SubmissionsSkeleton,
+} from "./loading";
+
+// Export shared components
+export { DefaultError } from "./shared/default-error";
+export { EmptyState } from "./shared/empty-state";
+export { NotFoundPage } from "./pages/404-page";

package/src/plugins/form-builder/client/components/loading/form-builder-skeleton.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { Skeleton } from "@workspace/ui/components/skeleton";
+
+export function FormBuilderSkeleton() {
+	return (
+		<div className="flex h-full flex-col" data-testid="form-builder-skeleton">
+			{/* Header */}
+			<div className="flex items-center gap-4 border-b p-4">
+				<Skeleton className="h-10 w-48" />
+				<Skeleton className="h-10 w-32" />
+				<div className="ml-auto">
+					<Skeleton className="h-10 w-24" />
+				</div>
+			</div>
+
+			{/* Main content */}
+			<div className="flex flex-1">
+				{/* Palette */}
+				<div className="w-64 border-r p-4 space-y-4">
+					<Skeleton className="h-6 w-24" />
+					{Array.from({ length: 8 }).map((_, i) => (
+						<Skeleton key={i} className="h-12 rounded-lg" />
+					))}
+				</div>
+
+				{/* Canvas */}
+				<div className="flex-1 p-4 space-y-4">
+					<Skeleton className="h-6 w-32" />
+					<Skeleton className="h-48 rounded-lg" />
+					<Skeleton className="h-24 rounded-lg" />
+				</div>
+
+				{/* Preview panel */}
+				<div className="w-80 border-l p-4 space-y-4">
+					<Skeleton className="h-6 w-20" />
+					<Skeleton className="h-full rounded-lg" />
+				</div>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,25 @@
+"use client";
+
+import { Skeleton } from "@workspace/ui/components/skeleton";
+import { PageWrapper } from "../shared/page-wrapper";
+
+export function FormListSkeleton() {
+	return (
+		<PageWrapper testId="form-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-32" />
+						<Skeleton className="h-4 w-48" />
+					</div>
+					<Skeleton className="h-10 w-28" />
+				</div>
+				<div className="space-y-4">
+					{Array.from({ length: 5 }).map((_, i) => (
+						<Skeleton key={i} className="h-16 rounded-lg" />
+					))}
+				</div>
+			</div>
+		</PageWrapper>
+	);
+}

package/src/plugins/form-builder/client/components/loading/index.tsx

@@ -0,0 +1,3 @@
+export { FormListSkeleton } from "./form-list-skeleton";
+export { FormBuilderSkeleton } from "./form-builder-skeleton";
+export { SubmissionsSkeleton } from "./submissions-skeleton";

package/src/plugins/form-builder/client/components/loading/submissions-skeleton.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Skeleton } from "@workspace/ui/components/skeleton";
+import { PageWrapper } from "../shared/page-wrapper";
+
+export function SubmissionsSkeleton() {
+	return (
+		<PageWrapper testId="submissions-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-64" />
+					</div>
+					<Skeleton className="h-10 w-32" />
+				</div>
+				<div className="rounded-lg border">
+					<div className="border-b p-4">
+						<div className="flex gap-4">
+							<Skeleton className="h-4 w-24" />
+							<Skeleton className="h-4 w-48" />
+							<Skeleton className="h-4 w-32" />
+							<Skeleton className="h-4 w-20" />
+						</div>
+					</div>
+					{Array.from({ length: 5 }).map((_, i) => (
+						<div key={i} className="border-b p-4 last:border-0">
+							<div className="flex gap-4">
+								<Skeleton className="h-4 w-24" />
+								<Skeleton className="h-4 w-48" />
+								<Skeleton className="h-4 w-32" />
+								<Skeleton className="h-4 w-20" />
+							</div>
+						</div>
+					))}
+				</div>
+			</div>
+		</PageWrapper>
+	);
+}

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

@@ -0,0 +1,28 @@
+"use client";
+
+import { Button } from "@workspace/ui/components/button";
+import { usePluginOverrides, useBasePath } from "@btst/stack/context";
+import type { FormBuilderPluginOverrides } from "../../overrides";
+
+export function NotFoundPage() {
+	const { navigate, Link } =
+		usePluginOverrides<FormBuilderPluginOverrides>("form-builder");
+	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}/forms`}>Back to Forms</LinkComponent>
+			</Button>
+		</div>
+	);
+}

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

@@ -0,0 +1,253 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { usePluginOverrides, useBasePath } from "@btst/stack/context";
+import { Button } from "@workspace/ui/components/button";
+import { Input } from "@workspace/ui/components/input";
+import { Label } from "@workspace/ui/components/label";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@workspace/ui/components/select";
+import { ArrowLeft, Save } from "lucide-react";
+import { toast } from "sonner";
+import { FormBuilder } from "@workspace/ui/components/form-builder";
+import type { JSONSchema } from "@workspace/ui/components/form-builder/types";
+
+import {
+	useSuspenseFormById,
+	useCreateForm,
+	useUpdateForm,
+} from "../../hooks/form-builder-hooks";
+import type { FormBuilderPluginOverrides } from "../../overrides";
+import { FORM_BUILDER_LOCALIZATION } from "../../localization";
+import { slugify } from "../../../utils";
+import type { SerializedForm } from "../../../types";
+
+export interface FormBuilderPageProps {
+	id?: string;
+}
+
+/**
+ * Entry point component that conditionally renders the appropriate
+ * sub-component based on whether we're creating or editing a form.
+ * This avoids conditional hook calls which violate React's Rules of Hooks.
+ */
+export function FormBuilderPage({ id }: FormBuilderPageProps) {
+	if (id) {
+		return <EditFormBuilderPage id={id} />;
+	}
+	return <CreateFormBuilderPage />;
+}
+
+/**
+ * Component for editing an existing form.
+ * Uses useSuspenseFormById unconditionally since id is always defined.
+ */
+function EditFormBuilderPage({ id }: { id: string }) {
+	const { form: existingForm } = useSuspenseFormById(id);
+	return <FormBuilderPageContent id={id} existingForm={existingForm} />;
+}
+
+/**
+ * Component for creating a new form.
+ * No data fetching needed.
+ */
+function CreateFormBuilderPage() {
+	return <FormBuilderPageContent />;
+}
+
+interface FormBuilderPageContentProps {
+	id?: string;
+	existingForm?: SerializedForm | null;
+}
+
+function FormBuilderPageContent({
+	id,
+	existingForm,
+}: FormBuilderPageContentProps) {
+	const { navigate, Link, localization } = usePluginOverrides<
+		FormBuilderPluginOverrides,
+		Partial<FormBuilderPluginOverrides>
+	>("form-builder", {
+		localization: FORM_BUILDER_LOCALIZATION,
+	});
+	const basePath = useBasePath();
+
+	const createMutation = useCreateForm();
+	const updateMutation = useUpdateForm();
+
+	const loc = localization || FORM_BUILDER_LOCALIZATION;
+	const LinkComponent = Link || "a";
+
+	// 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",
+	);
+	const [schema, setSchema] = useState<JSONSchema | undefined>(() => {
+		if (existingForm?.schema) {
+			try {
+				return JSON.parse(existingForm.schema) as JSONSchema;
+			} catch {
+				return undefined;
+			}
+		}
+		return undefined;
+	});
+
+	// Auto-generate slug from name
+	const [autoSlug, setAutoSlug] = useState(!id);
+
+	useEffect(() => {
+		if (autoSlug && name) {
+			setSlug(slugify(name));
+		}
+	}, [name, autoSlug]);
+
+	const handleSchemaChange = useCallback((newSchema: JSONSchema) => {
+		setSchema(newSchema);
+	}, []);
+
+	const handleSave = async () => {
+		if (!name.trim()) {
+			toast.error("Name is required");
+			return;
+		}
+		if (!slug.trim()) {
+			toast.error("Slug is required");
+			return;
+		}
+		if (!schema) {
+			toast.error("Please add at least one field to the form");
+			return;
+		}
+
+		try {
+			const schemaStr = JSON.stringify(schema);
+
+			if (id) {
+				await updateMutation.mutateAsync({
+					id,
+					data: {
+						name,
+						schema: schemaStr,
+						status,
+					},
+				});
+				toast.success(loc.FORM_BUILDER_TOAST_UPDATE_SUCCESS);
+			} else {
+				const newForm = await createMutation.mutateAsync({
+					name,
+					slug,
+					schema: schemaStr,
+					status,
+				});
+				toast.success(loc.FORM_BUILDER_TOAST_CREATE_SUCCESS);
+				navigate?.(`${basePath}/forms/${newForm.id}/edit`);
+			}
+		} catch (error) {
+			const message = error instanceof Error ? error.message : "Unknown error";
+			if (message.includes("slug already exists")) {
+				toast.error(loc.FORM_BUILDER_TOAST_DUPLICATE_SLUG);
+			} else {
+				toast.error(loc.FORM_BUILDER_TOAST_ERROR);
+			}
+		}
+	};
+
+	const isSaving = createMutation.isPending || updateMutation.isPending;
+
+	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`}>
+						<ArrowLeft className="h-4 w-4" />
+					</LinkComponent>
+				</Button>
+
+				<div className="flex flex-col gap-1">
+					<Label htmlFor="form-name" className="text-xs text-muted-foreground">
+						{loc.FORM_BUILDER_LABEL_NAME}
+					</Label>
+					<Input
+						id="form-name"
+						value={name}
+						onChange={(e) => setName(e.target.value)}
+						placeholder={loc.FORM_BUILDER_EDITOR_NAME_PLACEHOLDER}
+						className="h-8 w-48"
+					/>
+				</div>
+
+				<div className="flex flex-col gap-1">
+					<Label htmlFor="form-slug" className="text-xs text-muted-foreground">
+						{loc.FORM_BUILDER_LABEL_SLUG}
+					</Label>
+					<Input
+						id="form-slug"
+						value={slug}
+						onChange={(e) => {
+							setSlug(e.target.value);
+							setAutoSlug(false);
+						}}
+						placeholder={loc.FORM_BUILDER_EDITOR_SLUG_PLACEHOLDER}
+						className="h-8 w-48 font-mono text-sm"
+						disabled={!!id}
+					/>
+				</div>
+
+				<div className="flex flex-col gap-1">
+					<Label
+						htmlFor="form-status"
+						className="text-xs text-muted-foreground"
+					>
+						{loc.FORM_BUILDER_LABEL_STATUS}
+					</Label>
+					<Select
+						value={status}
+						onValueChange={(v) => setStatus(v as typeof status)}
+					>
+						<SelectTrigger className="h-8 w-28">
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value="active">
+								{loc.FORM_BUILDER_STATUS_ACTIVE}
+							</SelectItem>
+							<SelectItem value="inactive">
+								{loc.FORM_BUILDER_STATUS_INACTIVE}
+							</SelectItem>
+							<SelectItem value="archived">
+								{loc.FORM_BUILDER_STATUS_ARCHIVED}
+							</SelectItem>
+						</SelectContent>
+					</Select>
+				</div>
+
+				<div className="ml-auto">
+					<Button onClick={handleSave} disabled={isSaving}>
+						<Save className="mr-2 h-4 w-4" />
+						{isSaving
+							? loc.FORM_BUILDER_STATUS_SAVING
+							: id
+								? loc.FORM_BUILDER_BUTTON_SAVE
+								: loc.FORM_BUILDER_BUTTON_CREATE}
+					</Button>
+				</div>
+			</div>
+
+			{/* Form Builder */}
+			<FormBuilder
+				value={schema}
+				onChange={handleSchemaChange}
+				className="flex-1"
+			/>
+		</div>
+	);
+}

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

@@ -0,0 +1,26 @@
+"use client";
+
+import { lazy, Suspense } from "react";
+import { FormBuilderSkeleton } from "../loading/form-builder-skeleton";
+import { ErrorBoundary } from "react-error-boundary";
+import { DefaultError } from "../shared/default-error";
+
+const FormBuilderPage = lazy(() =>
+	import("./form-builder-page.internal").then((m) => ({
+		default: m.FormBuilderPage,
+	})),
+);
+
+export interface FormBuilderPageProps {
+	id?: string;
+}
+
+export function FormBuilderPageComponent({ id }: FormBuilderPageProps) {
+	return (
+		<ErrorBoundary FallbackComponent={DefaultError}>
+			<Suspense fallback={<FormBuilderSkeleton />}>
+				<FormBuilderPage id={id} />
+			</Suspense>
+		</ErrorBoundary>
+	);
+}