@fuma-content/studio 1.0.0 → 1.0.2

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

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

@@ -1,23 +0,0 @@
-//#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

@@ -1,131 +0,0 @@
-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 };