@btst/stack 2.12.2 → 3.0.0-rc.1

package/src/plugins/form-builder/client/hooks/form-builder-resource.ts

@@ -0,0 +1,14 @@
+"use client";
+
+import { createResource } from "@btst/stack/plugins/client/hooks";
+import { formBuilderResources } from "../../query-keys";
+
+/**
+ * Factory-generated Form Builder resource hooks. Internal — the public hook
+ * surface (`useForms`, `useFormById`, ...) in `form-builder-hooks.tsx` wraps
+ * these.
+ */
+export const formBuilder = createResource({
+	plugin: "form-builder",
+	resources: formBuilderResources,
+});

package/src/plugins/form-builder/client/localization/form-builder-common.ts

@@ -31,6 +31,12 @@ export const FORM_BUILDER_COMMON = {
 	FORM_BUILDER_ERROR_NOT_FOUND: "Not found",
 	FORM_BUILDER_ERROR_VALIDATION: "Please fix the errors above",
 
+	// 404 page
+	FORM_BUILDER_404_TITLE: "Page not found",
+	FORM_BUILDER_404_DESCRIPTION:
+		"The page you're looking for doesn't exist or has been moved.",
+	FORM_BUILDER_404_BACK: "Back to Forms",
+
 	// Attribution
 	FORM_BUILDER_ATTRIBUTION: "Powered by BTST",
 };

package/src/plugins/form-builder/client/localization/form-builder-list.ts

@@ -11,7 +11,11 @@ export const FORM_BUILDER_LIST = {
 	FORM_BUILDER_LIST_ACTION_EDIT: "Edit",
 	FORM_BUILDER_LIST_ACTION_DELETE: "Delete",
 	FORM_BUILDER_LIST_ACTION_SUBMISSIONS: "Submissions",
-	FORM_BUILDER_LIST_PAGINATION_SHOWING: "Showing {from}-{to} of {total}",
+	FORM_BUILDER_LIST_DELETE_TITLE: "Delete Form",
+	FORM_BUILDER_LIST_SEARCH_PLACEHOLDER: "Search forms...",
+	FORM_BUILDER_LIST_SEARCH_EMPTY: "No forms match your search",
+	FORM_BUILDER_LIST_SEARCH_EMPTY_DESCRIPTION: "Try a different search term.",
+	FORM_BUILDER_LIST_PAGINATION_SHOWING: "Showing {count} of {total}",
 	FORM_BUILDER_LIST_PAGINATION_PREVIOUS: "Previous",
-	FORM_BUILDER_LIST_PAGINATION_NEXT: "Next",
+	FORM_BUILDER_LIST_PAGINATION_NEXT: "Load More",
 };

package/src/plugins/form-builder/client/localization/form-builder-renderer.ts

@@ -0,0 +1,10 @@
+export const FORM_BUILDER_RENDERER = {
+	FORM_BUILDER_RENDERER_LOAD_FAILED: "Failed to load form",
+	FORM_BUILDER_RENDERER_UNEXPECTED_ERROR: "An unexpected error occurred",
+	FORM_BUILDER_RENDERER_SUBMITTED_TITLE: "Form Submitted",
+	FORM_BUILDER_RENDERER_NOT_FOUND: "Form not found",
+	FORM_BUILDER_RENDERER_INACTIVE:
+		"This form is not currently accepting submissions",
+	FORM_BUILDER_RENDERER_SCHEMA_ERROR: "Failed to parse form schema",
+	FORM_BUILDER_RENDERER_THANK_YOU: "Thank you for your submission!",
+};

package/src/plugins/form-builder/client/localization/form-builder-submissions.ts

@@ -11,7 +11,14 @@ export const FORM_BUILDER_SUBMISSIONS = {
 	FORM_BUILDER_SUBMISSIONS_COLUMN_ACTIONS: "Actions",
 	FORM_BUILDER_SUBMISSIONS_ACTION_VIEW: "View",
 	FORM_BUILDER_SUBMISSIONS_ACTION_DELETE: "Delete",
+	FORM_BUILDER_SUBMISSIONS_DELETE_TITLE: "Delete Submission",
 	FORM_BUILDER_SUBMISSIONS_DELETE_CONFIRM:
 		"Are you sure you want to delete this submission?",
 	FORM_BUILDER_SUBMISSIONS_BACK_TO_FORM: "Back to Form",
+	FORM_BUILDER_SUBMISSIONS_DETAILS_TITLE: "Submission Details",
+	FORM_BUILDER_SUBMISSIONS_FIELD_ID: "ID:",
+	FORM_BUILDER_SUBMISSIONS_FIELD_SUBMITTED: "Submitted:",
+	FORM_BUILDER_SUBMISSIONS_FIELD_IP: "IP Address:",
+	FORM_BUILDER_SUBMISSIONS_FIELD_USER_AGENT: "User Agent:",
+	FORM_BUILDER_SUBMISSIONS_FIELD_DATA: "Data:",
 };

package/src/plugins/form-builder/client/localization/form-builder-toasts.ts

@@ -7,4 +7,8 @@ export const FORM_BUILDER_TOASTS = {
 	FORM_BUILDER_TOAST_VALIDATION_ERROR: "Please fix the validation errors",
 	FORM_BUILDER_TOAST_DUPLICATE_SLUG: "A form with this slug already exists",
 	FORM_BUILDER_TOAST_SUBMISSION_DELETED: "Submission deleted successfully",
+	FORM_BUILDER_TOAST_NAME_REQUIRED: "Name is required",
+	FORM_BUILDER_TOAST_SLUG_REQUIRED: "Slug is required",
+	FORM_BUILDER_TOAST_SCHEMA_REQUIRED:
+		"Please add at least one field to the form",
 };

package/src/plugins/form-builder/client/localization/index.ts

@@ -3,6 +3,7 @@ import { FORM_BUILDER_TOASTS } from "./form-builder-toasts";
 import { FORM_BUILDER_LIST } from "./form-builder-list";
 import { FORM_BUILDER_EDITOR } from "./form-builder-editor";
 import { FORM_BUILDER_SUBMISSIONS } from "./form-builder-submissions";
+import { FORM_BUILDER_RENDERER } from "./form-builder-renderer";
 
 export const FORM_BUILDER_LOCALIZATION = {
 	...FORM_BUILDER_COMMON,
@@ -10,6 +11,7 @@ export const FORM_BUILDER_LOCALIZATION = {
 	...FORM_BUILDER_LIST,
 	...FORM_BUILDER_EDITOR,
 	...FORM_BUILDER_SUBMISSIONS,
+	...FORM_BUILDER_RENDERER,
 };
 
 export type FormBuilderLocalization = typeof FORM_BUILDER_LOCALIZATION;

package/src/plugins/form-builder/client/overrides.ts

@@ -19,25 +19,10 @@ export interface RouteContext {
 /**
  * Overridable components and functions for the Form Builder plugin
  *
- * External consumers can provide their own implementations of these
- * to customize the behavior for their framework (Next.js, React Router, etc.)
+ * External consumers can provide their own implementations to customize
+ * plugin-specific components and behavior.
  */
 export interface FormBuilderPluginOverrides {
-	/**
-	 * Link component for navigation
-	 */
-	Link?: ComponentType<React.ComponentProps<"a"> & Record<string, unknown>>;
-
-	/**
-	 * Navigation function for programmatic navigation
-	 */
-	navigate: (path: string) => void | Promise<void>;
-
-	/**
-	 * Refresh function to invalidate server-side cache (e.g., Next.js router.refresh())
-	 */
-	refresh?: () => void | Promise<void>;
-
 	/**
 	 * Custom field components for AutoForm fields.
 	 *
@@ -71,16 +56,6 @@ export interface FormBuilderPluginOverrides {
 	 */
 	localization?: FormBuilderLocalization;
 
-	/**
-	 * API base URL
-	 */
-	apiBaseURL: string;
-
-	/**
-	 * API base path
-	 */
-	apiBasePath: string;
-
 	/**
 	 * Whether to show the attribution
 	 */
@@ -114,33 +89,4 @@ export interface FormBuilderPluginOverrides {
 		error: Error,
 		context: RouteContext,
 	) => void | Promise<void>;
-
-	/**
-	 * Called before the form list page is rendered
-	 * Return false to prevent rendering (e.g., for authorization)
-	 * @param context - Route context
-	 */
-	onBeforeFormListRendered?: (context: RouteContext) => boolean;
-
-	/**
-	 * Called before the form builder page is rendered
-	 * Return false to prevent rendering (e.g., for authorization)
-	 * @param id - The form ID (null for new forms)
-	 * @param context - Route context
-	 */
-	onBeforeFormBuilderRendered?: (
-		id: string | null,
-		context: RouteContext,
-	) => boolean;
-
-	/**
-	 * Called before the submissions page is rendered
-	 * Return false to prevent rendering (e.g., for authorization)
-	 * @param formId - The form ID
-	 * @param context - Route context
-	 */
-	onBeforeSubmissionsRendered?: (
-		formId: string,
-		context: RouteContext,
-	) => boolean;
 }

package/src/plugins/form-builder/client/plugin.tsx

@@ -4,9 +4,8 @@ import {
 	defineClientPlugin,
 	createApiClient,
 	isConnectionError,
-	runClientHookWithShim,
 } from "@btst/stack/plugins/client";
-import { createRoute } from "@btst/yar";
+import { defineRoute, defineRoutes } from "@btst/yar";
 import type { ComponentType } from "react";
 import type { QueryClient } from "@tanstack/react-query";
 import { createSanitizedSSRLoaderError } from "../../utils";
@@ -140,9 +139,9 @@ export interface FormBuilderClientConfig {
 		/** Replaces the new form page */
 		newForm?: ComponentType;
 		/** Replaces the form editor page */
-		editForm?: ComponentType<{ id: string }>;
+		editForm?: ComponentType<{ params: { id: string } }>;
 		/** Replaces the form submissions page */
-		submissions?: ComponentType<{ formId: string }>;
+		submissions?: ComponentType<{ params: { id: string } }>;
 	};
 }
 
@@ -167,36 +166,17 @@ function createFormListLoader(config: FormBuilderClientConfig) {
 			});
 			const queries = createFormBuilderQueryKeys(client, headers);
 			const limit = 20;
-			const listQuery = queries.forms.list({ limit, offset: 0 });
+			const listQuery = queries.forms.list({ limit });
 
 			try {
 				// Before hook - authorization check
 				if (hooks?.beforeLoadFormList) {
-					await runClientHookWithShim(
-						() => hooks.beforeLoadFormList!(context),
-						"Load prevented by beforeLoadFormList hook",
-					);
+					await hooks.beforeLoadFormList(context);
 				}
 
-				// Prefetch forms using infinite query
+				// Prefetch forms using infinite query (matches useSuspenseInfiniteQuery in hooks)
 				await queryClient.prefetchInfiniteQuery({
-					queryKey: listQuery.queryKey,
-					queryFn: async ({ pageParam = 0 }) => {
-						const response: unknown = await client("/forms", {
-							method: "GET",
-							query: { limit, offset: pageParam },
-							headers,
-						});
-						if (
-							typeof response === "object" &&
-							response !== null &&
-							"error" in response &&
-							response.error
-						) {
-							throw new Error(String(response.error));
-						}
-						return (response as { data?: unknown }).data;
-					},
+					...listQuery,
 					initialPageParam: 0,
 				});
 
@@ -269,10 +249,7 @@ function createFormBuilderLoader(
 			try {
 				// Before hook - authorization check
 				if (hooks?.beforeLoadFormBuilder) {
-					await runClientHookWithShim(
-						() => hooks.beforeLoadFormBuilder!(id, context),
-						"Load prevented by beforeLoadFormBuilder hook",
-					);
+					await hooks.beforeLoadFormBuilder(id, context);
 				}
 
 				// Prefetch form if editing
@@ -347,45 +324,18 @@ function createSubmissionsLoader(
 			const queries = createFormBuilderQueryKeys(client, headers);
 			const limit = 20;
 			const formQuery = queries.forms.byId(formId);
-			const submissionsQuery = queries.formSubmissions.list({
-				formId,
-				limit,
-				offset: 0,
-			});
+			const submissionsQuery = queries.formSubmissions.list({ formId, limit });
 
 			try {
 				// Before hook - authorization check
 				if (hooks?.beforeLoadSubmissions) {
-					await runClientHookWithShim(
-						() => hooks.beforeLoadSubmissions!(formId, context),
-						"Load prevented by beforeLoadSubmissions hook",
-					);
+					await hooks.beforeLoadSubmissions(formId, context);
 				}
 
 				// Prefetch form and submissions
 				await queryClient.prefetchQuery(formQuery);
 				await queryClient.prefetchInfiniteQuery({
-					queryKey: submissionsQuery.queryKey,
-					queryFn: async ({ pageParam = 0 }) => {
-						const response: unknown = await client(
-							"/forms/:formId/submissions",
-							{
-								method: "GET",
-								params: { formId },
-								query: { limit, offset: pageParam },
-								headers,
-							},
-						);
-						if (
-							typeof response === "object" &&
-							response !== null &&
-							"error" in response &&
-							response.error
-						) {
-							throw new Error(String(response.error));
-						}
-						return (response as { data?: unknown }).data;
-					},
+					...submissionsQuery,
 					initialPageParam: 0,
 				});
 
@@ -516,47 +466,39 @@ export const formBuilderClientPlugin = (config: FormBuilderClientConfig) =>
 	defineClientPlugin({
 		name: "form-builder",
 
-		routes: () => ({
-			formList: createRoute("/forms", () => {
-				const CustomFormList = config.pageComponents?.formList;
-				return {
-					PageComponent: CustomFormList ?? (() => <FormListPageComponent />),
-					loader: createFormListLoader(config),
-					meta: createFormListMeta(),
-				};
-			}),
-
-			newForm: createRoute("/forms/new", () => {
-				const CustomNewForm = config.pageComponents?.newForm;
-				return {
-					PageComponent: CustomNewForm ?? (() => <FormBuilderPageComponent />),
-					loader: createFormBuilderLoader(undefined, config),
-					meta: createFormBuilderMeta(undefined, config),
-				};
-			}),
-
-			editForm: createRoute("/forms/:id/edit", ({ params }) => {
-				const CustomEditForm = config.pageComponents?.editForm;
-				return {
-					PageComponent: CustomEditForm
-						? () => <CustomEditForm id={params.id} />
-						: () => <FormBuilderPageComponent id={params.id} />,
-					loader: createFormBuilderLoader(params.id, config),
-					meta: createFormBuilderMeta(params.id, config),
-				};
-			}),
-
-			submissions: createRoute("/forms/:id/submissions", ({ params }) => {
-				const CustomSubmissions = config.pageComponents?.submissions;
-				return {
-					PageComponent: CustomSubmissions
-						? () => <CustomSubmissions formId={params.id} />
-						: () => <SubmissionsPageComponent formId={params.id} />,
-					loader: createSubmissionsLoader(params.id, config),
-					meta: createSubmissionsMeta(params.id, config),
-				};
-			}),
-		}),
+		routes: () =>
+			defineRoutes(
+				{
+					formList: defineRoute("/forms", {
+						page: FormListPageComponent,
+						loader: createFormListLoader(config),
+						meta: createFormListMeta(),
+					}),
+
+					newForm: defineRoute("/forms/new", {
+						page: () => <FormBuilderPageComponent />,
+						loader: createFormBuilderLoader(undefined, config),
+						meta: createFormBuilderMeta(undefined, config),
+					}),
+
+					editForm: defineRoute("/forms/:id/edit", {
+						page: ({ params }) => <FormBuilderPageComponent id={params.id} />,
+						loader: ({ params }) =>
+							createFormBuilderLoader(params.id, config)(),
+						meta: ({ params }) => createFormBuilderMeta(params.id, config)(),
+					}),
+
+					submissions: defineRoute("/forms/:id/submissions", {
+						page: ({ params }) => (
+							<SubmissionsPageComponent formId={params.id} />
+						),
+						loader: ({ params }) =>
+							createSubmissionsLoader(params.id, config)(),
+						meta: ({ params }) => createSubmissionsMeta(params.id, config)(),
+					}),
+				},
+				{ pages: config.pageComponents },
+			),
 
 		sitemap: async () => {
 			// Form Builder admin pages should NOT be in sitemap