@vertesia/ui 0.56.0 → 0.57.0

package/src/widgets/form/ManagedObject.ts

@@ -0,0 +1,332 @@
+import type { JSONSchema, JSONSchemaArray, JSONSchemaObject, JSONSchemaType } from "@vertesia/common";
+import { ArrayPropertySchema, PropertySchema, Schema } from "./schema.js";
+
+export function computeTitleFromName(name: string) {
+    name = name.replace(/_/g, ' ').replace(/([a-z0-9])&([A-Z])/g, "$1 $2");
+    return name[0].toUpperCase() + name.slice(1);
+}
+
+function getInputType(_name: string, schema: PropertySchema) {
+    if (schema.editor) {
+        return schema.editor;
+    }
+    switch (schema.type) {
+        case 'number':
+        case 'integer':
+            return 'number';
+        case 'boolean':
+            return 'checkbox';
+        case 'string':
+            return "text";
+        default:
+            return 'text';
+    }
+}
+
+
+export abstract class Node<SchemaT extends Schema = Schema, ValueT = JSONSchemaType> {
+    // change observer
+    observer?: (node: Node) => void | false; // return false to stop bubbling
+
+    abstract value: ValueT;
+
+    constructor(public parent: Node | null, public schema: SchemaT, public name: string) {
+    }
+
+    get isRoot() {
+        return !this.parent;
+    }
+
+    get root(): Node {
+        return this.parent ? this.parent.root : this as Node;
+    }
+
+    get path(): string[] {
+        return this.parent ? this.parent.path.concat(this.name) : [];
+    }
+
+    get isScalar() {
+        return false;
+    }
+
+    get isListItem(): boolean {
+        return false;
+    }
+
+    get isObject() {
+        return false;
+    }
+
+    get isList() {
+        return false;
+    }
+
+    get title() {
+        return this.schema.title || computeTitleFromName(this.name);
+    }
+
+    protected onChange(node: Node) {
+        if (this.observer) {
+            if (this.observer(this as Node) === false) {
+                return;
+            };
+        }
+        this.parent && this.parent.onChange(node);
+    }
+
+}
+
+export abstract class ManagedObjectBase<SchemaT extends Schema = Schema> extends Node<SchemaT, JSONSchemaObject> {
+    abstract value: JSONSchemaObject;
+
+    constructor(parent: Node | null, schema: SchemaT, name: string) {
+        super(parent, schema, name);
+    }
+
+    get isObject(): boolean {
+        return true;
+    }
+
+    getProperty(name: string) {
+        const schema = this.schema.properties[name];
+        if (schema.isMulti) {
+            return new ManagedListProperty(this, schema as ArrayPropertySchema, this.getOrInitArrayProperty(name));
+        } else if (schema.isObject) {
+            return new ManagedObjectProperty(this, schema, schema.name, this.getOrInitObjectProperty(name));
+        } else {
+            return new ManagedProperty(this, schema);
+        }
+    }
+
+    getOrInitObjectProperty(name: string): JSONSchemaObject {
+        let value = this.value[name];
+        if (!value) {
+            this.value[name] = value = {};
+        }
+        return value as JSONSchemaObject;
+    }
+
+    getOrInitArrayProperty(name: string): JSONSchemaArray {
+        let value = this.value[name];
+        if (!value) {
+            this.value[name] = value = [];
+        }
+        return value as JSONSchemaArray;
+    }
+
+    setPropertyValue(name: string, value: JSONSchemaType) {
+        if (this.value[name] !== value) {
+            this.value[name] = value;
+            return true;
+        }
+        return false;
+    }
+
+    getPropertyValue(name: string) {
+        return this.value[name];
+    }
+
+    get properties(): Node[] {
+        const out: Node[] = [];
+        for (const schema of Object.values(this.schema.properties)) {
+            if (schema.isMulti) {
+                out.push(new ManagedListProperty(this, schema as ArrayPropertySchema, this.getOrInitArrayProperty(schema.name)));
+            } else if (schema.isObject) {
+                out.push(new ManagedObjectProperty(this, schema, schema.name, this.getOrInitObjectProperty(schema.name)));
+            } else {
+                out.push(new ManagedProperty(this, schema));
+            }
+        }
+        return out;
+    }
+
+    [Symbol.iterator]() {
+        return this.properties[Symbol.iterator]();
+    }
+
+}
+
+export class ManagedObject extends ManagedObjectBase<Schema> {
+
+    constructor(schema: Schema | JSONSchema, public value: JSONSchemaObject = {}) {
+        super(null, schema instanceof Schema ? schema : new Schema(schema), '#root');
+    }
+
+}
+
+export class ManagedObjectProperty extends ManagedObjectBase<PropertySchema> {
+
+    constructor(parent: Node, schema: PropertySchema, name: string, public value: JSONSchemaObject) {
+        super(parent, schema, name);
+    }
+
+}
+
+
+export class ManagedProperty extends Node<PropertySchema> {
+
+    constructor(parent: ManagedObjectBase, schema: PropertySchema) {
+        super(parent, schema, schema.name);
+        if (parent.value[this.name] === undefined && schema.defaultValue !== undefined) {
+            parent.value[this.name] = schema.defaultValue;
+        }
+    }
+
+    get isScalar(): boolean {
+        return true;
+    }
+
+    set value(value: JSONSchemaType) {
+        const changed = (this.parent as ManagedObjectBase).setPropertyValue(this.name, value);
+        if (changed) {
+            this.onChange(this);
+        }
+    }
+
+    get value() {
+        return (this.parent as ManagedObjectBase).getPropertyValue(this.name);
+    }
+
+    getInputType() {
+        return getInputType(this.name, this.schema);
+    }
+
+}
+
+export class ManagedListProperty extends Node<ArrayPropertySchema, JSONSchemaArray> {
+
+    items: MangedListItem[] = [];
+
+    constructor(parent: ManagedObjectBase, schema: ArrayPropertySchema, public value: JSONSchemaArray) {
+        super(parent, schema, schema.name);
+        for (const _v of this.value) {
+            this.add();
+        }
+    }
+
+    get isList(): boolean {
+        return true;
+    }
+
+    newItem(index: number) {
+        if (this.schema.isObject) {
+            return new ManageObjectEntry(this, index);
+        } else {
+            return new ManagedScalarEntry(this, index);
+        }
+    }
+
+    add() {
+        const item = this.newItem(this.items.length);
+        this.items.push(item);
+        return item;
+    }
+
+    //TODO change is fired even if the removed item is transient
+    // how to mark an item as transient (an added item not yet set by the user)
+    remove(index: number) {
+        const value = this.value
+        if (index >= 0 && index < this.items.length) {
+            this.items.splice(index, 1);
+            // update indexes
+            for (let i = 0, l = this.items.length; i < l; i++) {
+                const item = this.items[i];
+                item.index = i;
+                item.name = String(i);
+            }
+        }
+        if (Array.isArray(value) && index >= 0 && index < value.length) {
+            value.splice(index, 1);
+            // TODO trigger onCHnage only if this item isn't transient
+            this.onChange(this);
+        }
+    }
+
+    [Symbol.iterator]() {
+        return this.items[Symbol.iterator]();
+    }
+
+    item(index: number) {
+        if (index < 0 || index >= this.value.length) {
+            return undefined;
+        }
+        const item = this.value[index];
+        if (this.schema.isObject) {
+            return new ManagedObjectProperty(this, this.schema, String(index), item as JSONSchemaObject);
+        } else {
+            return new ManagedScalarEntry(this, index);
+        }
+    }
+
+    /**
+     * remove undefined items from the end of the list if any
+     */
+    trim() {
+        while (this.items[this.items.length - 1] === undefined) {
+            this.items.pop();
+        }
+    }
+
+}
+
+export class ManageObjectEntry extends ManagedObjectBase {
+
+    key: string;
+
+    constructor(parent: ManagedListProperty, public index: number) {
+        super(parent, parent.schema, String(index));
+        if (parent.value[index] === undefined) {
+            parent.value[index] = {};
+        }
+        this.key = this.name + '@' + Date.now();
+    }
+
+    get isListItem(): boolean {
+        return true;
+    }
+
+    set value(value: JSONSchemaObject) {
+        (this.parent as ManagedListProperty).value[this.index] = value;
+    }
+
+    get value() {
+        return (this.parent as ManagedListProperty).value[this.index] as JSONSchemaObject;
+    }
+
+}
+
+export class ManagedScalarEntry extends Node<ArrayPropertySchema> {
+
+    key: string;
+
+    constructor(parent: ManagedListProperty, public index: number) {
+        super(parent, parent.schema, String(index));
+        if (parent.value[index] === undefined && parent.schema.defaultValue !== undefined) {
+            parent.value[index] = parent.schema.defaultValue;
+        }
+        this.key = this.name + '@' + Date.now();
+    }
+
+    get isScalar(): boolean {
+        return true;
+    }
+
+    get isListItem(): boolean {
+        return true;
+    }
+
+    set value(value: JSONSchemaType) {
+        (this.parent as ManagedListProperty).value[this.index] = value;
+    }
+
+    get value() {
+        return (this.parent as ManagedListProperty).value[this.index];
+    }
+
+    getInputType() {
+        return getInputType(this.name, this.schema);
+    }
+
+}
+
+export type MangedListItem = ManagedScalarEntry | ManageObjectEntry;

package/src/widgets/form/fields.tsx

@@ -0,0 +1,34 @@
+interface FormLabelProps {
+    htmlFor?: string;
+    required?: boolean;
+    children: React.ReactNode | React.ReactNode[];
+}
+export function FormLabel({ htmlFor, required, children }: FormLabelProps) {
+    return (
+        <label htmlFor={htmlFor} className="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-200">
+            {children}{required && <sup className="text-red-600">*</sup>}
+        </label>
+    )
+}
+
+interface FormHelperProps {
+    children: React.ReactNode | React.ReactNode[];
+}
+export function FormHelper({ children }: FormHelperProps) {
+    return (
+        <p className="mt-2 text-sm text-gray-500">
+            {children}
+        </p>
+    )
+}
+
+interface FormErrorProps {
+    children: React.ReactNode | React.ReactNode[];
+}
+export function FormError({ children }: FormErrorProps) {
+    return (
+        <p className="mt-2 text-sm text-red-600">
+            {children}
+        </p>
+    )
+}

package/src/widgets/form/index.ts

@@ -0,0 +1,6 @@
+export * from "./Form.js";
+export * from "./FormContext.js";
+export * from "./ManagedObject.js";
+export * from "./fields.js";
+export * from "./inputs.js";
+export * from "./schema.js";

package/src/widgets/form/inputs.tsx

@@ -0,0 +1,44 @@
+import clsx from "clsx";
+import React, { ChangeEvent, InputHTMLAttributes, useState } from "react";
+import { ManagedProperty } from "./ManagedObject.js";
+import { Styles } from "@vertesia/ui/core";
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
+    object: ManagedProperty;
+}
+const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, InputProps>(({ object, type = 'text', onChange, ...props }, ref) => {
+    const [actualValue, setValue] = useState(object.value != null ? String(object.value) : '');
+    const [booleanValue, setBooleanValue] = useState(object.schema.isBoolean && object.value === true);
+
+    if (props.className) {
+        props.className = clsx(Styles.INPUT, props.className);
+    } else {
+        props.className = Styles.INPUT;
+    }
+
+    const _onChange = (ev: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        setValue(ev.target.value);
+        if (object.schema.isBoolean) {
+            object.value = (ev.target as HTMLInputElement).checked;
+            setBooleanValue(object.value)
+        } else {
+            object.value = ev.target.value;
+        }
+        onChange && onChange(ev);
+    }
+    if (type === 'textarea') {
+        return (
+            <textarea ref={ref as React.ForwardedRef<HTMLTextAreaElement>} {...props} value={actualValue} onChange={_onChange} />
+        )
+    } else if (type === 'checkbox') {
+        return (
+            <input ref={ref as React.ForwardedRef<HTMLInputElement>} {...props} type="checkbox" checked={booleanValue} onChange={_onChange} className="form-check-input" />
+        )
+    } else {
+        return (
+            <input ref={ref as React.ForwardedRef<HTMLInputElement>} {...props} type={type} value={actualValue} onChange={_onChange} />
+        )
+    }
+});
+
+export { Input };

package/src/widgets/form/schema.ts

@@ -0,0 +1,215 @@
+import { JSONSchema, JSONSchemaType, JSONSchemaTypeName } from "@vertesia/common";
+import Ajv, { ValidateFunction } from "ajv";
+
+function createSchemaFromType(type: JSONSchemaTypeName): JSONSchema {
+    if (type === 'object') {
+        return { type: 'object', properties: {} };
+    } else if (type === 'array') {
+        return { type: 'array', items: { type: 'any' } };
+    } else {
+        return { type };
+    }
+}
+
+export class Schema {
+    schema: JSONSchema;
+    properties: Record<string, PropertySchema> = {};
+    validator: ValidateFunction;
+    constructor(schema?: JSONSchema) {
+        this.schema = schema || { type: 'object', properties: {} };
+        this.validator = new Ajv({ strict: false }).compile(this.schema);
+        this.load();
+    }
+
+    private load() {
+        if (this.schema.properties) {
+            const properties = this.schema.properties;
+            Object.keys(properties).forEach(name => {
+                this.loadProperty(name, properties[name]);
+            });
+        }
+    }
+
+    hasProperties() {
+        return Object.keys(this.properties).length > 0;
+    }
+
+    get title() {
+        return this.schema.title || this.schema.name;
+    }
+
+    get description() {
+        return this.schema.description;
+    }
+
+    private loadProperty(name: string, propertySchema: JSONSchema) {
+        let property: PropertySchema;
+        if (propertySchema.type === 'array') {
+            property = new ArrayPropertySchema(this, name, propertySchema);
+        } else {
+            property = new PropertySchema(this, name, propertySchema);
+        }
+        this.properties[name] = property;
+        return property;
+    }
+
+    get type() {
+        return this.schema.type as JSONSchemaTypeName;
+    }
+
+    validate(value: any) {
+        if (!this.validator(value)) {
+            return this.validator.errors || [];
+        } else {
+            return true;
+        }
+    }
+
+    addProperty(name: string, typeOrSchema: JSONSchemaTypeName | JSONSchema, isRequired = false) {
+        if (this.schema.type !== 'object') {
+            this.schema.type = 'object';
+        }
+        if (!this.schema.properties) {
+            this.schema.properties = {};
+        }
+        const propertySchema = typeof typeOrSchema === 'string' ? createSchemaFromType(typeOrSchema) : typeOrSchema;
+        const property = this.loadProperty(name, propertySchema);
+        this.schema.properties[property.name] = property.schema;
+        if (isRequired) {
+            property.isRequired = true;
+        }
+        return property;
+    }
+
+    removeProperty(name: string) {
+        if (this.schema.properties) {
+            delete this.schema.properties[name];
+            if (Array.isArray(this.schema.required)) {
+                this.schema.required = this.schema.required.filter(x => x !== name);
+            }
+        }
+        delete this.properties[name];
+    }
+
+    getProperty(name: string) {
+        return this.properties[name];
+    }
+
+    get editor() {
+        return this.schema.editor;
+    }
+}
+
+export class PropertySchema extends Schema {
+    constructor(public parent: Schema, public name: string, schema: JSONSchema) {
+        super(schema);
+        if (schema.type === 'array') {
+            throw new Error("Array property must be instantiated using ArrayPropertySchema");
+        }
+        if (schema.type === 'object' && !schema.properties) {
+            schema.properties = {};
+        }
+    }
+
+    get isMulti() {
+        return false;
+    }
+
+    get isReadOnly() {
+        return !!this.schema.readOnly;
+    }
+
+    set isReadOnly(value: boolean) {
+        this.schema.readOnly = value;
+    }
+
+    get defaultValue() {
+        return this.schema.default;
+    }
+
+    set defaultValue(value: JSONSchemaType | undefined) {
+        this.schema.default = value;
+    }
+
+    get enum() {
+        return this.schema.enum;
+    }
+
+    set enum(values: JSONSchemaType[] | undefined) {
+        this.schema.enum = values;
+    }
+
+    get isRequired() {
+        const required = this.parent.schema.required as string[] | undefined;
+        return required ? required.includes(this.name) : false;
+    }
+
+    set isRequired(value: boolean) {
+        let required = Array.isArray(this.parent.schema.required) ? this.parent.schema.required : [];
+        if (value) {
+            required = required.concat(this.name);
+        } else {
+            required = required.filter(x => x !== this.name);
+        }
+        this.parent.schema.required = required;
+    }
+
+    get type() {
+        return this.schema.type as JSONSchemaTypeName;
+    }
+
+    set type(value: JSONSchemaTypeName) {
+        if (this.schema.type !== value) {
+            this.schema.type = value;
+            if (value !== 'object') { // remove sub properties
+                this.properties = {};
+                this.schema.properties = undefined;
+            }
+        }
+    }
+
+    remove() {
+        this.parent.removeProperty(this.name);
+    }
+
+    get isBoolean() {
+        return this.type === 'boolean';
+    }
+
+    get isString() {
+        return this.type === 'string';
+    }
+
+    get isNumber() {
+        return this.type === 'number' || this.type === 'integer';
+    }
+
+    get isObject() {
+        return this.type === 'object';
+    }
+}
+
+function getArrayElementType(schema: JSONSchema) {
+    if (schema.type !== 'array') {
+        throw new Error('Expecting an array schema');
+    }
+    if (!schema.items) {
+        schema.items = { type: 'any' };
+    } else if (Array.isArray(schema.items)) {
+        throw new Error('Tuple arrays are not supported');
+    }
+    return schema.items as JSONSchema;
+}
+
+export class ArrayPropertySchema extends PropertySchema {
+    arraySchema: JSONSchema;
+    constructor(parent: Schema, name: string, schema: JSONSchema) {
+        super(parent, name, getArrayElementType(schema));
+        this.arraySchema = schema;
+    }
+
+    get isMulti() {
+        return true;
+    }
+
+}

package/src/widgets/index.ts

@@ -0,0 +1,5 @@
+export * from "./xml-viewer/index.js";
+export * from "./json-view/index.js";
+export * from "./schema-editor/index.js";
+export * from "./form/index.js";
+export * from "./codemirror/index.js";