@datenlotse/jsonjoy-builder 0.4.0

package/dist/components/SchemaEditor/JsonSchemaEditor.js

@@ -0,0 +1,166 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Maximize2 } from "lucide-react";
+import { useRef, useState } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs.js";
+import { useTranslation } from "../../hooks/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import JsonSchemaVisualizer from "./JsonSchemaVisualizer.js";
+import SchemaVisualEditor from "./SchemaVisualEditor.js";
+const JsonSchemaEditor = ({ schema = {
+    type: "object"
+}, readOnly = false, setSchema, className })=>{
+    const handleSchemaChange = (newSchema)=>{
+        setSchema(newSchema);
+    };
+    const t = useTranslation();
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [leftPanelWidth, setLeftPanelWidth] = useState(50);
+    const resizeRef = useRef(null);
+    const containerRef = useRef(null);
+    const isDraggingRef = useRef(false);
+    const toggleFullscreen = ()=>{
+        setIsFullscreen(!isFullscreen);
+    };
+    const fullscreenClass = isFullscreen ? "fixed inset-0 z-50 bg-background" : "";
+    const handleMouseDown = (e)=>{
+        e.preventDefault();
+        isDraggingRef.current = true;
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+    };
+    const handleMouseMove = (e)=>{
+        if (!isDraggingRef.current || !containerRef.current) return;
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const newWidth = (e.clientX - containerRect.left) / containerRect.width * 100;
+        if (newWidth >= 20 && newWidth <= 80) setLeftPanelWidth(newWidth);
+    };
+    const handleMouseUp = ()=>{
+        isDraggingRef.current = false;
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn("json-editor-container w-full", fullscreenClass, className, "jsonjoy"),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "block lg:hidden w-full",
+                children: /*#__PURE__*/ jsxs(Tabs, {
+                    defaultValue: "visual",
+                    className: "w-full",
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "flex items-center justify-between px-4 py-3 border-b w-full",
+                            children: [
+                                /*#__PURE__*/ jsx("h3", {
+                                    className: "font-medium",
+                                    children: t.schemaEditorTitle
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "flex items-center gap-2",
+                                    children: [
+                                        /*#__PURE__*/ jsx("button", {
+                                            type: "button",
+                                            onClick: toggleFullscreen,
+                                            className: "p-1.5 rounded-md hover:bg-secondary transition-colors",
+                                            "aria-label": t.schemaEditorToggleFullscreen,
+                                            children: /*#__PURE__*/ jsx(Maximize2, {
+                                                size: 16
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsxs(TabsList, {
+                                            className: "grid grid-cols-2 w-[200px]",
+                                            children: [
+                                                /*#__PURE__*/ jsx(TabsTrigger, {
+                                                    value: "visual",
+                                                    children: t.schemaEditorEditModeVisual
+                                                }),
+                                                /*#__PURE__*/ jsx(TabsTrigger, {
+                                                    value: "json",
+                                                    children: t.schemaEditorEditModeJson
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(TabsContent, {
+                            value: "visual",
+                            className: cn("focus:outline-hidden w-full", isFullscreen ? "h-screen" : "h-[500px]"),
+                            children: /*#__PURE__*/ jsx(SchemaVisualEditor, {
+                                readOnly: readOnly,
+                                schema: schema,
+                                onChange: handleSchemaChange
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(TabsContent, {
+                            value: "json",
+                            className: cn("focus:outline-hidden w-full", isFullscreen ? "h-screen" : "h-[500px]"),
+                            children: /*#__PURE__*/ jsx(JsonSchemaVisualizer, {
+                                schema: schema,
+                                onChange: handleSchemaChange
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                ref: containerRef,
+                className: cn("hidden lg:flex lg:flex-col w-full", isFullscreen ? "h-screen" : "h-[600px]"),
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center justify-between px-4 py-3 border-b w-full shrink-0",
+                        children: [
+                            /*#__PURE__*/ jsx("h3", {
+                                className: "font-medium",
+                                children: t.schemaEditorTitle
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                onClick: toggleFullscreen,
+                                className: "p-1.5 rounded-md hover:bg-secondary transition-colors",
+                                "aria-label": t.schemaEditorToggleFullscreen,
+                                children: /*#__PURE__*/ jsx(Maximize2, {
+                                    size: 16
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex flex-row w-full grow min-h-0",
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: "h-full min-h-0",
+                                style: {
+                                    width: `${leftPanelWidth}%`
+                                },
+                                children: /*#__PURE__*/ jsx(SchemaVisualEditor, {
+                                    readOnly: readOnly,
+                                    schema: schema,
+                                    onChange: handleSchemaChange
+                                })
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                ref: resizeRef,
+                                className: "w-1 bg-border hover:bg-primary cursor-col-resize shrink-0",
+                                onMouseDown: handleMouseDown
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: "h-full min-h-0",
+                                style: {
+                                    width: `${100 - leftPanelWidth}%`
+                                },
+                                children: /*#__PURE__*/ jsx(JsonSchemaVisualizer, {
+                                    schema: schema,
+                                    onChange: handleSchemaChange
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+const SchemaEditor_JsonSchemaEditor = JsonSchemaEditor;
+export { SchemaEditor_JsonSchemaEditor as default };

package/dist/components/SchemaEditor/JsonSchemaVisualizer.js

@@ -0,0 +1,96 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react from "@monaco-editor/react";
+import { Download, FileJson, Loader2 } from "lucide-react";
+import { useRef } from "react";
+import { useMonacoTheme } from "../../hooks/use-monaco-theme.js";
+import { useTranslation } from "../../hooks/use-translation.js";
+import { cn } from "../../lib/utils.js";
+const JsonSchemaVisualizer = ({ schema, className, onChange })=>{
+    const editorRef = useRef(null);
+    const { currentTheme, defineMonacoThemes, configureJsonDefaults, defaultEditorOptions } = useMonacoTheme();
+    const t = useTranslation();
+    const handleBeforeMount = (monaco)=>{
+        defineMonacoThemes(monaco);
+        configureJsonDefaults(monaco);
+    };
+    const handleEditorDidMount = (editor)=>{
+        editorRef.current = editor;
+        editor.focus();
+    };
+    const handleEditorChange = (value)=>{
+        if (!value) return;
+        try {
+            const parsedJson = JSON.parse(value);
+            if (onChange) onChange(parsedJson);
+        } catch (_error) {}
+    };
+    const handleDownload = ()=>{
+        const content = JSON.stringify(schema, null, 2);
+        const blob = new Blob([
+            content
+        ], {
+            type: "application/json"
+        });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = t.visualizerDownloadFileName;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn("relative overflow-hidden h-full flex flex-col", className, "jsonjoy"),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center justify-between bg-secondary/80 backdrop-blur-xs px-4 py-2 border-b shrink-0",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ jsx(FileJson, {
+                                size: 18
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "font-medium text-sm",
+                                children: t.visualizerSource
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        onClick: handleDownload,
+                        className: "p-1.5 hover:bg-secondary rounded-md transition-colors",
+                        title: t.visualizerDownloadTitle,
+                        children: /*#__PURE__*/ jsx(Download, {
+                            size: 16
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "grow flex min-h-0",
+                children: /*#__PURE__*/ jsx(react, {
+                    height: "100%",
+                    defaultLanguage: "json",
+                    value: JSON.stringify(schema, null, 2),
+                    onChange: handleEditorChange,
+                    beforeMount: handleBeforeMount,
+                    onMount: handleEditorDidMount,
+                    className: "monaco-editor-container w-full h-full",
+                    loading: /*#__PURE__*/ jsx("div", {
+                        className: "flex items-center justify-center h-full w-full bg-secondary/30",
+                        children: /*#__PURE__*/ jsx(Loader2, {
+                            className: "h-6 w-6 animate-spin"
+                        })
+                    }),
+                    options: defaultEditorOptions,
+                    theme: currentTheme
+                })
+            })
+        ]
+    });
+};
+const SchemaEditor_JsonSchemaVisualizer = JsonSchemaVisualizer;
+export { SchemaEditor_JsonSchemaVisualizer as default };

package/dist/components/SchemaEditor/SchemaField.js

@@ -0,0 +1,104 @@
+import { jsx } from "react/jsx-runtime";
+import react, { Suspense } from "react";
+import { useTranslation } from "../../hooks/use-translation.js";
+import { asObjectSchema, getSchemaDescription, withObjectSchema } from "../../types/jsonSchema.js";
+import SchemaPropertyEditor from "./SchemaPropertyEditor.js";
+const SchemaField = (props)=>{
+    const { name, schema, required = false, onDelete, onEdit, depth = 0, readOnly = false } = props;
+    const handleNameChange = (newName)=>{
+        if (newName === name) return;
+        const type = withObjectSchema(schema, (s)=>s.type || "object", "object");
+        const description = getSchemaDescription(schema);
+        onEdit({
+            name: newName,
+            type: Array.isArray(type) ? type[0] : type,
+            description,
+            required,
+            validation: asObjectSchema(schema)
+        });
+    };
+    const handleRequiredChange = (isRequired)=>{
+        if (isRequired === required) return;
+        const type = withObjectSchema(schema, (s)=>s.type || "object", "object");
+        const description = getSchemaDescription(schema);
+        onEdit({
+            name,
+            type: Array.isArray(type) ? type[0] : type,
+            description,
+            required: isRequired,
+            validation: asObjectSchema(schema)
+        });
+    };
+    const handleSchemaChange = (newSchema)=>{
+        const type = newSchema.type || "object";
+        const description = newSchema.description || "";
+        onEdit({
+            name,
+            type: Array.isArray(type) ? type[0] : type,
+            description,
+            required,
+            validation: newSchema
+        });
+    };
+    return /*#__PURE__*/ jsx(SchemaPropertyEditor, {
+        name: name,
+        readOnly: readOnly,
+        schema: schema,
+        required: required,
+        onDelete: onDelete,
+        onNameChange: handleNameChange,
+        onRequiredChange: handleRequiredChange,
+        onSchemaChange: handleSchemaChange,
+        depth: depth
+    });
+};
+const SchemaEditor_SchemaField = SchemaField;
+const ExpandButton = ({ expanded, onClick })=>{
+    const t = useTranslation();
+    const ChevronDown = /*#__PURE__*/ react.lazy(()=>import("lucide-react").then((mod)=>({
+                default: mod.ChevronDown
+            })));
+    const ChevronRight = /*#__PURE__*/ react.lazy(()=>import("lucide-react").then((mod)=>({
+                default: mod.ChevronRight
+            })));
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        className: "text-muted-foreground hover:text-foreground transition-colors",
+        onClick: onClick,
+        "aria-label": expanded ? t.collapse : t.expand,
+        children: /*#__PURE__*/ jsx(Suspense, {
+            fallback: /*#__PURE__*/ jsx("div", {
+                className: "w-[18px] h-[18px]"
+            }),
+            children: expanded ? /*#__PURE__*/ jsx(ChevronDown, {
+                size: 18
+            }) : /*#__PURE__*/ jsx(ChevronRight, {
+                size: 18
+            })
+        })
+    });
+};
+const FieldActions = ({ onDelete })=>{
+    const t = useTranslation();
+    const X = /*#__PURE__*/ react.lazy(()=>import("lucide-react").then((mod)=>({
+                default: mod.X
+            })));
+    return /*#__PURE__*/ jsx("div", {
+        className: "flex items-center gap-1 text-muted-foreground",
+        children: /*#__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.fieldDelete,
+            children: /*#__PURE__*/ jsx(Suspense, {
+                fallback: /*#__PURE__*/ jsx("div", {
+                    className: "w-[16px] h-[16px]"
+                }),
+                children: /*#__PURE__*/ jsx(X, {
+                    size: 16
+                })
+            })
+        })
+    });
+};
+export { ExpandButton, FieldActions, SchemaEditor_SchemaField as default };

package/dist/components/SchemaEditor/SchemaFieldList.js

@@ -0,0 +1,84 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useTranslation } from "../../hooks/use-translation.js";
+import { getSchemaProperties } from "../../lib/schemaEditor.js";
+import { buildValidationTree } from "../../types/validation.js";
+import SchemaPropertyEditor from "./SchemaPropertyEditor.js";
+const SchemaFieldList = ({ schema, onEditField, onDeleteField, onReorderField, readOnly = false })=>{
+    const t = useTranslation();
+    const properties = getSchemaProperties(schema);
+    const getValidSchemaType = (propSchema)=>{
+        if ("boolean" == typeof propSchema) return "object";
+        const type = propSchema.type;
+        if (Array.isArray(type)) return type[0] || "object";
+        return type || "object";
+    };
+    const handleNameChange = (oldName, newName)=>{
+        const property = properties.find((prop)=>prop.name === oldName);
+        if (!property) return;
+        const propSchemaObj = "boolean" == typeof property.schema ? {
+            type: "object"
+        } : property.schema;
+        onEditField(oldName, {
+            name: newName,
+            type: getValidSchemaType(property.schema),
+            description: propSchemaObj.description || "",
+            required: property.required,
+            default: propSchemaObj.default,
+            validation: propSchemaObj
+        });
+    };
+    const handleRequiredChange = (name, required)=>{
+        const property = properties.find((prop)=>prop.name === name);
+        if (!property) return;
+        const propSchemaObj = "boolean" == typeof property.schema ? {
+            type: "object"
+        } : property.schema;
+        onEditField(name, {
+            name,
+            type: getValidSchemaType(property.schema),
+            description: propSchemaObj.description || "",
+            required,
+            default: propSchemaObj.default,
+            validation: propSchemaObj
+        });
+    };
+    const handleSchemaChange = (name, updatedSchema)=>{
+        const property = properties.find((prop)=>prop.name === name);
+        if (!property) return;
+        const type = updatedSchema.type || "object";
+        const validType = Array.isArray(type) ? type[0] || "object" : type;
+        onEditField(name, {
+            name,
+            type: validType,
+            description: updatedSchema.description || "",
+            required: property.required,
+            default: updatedSchema.default,
+            validation: updatedSchema
+        });
+    };
+    const validationTree = useMemo(()=>buildValidationTree(schema, t), [
+        schema,
+        t
+    ]);
+    const parentSchema = "boolean" == typeof schema ? void 0 : schema;
+    return /*#__PURE__*/ jsx("div", {
+        className: "space-y-2 animate-in",
+        children: properties.map((property, index)=>/*#__PURE__*/ jsx(SchemaPropertyEditor, {
+                name: property.name,
+                schema: property.schema,
+                required: property.required,
+                parentSchema: parentSchema,
+                validationNode: validationTree.children[property.name] ?? void 0,
+                onDelete: ()=>onDeleteField(property.name),
+                onNameChange: (newName)=>handleNameChange(property.name, newName),
+                onRequiredChange: (required)=>handleRequiredChange(property.name, required),
+                onSchemaChange: (schema)=>handleSchemaChange(property.name, schema),
+                onMoveUp: onReorderField && index > 0 ? ()=>onReorderField(property.name, "up") : void 0,
+                onMoveDown: onReorderField && index < properties.length - 1 ? ()=>onReorderField(property.name, "down") : void 0,
+                readOnly: readOnly
+            }, property.name))
+    });
+};
+const SchemaEditor_SchemaFieldList = SchemaFieldList;
+export { SchemaEditor_SchemaFieldList as default };