@questpie/admin 1.1.1 → 3.0.0

package/dist/client/components/actions/confirmation-dialog.mjs

@@ -0,0 +1,201 @@
+"use client";
+
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
+import { Button } from "../ui/button.mjs";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/actions/confirmation-dialog.tsx
+/**
+* Confirmation Dialog
+*
+* Reusable confirmation dialog for destructive or important actions.
+* Uses base-ui dialog primitives with responsive design.
+*/
+/**
+* ConfirmationDialog - Prompts user to confirm an action
+*
+* @example
+* ```tsx
+* <ConfirmationDialog
+*   open={showConfirm}
+*   onOpenChange={setShowConfirm}
+*   config={{
+*     title: "Delete item?",
+*     description: "This action cannot be undone.",
+*     destructive: true,
+*   }}
+*   onConfirm={handleDelete}
+* />
+* ```
+*/
+function ConfirmationDialog(t0) {
+	const $ = c(49);
+	const { open, onOpenChange, config, onConfirm, loading: t1 } = t0;
+	const loading = t1 === void 0 ? false : t1;
+	const { t } = useTranslation();
+	const resolveText = useResolveText();
+	const [isProcessing, setIsProcessing] = React.useState(false);
+	let t2;
+	if ($[0] !== onConfirm || $[1] !== onOpenChange) {
+		t2 = async () => {
+			setIsProcessing(true);
+			try {
+				await onConfirm();
+				onOpenChange(false);
+				setIsProcessing(false);
+			} catch (t3$1) {
+				const _err = t3$1;
+				setIsProcessing(false);
+				throw _err;
+			}
+		};
+		$[0] = onConfirm;
+		$[1] = onOpenChange;
+		$[2] = t2;
+	} else t2 = $[2];
+	const handleConfirm = t2;
+	const isLoading = loading || isProcessing;
+	let t3;
+	if ($[3] !== config.destructive) {
+		t3 = config.destructive && /* @__PURE__ */ jsx("div", {
+			className: "bg-destructive/10 flex size-10 shrink-0 items-center justify-center rounded-full",
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:warning",
+				className: "text-destructive size-5"
+			})
+		});
+		$[3] = config.destructive;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== config.title || $[6] !== resolveText) {
+		t4 = resolveText(config.title);
+		$[5] = config.title;
+		$[6] = resolveText;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t4) {
+		t5 = /* @__PURE__ */ jsx(DialogTitle, { children: t4 });
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== config.description || $[11] !== resolveText) {
+		t6 = config.description && /* @__PURE__ */ jsx(DialogDescription, { children: resolveText(config.description) });
+		$[10] = config.description;
+		$[11] = resolveText;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t5 || $[14] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-1",
+			children: [t5, t6]
+		});
+		$[13] = t5;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t3 || $[17] !== t7) {
+		t8 = /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-3",
+			children: [t3, t7]
+		}) });
+		$[16] = t3;
+		$[17] = t7;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== onOpenChange) {
+		t9 = () => onOpenChange(false);
+		$[19] = onOpenChange;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== config.cancelLabel || $[22] !== resolveText || $[23] !== t) {
+		t10 = resolveText(config.cancelLabel) || t("common.cancel");
+		$[21] = config.cancelLabel;
+		$[22] = resolveText;
+		$[23] = t;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== isLoading || $[26] !== t10 || $[27] !== t9) {
+		t11 = /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			onClick: t9,
+			disabled: isLoading,
+			children: t10
+		});
+		$[25] = isLoading;
+		$[26] = t10;
+		$[27] = t9;
+		$[28] = t11;
+	} else t11 = $[28];
+	const t12 = config.destructive ? "destructive" : "default";
+	let t13;
+	if ($[29] !== config.confirmLabel || $[30] !== isLoading || $[31] !== resolveText || $[32] !== t) {
+		t13 = isLoading ? t("ui.processing") : resolveText(config.confirmLabel) || t("common.confirm");
+		$[29] = config.confirmLabel;
+		$[30] = isLoading;
+		$[31] = resolveText;
+		$[32] = t;
+		$[33] = t13;
+	} else t13 = $[33];
+	let t14;
+	if ($[34] !== handleConfirm || $[35] !== isLoading || $[36] !== t12 || $[37] !== t13) {
+		t14 = /* @__PURE__ */ jsx(Button, {
+			variant: t12,
+			onClick: handleConfirm,
+			disabled: isLoading,
+			children: t13
+		});
+		$[34] = handleConfirm;
+		$[35] = isLoading;
+		$[36] = t12;
+		$[37] = t13;
+		$[38] = t14;
+	} else t14 = $[38];
+	let t15;
+	if ($[39] !== t11 || $[40] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(DialogFooter, {
+			className: "mt-4",
+			children: [t11, t14]
+		});
+		$[39] = t11;
+		$[40] = t14;
+		$[41] = t15;
+	} else t15 = $[41];
+	let t16;
+	if ($[42] !== t15 || $[43] !== t8) {
+		t16 = /* @__PURE__ */ jsxs(DialogContent, {
+			className: "qa-confirmation-dialog sm:max-w-[425px]",
+			children: [t8, t15]
+		});
+		$[42] = t15;
+		$[43] = t8;
+		$[44] = t16;
+	} else t16 = $[44];
+	let t17;
+	if ($[45] !== onOpenChange || $[46] !== open || $[47] !== t16) {
+		t17 = /* @__PURE__ */ jsx(Dialog, {
+			open,
+			onOpenChange,
+			children: t16
+		});
+		$[45] = onOpenChange;
+		$[46] = open;
+		$[47] = t16;
+		$[48] = t17;
+	} else t17 = $[48];
+	return t17;
+}
+
+//#endregion
+export { ConfirmationDialog };

package/dist/client/components/actions/header-actions.mjs

@@ -0,0 +1,210 @@
+"use client";
+
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { selectAuthClient, useAdminStore } from "../../runtime/provider.mjs";
+import { resolveIconElement } from "../component-renderer.mjs";
+import { Button } from "../ui/button.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../ui/dropdown-menu.mjs";
+import { ActionButton } from "./action-button.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/actions/header-actions.tsx
+/**
+* Header Actions
+*
+* Renders action buttons for the collection header area.
+* Primary actions are shown as buttons, secondary in a dropdown menu.
+*/
+/**
+* HeaderActions - Renders action buttons in the header area
+*
+* Primary actions are shown as buttons.
+* Secondary actions are shown in a dropdown menu.
+*
+* @example
+* ```tsx
+* <HeaderActions
+*   actions={{
+*     primary: [createAction],
+*     secondary: [exportAction, importAction],
+*   }}
+*   collection="posts"
+*   helpers={actionHelpers}
+*   onOpenDialog={(action) => setDialogAction(action)}
+* />
+* ```
+*/
+function HeaderActions(t0) {
+	const $ = c(38);
+	const { actions, collection, helpers, onOpenDialog } = t0;
+	const resolveText = useResolveText();
+	const authClient = useAdminStore(selectAuthClient);
+	const queryClient = useQueryClient();
+	let t1;
+	if ($[0] !== queryClient) {
+		t1 = {
+			invalidateQueries: (filters) => queryClient.invalidateQueries(filters),
+			refetchQueries: (filters_0) => queryClient.refetchQueries(filters_0),
+			resetQueries: (filters_1) => queryClient.resetQueries(filters_1)
+		};
+		$[0] = queryClient;
+		$[1] = t1;
+	} else t1 = $[1];
+	const actionQueryClient = t1;
+	let t2;
+	if ($[2] !== actionQueryClient || $[3] !== authClient || $[4] !== collection || $[5] !== helpers) {
+		t2 = {
+			collection,
+			helpers,
+			queryClient: actionQueryClient,
+			authClient
+		};
+		$[2] = actionQueryClient;
+		$[3] = authClient;
+		$[4] = collection;
+		$[5] = helpers;
+		$[6] = t2;
+	} else t2 = $[6];
+	const ctx = t2;
+	let t3;
+	if ($[7] !== ctx) {
+		t3 = (actionList) => {
+			if (!actionList) return [];
+			return actionList.filter((action) => {
+				if (action.visible === void 0) return true;
+				if (typeof action.visible === "function") return action.visible(ctx);
+				return action.visible;
+			});
+		};
+		$[7] = ctx;
+		$[8] = t3;
+	} else t3 = $[8];
+	const filterVisible = t3;
+	let t4;
+	if ($[9] !== actions.primary || $[10] !== filterVisible) {
+		t4 = filterVisible(actions.primary);
+		$[9] = actions.primary;
+		$[10] = filterVisible;
+		$[11] = t4;
+	} else t4 = $[11];
+	const visiblePrimary = t4;
+	let t5;
+	if ($[12] !== actions.secondary || $[13] !== filterVisible) {
+		t5 = filterVisible(actions.secondary);
+		$[12] = actions.secondary;
+		$[13] = filterVisible;
+		$[14] = t5;
+	} else t5 = $[14];
+	const visibleSecondary = t5;
+	let t6;
+	let t7;
+	let t8;
+	let t9;
+	if ($[15] !== collection || $[16] !== helpers || $[17] !== onOpenDialog || $[18] !== resolveText || $[19] !== visiblePrimary || $[20] !== visibleSecondary) {
+		t9 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			const regularSecondary = visibleSecondary.filter(_temp);
+			const destructiveSecondary = visibleSecondary.filter(_temp2);
+			if (visiblePrimary.length === 0 && visibleSecondary.length === 0) {
+				t9 = null;
+				break bb0;
+			}
+			t6 = "qa-header-actions flex items-center gap-2";
+			if ($[25] !== collection || $[26] !== helpers || $[27] !== onOpenDialog || $[28] !== visiblePrimary) {
+				let t10$1;
+				if ($[30] !== collection || $[31] !== helpers || $[32] !== onOpenDialog) {
+					t10$1 = (action_0) => /* @__PURE__ */ jsx(ActionButton, {
+						action: action_0,
+						collection,
+						helpers,
+						onOpenDialog
+					}, action_0.id);
+					$[30] = collection;
+					$[31] = helpers;
+					$[32] = onOpenDialog;
+					$[33] = t10$1;
+				} else t10$1 = $[33];
+				t7 = visiblePrimary.map(t10$1);
+				$[25] = collection;
+				$[26] = helpers;
+				$[27] = onOpenDialog;
+				$[28] = visiblePrimary;
+				$[29] = t7;
+			} else t7 = $[29];
+			t8 = visibleSecondary.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+				nativeButton: false,
+				render: /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "icon",
+					className: "size-9"
+				}),
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:dots-three-vertical",
+					className: "size-4"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "More actions"
+				})]
+			}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+				align: "end",
+				children: [
+					regularSecondary.map((action_1) => {
+						return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+							onClick: () => onOpenDialog?.(action_1),
+							children: [resolveIconElement(action_1.icon, { className: "mr-2 size-4" }), resolveText(action_1.label)]
+						}, action_1.id);
+					}),
+					regularSecondary.length > 0 && destructiveSecondary.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+					destructiveSecondary.map((action_2) => {
+						return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+							variant: "destructive",
+							onClick: () => onOpenDialog?.(action_2),
+							children: [resolveIconElement(action_2.icon, { className: "mr-2 size-4" }), resolveText(action_2.label)]
+						}, action_2.id);
+					})
+				]
+			})] });
+		}
+		$[15] = collection;
+		$[16] = helpers;
+		$[17] = onOpenDialog;
+		$[18] = resolveText;
+		$[19] = visiblePrimary;
+		$[20] = visibleSecondary;
+		$[21] = t6;
+		$[22] = t7;
+		$[23] = t8;
+		$[24] = t9;
+	} else {
+		t6 = $[21];
+		t7 = $[22];
+		t8 = $[23];
+		t9 = $[24];
+	}
+	if (t9 !== Symbol.for("react.early_return_sentinel")) return t9;
+	let t10;
+	if ($[34] !== t6 || $[35] !== t7 || $[36] !== t8) {
+		t10 = /* @__PURE__ */ jsxs("div", {
+			className: t6,
+			children: [t7, t8]
+		});
+		$[34] = t6;
+		$[35] = t7;
+		$[36] = t8;
+		$[37] = t10;
+	} else t10 = $[37];
+	return t10;
+}
+function _temp2(a_0) {
+	return a_0.variant === "destructive";
+}
+function _temp(a) {
+	return a.variant !== "destructive";
+}
+
+//#endregion
+export { HeaderActions };

package/dist/client/components/admin-link.d.mts

@@ -0,0 +1,66 @@
+import { CollectionNames, GlobalNames } from "../builder/index.mjs";
+import * as React from "react";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
+import { QuestpieApp } from "questpie/client";
+
+//#region src/client/components/admin-link.d.ts
+
+interface AdminLinkProps<TApp extends QuestpieApp> extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+  /** Link to dashboard */
+  to?: "dashboard";
+  /** Link to collection */
+  collection?: CollectionNames<TApp>;
+  /** Collection action */
+  action?: "list" | "create" | "edit";
+  /** Item ID for edit action */
+  id?: string;
+  /** Link to global */
+  global?: GlobalNames<TApp>;
+  /** Link to custom page by ID */
+  pageId?: string;
+  /** Custom href (overrides other props) */
+  href?: string;
+  /** Whether to use the navigate function instead of native anchor */
+  useNavigate?: boolean;
+  /** Children */
+  children: React.ReactNode;
+}
+/**
+ * Type-safe link component for admin navigation
+ *
+ * @example
+ * ```tsx
+ * // Link to dashboard
+ * <AdminLink to="dashboard">Dashboard</AdminLink>
+ *
+ * // Link to collection list
+ * <AdminLink collection="posts">View Posts</AdminLink>
+ *
+ * // Link to create new item
+ * <AdminLink collection="posts" action="create">New Post</AdminLink>
+ *
+ * // Link to edit item
+ * <AdminLink collection="posts" action="edit" id="123">Edit Post</AdminLink>
+ *
+ * // Link to global
+ * <AdminLink global="siteSettings">Site Settings</AdminLink>
+ *
+ * // Link to custom page
+ * <AdminLink pageId="analytics">Analytics</AdminLink>
+ * ```
+ */
+declare function AdminLink<TApp extends QuestpieApp>({
+  to,
+  collection,
+  action,
+  id,
+  global,
+  pageId,
+  href: customHref,
+  useNavigate,
+  children,
+  onClick,
+  ...rest
+}: AdminLinkProps<TApp>): react_jsx_runtime12.JSX.Element;
+//#endregion
+export { AdminLink };

package/dist/client/components/admin-link.mjs

@@ -0,0 +1,171 @@
+import { getAdminLinkHref, useAdminRoutes } from "../hooks/use-admin-routes.mjs";
+import { c } from "react/compiler-runtime";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/components/admin-link.tsx
+/**
+* Type-safe link component for admin navigation
+*
+* @example
+* ```tsx
+* // Link to dashboard
+* <AdminLink to="dashboard">Dashboard</AdminLink>
+*
+* // Link to collection list
+* <AdminLink collection="posts">View Posts</AdminLink>
+*
+* // Link to create new item
+* <AdminLink collection="posts" action="create">New Post</AdminLink>
+*
+* // Link to edit item
+* <AdminLink collection="posts" action="edit" id="123">Edit Post</AdminLink>
+*
+* // Link to global
+* <AdminLink global="siteSettings">Site Settings</AdminLink>
+*
+* // Link to custom page
+* <AdminLink pageId="analytics">Analytics</AdminLink>
+* ```
+*/
+function AdminLink(t0) {
+	const $ = c(29);
+	let action;
+	let children;
+	let collection;
+	let customHref;
+	let global;
+	let id;
+	let onClick;
+	let pageId;
+	let rest;
+	let t1;
+	let to;
+	if ($[0] !== t0) {
+		({to, collection, action, id, global, pageId, href: customHref, useNavigate: t1, children, onClick, ...rest} = t0);
+		$[0] = t0;
+		$[1] = action;
+		$[2] = children;
+		$[3] = collection;
+		$[4] = customHref;
+		$[5] = global;
+		$[6] = id;
+		$[7] = onClick;
+		$[8] = pageId;
+		$[9] = rest;
+		$[10] = t1;
+		$[11] = to;
+	} else {
+		action = $[1];
+		children = $[2];
+		collection = $[3];
+		customHref = $[4];
+		global = $[5];
+		id = $[6];
+		onClick = $[7];
+		pageId = $[8];
+		rest = $[9];
+		t1 = $[10];
+		to = $[11];
+	}
+	const useNavigate = t1 === void 0 ? false : t1;
+	const { routes } = useAdminRoutes();
+	let t2;
+	bb0: {
+		if (customHref) {
+			t2 = customHref;
+			break bb0;
+		}
+		let t3$1;
+		if ($[12] !== action || $[13] !== collection || $[14] !== global || $[15] !== id || $[16] !== pageId || $[17] !== routes || $[18] !== to) {
+			t3$1 = getAdminLinkHref(routes, {
+				to,
+				collection,
+				action,
+				id,
+				global,
+				pageId
+			});
+			$[12] = action;
+			$[13] = collection;
+			$[14] = global;
+			$[15] = id;
+			$[16] = pageId;
+			$[17] = routes;
+			$[18] = to;
+			$[19] = t3$1;
+		} else t3$1 = $[19];
+		t2 = t3$1;
+	}
+	const href = t2;
+	let t3;
+	if ($[20] !== href || $[21] !== onClick || $[22] !== useNavigate) {
+		t3 = (e) => {
+			if (onClick) onClick(e);
+			if (useNavigate && !e.defaultPrevented) {
+				e.preventDefault();
+				if (typeof window !== "undefined") {
+					window.history.pushState({}, "", href);
+					window.dispatchEvent(new PopStateEvent("popstate"));
+				}
+			}
+		};
+		$[20] = href;
+		$[21] = onClick;
+		$[22] = useNavigate;
+		$[23] = t3;
+	} else t3 = $[23];
+	const handleClick = t3;
+	let t4;
+	if ($[24] !== children || $[25] !== handleClick || $[26] !== href || $[27] !== rest) {
+		t4 = /* @__PURE__ */ jsx("a", {
+			href,
+			onClick: handleClick,
+			...rest,
+			children
+		});
+		$[24] = children;
+		$[25] = handleClick;
+		$[26] = href;
+		$[27] = rest;
+		$[28] = t4;
+	} else t4 = $[28];
+	return t4;
+}
+/**
+* Link to edit an item in a collection
+*/
+function CollectionEditLink(t0) {
+	const $ = c(8);
+	let collection;
+	let id;
+	let rest;
+	if ($[0] !== t0) {
+		({collection, id, ...rest} = t0);
+		$[0] = t0;
+		$[1] = collection;
+		$[2] = id;
+		$[3] = rest;
+	} else {
+		collection = $[1];
+		id = $[2];
+		rest = $[3];
+	}
+	let t1;
+	if ($[4] !== collection || $[5] !== id || $[6] !== rest) {
+		t1 = /* @__PURE__ */ jsx(AdminLink, {
+			collection,
+			action: "edit",
+			id,
+			...rest
+		});
+		$[4] = collection;
+		$[5] = id;
+		$[6] = rest;
+		$[7] = t1;
+	} else t1 = $[7];
+	return t1;
+}
+
+//#endregion
+export { AdminLink, CollectionEditLink };

package/dist/client/components/auth/auth-guard.d.mts

@@ -0,0 +1,50 @@
+import * as React from "react";
+
+//#region src/client/components/auth/auth-guard.d.ts
+
+interface AuthGuardProps {
+  /**
+   * Content to render when authenticated
+   */
+  children: React.ReactNode;
+  /**
+   * Fallback to show while checking session
+   * @default <AuthLoading />
+   */
+  loadingFallback?: React.ReactNode;
+  /**
+   * Path to redirect to when not authenticated
+   * @default "{basePath}/login"
+   */
+  loginPath?: string;
+  /**
+   * Custom component to show when unauthorized (instead of redirect)
+   */
+  unauthorizedFallback?: React.ReactNode;
+  /**
+   * Required role for access
+   * @default "admin"
+   */
+  requiredRole?: string;
+  /**
+   * Disable the auth guard (render children directly)
+   * Useful for public pages within the admin layout
+   */
+  disabled?: boolean;
+}
+/**
+ * Auth Guard Component
+ *
+ * Protects content by checking authentication state and user role.
+ * Uses Better Auth's useSession() hook internally.
+ */
+declare function AuthGuard({
+  children,
+  loadingFallback,
+  loginPath,
+  unauthorizedFallback,
+  requiredRole,
+  disabled
+}: AuthGuardProps): React.ReactElement;
+//#endregion
+export { AuthGuard };