@questpie/admin 1.1.1 → 3.0.0

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

@@ -0,0 +1,302 @@
+import { cn } from "../../lib/utils.mjs";
+import { useAdminStore } from "../../runtime/provider.mjs";
+import { SidebarInset, SidebarProvider } from "../../components/ui/sidebar.mjs";
+import { Toaster } from "../../components/ui/sonner.mjs";
+import { BreadcrumbProvider, useCurrentBreadcrumbs } from "../../contexts/breadcrumb-context.mjs";
+import { GlobalSearch } from "../common/global-search.mjs";
+import { AdminSidebar } from "./admin-sidebar.mjs";
+import { AdminTopbar } from "./admin-topbar.mjs";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/views/layout/admin-layout.tsx
+/**
+* AdminLayout Component
+*
+* Complete admin layout with:
+* - Sidebar navigation (using shadcn sidebar primitives)
+* - Main content area
+* - Optional header/footer
+*
+* Automatically reads from AdminProvider context when props are not provided.
+*/
+function useLayoutProps(props) {
+	const $ = c(3);
+	const storeBrandName = useAdminStore(_temp);
+	const storeNavigate = useAdminStore(_temp2);
+	const t0 = props.brandName ?? storeBrandName;
+	const t1 = props.navigate ?? storeNavigate;
+	let t2;
+	if ($[0] !== t0 || $[1] !== t1) {
+		t2 = {
+			brandName: t0,
+			navigate: t1
+		};
+		$[0] = t0;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
+}
+/**
+* Topbar wrapper that reads breadcrumbs from context
+*/
+function _temp2(s_0) {
+	return s_0.navigate;
+}
+function _temp(s) {
+	return s.brandName;
+}
+const AdminTopbarWithBreadcrumbs = React.memo(function AdminTopbarWithBreadcrumbs$1(props) {
+	const $ = c(3);
+	const breadcrumbs = useCurrentBreadcrumbs();
+	let t0;
+	if ($[0] !== breadcrumbs || $[1] !== props) {
+		t0 = /* @__PURE__ */ jsx(AdminTopbar, {
+			...props,
+			breadcrumbs
+		});
+		$[0] = breadcrumbs;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
+});
+/**
+* AdminLayout Component
+*
+* When used inside AdminProvider, brandName is automatically
+* read from context if not provided as props.
+* Navigation is driven by server-side sidebar configuration.
+*
+* @example
+* ```tsx
+* <AdminProvider admin={admin} client={client}>
+*   <AdminLayout LinkComponent={Link} activeRoute="/admin/posts">
+*     <Outlet />
+*   </AdminLayout>
+* </AdminProvider>
+* ```
+*/
+function AdminLayout(t0) {
+	const $ = c(55);
+	const { LinkComponent, activeRoute, basePath: t1, brandName: brandNameProp, sidebarCollapsed: t2, children, className, sidebarProps, header, footer, navigate: navigateProp, theme: t3, setTheme, showThemeToggle, toasterProps, layoutMode: t4 } = t0;
+	const basePath = t1 === void 0 ? "/admin" : t1;
+	const sidebarCollapsedProp = t2 === void 0 ? false : t2;
+	const theme = t3 === void 0 ? "system" : t3;
+	const layoutMode = t4 === void 0 ? "wide" : t4;
+	const shouldShowHeader = !!header;
+	const shouldShowFooter = !!footer;
+	let t5;
+	if ($[0] !== brandNameProp || $[1] !== navigateProp) {
+		t5 = {
+			brandName: brandNameProp,
+			navigate: navigateProp
+		};
+		$[0] = brandNameProp;
+		$[1] = navigateProp;
+		$[2] = t5;
+	} else t5 = $[2];
+	const { brandName, navigate } = useLayoutProps(t5);
+	const [isSearchOpen, setIsSearchOpen] = React.useState(false);
+	let t6;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = () => setIsSearchOpen(true);
+		$[3] = t6;
+	} else t6 = $[3];
+	const openSearch = t6;
+	let t7;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = () => setIsSearchOpen(false);
+		$[4] = t7;
+	} else t7 = $[4];
+	const closeSearch = t7;
+	let t8;
+	let t9;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = () => {
+			const down = (e) => {
+				if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+					e.preventDefault();
+					setIsSearchOpen(true);
+				}
+			};
+			document.addEventListener("keydown", down);
+			return () => document.removeEventListener("keydown", down);
+		};
+		t9 = [];
+		$[5] = t8;
+		$[6] = t9;
+	} else {
+		t8 = $[5];
+		t9 = $[6];
+	}
+	React.useEffect(t8, t9);
+	let t10;
+	if ($[7] !== className) {
+		t10 = cn("qa-admin-layout bg-background min-h-screen", className);
+		$[7] = className;
+		$[8] = t10;
+	} else t10 = $[8];
+	let t11;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx("a", {
+			href: "#main-content",
+			className: "qa-admin-layout__skip-link focus:bg-primary focus:text-primary-foreground sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50 focus:px-4 focus:py-2 focus:text-sm focus:font-medium",
+			children: "Skip to main content"
+		});
+		$[9] = t11;
+	} else t11 = $[9];
+	let t12;
+	if ($[10] !== basePath || $[11] !== isSearchOpen || $[12] !== navigate) {
+		t12 = isSearchOpen && /* @__PURE__ */ jsx(GlobalSearch, {
+			isOpen: isSearchOpen,
+			onClose: closeSearch,
+			navigate,
+			basePath
+		});
+		$[10] = basePath;
+		$[11] = isSearchOpen;
+		$[12] = navigate;
+		$[13] = t12;
+	} else t12 = $[13];
+	const t13 = !sidebarCollapsedProp;
+	let t14;
+	if ($[14] !== LinkComponent || $[15] !== activeRoute || $[16] !== basePath || $[17] !== brandName || $[18] !== sidebarProps) {
+		t14 = /* @__PURE__ */ jsx(AdminSidebar, {
+			LinkComponent,
+			activeRoute,
+			basePath,
+			brandName,
+			...sidebarProps
+		});
+		$[14] = LinkComponent;
+		$[15] = activeRoute;
+		$[16] = basePath;
+		$[17] = brandName;
+		$[18] = sidebarProps;
+		$[19] = t14;
+	} else t14 = $[19];
+	let t15;
+	if ($[20] !== setTheme || $[21] !== showThemeToggle || $[22] !== theme) {
+		t15 = /* @__PURE__ */ jsx(AdminTopbarWithBreadcrumbs, {
+			onSearchOpen: openSearch,
+			theme,
+			setTheme,
+			showThemeToggle
+		});
+		$[20] = setTheme;
+		$[21] = showThemeToggle;
+		$[22] = theme;
+		$[23] = t15;
+	} else t15 = $[23];
+	let t16;
+	if ($[24] !== header || $[25] !== shouldShowHeader) {
+		t16 = shouldShowHeader && header && /* @__PURE__ */ jsx("header", {
+			className: "qa-admin-layout__header border-b",
+			children: header
+		});
+		$[24] = header;
+		$[25] = shouldShowHeader;
+		$[26] = t16;
+	} else t16 = $[26];
+	const t17 = layoutMode === "default" && "mx-auto max-w-5xl p-3 md:p-4 lg:p-6";
+	const t18 = layoutMode === "wide" && "p-3 md:p-4 lg:p-6";
+	const t19 = layoutMode === "full" && "p-2 md:p-3";
+	const t20 = layoutMode === "immersive" && "p-0";
+	let t21;
+	if ($[27] !== t17 || $[28] !== t18 || $[29] !== t19 || $[30] !== t20) {
+		t21 = cn("qa-admin-layout__main-content min-w-0", t17, t18, t19, t20);
+		$[27] = t17;
+		$[28] = t18;
+		$[29] = t19;
+		$[30] = t20;
+		$[31] = t21;
+	} else t21 = $[31];
+	let t22;
+	if ($[32] !== children || $[33] !== t21) {
+		t22 = /* @__PURE__ */ jsx("main", {
+			id: "main-content",
+			className: "qa-admin-layout__main min-w-0 flex-1 overflow-y-auto",
+			tabIndex: -1,
+			children: /* @__PURE__ */ jsx("div", {
+				className: t21,
+				children
+			})
+		});
+		$[32] = children;
+		$[33] = t21;
+		$[34] = t22;
+	} else t22 = $[34];
+	let t23;
+	if ($[35] !== footer || $[36] !== shouldShowFooter) {
+		t23 = shouldShowFooter && footer && /* @__PURE__ */ jsx("footer", {
+			className: "qa-admin-layout__footer border-t",
+			children: footer
+		});
+		$[35] = footer;
+		$[36] = shouldShowFooter;
+		$[37] = t23;
+	} else t23 = $[37];
+	let t24;
+	if ($[38] !== t15 || $[39] !== t16 || $[40] !== t22 || $[41] !== t23) {
+		t24 = /* @__PURE__ */ jsxs(SidebarInset, {
+			className: "qa-admin-layout__content flex h-svh flex-col",
+			children: [
+				t15,
+				t16,
+				t22,
+				t23
+			]
+		});
+		$[38] = t15;
+		$[39] = t16;
+		$[40] = t22;
+		$[41] = t23;
+		$[42] = t24;
+	} else t24 = $[42];
+	let t25;
+	if ($[43] !== t13 || $[44] !== t14 || $[45] !== t24) {
+		t25 = /* @__PURE__ */ jsxs(SidebarProvider, {
+			defaultOpen: t13,
+			className: "qa-admin-layout__sidebar-wrapper border-border mx-auto h-svh max-w-[1920px] overflow-hidden border-x",
+			children: [t14, t24]
+		});
+		$[43] = t13;
+		$[44] = t14;
+		$[45] = t24;
+		$[46] = t25;
+	} else t25 = $[46];
+	let t26;
+	if ($[47] !== theme || $[48] !== toasterProps) {
+		t26 = /* @__PURE__ */ jsx(Toaster, {
+			theme,
+			...toasterProps
+		});
+		$[47] = theme;
+		$[48] = toasterProps;
+		$[49] = t26;
+	} else t26 = $[49];
+	let t27;
+	if ($[50] !== t10 || $[51] !== t12 || $[52] !== t25 || $[53] !== t26) {
+		t27 = /* @__PURE__ */ jsx(BreadcrumbProvider, { children: /* @__PURE__ */ jsxs("div", {
+			className: t10,
+			children: [
+				t11,
+				t12,
+				t25,
+				t26
+			]
+		}) });
+		$[50] = t10;
+		$[51] = t12;
+		$[52] = t25;
+		$[53] = t26;
+		$[54] = t27;
+	} else t27 = $[54];
+	return t27;
+}
+
+//#endregion
+export { AdminLayout };

package/dist/client/views/layout/admin-router.d.mts

@@ -0,0 +1,93 @@
+import { PageDefinition } from "../../builder/page/page.mjs";
+import { DashboardConfig } from "../../builder/types/ui-config.mjs";
+import { ComponentRegistry } from "../../builder/types/field-types.mjs";
+import * as React from "react";
+
+//#region src/client/views/layout/admin-router.d.ts
+
+/**
+ * Collection config as used by AdminRouter.
+ * Compatible with CollectionBuilderState from admin.getCollections().
+ */
+type CollectionRouterConfig = Record<string, any>;
+/**
+ * Global config as used by AdminRouter.
+ * Compatible with GlobalBuilderState from admin.getGlobals().
+ */
+type GlobalRouterConfig = Record<string, any>;
+interface AdminRouterProps {
+  /**
+   * Current route segments (parsed from URL after /admin)
+   * Example: ["collections", "posts", "123"] for /admin/collections/posts/123
+   */
+  segments: string[];
+  /**
+   * Navigate function (router-specific)
+   */
+  navigate: (path: string) => void;
+  /**
+   * Base path for admin routes (default: "/admin")
+   */
+  basePath?: string;
+  /**
+   * Current URL search params (for prefill support)
+   * If not provided, reads from window.location.search
+   */
+  searchParams?: URLSearchParams;
+  /**
+   * Collection configurations.
+   * Accepts CollectionBuilderState objects from admin.getCollections()
+   */
+  collections?: Record<string, CollectionRouterConfig>;
+  /**
+   * Global configurations.
+   * Accepts GlobalBuilderState objects from admin.getGlobals()
+   */
+  globals?: Record<string, GlobalRouterConfig>;
+  /**
+   * Custom pages
+   */
+  pages?: Record<string, PageDefinition<string>>;
+  /**
+   * Dashboard component (legacy - use dashboardConfig instead)
+   */
+  DashboardComponent?: React.ComponentType;
+  /**
+   * Dashboard configuration (widgets, title, etc.)
+   */
+  dashboardConfig?: DashboardConfig;
+  /**
+   * Custom collection components (override default views)
+   */
+  collectionComponents?: Record<string, {
+    List?: React.ComponentType;
+    Form?: React.ComponentType;
+  }>;
+  /**
+   * Custom global components
+   */
+  globalComponents?: Record<string, {
+    Form?: React.ComponentType;
+  }>;
+  /**
+   * Render custom form fields for collection
+   */
+  renderFormFields?: (collection: string) => React.ReactNode;
+  /**
+   * Component registry
+   */
+  registry?: ComponentRegistry;
+  /**
+   * Not found component
+   */
+  NotFoundComponent?: React.ComponentType;
+}
+/**
+ * AdminRouter Component
+ *
+ * Routes to the appropriate view based on URL segments.
+ * Uses Suspense internally - shows skeleton while config loads.
+ */
+declare function AdminRouter(props: AdminRouterProps): React.ReactElement;
+//#endregion
+export { AdminRouter, AdminRouterProps };