@questpie/admin 0.0.1 → 1.0.1

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

@@ -1,104 +0,0 @@
-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

@@ -1,229 +0,0 @@
-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

@@ -1,188 +0,0 @@
-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 };