@questpie/admin 0.0.1

package/src/components/fields/embedded-collection.tsx

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

package/src/components/fields/field-types.ts

@@ -0,0 +1,162 @@
+import type * as React from "react";
+import type { Control } from "react-hook-form";
+import type {
+	SelectOption as PrimitiveSelectOption,
+	SelectOptionGroup,
+} from "../primitives/types";
+
+// Re-export SelectOption for backwards compatibility
+export type SelectOption<TValue = string> = PrimitiveSelectOption<TValue>;
+export type { SelectOptionGroup };
+
+/**
+ * Base props shared by all field components.
+ * These integrate with react-hook-form via Controller.
+ */
+export type BaseFieldProps = {
+	/** Field name (path in form values) */
+	name: string;
+	/** Field label */
+	label?: string;
+	/** Helper text shown below the field */
+	description?: string;
+	/** Placeholder text */
+	placeholder?: string;
+	/** Mark field as required (visual indicator) */
+	required?: boolean;
+	/** Disable the field */
+	disabled?: boolean;
+	/** Show locale badge for localized fields */
+	localized?: boolean;
+	/** Current locale code for localized fields */
+	locale?: string;
+	/** Form control from react-hook-form (optional if using FormProvider) */
+	control?: Control<any>;
+	/** Additional className for the field wrapper */
+	className?: string;
+};
+
+/**
+ * Field types supported by the FormField component
+ */
+export type FormFieldType =
+	| "text"
+	| "email"
+	| "password"
+	| "url"
+	| "tel"
+	| "search"
+	| "number"
+	| "textarea"
+	| "checkbox"
+	| "switch"
+	| "select"
+	| "multiselect"
+	| "date"
+	| "datetime"
+	| "daterange"
+	| "tags";
+
+/**
+ * Props for the generic FormField component
+ */
+export type FormFieldProps = BaseFieldProps & {
+	type?: FormFieldType;
+	options?: SelectOption[];
+	component?: React.ComponentType<any>;
+};
+
+/**
+ * Props for text-based fields
+ */
+export type TextFieldProps = BaseFieldProps & {
+	type?: "text" | "email" | "password" | "url" | "tel" | "search";
+	maxLength?: number;
+	autoComplete?: string;
+};
+
+/**
+ * Props for number field
+ */
+export type NumberFieldProps = BaseFieldProps & {
+	min?: number;
+	max?: number;
+	step?: number;
+	showButtons?: boolean;
+};
+
+/**
+ * Props for textarea field
+ */
+export type TextareaFieldProps = BaseFieldProps & {
+	rows?: number;
+	maxLength?: number;
+	autoResize?: boolean;
+};
+
+/**
+ * Props for select field
+ */
+export type SelectFieldProps<TValue = string> = BaseFieldProps & {
+	options?: SelectOption<TValue>[];
+	loadOptions?: (search: string) => Promise<SelectOption<TValue>[]>;
+	multiple?: boolean;
+	clearable?: boolean;
+	maxSelections?: number;
+	emptyMessage?: string;
+};
+
+/**
+ * Props for date field
+ */
+export type DateFieldProps = BaseFieldProps & {
+	minDate?: Date;
+	maxDate?: Date;
+	format?: string;
+};
+
+/**
+ * Props for datetime field
+ */
+export type DateTimeFieldProps = DateFieldProps & {
+	precision?: "minute" | "second";
+};
+
+/**
+ * Props for date range field
+ */
+export type DateRangeFieldProps = BaseFieldProps & {
+	minDate?: Date;
+	maxDate?: Date;
+};
+
+/**
+ * Props for tags field
+ */
+export type TagsFieldProps = BaseFieldProps & {
+	suggestions?: string[];
+	maxTags?: number;
+	allowDuplicates?: boolean;
+	pattern?: RegExp;
+};
+
+/**
+ * Props for checkbox/switch fields
+ */
+export type BooleanFieldProps = BaseFieldProps;
+
+/**
+ * Props for checkbox group field
+ */
+export type CheckboxGroupFieldProps<TValue = string> = BaseFieldProps & {
+	options: SelectOption<TValue>[];
+	orientation?: "horizontal" | "vertical";
+};
+
+/**
+ * Props for radio group field
+ */
+export type RadioGroupFieldProps<TValue = string> = BaseFieldProps & {
+	options: SelectOption<TValue>[];
+	orientation?: "horizontal" | "vertical";
+};

package/src/components/fields/field-utils.ts

@@ -0,0 +1,6 @@
+import { useFormContext, type Control } from "react-hook-form";
+
+export function useResolvedControl(control?: Control<any>) {
+	const form = useFormContext();
+	return control ?? form.control;
+}

package/src/components/fields/field-wrapper.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import {
+	Field,
+	FieldContent,
+	FieldDescription,
+	FieldError,
+	FieldLabel,
+} from "../ui/field";
+import { LocaleBadge } from "./locale-badge";
+
+type FieldWrapperProps = {
+	name: string;
+	label?: string;
+	description?: string;
+	required?: boolean;
+	disabled?: boolean;
+	error?: string;
+	localized?: boolean;
+	locale?: string;
+	children: React.ReactNode;
+};
+
+export function FieldWrapper({
+	name,
+	label,
+	description,
+	required,
+	disabled,
+	error,
+	localized,
+	locale,
+	children,
+}: FieldWrapperProps) {
+	return (
+		<Field data-disabled={disabled} data-invalid={!!error}>
+			<div className="space-y-2">
+				{label && (
+					<FieldLabel htmlFor={name} className="flex items-center gap-2">
+						<span className="flex items-center gap-1">
+							{label}
+							{required && <span className="text-destructive">*</span>}
+						</span>
+						{localized && <LocaleBadge locale={locale || "i18n"} />}
+					</FieldLabel>
+				)}
+				<FieldContent>{children}</FieldContent>
+				{description && <FieldDescription>{description}</FieldDescription>}
+				{error && <FieldError errors={[{ message: error }]} />}
+			</div>
+		</Field>
+	);
+}

package/src/components/fields/index.ts

@@ -0,0 +1,66 @@
+/**
+ * Field components for admin forms
+ *
+ * All field components are integrated with react-hook-form via Controller.
+ * They use the primitive components from ../primitives for the actual UI.
+ */
+
+// Complex field components
+export { RelationSelect } from "./relation-select";
+export type { RelationSelectProps } from "./relation-select";
+
+export { RelationPicker } from "./relation-picker";
+export type { RelationPickerProps } from "./relation-picker";
+
+export { RelationField } from "./relation-field";
+export type { RelationFieldProps } from "./relation-field";
+
+export { JsonField } from "./json-field";
+export type { JsonFieldProps, JsonFieldMode } from "./json-field";
+
+export { EmbeddedCollectionField } from "./embedded-collection";
+export type { EmbeddedCollectionFieldProps } from "./embedded-collection";
+
+export { ArrayField } from "./array-field";
+export type { ArrayFieldProps, ArrayFieldItemType } from "./array-field";
+
+export { RichTextEditor } from "./rich-text-editor";
+export type { RichTextEditorProps, RichTextFeatures } from "./rich-text-editor";
+
+// Basic field components (using primitives)
+export { TextField } from "./text-field";
+export { EmailField } from "./email-field";
+export { PasswordField } from "./password-field";
+export { TextareaField } from "./textarea-field";
+export { NumberField } from "./number-field";
+export { CheckboxField } from "./checkbox-field";
+export { SwitchField } from "./switch-field";
+export { SelectField } from "./select-field";
+export { DateField } from "./date-field";
+export { DatetimeField } from "./datetime-field";
+export { CustomField } from "./custom-field";
+
+// Utilities
+export { LocaleBadge } from "./locale-badge";
+export { FieldWrapper } from "./field-wrapper";
+export { useResolvedControl } from "./field-utils";
+
+// Types
+export type {
+	BaseFieldProps,
+	FormFieldProps,
+	FormFieldType,
+	SelectOption,
+	SelectOptionGroup,
+	TextFieldProps,
+	NumberFieldProps,
+	TextareaFieldProps,
+	SelectFieldProps,
+	DateFieldProps,
+	DateTimeFieldProps,
+	DateRangeFieldProps,
+	TagsFieldProps,
+	BooleanFieldProps,
+	CheckboxGroupFieldProps,
+	RadioGroupFieldProps,
+} from "./field-types";