@btst/stack 1.5.2 → 1.7.0

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

@@ -0,0 +1 @@
+export * from "./form-builder-hooks";

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

@@ -0,0 +1,22 @@
+export { formBuilderClientPlugin } from "./plugin";
+export type {
+	FormBuilderClientConfig,
+	FormBuilderClientHooks,
+	LoaderContext,
+} from "./plugin";
+export type { FormBuilderPluginOverrides, RouteContext } from "./overrides";
+export type { FormBuilderLocalization } from "./localization";
+
+// Re-export AutoFormInputComponentProps for custom field components
+export type { AutoFormInputComponentProps } from "@workspace/ui/components/auto-form/types";
+
+// Re-export schema converter utilities
+export {
+	zodToFormSchema,
+	formSchemaToZod,
+	hasSteps,
+	getSteps,
+	getStepGroupMap,
+	type FormStep,
+	type FormSchemaMetadata,
+} from "@workspace/ui/lib/schema-converter";

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

@@ -0,0 +1,36 @@
+export const FORM_BUILDER_COMMON = {
+	// Buttons
+	FORM_BUILDER_BUTTON_SAVE: "Save",
+	FORM_BUILDER_BUTTON_CANCEL: "Cancel",
+	FORM_BUILDER_BUTTON_DELETE: "Delete",
+	FORM_BUILDER_BUTTON_CREATE: "Create",
+	FORM_BUILDER_BUTTON_BACK: "Back",
+	FORM_BUILDER_BUTTON_NEW_FORM: "New Form",
+	FORM_BUILDER_BUTTON_SUBMIT: "Submit",
+
+	// Labels
+	FORM_BUILDER_LABEL_NAME: "Name",
+	FORM_BUILDER_LABEL_SLUG: "Slug",
+	FORM_BUILDER_LABEL_SLUG_DESCRIPTION: "URL-friendly identifier for this form",
+	FORM_BUILDER_LABEL_DESCRIPTION: "Description",
+	FORM_BUILDER_LABEL_STATUS: "Status",
+	FORM_BUILDER_LABEL_CREATED_AT: "Created",
+	FORM_BUILDER_LABEL_UPDATED_AT: "Last Updated",
+	FORM_BUILDER_LABEL_ACTIONS: "Actions",
+
+	// Status
+	FORM_BUILDER_STATUS_LOADING: "Loading...",
+	FORM_BUILDER_STATUS_SAVING: "Saving...",
+	FORM_BUILDER_STATUS_DELETING: "Deleting...",
+	FORM_BUILDER_STATUS_ACTIVE: "Active",
+	FORM_BUILDER_STATUS_INACTIVE: "Inactive",
+	FORM_BUILDER_STATUS_ARCHIVED: "Archived",
+
+	// Errors
+	FORM_BUILDER_ERROR_GENERIC: "Something went wrong",
+	FORM_BUILDER_ERROR_NOT_FOUND: "Not found",
+	FORM_BUILDER_ERROR_VALIDATION: "Please fix the errors above",
+
+	// Attribution
+	FORM_BUILDER_ATTRIBUTION: "Powered by Better Stack",
+};

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

@@ -0,0 +1,18 @@
+export const FORM_BUILDER_EDITOR = {
+	FORM_BUILDER_EDITOR_TITLE_NEW: "New Form",
+	FORM_BUILDER_EDITOR_TITLE_EDIT: "Edit Form",
+	FORM_BUILDER_EDITOR_SLUG_AUTO: "Auto-generated from name",
+	FORM_BUILDER_EDITOR_SLUG_MANUAL: "Manually set",
+	FORM_BUILDER_EDITOR_DELETE_CONFIRM:
+		"Are you sure you want to delete this form? All submissions will also be deleted.",
+	FORM_BUILDER_EDITOR_UNSAVED_CHANGES: "You have unsaved changes",
+	FORM_BUILDER_EDITOR_NAME_PLACEHOLDER: "Enter form name",
+	FORM_BUILDER_EDITOR_SLUG_PLACEHOLDER: "enter-form-slug",
+	FORM_BUILDER_EDITOR_DESCRIPTION_PLACEHOLDER:
+		"Optional description for this form",
+	FORM_BUILDER_EDITOR_SUCCESS_MESSAGE_LABEL: "Success Message",
+	FORM_BUILDER_EDITOR_SUCCESS_MESSAGE_PLACEHOLDER:
+		"Thank you for your submission!",
+	FORM_BUILDER_EDITOR_REDIRECT_URL_LABEL: "Redirect URL (optional)",
+	FORM_BUILDER_EDITOR_REDIRECT_URL_PLACEHOLDER: "https://example.com/thank-you",
+};

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

@@ -0,0 +1,17 @@
+export const FORM_BUILDER_LIST = {
+	FORM_BUILDER_LIST_TITLE: "Forms",
+	FORM_BUILDER_LIST_SUBTITLE: "Manage your forms",
+	FORM_BUILDER_LIST_EMPTY: "No forms yet",
+	FORM_BUILDER_LIST_EMPTY_DESCRIPTION: "Create your first form to get started.",
+	FORM_BUILDER_LIST_COLUMN_NAME: "Name",
+	FORM_BUILDER_LIST_COLUMN_SLUG: "Slug",
+	FORM_BUILDER_LIST_COLUMN_STATUS: "Status",
+	FORM_BUILDER_LIST_COLUMN_CREATED: "Created",
+	FORM_BUILDER_LIST_COLUMN_ACTIONS: "Actions",
+	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_PAGINATION_PREVIOUS: "Previous",
+	FORM_BUILDER_LIST_PAGINATION_NEXT: "Next",
+};

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

@@ -0,0 +1,17 @@
+export const FORM_BUILDER_SUBMISSIONS = {
+	FORM_BUILDER_SUBMISSIONS_TITLE: "Submissions",
+	FORM_BUILDER_SUBMISSIONS_SUBTITLE: "View form submissions",
+	FORM_BUILDER_SUBMISSIONS_EMPTY: "No submissions yet",
+	FORM_BUILDER_SUBMISSIONS_EMPTY_DESCRIPTION:
+		"Submissions will appear here when users submit this form.",
+	FORM_BUILDER_SUBMISSIONS_COLUMN_ID: "ID",
+	FORM_BUILDER_SUBMISSIONS_COLUMN_DATA: "Data",
+	FORM_BUILDER_SUBMISSIONS_COLUMN_SUBMITTED_AT: "Submitted",
+	FORM_BUILDER_SUBMISSIONS_COLUMN_IP_ADDRESS: "IP Address",
+	FORM_BUILDER_SUBMISSIONS_COLUMN_ACTIONS: "Actions",
+	FORM_BUILDER_SUBMISSIONS_ACTION_VIEW: "View",
+	FORM_BUILDER_SUBMISSIONS_ACTION_DELETE: "Delete",
+	FORM_BUILDER_SUBMISSIONS_DELETE_CONFIRM:
+		"Are you sure you want to delete this submission?",
+	FORM_BUILDER_SUBMISSIONS_BACK_TO_FORM: "Back to Form",
+};

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

@@ -0,0 +1,10 @@
+export const FORM_BUILDER_TOASTS = {
+	FORM_BUILDER_TOAST_CREATE_SUCCESS: "Form created successfully",
+	FORM_BUILDER_TOAST_UPDATE_SUCCESS: "Form updated successfully",
+	FORM_BUILDER_TOAST_DELETE_SUCCESS: "Form deleted successfully",
+	FORM_BUILDER_TOAST_SUBMIT_SUCCESS: "Form submitted successfully",
+	FORM_BUILDER_TOAST_ERROR: "An error occurred. Please try again.",
+	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",
+};

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

@@ -0,0 +1,15 @@
+import { FORM_BUILDER_COMMON } from "./form-builder-common";
+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";
+
+export const FORM_BUILDER_LOCALIZATION = {
+	...FORM_BUILDER_COMMON,
+	...FORM_BUILDER_TOASTS,
+	...FORM_BUILDER_LIST,
+	...FORM_BUILDER_EDITOR,
+	...FORM_BUILDER_SUBMISSIONS,
+};
+
+export type FormBuilderLocalization = typeof FORM_BUILDER_LOCALIZATION;

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

@@ -0,0 +1,146 @@
+import type { ComponentType } from "react";
+import type { FormBuilderLocalization } from "./localization";
+import type { AutoFormInputComponentProps } from "@workspace/ui/components/auto-form/types";
+
+/**
+ * Context passed to lifecycle hooks
+ */
+export interface RouteContext {
+	/** Current route path */
+	path: string;
+	/** Route parameters (e.g., { id: "123" }) */
+	params?: Record<string, string>;
+	/** Whether rendering on server (true) or client (false) */
+	isSSR: boolean;
+	/** Additional context properties */
+	[key: string]: unknown;
+}
+
+/**
+ * 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.)
+ */
+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.
+	 *
+	 * These map field type names to React components. Use these to:
+	 * - Override built-in field types (checkbox, date, select, radio, switch, textarea, file, number, fallback)
+	 * - Add custom field types for your forms
+	 *
+	 * @example
+	 * ```tsx
+	 * fieldComponents: {
+	 *   // Override the file type with custom S3 upload
+	 *   file: ({ field, label, isRequired }) => (
+	 *     <MyS3Upload
+	 *       value={field.value}
+	 *       onChange={field.onChange}
+	 *       label={label}
+	 *       required={isRequired}
+	 *     />
+	 *   ),
+	 *   // Add a custom rich text editor
+	 *   richText: ({ field, label }) => (
+	 *     <MyRichTextEditor value={field.value} onChange={field.onChange} />
+	 *   ),
+	 * }
+	 * ```
+	 */
+	fieldComponents?: Record<string, ComponentType<AutoFormInputComponentProps>>;
+
+	/**
+	 * Localization object for the Form Builder plugin
+	 */
+	localization?: FormBuilderLocalization;
+
+	/**
+	 * API base URL
+	 */
+	apiBaseURL: string;
+
+	/**
+	 * API base path
+	 */
+	apiBasePath: string;
+
+	/**
+	 * Whether to show the attribution
+	 */
+	showAttribution?: boolean;
+
+	/**
+	 * Optional headers to pass with API requests (e.g., for SSR auth)
+	 */
+	headers?: HeadersInit;
+
+	// Lifecycle Hooks (optional)
+
+	/**
+	 * Called when a route is rendered
+	 * @param routeName - Name of the route (e.g., 'formList', 'formBuilder', 'submissions')
+	 * @param context - Route context with path, params, etc.
+	 */
+	onRouteRender?: (
+		routeName: string,
+		context: RouteContext,
+	) => void | Promise<void>;
+
+	/**
+	 * Called when a route encounters an error
+	 * @param routeName - Name of the route
+	 * @param error - The error that occurred
+	 * @param context - Route context
+	 */
+	onRouteError?: (
+		routeName: string,
+		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;
+}