@vertesia/ui 0.56.0 → 0.58.0

package/src/widgets/codemirror/CodeMirrorEditor.tsx

@@ -0,0 +1,121 @@
+import debounce from 'debounce';
+import { RefObject, useEffect, useMemo, useRef } from 'react';
+
+import { Extension, Text } from '@codemirror/state';
+import { EditorView, ViewUpdate } from '@codemirror/view';
+import { useSafeLayoutEffect } from '@vertesia/ui/core';
+
+import { getSharedEditorState } from './CodemirrorStateSingleton';
+
+export class EditorApi {
+    constructor(public editor: EditorView) { }
+    setValue(value?: string) {
+        this.editor.dispatch({
+            changes: {
+                from: 0,
+                to: this.editor.state.doc.length,
+                insert: value || "",
+            },
+        });
+    }
+    getValue() {
+        return this.editor.state.doc.toString();
+    }
+}
+
+const customTheme = EditorView.theme({
+    "&": { fontSize: "16px", fontFamily: "Sans-Serif" },
+    ".cm-content": { fontFamily: "inherit" },
+    ".cm-scroller": { fontFamily: "inherit" },
+    ".cm-gutters": { backgroundColor: "transparent", color: "#ddd" },
+    ".cm-focused": { outline: "none" },
+    ".cm-cursor": {
+        borderLeft: "2px solid #000",
+        borderLeftColor: "#000",
+        animation: "blink 1.2s step-start infinite"
+    },
+    "@keyframes blink": { "50%": { opacity: 0 } }
+});
+
+const baseExtensions = [
+    customTheme,
+    EditorView.lineWrapping,
+];
+
+function updateListenerExtension(cb: (update: ViewUpdate) => void) {
+    return EditorView.updateListener.of((update) => {
+        if (update.docChanged) {
+            cb(update);
+        }
+    });
+};
+
+interface CodeMirrorEditorProps {
+    value?: string | Text;
+    className?: string;
+    editorRef?: RefObject<EditorApi | undefined>;
+    extensions: Extension;
+    onChange?: (update: ViewUpdate) => void;
+    debounceTimeout?: number; // use a value > 0 to debounce on change events
+}
+
+/**
+ * The className is only used on the first rendering - the editor class will not be updated if the property changes
+**/
+export function CodeMirrorEditor({ onChange, value, className, editorRef, extensions, debounceTimeout = 0 }: CodeMirrorEditorProps) {
+    const ref = useRef<HTMLDivElement | null>(null);
+
+    // the onChange property may change so we need to store it in a
+    // reference to be able to update it when it changes without
+    // re-registering the listener on codemirror since codemirror can only register
+    // listeners at creation
+    const onChangeRef = useRef<(update: ViewUpdate) => void | undefined>(undefined);
+    useEffect(() => {
+        if (onChange) {
+            onChangeRef.current = debounceTimeout > 0
+                ? debounce(onChange, debounceTimeout)
+                : onChange;
+            return () => {
+                // WE MUST NOT CANCEL THE DEBOUNCE even if we unset the onChange impl
+                // otherwise some updates will never happens
+                onChangeRef.current = undefined;
+            };
+        }
+    }, [onChange, debounceTimeout]);
+
+    const component = useMemo(() => <div ref={ref} className={className} />, [className]);
+
+    useSafeLayoutEffect(() => {
+        if (ref.current) {
+            let actualExtensions = [...baseExtensions, updateListenerExtension((update) => {
+                onChangeRef.current?.(update);
+            })];
+            if (Array.isArray(extensions)) {
+                actualExtensions = actualExtensions.concat(extensions);
+            } else if (extensions) {
+                actualExtensions.push(extensions);
+            }
+
+            const sharedState = getSharedEditorState(value, actualExtensions);
+
+            const editor = new EditorView({
+                state: sharedState,
+                parent: ref.current,
+            });
+
+            const api = new EditorApi(editor);
+            if (editorRef) {
+                editorRef.current = api;
+            }
+
+            return () => {
+                editor.destroy();
+                if (editorRef) {
+                    editorRef.current = undefined;
+                }
+            };
+        }
+    }, [component, extensions]);
+
+    return component;
+}

package/src/widgets/codemirror/CodemirrorStateSingleton.tsx

@@ -0,0 +1,39 @@
+import { EditorState, Text } from '@codemirror/state';
+
+let stateInstance: EditorState | null = null;
+
+/**
+ * Returns a shared instance of CodeMirror's EditorState.
+ * If the instance doesn't exist, it creates one with the given initial content.
+ *
+ * @param initialDoc - The initial content for the editor, either as a `string` or `Text`.
+ * @param extensions - Optional extensions to be applied to the editor.
+ * @returns The shared EditorState instance.
+**/
+export const getSharedEditorState = (
+    initialDoc: string | Text = "",
+    extensions: any[] = []
+): EditorState => {
+    const doc = typeof initialDoc === "string" ? Text.of(initialDoc.split("\n")) : initialDoc;
+
+    if (!stateInstance) {
+        stateInstance = EditorState.create({
+            doc,
+            extensions,
+        });
+    } else if (stateInstance.doc.toString() !== doc.toString()) {
+        stateInstance = EditorState.create({
+            doc,
+            extensions,
+        });
+    }
+
+    return stateInstance;
+};
+
+/**
+ * Resets the singleton instance (useful for testing or reinitializing).
+**/
+export const resetSharedEditorState = () => {
+    stateInstance = null;
+};

package/src/widgets/codemirror/index.ts

@@ -0,0 +1,2 @@
+
+export * from "./CodeMirrorEditor.js"

package/src/widgets/form/Form.tsx

@@ -0,0 +1,194 @@
+
+import { Plus, Trash2 } from "lucide-react";
+import { Button } from "@vertesia/ui/core";
+import clsx from "clsx";
+import type { JSONSchemaObject } from "@vertesia/common";
+import { ComponentType, ReactNode, SyntheticEvent, useState } from "react";
+import { FormContextProvider, InputComponentProps, useForm } from "./FormContext.js";
+import { ManagedListProperty, ManagedObject, ManagedObjectBase, ManagedProperty, Node } from "./ManagedObject.js";
+import { FormLabel, FormHelper } from "./fields.js";
+import { Input } from "./inputs.js";
+
+
+
+
+interface FormProps {
+    object: ManagedObject;
+    components?: Record<string, ComponentType<InputComponentProps>>;
+    children?: ReactNode | ReactNode[];
+    onSubmit?: (data: JSONSchemaObject) => void;
+    onChange?: (prop: Node) => void;
+}
+export function Form({ object, components, onSubmit, children, onChange }: FormProps) {
+    const _onSubmit = (evt: SyntheticEvent) => {
+        evt.stopPropagation();
+        evt.preventDefault();
+        onSubmit && onSubmit(object.value);
+    }
+    object.observer = onChange;
+    return (
+        <FormContextProvider value={{
+            object,
+            components: components || {}
+        }}>
+            <form className="w-full" onSubmit={_onSubmit}>
+                {children}
+            </form>
+        </FormContextProvider >
+    )
+}
+
+function GeneratedFormFields() {
+    const ctx = useForm();
+    return (
+        <div className='flex flex-col gap-4 w-full'>
+            {
+                ctx.object.properties.map(renderProperty)
+            }
+        </div>
+    )
+}
+
+export function GeneratedForm({ children, ...props }: FormProps) {
+    return (
+        <Form {...props}>
+            <GeneratedFormFields />
+            {children}
+        </Form>
+    )
+}
+
+
+// interface FieldSetProps {
+//     name: string;
+//     children?: ReactNode | ReactNode[];
+// }
+// export function FieldSet({ name, children }: FieldSetProps) {
+//     const ctx = useForm();
+//     const newCtx = {
+//         ...ctx,
+//         object: ctx.object.getProperty(name) as ManagedObjectProperty
+//     }
+//     return (
+//         <FormContextProvider value={newCtx}>
+//             {children}
+//         </FormContextProvider>
+//     )
+// }
+
+function renderProperty(prop: Node) {
+    if (prop.isList) {
+        return <ListField key={prop.name} object={prop as ManagedListProperty} />
+    } else if (prop.isObject) {
+        return <CompositeField key={prop.name} object={prop as ManagedObjectBase} />
+    } else {
+        return <ScalarField key={prop.name} object={prop as ManagedProperty} />
+    }
+}
+
+function renderItemProperty(prop: Node, editor?: string) {
+    if (prop.isList) {
+        return <ListField object={prop as ManagedListProperty} />
+    } else if (prop.isObject) {
+        return <CompositeField object={prop as ManagedObjectBase} />
+    } else {
+        return <ScalarField object={prop as ManagedProperty} editor={editor} />
+    }
+}
+
+interface ScalarFieldProps {
+    object: ManagedProperty;
+    inline?: boolean;
+    editor?: string; // if present overwrite the object schema editor
+}
+export function ScalarField({ object, editor, inline = false }: ScalarFieldProps) {
+    if (!editor) {
+        editor = object.schema.editor;
+    }
+    const { components } = useForm();
+    const Component = (editor && components[editor]) || Input;
+    const inputType = object.getInputType();
+    if (inputType === 'checkbox') {
+        inline = true;
+    }
+
+    const handleOnChange = (event: any) => {
+        const { value } = event.target;
+        object.value = object.schema.isNumber ? parseFloat(value) : value
+    }
+
+    return (
+        <div className="">
+            <div className={clsx('flex gap-2', inline ? 'flex-row items-center' : 'flex-col')}>
+                {!object.isListItem && <FormLabel required={object.schema.isRequired}>{object.title}</FormLabel>}
+                <Component object={object} type={inputType} onChange={handleOnChange} />
+            </div>
+            {
+                object.schema.description && <FormHelper>{object.schema.description}</FormHelper>
+            }
+        </div>
+    )
+}
+
+interface ObjectFormProps {
+    object: ManagedObjectBase;
+}
+function CompositeField({ object }: ObjectFormProps) {
+    return (
+        <div className="flex flex-col gap-4 my-4 py-2 pl-4 border-l-4 border-l-solid border-l-slate-100 dark:border-l-slate-600">
+            {!object.isListItem && <div className='text-gray-900 dark:text-gray-200 font-semibold'>{object.title}</div>}
+            {
+                object.properties.map(renderProperty)
+            }
+        </div>
+    )
+}
+
+interface ListFieldProps {
+    object: ManagedListProperty;
+}
+function ListField({ object }: ListFieldProps) {
+    const [value, setValue] = useState<any[]>(object.value || []);
+
+    const addItem = () => {
+        object.add();
+        setValue([...object.value]);
+    };
+
+    const deleteItem = (index: number) => {
+        object.remove(index);
+        setValue([...object.value]);
+    };
+
+    return (
+        <div className="flex flex-col gap-4 my-4 py-2 pl-4 border-l-4 border-l-solid border-l-slate-100 darK:border-l-slate-600">
+            {!object.isListItem && <div className='text-gray-900 dark:text-gray-200 font-semibold'>{object.title}</div>}
+            {
+                object.items.map((item, index) => {
+                    return <ListItem key={`${index}-${value[index] ?? ''}`} object={item} list={object} onDelete={() => deleteItem(index)} />;
+                })
+            }
+            <div>
+                <Button variant='soft' onClick={addItem}><Plus className="size-6" /> Add</Button>
+            </div>
+        </div>
+    )
+}
+
+interface ListItemProps {
+    list: ManagedListProperty;
+    object: Node & { index: number };
+    onDelete: () => void;
+}
+function ListItem({ list, object, onDelete }: ListItemProps) {
+    return (
+        <div className='flex gap-2 w-full'>
+            <div className="flex-1">
+                {
+                    renderItemProperty(object, list.schema.arraySchema.editor)
+                }
+            </div>
+            <Button variant='soft' onClick={onDelete}><Trash2 className='size-4' /></Button>
+        </div>
+    )
+}

package/src/widgets/form/FormContext.ts

@@ -0,0 +1,38 @@
+import { ComponentType, createContext, useContext } from "react";
+import { ManagedObject, ManagedObjectBase, Node } from "./ManagedObject.js";
+
+const FieldSetContext = createContext<ManagedObjectBase | undefined>(undefined);
+const FieldSetContextProvider = FieldSetContext.Provider;
+
+export function useFieldSet() {
+    const ctx = useContext(FieldSetContext);
+    if (!ctx) {
+        throw new Error('useFieldSet must be used within a Form or FieldSet element');
+    }
+    return ctx;
+}
+
+export interface InputComponentProps {
+    object: Node;
+    type: string; // the editor/input type
+}
+class FormContext {
+    constructor(public object: ManagedObject,
+        public components: Record<string, ComponentType<InputComponentProps>> = {}) {
+    }
+
+}
+
+const _FormContext = createContext<FormContext | undefined>(undefined);
+
+export function useForm() {
+    const ctx = useContext(_FormContext);
+    if (!ctx) {
+        throw new Error('useForm must be used within a Form element');
+    }
+    return ctx;
+}
+
+const FormContextProvider = _FormContext.Provider;
+
+export { FieldSetContextProvider, FormContextProvider };