@questpie/admin 1.1.1 → 3.0.0

package/dist/client/runtime/translations-provider.mjs

@@ -0,0 +1,242 @@
+import { I18nProvider } from "../i18n/hooks.mjs";
+import { createSimpleI18n } from "../i18n/simple.mjs";
+import { getCookie } from "../lib/cookies.mjs";
+import { selectClient, useAdminStore } from "./provider.mjs";
+import { c } from "react/compiler-runtime";
+import { Suspense, useState } from "react";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { DEFAULT_LOCALE } from "questpie/shared";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/runtime/translations-provider.tsx
+/**
+* Translations Provider
+*
+* Fetches admin UI translations from the server and provides i18n context.
+* This enables single source of truth for all translations on the server.
+*
+* @example
+* ```tsx
+* // In AdminProvider
+* <TranslationsProvider initialLocale="en">
+*   {children}
+* </TranslationsProvider>
+* ```
+*/
+/** Cookie for UI locale (admin interface language) */
+const UI_LOCALE_COOKIE = "questpie_ui_locale";
+/** Cookie max age (1 year) */
+const LOCALE_COOKIE_MAX_AGE = 3600 * 24 * 365;
+function setCookie(name, value) {
+	if (typeof document === "undefined") return;
+	document.cookie = `${name}=${value}; path=/; max-age=${LOCALE_COOKIE_MAX_AGE}; SameSite=Lax`;
+}
+function getUiLocaleFromCookie() {
+	return getCookie(UI_LOCALE_COOKIE);
+}
+function setUiLocaleCookie(locale) {
+	setCookie(UI_LOCALE_COOKIE, locale);
+}
+/**
+* Query options for fetching admin UI translations.
+* Can be used with TanStack Query's prefetching in loaders.
+*
+* @example
+* ```ts
+* // In TanStack Start loader
+* export const Route = createFileRoute("/admin")({
+*   loader: async ({ context }) => {
+*     await context.queryClient.ensureQueryData(
+*       getAdminTranslationsQueryOptions(context.client, "en")
+*     );
+*   },
+* });
+* ```
+*/
+function getAdminTranslationsQueryOptions(client, locale) {
+	return {
+		queryKey: [
+			"questpie",
+			"adminTranslations",
+			locale
+		],
+		queryFn: async () => {
+			try {
+				return await client.routes.getAdminTranslations({ locale });
+			} catch {
+				return {
+					locale: DEFAULT_LOCALE,
+					messages: {},
+					fallbackLocale: DEFAULT_LOCALE
+				};
+			}
+		},
+		staleTime: Number.POSITIVE_INFINITY,
+		gcTime: Number.POSITIVE_INFINITY
+	};
+}
+/**
+* Query options for fetching available admin UI locales.
+*
+* @example
+* ```ts
+* // In TanStack Start loader
+* export const Route = createFileRoute("/admin")({
+*   loader: async ({ context }) => {
+*     await context.queryClient.ensureQueryData(
+*       getAdminLocalesQueryOptions(context.client)
+*     );
+*   },
+* });
+* ```
+*/
+function getAdminLocalesQueryOptions(client) {
+	return {
+		queryKey: ["questpie", "adminLocales"],
+		queryFn: async () => {
+			try {
+				return await client.routes.getAdminLocales({});
+			} catch {
+				return {
+					locales: [DEFAULT_LOCALE],
+					defaultLocale: DEFAULT_LOCALE
+				};
+			}
+		},
+		staleTime: Number.POSITIVE_INFINITY,
+		gcTime: Number.POSITIVE_INFINITY
+	};
+}
+function TranslationsInner(t0) {
+	const $ = c(14);
+	const { initialLocale, children } = t0;
+	const client = useAdminStore(selectClient);
+	const [locale, setLocaleState] = useState(initialLocale);
+	let t1;
+	if ($[0] !== client) {
+		t1 = getAdminLocalesQueryOptions(client);
+		$[0] = client;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { data: localesData } = useSuspenseQuery(t1);
+	let t2;
+	if ($[2] !== client || $[3] !== locale) {
+		t2 = getAdminTranslationsQueryOptions(client, locale);
+		$[2] = client;
+		$[3] = locale;
+		$[4] = t2;
+	} else t2 = $[4];
+	const { data: translationsData } = useSuspenseQuery(t2);
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = (newLocale) => {
+			setLocaleState(newLocale);
+			setUiLocaleCookie(newLocale);
+		};
+		$[5] = t3;
+	} else t3 = $[5];
+	const setLocale = t3;
+	let t4;
+	if ($[6] !== localesData.locales || $[7] !== translationsData.fallbackLocale || $[8] !== translationsData.locale || $[9] !== translationsData.messages) {
+		t4 = createSimpleI18n({
+			locale: translationsData.locale,
+			locales: localesData.locales,
+			messages: { [translationsData.locale]: translationsData.messages },
+			fallbackLocale: translationsData.fallbackLocale,
+			onLocaleChange: setLocale
+		});
+		$[6] = localesData.locales;
+		$[7] = translationsData.fallbackLocale;
+		$[8] = translationsData.locale;
+		$[9] = translationsData.messages;
+		$[10] = t4;
+	} else t4 = $[10];
+	const i18nAdapter = t4;
+	let t5;
+	if ($[11] !== children || $[12] !== i18nAdapter) {
+		t5 = /* @__PURE__ */ jsx(I18nProvider, {
+			adapter: i18nAdapter,
+			children
+		});
+		$[11] = children;
+		$[12] = i18nAdapter;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
+}
+function LoadingFallback() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx("div", {
+			className: "qp-flex qp-h-screen qp-w-screen qp-items-center qp-justify-center qp-bg-background",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "qp-flex qp-flex-col qp-items-center qp-gap-4",
+				children: [/* @__PURE__ */ jsx("div", { className: "qp-h-8 qp-w-8 qp-animate-spin qp-rounded-full qp-border-4 qp-border-primary qp-border-t-transparent" }), /* @__PURE__ */ jsx("span", {
+					className: "qp-text-sm qp-text-muted-foreground",
+					children: "Loading..."
+				})]
+			})
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+/**
+* Translations Provider
+*
+* Fetches admin UI translations from the server and provides i18n context.
+* Uses Suspense for loading state.
+*
+* @example
+* ```tsx
+* <AdminStoreContext.Provider value={store}>
+*   <TranslationsProvider initialLocale="en">
+*     <ContentLocalesProvider>
+*       {children}
+*     </ContentLocalesProvider>
+*   </TranslationsProvider>
+* </AdminStoreContext.Provider>
+* ```
+*/
+function TranslationsProvider(t0) {
+	const $ = c(10);
+	const { initialLocale, children, fallback } = t0;
+	let t1;
+	if ($[0] !== initialLocale) {
+		t1 = initialLocale ?? getUiLocaleFromCookie() ?? DEFAULT_LOCALE;
+		$[0] = initialLocale;
+		$[1] = t1;
+	} else t1 = $[1];
+	const resolvedLocale = t1;
+	let t2;
+	if ($[2] !== fallback) {
+		t2 = fallback ?? /* @__PURE__ */ jsx(LoadingFallback, {});
+		$[2] = fallback;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== children || $[5] !== resolvedLocale) {
+		t3 = /* @__PURE__ */ jsx(TranslationsInner, {
+			initialLocale: resolvedLocale,
+			children
+		});
+		$[4] = children;
+		$[5] = resolvedLocale;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t2 || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Suspense, {
+			fallback: t2,
+			children: t3
+		});
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
+}
+
+//#endregion
+export { TranslationsProvider, getAdminLocalesQueryOptions, getAdminTranslationsQueryOptions, getUiLocaleFromCookie };

package/dist/client/scope/index.d.mts

@@ -0,0 +1,3 @@
+import { ScopeContextValue, ScopeOption, ScopePickerProps, ScopeProviderProps } from "./types.mjs";
+import { ScopePicker } from "./picker.mjs";
+import { ScopeProvider, createScopedFetch, useScope, useScopeSafe, useScopedFetch } from "./provider.mjs";

package/dist/client/scope/picker.d.mts

@@ -0,0 +1,53 @@
+import { ScopePickerProps } from "./types.mjs";
+import * as react_jsx_runtime24 from "react/jsx-runtime";
+
+//#region src/client/scope/picker.d.ts
+
+/**
+ * Scope Picker Component
+ *
+ * Renders a dropdown for selecting the current scope.
+ * Integrates with ScopeProvider to manage the selected scope.
+ *
+ * @example
+ * ```tsx
+ * // Fetch options from a collection
+ * <ScopePicker
+ *   collection="properties"
+ *   labelField="name"
+ *   placeholder="Select property..."
+ *   allowClear
+ * />
+ *
+ * // Use static options
+ * <ScopePicker
+ *   options={[
+ *     { value: 'org_1', label: 'Organization 1' },
+ *     { value: 'org_2', label: 'Organization 2' },
+ *   ]}
+ * />
+ *
+ * // Use async options loader
+ * <ScopePicker
+ *   loadOptions={async () => {
+ *     const response = await fetch('/api/my-scopes');
+ *     return response.json();
+ *   }}
+ * />
+ * ```
+ */
+declare function ScopePicker({
+  collection,
+  labelField,
+  valueField,
+  options: staticOptions,
+  loadOptions,
+  placeholder,
+  label,
+  allowClear,
+  clearText,
+  className,
+  compact
+}: ScopePickerProps): react_jsx_runtime24.JSX.Element;
+//#endregion
+export { ScopePicker };

package/dist/client/scope/picker.mjs

@@ -0,0 +1,395 @@
+import { cn } from "../lib/utils.mjs";
+import { useAdminStore } from "../runtime/provider.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select.mjs";
+import { Skeleton } from "../components/ui/skeleton.mjs";
+import { useScope } from "./provider.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import { useQuery } from "@tanstack/react-query";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/scope/picker.tsx
+/**
+* Scope Picker Component
+*
+* A dropdown picker for selecting the current scope in multi-tenant apps.
+* Can fetch options from a collection or use static options.
+*/
+/**
+* Scope Picker Component
+*
+* Renders a dropdown for selecting the current scope.
+* Integrates with ScopeProvider to manage the selected scope.
+*
+* @example
+* ```tsx
+* // Fetch options from a collection
+* <ScopePicker
+*   collection="properties"
+*   labelField="name"
+*   placeholder="Select property..."
+*   allowClear
+* />
+*
+* // Use static options
+* <ScopePicker
+*   options={[
+*     { value: 'org_1', label: 'Organization 1' },
+*     { value: 'org_2', label: 'Organization 2' },
+*   ]}
+* />
+*
+* // Use async options loader
+* <ScopePicker
+*   loadOptions={async () => {
+*     const response = await fetch('/api/my-scopes');
+*     return response.json();
+*   }}
+* />
+* ```
+*/
+function ScopePicker(t0) {
+	const $ = c(82);
+	const { collection, labelField: t1, valueField: t2, options: staticOptions, loadOptions, placeholder: t3, label, allowClear: t4, clearText: t5, className, compact: t6 } = t0;
+	const labelField = t1 === void 0 ? "name" : t1;
+	const valueField = t2 === void 0 ? "id" : t2;
+	const placeholder = t3 === void 0 ? "Select..." : t3;
+	const allowClear = t4 === void 0 ? false : t4;
+	const clearText = t5 === void 0 ? "All" : t5;
+	const compact = t6 === void 0 ? false : t6;
+	const { scopeId, setScope, isLoading: scopeLoading } = useScope();
+	const client = useAdminStore(_temp);
+	let t7;
+	if ($[0] !== collection || $[1] !== labelField || $[2] !== valueField) {
+		t7 = [
+			"scope-picker",
+			collection,
+			labelField,
+			valueField
+		];
+		$[0] = collection;
+		$[1] = labelField;
+		$[2] = valueField;
+		$[3] = t7;
+	} else t7 = $[3];
+	let t8;
+	if ($[4] !== client || $[5] !== collection || $[6] !== labelField || $[7] !== valueField) {
+		t8 = async () => {
+			if (!collection || !client) return null;
+			return (await client.collections[collection].find({
+				limit: 100,
+				columns: {
+					[valueField]: true,
+					[labelField]: true
+				}
+			})).docs.map((doc) => ({
+				value: String(doc[valueField]),
+				label: String(doc[labelField] ?? doc[valueField])
+			}));
+		};
+		$[4] = client;
+		$[5] = collection;
+		$[6] = labelField;
+		$[7] = valueField;
+		$[8] = t8;
+	} else t8 = $[8];
+	const t9 = !!collection && !!client;
+	let t10;
+	if ($[9] !== t7 || $[10] !== t8 || $[11] !== t9) {
+		t10 = {
+			queryKey: t7,
+			queryFn: t8,
+			enabled: t9,
+			staleTime: 6e4
+		};
+		$[9] = t7;
+		$[10] = t8;
+		$[11] = t9;
+		$[12] = t10;
+	} else t10 = $[12];
+	const { data: collectionData, isLoading: collectionLoading, error: collectionError } = useQuery(t10);
+	let t11;
+	if ($[13] !== loadOptions) {
+		t11 = loadOptions?.toString();
+		$[13] = loadOptions;
+		$[14] = t11;
+	} else t11 = $[14];
+	let t12;
+	if ($[15] !== t11) {
+		t12 = ["scope-picker-async", t11];
+		$[15] = t11;
+		$[16] = t12;
+	} else t12 = $[16];
+	const t13 = !!loadOptions;
+	let t14;
+	if ($[17] !== loadOptions || $[18] !== t12 || $[19] !== t13) {
+		t14 = {
+			queryKey: t12,
+			queryFn: loadOptions,
+			enabled: t13,
+			staleTime: 6e4
+		};
+		$[17] = loadOptions;
+		$[18] = t12;
+		$[19] = t13;
+		$[20] = t14;
+	} else t14 = $[20];
+	const { data: asyncOptions, isLoading: asyncLoading, error: asyncError } = useQuery(t14);
+	let t15;
+	bb0: {
+		if (staticOptions) {
+			t15 = staticOptions;
+			break bb0;
+		}
+		if (collectionData) {
+			t15 = collectionData;
+			break bb0;
+		}
+		if (asyncOptions) {
+			t15 = asyncOptions;
+			break bb0;
+		}
+		let t16$1;
+		if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+			t16$1 = [];
+			$[21] = t16$1;
+		} else t16$1 = $[21];
+		t15 = t16$1;
+	}
+	const options = t15;
+	const isLoading = scopeLoading || collectionLoading || asyncLoading;
+	const error = collectionError || asyncError;
+	let t16;
+	if ($[22] !== setScope) {
+		t16 = (value) => {
+			if (!value || value === "__clear__") setScope(null);
+			else setScope(value);
+		};
+		$[22] = setScope;
+		$[23] = t16;
+	} else t16 = $[23];
+	const handleValueChange = t16;
+	let t17;
+	bb1: {
+		if (!scopeId) {
+			t17 = null;
+			break bb1;
+		}
+		let t18$1;
+		if ($[24] !== options || $[25] !== scopeId) {
+			let t19$1;
+			if ($[27] !== scopeId) {
+				t19$1 = (opt) => opt.value === scopeId;
+				$[27] = scopeId;
+				$[28] = t19$1;
+			} else t19$1 = $[28];
+			t18$1 = options.find(t19$1);
+			$[24] = options;
+			$[25] = scopeId;
+			$[26] = t18$1;
+		} else t18$1 = $[26];
+		t17 = t18$1?.label ?? scopeId;
+	}
+	const selectedLabel = t17;
+	if (isLoading) {
+		let t18$1;
+		if ($[29] !== className) {
+			t18$1 = cn("space-y-1.5", className);
+			$[29] = className;
+			$[30] = t18$1;
+		} else t18$1 = $[30];
+		let t19$1;
+		if ($[31] !== compact || $[32] !== label) {
+			t19$1 = label && !compact && /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-16" });
+			$[31] = compact;
+			$[32] = label;
+			$[33] = t19$1;
+		} else t19$1 = $[33];
+		const t20$1 = compact && "h-8";
+		let t21$1;
+		if ($[34] !== t20$1) {
+			t21$1 = cn("h-9 w-full", t20$1);
+			$[34] = t20$1;
+			$[35] = t21$1;
+		} else t21$1 = $[35];
+		let t22$1;
+		if ($[36] !== t21$1) {
+			t22$1 = /* @__PURE__ */ jsx(Skeleton, { className: t21$1 });
+			$[36] = t21$1;
+			$[37] = t22$1;
+		} else t22$1 = $[37];
+		let t23$1;
+		if ($[38] !== t18$1 || $[39] !== t19$1 || $[40] !== t22$1) {
+			t23$1 = /* @__PURE__ */ jsxs("div", {
+				className: t18$1,
+				children: [t19$1, t22$1]
+			});
+			$[38] = t18$1;
+			$[39] = t19$1;
+			$[40] = t22$1;
+			$[41] = t23$1;
+		} else t23$1 = $[41];
+		return t23$1;
+	}
+	if (error) {
+		let t18$1;
+		if ($[42] !== className) {
+			t18$1 = cn("text-destructive text-xs", className);
+			$[42] = className;
+			$[43] = t18$1;
+		} else t18$1 = $[43];
+		let t19$1;
+		if ($[44] !== t18$1) {
+			t19$1 = /* @__PURE__ */ jsx("div", {
+				className: t18$1,
+				children: "Failed to load options"
+			});
+			$[44] = t18$1;
+			$[45] = t19$1;
+		} else t19$1 = $[45];
+		return t19$1;
+	}
+	let t18;
+	if ($[46] !== className) {
+		t18 = cn("space-y-1.5", className);
+		$[46] = className;
+		$[47] = t18;
+	} else t18 = $[47];
+	let t19;
+	if ($[48] !== compact || $[49] !== label) {
+		t19 = label && !compact && /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground text-xs font-medium",
+			children: label
+		});
+		$[48] = compact;
+		$[49] = label;
+		$[50] = t19;
+	} else t19 = $[50];
+	const t20 = scopeId ?? "__clear__";
+	let t21;
+	if ($[51] !== handleValueChange) {
+		t21 = (value_0) => handleValueChange(value_0);
+		$[51] = handleValueChange;
+		$[52] = t21;
+	} else t21 = $[52];
+	const t22 = compact && "h-8 text-xs";
+	const t23 = !scopeId && "text-muted-foreground";
+	let t24;
+	if ($[53] !== t22 || $[54] !== t23) {
+		t24 = cn("w-full", t22, t23);
+		$[53] = t22;
+		$[54] = t23;
+		$[55] = t24;
+	} else t24 = $[55];
+	const t25 = scopeId ? selectedLabel : allowClear ? clearText : placeholder;
+	let t26;
+	if ($[56] !== placeholder || $[57] !== t25) {
+		t26 = /* @__PURE__ */ jsx(SelectValue, {
+			placeholder,
+			children: t25
+		});
+		$[56] = placeholder;
+		$[57] = t25;
+		$[58] = t26;
+	} else t26 = $[58];
+	let t27;
+	if ($[59] !== t24 || $[60] !== t26) {
+		t27 = /* @__PURE__ */ jsx(SelectTrigger, {
+			className: t24,
+			children: t26
+		});
+		$[59] = t24;
+		$[60] = t26;
+		$[61] = t27;
+	} else t27 = $[61];
+	let t28;
+	if ($[62] !== allowClear || $[63] !== clearText) {
+		t28 = allowClear && /* @__PURE__ */ jsx(SelectItem, {
+			value: "__clear__",
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:globe",
+					className: "text-muted-foreground size-4"
+				}), clearText]
+			})
+		});
+		$[62] = allowClear;
+		$[63] = clearText;
+		$[64] = t28;
+	} else t28 = $[64];
+	let t29;
+	if ($[65] !== options) {
+		t29 = options.map(_temp2);
+		$[65] = options;
+		$[66] = t29;
+	} else t29 = $[66];
+	let t30;
+	if ($[67] !== options.length) {
+		t30 = options.length === 0 && /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground px-2 py-1.5 text-xs",
+			children: "No options available"
+		});
+		$[67] = options.length;
+		$[68] = t30;
+	} else t30 = $[68];
+	let t31;
+	if ($[69] !== t28 || $[70] !== t29 || $[71] !== t30) {
+		t31 = /* @__PURE__ */ jsxs(SelectContent, { children: [
+			t28,
+			t29,
+			t30
+		] });
+		$[69] = t28;
+		$[70] = t29;
+		$[71] = t30;
+		$[72] = t31;
+	} else t31 = $[72];
+	let t32;
+	if ($[73] !== t20 || $[74] !== t21 || $[75] !== t27 || $[76] !== t31) {
+		t32 = /* @__PURE__ */ jsxs(Select, {
+			value: t20,
+			onValueChange: t21,
+			children: [t27, t31]
+		});
+		$[73] = t20;
+		$[74] = t21;
+		$[75] = t27;
+		$[76] = t31;
+		$[77] = t32;
+	} else t32 = $[77];
+	let t33;
+	if ($[78] !== t18 || $[79] !== t19 || $[80] !== t32) {
+		t33 = /* @__PURE__ */ jsxs("div", {
+			className: t18,
+			children: [t19, t32]
+		});
+		$[78] = t18;
+		$[79] = t19;
+		$[80] = t32;
+		$[81] = t33;
+	} else t33 = $[81];
+	return t33;
+}
+function _temp2(option_0) {
+	return /* @__PURE__ */ jsx(SelectItem, {
+		value: option_0.value,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-2",
+			children: [
+				option_0.icon,
+				/* @__PURE__ */ jsx("span", { children: option_0.label }),
+				option_0.description && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-xs",
+					children: option_0.description
+				})
+			]
+		})
+	}, option_0.value);
+}
+function _temp(s) {
+	return s.client;
+}
+
+//#endregion
+export { ScopePicker };