@vertesia/ui 0.56.0 → 0.57.0

package/src/widgets/schema-editor/ManagedSchema.ts

@@ -0,0 +1,340 @@
+import type { JSONSchema } from "@vertesia/common";
+import { TypeNames, TypeSignature, parseTypeSignature } from "./type-signature.js";
+import { addProperty, getTypeSignature, removeProperty, setPropertyName, setPropertyType, setRequireProperty } from "./json-schema4-utils.js";
+
+
+let new_prop_name_cnt = 0;
+
+export interface NodeUpdate {
+    name?: string,
+    type?: TypeSignature,
+    isRequired?: boolean,
+    editor?: string | null; // use null to force remove editor
+    description?: string;
+}
+
+interface SchemaLoader {
+    reload(): void
+}
+
+export interface SchemaSource {
+    uri: string;
+    name: string;
+}
+export class ManagedSchema implements SchemaLoader {
+    // the schema source contains information about where the schema was loaded
+    // the uri serves to retrieve the schema and for now only store:ID URIs are supported
+    source?: SchemaSource;
+    onChange: (schema: ManagedSchema) => void = () => { };
+    schema: JSONSchema;
+    root: SchemaNode;
+    constructor(schema?: string | JSONSchema | null | undefined, title?: string) {
+        if (!schema) {
+            this.schema = {
+                title: title,
+                type: "object",
+                properties: {},
+            }
+        } else if (typeof schema === 'string') {
+            this.schema = JSON.parse(schema);
+        } else {
+            this.schema = schema;
+        }
+        if (!this.schema.properties) {
+            this.schema.properties = {};
+        }
+        this.root = new SchemaNode("", this.schema, this);
+        this.root.loadChildren();
+    }
+
+    get isEmpty() {
+        return !this.root.children || this.root.children.length === 0;
+    }
+
+    get children() {
+        return this.root.children!;
+    }
+
+    reload() {
+        this.root = new SchemaNode("", this.schema, this);
+        this.root.loadChildren();
+        this.onChange?.(this);
+        return this;
+    }
+
+    withSource(name: string, uri: string) {
+        this.source = {
+            uri,
+            name
+        }
+        return this;
+    }
+
+    withChangeListener(cb: (schema: ManagedSchema) => void) {
+        this.onChange = cb;
+        return this;
+    }
+
+    replaceSchema(schema: JSONSchema | null) {
+        if (!schema) {
+            this.schema = {
+                title: this.schema.title,
+                type: "object",
+                properties: {},
+            }
+        } else {
+            this.schema = schema;
+        }
+        this.reload();
+    }
+
+    clone() {
+        const clone = new ManagedSchema(this.schema);
+        clone.source = this.source;
+        if (this.onChange) {
+            clone.withChangeListener(this.onChange);
+        }
+        return clone;
+    }
+}
+
+export class SchemaNode {
+    schema: JSONSchema;
+    loader: SchemaLoader;
+    parent?: SchemaNode;
+    name: string;
+    isRequired = false;
+    type: TypeSignature;
+    children?: SchemaNode[];
+
+    constructor(name: string, schema: JSONSchema, loader: SchemaLoader, parent?: SchemaNode) {
+        this.schema = schema;
+        this.loader = loader;
+        this.parent = parent;
+        this.name = name;
+        this.type = getTypeSignature(schema);
+        if (this.parent) {
+            let required = this.parent._getPropertiesSchema().required;
+            this.isRequired = required && Array.isArray(required) ? required.includes(name) : false;
+        }
+    }
+
+    get title() {
+        return this.schema.title;
+    }
+
+    set title(value: string | undefined) {
+        this.schema.title = value;
+    }
+
+    get description() {
+        return this.schema.description;
+    }
+
+    set description(value: string | undefined) {
+        this.schema.description = value;
+    }
+
+    get isParent() {
+        return this.type.isObject;
+    }
+
+    // the isNew is a hack to preserve the open state in UI after a node is created and the tree reloaded
+    get isNew() {
+        return !!this.schema.isNew
+    }
+    set isNew(value: boolean) {
+        if (value) {
+            this.schema.isNew = true
+        } else {
+            delete this.schema.isNew
+        }
+    }
+    resetIsNew() {
+        const isNew = this.isNew;
+        this.isNew = false;
+        return isNew;
+    }
+    // end hack
+
+    getNameSignature() {
+        return `${this.name}${this.isRequired ? '' : '?'}`
+    }
+
+    getTypeSignature() {
+        return `${this.type.name}${this.type.isArray ? '[]' : ''}${this.type.isNullable ? '?' : ''}`
+    }
+
+    getSignature() {
+        return `${this.getNameSignature()}: ${this.getTypeSignature()}`
+    }
+
+    reloadTree() {
+        this.loader.reload();
+    }
+
+    loadChildren() {
+        this.children = [];
+        if (this.schema.items && (this.schema.items as JSONSchema).properties) {
+            this._loadChildren((this.schema.items as JSONSchema).properties!);
+        } else if (this.schema.properties) {
+            this._loadChildren(this.schema.properties);
+        }
+    }
+
+    _loadChildren(properties: Record<string, JSONSchema>) {
+        for (const name of Object.keys(properties)) {
+            const childSchema = properties[name];
+            const child = new SchemaNode(name, childSchema, this.loader, this);
+            this.children!.push(child);
+            if (child.isParent) {
+                child.loadChildren();
+            }
+        }
+    }
+
+    _getPropertiesSchema() {
+        if (this.type.isArray && this.type.isObject) {
+            return this.schema.items as JSONSchema;
+        } else {
+            return this.schema;
+        }
+    }
+
+    findAvailableChildName(prefix: string) {
+        const properties = this._getPropertiesSchema().properties || {};
+        let name;
+        do {
+            name = prefix + (++new_prop_name_cnt);
+        } while (properties[name]);
+        return name;
+    }
+
+    /**
+     * Add a new child node
+     */
+    addChild(name: string, type: TypeSignature, isRequired = false) {
+        if (!this.type.isObject) {
+            throw new Error("Cannot add child to a non object node");
+        }
+        if (!this.children) {
+            this.children = [];
+        }
+        let schema = this._getPropertiesSchema();
+        const childSchema = addProperty(schema, name, type, isRequired);
+        const child = new SchemaNode(name, childSchema, this.loader, this);
+        this.children.push(child);
+        return child;
+    }
+
+    /**
+     * Remove this node
+     */
+    remove() {
+        if (this.parent && this.parent.type.isObject) {
+            const schema = this.parent._getPropertiesSchema();
+            removeProperty(schema, this.name);
+            if (this.parent.children) {
+                this.parent.children = this.parent.children.filter(c => c.name !== this.name);
+            }
+            return true;
+        }
+        return false;
+    }
+
+    update(data: NodeUpdate) {
+        let updated = false;
+        if (data.name != null && this.name !== data.name) {
+            if (this.parent) {
+                setPropertyName(this.parent._getPropertiesSchema(), this.name, data.name)
+            }
+            this.name = data.name;
+            updated = true;
+        }
+        if (data.isRequired != null && this.isRequired !== data.isRequired) {
+            if (this.parent) {
+                setRequireProperty(this.parent._getPropertiesSchema(), this.name, data.isRequired);
+            }
+            this.isRequired = data.isRequired;
+            updated = true;
+        }
+        let actualType: string | undefined = data.type?.name;
+        if (actualType === "any") {
+            actualType = undefined;
+        }
+        const typeChanged = actualType !== this.schema.type;
+        if (data.type) {
+            setPropertyType(this.schema, data.type)
+            this.type = data.type;
+            if (this.type.isObject) {
+                if (!this.children) {
+                    this.children = [];
+                }
+            } else {
+                this.children = undefined;
+            }
+            updated = true;
+        }
+        // update editor field
+        if (this.schema.editor && data.editor === null) {
+            // explicitly set to null => delete current editor
+            this.schema.editor = undefined;
+            this.schema.format = undefined;
+            updated = true;
+        } else if (data.editor) { // a new editor is set
+            this.schema.editor = data.editor;
+            this.schema.format = data.editor;
+            updated = true;
+        } else if (typeChanged) {
+            // preserve editor only if the type didn't change
+            this.schema.editor = undefined;
+            this.schema.format = undefined;
+            updated = true;
+        }
+        if (data.description !== this.description) {
+            this.description = data.description;
+            updated = true;
+        }
+
+        return updated;
+    }
+
+    getUpdateFromNameAndTypeSignature(nameSig: string, typeSig: string) {
+        let name = nameSig.trim();
+        let isRequired = true;
+        if (name.endsWith('?')) {
+            name = name.substring(0, name.length - 1).trim();
+            isRequired = false;
+        }
+        const type = parseTypeSignature(typeSig) as TypeSignature;
+        let editor: string | null | undefined;
+        if (type.name === 'text') {
+            type.name = TypeNames.string;
+            editor = 'textarea'
+        } else if (type.name === 'media') {
+            type.name = TypeNames.any;
+            editor = 'media'
+        } else if (type.name === 'document') {
+            type.name = TypeNames.any;
+            editor = 'document'
+        } else {
+            editor = null; // remove custom editor
+        }
+        return { name, type, isRequired, editor };
+    }
+
+    updateFromNameAndTypeSignature(nameSig: string, typeSig: string) {
+        return this.update(this.getUpdateFromNameAndTypeSignature(nameSig, typeSig));
+    }
+
+    updateFromSignature(text: string) {
+        text = text.trim();
+        const index = text.indexOf(':');
+        if (index < 0) {
+            throw new Error("Expecting a name and a type separated by a colon");
+        }
+        const nameSig = text.substring(0, index);
+        const typeSig = text.substring(index + 1);
+        return this.updateFromNameAndTypeSignature(nameSig, typeSig);
+    }
+}

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

@@ -0,0 +1,252 @@
+import clsx from 'clsx';
+import { ChangeEvent, ComponentType, KeyboardEvent, useEffect, useRef, useState } from 'react';
+
+import { Pencil, Trash2 } from 'lucide-react';
+import { Styles } from '@vertesia/ui/core';
+import { useClickOutside, useFlag } from '@vertesia/ui/core';
+
+const VIEW_BOX = "block sm:text-sm sm:leading-6 rounded-md border-0 py-1.5 px-2 text-gray-900 dark:text-slate-50"
+const VIEW_BOX_HOVER = `${VIEW_BOX} hover:shadow-xs hover:ring-1 hover:ring-inset hover:ring-gray-300 dark:hover:ring-slate-600`
+const EDIT_BOX = `${VIEW_BOX} shadow-xs ring-1 ring-inset ring-gray-300 dark:ring-slate-600`
+
+export interface DataViewerProps<T> {
+    value: T | undefined;
+    placeholder?: string
+}
+
+export interface DataEditorProps<T> {
+    value: T | undefined;
+    onChange: (value: any, autoSave?: boolean) => void
+    onSave?: () => void
+    onCancel?: () => void
+}
+
+interface EditableProps<T> {
+    value: T;
+    viewer: ComponentType<DataViewerProps<T>>;
+    editor: ComponentType<DataEditorProps<T>>;
+    isEditing?: boolean;
+    placeholder?: string;
+    onChange: (value: T) => boolean;
+    onDelete?: () => void;
+    outlineOnHover?: boolean;
+    editOnClick?: boolean;
+    skipClickOutside?: (e: MouseEvent) => boolean;
+    readonly?: boolean;
+    /**
+     * An optional validation function that returns an error message if the value is invalid.
+     *
+     * @returns An error message or undefined if the value is valid.
+     */
+    onValidate?: (value: T) => string | undefined;
+}
+export function Editable<T>({ value, onChange, onDelete,
+    outlineOnHover = false,
+    editOnClick = true,
+    placeholder,
+    viewer,
+    editor,
+    skipClickOutside,
+    isEditing = false,
+    readonly = false,
+    onValidate,
+}: EditableProps<T>) {
+    const { on, off, isOn } = useFlag(isEditing);
+    const [validationError, setValidationError] = useState<string | undefined>();
+
+    const _onChange = (value?: any) => {
+        if (onValidate) {
+            const err = onValidate(value);
+            if (err) {
+                setValidationError(err);
+                return; // don't save
+            } else {
+                setValidationError(undefined);
+            }
+        }
+
+        if (onChange(value)) {
+            off();
+        }
+    };
+
+    const _skipClickOutside = (e: MouseEvent) => {
+        if (skipClickOutside) {
+            return skipClickOutside(e);
+        }
+        return false;
+    };
+
+    return (
+        <div>
+            {
+                isOn && !readonly ?
+                    <DataEdit
+                        value={value}
+                        onSave={_onChange}
+                        onCancel={off}
+                        editor={editor}
+                        skipClickOutside={_skipClickOutside}
+                    />
+                    : <DataView value={value} onEdit={on} viewer={viewer}
+                        placeholder={placeholder}
+                        outlineOnHover={outlineOnHover}
+                        editOnClick={editOnClick}
+                        onDelete={onDelete}
+                        readonly={readonly}
+                    />
+            }
+            {
+                validationError &&
+                <div className="text-red-500 text-sm">{validationError}</div>
+            }
+        </div>
+    )
+}
+
+interface DataViewProps<T> {
+    value: T;
+    viewer: ComponentType<DataViewerProps<T>>;
+    onEdit: () => void;
+    outlineOnHover?: boolean
+    editOnClick?: boolean
+    placeholder?: string
+    onDelete?: () => void
+    readonly?: boolean,
+}
+function DataView<T>({ viewer: Viewer, value, onEdit, editOnClick, outlineOnHover, placeholder, onDelete, readonly }: DataViewProps<T>) {
+    const onClick = () => {
+        editOnClick && onEdit();
+    };
+
+    const onKeyUp = (e: KeyboardEvent<HTMLDivElement>) => {
+        if (e.key === "Enter") {
+            onEdit();
+        }
+    };
+
+    const btnStyle = 'hidden group-hover:block text-gray-400 hover:text-gray-600 dark:text-gray-600 dark:hover:text-gray-400';
+
+    return (
+        <div tabIndex={0} onKeyUp={onKeyUp} onClick={onClick} className={clsx("flex justify-start items-center group", outlineOnHover ? VIEW_BOX_HOVER : VIEW_BOX, { 'cursor-pointer': editOnClick })}>
+            <Viewer value={value} placeholder={placeholder} />
+            <div className='ml-auto flex space-x-2'>
+                {
+                    !readonly && onDelete &&
+                    <button className={btnStyle} onClick={onDelete}>
+                        <Trash2 className="size-4" />
+                    </button>
+                }
+                {
+                    !readonly ?
+                        <button className={btnStyle} onClick={onEdit}>
+                            <Pencil className="size-4" />
+                        </button>
+                        : null
+                }
+            </div>
+        </div>
+    );
+}
+
+interface DataEditProps<T> {
+    value: T;
+    editor: ComponentType<DataEditorProps<T>>;
+    onSave: (value: T) => void;
+    onCancel: () => void;
+    skipClickOutside?: (e: MouseEvent) => boolean;
+}
+function DataEdit<T>({ editor: Editor, value, onSave, onCancel, skipClickOutside }: DataEditProps<T>) {
+    const [actualValue, setActualValue] = useState(value);
+    const latestValue = useRef(value);
+    const [debounceTimer, setDebounceTimer] = useState<NodeJS.Timeout | null>(null);
+
+    const handleSave = () => {
+        onSave(latestValue.current);
+    };
+
+    const ref = useClickOutside<HTMLDivElement>(handleSave, skipClickOutside);
+
+    const _onChange = (value: any, autoSave = false) => {
+        setActualValue(value);
+        latestValue.current = value;
+        if (autoSave) {
+            if (debounceTimer) {
+                clearTimeout(debounceTimer);
+            }
+            setDebounceTimer(setTimeout(() => { onSave(value); }, 500))
+        }
+    };
+
+    return (
+        <div ref={ref}>
+            <div className={EDIT_BOX}>
+                <div className="w-full" onClick={(e) => e.stopPropagation()}>
+                    <Editor
+                        value={actualValue}
+                        onChange={_onChange}
+                        onSave={handleSave}
+                        onCancel={onCancel}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export function TextDataViewer({ value, placeholder }: DataViewerProps<string>) {
+    if (!value) {
+        return (
+            <span className='text-gray-400'>{placeholder || 'Missing value'}</span>
+        );
+    } else {
+        return (
+            <span>{value == null ? '' : value.toString()}</span>
+        );
+    }
+}
+
+export function TextDataEditor({ value, onChange, onCancel, onSave }: DataEditorProps<string>) {
+    const ref = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        ref.current?.focus();
+    }, []);
+
+    const onKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
+        switch (e.key) {
+            case "Enter":
+                onSave?.();
+                break;
+            case "Escape":
+                onCancel?.();
+                break;
+        }
+    };
+
+    const _onChange = (e: ChangeEvent<HTMLInputElement>) => {
+        onChange(e.target.value);
+    };
+
+    return (
+        <input onKeyUp={onKeyUp} ref={ref} value={value} onChange={_onChange} className={Styles.INPUT_UNSTYLED} style={{ fontSize: "inherit" }} />
+    );
+}
+
+interface EditableTextProps extends Omit<EditableProps<string>, 'viewer' | 'editor'> {
+    viewer?: ComponentType<DataViewerProps<string>>;
+    editor?: ComponentType<DataEditorProps<string>>;
+}
+export function EditableText(props: EditableTextProps) {
+    if (!props.viewer) {
+        props.viewer = TextDataViewer;
+    }
+
+    if (!props.editor) {
+        props.editor = TextDataEditor;
+    }
+
+    return (
+        <Editable {...props as EditableProps<string>} />
+    );
+}

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

@@ -0,0 +1,15 @@
+import { SchemaNode } from "../ManagedSchema.js";
+
+export interface EditableSchemaProperty {
+    name: string;
+    type: string;
+    description?: string;
+}
+
+export function getEditableSchemaProperty(schema: SchemaNode): EditableSchemaProperty {
+    return {
+        name: schema.getNameSignature(),
+        type: schema.getTypeSignature(),
+        description: schema.description
+    }
+}