@fuma-content/studio 0.1.0

package/dist/src/components/json-schema-editor/components/inputs.mjs

@@ -0,0 +1,438 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { buttonVariants } from "../../ui/button.mjs";
+import { Input } from "../../ui/input.mjs";
+import { Textarea } from "../../ui/textarea.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/select.mjs";
+import { labelVariants } from "../../ui/label.mjs";
+import { getDefaultValue } from "../get-default-values.mjs";
+import { anyFields, useFieldInfo, useResolvedSchema, useSchema } from "../schema.mjs";
+import { FormatFlags, schemaToString } from "../utils/schema-to-string.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChevronDown, Plus, Trash2, X } from "lucide-react";
+import { useController, useFieldArray, useFormContext } from "react-hook-form";
+
+//#region src/components/json-schema-editor/components/inputs.tsx
+function FieldLabel(props) {
+	return /* @__PURE__ */ jsx("label", {
+		...props,
+		className: cn("w-full inline-flex items-center gap-0.5", props.className),
+		children: props.children
+	});
+}
+function FieldLabelName({ required = false, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		...props,
+		className: cn(labelVariants(), "me-auto", className),
+		children: [children, required && /* @__PURE__ */ jsx("span", {
+			className: "text-destructive mx-1",
+			children: "*"
+		})]
+	});
+}
+function FieldLabelType(props) {
+	return /* @__PURE__ */ jsx("code", {
+		...props,
+		className: cn("text-xs text-muted-foreground", props.className),
+		children: props.children
+	});
+}
+function ObjectInput({ field: _field, fieldName, ...props }) {
+	const field = useResolvedSchema(_field);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cn("flex flex-col gap-4", props.className),
+		children: [Object.entries(field.properties ?? {}).map(([key, child]) => /* @__PURE__ */ jsx(FieldSet, {
+			name: key,
+			field: child,
+			fieldName: `${fieldName}.${key}`,
+			isRequired: field.required?.includes(key)
+		}, key)), (field.additionalProperties || field.patternProperties) && /* @__PURE__ */ jsx(DynamicProperties, {
+			fieldName,
+			filterKey: (v) => !field.properties || !Object.keys(field.properties).includes(v),
+			getType: (key) => {
+				for (const pattern in field.patternProperties) if (key.match(RegExp(pattern))) return field.patternProperties[pattern];
+				if (field.additionalProperties) return field.additionalProperties;
+				return anyFields;
+			}
+		})]
+	});
+}
+function DynamicProperties({ fieldName, filterKey = () => true, getType = () => anyFields }) {
+	const { control, setValue, getValues } = useFormContext();
+	const [nextName, setNextName] = useState("");
+	const [properties, setProperties] = useState(() => {
+		const value = getValues(fieldName);
+		if (value) return Object.keys(value).filter(filterKey);
+		return [];
+	});
+	const onAppend = () => {
+		const name = nextName.trim();
+		if (name.length === 0) return;
+		setProperties((p) => {
+			if (p.includes(name) || !filterKey(name)) return p;
+			const type = getType(name);
+			setValue(`${fieldName}.${name}`, getDefaultValue(type));
+			setNextName("");
+			return [...p, name];
+		});
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [properties.map((item) => {
+		return /* @__PURE__ */ jsx(FieldSet, {
+			name: item,
+			field: getType(item),
+			fieldName: `${fieldName}.${item}`,
+			toolbar: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Remove Item",
+				className: cn(buttonVariants({
+					variant: "outline",
+					size: "icon-xs"
+				})),
+				onClick: () => {
+					setProperties((p) => p.filter((prop) => prop !== item));
+					control.unregister(`${fieldName}.${item}`);
+				},
+				children: /* @__PURE__ */ jsx(Trash2, {})
+			})
+		}, item);
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "flex gap-2 col-span-full",
+		children: [/* @__PURE__ */ jsx(Input, {
+			value: nextName,
+			placeholder: "Enter Property Name",
+			onChange: (e) => setNextName(e.target.value),
+			onKeyDown: (e) => {
+				if (e.key === "Enter") {
+					onAppend();
+					e.preventDefault();
+				}
+			}
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: cn(buttonVariants({
+				variant: "secondary",
+				size: "sm"
+			}), "px-4"),
+			onClick: onAppend,
+			children: "New"
+		})]
+	})] });
+}
+function FieldInput({ field, fieldName, isRequired, ...props }) {
+	const form = useFormContext();
+	const { field: { value, onChange, ...restField }, fieldState } = useController({
+		control: form.control,
+		name: fieldName
+	});
+	if (field.type === "null") return;
+	if (field.enum) return /* @__PURE__ */ jsxs(Select, {
+		value: field.enum.indexOf(value).toString(),
+		onValueChange: (value$1) => {
+			onChange(value$1 === "-1" ? void 0 : value$1);
+		},
+		disabled: restField.disabled,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			id: fieldName,
+			className: props.className,
+			...restField,
+			children: /* @__PURE__ */ jsx(SelectValue, {})
+		}), /* @__PURE__ */ jsxs(SelectContent, { children: [field.enum.map((item, i) => /* @__PURE__ */ jsx(SelectItem, {
+			value: i.toString(),
+			children: JSON.stringify(item)
+		}, i)), !isRequired && /* @__PURE__ */ jsx(SelectItem, {
+			value: "-1",
+			children: "Unset"
+		})] })]
+	});
+	if (field.type === "boolean") return /* @__PURE__ */ jsxs(Select, {
+		value: String(value),
+		onValueChange: (value$1) => onChange(value$1 === "undefined" ? void 0 : value$1 === "true"),
+		disabled: restField.disabled,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			id: fieldName,
+			className: props.className,
+			...restField,
+			children: /* @__PURE__ */ jsx(SelectValue, {})
+		}), /* @__PURE__ */ jsxs(SelectContent, { children: [
+			/* @__PURE__ */ jsx(SelectItem, {
+				value: "true",
+				children: "True"
+			}),
+			/* @__PURE__ */ jsx(SelectItem, {
+				value: "false",
+				children: "False"
+			}),
+			!isRequired && /* @__PURE__ */ jsx(SelectItem, {
+				value: "undefined",
+				children: "Unset"
+			})
+		] })]
+	});
+	const resetBn = fieldState.isDirty && /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: () => form.resetField(fieldName),
+		className: "text-muted-foreground",
+		children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+	});
+	if (field.type === "string") {
+		if (field.format === "binary") return /* @__PURE__ */ jsxs("div", {
+			...props,
+			children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: fieldName,
+				className: cn(buttonVariants({
+					variant: "secondary",
+					className: "w-full h-9 gap-2 truncate"
+				})),
+				children: value instanceof File ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-xs",
+					children: "Selected"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "truncate w-0 flex-1 text-end",
+					children: value.name
+				})] }) : /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: "Upload"
+				})
+			}), /* @__PURE__ */ jsx("input", {
+				id: fieldName,
+				type: "file",
+				multiple: false,
+				onChange: (e) => {
+					if (!e.target.files) return;
+					onChange(e.target.files.item(0));
+				},
+				hidden: true,
+				...restField
+			})]
+		});
+		if (field.format === "datetime" || field.format === "time" || field.format === "date") return /* @__PURE__ */ jsxs("div", {
+			...props,
+			className: cn("flex flex-row gap-2", props.className),
+			children: [/* @__PURE__ */ jsx(Input, {
+				id: fieldName,
+				type: field.format,
+				placeholder: "Enter value",
+				value: value ?? "",
+				onChange: (e) => onChange(e.target.value),
+				...restField
+			}), resetBn]
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			...props,
+			className: cn("flex flex-row gap-2", props.className),
+			children: [/* @__PURE__ */ jsx(Textarea, {
+				id: fieldName,
+				placeholder: "Enter value",
+				value: value ?? "",
+				onChange: (e) => onChange(e.target.value),
+				...restField
+			}), resetBn]
+		});
+	}
+	if (field.type === "integer" || field.type === "number") return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cn("flex flex-row gap-2", props.className),
+		children: [/* @__PURE__ */ jsx(Input, {
+			id: fieldName,
+			placeholder: "Enter value",
+			type: "number",
+			step: field.type === "integer" ? 1 : void 0,
+			value: value ?? "",
+			onChange: (e) => {
+				if (!Number.isNaN(e.target.valueAsNumber)) onChange(e.target.valueAsNumber);
+			},
+			...restField
+		}), resetBn]
+	});
+}
+function FieldSet({ field: _field, fieldName, toolbar, name, isRequired, depth = 0, slotType, collapsible = true, ...props }) {
+	const schemaContext = useSchema();
+	const field = useResolvedSchema(_field);
+	const [show, setShow] = useState(!collapsible);
+	const { info, updateInfo } = useFieldInfo(fieldName, field, depth);
+	if (_field === false) return;
+	if (field.readOnly && !schemaContext.readOnly) return;
+	if (field.writeOnly && !schemaContext.writeOnly) return;
+	if (info.unionField) {
+		const union = field[info.unionField];
+		const showSelect = union.length > 1;
+		return /* @__PURE__ */ jsx(FieldSet, {
+			...props,
+			name,
+			fieldName,
+			isRequired,
+			field: union[info.oneOf],
+			depth: depth + 1,
+			slotType: showSelect ? false : slotType,
+			toolbar: /* @__PURE__ */ jsxs(Fragment, { children: [showSelect && /* @__PURE__ */ jsx("select", {
+				className: "text-xs font-mono",
+				value: info.oneOf,
+				onChange: (e) => {
+					updateInfo({ oneOf: Number(e.target.value) });
+				},
+				children: union.map((item, i) => /* @__PURE__ */ jsx("option", {
+					value: i,
+					className: "bg-popover text-popover-foreground",
+					children: schemaToString(item, schemaContext, FormatFlags.UseAlias)
+				}, i))
+			}), toolbar] })
+		});
+	}
+	if (Array.isArray(field.type)) {
+		const showSelect = field.type.length > 1;
+		return /* @__PURE__ */ jsx(FieldSet, {
+			...props,
+			name,
+			fieldName,
+			isRequired,
+			field: {
+				...field,
+				type: info.selectedType
+			},
+			depth: depth + 1,
+			slotType: showSelect ? false : slotType,
+			toolbar: /* @__PURE__ */ jsxs(Fragment, { children: [showSelect && /* @__PURE__ */ jsx("select", {
+				className: "text-xs font-mono",
+				value: info.selectedType,
+				onChange: (e) => {
+					updateInfo({ selectedType: e.target.value });
+				},
+				children: field.type.map((item) => /* @__PURE__ */ jsx("option", {
+					value: item,
+					className: "bg-popover text-popover-foreground",
+					children: item
+				}, item))
+			}), toolbar] })
+		});
+	}
+	const showBn = collapsible && /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: () => setShow((prev) => !prev),
+		className: cn(buttonVariants({
+			size: "icon-xs",
+			variant: "ghost",
+			className: "text-muted-foreground -ms-1"
+		})),
+		children: /* @__PURE__ */ jsx(ChevronDown, { className: cn(show && "rotate-180") })
+	});
+	if (field.type === "object" || info.intersection) return /* @__PURE__ */ jsxs("fieldset", {
+		...props,
+		className: cn("flex flex-col gap-1.5 col-span-full @container", props.className),
+		children: [/* @__PURE__ */ jsxs(FieldLabel, {
+			htmlFor: fieldName,
+			children: [
+				showBn,
+				/* @__PURE__ */ jsx(FieldLabelName, {
+					required: isRequired,
+					children: name
+				}),
+				slotType ?? /* @__PURE__ */ jsx(FieldLabelType, { children: schemaToString(field, schemaContext) }),
+				toolbar
+			]
+		}), show && /* @__PURE__ */ jsx(ObjectInput, {
+			field: info.intersection?.merged ?? field,
+			fieldName,
+			...props,
+			className: cn("rounded-lg border bg-card text-card-foreground p-3 shadow-sm", props.className)
+		})]
+	});
+	if (field.type === "array") return /* @__PURE__ */ jsxs("fieldset", {
+		...props,
+		className: cn("flex flex-col gap-1.5 col-span-full", props.className),
+		children: [/* @__PURE__ */ jsxs(FieldLabel, {
+			htmlFor: fieldName,
+			children: [
+				showBn,
+				/* @__PURE__ */ jsx(FieldLabelName, {
+					required: isRequired,
+					children: name
+				}),
+				slotType ?? /* @__PURE__ */ jsx(FieldLabelType, { children: schemaToString(field, schemaContext) }),
+				toolbar
+			]
+		}), show && /* @__PURE__ */ jsx(ArrayInput, {
+			fieldName,
+			items: field.items ?? anyFields,
+			...props,
+			className: cn("rounded-lg border bg-card text-card-foreground p-3 shadow-sm", props.className)
+		})]
+	});
+	if (!field.type) return /* @__PURE__ */ jsx(FieldSet, {
+		...props,
+		name,
+		fieldName,
+		isRequired,
+		field: anyFields,
+		depth: depth + 1,
+		slotType,
+		toolbar
+	});
+	return /* @__PURE__ */ jsxs("fieldset", {
+		...props,
+		className: cn("flex flex-col gap-1.5", props.className),
+		children: [/* @__PURE__ */ jsxs(FieldLabel, {
+			htmlFor: fieldName,
+			children: [
+				/* @__PURE__ */ jsx(FieldLabelName, {
+					required: isRequired,
+					children: name
+				}),
+				slotType ?? /* @__PURE__ */ jsx(FieldLabelType, { children: schemaToString(field, schemaContext) }),
+				toolbar
+			]
+		}), /* @__PURE__ */ jsx(FieldInput, {
+			field,
+			fieldName,
+			isRequired
+		})]
+	});
+}
+function ArrayInput({ fieldName, items, ...props }) {
+	const name = fieldName.split(".").at(-1) ?? "";
+	const { fields, append, remove } = useFieldArray({ name: fieldName });
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cn("flex flex-col gap-2", props.className),
+		children: [fields.map((item, index) => /* @__PURE__ */ jsx(FieldSet, {
+			name: /* @__PURE__ */ jsxs("span", {
+				className: "text-muted-foreground",
+				children: [
+					name,
+					"[",
+					index,
+					"]"
+				]
+			}),
+			field: items,
+			isRequired: true,
+			fieldName: `${fieldName}.${index}`,
+			toolbar: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Remove Item",
+				className: cn(buttonVariants({
+					variant: "outline",
+					size: "icon-xs"
+				})),
+				onClick: () => remove(index),
+				children: /* @__PURE__ */ jsx(Trash2, {})
+			})
+		}, item.id)), /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: cn(buttonVariants({
+				variant: "secondary",
+				className: "gap-1.5 py-2",
+				size: "sm"
+			})),
+			onClick: () => {
+				append(getDefaultValue(items));
+			},
+			children: [/* @__PURE__ */ jsx(Plus, { className: "size-4" }), "New Item"]
+		})]
+	});
+}
+
+//#endregion
+export { FieldSet };

package/dist/src/components/json-schema-editor/get-default-values.mjs

@@ -0,0 +1,23 @@
+//#region src/components/json-schema-editor/get-default-values.ts
+function getDefaultValue(schema) {
+	if (typeof schema === "boolean") return null;
+	const type = schema.type;
+	if (Array.isArray(type)) return getDefaultValue({
+		...schema,
+		type: type[0]
+	});
+	if (type === "object" && typeof schema === "object") return Object.fromEntries(Object.entries(schema.properties ?? {}).map(([key, prop]) => {
+		return [key, getDefaultValue(prop)];
+	}));
+	if (type === "array") return [];
+	if (type === "null") return null;
+	if (type === "string") {
+		if (typeof schema === "object" && schema.format === "binary") return void 0;
+		return "";
+	}
+	if (type === "number" || type === "integer") return 0;
+	if (type === "boolean") return false;
+}
+
+//#endregion
+export { getDefaultValue };

package/dist/src/components/json-schema-editor/schema.mjs

@@ -0,0 +1,131 @@
+import { getDefaultValue } from "./get-default-values.mjs";
+import { mergeAllOf } from "./utils/merge-schema.mjs";
+import { jsx } from "react/jsx-runtime";
+import { createContext, use, useMemo, useState } from "react";
+import { useFormContext } from "react-hook-form";
+import { Ajv2020 } from "ajv/dist/2020";
+
+//#region src/components/json-schema-editor/schema.tsx
+const SchemaContext = createContext(void 0);
+const anyFields = {
+	type: [
+		"string",
+		"number",
+		"boolean",
+		"array",
+		"object"
+	],
+	items: true,
+	additionalProperties: true
+};
+function SchemaProvider({ schema, readOnly, writeOnly, children }) {
+	const fieldInfoMap = useMemo(() => /* @__PURE__ */ new Map(), []);
+	const ajv = useMemo(() => new Ajv2020({
+		strict: false,
+		validateSchema: false,
+		validateFormats: false,
+		schemas: [schema]
+	}), [schema]);
+	return /* @__PURE__ */ jsx(SchemaContext, {
+		value: useMemo(() => ({
+			schema,
+			fieldInfoMap,
+			ajv,
+			readOnly,
+			writeOnly
+		}), [
+			schema,
+			fieldInfoMap,
+			ajv,
+			readOnly,
+			writeOnly
+		]),
+		children
+	});
+}
+function useSchema() {
+	return use(SchemaContext);
+}
+/**
+* A hook to store dynamic info of a field, such as selected schema of `oneOf`.
+*
+* @param fieldName - field name of form.
+* @param schema - The JSON Schema to generate initial values.
+* @param depth - The depth to avoid duplicated field name with same schema (e.g. nested `oneOf`).
+*/
+function useFieldInfo(fieldName, schema, depth) {
+	const { fieldInfoMap, ajv } = use(SchemaContext);
+	const form = useFormContext();
+	const keyName = `${fieldName}:${depth}`;
+	const [info, setInfo] = useState(() => {
+		const value = form.getValues(fieldName);
+		const initialInfo = fieldInfoMap.get(keyName);
+		if (initialInfo) return initialInfo;
+		const out = { oneOf: -1 };
+		const union = getUnion(schema);
+		if (union) {
+			const [members, field] = union;
+			out.oneOf = members.findIndex((item) => ajv.validate(item, value));
+			if (out.oneOf === -1) out.oneOf = 0;
+			out.unionField = field;
+		}
+		if (Array.isArray(schema.type)) {
+			const types = schema.type;
+			out.selectedType = types.find((type) => {
+				schema.type = type;
+				const match = ajv.validate(schema, value);
+				schema.type = types;
+				return match;
+			}) ?? types.at(0);
+		}
+		if (schema.allOf) {
+			const merged = mergeAllOf(schema);
+			if (typeof merged !== "boolean") out.intersection = { merged };
+		}
+		return out;
+	});
+	fieldInfoMap.set(keyName, info);
+	return {
+		info,
+		updateInfo(value) {
+			const updated = {
+				...info,
+				...value
+			};
+			if (updated.oneOf === info.oneOf && updated.selectedType === info.selectedType) return;
+			setInfo(updated);
+			let valueSchema = schema;
+			if (updated.unionField) valueSchema = schema[updated.unionField][updated.oneOf];
+			else if (updated.selectedType) valueSchema = {
+				...schema,
+				type: updated.selectedType
+			};
+			form.setValue(fieldName, getDefaultValue(valueSchema));
+		}
+	};
+}
+/**
+* Resolve `$ref` in the schema, **not recursive**.
+*/
+function useResolvedSchema(schema) {
+	const { ajv } = use(SchemaContext);
+	return useMemo(() => fallbackAny(dereference(schema, { ajv })), [ajv, schema]);
+}
+function fallbackAny(schema) {
+	return typeof schema === "boolean" ? anyFields : schema;
+}
+function getUnion(schema) {
+	if (schema.anyOf) return [schema.anyOf, "anyOf"];
+	if (schema.oneOf) return [schema.oneOf, "oneOf"];
+}
+/**
+* resolve refs (non-recursive)
+*/
+function dereference(schema, { ajv }) {
+	if (typeof schema === "boolean") return schema;
+	if (schema.$ref) return ajv.getSchema(schema.$ref)?.schema ?? false;
+	return schema;
+}
+
+//#endregion
+export { SchemaProvider, anyFields, dereference, useFieldInfo, useResolvedSchema, useSchema };