@datenlotse/jsonjoy-builder 0.4.0

package/dist/components/SchemaEditor/SchemaPropertyEditor.js

@@ -0,0 +1,249 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronRight, ChevronUp, X } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { Input } from "../ui/input.js";
+import { useTranslation } from "../../hooks/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { asObjectSchema, getSchemaDescription, withObjectSchema } from "../../types/jsonSchema.js";
+import { Badge } from "../ui/badge.js";
+import TypeDropdown from "./TypeDropdown.js";
+import TypeEditor from "./TypeEditor.js";
+const SchemaPropertyEditor = ({ name, schema, required, readOnly = false, parentSchema, validationNode, onDelete, onNameChange, onRequiredChange, onSchemaChange, onMoveUp, onMoveDown, depth = 0 })=>{
+    const t = useTranslation();
+    const [expanded, setExpanded] = useState(false);
+    const [isEditingName, setIsEditingName] = useState(false);
+    const [isEditingDesc, setIsEditingDesc] = useState(false);
+    const [tempName, setTempName] = useState(name);
+    const [tempDesc, setTempDesc] = useState(getSchemaDescription(schema));
+    const type = withObjectSchema(schema, (s)=>s.type || "object", "object");
+    const defaultValue = useMemo(()=>{
+        const objSchema = asObjectSchema(schema);
+        return void 0 !== objSchema.default ? String(objSchema.default) : "";
+    }, [
+        schema
+    ]);
+    const [tempDefault, setTempDefault] = useState(defaultValue);
+    useEffect(()=>{
+        setTempName(name);
+        setTempDesc(getSchemaDescription(schema));
+        setTempDefault(defaultValue);
+    }, [
+        name,
+        schema,
+        defaultValue
+    ]);
+    const handleNameSubmit = ()=>{
+        const trimmedName = tempName.trim();
+        if (trimmedName && trimmedName !== name) onNameChange(trimmedName);
+        else setTempName(name);
+        setIsEditingName(false);
+    };
+    const handleDescSubmit = ()=>{
+        const trimmedDesc = tempDesc.trim();
+        if (trimmedDesc !== getSchemaDescription(schema)) onSchemaChange({
+            ...asObjectSchema(schema),
+            description: trimmedDesc || void 0
+        });
+        else setTempDesc(getSchemaDescription(schema));
+        setIsEditingDesc(false);
+    };
+    const handleSchemaUpdate = (updatedSchema)=>{
+        const description = getSchemaDescription(schema);
+        const currentDefault = asObjectSchema(schema).default;
+        onSchemaChange({
+            ...updatedSchema,
+            description: description || void 0,
+            default: currentDefault
+        });
+    };
+    const handleDefaultSubmit = ()=>{
+        const trimmedDefault = tempDefault.trim();
+        const objSchema = asObjectSchema(schema);
+        const currentDefault = objSchema.default;
+        if ("" === trimmedDefault) {
+            if (void 0 !== currentDefault) {
+                const { default: _, ...rest } = objSchema;
+                onSchemaChange(rest);
+            }
+        } else {
+            let parsedValue = trimmedDefault;
+            if ("number" === type || "integer" === type) {
+                parsedValue = Number(trimmedDefault);
+                if (Number.isNaN(parsedValue)) parsedValue = trimmedDefault;
+            } else if ("boolean" === type) parsedValue = "true" === trimmedDefault.toLowerCase() ? true : "false" === trimmedDefault.toLowerCase() ? false : trimmedDefault;
+            else if ("null" === type) parsedValue = null;
+            if (JSON.stringify(currentDefault) !== JSON.stringify(parsedValue)) onSchemaChange({
+                ...objSchema,
+                default: parsedValue
+            });
+        }
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn("mb-2 animate-in rounded-lg border transition-all duration-200", depth > 0 && "ml-0 sm:ml-4 border-l border-l-border/40"),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "relative json-field-row justify-between group",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-2 grow min-w-0",
+                        children: [
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                className: "text-muted-foreground hover:text-foreground transition-colors",
+                                onClick: ()=>setExpanded(!expanded),
+                                "aria-label": expanded ? t.collapse : t.expand,
+                                children: expanded ? /*#__PURE__*/ jsx(ChevronDown, {
+                                    size: 18
+                                }) : /*#__PURE__*/ jsx(ChevronRight, {
+                                    size: 18
+                                })
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "flex items-center gap-2 grow min-w-0 overflow-visible",
+                                children: [
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: "flex items-center gap-2 min-w-0 grow overflow-visible",
+                                        children: [
+                                            !readOnly && isEditingName ? /*#__PURE__*/ jsx(Input, {
+                                                value: tempName,
+                                                onChange: (e)=>setTempName(e.target.value),
+                                                onBlur: handleNameSubmit,
+                                                onKeyDown: (e)=>"Enter" === e.key && handleNameSubmit(),
+                                                className: "h-8 text-sm font-medium min-w-[120px] max-w-full z-10",
+                                                autoFocus: true,
+                                                onFocus: (e)=>e.target.select()
+                                            }) : /*#__PURE__*/ jsx("button", {
+                                                type: "button",
+                                                onClick: ()=>setIsEditingName(true),
+                                                onKeyDown: (e)=>"Enter" === e.key && setIsEditingName(true),
+                                                className: "json-field-label font-medium cursor-text px-2 py-0.5 -mx-0.5 rounded-sm hover:bg-secondary/30 hover:shadow-xs hover:ring-1 hover:ring-ring/20 transition-all text-left truncate min-w-[80px] max-w-[50%]",
+                                                children: name
+                                            }),
+                                            !readOnly && isEditingDesc ? /*#__PURE__*/ jsx(Input, {
+                                                value: tempDesc,
+                                                onChange: (e)=>setTempDesc(e.target.value),
+                                                onBlur: handleDescSubmit,
+                                                onKeyDown: (e)=>"Enter" === e.key && handleDescSubmit(),
+                                                placeholder: t.propertyDescriptionPlaceholder,
+                                                className: "h-8 text-xs text-muted-foreground italic flex-1 min-w-[150px] z-10",
+                                                autoFocus: true,
+                                                onFocus: (e)=>e.target.select()
+                                            }) : tempDesc ? /*#__PURE__*/ jsx("button", {
+                                                type: "button",
+                                                onClick: ()=>setIsEditingDesc(true),
+                                                onKeyDown: (e)=>"Enter" === e.key && setIsEditingDesc(true),
+                                                className: "text-xs text-muted-foreground italic cursor-text px-2 py-0.5 -mx-0.5 rounded-sm hover:bg-secondary/30 hover:shadow-xs hover:ring-1 hover:ring-ring/20 transition-all text-left truncate flex-1 max-w-[40%] mr-2",
+                                                children: tempDesc
+                                            }) : /*#__PURE__*/ jsx("button", {
+                                                type: "button",
+                                                onClick: ()=>setIsEditingDesc(true),
+                                                onKeyDown: (e)=>"Enter" === e.key && setIsEditingDesc(true),
+                                                className: "text-xs text-muted-foreground/50 italic cursor-text px-2 py-0.5 -mx-0.5 rounded-sm hover:bg-secondary/30 hover:shadow-xs hover:ring-1 hover:ring-ring/20 transition-all opacity-0 group-hover:opacity-100 text-left truncate flex-1 max-w-[40%] mr-2",
+                                                children: t.propertyDescriptionButton
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: "flex items-center gap-2 justify-end shrink-0",
+                                        children: [
+                                            /*#__PURE__*/ jsx(TypeDropdown, {
+                                                value: type,
+                                                readOnly: readOnly,
+                                                onChange: (newType)=>{
+                                                    onSchemaChange({
+                                                        ...asObjectSchema(schema),
+                                                        type: newType
+                                                    });
+                                                }
+                                            }),
+                                            /*#__PURE__*/ jsx("button", {
+                                                type: "button",
+                                                onClick: ()=>!readOnly && onRequiredChange(!required),
+                                                className: cn("text-xs px-2 py-1 rounded-md font-medium min-w-[80px] text-center cursor-pointer hover:shadow-xs hover:ring-2 hover:ring-ring/30 active:scale-95 transition-all whitespace-nowrap", required ? "bg-red-50 text-red-500" : "bg-secondary text-muted-foreground"),
+                                                children: required ? t.propertyRequired : t.propertyOptional
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    validationNode?.cumulativeChildrenErrors > 0 && /*#__PURE__*/ jsx(Badge, {
+                        className: "h-5 min-w-5 rounded-full px-1 font-mono tabular-nums justify-center",
+                        variant: "destructive",
+                        children: validationNode.cumulativeChildrenErrors
+                    }),
+                    !readOnly && /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-1 text-muted-foreground",
+                        children: [
+                            onMoveUp && /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                onClick: onMoveUp,
+                                className: "p-1 rounded-md hover:bg-secondary hover:text-foreground transition-colors opacity-0 group-hover:opacity-100",
+                                "aria-label": t.propertyMoveUp,
+                                children: /*#__PURE__*/ jsx(ChevronUp, {
+                                    size: 16
+                                })
+                            }),
+                            onMoveDown && /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                onClick: onMoveDown,
+                                className: "p-1 rounded-md hover:bg-secondary hover:text-foreground transition-colors opacity-0 group-hover:opacity-100",
+                                "aria-label": t.propertyMoveDown,
+                                children: /*#__PURE__*/ jsx(ChevronDown, {
+                                    size: 16
+                                })
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                onClick: onDelete,
+                                className: "p-1 rounded-md hover:bg-secondary hover:text-destructive transition-colors opacity-0 group-hover:opacity-100",
+                                "aria-label": t.propertyDelete,
+                                children: /*#__PURE__*/ jsx(X, {
+                                    size: 16
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            expanded && /*#__PURE__*/ jsxs("div", {
+                className: "pt-1 pb-2 px-2 sm:px-3 animate-in space-y-3",
+                children: [
+                    readOnly && tempDesc && /*#__PURE__*/ jsx("p", {
+                        className: "pb-2",
+                        children: tempDesc
+                    }),
+                    !readOnly && "object" !== type && /*#__PURE__*/ jsxs("div", {
+                        className: "space-y-1",
+                        children: [
+                            /*#__PURE__*/ jsx("label", {
+                                className: "text-xs font-medium text-muted-foreground",
+                                children: t.propertyDefaultLabel
+                            }),
+                            /*#__PURE__*/ jsx(Input, {
+                                value: tempDefault,
+                                onChange: (e)=>setTempDefault(e.target.value),
+                                onBlur: handleDefaultSubmit,
+                                onKeyDown: (e)=>"Enter" === e.key && handleDefaultSubmit(),
+                                placeholder: t.propertyDefaultPlaceholder,
+                                className: "h-8 text-sm"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(TypeEditor, {
+                        schema: schema,
+                        readOnly: readOnly,
+                        parentSchema: parentSchema,
+                        propertyName: name,
+                        validationNode: validationNode,
+                        onChange: handleSchemaUpdate,
+                        depth: depth + 1
+                    })
+                ]
+            })
+        ]
+    });
+};
+const SchemaEditor_SchemaPropertyEditor = SchemaPropertyEditor;
+export { SchemaPropertyEditor, SchemaEditor_SchemaPropertyEditor as default };

package/dist/components/SchemaEditor/SchemaTypeSelector.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "../../hooks/use-translation.js";
+import { cn } from "../../lib/utils.js";
+const typeOptions = [
+    {
+        id: "string",
+        label: "fieldTypeTextLabel",
+        description: "fieldTypeTextDescription"
+    },
+    {
+        id: "number",
+        label: "fieldTypeNumberLabel",
+        description: "fieldTypeNumberDescription"
+    },
+    {
+        id: "boolean",
+        label: "fieldTypeBooleanLabel",
+        description: "fieldTypeBooleanDescription"
+    },
+    {
+        id: "object",
+        label: "fieldTypeObjectLabel",
+        description: "fieldTypeObjectDescription"
+    },
+    {
+        id: "array",
+        label: "fieldTypeArrayLabel",
+        description: "fieldTypeArrayDescription"
+    }
+];
+const SchemaTypeSelector = ({ id, value, onChange })=>{
+    const t = useTranslation();
+    return /*#__PURE__*/ jsx("div", {
+        id: id,
+        className: "grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-2",
+        children: typeOptions.map((type)=>/*#__PURE__*/ jsxs("button", {
+                type: "button",
+                title: t[type.description],
+                className: cn("p-2.5 rounded-lg border-2 text-left transition-all duration-200", value === type.id ? "border-primary bg-primary/5 shadow-xs" : "border-border hover:border-primary/30 hover:bg-secondary"),
+                onClick: ()=>onChange(type.id),
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "font-medium text-sm",
+                        children: t[type.label]
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "text-xs text-muted-foreground line-clamp-1",
+                        children: t[type.description]
+                    })
+                ]
+            }, type.id))
+    });
+};
+const SchemaEditor_SchemaTypeSelector = SchemaTypeSelector;
+export { SchemaEditor_SchemaTypeSelector as default };

package/dist/components/SchemaEditor/SchemaVisualEditor.js

@@ -0,0 +1,77 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "../../hooks/use-translation.js";
+import { createFieldSchema, renameObjectProperty, reorderObjectProperty, updateObjectProperty, updatePropertyRequired } from "../../lib/schemaEditor.js";
+import { asObjectSchema, isBooleanSchema } from "../../types/jsonSchema.js";
+import AddFieldButton from "./AddFieldButton.js";
+import SchemaFieldList from "./SchemaFieldList.js";
+const SchemaVisualEditor = ({ schema, onChange, readOnly = false })=>{
+    const t = useTranslation();
+    const handleAddField = (newField)=>{
+        const fieldSchema = createFieldSchema(newField);
+        let newSchema = updateObjectProperty(asObjectSchema(schema), newField.name, fieldSchema);
+        if (newField.required) newSchema = updatePropertyRequired(newSchema, newField.name, true);
+        onChange(newSchema);
+    };
+    const handleEditField = (name, updatedField)=>{
+        const fieldSchema = createFieldSchema(updatedField);
+        let newSchema = asObjectSchema(schema);
+        if (name !== updatedField.name) {
+            newSchema = renameObjectProperty(newSchema, name, updatedField.name);
+            newSchema = updateObjectProperty(newSchema, updatedField.name, fieldSchema);
+        } else newSchema = updateObjectProperty(newSchema, name, fieldSchema);
+        newSchema = updatePropertyRequired(newSchema, updatedField.name, updatedField.required || false);
+        onChange(newSchema);
+    };
+    const handleDeleteField = (name)=>{
+        if (isBooleanSchema(schema) || !schema.properties) return;
+        const { [name]: _, ...remainingProps } = schema.properties;
+        const newSchema = {
+            ...schema,
+            properties: remainingProps
+        };
+        if (newSchema.required) newSchema.required = newSchema.required.filter((field)=>field !== name);
+        if (newSchema.$propertyOrder) newSchema.$propertyOrder = newSchema.$propertyOrder.filter((field)=>field !== name);
+        onChange(newSchema);
+    };
+    const handleReorderField = (name, direction)=>{
+        const newSchema = reorderObjectProperty(asObjectSchema(schema), name, direction);
+        onChange(newSchema);
+    };
+    const hasFields = !isBooleanSchema(schema) && schema.properties && Object.keys(schema.properties).length > 0;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "p-4 h-full flex flex-col overflow-auto jsonjoy",
+        children: [
+            !readOnly && /*#__PURE__*/ jsx("div", {
+                className: "mb-6 shrink-0",
+                children: /*#__PURE__*/ jsx(AddFieldButton, {
+                    onAddField: handleAddField
+                })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "grow overflow-auto",
+                children: hasFields ? /*#__PURE__*/ jsx(SchemaFieldList, {
+                    schema: schema,
+                    readOnly: readOnly,
+                    onAddField: handleAddField,
+                    onEditField: handleEditField,
+                    onDeleteField: handleDeleteField,
+                    onReorderField: handleReorderField
+                }) : /*#__PURE__*/ jsxs("div", {
+                    className: "text-center py-10 text-muted-foreground",
+                    children: [
+                        /*#__PURE__*/ jsx("p", {
+                            className: "mb-3",
+                            children: t.visualEditorNoFieldsHint1
+                        }),
+                        /*#__PURE__*/ jsx("p", {
+                            className: "text-sm",
+                            children: t.visualEditorNoFieldsHint2
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+const SchemaEditor_SchemaVisualEditor = SchemaVisualEditor;
+export { SchemaEditor_SchemaVisualEditor as default };

package/dist/components/SchemaEditor/TypeDropdown.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "../../hooks/use-translation.js";
+import { cn, getTypeColor, getTypeLabel } from "../../lib/utils.js";
+const typeOptions = [
+    "string",
+    "number",
+    "boolean",
+    "object",
+    "array",
+    "null"
+];
+const TypeDropdown = ({ value, onChange, className, readOnly })=>{
+    const t = useTranslation();
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    useEffect(()=>{
+        const handleClickOutside = (event)=>{
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) setIsOpen(false);
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return ()=>{
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "relative",
+        ref: dropdownRef,
+        children: [
+            /*#__PURE__*/ jsxs("button", {
+                type: "button",
+                className: cn("text-xs px-3.5 py-1.5 rounded-md font-medium text-center flex items-center justify-between", getTypeColor(value), "hover:shadow-xs hover:ring-1 hover:ring-ring/30 active:scale-95 transition-all", readOnly ? "" : "w-[92px]", className),
+                onClick: ()=>!readOnly && setIsOpen(!isOpen),
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        children: getTypeLabel(t, value)
+                    }),
+                    !readOnly && /*#__PURE__*/ jsx(ChevronDown, {
+                        size: 14,
+                        className: "ml-1"
+                    })
+                ]
+            }),
+            isOpen && /*#__PURE__*/ jsx("div", {
+                className: "absolute z-50 mt-1 w-[140px] rounded-md border bg-popover shadow-lg animate-in fade-in-50 zoom-in-95",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "py-1",
+                    children: typeOptions.map((type)=>/*#__PURE__*/ jsxs("button", {
+                            type: "button",
+                            className: cn("w-full text-left px-3 py-1.5 text-xs flex items-center justify-between", "hover:bg-muted/50 transition-colors", value === type && "font-medium"),
+                            onClick: ()=>{
+                                onChange(type);
+                                setIsOpen(false);
+                            },
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    className: cn("px-2 py-0.5 rounded", getTypeColor(type)),
+                                    children: getTypeLabel(t, type)
+                                }),
+                                value === type && /*#__PURE__*/ jsx(Check, {
+                                    size: 14
+                                })
+                            ]
+                        }, type))
+                })
+            })
+        ]
+    });
+};
+const SchemaEditor_TypeDropdown = TypeDropdown;
+export { TypeDropdown, SchemaEditor_TypeDropdown as default };

package/dist/components/SchemaEditor/TypeEditor.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Suspense, lazy } from "react";
+import { useTranslation } from "../../hooks/use-translation.js";
+import { withObjectSchema } from "../../types/jsonSchema.js";
+const StringEditor = /*#__PURE__*/ lazy(()=>import("./types/StringEditor.js"));
+const NumberEditor = /*#__PURE__*/ lazy(()=>import("./types/NumberEditor.js"));
+const BooleanEditor = /*#__PURE__*/ lazy(()=>import("./types/BooleanEditor.js"));
+const ObjectEditor = /*#__PURE__*/ lazy(()=>import("./types/ObjectEditor.js"));
+const ArrayEditor = /*#__PURE__*/ lazy(()=>import("./types/ArrayEditor.js"));
+const TypeEditor = ({ schema, validationNode, onChange, depth = 0, readOnly = false, parentSchema, propertyName })=>{
+    const t = useTranslation();
+    const type = withObjectSchema(schema, (s)=>s.type || "object", "string");
+    return /*#__PURE__*/ jsxs(Suspense, {
+        fallback: /*#__PURE__*/ jsx("div", {
+            children: t.schemaEditorLoading
+        }),
+        children: [
+            "string" === type && /*#__PURE__*/ jsx(StringEditor, {
+                readOnly: readOnly,
+                schema: schema,
+                onChange: onChange,
+                depth: depth,
+                parentSchema: parentSchema,
+                propertyName: propertyName,
+                validationNode: validationNode
+            }),
+            "number" === type && /*#__PURE__*/ jsx(NumberEditor, {
+                readOnly: readOnly,
+                schema: schema,
+                onChange: onChange,
+                depth: depth,
+                parentSchema: parentSchema,
+                propertyName: propertyName,
+                validationNode: validationNode
+            }),
+            "integer" === type && /*#__PURE__*/ jsx(NumberEditor, {
+                readOnly: readOnly,
+                schema: schema,
+                onChange: onChange,
+                depth: depth,
+                parentSchema: parentSchema,
+                propertyName: propertyName,
+                validationNode: validationNode,
+                integer: true
+            }),
+            "boolean" === type && /*#__PURE__*/ jsx(BooleanEditor, {
+                readOnly: readOnly,
+                schema: schema,
+                onChange: onChange,
+                depth: depth,
+                validationNode: validationNode
+            }),
+            "object" === type && /*#__PURE__*/ jsx(ObjectEditor, {
+                readOnly: readOnly,
+                schema: schema,
+                onChange: onChange,
+                depth: depth,
+                validationNode: validationNode
+            }),
+            "array" === type && /*#__PURE__*/ jsx(ArrayEditor, {
+                readOnly: readOnly,
+                schema: schema,
+                onChange: onChange,
+                depth: depth,
+                validationNode: validationNode
+            })
+        ]
+    });
+};
+const SchemaEditor_TypeEditor = TypeEditor;
+export { SchemaEditor_TypeEditor as default };