@btst/stack 2.12.2 → 3.0.0-rc.2

package/src/plugins/cms/client/hooks/cms-resource.ts

@@ -0,0 +1,13 @@
+"use client";
+
+import { createResource } from "@btst/stack/plugins/client/hooks";
+import { cmsResources } from "../../query-keys";
+
+/**
+ * Factory-generated CMS resource hooks. Internal — the public hook surface
+ * (`useContent`, `useContentTypes`, ...) in `cms-hooks.tsx` wraps these.
+ */
+export const cms = createResource({
+	plugin: "cms",
+	resources: cmsResources,
+});

package/src/plugins/cms/client/localization/cms-common.ts

@@ -23,6 +23,14 @@ export const CMS_COMMON = {
 	CMS_ERROR_GENERIC: "Something went wrong",
 	CMS_ERROR_NOT_FOUND: "Not found",
 	CMS_ERROR_VALIDATION: "Please fix the errors above",
+	CMS_ERROR_TYPE_NOT_FOUND_DESCRIPTION: "Content type not found",
+	CMS_ERROR_ITEM_NOT_FOUND_DESCRIPTION: "Content item not found",
+
+	// 404 page
+	CMS_404_TITLE: "Page not found",
+	CMS_404_DESCRIPTION:
+		"The page you're looking for doesn't exist or has been moved.",
+	CMS_404_BACK: "Back to CMS",
 
 	// Attribution
 	CMS_ATTRIBUTION: "Powered by BTST",

package/src/plugins/cms/client/localization/cms-editor.ts

@@ -5,4 +5,9 @@ export const CMS_EDITOR = {
 	CMS_EDITOR_SLUG_MANUAL: "Manually set",
 	CMS_EDITOR_DELETE_CONFIRM: "Are you sure you want to delete this item?",
 	CMS_EDITOR_UNSAVED_CHANGES: "You have unsaved changes",
+	CMS_EDITOR_SLUG_PLACEHOLDER: "Enter slug...",
+	CMS_EDITOR_SLUG_PLACEHOLDER_AUTO: "Auto-generated from {field}",
+	CMS_EDITOR_SLUG_REQUIRED: "Slug is required",
+	CMS_EDITOR_FILE_INVALID_TYPE: "Please select an image file",
+	CMS_EDITOR_FILE_UPLOAD_FAILED: "Failed to upload image",
 };

package/src/plugins/cms/client/localization/cms-list.ts

@@ -11,4 +11,7 @@ export const CMS_LIST = {
 	CMS_LIST_PAGINATION_SHOWING: "Showing {from}-{to} of {total}",
 	CMS_LIST_PAGINATION_PREVIOUS: "Previous",
 	CMS_LIST_PAGINATION_NEXT: "Next",
+	CMS_LIST_SEARCH_PLACEHOLDER: "Search items...",
+	CMS_LIST_SEARCH_EMPTY: "No items match your search",
+	CMS_LIST_SEARCH_EMPTY_DESCRIPTION: "Try a different search term.",
 };

package/src/plugins/cms/client/localization/cms-relations.ts

@@ -0,0 +1,23 @@
+export const CMS_RELATIONS = {
+	// Relation picker (RelationField)
+	CMS_RELATION_LOADING: "Loading...",
+	CMS_RELATION_SELECT_PLACEHOLDER: "Select {targetType}...",
+	CMS_RELATION_SELECT_PLACEHOLDER_MULTI: "Select {targetType}(s)...",
+	CMS_RELATION_EMPTY: "No {targetType} items found",
+	CMS_RELATION_CREATE_TITLE: "Create New {targetType}",
+	CMS_RELATION_NAME_PLACEHOLDER: "Enter {field}...",
+	CMS_RELATION_DESCRIPTION_LABEL: "Description (optional)",
+	CMS_RELATION_DESCRIPTION_PLACEHOLDER: "Enter description...",
+	CMS_RELATION_CREATE_BUTTON: "Create",
+	CMS_RELATION_CREATING: "Creating...",
+	CMS_RELATION_CREATE_ERROR: "Failed to create item. Please try again.",
+
+	// Inverse relations panel
+	CMS_RELATED_ITEMS_TITLE: "Related Items",
+	CMS_RELATED_EMPTY: "No {sourceTypeName} items yet.",
+	CMS_RELATED_ADD: "Add {sourceTypeName}",
+	CMS_RELATED_DELETE_TITLE: "Delete {sourceTypeName}?",
+	CMS_RELATED_DELETE_DESCRIPTION:
+		"This action cannot be undone. This will permanently delete this {sourceTypeName}.",
+	CMS_RELATED_DELETE_ERROR: "Failed to delete item. Please try again.",
+};

package/src/plugins/cms/client/localization/index.ts

@@ -3,6 +3,7 @@ import { CMS_TOASTS } from "./cms-toasts";
 import { CMS_DASHBOARD } from "./cms-dashboard";
 import { CMS_LIST } from "./cms-list";
 import { CMS_EDITOR } from "./cms-editor";
+import { CMS_RELATIONS } from "./cms-relations";
 
 export const CMS_LOCALIZATION = {
 	...CMS_COMMON,
@@ -10,6 +11,7 @@ export const CMS_LOCALIZATION = {
 	...CMS_DASHBOARD,
 	...CMS_LIST,
 	...CMS_EDITOR,
+	...CMS_RELATIONS,
 };
 
 export type CMSLocalization = typeof CMS_LOCALIZATION;

package/src/plugins/cms/client/overrides.ts

@@ -31,32 +31,10 @@ export interface RouteContext {
 /**
  * Overridable components and functions for the CMS 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 CMSPluginOverrides {
-	/**
-	 * 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>;
-
-	/**
-	 * Image component for displaying images
-	 */
-	Image?: ComponentType<
-		React.ImgHTMLAttributes<HTMLImageElement> & Record<string, unknown>
-	>;
-
 	/**
 	 * Function used to upload a new image file and return its URL.
 	 * Used by the default "file" field component when not selecting an existing
@@ -147,16 +125,6 @@ export interface CMSPluginOverrides {
 	 */
 	localization?: CMSLocalization;
 
-	/**
-	 * API base URL
-	 */
-	apiBaseURL: string;
-
-	/**
-	 * API base path
-	 */
-	apiBasePath: string;
-
 	/**
 	 * Whether to show the attribution
 	 */
@@ -190,32 +158,4 @@ export interface CMSPluginOverrides {
 		error: Error,
 		context: RouteContext,
 	) => void | Promise<void>;
-
-	/**
-	 * Called before the dashboard page is rendered
-	 * Return false to prevent rendering (e.g., for authorization)
-	 * @param context - Route context
-	 */
-	onBeforeDashboardRendered?: (context: RouteContext) => boolean;
-
-	/**
-	 * Called before the content list page is rendered
-	 * Return false to prevent rendering (e.g., for authorization)
-	 * @param typeSlug - The content type slug
-	 * @param context - Route context
-	 */
-	onBeforeListRendered?: (typeSlug: string, context: RouteContext) => boolean;
-
-	/**
-	 * Called before the content editor page is rendered
-	 * Return false to prevent rendering (e.g., for authorization)
-	 * @param typeSlug - The content type slug
-	 * @param id - The content item ID (null for new items)
-	 * @param context - Route context
-	 */
-	onBeforeEditorRendered?: (
-		typeSlug: string,
-		id: string | null,
-		context: RouteContext,
-	) => boolean;
 }

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

@@ -3,9 +3,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";
@@ -141,11 +140,11 @@ export interface CMSClientConfig {
 		/** Replaces the CMS dashboard page */
 		dashboard?: ComponentType;
 		/** Replaces the content list page */
-		contentList?: ComponentType<{ typeSlug: string }>;
+		contentList?: ComponentType<{ params: { typeSlug: string } }>;
 		/** Replaces the new content editor page */
-		newContent?: ComponentType<{ typeSlug: string }>;
+		newContent?: ComponentType<{ params: { typeSlug: string } }>;
 		/** Replaces the edit content editor page */
-		editContent?: ComponentType<{ typeSlug: string; id: string }>;
+		editContent?: ComponentType<{ params: { typeSlug: string; id: string } }>;
 	};
 }
 
@@ -174,10 +173,7 @@ function createDashboardLoader(config: CMSClientConfig) {
 			try {
 				// Before hook - authorization check
 				if (hooks?.beforeLoadDashboard) {
-					await runClientHookWithShim(
-						() => hooks.beforeLoadDashboard!(context),
-						"Load prevented by beforeLoadDashboard hook",
-					);
+					await hooks.beforeLoadDashboard(context);
 				}
 
 				await queryClient.prefetchQuery(typesQuery);
@@ -246,19 +242,12 @@ function createContentListLoader(typeSlug: string, config: CMSClientConfig) {
 			const queries = createCMSQueryKeys(client, headers);
 			const limit = 20;
 			const typesQuery = queries.cmsTypes.list();
-			const listQuery = queries.cmsContent.list({
-				typeSlug,
-				limit,
-				offset: 0,
-			});
+			const listQuery = queries.cmsContent.list({ typeSlug, limit });
 
 			try {
 				// Before hook - authorization check
 				if (hooks?.beforeLoadContentList) {
-					await runClientHookWithShim(
-						() => hooks.beforeLoadContentList!(typeSlug, context),
-						"Load prevented by beforeLoadContentList hook",
-					);
+					await hooks.beforeLoadContentList(typeSlug, context);
 				}
 
 				// Prefetch content types
@@ -266,24 +255,7 @@ function createContentListLoader(typeSlug: string, config: CMSClientConfig) {
 
 				// Prefetch content list using infinite query (matches useSuspenseInfiniteQuery in hooks)
 				await queryClient.prefetchInfiniteQuery({
-					queryKey: listQuery.queryKey,
-					queryFn: async ({ pageParam = 0 }) => {
-						const response: unknown = await client("/content/:typeSlug", {
-							method: "GET",
-							params: { typeSlug },
-							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,
 				});
 
@@ -364,10 +336,7 @@ function createContentEditorLoader(
 			try {
 				// Before hook - authorization check
 				if (hooks?.beforeLoadContentEditor) {
-					await runClientHookWithShim(
-						() => hooks.beforeLoadContentEditor!(typeSlug, id, context),
-						"Load prevented by beforeLoadContentEditor hook",
-					);
+					await hooks.beforeLoadContentEditor(typeSlug, id, context);
 				}
 
 				const promises = [queryClient.prefetchQuery(typesQuery)];
@@ -516,56 +485,50 @@ export const cmsClientPlugin = (config: CMSClientConfig) =>
 	defineClientPlugin({
 		name: "cms",
 
-		routes: () => ({
-			dashboard: createRoute("/cms", () => {
-				const CustomDashboard = config.pageComponents?.dashboard;
-				return {
-					PageComponent: CustomDashboard ?? (() => <DashboardPageComponent />),
-					loader: createDashboardLoader(config),
-					meta: createDashboardMeta(),
-				};
-			}),
-
-			contentList: createRoute("/cms/:typeSlug", ({ params }) => {
-				const CustomContentList = config.pageComponents?.contentList;
-				return {
-					PageComponent: CustomContentList
-						? () => <CustomContentList typeSlug={params.typeSlug} />
-						: () => <ContentListPageComponent typeSlug={params.typeSlug} />,
-					loader: createContentListLoader(params.typeSlug, config),
-					meta: createContentListMeta(params.typeSlug, config),
-				};
-			}),
-
-			newContent: createRoute("/cms/:typeSlug/new", ({ params }) => {
-				const CustomNewContent = config.pageComponents?.newContent;
-				return {
-					PageComponent: CustomNewContent
-						? () => <CustomNewContent typeSlug={params.typeSlug} />
-						: () => <ContentEditorPageComponent typeSlug={params.typeSlug} />,
-					loader: createContentEditorLoader(params.typeSlug, undefined, config),
-					meta: createContentEditorMeta(params.typeSlug, undefined, config),
-				};
-			}),
-
-			editContent: createRoute("/cms/:typeSlug/:id", ({ params }) => {
-				const CustomEditContent = config.pageComponents?.editContent;
-				return {
-					PageComponent: CustomEditContent
-						? () => (
-								<CustomEditContent typeSlug={params.typeSlug} id={params.id} />
-							)
-						: () => (
-								<ContentEditorPageComponent
-									typeSlug={params.typeSlug}
-									id={params.id}
-								/>
-							),
-					loader: createContentEditorLoader(params.typeSlug, params.id, config),
-					meta: createContentEditorMeta(params.typeSlug, params.id, config),
-				};
-			}),
-		}),
+		routes: () =>
+			defineRoutes(
+				{
+					dashboard: defineRoute("/cms", {
+						page: DashboardPageComponent,
+						loader: createDashboardLoader(config),
+						meta: createDashboardMeta(),
+					}),
+
+					contentList: defineRoute("/cms/:typeSlug", {
+						page: ({ params }) => (
+							<ContentListPageComponent typeSlug={params.typeSlug} />
+						),
+						loader: ({ params }) =>
+							createContentListLoader(params.typeSlug, config)(),
+						meta: ({ params }) =>
+							createContentListMeta(params.typeSlug, config)(),
+					}),
+
+					newContent: defineRoute("/cms/:typeSlug/new", {
+						page: ({ params }) => (
+							<ContentEditorPageComponent typeSlug={params.typeSlug} />
+						),
+						loader: ({ params }) =>
+							createContentEditorLoader(params.typeSlug, undefined, config)(),
+						meta: ({ params }) =>
+							createContentEditorMeta(params.typeSlug, undefined, config)(),
+					}),
+
+					editContent: defineRoute("/cms/:typeSlug/:id", {
+						page: ({ params }) => (
+							<ContentEditorPageComponent
+								typeSlug={params.typeSlug}
+								id={params.id}
+							/>
+						),
+						loader: ({ params }) =>
+							createContentEditorLoader(params.typeSlug, params.id, config)(),
+						meta: ({ params }) =>
+							createContentEditorMeta(params.typeSlug, params.id, config)(),
+					}),
+				},
+				{ pages: config.pageComponents },
+			),
 
 		sitemap: async () => {
 			// CMS admin pages should NOT be in sitemap