@questpie/admin 0.0.1

package/dist/components/fields/embedded-collection.mjs

@@ -0,0 +1,253 @@
+import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../ui/dialog";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "../ui/sheet";
+import { CaretDown, CaretUp, Pencil, Plus, Trash } from "@phosphor-icons/react";
+import { useFieldArray, useFormContext, useWatch } from "react-hook-form";
+import { LocaleBadge } from "./locale-badge";
+
+//#region src/components/fields/embedded-collection.tsx
+/**
+* EmbeddedCollectionField Component
+*
+* Manages embedded collections with inline, modal, or drawer editing.
+*/
+function EmbeddedCollectionField({ name, value, collection, mode = "inline", orderable = false, rowLabel, label, description, required, disabled, readOnly, error, placeholder, localized, locale, renderFields, minItems, maxItems }) {
+	const { control } = useFormContext();
+	const { fields, append, remove, move } = useFieldArray({
+		control,
+		name
+	});
+	const values = useWatch({
+		control,
+		name
+	}) ?? value;
+	const [activeIndex, setActiveIndex] = React$1.useState(null);
+	const [isOpen, setIsOpen] = React$1.useState(false);
+	const canAddMore = !maxItems || fields.length < maxItems;
+	const canRemove = !readOnly && (!minItems || fields.length > minItems);
+	const fallbackLabel = label || collection || "Item";
+	const resolveRowLabel = React$1.useCallback((item, index) => {
+		if (typeof rowLabel === "function") {
+			const labelValue = rowLabel(item);
+			if (labelValue) return labelValue;
+		}
+		if (typeof rowLabel === "string") {
+			const labelValue = item?.[rowLabel];
+			if (labelValue) return String(labelValue);
+		}
+		if (item?.title) return String(item.title);
+		if (item?.name) return String(item.name);
+		return `${fallbackLabel} ${index + 1}`;
+	}, [fallbackLabel, rowLabel]);
+	const handleAdd = () => {
+		if (disabled || readOnly || !canAddMore) return;
+		append({});
+		if (mode !== "inline") {
+			const nextIndex = fields.length;
+			setActiveIndex(nextIndex);
+			setIsOpen(true);
+		}
+	};
+	const handleRemove = (index) => {
+		if (!canRemove) return;
+		remove(index);
+		if (activeIndex === null) return;
+		if (index === activeIndex) {
+			setIsOpen(false);
+			setActiveIndex(null);
+		} else if (index < activeIndex) setActiveIndex(activeIndex - 1);
+	};
+	const handleMove = (from, to) => {
+		if (to < 0 || to >= fields.length) return;
+		move(from, to);
+		if (activeIndex === null) return;
+		if (activeIndex === from) setActiveIndex(to);
+		else if (activeIndex === to) setActiveIndex(from);
+	};
+	const handleOpenChange = (open) => {
+		setIsOpen(open);
+		if (!open) setActiveIndex(null);
+	};
+	const renderItemFields = (index) => {
+		if (!renderFields) return /* @__PURE__ */ jsx("div", {
+			className: "rounded-lg border border-dashed p-4 text-center",
+			children: /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: "Form fields not configured."
+			})
+		});
+		return renderFields(index);
+	};
+	const emptyState = /* @__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 ${fallbackLabel} added yet`
+		})
+	});
+	const editorContent = activeIndex !== null ? renderItemFields(activeIndex) : null;
+	const editorTitle = activeIndex !== null ? resolveRowLabel(values?.[activeIndex], activeIndex) : fallbackLabel;
+	const showEditor = mode === "modal" || mode === "drawer";
+	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: [
+								"(",
+								fields.length,
+								"/",
+								maxItems,
+								")"
+							]
+						})
+					]
+				}), localized && /* @__PURE__ */ jsx(LocaleBadge, { locale: locale || "i18n" })]
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: description
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "space-y-3",
+				children: fields.length === 0 ? emptyState : fields.map((field, index) => {
+					const itemValue = values?.[index];
+					const itemLabel = resolveRowLabel(itemValue, index);
+					const canMoveUp = orderable && index > 0;
+					const canMoveDown = orderable && index < fields.length - 1;
+					return /* @__PURE__ */ jsxs("div", {
+						className: "rounded-lg border bg-card",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between border-b px-3 py-2",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsxs("span", {
+									className: "text-xs text-muted-foreground",
+									children: ["#", index + 1]
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-sm font-medium",
+									children: itemLabel
+								})]
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-1",
+								children: [
+									orderable && !readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+										type: "button",
+										variant: "ghost",
+										size: "icon",
+										className: "h-6 w-6",
+										onClick: () => handleMove(index, index - 1),
+										disabled: !canMoveUp || disabled,
+										title: "Move up",
+										children: /* @__PURE__ */ jsx(CaretUp, { className: "h-3 w-3" })
+									}), /* @__PURE__ */ jsx(Button, {
+										type: "button",
+										variant: "ghost",
+										size: "icon",
+										className: "h-6 w-6",
+										onClick: () => handleMove(index, index + 1),
+										disabled: !canMoveDown || disabled,
+										title: "Move down",
+										children: /* @__PURE__ */ jsx(CaretDown, { className: "h-3 w-3" })
+									})] }),
+									mode !== "inline" && /* @__PURE__ */ jsx(Button, {
+										type: "button",
+										variant: "ghost",
+										size: "icon",
+										className: "h-6 w-6",
+										onClick: () => {
+											setActiveIndex(index);
+											setIsOpen(true);
+										},
+										disabled: disabled || !renderFields,
+										title: readOnly ? "View" : "Edit",
+										children: /* @__PURE__ */ jsx(Pencil, { className: "h-3 w-3" })
+									}),
+									!readOnly && canRemove && /* @__PURE__ */ jsx(Button, {
+										type: "button",
+										variant: "ghost",
+										size: "icon",
+										className: "h-6 w-6",
+										onClick: () => handleRemove(index),
+										disabled,
+										title: "Remove",
+										children: /* @__PURE__ */ jsx(Trash, { className: "h-3 w-3" })
+									})
+								]
+							})]
+						}), mode === "inline" && /* @__PURE__ */ jsx("div", {
+							className: "space-y-3 p-3",
+							children: renderItemFields(index)
+						})]
+					}, field.id);
+				})
+			}),
+			!readOnly && canAddMore && /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "outline",
+				onClick: handleAdd,
+				disabled,
+				children: [
+					/* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+					"Add ",
+					fallbackLabel
+				]
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-destructive",
+				children: error
+			}),
+			showEditor && mode === "modal" && /* @__PURE__ */ jsx(Dialog, {
+				open: isOpen,
+				onOpenChange: handleOpenChange,
+				children: /* @__PURE__ */ jsxs(DialogContent, {
+					className: "sm:max-w-2xl",
+					children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: editorTitle }), description && /* @__PURE__ */ jsx(DialogDescription, { children: description })] }), /* @__PURE__ */ jsx("div", {
+						className: "space-y-4",
+						children: editorContent
+					})]
+				})
+			}),
+			showEditor && mode === "drawer" && /* @__PURE__ */ jsx(Sheet, {
+				open: isOpen,
+				onOpenChange: handleOpenChange,
+				children: /* @__PURE__ */ jsxs(SheetContent, {
+					side: "right",
+					className: "sm:max-w-lg",
+					children: [
+						/* @__PURE__ */ jsxs(SheetHeader, { children: [/* @__PURE__ */ jsx(SheetTitle, { children: editorTitle }), description && /* @__PURE__ */ jsx(SheetDescription, { children: description })] }),
+						/* @__PURE__ */ jsx("div", {
+							className: "px-4 pb-4",
+							children: editorContent
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "px-4 pb-4",
+							children: /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "outline",
+								onClick: () => handleOpenChange(false),
+								children: "Close"
+							})
+						})
+					]
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { EmbeddedCollectionField };

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

@@ -0,0 +1 @@
+export {  };

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

@@ -0,0 +1,10 @@
+import { useFormContext } from "react-hook-form";
+
+//#region src/components/fields/field-utils.ts
+function useResolvedControl(control) {
+	const form = useFormContext();
+	return control ?? form.control;
+}
+
+//#endregion
+export { useResolvedControl };

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

@@ -0,0 +1,34 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from "../ui/field";
+import { LocaleBadge } from "./locale-badge";
+
+//#region src/components/fields/field-wrapper.tsx
+function FieldWrapper({ name, label, description, required, disabled, error, localized, locale, children }) {
+	return /* @__PURE__ */ jsx(Field, {
+		"data-disabled": disabled,
+		"data-invalid": !!error,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [
+				label && /* @__PURE__ */ jsxs(FieldLabel, {
+					htmlFor: name,
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-1",
+						children: [label, required && /* @__PURE__ */ jsx("span", {
+							className: "text-destructive",
+							children: "*"
+						})]
+					}), localized && /* @__PURE__ */ jsx(LocaleBadge, { locale: locale || "i18n" })]
+				}),
+				/* @__PURE__ */ jsx(FieldContent, { children }),
+				description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
+				error && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: error }] })
+			]
+		})
+	});
+}
+
+//#endregion
+export { FieldWrapper };

package/dist/components/fields/index.mjs

@@ -0,0 +1,23 @@
+import { LocaleBadge } from "./locale-badge";
+import { FieldWrapper } from "./field-wrapper";
+import { useResolvedControl } from "./field-utils";
+import { RelationSelect } from "./relation-select";
+import { RelationPicker } from "./relation-picker";
+import { RelationField } from "./relation-field";
+import { JsonField } from "./json-field";
+import { EmbeddedCollectionField } from "./embedded-collection";
+import { ArrayField } from "./array-field";
+import { RichTextEditor } from "./rich-text-editor";
+import { TextField } from "./text-field";
+import { EmailField } from "./email-field";
+import { PasswordField } from "./password-field";
+import { TextareaField } from "./textarea-field";
+import { NumberField } from "./number-field";
+import { CheckboxField } from "./checkbox-field";
+import { SwitchField } from "./switch-field";
+import { SelectField } from "./select-field";
+import { DateField } from "./date-field";
+import { DatetimeField } from "./datetime-field";
+import { CustomField } from "./custom-field";
+
+export { ArrayField, CheckboxField, CustomField, DateField, DatetimeField, EmailField, EmbeddedCollectionField, FieldWrapper, JsonField, LocaleBadge, NumberField, PasswordField, RelationField, RelationPicker, RelationSelect, RichTextEditor, SelectField, SwitchField, TextField, TextareaField, useResolvedControl };

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

@@ -0,0 +1,243 @@
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../ui/button";
+import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from "../ui/field";
+import { Textarea } from "../ui/textarea";
+import { cn } from "../../lib/utils";
+import { Code, ListBullets, WarningCircle } from "@phosphor-icons/react";
+import { Controller, useFormContext } from "react-hook-form";
+
+//#region src/components/fields/json-field.tsx
+/**
+* JsonField Component
+*
+* JSON field with two editing modes:
+* - "code" - Raw JSON editing with syntax highlighting
+* - "form" - Structured form editing (if schema provided)
+*
+* Integrates with react-hook-form via Controller.
+*/
+/**
+* JSON field with code editor and optional form mode.
+*
+* @example
+* ```tsx
+* // Basic JSON editor
+* <JsonField
+*   name="metadata"
+*   label="Metadata"
+*   description="Additional metadata as JSON"
+* />
+*
+* // With custom form mode
+* <JsonField
+*   name="settings"
+*   label="Settings"
+*   renderForm={({ value, onChange }) => (
+*     <SettingsForm value={value} onChange={onChange} />
+*   )}
+* />
+* ```
+*/
+function JsonField({ name, label, description, required, disabled, readOnly, placeholder = "{\n  \"key\": \"value\"\n}", defaultMode = "code", allowModeSwitch = true, minHeight = 200, maxHeight = 400, renderForm, control: controlProp, className }) {
+	const formContext = useFormContext();
+	const control = controlProp ?? formContext?.control;
+	const [mode, setMode] = React$1.useState(defaultMode);
+	if (!control) {
+		console.warn("JsonField: No form control found. Make sure to use within FormProvider or pass control prop.");
+		return null;
+	}
+	const showModeSwitch = allowModeSwitch && renderForm;
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		rules: {
+			required: required ? `${label || name} is required` : void 0,
+			validate: (value) => {
+				if (!value) return true;
+				if (mode === "code" && typeof value === "string") try {
+					JSON.parse(value);
+					return true;
+				} catch {
+					return "Invalid JSON format";
+				}
+				return true;
+			}
+		},
+		render: ({ field, fieldState }) => {
+			const error = fieldState.error?.message;
+			return /* @__PURE__ */ jsxs(Field, {
+				"data-invalid": !!error,
+				className,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between",
+					children: [label && /* @__PURE__ */ jsxs(FieldLabel, {
+						htmlFor: name,
+						children: [label, required && /* @__PURE__ */ jsx("span", {
+							className: "text-destructive ml-1",
+							children: "*"
+						})]
+					}), showModeSwitch && /* @__PURE__ */ jsxs("div", {
+						className: "flex gap-1",
+						children: [/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: mode === "code" ? "secondary" : "ghost",
+							size: "icon-xs",
+							onClick: () => setMode("code"),
+							disabled,
+							title: "Code editor",
+							children: /* @__PURE__ */ jsx(Code, { weight: "bold" })
+						}), /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: mode === "form" ? "secondary" : "ghost",
+							size: "icon-xs",
+							onClick: () => setMode("form"),
+							disabled,
+							title: "Form editor",
+							children: /* @__PURE__ */ jsx(ListBullets, { weight: "bold" })
+						})]
+					})]
+				}), /* @__PURE__ */ jsxs(FieldContent, { children: [
+					mode === "code" ? /* @__PURE__ */ jsx(JsonCodeEditor, {
+						value: field.value,
+						onChange: field.onChange,
+						disabled,
+						readOnly,
+						placeholder,
+						minHeight,
+						maxHeight,
+						error: !!error
+					}) : renderForm ? /* @__PURE__ */ jsx(JsonFormEditor, {
+						value: field.value,
+						onChange: field.onChange,
+						disabled,
+						readOnly,
+						renderForm
+					}) : /* @__PURE__ */ jsx(JsonCodeEditor, {
+						value: field.value,
+						onChange: field.onChange,
+						disabled,
+						readOnly,
+						placeholder,
+						minHeight,
+						maxHeight,
+						error: !!error
+					}),
+					description && !error && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
+					/* @__PURE__ */ jsx(FieldError, { children: error })
+				] })]
+			});
+		}
+	});
+}
+/**
+* Code editor for JSON (using Textarea for simplicity)
+* Can be replaced with Monaco/CodeMirror in the future
+*/
+function JsonCodeEditor({ value, onChange, disabled, readOnly, placeholder, minHeight, maxHeight, error }) {
+	const [localValue, setLocalValue] = React$1.useState(() => {
+		if (typeof value === "string") return value;
+		if (value === null || value === void 0) return "";
+		try {
+			return JSON.stringify(value, null, 2);
+		} catch {
+			return "";
+		}
+	});
+	const [parseError, setParseError] = React$1.useState(null);
+	React$1.useEffect(() => {
+		if (typeof value === "string") setLocalValue(value);
+		else if (value !== null && value !== void 0) try {
+			setLocalValue(JSON.stringify(value, null, 2));
+		} catch {}
+		else setLocalValue("");
+	}, [value]);
+	const handleChange = (e) => {
+		const newValue = e.target.value;
+		setLocalValue(newValue);
+		if (!newValue.trim()) {
+			setParseError(null);
+			onChange(null);
+			return;
+		}
+		try {
+			const parsed = JSON.parse(newValue);
+			setParseError(null);
+			onChange(parsed);
+		} catch (err) {
+			setParseError("Invalid JSON");
+			onChange(newValue);
+		}
+	};
+	const handleFormat = () => {
+		try {
+			const parsed = JSON.parse(localValue);
+			setLocalValue(JSON.stringify(parsed, null, 2));
+			setParseError(null);
+			onChange(parsed);
+		} catch {}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ jsx(Textarea, {
+				value: localValue,
+				onChange: handleChange,
+				disabled,
+				readOnly,
+				placeholder,
+				className: cn("font-mono text-xs", error || parseError ? "border-destructive" : ""),
+				style: {
+					minHeight: `${minHeight}px`,
+					maxHeight: maxHeight ? `${maxHeight}px` : void 0,
+					resize: maxHeight ? "none" : "vertical"
+				},
+				"aria-invalid": !!error || !!parseError
+			}), parseError && /* @__PURE__ */ jsxs("div", {
+				className: "text-destructive absolute right-2 top-2 flex items-center gap-1 text-xs",
+				children: [/* @__PURE__ */ jsx(WarningCircle, {
+					weight: "fill",
+					className: "size-3"
+				}), parseError]
+			})]
+		}), !readOnly && !disabled && localValue && /* @__PURE__ */ jsx("div", {
+			className: "flex justify-end",
+			children: /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "xs",
+				onClick: handleFormat,
+				disabled: !!parseError,
+				children: "Format JSON"
+			})
+		})]
+	});
+}
+/**
+* Form-based editor wrapper
+*/
+function JsonFormEditor({ value, onChange, disabled, readOnly, renderForm }) {
+	const safeValue = React$1.useMemo(() => {
+		if (typeof value === "object" && value !== null) return value;
+		if (typeof value === "string") try {
+			return JSON.parse(value);
+		} catch {
+			return {};
+		}
+		return {};
+	}, [value]);
+	if (!renderForm) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "rounded-lg border p-4",
+		children: renderForm({
+			value: safeValue,
+			onChange,
+			disabled,
+			readOnly
+		})
+	});
+}
+
+//#endregion
+export { JsonField };

package/dist/components/fields/locale-badge.mjs

@@ -0,0 +1,16 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Badge } from "../ui/badge";
+
+//#region src/components/fields/locale-badge.tsx
+function LocaleBadge({ locale }) {
+	if (!locale) return null;
+	return /* @__PURE__ */ jsx(Badge, {
+		variant: "secondary",
+		className: "uppercase text-[10px] tracking-wide",
+		children: locale
+	});
+}
+
+//#endregion
+export { LocaleBadge };

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

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { NumberInput } from "../primitives/number-input";
+import { Controller } from "react-hook-form";
+import { FieldWrapper } from "./field-wrapper";
+import { useResolvedControl } from "./field-utils";
+
+//#region src/components/fields/number-field.tsx
+function NumberField({ name, label, description, placeholder, required, disabled, localized, locale, control, className, min, max, step, showButtons }) {
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control: useResolvedControl(control),
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsx(FieldWrapper, {
+			name,
+			label,
+			description,
+			required,
+			disabled,
+			localized,
+			locale,
+			error: fieldState.error?.message,
+			children: /* @__PURE__ */ jsx(NumberInput, {
+				id: name,
+				value: field.value ?? null,
+				onChange: field.onChange,
+				placeholder,
+				disabled,
+				min,
+				max,
+				step,
+				showButtons,
+				"aria-invalid": !!fieldState.error,
+				className
+			})
+		})
+	});
+}
+
+//#endregion
+export { NumberField };

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

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { TextInput } from "../primitives/text-input";
+import { Controller } from "react-hook-form";
+import { FieldWrapper } from "./field-wrapper";
+import { useResolvedControl } from "./field-utils";
+
+//#region src/components/fields/password-field.tsx
+function PasswordField({ name, label, description, placeholder, required, disabled, localized, locale, control, className }) {
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control: useResolvedControl(control),
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsx(FieldWrapper, {
+			name,
+			label,
+			description,
+			required,
+			disabled,
+			localized,
+			locale,
+			error: fieldState.error?.message,
+			children: /* @__PURE__ */ jsx(TextInput, {
+				id: name,
+				value: field.value ?? "",
+				onChange: field.onChange,
+				type: "password",
+				placeholder,
+				disabled,
+				autoComplete: "current-password",
+				"aria-invalid": !!fieldState.error,
+				className
+			})
+		})
+	});
+}
+
+//#endregion
+export { PasswordField };