@vertesia/ui 0.24.0-dev.202601221707

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

@@ -0,0 +1,150 @@
+import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
+
+import { AlignLeft } from 'lucide-react';
+import { Button, VModal, ModalBody, ModalFooter, VModalTitle, Styles, VSelectBox } from '@vertesia/ui/core';
+
+import { TypeNames } from '../type-signature.js';
+import { DataEditorProps } from './Editable.js';
+import { EditableSchemaProperty } from './EditableSchemaProperty.js';
+
+function makeTypeOptions() {
+    const types: string[] = Object.values(TypeNames)
+    const options = [...types]
+    for (const type of types) {
+        options.push(type + '[]');
+    }
+    types.sort();
+    return options;
+}
+
+const TYPE_OPTIONS = makeTypeOptions();
+
+export function PropertyEditor({ value, onChange, onCancel, onSave }: DataEditorProps<EditableSchemaProperty>) {
+    const [isModalOpen, setModalOpen] = useState(false);
+
+    if (!value) return null;
+
+    const onNameChange = (text: string) => {
+        onChange({ ...value, name: text })
+    }
+
+    const onTypeChange = (text: string) => {
+        onChange({ ...value, type: text })
+    }
+
+    const onDescriptionChange = (text?: string) => {
+        if (text !== undefined && typeof text === 'string') {
+            onChange({ ...value, description: text }, true);
+        }
+        setModalOpen(false);
+    }
+
+    return (
+        <div className="flex items-center">
+            <div className="flex-1">
+                <PropertyNameEditor value={value.name} onChange={onNameChange} onCancel={onCancel} onSave={onSave} />
+            </div>
+            <div className="px-1 font-semibold">:</div>
+            <div className="flex-1">
+                <PropertyTypeEditor value={value.type} onChange={onTypeChange} onCancel={onCancel} onSave={onSave} />
+            </div>
+            <div>
+                <Button variant={"ghost"} size={"xs"} onClick={() => setModalOpen(true)}  title="Edit description">
+                    <AlignLeft className="size-4" />
+                </Button>
+                <EditDescriptionModal value={value.description} isOpen={isModalOpen} onClose={onDescriptionChange} />
+            </div>
+        </div>
+    )
+
+}
+
+
+export function PropertyNameEditor({ value, onChange, onCancel, onSave }: DataEditorProps<string>) {
+    const ref = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        ref.current?.focus();
+    }, [])
+
+    const onKeyUp = (e: React.KeyboardEvent) => {
+        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", width: "", display: "inline" }} />
+    )
+}
+
+function PropertyTypeEditor({ value, onChange, onCancel, onSave }: DataEditorProps<string>) {
+    const onBlur = () => {
+        onSave?.();
+    }
+    const onKeyDown = (e: React.KeyboardEvent<Element>, isOpen: boolean) => {
+        if (!isOpen) {
+            if (e.key === 'Enter') {
+                onSave?.();
+            } else if (e.key === 'Escape') {
+                onCancel?.();
+            }
+        }
+    }
+    return (
+        <VSelectBox 
+            className={Styles.INPUT_UNSTYLED}
+            options={TYPE_OPTIONS}
+            value={value || ''}
+            onBlur={onBlur}
+            onChange={onChange}
+            onKeyDown={onKeyDown}
+            popupClass="schema-type-suggest-popup z-90"
+        />
+    )
+}
+
+interface EditDescriptionModalProps {
+    value: string | undefined;
+    isOpen: boolean;
+    onClose: (text?: string) => void;
+}
+function EditDescriptionModal({ value, isOpen, onClose }: EditDescriptionModalProps) {
+    return (
+        <VModal isOpen={isOpen} onClose={onClose}>
+            <VModalTitle>Edit description</VModalTitle>
+            <EditDescriptionModalForm value={value} onSave={onClose} />
+        </VModal>
+    )
+}
+
+interface EditDescriptionModalFormProps {
+    value: string | undefined;
+    onSave: (text: string) => void;
+}
+function EditDescriptionModalForm({ value, onSave }: EditDescriptionModalFormProps) {
+    const ref = useRef<HTMLTextAreaElement>(null);
+    const [currentValue, setCurrentValue] = useState(value || '');
+    useEffect(() => {
+        ref.current && ref.current.focus();
+    }, [ref.current]);
+    return (
+        <>
+            <ModalBody className="h-max">
+                <textarea ref={ref} className="dark:bg-gray-800 w-full h-full dark:text-white" value={currentValue} onChange={(e) => setCurrentValue(e.target.value)} />
+            </ModalBody>
+            <ModalFooter>
+                <Button onClick={() => onSave(currentValue)}>Save Changes</Button>
+            </ModalFooter>
+        </>
+    )
+}

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

@@ -0,0 +1,15 @@
+import { DataViewerProps } from "./Editable.js";
+import { EditableSchemaProperty } from "./EditableSchemaProperty.js";
+
+export function PropertyViewer({ value }: DataViewerProps<EditableSchemaProperty>) {
+    if (!value) return null;
+    return (
+        <div
+            className='w-full flex items-baseline'>
+            <div>
+                {value.name || ''}
+            </div>
+            <div className='ml-2 text-sm text-muted'>{value.type || ''}</div>
+        </div>
+    )
+}

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

@@ -0,0 +1,9 @@
+import { useState } from "react";
+import { ManagedSchema } from "../ManagedSchema.js";
+
+export function useSchema(jsonSchema: any) {
+    const [schema, setSchema] = useState(new ManagedSchema(jsonSchema || { type: "object", properties: {} }).withChangeListener((schema) => {
+        setSchema(schema.clone());
+    }));
+    return schema;
+}

package/src/widgets/schema-editor/editor/SchemaEditor.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest';
+import { validatePropertyName } from './SchemaEditor';
+
+describe('validatePropertyName', () => {
+    it('should return true for valid property names', () => {
+        const validNames = [
+            'name',
+            'name?',
+            '1name',
+            '1name?',
+            'property1',
+            'property1?',
+            'valid_name',
+            'valid_name?',
+            'anotherValidName',
+            'anotherValidName?',
+        ];
+        validNames.forEach(name => {
+            const err = validatePropertyName(name);
+            expect(err).toBeUndefined();
+        });
+    });
+
+    it('should return false for invalid property names', () => {
+        const invalidNames = [
+            'property-1', // dash (-) is not allowed
+            'invalid name', // space ( ) is not allowed
+            'anotherInvalidName!', // exclamation mark (!) is not allowed
+            'invalid?name', // question mark (?) is not allowed in the middle
+            'user.name', // dot (.) is not allowed
+
+            // special characters are not allowed
+            'name$',
+            'property@',
+            'invalid#name',
+            'another%InvalidName',
+        ];
+        invalidNames.forEach(name => {
+            const err = validatePropertyName(name);
+            expect(err).toBe('Only letters, numbers, underscores or question mark are allowed (a-zA-Z0-9_?)');
+        });
+    });
+
+    it('should return false for empty property name', () => {
+        const err = validatePropertyName('')
+        expect(err).toBe('Name is required');
+    });
+});

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

@@ -0,0 +1,161 @@
+import { useState } from 'react';
+
+import { ChevronDown, ChevronRight, Plus } from 'lucide-react';
+import { Button, useToast } from '@vertesia/ui/core';
+
+import { ManagedSchema, SchemaNode } from '../ManagedSchema.js';
+import { TypeNames } from '../type-signature.js';
+import { Editable } from './Editable.js';
+import { EditableSchemaProperty, getEditableSchemaProperty } from './EditableSchemaProperty.js';
+import { PropertyEditor } from './PropertyEditor.js';
+import { PropertyViewer } from './PropertyViewer.js';
+
+// do not exit edit mode when user is clicking inside the type suggestion popup
+function skipClickOutside(e: MouseEvent) {
+    const target = e.target as HTMLElement;
+    return !!(target.closest && target.closest('.schema-type-suggest-popup'));
+};
+
+interface SchemaTreeProps {
+    schema: ManagedSchema;
+    readonly?: boolean;
+}
+export function SchemaEditor({ schema, readonly = false }: SchemaTreeProps) {
+    return (
+        <ul className="">
+            {
+                schema.children.map(prop => {
+                    return renderProperty(prop, readonly)
+                })
+            }
+            {
+                !readonly ? <AddPropertyButton parent={schema.root} /> : null
+            }
+        </ul>
+    );
+}
+
+function renderProperty(node: SchemaNode, readonly: boolean) {
+    return (
+        node.isParent ?
+            <ParentItem key={node.name} property={node} readonly={readonly} />
+            :
+            <SimpleItem key={node.name} node={node} readonly={readonly} />
+    );
+}
+
+interface SimpleItemProps {
+    node: SchemaNode;
+    readonly: boolean
+}
+function SimpleItem({ node, readonly }: SimpleItemProps) {
+    return (
+        <li>
+            <PropertyTitleBar property={node} readonly={readonly} />
+        </li>
+    );
+}
+
+interface ParentItemProps {
+    property: SchemaNode;
+    readonly: boolean;
+}
+function ParentItem({ property, readonly }: ParentItemProps) {
+    const [isOpen, setOpen] = useState(true);
+    const Icon = isOpen ? ChevronDown : ChevronRight;
+
+    return (
+        <li>
+            <div className='flex items-center w-full'>
+                <button onClick={() => setOpen(!isOpen)}><Icon className="size-4" /></button>
+                <div className='flex-1'><PropertyTitleBar property={property} readonly={readonly} /></div>
+            </div>
+            {
+                isOpen &&
+                <ul className="ml-4 border-l border-gray-400 border-dashed">
+                    {
+                        (property.children || []).map(prop => renderProperty(prop, readonly))
+                    }
+                    {
+                        !readonly ? <AddPropertyButton parent={property} /> : null
+                    }
+                </ul>
+            }
+        </li>
+    );
+}
+
+export function validatePropertyName(propertyName: string): string | undefined {
+    if (!propertyName) {
+        return 'Name is required';
+    }
+    if (/^[a-zA-Z0-9_]+[?]?$/.test(propertyName)) {
+        return undefined;  // valid
+    }
+    return 'Only letters, numbers, underscores or question mark are allowed (a-zA-Z0-9_?)';
+}
+
+interface PropertyTitleBarProps {
+    property: SchemaNode;
+    readonly: boolean;
+}
+function PropertyTitleBar({ property, readonly }: PropertyTitleBarProps) {
+    const toast = useToast();
+
+    const onChange = (value: EditableSchemaProperty) => {
+        try {
+            if (value.description && typeof value.description !== 'string') {
+                value.description = undefined;
+            }
+
+            const update = property.getUpdateFromNameAndTypeSignature(value.name, value.type);
+
+            if (property.update({ ...update, description: value.description })) {
+                property.reloadTree();
+            }
+        } catch (err: any) {
+            toast({
+                status: 'error',
+                title: 'Invalid property declaration',
+                description: err.message,
+                duration: 9000
+            })
+            return false;
+        }
+        return true;
+    }
+    const isNew = property.resetIsNew();
+    const editableProp = getEditableSchemaProperty(property);
+
+    return (
+        <Editable value={editableProp} onChange={onChange}
+            onDelete={() => {
+                property.remove()
+                property.reloadTree();
+            }}
+            editor={PropertyEditor}
+            viewer={PropertyViewer}
+            outlineOnHover isEditing={isNew}
+            skipClickOutside={skipClickOutside}
+            readonly={readonly}
+            onValidate={(property) => validatePropertyName(property.name)}
+        />
+    );
+}
+
+interface AddPropertyButtonProps {
+    parent: SchemaNode;
+}
+function AddPropertyButton({ parent }: AddPropertyButtonProps) {
+    const add = () => {
+        const name = parent.findAvailableChildName("new_property_");
+        const child = parent.addChild(name, { isObject: false, isArray: false, isNullable: false, name: TypeNames.string }, true);
+        child.isNew = true;
+        parent.reloadTree();
+    }
+    return (
+        <Button variant="ghost" onClick={add}>
+            <Plus className='size-4' />Add property
+        </Button>
+    )
+}

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

@@ -0,0 +1,6 @@
+export * from "./ManagedSchema.js";
+export * from "./editor/EditableSchemaProperty.js";
+export * from "./editor/PropertyEditor.js";
+export * from "./editor/PropertyViewer.js";
+export * from "./editor/SchemaContext.js";
+export * from "./editor/SchemaEditor.js";

package/src/widgets/schema-editor/json-schema4-utils.ts

@@ -0,0 +1,187 @@
+import type { JSONSchema, JSONSchemaTypeName } from "@vertesia/common";
+import { TypeNames, TypeSignature } from "./type-signature.js";
+
+
+export function setPropertyName(schema: JSONSchema, name: string, newName: string) {
+    if (schema.properties) {
+        const properties = schema.properties;
+        const newProperties = {} as Record<string, JSONSchema>;
+        for (const key of Object.keys(properties)) {
+            const value = properties[key];
+            if (key === name) {
+                newProperties[newName] = value;
+            } else {
+                newProperties[key] = value;
+            }
+        }
+        schema.properties = newProperties;
+    }
+    if (schema.required) {
+        schema.required = (schema.required as string[]).map(x => x === name ? newName : x);
+    }
+}
+
+export function setRequireProperty(schema: JSONSchema, name: string, isRequired: boolean) {
+    if (Array.isArray(schema.required)) {
+        const index = schema.required.indexOf(name);
+        if (isRequired) {
+            if (index < 0) {
+                schema.required.push(name);
+            }
+        } else {
+            if (index > -1) {
+                schema.required.splice(index, 1);
+            }
+        }
+    } else if (isRequired) {
+        schema.required = [name];
+    }
+}
+
+export function setPropertyType(schema: JSONSchema, type: TypeSignature) {
+    const isAny = type.name === "any";
+    let typeObj: JSONSchemaTypeName | JSONSchemaTypeName[] | undefined = isAny ?
+        undefined
+        : (type.isNullable ?
+            [type.name, "null"] as JSONSchemaTypeName[]
+            : type.name as JSONSchemaTypeName);
+    if (type.isArray) {
+        schema.type = "array";
+        schema.properties = undefined;
+        if (!schema.items || Array.isArray(schema.items)) {
+            schema.items = {
+                type: typeObj,
+                properties: type.isObject ? {} : undefined
+            }
+        } else {
+            const items = schema.items as JSONSchema;
+            items.type = typeObj;
+            if (type.isObject && !items.properties) {
+                items.properties = {};
+            }
+        }
+    } else {
+        schema.type = typeObj;
+        schema.items = undefined;
+        if (type.isObject) {
+            if (!schema.properties) {
+                schema.properties = {};
+            }
+        } else {
+            schema.properties = undefined;
+        }
+    }
+}
+
+export function removeProperty(schema: JSONSchema, name: string) {
+    if (schema.properties) {
+        delete schema.properties[name];
+        if (Array.isArray(schema.required)) {
+            schema.required = schema.required.filter(x => x !== name);
+        }
+    }
+}
+
+/**
+ * Create a new property in the schema
+ * @param schema
+ * @param name
+ * @param type
+ * @param isRequired
+ */
+export function addProperty(schema: JSONSchema, name: string, type: TypeSignature, isRequired = false) {
+    if (schema.type !== "object") {
+        throw new Error("Cannot add property to a non-object schema");
+    }
+    if (!schema.properties) {
+        schema.properties = {};
+    }
+    const newSchema = {} as JSONSchema;
+    setPropertyType(newSchema, type);
+    schema.properties[name] = newSchema;
+    if (isRequired) {
+        if (Array.isArray(schema.required)) {
+            addRequired(schema.required, name);
+        } else {
+            schema.required = [name];
+        }
+    }
+    return newSchema;
+}
+
+export function getTypeSignature(schema: JSONSchema): TypeSignature {
+    let isNullable = false, isArray = false;
+    let typeName: JSONSchemaTypeName | undefined;
+    const type = schema.type;
+    if (Array.isArray(type)) {
+        for (const t of type) {
+            if (t === "null") {
+                isNullable = true;
+            } else if (!typeName) {
+                typeName = t;
+            }
+        }
+    } else {
+        typeName = type;
+    }
+    if (!typeName) {
+        typeName = "any";
+    }
+    if (typeName === 'array') {
+        isArray = true;
+        typeName = getItemTypeName(schema.items);
+    }
+    let displayTypeName: string = typeName;
+    switch (schema.editor) {
+        case 'textarea': {
+            displayTypeName = 'text'; break;
+        }
+        case 'media': {
+            displayTypeName = 'media'; break;
+        }
+        case 'document': {
+            displayTypeName = 'document'; break;
+        }
+    }
+    return {
+        isNullable,
+        isArray,
+        isObject: typeName === "object",
+        name: displayTypeName as TypeNames
+    }
+}
+
+// TODO we don't support array of arrays
+// for array of multiple type we get the first type
+function getItemTypeName(schema: JSONSchema | JSONSchema[] | undefined) {
+    if (!schema) {
+        return "any"
+    }
+    let name: JSONSchemaTypeName;
+    if (Array.isArray(schema)) {
+        name = getFirstNotNullType(schema[0].type)
+    } else {
+        name = getFirstNotNullType(schema.type)
+    }
+    if (name === "array" || name === "null") {
+        name = "any";
+    }
+    return name;
+}
+
+function getFirstNotNullType(type: JSONSchemaTypeName | JSONSchemaTypeName[] | undefined) {
+    if (!type) {
+        return "any";
+    }
+    if (Array.isArray(type)) {
+        return type.find(x => x !== "null") || "any";
+    }
+    return type;
+}
+
+
+function addRequired(required: string[], name: string) {
+    if (!required.includes(name)) {
+        required.push(name);
+    }
+}

package/src/widgets/schema-editor/type-signature.ts

@@ -0,0 +1,39 @@
+
+export enum TypeNames {
+    string = "string",
+    number = "number",
+    integer = "integer",
+    boolean = "boolean",
+    object = "object",
+    any = "any",
+    text = "text", // a string with an additional editor: textarea property
+    media = "media", // a media file ref
+    document = "document", // a document ref
+}
+
+
+export interface TypeSignature {
+    name: TypeNames,
+    isObject: boolean,
+    isNullable: boolean,
+    isArray: boolean,
+}
+
+
+export function parseTypeSignature(text: string): TypeSignature {
+    text = text.trim();
+    let isArray = false, isNullable = false;
+    if (text.endsWith('?')) {
+        isNullable = true;
+        text = text.substring(0, text.length - 1).trim();
+    }
+    if (text.endsWith('[]')) {
+        isArray = true;
+        text = text.substring(0, text.length - 2).trim();
+    }
+    const name = TypeNames[text as TypeNames]
+    if (!name) {
+        throw new Error(`Unknown type "${text}"`);
+    }
+    return { name, isArray, isNullable, isObject: name === TypeNames.object };
+}