@questpie/admin 0.0.1 → 1.0.1

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

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

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

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

@@ -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 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>
-			)}
-		/>
-	);
-}