@btst/stack 1.5.0 → 1.5.2

package/src/plugins/cms/client/plugin.tsx

@@ -29,24 +29,104 @@ const ContentEditorPageComponent = lazy(() =>
  * Context passed to loader hooks
  */
 export interface LoaderContext {
+	/** Current route path */
 	path: string;
+	/** Route parameters (e.g., { typeSlug: "product", id: "123" }) */
 	params?: Record<string, string>;
+	/** Whether rendering on server (true) or client (false) */
 	isSSR: boolean;
+	/** Base URL for API calls */
 	apiBaseURL: string;
+	/** Path where the API is mounted */
 	apiBasePath: string;
+	/** Optional headers for the request */
 	headers?: Headers;
+	/** Additional context properties */
+	[key: string]: unknown;
+}
+
+/**
+ * Hooks for CMS client plugin
+ * All hooks are optional and allow consumers to customize behavior
+ */
+export interface CMSClientHooks {
+	/**
+	 * Called before loading the dashboard page. Return false to cancel loading.
+	 * @param context - Loader context with path, params, etc.
+	 */
+	beforeLoadDashboard?: (context: LoaderContext) => Promise<boolean> | boolean;
+	/**
+	 * Called after the dashboard is loaded.
+	 * @param context - Loader context
+	 */
+	afterLoadDashboard?: (context: LoaderContext) => Promise<void> | void;
+	/**
+	 * Called before loading a content list page. Return false to cancel loading.
+	 * @param typeSlug - The content type slug
+	 * @param context - Loader context
+	 */
+	beforeLoadContentList?: (
+		typeSlug: string,
+		context: LoaderContext,
+	) => Promise<boolean> | boolean;
+	/**
+	 * Called after a content list is loaded.
+	 * @param typeSlug - The content type slug
+	 * @param context - Loader context
+	 */
+	afterLoadContentList?: (
+		typeSlug: string,
+		context: LoaderContext,
+	) => Promise<void> | void;
+	/**
+	 * Called before loading the content editor page. Return false to cancel loading.
+	 * @param typeSlug - The content type slug
+	 * @param id - The content item ID (undefined for new items)
+	 * @param context - Loader context
+	 */
+	beforeLoadContentEditor?: (
+		typeSlug: string,
+		id: string | undefined,
+		context: LoaderContext,
+	) => Promise<boolean> | boolean;
+	/**
+	 * Called after the content editor is loaded.
+	 * @param typeSlug - The content type slug
+	 * @param id - The content item ID (undefined for new items)
+	 * @param context - Loader context
+	 */
+	afterLoadContentEditor?: (
+		typeSlug: string,
+		id: string | undefined,
+		context: LoaderContext,
+	) => Promise<void> | void;
+	/**
+	 * Called when a loading error occurs.
+	 * Use this for redirects on authorization failures.
+	 * @param error - The error that occurred
+	 * @param context - Loader context
+	 */
+	onLoadError?: (error: Error, context: LoaderContext) => Promise<void> | void;
 }
 
 /**
  * Configuration for CMS client plugin
  */
 export interface CMSClientConfig {
+	/** Base URL for API calls (e.g., "http://localhost:3000") */
 	apiBaseURL: string;
+	/** Path where the API is mounted (e.g., "/api/data") */
 	apiBasePath: string;
+	/** Base URL of your site */
 	siteBaseURL: string;
+	/** Path where pages are mounted (e.g., "/pages") */
 	siteBasePath: string;
+	/** React Query client instance for caching */
 	queryClient: QueryClient;
+	/** Optional headers for SSR (e.g., forwarding cookies) */
 	headers?: Headers;
+	/** Optional hooks for customizing behavior (authorization, redirects, etc.) */
+	hooks?: CMSClientHooks;
 }
 
 /**
@@ -55,17 +135,56 @@ export interface CMSClientConfig {
 function createDashboardLoader(config: CMSClientConfig) {
 	return async () => {
 		if (typeof window === "undefined") {
-			const { queryClient, apiBasePath, apiBaseURL, headers } = config;
-			const client = createApiClient<CMSApiRouter>({
-				baseURL: apiBaseURL,
-				basePath: apiBasePath,
-			});
-			const queries = createCMSQueryKeys(client, headers);
+			const { queryClient, apiBasePath, apiBaseURL, headers, hooks } = config;
+
+			const context: LoaderContext = {
+				path: "/cms",
+				isSSR: true,
+				apiBaseURL,
+				apiBasePath,
+				headers,
+			};
 
 			try {
+				// Before hook - authorization check
+				if (hooks?.beforeLoadDashboard) {
+					const canLoad = await hooks.beforeLoadDashboard(context);
+					if (!canLoad) {
+						throw new Error("Load prevented by beforeLoadDashboard hook");
+					}
+				}
+
+				const client = createApiClient<CMSApiRouter>({
+					baseURL: apiBaseURL,
+					basePath: apiBasePath,
+				});
+				const queries = createCMSQueryKeys(client, headers);
+
 				await queryClient.prefetchQuery(queries.cmsTypes.list());
-			} catch {
-				// Let Error Boundaries handle errors during render
+
+				// After hook
+				if (hooks?.afterLoadDashboard) {
+					await hooks.afterLoadDashboard(context);
+				}
+
+				// Check if there was an error
+				const queryState = queryClient.getQueryState(
+					queries.cmsTypes.list().queryKey,
+				);
+				if (queryState?.error && hooks?.onLoadError) {
+					const error =
+						queryState.error instanceof Error
+							? queryState.error
+							: new Error(String(queryState.error));
+					await hooks.onLoadError(error, context);
+				}
+			} catch (error) {
+				// Error hook - log the error but don't throw during SSR
+				// Let Error Boundaries handle errors when components render
+				if (hooks?.onLoadError) {
+					await hooks.onLoadError(error as Error, context);
+				}
+				// Don't re-throw - let Error Boundary catch it during render
 			}
 		}
 	};
@@ -77,15 +196,33 @@ function createDashboardLoader(config: CMSClientConfig) {
 function createContentListLoader(typeSlug: string, config: CMSClientConfig) {
 	return async () => {
 		if (typeof window === "undefined") {
-			const { queryClient, apiBasePath, apiBaseURL, headers } = config;
-			const client = createApiClient<CMSApiRouter>({
-				baseURL: apiBaseURL,
-				basePath: apiBasePath,
-			});
-			const queries = createCMSQueryKeys(client, headers);
-			const limit = 20;
+			const { queryClient, apiBasePath, apiBaseURL, headers, hooks } = config;
+
+			const context: LoaderContext = {
+				path: `/cms/${typeSlug}`,
+				params: { typeSlug },
+				isSSR: true,
+				apiBaseURL,
+				apiBasePath,
+				headers,
+			};
 
 			try {
+				// Before hook - authorization check
+				if (hooks?.beforeLoadContentList) {
+					const canLoad = await hooks.beforeLoadContentList(typeSlug, context);
+					if (!canLoad) {
+						throw new Error("Load prevented by beforeLoadContentList hook");
+					}
+				}
+
+				const client = createApiClient<CMSApiRouter>({
+					baseURL: apiBaseURL,
+					basePath: apiBasePath,
+				});
+				const queries = createCMSQueryKeys(client, headers);
+				const limit = 20;
+
 				// Prefetch content types
 				await queryClient.prefetchQuery(queries.cmsTypes.list());
 
@@ -116,8 +253,32 @@ function createContentListLoader(typeSlug: string, config: CMSClientConfig) {
 					},
 					initialPageParam: 0,
 				});
-			} catch {
-				// Let Error Boundaries handle errors during render
+
+				// After hook
+				if (hooks?.afterLoadContentList) {
+					await hooks.afterLoadContentList(typeSlug, context);
+				}
+
+				// Check if there was an error in either query
+				const typesState = queryClient.getQueryState(
+					queries.cmsTypes.list().queryKey,
+				);
+				const listState = queryClient.getQueryState(listQuery.queryKey);
+				const queryError = typesState?.error || listState?.error;
+				if (queryError && hooks?.onLoadError) {
+					const error =
+						queryError instanceof Error
+							? queryError
+							: new Error(String(queryError));
+					await hooks.onLoadError(error, context);
+				}
+			} catch (error) {
+				// Error hook - log the error but don't throw during SSR
+				// Let Error Boundaries handle errors when components render
+				if (hooks?.onLoadError) {
+					await hooks.onLoadError(error as Error, context);
+				}
+				// Don't re-throw - let Error Boundary catch it during render
 			}
 		}
 	};
@@ -133,14 +294,36 @@ function createContentEditorLoader(
 ) {
 	return async () => {
 		if (typeof window === "undefined") {
-			const { queryClient, apiBasePath, apiBaseURL, headers } = config;
-			const client = createApiClient<CMSApiRouter>({
-				baseURL: apiBaseURL,
-				basePath: apiBasePath,
-			});
-			const queries = createCMSQueryKeys(client, headers);
+			const { queryClient, apiBasePath, apiBaseURL, headers, hooks } = config;
+
+			const context: LoaderContext = {
+				path: id ? `/cms/${typeSlug}/${id}` : `/cms/${typeSlug}/new`,
+				params: id ? { typeSlug, id } : { typeSlug },
+				isSSR: true,
+				apiBaseURL,
+				apiBasePath,
+				headers,
+			};
 
 			try {
+				// Before hook - authorization check
+				if (hooks?.beforeLoadContentEditor) {
+					const canLoad = await hooks.beforeLoadContentEditor(
+						typeSlug,
+						id,
+						context,
+					);
+					if (!canLoad) {
+						throw new Error("Load prevented by beforeLoadContentEditor hook");
+					}
+				}
+
+				const client = createApiClient<CMSApiRouter>({
+					baseURL: apiBaseURL,
+					basePath: apiBasePath,
+				});
+				const queries = createCMSQueryKeys(client, headers);
+
 				const promises = [queryClient.prefetchQuery(queries.cmsTypes.list())];
 				if (id) {
 					promises.push(
@@ -148,8 +331,36 @@ function createContentEditorLoader(
 					);
 				}
 				await Promise.all(promises);
-			} catch {
-				// Let Error Boundaries handle errors during render
+
+				// After hook
+				if (hooks?.afterLoadContentEditor) {
+					await hooks.afterLoadContentEditor(typeSlug, id, context);
+				}
+
+				// Check if there was an error
+				const typesState = queryClient.getQueryState(
+					queries.cmsTypes.list().queryKey,
+				);
+				const itemState = id
+					? queryClient.getQueryState(
+							queries.cmsContent.detail(typeSlug, id).queryKey,
+						)
+					: null;
+				const queryError = typesState?.error || itemState?.error;
+				if (queryError && hooks?.onLoadError) {
+					const error =
+						queryError instanceof Error
+							? queryError
+							: new Error(String(queryError));
+					await hooks.onLoadError(error, context);
+				}
+			} catch (error) {
+				// Error hook - log the error but don't throw during SSR
+				// Let Error Boundaries handle errors when components render
+				if (hooks?.onLoadError) {
+					await hooks.onLoadError(error as Error, context);
+				}
+				// Don't re-throw - let Error Boundary catch it during render
 			}
 		}
 	};

package/src/plugins/cms/db.ts

@@ -29,6 +29,10 @@ export const cmsSchema = createDbPlugin("cms", {
 				type: "string",
 				required: false,
 			},
+			autoFormVersion: {
+				type: "number",
+				required: false,
+			},
 			createdAt: {
 				type: "date",
 				defaultValue: () => new Date(),

package/src/plugins/cms/schemas.ts

@@ -31,6 +31,7 @@ export const updateContentSchema = z.object({
 
 /**
  * Schema for content type response
+ * Note: fieldConfig is no longer included - it's merged into jsonSchema during read
  */
 export const contentTypeResponseSchema = z.object({
 	id: z.string(),
@@ -38,7 +39,6 @@ export const contentTypeResponseSchema = z.object({
 	slug: z.string(),
 	description: z.string().nullable().optional(),
 	jsonSchema: z.string(),
-	fieldConfig: z.string().nullable().optional(),
 	createdAt: z.string(),
 	updatedAt: z.string(),
 });

package/src/plugins/cms/types.ts

@@ -1,8 +1,16 @@
 import type { z } from "zod";
-import type { AutoFormFieldType } from "@workspace/ui/components/ui/auto-form/types";
 
 /**
- * Configuration for a content type defined by the developer
+ * Configuration for a content type defined by the developer.
+ *
+ * Field types are now specified directly in the Zod schema via .meta():
+ * @example
+ * ```typescript
+ * const ProductSchema = z.object({
+ *   description: z.string().meta({ fieldType: "textarea" }),
+ *   image: z.string().optional().meta({ fieldType: "file" }),
+ * });
+ * ```
  */
 export interface ContentTypeConfig {
 	/** Display name for the content type (e.g., "Product", "Testimonial") */
@@ -11,21 +19,8 @@ export interface ContentTypeConfig {
 	slug: string;
 	/** Optional description shown in the admin UI */
 	description?: string;
-	/** Zod schema defining the content type's fields */
+	/** Zod schema defining the content type's fields. Use .meta({ fieldType: "..." }) for field type overrides. */
 	schema: z.ZodObject<z.ZodRawShape>;
-	/**
-	 * Optional field configuration for AutoForm customization.
-	 *
-	 * fieldType can be:
-	 * - A built-in AutoForm type: "checkbox", "date", "select", "radio", "switch", "textarea", "number", "file", "fallback"
-	 * - A custom type name that maps to a component provided via `fieldComponents` in overrides
-	 */
-	fieldConfig?: Record<
-		string,
-		{
-			fieldType?: AutoFormFieldType | (string & {});
-		}
-	>;
 }
 
 /**
@@ -41,8 +36,10 @@ export type ContentType = {
 	description?: string;
 	/** JSON Schema representation of the Zod schema (stringified) */
 	jsonSchema: string;
-	/** Optional field configuration JSON (stringified) */
+	/** @deprecated Legacy field config - now embedded in jsonSchema. Kept for backwards compat. */
 	fieldConfig?: string;
+	/** AutoForm schema version. 1 = legacy (separate fieldConfig), 2 = unified (fieldType in jsonSchema) */
+	autoFormVersion?: number;
 	createdAt: Date;
 	updatedAt: Date;
 };

package/dist/packages/ui/src/components/ui/auto-form/fields/date.mjs

@@ -1,35 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { DatePicker } from '../../../date-picker.mjs';
-import { FormItem, FormControl, FormMessage } from '../../../form.mjs';
-import AutoFormLabel from '../common/label.mjs';
-import AutoFormTooltip from '../common/tooltip.mjs';
-
-function AutoFormDate({
-  label,
-  isRequired,
-  field,
-  fieldConfigItem,
-  fieldProps
-}) {
-  return /* @__PURE__ */ jsxs(FormItem, { children: [
-    /* @__PURE__ */ jsx(
-      AutoFormLabel,
-      {
-        label: fieldConfigItem?.label || label,
-        isRequired
-      }
-    ),
-    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
-      DatePicker,
-      {
-        date: field.value,
-        setDate: field.onChange,
-        ...fieldProps
-      }
-    ) }),
-    /* @__PURE__ */ jsx(AutoFormTooltip, { fieldConfigItem }),
-    /* @__PURE__ */ jsx(FormMessage, {})
-  ] });
-}
-
-export { AutoFormDate as default };

package/dist/packages/ui/src/components/ui/auto-form/fields/file.cjs

@@ -1,63 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const form = require('../../../form.cjs');
-const input = require('../../../input.cjs');
-const lucideReact = require('lucide-react');
-const React = require('react');
-const label = require('../common/label.cjs');
-const tooltip = require('../common/tooltip.cjs');
-
-function AutoFormFile({
-  label: label$1,
-  isRequired,
-  fieldConfigItem,
-  fieldProps,
-  field
-}) {
-  const { showLabel: _showLabel, ...fieldPropsWithoutShowLabel } = fieldProps;
-  const showLabel = _showLabel === void 0 ? true : _showLabel;
-  const [file, setFile] = React.useState(null);
-  const [fileName, setFileName] = React.useState(null);
-  const handleFileChange = (e) => {
-    const file2 = e.target.files?.[0];
-    if (file2) {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setFile(reader.result);
-        setFileName(file2.name);
-        field.onChange(reader.result);
-      };
-      reader.readAsDataURL(file2);
-    }
-  };
-  const handleRemoveClick = () => {
-    setFile(null);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { children: [
-    showLabel && /* @__PURE__ */ jsxRuntime.jsx(
-      label,
-      {
-        label: fieldConfigItem?.label || label$1,
-        isRequired
-      }
-    ),
-    !file && /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      input.Input,
-      {
-        type: "file",
-        ...fieldPropsWithoutShowLabel,
-        onChange: handleFileChange,
-        value: ""
-      }
-    ) }),
-    file && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[40px] w-full flex-row items-center justify-between space-x-2 rounded-sm border p-2 text-black focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-white dark:text-black dark:focus-visible:ring-0 dark:focus-visible:ring-offset-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { children: fileName }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleRemoveClick, "aria-label": "Remove image", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: 16 }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(tooltip, { fieldConfigItem }),
-    /* @__PURE__ */ jsxRuntime.jsx(form.FormMessage, {})
-  ] });
-}
-
-module.exports = AutoFormFile;

package/dist/packages/ui/src/components/ui/auto-form/fields/file.mjs

@@ -1,61 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { FormItem, FormControl, FormMessage } from '../../../form.mjs';
-import { Input } from '../../../input.mjs';
-import { Trash2 } from 'lucide-react';
-import { useState } from 'react';
-import AutoFormLabel from '../common/label.mjs';
-import AutoFormTooltip from '../common/tooltip.mjs';
-
-function AutoFormFile({
-  label,
-  isRequired,
-  fieldConfigItem,
-  fieldProps,
-  field
-}) {
-  const { showLabel: _showLabel, ...fieldPropsWithoutShowLabel } = fieldProps;
-  const showLabel = _showLabel === void 0 ? true : _showLabel;
-  const [file, setFile] = useState(null);
-  const [fileName, setFileName] = useState(null);
-  const handleFileChange = (e) => {
-    const file2 = e.target.files?.[0];
-    if (file2) {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setFile(reader.result);
-        setFileName(file2.name);
-        field.onChange(reader.result);
-      };
-      reader.readAsDataURL(file2);
-    }
-  };
-  const handleRemoveClick = () => {
-    setFile(null);
-  };
-  return /* @__PURE__ */ jsxs(FormItem, { children: [
-    showLabel && /* @__PURE__ */ jsx(
-      AutoFormLabel,
-      {
-        label: fieldConfigItem?.label || label,
-        isRequired
-      }
-    ),
-    !file && /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
-      Input,
-      {
-        type: "file",
-        ...fieldPropsWithoutShowLabel,
-        onChange: handleFileChange,
-        value: ""
-      }
-    ) }),
-    file && /* @__PURE__ */ jsxs("div", { className: "flex h-[40px] w-full flex-row items-center justify-between space-x-2 rounded-sm border p-2 text-black focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-white dark:text-black dark:focus-visible:ring-0 dark:focus-visible:ring-offset-0", children: [
-      /* @__PURE__ */ jsx("p", { children: fileName }),
-      /* @__PURE__ */ jsx("button", { onClick: handleRemoveClick, "aria-label": "Remove image", children: /* @__PURE__ */ jsx(Trash2, { size: 16 }) })
-    ] }),
-    /* @__PURE__ */ jsx(AutoFormTooltip, { fieldConfigItem }),
-    /* @__PURE__ */ jsx(FormMessage, {})
-  ] });
-}
-
-export { AutoFormFile as default };