@questpie/admin 1.1.1 → 3.0.0

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

@@ -0,0 +1,461 @@
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { Button } from "../ui/button.mjs";
+import { Textarea } from "../ui/textarea.mjs";
+import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from "../ui/field.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Controller, useFormContext } from "react-hook-form";
+
+//#region src/client/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(t0) {
+	const $ = c(31);
+	const { name, label, description, required, disabled, readOnly, placeholder: t1, defaultMode: t2, allowModeSwitch: t3, minHeight: t4, maxHeight: t5, renderForm, control: controlProp, className } = t0;
+	const placeholder = t1 === void 0 ? "{\n  \"key\": \"value\"\n}" : t1;
+	const defaultMode = t2 === void 0 ? "code" : t2;
+	const allowModeSwitch = t3 === void 0 ? true : t3;
+	const minHeight = t4 === void 0 ? 200 : t4;
+	const maxHeight = t5 === void 0 ? 400 : t5;
+	const { t } = useTranslation();
+	const resolveText = useResolveText();
+	let t6;
+	if ($[0] !== label || $[1] !== resolveText) {
+		t6 = label ? resolveText(label) : void 0;
+		$[0] = label;
+		$[1] = resolveText;
+		$[2] = t6;
+	} else t6 = $[2];
+	const resolvedLabel = t6;
+	let t7;
+	if ($[3] !== description || $[4] !== resolveText) {
+		t7 = description ? resolveText(description) : void 0;
+		$[3] = description;
+		$[4] = resolveText;
+		$[5] = t7;
+	} else t7 = $[5];
+	const resolvedDescription = t7;
+	const formContext = useFormContext();
+	const control = controlProp ?? formContext?.control;
+	const [mode, setMode] = React.useState(defaultMode);
+	if (!control) {
+		if (process.env.NODE_ENV !== "production") console.warn("JsonField: No form control found. Make sure to use within FormProvider or pass control prop.");
+		return null;
+	}
+	const showModeSwitch = allowModeSwitch && renderForm;
+	const t8 = required ? `${resolvedLabel || name} is required` : void 0;
+	let t9;
+	if ($[6] !== mode) {
+		t9 = (value) => {
+			if (!value) return true;
+			if (mode === "code" && typeof value === "string") try {
+				JSON.parse(value);
+				return true;
+			} catch {
+				return "Invalid JSON format";
+			}
+			return true;
+		};
+		$[6] = mode;
+		$[7] = t9;
+	} else t9 = $[7];
+	let t10;
+	if ($[8] !== t8 || $[9] !== t9) {
+		t10 = {
+			required: t8,
+			validate: t9
+		};
+		$[8] = t8;
+		$[9] = t9;
+		$[10] = t10;
+	} else t10 = $[10];
+	let t11;
+	if ($[11] !== className || $[12] !== disabled || $[13] !== maxHeight || $[14] !== minHeight || $[15] !== mode || $[16] !== name || $[17] !== placeholder || $[18] !== readOnly || $[19] !== renderForm || $[20] !== required || $[21] !== resolvedDescription || $[22] !== resolvedLabel || $[23] !== showModeSwitch || $[24] !== t) {
+		t11 = (t12$1) => {
+			const { field, fieldState } = t12$1;
+			const error = fieldState.error?.message;
+			return /* @__PURE__ */ jsxs(Field, {
+				"data-invalid": !!error,
+				className: cn("qa-json-field", className),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between",
+					children: [resolvedLabel && /* @__PURE__ */ jsxs(FieldLabel, {
+						htmlFor: name,
+						children: [resolvedLabel, 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: t("field.codeEditor"),
+							children: /* @__PURE__ */ jsx(Icon, { icon: "ph:code-bold" })
+						}), /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: mode === "form" ? "secondary" : "ghost",
+							size: "icon-xs",
+							onClick: () => setMode("form"),
+							disabled,
+							title: t("field.formEditor"),
+							children: /* @__PURE__ */ jsx(Icon, { icon: "ph:list-bullets-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
+					}),
+					resolvedDescription && !error && /* @__PURE__ */ jsx(FieldDescription, { children: resolvedDescription }),
+					/* @__PURE__ */ jsx(FieldError, { children: error })
+				] })]
+			});
+		};
+		$[11] = className;
+		$[12] = disabled;
+		$[13] = maxHeight;
+		$[14] = minHeight;
+		$[15] = mode;
+		$[16] = name;
+		$[17] = placeholder;
+		$[18] = readOnly;
+		$[19] = renderForm;
+		$[20] = required;
+		$[21] = resolvedDescription;
+		$[22] = resolvedLabel;
+		$[23] = showModeSwitch;
+		$[24] = t;
+		$[25] = t11;
+	} else t11 = $[25];
+	let t12;
+	if ($[26] !== control || $[27] !== name || $[28] !== t10 || $[29] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Controller, {
+			name,
+			control,
+			rules: t10,
+			render: t11
+		});
+		$[26] = control;
+		$[27] = name;
+		$[28] = t10;
+		$[29] = t11;
+		$[30] = t12;
+	} else t12 = $[30];
+	return t12;
+}
+/**
+* Code editor for JSON (using Textarea for simplicity)
+* Can be replaced with Monaco/CodeMirror in the future
+*/
+function JsonCodeEditor(t0) {
+	const $ = c(40);
+	const { value, onChange, disabled, readOnly, placeholder, minHeight, maxHeight, error } = t0;
+	let t1;
+	if ($[0] !== value) {
+		t1 = () => {
+			if (typeof value === "string") return value;
+			if (value === null || value === void 0) return "";
+			try {
+				return JSON.stringify(value, null, 2);
+			} catch {
+				return "";
+			}
+		};
+		$[0] = value;
+		$[1] = t1;
+	} else t1 = $[1];
+	const [localValue, setLocalValue] = React.useState(t1);
+	const [parseError, setParseError] = React.useState(null);
+	const isEditingRef = React.useRef(false);
+	let t2;
+	let t3;
+	if ($[2] !== value) {
+		t2 = () => {
+			if (isEditingRef.current) return;
+			if (typeof value === "string") setLocalValue(value);
+			else if (value !== null && value !== void 0) try {
+				setLocalValue(JSON.stringify(value, null, 2));
+			} catch {}
+			else setLocalValue("");
+		};
+		t3 = [value];
+		$[2] = value;
+		$[3] = t2;
+		$[4] = t3;
+	} else {
+		t2 = $[3];
+		t3 = $[4];
+	}
+	React.useEffect(t2, t3);
+	let t4;
+	if ($[5] !== onChange) {
+		t4 = (e) => {
+			isEditingRef.current = true;
+			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 (t5$1) {
+				setParseError("Invalid JSON");
+				onChange(newValue);
+			}
+		};
+		$[5] = onChange;
+		$[6] = t4;
+	} else t4 = $[6];
+	const handleChange = t4;
+	let t5;
+	if ($[7] !== localValue || $[8] !== onChange) {
+		t5 = () => {
+			try {
+				const parsed_0 = JSON.parse(localValue);
+				setLocalValue(JSON.stringify(parsed_0, null, 2));
+				setParseError(null);
+				onChange(parsed_0);
+			} catch {}
+		};
+		$[7] = localValue;
+		$[8] = onChange;
+		$[9] = t5;
+	} else t5 = $[9];
+	const handleFormat = t5;
+	let t6;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = () => {
+			isEditingRef.current = false;
+		};
+		$[10] = t6;
+	} else t6 = $[10];
+	const t7 = error || parseError ? "border-destructive" : "";
+	let t8;
+	if ($[11] !== t7) {
+		t8 = cn("font-mono text-xs", t7);
+		$[11] = t7;
+		$[12] = t8;
+	} else t8 = $[12];
+	const t9 = `${minHeight}px`;
+	const t10 = maxHeight ? `${maxHeight}px` : void 0;
+	const t11 = maxHeight ? "none" : "vertical";
+	let t12;
+	if ($[13] !== t10 || $[14] !== t11 || $[15] !== t9) {
+		t12 = {
+			minHeight: t9,
+			maxHeight: t10,
+			resize: t11
+		};
+		$[13] = t10;
+		$[14] = t11;
+		$[15] = t9;
+		$[16] = t12;
+	} else t12 = $[16];
+	const t13 = !!error || !!parseError;
+	let t14;
+	if ($[17] !== disabled || $[18] !== handleChange || $[19] !== localValue || $[20] !== placeholder || $[21] !== readOnly || $[22] !== t12 || $[23] !== t13 || $[24] !== t8) {
+		t14 = /* @__PURE__ */ jsx(Textarea, {
+			value: localValue,
+			onChange: handleChange,
+			onBlur: t6,
+			disabled,
+			readOnly,
+			placeholder,
+			className: t8,
+			style: t12,
+			"aria-invalid": t13
+		});
+		$[17] = disabled;
+		$[18] = handleChange;
+		$[19] = localValue;
+		$[20] = placeholder;
+		$[21] = readOnly;
+		$[22] = t12;
+		$[23] = t13;
+		$[24] = t8;
+		$[25] = t14;
+	} else t14 = $[25];
+	let t15;
+	if ($[26] !== parseError) {
+		t15 = parseError && /* @__PURE__ */ jsxs("div", {
+			className: "text-destructive absolute top-2 right-2 flex items-center gap-1 text-xs",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				icon: "ph:warning-circle-fill",
+				className: "size-3"
+			}), parseError]
+		});
+		$[26] = parseError;
+		$[27] = t15;
+	} else t15 = $[27];
+	let t16;
+	if ($[28] !== t14 || $[29] !== t15) {
+		t16 = /* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [t14, t15]
+		});
+		$[28] = t14;
+		$[29] = t15;
+		$[30] = t16;
+	} else t16 = $[30];
+	let t17;
+	if ($[31] !== disabled || $[32] !== handleFormat || $[33] !== localValue || $[34] !== parseError || $[35] !== readOnly) {
+		t17 = !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"
+			})
+		});
+		$[31] = disabled;
+		$[32] = handleFormat;
+		$[33] = localValue;
+		$[34] = parseError;
+		$[35] = readOnly;
+		$[36] = t17;
+	} else t17 = $[36];
+	let t18;
+	if ($[37] !== t16 || $[38] !== t17) {
+		t18 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [t16, t17]
+		});
+		$[37] = t16;
+		$[38] = t17;
+		$[39] = t18;
+	} else t18 = $[39];
+	return t18;
+}
+/**
+* Form-based editor wrapper
+*/
+function JsonFormEditor(t0) {
+	const $ = c(12);
+	const { value, onChange, disabled, readOnly, renderForm } = t0;
+	let t1;
+	bb0: {
+		if (typeof value === "object" && value !== null) {
+			t1 = value;
+			break bb0;
+		}
+		if (typeof value === "string") try {
+			let t2$2;
+			if ($[0] !== value) {
+				t2$2 = JSON.parse(value);
+				$[0] = value;
+				$[1] = t2$2;
+			} else t2$2 = $[1];
+			t1 = t2$2;
+			break bb0;
+		} catch {
+			let t2$2;
+			if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+				t2$2 = {};
+				$[2] = t2$2;
+			} else t2$2 = $[2];
+			t1 = t2$2;
+			break bb0;
+		}
+		let t2$1;
+		if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+			t2$1 = {};
+			$[3] = t2$1;
+		} else t2$1 = $[3];
+		t1 = t2$1;
+	}
+	const safeValue = t1;
+	if (!renderForm) return null;
+	let t2;
+	if ($[4] !== disabled || $[5] !== onChange || $[6] !== readOnly || $[7] !== renderForm || $[8] !== safeValue) {
+		t2 = renderForm({
+			value: safeValue,
+			onChange,
+			disabled,
+			readOnly
+		});
+		$[4] = disabled;
+		$[5] = onChange;
+		$[6] = readOnly;
+		$[7] = renderForm;
+		$[8] = safeValue;
+		$[9] = t2;
+	} else t2 = $[9];
+	const formContent = t2;
+	let t3;
+	if ($[10] !== formContent) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			className: "border p-4",
+			children: formContent
+		});
+		$[10] = formContent;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+}
+
+//#endregion
+export { JsonField };

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

@@ -0,0 +1,25 @@
+import { Badge } from "../ui/badge.mjs";
+import { c } from "react/compiler-runtime";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/components/fields/locale-badge.tsx
+function LocaleBadge(t0) {
+	const $ = c(2);
+	const { locale } = t0;
+	if (!locale) return null;
+	let t1;
+	if ($[0] !== locale) {
+		t1 = /* @__PURE__ */ jsx(Badge, {
+			variant: "secondary",
+			className: "qa-locale-badge text-[10px] tracking-wide uppercase",
+			children: locale
+		});
+		$[0] = locale;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+
+//#endregion
+export { LocaleBadge };

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

@@ -0,0 +1,73 @@
+import { cn } from "../../lib/utils.mjs";
+import { useResolvedControl } from "./field-utils.mjs";
+import { FieldWrapper } from "./field-wrapper.mjs";
+import { NumberInput } from "../primitives/number-input.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+
+//#region src/client/components/fields/number-field.tsx
+function NumberField(t0) {
+	const $ = c(18);
+	const { name, label, description, placeholder, required, disabled, localized, locale, control, className, min, max, step, showButtons } = t0;
+	const resolvedControl = useResolvedControl(control);
+	let t1;
+	if ($[0] !== className || $[1] !== description || $[2] !== disabled || $[3] !== label || $[4] !== locale || $[5] !== localized || $[6] !== max || $[7] !== min || $[8] !== name || $[9] !== placeholder || $[10] !== required || $[11] !== showButtons || $[12] !== step) {
+		t1 = (t2$1) => {
+			const { field, fieldState } = t2$1;
+			return /* @__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: cn("qa-number-field", className)
+				})
+			});
+		};
+		$[0] = className;
+		$[1] = description;
+		$[2] = disabled;
+		$[3] = label;
+		$[4] = locale;
+		$[5] = localized;
+		$[6] = max;
+		$[7] = min;
+		$[8] = name;
+		$[9] = placeholder;
+		$[10] = required;
+		$[11] = showButtons;
+		$[12] = step;
+		$[13] = t1;
+	} else t1 = $[13];
+	let t2;
+	if ($[14] !== name || $[15] !== resolvedControl || $[16] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Controller, {
+			name,
+			control: resolvedControl,
+			render: t1
+		});
+		$[14] = name;
+		$[15] = resolvedControl;
+		$[16] = t1;
+		$[17] = t2;
+	} else t2 = $[17];
+	return t2;
+}
+
+//#endregion
+export { NumberField };