@vertesia/ui 0.56.0 → 0.57.0

package/src/widgets/json-view/JSONCode.tsx

@@ -0,0 +1,176 @@
+
+import { ObjectKey, ObjectVisitor, ObjectWalker } from "@vertesia/json";
+import { useEffect, useState } from "react";
+
+const st_code = "bg-gray-100 dark:bg-slate-800 whitespace-pre-wrap p-4 rounded-lg font-mono";
+const st_punct = "text-pink-500 dark:text-pink-400";
+const st_symbol = "text-purple-500 dark:text-purple-400";
+const st_number = "text-green-500 dark:text-green-400";
+const st_string = "text-orange-500 dark:text-orange-400";
+const st_key = "text-blue-500 dark:text-blue-400";
+
+interface JsonCodeClassMap {
+    code: string,
+    comma: string,
+    assign: string,
+    startObject: string,
+    endObject: string,
+    startArray: string,
+    endArray: string,
+    boolean: string,
+    null: string,
+    key: string,
+    index: string,
+    string: string,
+    number: string,
+}
+
+const defaultClassMap: JsonCodeClassMap = {
+    code: st_code,
+    comma: st_punct,
+    assign: st_punct,
+    startObject: st_punct,
+    endObject: st_punct,
+    startArray: st_punct,
+    endArray: st_punct,
+    boolean: st_symbol,
+    null: st_symbol,
+    key: st_key,
+    index: st_key,
+    string: st_string,
+    number: st_number,
+}
+
+abstract class Block {
+    result: string[] = [];
+
+    constructor(public renderer: JsonRenderer, public parent: Block | undefined, public key: ObjectKey, public indent: string) {
+    }
+
+    get classMap() {
+        return this.renderer.classMap;
+    }
+
+    writeKey(key: ObjectKey) {
+        const type = typeof key;
+        if (type === 'string') {
+            if (this.result.length > 0) {
+                this.result.push(`<span class='${this.classMap.comma}'>,\n</span>`);
+            }
+            this.indent && this.result.push(this.indent);
+            this.result.push(`<span class="${this.classMap.key}">"${key}"</span><span class='${this.classMap.assign}'>: </span>`);
+        } else if (type === 'number') {
+            if (this.result.length > 0) {
+                this.result.push(`<span class='${this.classMap.comma}'>,\n</span>`);
+            }
+            this.indent && this.result.push(this.indent);
+        }
+    }
+    pushValue(key: ObjectKey, value: any) {
+        this.writeKey(key);
+        if (value === null) {
+            this.result.push(`<span class='${this.classMap.null}'>null</span>`);
+        } else if (value instanceof Block) {
+            this.result.push(value.renderStart() + value.renderValue() + value.renderEnd());
+        } else {
+            let valueClass;
+            const type = typeof value;
+            if (type === 'string') {
+                value = `"${value}"`;
+                value = value.replace(/&/g, "&amp;")
+                    .replace(/</g, "&lt;")
+                    .replace(/>/g, "&gt;");
+                valueClass = this.classMap.string;
+            } else if (type === 'number') {
+                valueClass = this.classMap.number;
+            } else if (type === 'boolean') {
+                valueClass = this.classMap.boolean;
+            }
+            this.result.push(`<span class='${valueClass}'>${value}</span>`);
+        }
+    }
+    renderValue() {
+        return this.result.join('');
+    }
+    abstract renderStart(): string;
+    abstract renderEnd(): string;
+}
+
+class ObjectBlock extends Block {
+    constructor(renderer: JsonRenderer, parent: Block | undefined, key: ObjectKey, indent: string) {
+        super(renderer, parent, key, indent);
+    }
+    renderStart() {
+        return `<span class='${this.classMap.startObject}'>{\n</span>`;
+    }
+    renderEnd() {
+        const NL = this.result.length > 0 ? '\n' : '';
+        return `<span class='${this.classMap.endObject}'>${NL}${this.parent?.indent || ''}}</span>`;
+    }
+}
+
+class ArrayBlock extends Block {
+
+    constructor(renderer: JsonRenderer, parent: Block | undefined, key: ObjectKey, indent: string) {
+        super(renderer, parent, key, indent);
+    }
+    renderStart() {
+        return `<span class='${this.classMap.startArray}'>[\n</span>`;
+    }
+    renderEnd() {
+        const NL = this.result.length > 0 ? '\n' : '';
+        return `<span class='${this.classMap.endArray}'>${NL}${this.parent?.indent || ''}]</span>`;
+    }
+}
+
+class JsonRenderer implements ObjectVisitor {
+    stack: Block[] = [];
+    block: Block = new ObjectBlock(this, undefined, '', '');
+
+    constructor(public classMap: JsonCodeClassMap = defaultClassMap, public tab = '  ') {
+    }
+
+
+    onStartObject(key: ObjectKey) {
+        const nested = new ObjectBlock(this, this.block, key, this.block.indent + this.tab);
+        this.stack.push(this.block);
+        this.block = nested;
+    }
+
+    onEndObject() {
+        const currentBlock = this.block;
+        this.block = this.stack.pop()!;
+        this.block.pushValue(currentBlock.key, currentBlock);
+    }
+
+    onStartIteration(key: ObjectKey) {
+        const nested = new ArrayBlock(this, this.block, key, this.block.indent + this.tab);
+        this.stack.push(this.block);
+        this.block = nested;
+    }
+
+    onEndIteration() {
+        const currentBlock = this.block;
+        this.block = this.stack.pop()!;
+        this.block.pushValue(currentBlock.key, currentBlock);
+    }
+
+    onValue(key: ObjectKey, value: any) {
+        this.block.pushValue(key, value);
+    }
+}
+
+function renderJson(json: any, classMap?: JsonCodeClassMap, className?: string) {
+    const renderer = new JsonRenderer(classMap);
+    new ObjectWalker().walk(json, renderer);
+    const out = renderer.block.renderValue();
+    return <div className={className} dangerouslySetInnerHTML={{ __html: `<div class='${renderer.classMap.code}' style='overflow-x: scroll'>${out}</div>` }} />
+}
+
+export function JSONCode({ data, className, classMap }: { data: any; className?: string, classMap?: JsonCodeClassMap }) {
+    const [element, setElement] = useState<React.ReactElement>();
+    useEffect(() => {
+        setElement(renderJson(data, classMap, className));
+    }, [data]);
+    return element;
+}

package/src/widgets/json-view/JSONDisplay.tsx

@@ -0,0 +1,24 @@
+import type { JSONObject } from "@vertesia/json";
+
+import { JSONCode } from './JSONCode.js';
+import { JSONView } from './JSONView.js';
+
+
+interface JSONDisplayProps {
+    value: JSONObject;
+    viewCode?: boolean;
+}
+export function JSONDisplay({ value, viewCode = false }: JSONDisplayProps) {
+
+    if (!value) {
+        return (
+            <pre className="whitespace-pre-wrap">No Data to display</pre>
+        );
+    }
+
+    return (
+        <div className='relative w-full'>
+            {viewCode ? <JSONCode data={value} /> : <JSONView value={value} />}
+        </div>
+    )
+}

package/src/widgets/json-view/JSONView.tsx

@@ -0,0 +1,183 @@
+import type { JSONArray, JSONObject, JSONValue } from "@vertesia/json";
+import { DotBadge } from "@vertesia/ui/core";
+import clsx from "clsx";
+import { ReactNode } from "react";
+import { computeTitleFromName } from "../form/ManagedObject.js";
+
+
+interface JSONViewProps {
+    value: JSONObject;
+}
+export function JSONView({ value }: JSONViewProps) {
+    return <div className="flex flex-col gap-4">
+        {
+            Object.entries(value).map(([key, value]) =>
+                <PropertyElement key={key} name={key} value={value as JSONValue} />
+            )
+        }
+    </div>
+}
+
+interface PropertyTitleProps {
+    name: string;
+}
+function PropertyTitle({ name }: PropertyTitleProps) {
+    return (
+        <div className='text-md font-semibold'>{computeTitleFromName(name)}</div>
+    )
+}
+
+interface BlockElementProps {
+    children: ReactNode | ReactNode[];
+    className?: string;
+}
+function BlockElement({ children, className }: BlockElementProps) {
+    return (<div className={clsx('flex flex-col gap-4 py-2 pl-4 border-l-4 border-l-solid border-l-slate-100 dark:border-l-slate-600', className)}>
+        {children}
+    </div>)
+}
+
+interface PropertyElementProps {
+    name: string;
+    value: JSONValue;
+}
+function PropertyElement({ name, value }: PropertyElementProps) {
+    const info = getValueInfo(value);
+    switch (info.type) {
+        case ValueType.Inline:
+            return (<div className='w-full flex gap-2'>
+                <PropertyTitle name={name + ':'} />
+                <p>{info.value}</p>
+            </div>)
+        case ValueType.Paragraph:
+            return (<div>
+                <PropertyTitle name={name} />
+                <p>{info.value}</p>
+            </div>)
+        case ValueType.Prose:
+            return (<div className="prose dark:prose-invert">
+                <PropertyTitle name={name} />
+                <div className='vprose dark:prose-invert'>{info.value}</div>
+            </div>)
+        case ValueType.Array:
+            return (
+                <ArrayProperty name={name} value={value as JSONArray} />
+            )
+        case ValueType.Object:
+            return (
+                <div>
+                    <PropertyTitle name={name} />
+                    <BlockElement className='mt-2'>
+                        {
+                            Object.entries(value as JSONObject).map(([key, value]) => <PropertyElement key={key} name={key} value={value as JSONValue} />)
+                        }
+                    </BlockElement>
+                </div>
+            )
+    }
+}
+
+interface ArrayPropertyProps {
+    name?: string,
+    value: JSONArray;
+}
+function ArrayProperty({ name, value }: ArrayPropertyProps) {
+    const inlineLength = value.join(' ').length;
+    const itemMediumLength = inlineLength / value.length;
+    const isInline = (typeof value[0] === 'string') && (inlineLength < 80 || inlineLength < 400 && itemMediumLength < 32);
+    const useBullet = value.length > 9;
+    return isInline ? (
+        <div className='flex gap-2 flex-wrap'>
+            {name && <PropertyTitle name={name + ':'} />}
+            {value.map((item, index) => <DotBadge key={index}>{String(item)}</DotBadge>)}
+        </div>
+    ) : (
+        <div>
+            {name && <PropertyTitle name={name} />}
+            <div className='flex flex-col gap-2'>
+                {
+                    (value as JSONArray).map((value, index) => <ItemProperty key={index} index={index} value={value} useBullet={useBullet} />)
+                }
+            </div>
+        </div>
+    )
+}
+
+interface ItemPropertyProps {
+    index: number;
+    value: JSONValue;
+    useBullet?: boolean;
+}
+function ItemProperty({ index, value, useBullet }: ItemPropertyProps) {
+    const bullet = useBullet ? <span className='text-xl'>&bull;</span> : <span>{index + 1}.</span>
+    const info = getValueInfo(value);
+    let content;
+    switch (info.type) {
+        case ValueType.Object:
+            content = <BlockElement>
+                {
+                    Object.entries(value as JSONObject).map(([key, value]) => <PropertyElement key={key} name={key} value={value as JSONValue} />)
+                }
+            </BlockElement>
+            break;
+        case ValueType.Array:
+            content = <ArrayProperty value={value as JSONArray} />;
+            break;
+        case ValueType.Prose: content = <div className="prose dark:prose-invert">{info.value}</div>
+            break;
+        default: content = <div>{info.value}</div>
+            break;
+    }
+    return (
+        <div className='flex gap-4 hover:bg-slate-50 dark:hover:bg-slate-800 py-2 pr-2 pl-4'>
+            <div className='font-semibold text-gray-600 dark:text-gray-400'>{bullet}</div>
+            <div>{content}</div>
+        </div>
+    )
+}
+
+enum ValueType {
+    Inline,
+    Paragraph,
+    Prose,
+    Array,
+    Object
+}
+function getValueInfo(value: JSONValue): { value: any, type: ValueType } {
+    if (value == null) {
+        return {
+            value: '-',
+            type: ValueType.Inline
+        }
+    }
+    if (Array.isArray(value)) {
+        return {
+            value,
+            type: ValueType.Array
+        }
+    }
+    const type = typeof value;
+    if (type === 'string') {
+        const len = (value as string).length;
+        let type;
+        if (len < 80) {
+            type = ValueType.Inline;
+        } else if (len > 400) {
+            type = ValueType.Prose;
+        } else {
+            type = ValueType.Paragraph;
+            value = (value as string).replace(/(?:\n\n)+/g, '\n\n')
+        }
+        return { type, value };
+    } else if (type === 'number' || type === 'boolean') {
+        return {
+            value: String(value),
+            type: ValueType.Inline
+        }
+    } else {
+        return {
+            value,
+            type: ValueType.Object
+        }
+    }
+}

package/src/widgets/json-view/index.ts

@@ -0,0 +1,4 @@
+export type * from "./types.js";
+export * from "./JSONCode.js";
+export * from "./JSONDisplay.js";
+export * from "./JSONView.js";

package/src/widgets/json-view/types.ts

@@ -0,0 +1,5 @@
+export type JSONPrimitive = string | number | boolean | null;
+export type JSONArray = JSONValue[];
+export type JSONObject = { [key: string]: JSONValue };
+export type JSONComposite = JSONArray | JSONObject;
+export type JSONValue = JSONPrimitive | JSONComposite;

package/src/widgets/schema-editor/JSONSchemaEditorModal.tsx

@@ -0,0 +1,68 @@
+import { json } from "@codemirror/lang-json";
+import { CodeMirrorEditor, EditorApi } from "../codemirror";
+import { Button, VModal, VModalBody, VModalFooter, VModalTitle } from "@vertesia/ui/core";
+import { useToast } from "@vertesia/ui/core";
+import { basicSetup } from "codemirror";
+import { useMemo, useRef } from "react";
+import { ManagedSchema } from "./ManagedSchema.js";
+import { JSONCode } from '../json-view';
+
+function contentToJSON(content: string | undefined | null) {
+    if (!content) return undefined;
+    content = content.trim();
+    if (!content) return undefined;
+    return JSON.parse(content);
+}
+
+function jsonToContent(json: any | undefined | null) {
+    if (!json) return '';
+    return JSON.stringify(json, null, 2);
+}
+
+const extensions = [basicSetup, json()]
+
+interface JSONSchemaEditorModalProps {
+    schema: ManagedSchema;
+    isOpen?: boolean;
+    onClose: () => void;
+    readonly?: boolean;
+}
+export function JSONSchemaEditorModal({ schema, isOpen, onClose, readonly = false }: JSONSchemaEditorModalProps) {
+    const editorRef = useRef<EditorApi | undefined>(undefined);
+    const toast = useToast();
+
+    const value = useMemo(() => {
+        return jsonToContent(schema.schema);
+    }, [schema])
+
+    const onSaveChanges = () => {
+        if (editorRef.current) {
+            const value = editorRef.current.getValue();
+            try {
+                const newSchema = contentToJSON(value);
+                schema.replaceSchema(newSchema);
+                onClose();
+            } catch (err: any) {
+                toast({
+                    status: 'error',
+                    title: 'Invalid JSON Schema',
+                    description: err.message,
+                    duration: 5000
+                })
+            }
+        }
+    }
+
+    return (
+        <VModal onClose={onClose} isOpen={!!isOpen} className='min-w-[60vw]'>
+            <VModalTitle>JSON Schema Editor</VModalTitle>
+            <VModalBody>
+                {!readonly ? <CodeMirrorEditor value={value} extensions={extensions} editorRef={editorRef} />
+                    : <JSONCode data={schema.schema || {}} />}
+            </VModalBody>
+            <VModalFooter>
+                {!readonly ? <Button onClick={onSaveChanges}>Save changes</Button> : null}
+            </VModalFooter>
+        </VModal>
+    )
+}