@questpie/admin 0.0.1

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

@@ -0,0 +1,440 @@
+/**
+ * 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.
+ */
+
+import * as React from "react";
+import { Controller, useFormContext, type Control } from "react-hook-form";
+import { Code, ListBullets, WarningCircle } from "@phosphor-icons/react";
+import { Button } from "../ui/button";
+import { Textarea } from "../ui/textarea";
+import {
+	Field,
+	FieldContent,
+	FieldDescription,
+	FieldError,
+	FieldLabel,
+} from "../ui/field";
+import { cn } from "../../lib/utils";
+
+export type JsonFieldMode = "code" | "form";
+
+export type JsonFieldProps = {
+	/**
+	 * Field name (for react-hook-form)
+	 */
+	name: string;
+
+	/**
+	 * Label for the field
+	 */
+	label?: string;
+
+	/**
+	 * Description/help text
+	 */
+	description?: string;
+
+	/**
+	 * Is the field required
+	 */
+	required?: boolean;
+
+	/**
+	 * Is the field disabled
+	 */
+	disabled?: boolean;
+
+	/**
+	 * Is the field readonly
+	 */
+	readOnly?: boolean;
+
+	/**
+	 * Placeholder text for code mode
+	 */
+	placeholder?: string;
+
+	/**
+	 * Initial editing mode
+	 * @default "code"
+	 */
+	defaultMode?: JsonFieldMode;
+
+	/**
+	 * Allow switching between modes
+	 * @default true
+	 */
+	allowModeSwitch?: boolean;
+
+	/**
+	 * Minimum height for the editor
+	 * @default 200
+	 */
+	minHeight?: number;
+
+	/**
+	 * Maximum height for the editor (0 = no limit)
+	 * @default 400
+	 */
+	maxHeight?: number;
+
+	/**
+	 * Custom render function for form mode
+	 * Receives current value and onChange handler
+	 */
+	renderForm?: (props: {
+		value: any;
+		onChange: (value: any) => void;
+		disabled?: boolean;
+		readOnly?: boolean;
+	}) => React.ReactNode;
+
+	/**
+	 * Form control (optional, will use useFormContext if not provided)
+	 */
+	control?: Control<any>;
+
+	/**
+	 * Additional class name
+	 */
+	className?: string;
+};
+
+/**
+ * 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} />
+ *   )}
+ * />
+ * ```
+ */
+export 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,
+}: JsonFieldProps) {
+	const formContext = useFormContext();
+	const control = controlProp ?? formContext?.control;
+	const [mode, setMode] = React.useState<JsonFieldMode>(defaultMode);
+
+	if (!control) {
+		console.warn(
+			"JsonField: No form control found. Make sure to use within FormProvider or pass control prop.",
+		);
+		return null;
+	}
+
+	// Only show mode switch if form rendering is available
+	const showModeSwitch = allowModeSwitch && renderForm;
+
+	return (
+		<Controller
+			name={name}
+			control={control}
+			rules={{
+				required: required ? `${label || name} is required` : undefined,
+				validate: (value) => {
+					if (!value) return true;
+					// In code mode, validate JSON
+					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 (
+					<Field data-invalid={!!error} className={className}>
+						{/* Header with label and mode switch */}
+						<div className="flex items-center justify-between">
+							{label && (
+								<FieldLabel htmlFor={name}>
+									{label}
+									{required && <span className="text-destructive ml-1">*</span>}
+								</FieldLabel>
+							)}
+
+							{showModeSwitch && (
+								<div className="flex gap-1">
+									<Button
+										type="button"
+										variant={mode === "code" ? "secondary" : "ghost"}
+										size="icon-xs"
+										onClick={() => setMode("code")}
+										disabled={disabled}
+										title="Code editor"
+									>
+										<Code weight="bold" />
+									</Button>
+									<Button
+										type="button"
+										variant={mode === "form" ? "secondary" : "ghost"}
+										size="icon-xs"
+										onClick={() => setMode("form")}
+										disabled={disabled}
+										title="Form editor"
+									>
+										<ListBullets weight="bold" />
+									</Button>
+								</div>
+							)}
+						</div>
+
+						<FieldContent>
+							{mode === "code" ? (
+								<JsonCodeEditor
+									value={field.value}
+									onChange={field.onChange}
+									disabled={disabled}
+									readOnly={readOnly}
+									placeholder={placeholder}
+									minHeight={minHeight}
+									maxHeight={maxHeight}
+									error={!!error}
+								/>
+							) : renderForm ? (
+								<JsonFormEditor
+									value={field.value}
+									onChange={field.onChange}
+									disabled={disabled}
+									readOnly={readOnly}
+									renderForm={renderForm}
+								/>
+							) : (
+								<JsonCodeEditor
+									value={field.value}
+									onChange={field.onChange}
+									disabled={disabled}
+									readOnly={readOnly}
+									placeholder={placeholder}
+									minHeight={minHeight}
+									maxHeight={maxHeight}
+									error={!!error}
+								/>
+							)}
+
+							{description && !error && (
+								<FieldDescription>{description}</FieldDescription>
+							)}
+							<FieldError>{error}</FieldError>
+						</FieldContent>
+					</Field>
+				);
+			}}
+		/>
+	);
+}
+
+/**
+ * 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,
+}: {
+	value: any;
+	onChange: (value: any) => void;
+	disabled?: boolean;
+	readOnly?: boolean;
+	placeholder?: string;
+	minHeight?: number;
+	maxHeight?: number;
+	error?: boolean;
+}) {
+	const [localValue, setLocalValue] = React.useState<string>(() => {
+		if (typeof value === "string") return value;
+		if (value === null || value === undefined) return "";
+		try {
+			return JSON.stringify(value, null, 2);
+		} catch {
+			return "";
+		}
+	});
+	const [parseError, setParseError] = React.useState<string | null>(null);
+
+	// Sync local value when external value changes
+	React.useEffect(() => {
+		if (typeof value === "string") {
+			setLocalValue(value);
+		} else if (value !== null && value !== undefined) {
+			try {
+				setLocalValue(JSON.stringify(value, null, 2));
+			} catch {
+				// Keep current local value if stringification fails
+			}
+		} else {
+			setLocalValue("");
+		}
+	}, [value]);
+
+	const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+		const newValue = e.target.value;
+		setLocalValue(newValue);
+
+		// Try to parse and update form value
+		if (!newValue.trim()) {
+			setParseError(null);
+			onChange(null);
+			return;
+		}
+
+		try {
+			const parsed = JSON.parse(newValue);
+			setParseError(null);
+			onChange(parsed);
+		} catch (err) {
+			setParseError("Invalid JSON");
+			// Still update with raw string so validation can catch it
+			onChange(newValue);
+		}
+	};
+
+	const handleFormat = () => {
+		try {
+			const parsed = JSON.parse(localValue);
+			const formatted = JSON.stringify(parsed, null, 2);
+			setLocalValue(formatted);
+			setParseError(null);
+			onChange(parsed);
+		} catch {
+			// Can't format invalid JSON
+		}
+	};
+
+	return (
+		<div className="space-y-2">
+			<div className="relative">
+				<Textarea
+					value={localValue}
+					onChange={handleChange}
+					disabled={disabled}
+					readOnly={readOnly}
+					placeholder={placeholder}
+					className={cn(
+						"font-mono text-xs",
+						error || parseError ? "border-destructive" : "",
+					)}
+					style={{
+						minHeight: `${minHeight}px`,
+						maxHeight: maxHeight ? `${maxHeight}px` : undefined,
+						resize: maxHeight ? "none" : "vertical",
+					}}
+					aria-invalid={!!error || !!parseError}
+				/>
+
+				{/* Parse error indicator */}
+				{parseError && (
+					<div className="text-destructive absolute right-2 top-2 flex items-center gap-1 text-xs">
+						<WarningCircle weight="fill" className="size-3" />
+						{parseError}
+					</div>
+				)}
+			</div>
+
+			{/* Format button */}
+			{!readOnly && !disabled && localValue && (
+				<div className="flex justify-end">
+					<Button
+						type="button"
+						variant="ghost"
+						size="xs"
+						onClick={handleFormat}
+						disabled={!!parseError}
+					>
+						Format JSON
+					</Button>
+				</div>
+			)}
+		</div>
+	);
+}
+
+/**
+ * Form-based editor wrapper
+ */
+function JsonFormEditor({
+	value,
+	onChange,
+	disabled,
+	readOnly,
+	renderForm,
+}: {
+	value: any;
+	onChange: (value: any) => void;
+	disabled?: boolean;
+	readOnly?: boolean;
+	renderForm: JsonFieldProps["renderForm"];
+}) {
+	// Ensure value is an object for form mode
+	const safeValue = React.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 (
+		<div className="rounded-lg border p-4">
+			{renderForm({
+				value: safeValue,
+				onChange,
+				disabled,
+				readOnly,
+			})}
+		</div>
+	);
+}

package/src/components/fields/locale-badge.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { Badge } from "../ui/badge";
+
+type LocaleBadgeProps = {
+	locale?: string;
+};
+
+export function LocaleBadge({ locale }: LocaleBadgeProps) {
+	if (!locale) return null;
+	return (
+		<Badge variant="secondary" className="uppercase text-[10px] tracking-wide">
+			{locale}
+		</Badge>
+	);
+}

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

@@ -0,0 +1,57 @@
+import { Controller } from "react-hook-form";
+import { NumberInput } from "../primitives/number-input";
+import { FieldWrapper } from "./field-wrapper";
+import { useResolvedControl } from "./field-utils";
+import type { NumberFieldProps } from "./field-types";
+
+export function NumberField({
+	name,
+	label,
+	description,
+	placeholder,
+	required,
+	disabled,
+	localized,
+	locale,
+	control,
+	className,
+	min,
+	max,
+	step,
+	showButtons,
+}: NumberFieldProps) {
+	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}
+				>
+					<NumberInput
+						id={name}
+						value={field.value ?? null}
+						onChange={field.onChange}
+						placeholder={placeholder}
+						disabled={disabled}
+						min={min}
+						max={max}
+						step={step}
+						showButtons={showButtons}
+						aria-invalid={!!fieldState.error}
+						className={className}
+					/>
+				</FieldWrapper>
+			)}
+		/>
+	);
+}

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

@@ -0,0 +1,51 @@
+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 PasswordField({
+	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="password"
+						placeholder={placeholder}
+						disabled={disabled}
+						autoComplete="current-password"
+						aria-invalid={!!fieldState.error}
+						className={className}
+					/>
+				</FieldWrapper>
+			)}
+		/>
+	);
+}