@questpie/admin 1.1.1 → 3.0.0

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

@@ -0,0 +1,137 @@
+import { AdminInput } from "../../builder/admin.mjs";
+import { AnyQuestpieClient } from "../../builder/index.mjs";
+import { AdminLayoutSharedProps } from "./admin-layout.mjs";
+import * as React from "react";
+import { QueryClient } from "@tanstack/react-query";
+
+//#region src/client/views/layout/admin-layout-provider.d.ts
+
+interface AdminLayoutProviderProps extends AdminLayoutSharedProps {
+  /**
+   * Admin configuration - pass plain AdminState or Admin instance.
+   *
+   * @example
+   * ```tsx
+   * // Recommended: pass builder directly
+   * <AdminLayoutProvider admin={admin} ... />
+   *
+   * // Also works (backward compatible)
+   * <AdminLayoutProvider admin={Admin.from(admin)} ... />
+   * ```
+   */
+  admin: AdminInput<any>;
+  /**
+   * API client for data fetching
+   */
+  client: AnyQuestpieClient;
+  /**
+   * Auth client for authentication (created via createAdminAuthClient)
+   */
+  authClient?: any;
+  /**
+   * Optional QueryClient instance (will create one if not provided)
+   */
+  queryClient?: QueryClient;
+  /**
+   * Enable authentication guard for protected routes.
+   * When true, checks if user is authenticated before rendering content.
+   * @default true if authClient is provided
+   */
+  enableAuthGuard?: boolean;
+  /**
+   * Paths that don't require authentication.
+   * Use relative paths from basePath (e.g., "/login" for "/admin/login").
+   * @default ["/login", "/forgot-password", "/reset-password", "/accept-invite"]
+   */
+  publicPaths?: string[];
+  /**
+   * Required role for accessing protected routes.
+   * @default "admin"
+   */
+  requiredRole?: string;
+  /**
+   * Custom loading component while checking authentication.
+   */
+  authLoadingFallback?: React.ReactNode;
+  /**
+   * Custom unauthorized component (instead of redirecting to login).
+   */
+  authUnauthorizedFallback?: React.ReactNode;
+  /**
+   * Use server-side translations (fetched via getAdminTranslations RPC).
+   * When true, translations are fetched from the server configured via
+   * .adminLocale() and config translations.
+   *
+   * @default false (for backwards compatibility)
+   *
+   * @example
+   * ```tsx
+   * // Server configures locales and messages
+   * const app = runtimeConfig({
+   *   modules: [adminModule],
+   *   adminLocale: { locales: ["en", "sk"], defaultLocale: "en" },
+   *   messages: { sk: { "common.save": "Ulozit" } },
+   * });
+   *
+   * // Client fetches from server
+   * <AdminLayoutProvider
+   *   admin={admin}
+   *   client={client}
+   *   useServerTranslations
+   * >
+   *   {children}
+   * </AdminLayoutProvider>
+   * ```
+   */
+  useServerTranslations?: boolean;
+  /**
+   * Fallback element to show while loading server translations.
+   * Only used when useServerTranslations is true.
+   */
+  translationsFallback?: React.ReactNode;
+  /**
+   * Initial UI locale (admin interface language)
+   * If not provided, reads from cookie or uses default from admin config
+   */
+  initialUiLocale?: string;
+  /**
+   * Children to render inside the layout
+   * - Next.js: {children} from layout props
+   * - TanStack Router: <Outlet />
+   */
+  children: React.ReactNode;
+}
+/**
+ * AdminLayoutProvider Component
+ *
+ * Universal wrapper for admin layout that works with any router.
+ * Handles all the provider setup and renders children inside the layout.
+ */
+declare function AdminLayoutProvider({
+  admin: adminInput,
+  client,
+  authClient,
+  queryClient,
+  LinkComponent,
+  activeRoute,
+  basePath,
+  header,
+  footer,
+  sidebarProps,
+  theme,
+  setTheme,
+  showThemeToggle,
+  toasterProps,
+  className,
+  enableAuthGuard,
+  publicPaths,
+  requiredRole,
+  authLoadingFallback,
+  authUnauthorizedFallback,
+  useServerTranslations,
+  translationsFallback,
+  initialUiLocale,
+  children
+}: AdminLayoutProviderProps): React.ReactElement;
+//#endregion
+export { AdminLayoutProvider };

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

@@ -0,0 +1,193 @@
+import { Admin } from "../../builder/admin.mjs";
+import { getAdminLocalesQueryOptions, getAdminTranslationsQueryOptions, getUiLocaleFromCookie } from "../../runtime/translations-provider.mjs";
+import { AdminProvider } from "../../runtime/provider.mjs";
+import { getAdminConfigQueryOptions } from "../../hooks/use-admin-config.mjs";
+import { AdminLayout } from "./admin-layout.mjs";
+import { AuthGuard } from "../../components/auth/auth-guard.mjs";
+import { c } from "react/compiler-runtime";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/views/layout/admin-layout-provider.tsx
+/** Debounced 401 redirect - prevents multiple redirects from concurrent failures */
+let sessionExpiredRedirectPending = false;
+function handleSessionExpiredError(error) {
+	if (sessionExpiredRedirectPending) return;
+	if ((error != null && typeof error === "object" && "status" in error ? error.status : void 0) !== 401) return;
+	if (typeof window !== "undefined") {
+		const path = window.location.pathname;
+		if (DEFAULT_PUBLIC_PATHS.some((p) => path.endsWith(p))) return;
+		sessionExpiredRedirectPending = true;
+		const returnUrl = encodeURIComponent(window.location.pathname + window.location.search);
+		window.location.href = `${path.replace(/\/[^/]*$/, "")}/login?returnUrl=${returnUrl}`;
+	}
+}
+let cachedQueryClient;
+function getDefaultQueryClient() {
+	if (!cachedQueryClient) {
+		cachedQueryClient = new QueryClient({ defaultOptions: {
+			queries: {
+				staleTime: 60 * 1e3,
+				refetchOnWindowFocus: false,
+				retry: (failureCount, error) => {
+					if ((error != null && typeof error === "object" && "status" in error ? error.status : void 0) === 401) return false;
+					return failureCount < 3;
+				}
+			},
+			mutations: { onError: handleSessionExpiredError }
+		} });
+		cachedQueryClient.getQueryCache().config.onError = handleSessionExpiredError;
+	}
+	return cachedQueryClient;
+}
+/**
+* Default public paths that don't require authentication
+* These paths also render WITHOUT the admin layout (no sidebar/header)
+*/
+const DEFAULT_PUBLIC_PATHS = [
+	"/login",
+	"/forgot-password",
+	"/reset-password",
+	"/accept-invite",
+	"/setup"
+];
+/**
+* Check if current path matches any public path
+*/
+function isPublicPath(currentPath, basePath, publicPaths) {
+	if (!currentPath) return false;
+	const normalizedCurrent = currentPath.replace(/\/+$/, "");
+	const normalizedBase = basePath.replace(/\/+$/, "");
+	for (const publicPath of publicPaths) {
+		const fullPublicPath = `${normalizedBase}${publicPath}`.replace(/\/+$/, "");
+		if (normalizedCurrent === fullPublicPath || normalizedCurrent.startsWith(`${fullPublicPath}/`)) return true;
+	}
+	return false;
+}
+/**
+* AdminLayoutProvider Component
+*
+* Universal wrapper for admin layout that works with any router.
+* Handles all the provider setup and renders children inside the layout.
+*/
+function AdminLayoutProvider(t0) {
+	const $ = c(38);
+	const { admin: adminInput, client, authClient, queryClient, LinkComponent, activeRoute, basePath: t1, header, footer, sidebarProps, theme, setTheme, showThemeToggle, toasterProps, className, enableAuthGuard, publicPaths: t2, requiredRole: t3, authLoadingFallback, authUnauthorizedFallback, useServerTranslations, translationsFallback, initialUiLocale, children } = t0;
+	const basePath = t1 === void 0 ? "/admin" : t1;
+	const publicPaths = t2 === void 0 ? DEFAULT_PUBLIC_PATHS : t2;
+	const requiredRole = t3 === void 0 ? "admin" : t3;
+	let qc;
+	if ($[0] !== client || $[1] !== initialUiLocale || $[2] !== queryClient || $[3] !== useServerTranslations) {
+		qc = queryClient ?? getDefaultQueryClient();
+		if (client?.routes) {
+			qc.prefetchQuery(getAdminConfigQueryOptions(client));
+			if (useServerTranslations) {
+				const locale = initialUiLocale ?? getUiLocaleFromCookie() ?? "en";
+				qc.prefetchQuery(getAdminLocalesQueryOptions(client));
+				qc.prefetchQuery(getAdminTranslationsQueryOptions(client, locale));
+			}
+		}
+		$[0] = client;
+		$[1] = initialUiLocale;
+		$[2] = queryClient;
+		$[3] = useServerTranslations;
+		$[4] = qc;
+	} else qc = $[4];
+	let t4;
+	if ($[5] !== adminInput) {
+		t4 = Admin.normalize(adminInput);
+		$[5] = adminInput;
+		$[6] = t4;
+	} else t4 = $[6];
+	const admin = t4;
+	const shouldUseAuthGuard = enableAuthGuard ?? authClient != null;
+	const isCurrentPathPublic = isPublicPath(activeRoute ?? (typeof window !== "undefined" ? window.location.pathname : void 0), basePath, publicPaths);
+	let innerContent;
+	if (isCurrentPathPublic) innerContent = children;
+	else {
+		let t5$1;
+		if ($[7] !== LinkComponent || $[8] !== activeRoute || $[9] !== basePath || $[10] !== children || $[11] !== className || $[12] !== footer || $[13] !== header || $[14] !== setTheme || $[15] !== showThemeToggle || $[16] !== sidebarProps || $[17] !== theme || $[18] !== toasterProps) {
+			t5$1 = /* @__PURE__ */ jsx(AdminLayout, {
+				LinkComponent,
+				activeRoute,
+				basePath,
+				header,
+				footer,
+				sidebarProps,
+				theme,
+				setTheme,
+				showThemeToggle,
+				toasterProps,
+				className,
+				children
+			});
+			$[7] = LinkComponent;
+			$[8] = activeRoute;
+			$[9] = basePath;
+			$[10] = children;
+			$[11] = className;
+			$[12] = footer;
+			$[13] = header;
+			$[14] = setTheme;
+			$[15] = showThemeToggle;
+			$[16] = sidebarProps;
+			$[17] = theme;
+			$[18] = toasterProps;
+			$[19] = t5$1;
+		} else t5$1 = $[19];
+		const layoutContent = t5$1;
+		let t6$1;
+		if ($[20] !== authLoadingFallback || $[21] !== authUnauthorizedFallback || $[22] !== basePath || $[23] !== layoutContent || $[24] !== requiredRole || $[25] !== shouldUseAuthGuard) {
+			t6$1 = shouldUseAuthGuard ? /* @__PURE__ */ jsx(AuthGuard, {
+				loginPath: `${basePath}/login`,
+				requiredRole,
+				loadingFallback: authLoadingFallback,
+				unauthorizedFallback: authUnauthorizedFallback,
+				children: layoutContent
+			}) : layoutContent;
+			$[20] = authLoadingFallback;
+			$[21] = authUnauthorizedFallback;
+			$[22] = basePath;
+			$[23] = layoutContent;
+			$[24] = requiredRole;
+			$[25] = shouldUseAuthGuard;
+			$[26] = t6$1;
+		} else t6$1 = $[26];
+		innerContent = t6$1;
+	}
+	let t5;
+	if ($[27] !== admin || $[28] !== authClient || $[29] !== client || $[30] !== initialUiLocale || $[31] !== innerContent || $[32] !== translationsFallback || $[33] !== useServerTranslations) {
+		t5 = /* @__PURE__ */ jsx(AdminProvider, {
+			admin,
+			client,
+			authClient,
+			useServerTranslations,
+			translationsFallback,
+			initialUiLocale,
+			children: innerContent
+		});
+		$[27] = admin;
+		$[28] = authClient;
+		$[29] = client;
+		$[30] = initialUiLocale;
+		$[31] = innerContent;
+		$[32] = translationsFallback;
+		$[33] = useServerTranslations;
+		$[34] = t5;
+	} else t5 = $[34];
+	const content = t5;
+	let t6;
+	if ($[35] !== content || $[36] !== qc) {
+		t6 = /* @__PURE__ */ jsx(QueryClientProvider, {
+			client: qc,
+			children: content
+		});
+		$[35] = content;
+		$[36] = qc;
+		$[37] = t6;
+	} else t6 = $[37];
+	return t6;
+}
+
+//#endregion
+export { AdminLayoutProvider };

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

@@ -0,0 +1,133 @@
+import { AdminToasterProps } from "../../components/ui/sonner.mjs";
+import { AdminSidebarProps } from "./admin-sidebar.mjs";
+import * as React from "react";
+
+//#region src/client/views/layout/admin-layout.d.ts
+
+/**
+ * Theme mode for the admin interface
+ */
+type AdminTheme = "light" | "dark" | "system";
+/**
+ * Layout mode for content area width
+ * - default: max-w-5xl centered (settings, narrow forms)
+ * - wide: full width with padding (tables, forms, dashboards) — the default
+ * - full: full width reduced padding (kanban, calendar)
+ * - immersive: full width no padding (block editor, canvas)
+ */
+type LayoutMode = "default" | "wide" | "full" | "immersive";
+/**
+ * Shared layout props that can be passed through AdminLayoutProvider
+ * or directly to AdminLayout.
+ */
+interface AdminLayoutSharedProps {
+  /**
+   * Link component (router-specific)
+   */
+  LinkComponent: AdminSidebarProps["LinkComponent"];
+  /**
+   * Current active route
+   */
+  activeRoute?: string;
+  /**
+   * Base path for admin routes
+   * @default "/admin"
+   */
+  basePath?: string;
+  /**
+   * Header content
+   */
+  header?: React.ReactNode;
+  /**
+   * Footer content
+   */
+  footer?: React.ReactNode;
+  /**
+   * Additional sidebar props
+   */
+  sidebarProps?: Partial<Omit<AdminSidebarProps, "LinkComponent">>;
+  /**
+   * Current theme.
+   * Pass from your app's theme context.
+   * @default "system"
+   */
+  theme?: AdminTheme;
+  /**
+   * Callback to change theme.
+   * Connect to your app's theme context setTheme function.
+   */
+  setTheme?: (theme: AdminTheme) => void;
+  /**
+   * Show theme toggle button in the topbar
+   * @default true (when setTheme is provided)
+   */
+  showThemeToggle?: boolean;
+  /**
+   * Additional toaster props
+   */
+  toasterProps?: Omit<AdminToasterProps, "theme">;
+  /**
+   * Custom layout className
+   */
+  className?: string;
+  /**
+   * Layout mode for content area width
+   * @default "wide"
+   */
+  layoutMode?: LayoutMode;
+}
+interface AdminLayoutProps extends AdminLayoutSharedProps {
+  /**
+   * Brand name for sidebar.
+   * If not provided, reads from AdminProvider context.
+   */
+  brandName?: string;
+  /**
+   * Whether sidebar is collapsed
+   */
+  sidebarCollapsed?: boolean;
+  /**
+   * Main content to render
+   */
+  children: React.ReactNode;
+  /**
+   * Navigation function (for search/quick actions)
+   */
+  navigate?: (path: string) => void;
+}
+/**
+ * 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>
+ * ```
+ */
+declare function AdminLayout({
+  LinkComponent,
+  activeRoute,
+  basePath,
+  brandName: brandNameProp,
+  sidebarCollapsed: sidebarCollapsedProp,
+  children,
+  className,
+  sidebarProps,
+  header,
+  footer,
+  navigate: navigateProp,
+  theme,
+  setTheme,
+  showThemeToggle,
+  toasterProps,
+  layoutMode
+}: AdminLayoutProps): React.ReactElement;
+//#endregion
+export { AdminLayout, AdminLayoutSharedProps };