@questpie/admin 1.1.0 → 2.0.0

package/dist/client/views/layout/admin-router.mjs

@@ -0,0 +1,594 @@
+import { parsePrefillParams } from "../../hooks/use-prefill-params.mjs";
+import { useAdminStore } from "../../runtime/provider.mjs";
+import { useCollectionSchema } from "../../hooks/use-collection-schema.mjs";
+import { useGlobalSchema } from "../../hooks/use-global-schema.mjs";
+import { useSuspenseAdminConfig } from "../../hooks/use-admin-config.mjs";
+import { Skeleton } from "../../components/ui/skeleton.mjs";
+import { Card } from "../../components/ui/card.mjs";
+import { DashboardGrid } from "../dashboard/dashboard-grid.mjs";
+import { Icon } from "@iconify/react";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/views/layout/admin-router.tsx
+/**
+* AdminRouter Component
+*
+* Handles routing for the admin UI based on URL segments.
+* Uses the view registry to resolve list/edit views dynamically.
+*
+* URL Patterns:
+* - /admin -> Dashboard
+* - /admin/collections/:name -> Collection list
+* - /admin/collections/:name/create -> Collection create
+* - /admin/collections/:name/:id -> Collection edit
+* - /admin/globals/:name -> Global edit
+* - /admin/:customPage -> Custom pages
+*/
+/**
+* Hook that resolves router configuration using Suspense.
+* Suspends until server config is loaded - no loading checks needed.
+*/
+function useRouterConfig(props) {
+	const admin = useAdminStore((s) => s.admin);
+	const { data: serverConfig } = useSuspenseAdminConfig();
+	const storePages = admin.getPages();
+	const storeListViews = admin.getListViews();
+	const storeEditViews = admin.getEditViews();
+	const storeDefaultViews = admin.getDefaultViews();
+	const serverCollections = React$1.useMemo(() => {
+		if (props.collections) return props.collections;
+		const result = {};
+		if (serverConfig?.collections) for (const [name, meta] of Object.entries(serverConfig.collections)) result[name] = meta ?? {};
+		return result;
+	}, [props.collections, serverConfig?.collections]);
+	const serverGlobals = React$1.useMemo(() => {
+		if (props.globals) return props.globals;
+		const result = {};
+		if (serverConfig?.globals) for (const [name, meta] of Object.entries(serverConfig.globals)) result[name] = meta ?? {};
+		return result;
+	}, [props.globals, serverConfig?.globals]);
+	const mergedDashboard = React$1.useMemo(() => {
+		const serverDashboard = serverConfig?.dashboard;
+		if (serverDashboard?.items?.length) return serverDashboard;
+		return props.dashboardConfig;
+	}, [props.dashboardConfig, serverConfig?.dashboard]);
+	return {
+		collections: serverCollections,
+		globals: serverGlobals,
+		pages: props.pages ?? storePages,
+		listViews: storeListViews,
+		editViews: storeEditViews,
+		dashboardConfig: mergedDashboard,
+		DashboardComponent: props.DashboardComponent,
+		defaultViews: props.defaultViews ?? storeDefaultViews
+	};
+}
+function matchRoute(segments, _collections = {}, globals = {}, pages = {}) {
+	if (segments.length === 0) return { type: "dashboard" };
+	const [first, second, third] = segments;
+	if (first === "collections" && second) {
+		if (!third) return {
+			type: "collection-list",
+			name: second
+		};
+		if (third === "create") return {
+			type: "collection-create",
+			name: second
+		};
+		return {
+			type: "collection-edit",
+			name: second,
+			id: third
+		};
+	}
+	if (first === "globals" && second && globals[second]) return {
+		type: "global-edit",
+		name: second
+	};
+	for (const [name, config] of Object.entries(pages)) {
+		if (!config?.path) continue;
+		const pagePath = config.path.replace(/^\//, "");
+		if (first === pagePath || segments.join("/") === pagePath) return {
+			type: "page",
+			name,
+			config
+		};
+	}
+	return { type: "not-found" };
+}
+const DEFAULT_LIST_VIEW_ID = "table";
+const DEFAULT_EDIT_VIEW_ID = "form";
+function getConfiguredViewName(config) {
+	if (!config || typeof config !== "object") return void 0;
+	const maybeConfig = config;
+	if (typeof maybeConfig.view === "string") return maybeConfig.view;
+	if (typeof maybeConfig.name === "string") return maybeConfig.name;
+	if (typeof maybeConfig.state?.name === "string") return maybeConfig.state.name;
+}
+function getViewLoader(definition) {
+	if (!definition || typeof definition !== "object") return void 0;
+	const maybeDefinition = definition;
+	return maybeDefinition.component ?? maybeDefinition.state?.component;
+}
+function getViewBaseConfig(definition) {
+	if (!definition || typeof definition !== "object") return void 0;
+	const maybeDefinition = definition;
+	const config = maybeDefinition["~config"] ?? maybeDefinition.state?.["~config"];
+	if (!config || typeof config !== "object") return void 0;
+	return config;
+}
+function mergeViewConfig(base, override) {
+	const baseConfig = base && typeof base === "object" ? base : void 0;
+	const overrideConfig = override && typeof override === "object" ? override : void 0;
+	if (!baseConfig && !overrideConfig) return void 0;
+	return {
+		...baseConfig ?? {},
+		...overrideConfig ?? {}
+	};
+}
+function isDynamicImportLoader(loader) {
+	if (typeof loader !== "function") return false;
+	const candidate = loader;
+	if (candidate.prototype?.isReactComponent || candidate.prototype?.render) return false;
+	if (candidate.$$typeof) return false;
+	return loader.length === 0;
+}
+function ViewLoadingState() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex h-64 items-center justify-center text-muted-foreground",
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:spinner-gap",
+			className: "size-6 animate-spin"
+		})
+	});
+}
+function UnknownViewState({ viewKind, viewId }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "container ",
+		children: /* @__PURE__ */ jsxs(Card, {
+			className: "border-warning/30 bg-warning/5 p-6",
+			children: [/* @__PURE__ */ jsxs("h1", {
+				className: "text-lg font-semibold",
+				children: [
+					"Unknown ",
+					viewKind,
+					" view"
+				]
+			}), /* @__PURE__ */ jsxs("p", {
+				className: "mt-2 text-sm text-muted-foreground",
+				children: [
+					"View \"",
+					viewId,
+					"\" is not registered in the admin view registry."
+				]
+			})]
+		})
+	});
+}
+/**
+* Skeleton shown while router config is loading (Suspense fallback)
+*/
+function RouterSkeleton() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "container space-y-4 py-6",
+		children: [
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-48" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-2",
+				children: [
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full" }),
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full" }),
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full" })
+				]
+			})
+		]
+	});
+}
+function RegistryViewRenderer({ loader, componentProps, viewKind, viewId }) {
+	const [state, setState] = React$1.useState({
+		Component: null,
+		loading: true,
+		error: null
+	});
+	React$1.useEffect(() => {
+		if (!loader) {
+			setState({
+				Component: null,
+				loading: false,
+				error: null
+			});
+			return;
+		}
+		if (!isDynamicImportLoader(loader)) {
+			setState({
+				Component: loader,
+				loading: false,
+				error: null
+			});
+			return;
+		}
+		let mounted = true;
+		setState((prev) => ({
+			...prev,
+			loading: true,
+			error: null
+		}));
+		(async () => {
+			try {
+				const result = await loader();
+				if (!mounted) return;
+				setState({
+					Component: result.default || result,
+					loading: false,
+					error: null
+				});
+			} catch (error) {
+				if (!mounted) return;
+				setState({
+					Component: null,
+					loading: false,
+					error: error instanceof Error ? error : /* @__PURE__ */ new Error("Failed to load view component")
+				});
+			}
+		})();
+		return () => {
+			mounted = false;
+		};
+	}, [loader]);
+	if (state.loading) return /* @__PURE__ */ jsx(ViewLoadingState, {});
+	if (state.error || !state.Component) return /* @__PURE__ */ jsx(UnknownViewState, {
+		viewKind,
+		viewId
+	});
+	const Component = state.Component;
+	return /* @__PURE__ */ jsx(React$1.Suspense, {
+		fallback: /* @__PURE__ */ jsx(ViewLoadingState, {}),
+		children: /* @__PURE__ */ jsx(Component, { ...componentProps })
+	});
+}
+function DefaultDashboard({ config }) {
+	const date = (/* @__PURE__ */ new Date()).toLocaleDateString("en-US", {
+		weekday: "long",
+		year: "numeric",
+		month: "long",
+		day: "numeric"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "container ",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "mb-8 flex items-end justify-between",
+			children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
+				className: "text-3xl font-bold tracking-tight",
+				children: config?.header?.title || "Dashboard"
+			}), config?.header?.showDate !== false && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground mt-1 font-mono text-xs uppercase tracking-widest",
+				children: date
+			})] })
+		}), /* @__PURE__ */ jsx("div", {
+			className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3",
+			children: /* @__PURE__ */ jsxs(Card, {
+				className: "relative overflow-hidden p-6",
+				children: [/* @__PURE__ */ jsx("div", { className: "absolute -right-12 -top-12 h-32 w-32 rounded-full bg-primary/10 blur-3xl" }), /* @__PURE__ */ jsxs("div", {
+					className: "relative",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "mb-4 flex items-center gap-3",
+							children: [/* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-primary glow-primary-sm" }), /* @__PURE__ */ jsx("h3", {
+								className: "font-mono text-xs font-bold uppercase tracking-widest text-primary",
+								children: "System Status"
+							})]
+						}),
+						/* @__PURE__ */ jsx("h2", {
+							className: "mb-2 text-xl font-bold",
+							children: config?.welcomeCard?.title || "Welcome back"
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-sm leading-relaxed text-muted-foreground",
+							children: config?.welcomeCard?.description || "Select a collection from the sidebar to manage your content."
+						})
+					]
+				})]
+			})
+		})]
+	});
+}
+function DefaultNotFound() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "container ",
+		children: [/* @__PURE__ */ jsx("h1", {
+			className: "mb-4 text-2xl font-bold",
+			children: "Page Not Found"
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground",
+			children: "The page you're looking for doesn't exist."
+		})]
+	});
+}
+function RestrictedAccess({ type, name, navigate, basePath }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "container py-12",
+		children: /* @__PURE__ */ jsxs(Card, {
+			className: "relative mx-auto max-w-lg overflow-hidden p-8 text-center",
+			children: [
+				/* @__PURE__ */ jsx("div", { className: "absolute -right-16 -top-16 h-40 w-40 rounded-full bg-muted/50 blur-3xl" }),
+				/* @__PURE__ */ jsx("div", { className: "absolute -left-16 -bottom-16 h-40 w-40 rounded-full bg-muted/30 blur-3xl" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "relative",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-muted",
+							children: /* @__PURE__ */ jsx(Icon, {
+								icon: "ph:lock-simple",
+								className: "h-8 w-8 text-muted-foreground"
+							})
+						}),
+						/* @__PURE__ */ jsx("h1", {
+							className: "mb-2 text-xl font-semibold",
+							children: "Access Restricted"
+						}),
+						/* @__PURE__ */ jsxs("p", {
+							className: "mb-6 text-sm text-muted-foreground",
+							children: [
+								"The ",
+								type,
+								" ",
+								/* @__PURE__ */ jsxs("span", {
+									className: "font-mono text-foreground",
+									children: [
+										"\"",
+										name,
+										"\""
+									]
+								}),
+								" is not available in the admin panel. It may be hidden or you don't have permission to access it."
+							]
+						}),
+						/* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => navigate(basePath),
+							className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90",
+							children: [/* @__PURE__ */ jsx(Icon, {
+								icon: "ph:arrow-left",
+								className: "h-4 w-4"
+							}), "Back to Dashboard"]
+						})
+					]
+				})
+			]
+		})
+	});
+}
+function LazyPageRenderer({ config }) {
+	const [Component, setComponent] = React$1.useState(null);
+	const [loading, setLoading] = React$1.useState(true);
+	const [error, setError] = React$1.useState(null);
+	React$1.useEffect(() => {
+		let mounted = true;
+		async function load() {
+			try {
+				if (typeof config.component === "function") {
+					const result = config.component();
+					if (result?.then) {
+						const mod = await result;
+						if (mounted) setComponent(() => mod.default || mod);
+					} else if (mounted) setComponent(() => config.component);
+				} else if (config.component) {
+					if (mounted) setComponent(() => config.component);
+				}
+			} catch (err) {
+				if (mounted) setError(err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to load"));
+			} finally {
+				if (mounted) setLoading(false);
+			}
+		}
+		load();
+		return () => {
+			mounted = false;
+		};
+	}, [config.component]);
+	if (loading) return /* @__PURE__ */ jsx("div", {
+		className: "flex h-64 items-center justify-center text-muted-foreground",
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:spinner-gap",
+			className: "size-6 animate-spin"
+		})
+	});
+	if (error) return /* @__PURE__ */ jsxs("div", {
+		className: "container ",
+		children: [/* @__PURE__ */ jsx("h1", {
+			className: "mb-4 text-2xl font-bold text-destructive",
+			children: "Error"
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground",
+			children: error.message
+		})]
+	});
+	return Component ? /* @__PURE__ */ jsx(Component, {}) : /* @__PURE__ */ jsx(DefaultNotFound, {});
+}
+/**
+* AdminRouter Component
+*
+* Routes to the appropriate view based on URL segments.
+* Uses the view registry to resolve list/edit views dynamically.
+*
+* When used inside AdminProvider, collections/globals/pages are automatically
+* read from context if not provided as props.
+*
+* @example
+* ```tsx
+* // With AdminProvider (automatic)
+* <AdminProvider admin={admin} client={client}>
+*   <AdminRouter segments={segments} navigate={navigate} />
+* </AdminProvider>
+*
+* // Without AdminProvider (manual)
+* <AdminRouter
+*   segments={segments}
+*   navigate={navigate}
+*   collections={collections}
+*   globals={globals}
+* />
+* ```
+*/
+/**
+* AdminRouter Component
+*
+* Routes to the appropriate view based on URL segments.
+* Uses Suspense internally - shows skeleton while config loads.
+*/
+function AdminRouter(props) {
+	return /* @__PURE__ */ jsx(React$1.Suspense, {
+		fallback: /* @__PURE__ */ jsx(RouterSkeleton, {}),
+		children: /* @__PURE__ */ jsx(AdminRouterInner, { ...props })
+	});
+}
+/**
+* Inner router component that uses Suspense for data loading.
+* Guaranteed to have config loaded when rendering.
+*/
+function AdminRouterInner({ segments, navigate, basePath = "/admin", searchParams: searchParamsProp, collections: collectionsProp, globals: globalsProp, pages: pagesProp, DashboardComponent: DashboardComponentProp, dashboardConfig: dashboardConfigProp, defaultViews: defaultViewsProp, collectionComponents = {}, globalComponents = {}, renderFormFields, registry, NotFoundComponent }) {
+	const searchParams = React$1.useMemo(() => {
+		if (searchParamsProp) return searchParamsProp;
+		if (typeof window !== "undefined") return new URLSearchParams(window.location.search);
+		return new URLSearchParams();
+	}, [searchParamsProp]);
+	const prefillValues = React$1.useMemo(() => parsePrefillParams(searchParams), [searchParams]);
+	const { collections, globals, pages, listViews, editViews, dashboardConfig, DashboardComponent, defaultViews } = useRouterConfig({
+		collections: collectionsProp,
+		globals: globalsProp,
+		pages: pagesProp,
+		dashboardConfig: dashboardConfigProp,
+		DashboardComponent: DashboardComponentProp,
+		defaultViews: defaultViewsProp
+	});
+	const route = matchRoute(segments, collections, globals, pages);
+	const activeCollectionName = route.type === "collection-list" || route.type === "collection-create" || route.type === "collection-edit" ? route.name : "";
+	const activeGlobalName = route.type === "global-edit" ? route.name : "";
+	const { data: activeCollectionSchema } = useCollectionSchema(activeCollectionName, { enabled: !!activeCollectionName });
+	const { data: activeGlobalSchema } = useGlobalSchema(activeGlobalName, { enabled: !!activeGlobalName });
+	if (route.type === "dashboard") {
+		if (defaultViews?.dashboard?.component) {
+			const Component = defaultViews.dashboard.component;
+			return /* @__PURE__ */ jsx(Component, {});
+		}
+		if (DashboardComponent) return /* @__PURE__ */ jsx(DashboardComponent, {});
+		if (dashboardConfig?.items?.length || dashboardConfig?.widgets?.length) return /* @__PURE__ */ jsx(DashboardGrid, {
+			config: dashboardConfig,
+			basePath,
+			navigate
+		});
+		return /* @__PURE__ */ jsx(DefaultDashboard, { config: defaultViews?.dashboard });
+	}
+	if (route.type === "collection-list") {
+		const { name } = route;
+		const config = collections[name];
+		if (!config) return /* @__PURE__ */ jsx(RestrictedAccess, {
+			type: "collection",
+			name,
+			navigate,
+			basePath
+		});
+		const custom = collectionComponents[name];
+		const viewNameFromSchema = activeCollectionSchema?.admin?.list?.view;
+		const viewNameFromConfig = getConfiguredViewName(config?.list);
+		const selectedListView = viewNameFromSchema ?? viewNameFromConfig ?? DEFAULT_LIST_VIEW_ID;
+		const selectedListViewDefinition = listViews[selectedListView];
+		const selectedListViewConfig = mergeViewConfig(getViewBaseConfig(selectedListViewDefinition), config?.list?.["~config"] ?? config?.list ?? activeCollectionSchema?.admin?.list);
+		const listViewLoader = getViewLoader(selectedListViewDefinition) ?? defaultViews?.collectionList?.component;
+		if (custom?.List) return /* @__PURE__ */ jsx(custom.List, {});
+		return /* @__PURE__ */ jsx(RegistryViewRenderer, {
+			loader: listViewLoader,
+			viewKind: "list",
+			viewId: selectedListView,
+			componentProps: {
+				collection: name,
+				config,
+				viewConfig: selectedListViewConfig,
+				navigate,
+				basePath,
+				showSearch: defaultViews?.collectionList?.showSearch,
+				showFilters: defaultViews?.collectionList?.showFilters,
+				showToolbar: defaultViews?.collectionList?.showToolbar,
+				realtime: defaultViews?.collectionList?.realtime
+			}
+		}, name);
+	}
+	if (route.type === "collection-create" || route.type === "collection-edit") {
+		const { name } = route;
+		const id = route.type === "collection-edit" ? route.id : void 0;
+		const config = collections[name];
+		if (!config) return /* @__PURE__ */ jsx(RestrictedAccess, {
+			type: "collection",
+			name,
+			navigate,
+			basePath
+		});
+		const custom = collectionComponents[name];
+		const formDefaults = defaultViews?.collectionForm;
+		const viewNameFromSchema = activeCollectionSchema?.admin?.form?.view;
+		const viewNameFromConfig = getConfiguredViewName(config?.form);
+		const selectedEditView = viewNameFromSchema ?? viewNameFromConfig ?? DEFAULT_EDIT_VIEW_ID;
+		const selectedEditViewDefinition = editViews[selectedEditView];
+		const selectedEditViewConfig = mergeViewConfig(getViewBaseConfig(selectedEditViewDefinition), config?.form?.["~config"] ?? config?.form ?? activeCollectionSchema?.admin?.form);
+		const editViewLoader = getViewLoader(selectedEditViewDefinition) ?? formDefaults?.component;
+		if (custom?.Form) return /* @__PURE__ */ jsx(custom.Form, {});
+		return /* @__PURE__ */ jsx(RegistryViewRenderer, {
+			loader: editViewLoader,
+			viewKind: "edit",
+			viewId: selectedEditView,
+			componentProps: {
+				collection: name,
+				id,
+				config,
+				viewConfig: selectedEditViewConfig,
+				navigate,
+				basePath,
+				defaultValues: route.type === "collection-create" && Object.keys(prefillValues).length > 0 ? prefillValues : void 0,
+				registry,
+				allCollectionsConfig: collections,
+				showMeta: formDefaults?.showMeta
+			}
+		}, `${name}-${id ?? "create"}`);
+	}
+	if (route.type === "global-edit") {
+		const { name } = route;
+		const config = globals[name];
+		if (!config) return /* @__PURE__ */ jsx(RestrictedAccess, {
+			type: "global",
+			name,
+			navigate,
+			basePath
+		});
+		const custom = globalComponents[name];
+		const viewNameFromSchema = activeGlobalSchema?.admin?.form?.view;
+		const viewNameFromConfig = getConfiguredViewName(config?.form);
+		const hasCustomViewSpecified = !!(viewNameFromSchema ?? viewNameFromConfig);
+		const selectedEditView = viewNameFromSchema ?? viewNameFromConfig ?? DEFAULT_EDIT_VIEW_ID;
+		const selectedEditViewDefinition = hasCustomViewSpecified ? editViews[selectedEditView] : void 0;
+		const selectedEditViewConfig = mergeViewConfig(getViewBaseConfig(selectedEditViewDefinition), config?.form?.["~config"] ?? config?.form ?? activeGlobalSchema?.admin?.form);
+		const globalViewLoader = (hasCustomViewSpecified ? getViewLoader(selectedEditViewDefinition) : void 0) ?? defaultViews?.globalForm?.component;
+		if (custom?.Form) return /* @__PURE__ */ jsx(custom.Form, {});
+		return /* @__PURE__ */ jsx(RegistryViewRenderer, {
+			loader: globalViewLoader,
+			viewKind: "edit",
+			viewId: selectedEditView,
+			componentProps: {
+				global: name,
+				config,
+				viewConfig: selectedEditViewConfig,
+				navigate,
+				basePath,
+				registry,
+				allGlobalsConfig: globals
+			}
+		}, name);
+	}
+	if (route.type === "page") return /* @__PURE__ */ jsx(LazyPageRenderer, { config: route.config });
+	return /* @__PURE__ */ jsx(NotFoundComponent || DefaultNotFound, {});
+}
+
+//#endregion
+export { AdminRouter };
+//# sourceMappingURL=admin-router.mjs.map