@questpie/admin 0.0.1

package/dist/components/fields/relation-field.mjs

@@ -0,0 +1,104 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Controller, useFormContext } from "react-hook-form";
+import { RelationSelect } from "./relation-select";
+import { RelationPicker } from "./relation-picker";
+
+//#region src/components/fields/relation-field.tsx
+/**
+* Unified relation field component that integrates with react-hook-form.
+*
+* Automatically chooses between RelationSelect (single) and RelationPicker (multiple)
+* based on the `type` prop.
+*
+* @example
+* ```tsx
+* // Single relation (one-to-one)
+* <RelationField
+*   name="author"
+*   targetCollection="users"
+*   type="single"
+*   label="Author"
+*   required
+* />
+*
+* // Multiple relations (many-to-many)
+* <RelationField
+*   name="tags"
+*   targetCollection="tags"
+*   type="multiple"
+*   label="Tags"
+*   maxItems={5}
+*   orderable
+* />
+* ```
+*/
+function RelationField({ name, targetCollection, type, label, description, localized, locale, filter, required, disabled, readOnly, placeholder, orderable, maxItems, renderOption, renderValue, renderItem, renderFormFields, control: controlProp }) {
+	const formContext = useFormContext();
+	const control = controlProp ?? formContext?.control;
+	if (!control) {
+		console.warn("RelationField: No form control found. Make sure to use within FormProvider or pass control prop.");
+		return null;
+	}
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		rules: { required: required ? `${label || name} is required` : void 0 },
+		render: ({ field, fieldState }) => {
+			const error = fieldState.error?.message;
+			if (type === "single") return /* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ jsx(RelationSelect, {
+					name,
+					value: field.value,
+					onChange: field.onChange,
+					targetCollection,
+					label,
+					localized,
+					locale,
+					filter,
+					required,
+					disabled,
+					readOnly,
+					placeholder,
+					error,
+					renderOption,
+					renderValue,
+					renderFormFields
+				}), description && !error && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-xs",
+					children: description
+				})]
+			});
+			return /* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ jsx(RelationPicker, {
+					name,
+					value: field.value,
+					onChange: field.onChange,
+					targetCollection,
+					label,
+					localized,
+					locale,
+					filter,
+					required,
+					disabled,
+					readOnly,
+					placeholder,
+					error,
+					orderable,
+					maxItems,
+					renderOption,
+					renderItem,
+					renderFormFields
+				}), description && !error && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-xs",
+					children: description
+				})]
+			});
+		}
+	});
+}
+
+//#endregion
+export { RelationField };

package/dist/components/fields/relation-picker.mjs

@@ -0,0 +1,229 @@
+import * as React$1 from "react";
+import { useQuery } from "@tanstack/react-query";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useAdminContext } from "../../hooks/admin-provider";
+import { Button } from "../ui/button";
+import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "../ui/combobox";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "../ui/sheet";
+import { DotsSixVertical, Pencil, Plus, X } from "@phosphor-icons/react";
+import { LocaleBadge } from "./locale-badge";
+
+//#region src/components/fields/relation-picker.tsx
+/**
+* RelationPicker Component
+*
+* Multiple relation field (one-to-many, many-to-many) with:
+* - Multi-select picker to choose existing items
+* - Plus button to create new related item (opens side sheet)
+* - Edit button on each selected item (opens side sheet)
+* - Remove button on each selected item
+* - Optional drag-and-drop reordering
+*/
+function RelationPicker({ name, value = [], onChange, targetCollection, label, filter, required, disabled, readOnly, placeholder, error, localized, locale: localeProp, orderable = false, maxItems, renderItem, renderOption, renderFormFields }) {
+	const { client, locale: contextLocale } = useAdminContext();
+	const locale = localeProp ?? contextLocale;
+	const localeKey = locale ?? "default";
+	const [isSheetOpen, setIsSheetOpen] = React$1.useState(false);
+	const [sheetMode, setSheetMode] = React$1.useState("create");
+	const [editingItemId, setEditingItemId] = React$1.useState();
+	const selectedIds = value || [];
+	const { data: allOptions, isLoading } = useQuery({
+		queryKey: [
+			"relation",
+			targetCollection,
+			localeKey,
+			filter
+		],
+		queryFn: async () => {
+			const api = client.collections?.[targetCollection];
+			if (!api?.list) return [];
+			return (await api.list({ ...filter ? filter({}) : {} })).data || [];
+		}
+	});
+	const { data: selectedItems } = useQuery({
+		queryKey: [
+			"relation",
+			targetCollection,
+			localeKey,
+			"selected",
+			selectedIds
+		],
+		queryFn: async () => {
+			if (!selectedIds.length) return [];
+			const api = client.collections?.[targetCollection];
+			if (!api?.get) return [];
+			return await Promise.all(selectedIds.map((id) => api.get(id)));
+		},
+		enabled: selectedIds.length > 0
+	});
+	const handleAdd = (itemId) => {
+		if (selectedIds.includes(itemId)) return;
+		if (maxItems && selectedIds.length >= maxItems) return;
+		onChange([...selectedIds, itemId]);
+	};
+	const handleRemove = (itemId) => {
+		onChange(selectedIds.filter((id) => id !== itemId));
+	};
+	const handleOpenCreate = () => {
+		setSheetMode("create");
+		setEditingItemId(void 0);
+		setIsSheetOpen(true);
+	};
+	const handleOpenEdit = (itemId) => {
+		setSheetMode("edit");
+		setEditingItemId(itemId);
+		setIsSheetOpen(true);
+	};
+	const getDisplayValue = (item) => {
+		return item?._title || item?.id || "";
+	};
+	const getOptionDisplay = (item) => {
+		if (renderOption) return renderOption(item);
+		return item?._title || item?.id || "";
+	};
+	const availableOptions = allOptions?.filter((opt) => !selectedIds.includes(opt.id)) || [];
+	const canAddMore = !maxItems || selectedIds.length < maxItems;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [
+			label && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("label", {
+					htmlFor: name,
+					className: "text-sm font-medium",
+					children: [
+						label,
+						required && /* @__PURE__ */ jsx("span", {
+							className: "text-destructive",
+							children: "*"
+						}),
+						maxItems && /* @__PURE__ */ jsxs("span", {
+							className: "ml-2 text-xs text-muted-foreground",
+							children: [
+								"(",
+								selectedIds.length,
+								"/",
+								maxItems,
+								")"
+							]
+						})
+					]
+				}), localized && /* @__PURE__ */ jsx(LocaleBadge, { locale: locale || "i18n" })]
+			}),
+			selectedItems && selectedItems.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "space-y-2 rounded-lg border p-3",
+				children: selectedItems.map((item, index) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 rounded-md border bg-card p-2",
+					children: [
+						orderable && !readOnly && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "cursor-grab text-muted-foreground hover:text-foreground",
+							disabled,
+							children: /* @__PURE__ */ jsx(DotsSixVertical, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "flex-1",
+							children: renderItem ? renderItem(item, index) : /* @__PURE__ */ jsx("span", {
+								className: "text-sm",
+								children: getDisplayValue(item)
+							})
+						}),
+						!readOnly && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon",
+							className: "h-7 w-7",
+							onClick: () => handleOpenEdit(item.id),
+							disabled,
+							title: "Edit",
+							children: /* @__PURE__ */ jsx(Pencil, { className: "h-3 w-3" })
+						}),
+						!readOnly && (!required || selectedIds.length > 1) && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon",
+							className: "h-7 w-7",
+							onClick: () => handleRemove(item.id),
+							disabled,
+							title: "Remove",
+							children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+						})
+					]
+				}, item.id))
+			}),
+			!readOnly && canAddMore && /* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex-1",
+					children: /* @__PURE__ */ jsxs(Combobox, {
+						value: "",
+						onValueChange: (value$1) => {
+							if (value$1) handleAdd(value$1);
+						},
+						disabled: disabled || isLoading,
+						children: [/* @__PURE__ */ jsx(ComboboxInput, {
+							placeholder: placeholder || `Add ${label || targetCollection}...`,
+							disabled: disabled || isLoading
+						}), /* @__PURE__ */ jsxs(ComboboxContent, { children: [/* @__PURE__ */ jsx(ComboboxList, { children: availableOptions.map((opt) => /* @__PURE__ */ jsx(ComboboxItem, {
+							value: opt.id,
+							children: getOptionDisplay(opt)
+						}, opt.id)) }), /* @__PURE__ */ jsx(ComboboxEmpty, { children: isLoading ? "Loading..." : "No more options available" })] })]
+					})
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					size: "icon",
+					onClick: handleOpenCreate,
+					disabled,
+					title: `Create new ${label || targetCollection}`,
+					children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" })
+				})]
+			}),
+			selectedIds.length === 0 && /* @__PURE__ */ jsx("div", {
+				className: "rounded-lg border border-dashed p-4 text-center",
+				children: /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: placeholder || `No ${label || targetCollection} selected`
+				})
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-destructive",
+				children: error
+			}),
+			/* @__PURE__ */ jsx(Sheet, {
+				open: isSheetOpen,
+				onOpenChange: setIsSheetOpen,
+				children: /* @__PURE__ */ jsxs(SheetContent, {
+					side: "right",
+					className: "w-full sm:max-w-lg overflow-y-auto",
+					children: [/* @__PURE__ */ jsxs(SheetHeader, { children: [/* @__PURE__ */ jsxs(SheetTitle, { children: [
+						sheetMode === "create" ? "Create" : "Edit",
+						" ",
+						label || targetCollection
+					] }), /* @__PURE__ */ jsx(SheetDescription, { children: sheetMode === "create" ? `Fill in the details to create a new ${label || targetCollection}` : `Update the details of this ${label || targetCollection}` })] }), /* @__PURE__ */ jsx("div", {
+						className: "mt-6",
+						children: renderFormFields ? renderFormFields(targetCollection, editingItemId) : /* @__PURE__ */ jsx("div", {
+							className: "rounded-lg border border-dashed p-8 text-center",
+							children: /* @__PURE__ */ jsxs("p", {
+								className: "text-sm text-muted-foreground",
+								children: [
+									"Form fields not configured.",
+									/* @__PURE__ */ jsx("br", {}),
+									"Pass ",
+									/* @__PURE__ */ jsx("code", {
+										className: "text-xs",
+										children: "renderFormFields"
+									}),
+									" prop to enable create/edit."
+								]
+							})
+						})
+					})]
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { RelationPicker };

package/dist/components/fields/relation-select.mjs

@@ -0,0 +1,188 @@
+import * as React$1 from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useAdminContext } from "../../hooks/admin-provider";
+import { Button } from "../ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "../ui/select";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "../ui/sheet";
+import { Spinner } from "../ui/spinner";
+import { Pencil, Plus, X } from "@phosphor-icons/react";
+import { LocaleBadge } from "./locale-badge";
+
+//#region src/components/fields/relation-select.tsx
+/**
+* RelationSelect Component
+*
+* Single relation field (one-to-one) with:
+* - Select dropdown to choose existing item
+* - Plus button to create new related item (opens side sheet)
+* - Edit button to modify selected item (opens side sheet)
+*/
+function RelationSelect({ name, value, onChange, targetCollection, label, filter, required, disabled, readOnly, placeholder, error, localized, locale: localeProp, renderOption, renderValue, renderFormFields }) {
+	const { client, locale: contextLocale } = useAdminContext();
+	const locale = localeProp ?? contextLocale;
+	const localeKey = locale ?? "default";
+	const [isSheetOpen, setIsSheetOpen] = React$1.useState(false);
+	const [sheetMode, setSheetMode] = React$1.useState("create");
+	const { data: options, isLoading } = useQuery({
+		queryKey: [
+			"relation",
+			targetCollection,
+			localeKey,
+			filter
+		],
+		queryFn: async () => {
+			const api = client.collections?.[targetCollection];
+			if (!api?.list) return [];
+			return (await api.list({ ...filter ? filter({}) : {} })).data || [];
+		}
+	});
+	const { data: selectedItem } = useQuery({
+		queryKey: [
+			"relation",
+			targetCollection,
+			localeKey,
+			value
+		],
+		queryFn: async () => {
+			if (!value) return null;
+			const api = client.collections?.[targetCollection];
+			if (!api?.get) return null;
+			return await api.get(value);
+		},
+		enabled: !!value
+	});
+	const handleOpenCreate = () => {
+		setSheetMode("create");
+		setIsSheetOpen(true);
+	};
+	const handleOpenEdit = () => {
+		if (!value) return;
+		setSheetMode("edit");
+		setIsSheetOpen(true);
+	};
+	const handleClear = () => {
+		onChange(null);
+	};
+	const handleValueChange = (newValue) => {
+		if (newValue) onChange(newValue);
+	};
+	const getDisplayValue = (item) => {
+		if (renderValue) return renderValue(item);
+		return item?._title || item?.id || "";
+	};
+	const getOptionDisplay = (item) => {
+		if (renderOption) return renderOption(item);
+		return item?._title || item?.id || "";
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [
+			label && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("label", {
+					htmlFor: name,
+					className: "text-sm font-medium",
+					children: [label, required && /* @__PURE__ */ jsx("span", {
+						className: "text-destructive",
+						children: "*"
+					})]
+				}), localized && /* @__PURE__ */ jsx(LocaleBadge, { locale: locale || "i18n" })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex-1",
+					children: /* @__PURE__ */ jsxs(Select, {
+						value: value || void 0,
+						onValueChange: handleValueChange,
+						disabled: disabled || readOnly || isLoading,
+						children: [/* @__PURE__ */ jsx(SelectTrigger, {
+							id: name,
+							className: error ? "border-destructive" : "",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: selectedItem ? getDisplayValue(selectedItem) : placeholder || `Select ${label || targetCollection}...`
+							})
+						}), /* @__PURE__ */ jsx(SelectContent, { children: isLoading ? /* @__PURE__ */ jsx("div", {
+							className: "flex items-center justify-center p-4",
+							children: /* @__PURE__ */ jsx(Spinner, { className: "h-4 w-4" })
+						}) : options && options.length > 0 ? options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+							value: option.id,
+							children: getOptionDisplay(option)
+						}, option.id)) : /* @__PURE__ */ jsx("div", {
+							className: "p-4 text-center text-sm text-muted-foreground",
+							children: "No options available"
+						}) })]
+					})
+				}), !readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+					value && !required && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						size: "icon",
+						onClick: handleClear,
+						disabled,
+						title: "Clear selection",
+						children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+					}),
+					value && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						size: "icon",
+						onClick: handleOpenEdit,
+						disabled,
+						title: `Edit ${label || targetCollection}`,
+						children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						size: "icon",
+						onClick: handleOpenCreate,
+						disabled,
+						title: `Create new ${label || targetCollection}`,
+						children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" })
+					})
+				] })]
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-destructive",
+				children: error
+			}),
+			/* @__PURE__ */ jsx(Sheet, {
+				open: isSheetOpen,
+				onOpenChange: setIsSheetOpen,
+				children: /* @__PURE__ */ jsxs(SheetContent, {
+					side: "right",
+					className: "w-full sm:max-w-lg overflow-y-auto",
+					children: [/* @__PURE__ */ jsxs(SheetHeader, { children: [/* @__PURE__ */ jsxs(SheetTitle, { children: [
+						sheetMode === "create" ? "Create" : "Edit",
+						" ",
+						label || targetCollection
+					] }), /* @__PURE__ */ jsx(SheetDescription, { children: sheetMode === "create" ? `Fill in the details to create a new ${label || targetCollection}` : `Update the details of this ${label || targetCollection}` })] }), /* @__PURE__ */ jsx("div", {
+						className: "mt-6",
+						children: renderFormFields ? renderFormFields(targetCollection, sheetMode === "edit" ? value || void 0 : void 0) : /* @__PURE__ */ jsx("div", {
+							className: "rounded-lg border border-dashed p-8 text-center",
+							children: /* @__PURE__ */ jsxs("p", {
+								className: "text-sm text-muted-foreground",
+								children: [
+									"Form fields not configured.",
+									/* @__PURE__ */ jsx("br", {}),
+									"Pass ",
+									/* @__PURE__ */ jsx("code", {
+										className: "text-xs",
+										children: "renderFormFields"
+									}),
+									" prop to enable create/edit."
+								]
+							})
+						})
+					})]
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { RelationSelect };