@questpie/admin 0.0.1 → 1.0.0

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

@@ -1,51 +0,0 @@
-import { Controller } from "react-hook-form";
-import { TextInput } from "../primitives/text-input";
-import { FieldWrapper } from "./field-wrapper";
-import { useResolvedControl } from "./field-utils";
-import type { BaseFieldProps } from "./field-types";
-
-export function EmailField({
-	name,
-	label,
-	description,
-	placeholder,
-	required,
-	disabled,
-	localized,
-	locale,
-	control,
-	className,
-}: BaseFieldProps) {
-	const resolvedControl = useResolvedControl(control);
-
-	return (
-		<Controller
-			name={name}
-			control={resolvedControl}
-			render={({ field, fieldState }) => (
-				<FieldWrapper
-					name={name}
-					label={label}
-					description={description}
-					required={required}
-					disabled={disabled}
-					localized={localized}
-					locale={locale}
-					error={fieldState.error?.message}
-				>
-					<TextInput
-						id={name}
-						value={field.value ?? ""}
-						onChange={field.onChange}
-						type="email"
-						placeholder={placeholder}
-						disabled={disabled}
-						autoComplete="email"
-						aria-invalid={!!fieldState.error}
-						className={className}
-					/>
-				</FieldWrapper>
-			)}
-		/>
-	);
-}

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

@@ -1,315 +0,0 @@
-/**
- * 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

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

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

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

@@ -1,66 +0,0 @@
-/**
- * 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";