@vertesia/ui 0.56.0 → 0.57.0

package/lib/types/widgets/schema-editor/ManagedSchema.d.ts

@@ -0,0 +1,74 @@
+import type { JSONSchema } from "@vertesia/common";
+import { TypeSignature } from "./type-signature.js";
+export interface NodeUpdate {
+    name?: string;
+    type?: TypeSignature;
+    isRequired?: boolean;
+    editor?: string | null;
+    description?: string;
+}
+interface SchemaLoader {
+    reload(): void;
+}
+export interface SchemaSource {
+    uri: string;
+    name: string;
+}
+export declare class ManagedSchema implements SchemaLoader {
+    source?: SchemaSource;
+    onChange: (schema: ManagedSchema) => void;
+    schema: JSONSchema;
+    root: SchemaNode;
+    constructor(schema?: string | JSONSchema | null | undefined, title?: string);
+    get isEmpty(): boolean;
+    get children(): SchemaNode[];
+    reload(): this;
+    withSource(name: string, uri: string): this;
+    withChangeListener(cb: (schema: ManagedSchema) => void): this;
+    replaceSchema(schema: JSONSchema | null): void;
+    clone(): ManagedSchema;
+}
+export declare class SchemaNode {
+    schema: JSONSchema;
+    loader: SchemaLoader;
+    parent?: SchemaNode;
+    name: string;
+    isRequired: boolean;
+    type: TypeSignature;
+    children?: SchemaNode[];
+    constructor(name: string, schema: JSONSchema, loader: SchemaLoader, parent?: SchemaNode);
+    get title(): string | undefined;
+    set title(value: string | undefined);
+    get description(): string | undefined;
+    set description(value: string | undefined);
+    get isParent(): boolean;
+    get isNew(): boolean;
+    set isNew(value: boolean);
+    resetIsNew(): boolean;
+    getNameSignature(): string;
+    getTypeSignature(): string;
+    getSignature(): string;
+    reloadTree(): void;
+    loadChildren(): void;
+    _loadChildren(properties: Record<string, JSONSchema>): void;
+    _getPropertiesSchema(): JSONSchema;
+    findAvailableChildName(prefix: string): string;
+    /**
+     * Add a new child node
+     */
+    addChild(name: string, type: TypeSignature, isRequired?: boolean): SchemaNode;
+    /**
+     * Remove this node
+     */
+    remove(): boolean;
+    update(data: NodeUpdate): boolean;
+    getUpdateFromNameAndTypeSignature(nameSig: string, typeSig: string): {
+        name: string;
+        type: TypeSignature;
+        isRequired: boolean;
+        editor: string | null;
+    };
+    updateFromNameAndTypeSignature(nameSig: string, typeSig: string): boolean;
+    updateFromSignature(text: string): boolean;
+}
+export {};

package/lib/types/widgets/schema-editor/editor/Editable.d.ts

@@ -0,0 +1,39 @@
+import { ComponentType } from 'react';
+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 declare function Editable<T>({ value, onChange, onDelete, outlineOnHover, editOnClick, placeholder, viewer, editor, skipClickOutside, isEditing, readonly, onValidate, }: EditableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TextDataViewer({ value, placeholder }: DataViewerProps<string>): import("react/jsx-runtime").JSX.Element;
+export declare function TextDataEditor({ value, onChange, onCancel, onSave }: DataEditorProps<string>): import("react/jsx-runtime").JSX.Element;
+interface EditableTextProps extends Omit<EditableProps<string>, 'viewer' | 'editor'> {
+    viewer?: ComponentType<DataViewerProps<string>>;
+    editor?: ComponentType<DataEditorProps<string>>;
+}
+export declare function EditableText(props: EditableTextProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/types/widgets/schema-editor/editor/EditableSchemaProperty.d.ts

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

package/lib/types/widgets/schema-editor/editor/PropertyEditor.d.ts

@@ -0,0 +1,4 @@
+import { DataEditorProps } from './Editable.js';
+import { EditableSchemaProperty } from './EditableSchemaProperty.js';
+export declare function PropertyEditor({ value, onChange, onCancel, onSave }: DataEditorProps<EditableSchemaProperty>): import("react/jsx-runtime").JSX.Element | null;
+export declare function PropertyNameEditor({ value, onChange, onCancel, onSave }: DataEditorProps<string>): import("react/jsx-runtime").JSX.Element;

package/lib/types/widgets/schema-editor/editor/PropertyViewer.d.ts

@@ -0,0 +1,3 @@
+import { DataViewerProps } from "./Editable.js";
+import { EditableSchemaProperty } from "./EditableSchemaProperty.js";
+export declare function PropertyViewer({ value }: DataViewerProps<EditableSchemaProperty>): import("react/jsx-runtime").JSX.Element | null;

package/lib/types/widgets/schema-editor/editor/SchemaContext.d.ts

@@ -0,0 +1,2 @@
+import { ManagedSchema } from "../ManagedSchema.js";
+export declare function useSchema(jsonSchema: any): ManagedSchema;

package/lib/types/widgets/schema-editor/editor/SchemaEditor.d.ts

@@ -0,0 +1,8 @@
+import { ManagedSchema } from '../ManagedSchema.js';
+interface SchemaTreeProps {
+    schema: ManagedSchema;
+    readonly?: boolean;
+}
+export declare function SchemaEditor({ schema, readonly }: SchemaTreeProps): import("react/jsx-runtime").JSX.Element;
+export declare function validatePropertyName(propertyName: string): string | undefined;
+export {};

package/lib/types/widgets/schema-editor/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./JSONSchemaEditorModal.js";
+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/lib/types/widgets/schema-editor/json-schema4-utils.d.ts

@@ -0,0 +1,15 @@
+import type { JSONSchema } from "@vertesia/common";
+import { TypeSignature } from "./type-signature.js";
+export declare function setPropertyName(schema: JSONSchema, name: string, newName: string): void;
+export declare function setRequireProperty(schema: JSONSchema, name: string, isRequired: boolean): void;
+export declare function setPropertyType(schema: JSONSchema, type: TypeSignature): void;
+export declare function removeProperty(schema: JSONSchema, name: string): void;
+/**
+ * Create a new property in the schema
+ * @param schema
+ * @param name
+ * @param type
+ * @param isRequired
+ */
+export declare function addProperty(schema: JSONSchema, name: string, type: TypeSignature, isRequired?: boolean): JSONSchema;
+export declare function getTypeSignature(schema: JSONSchema): TypeSignature;

package/lib/types/widgets/schema-editor/type-signature.d.ts

@@ -0,0 +1,18 @@
+export declare 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"
+}
+export interface TypeSignature {
+    name: TypeNames;
+    isObject: boolean;
+    isNullable: boolean;
+    isArray: boolean;
+}
+export declare function parseTypeSignature(text: string): TypeSignature;

package/lib/types/widgets/xml-viewer/components/Attributes/index.d.ts

@@ -0,0 +1,5 @@
+import { AttributesObject } from '../../types';
+export interface AttributesProps {
+    attributes?: AttributesObject;
+}
+export declare function Attributes(props: AttributesProps): import("react/jsx-runtime").JSX.Element | null;

package/lib/types/widgets/xml-viewer/components/CDataTag/index.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface CDataTagProps {
+    indentation: string;
+    children: ReactNode;
+    isInline: boolean;
+}
+export declare function CDataTag(props: CDataTagProps): import("react/jsx-runtime").JSX.Element;

package/lib/types/widgets/xml-viewer/components/CollapseIcon/index.d.ts

@@ -0,0 +1,4 @@
+export interface CollapseIconProps {
+    collapsed: boolean;
+}
+export declare function CollapseIcon(props: CollapseIconProps): React.ReactElement | null;

package/lib/types/widgets/xml-viewer/components/CommentTag/index.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface CommentTagProps {
+    indentation: string;
+    children: ReactNode;
+    isInline: boolean;
+    level: number;
+}
+export declare function CommentTag(props: CommentTagProps): import("react/jsx-runtime").JSX.Element;

package/lib/types/widgets/xml-viewer/components/DeclarationTag/index.d.ts

@@ -0,0 +1,7 @@
+import { AttributesObject } from '../../types';
+export interface DeclarationTagProps {
+    indentation: string;
+    tagKey: string;
+    attributes: AttributesObject;
+}
+export declare function DeclarationTag(props: DeclarationTagProps): import("react/jsx-runtime").JSX.Element;

package/lib/types/widgets/xml-viewer/components/Elements/index.d.ts

@@ -0,0 +1,7 @@
+import { Element } from '../../types';
+export interface ElementsProps {
+    elements: Element[];
+    level?: number;
+    isText?: boolean;
+}
+export declare function Elements(props: ElementsProps): import("react/jsx-runtime").JSX.Element | null;

package/lib/types/widgets/xml-viewer/components/InvalidXml/index.d.ts

@@ -0,0 +1 @@
+export declare function InvalidXml(): import("react/jsx-runtime").JSX.Element;

package/lib/types/widgets/xml-viewer/components/Tag/index.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { AttributesObject } from '../../types';
+export interface TagProps {
+    indentation: string;
+    tagKey: string;
+    attributes: AttributesObject;
+    children: ReactNode;
+    isInline: boolean;
+    hasChildren: boolean;
+    level: number;
+}
+export declare function Tag(props: TagProps): import("react/jsx-runtime").JSX.Element;

package/lib/types/widgets/xml-viewer/components/TextElement/index.d.ts

@@ -0,0 +1,7 @@
+export interface TextElementProps {
+    text: string;
+    hasSiblings: boolean;
+    indentation: string;
+    isText: boolean;
+}
+export declare function TextElement(props: TextElementProps): import("react/jsx-runtime").JSX.Element;

package/lib/types/widgets/xml-viewer/components/XMLViewer.d.ts

@@ -0,0 +1,2 @@
+import { XMLViewerProps } from './types';
+export declare function XMLViewer(props: XMLViewerProps): React.ReactNode;

package/lib/types/widgets/xml-viewer/components/types.d.ts

@@ -0,0 +1,103 @@
+export interface Theme {
+    /**
+     * The tag name color (`<tag-name />`)
+     *
+     * @default #d43900
+     */
+    tagColor?: string;
+    /**
+     * The text color (`<tag>Text</tag>`)
+     *
+     * @default #333
+     */
+    textColor?: string;
+    /**
+     * The attribute key color (`<tag attribute-key="hello" />`)
+     *
+     * @default #2a7ab0
+     */
+    attributeKeyColor?: string;
+    /**
+     * The attribute value color (` <tag attr="Attribute value">`)
+     *
+     * @default #008000
+     */
+    attributeValueColor?: string;
+    /**
+     * The separators colors (`<, >, </, />, =, <?, ?>`)
+     *
+     * @default #333
+     */
+    separatorColor?: string;
+    /**
+     * The comment color (`<!-- this is a comment -->`)
+     *
+     * @default #aaa
+     */
+    commentColor?: string;
+    /**
+     * the cdata element color (`<![CDATA[some stuff]]>`)
+     *
+     * @default #1D781D
+     */
+    cdataColor?: string;
+    /**
+     * The font family
+     *
+     * @default monospace
+     */
+    fontFamily?: string;
+}
+export interface XMLViewerProps {
+    /**
+     * A xml string to prettify.
+     */
+    xml: string;
+    /**
+     * An object to customize the default theme.
+     *
+     * @default
+     * ```js
+     * {
+     *   tagColor: '#d43900',
+     *   textColor: '#333',
+     *   attributeKeyColor: '#2a7ab0',
+     *   attributeValueColor: '#008000',
+     *   separatorColor: '#333',
+     *   commentColor: '#aaa',
+     *   cdataColor: '#1d781d',
+     *   fontFamily: 'monospace',
+     * }
+     * ```
+     */
+    theme?: Theme;
+    /**
+     * The size of the indentation.
+     *
+     * @default 2
+     */
+    indentSize?: number;
+    /**
+     * When the xml is invalid, invalidXml component will be returned.
+     *
+     * @default <div>Invalid XML!</div>
+     */
+    invalidXml?: React.ReactElement;
+    /**
+     * Allow collapse/expand tags by click on them. When tag is collapsed its content and attributes are hidden.
+     *
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * @deprecated use the initialCollapsedDepth instead
+     */
+    initalCollapsedDepth?: number;
+    /**
+     * When the **collapsible** is true, this set the level that will be started as collapsed.
+     * For example, if you want to everything starts as collapsed, set 0.
+     *
+     * @default undefined
+     */
+    initialCollapsedDepth?: number;
+}

package/lib/types/widgets/xml-viewer/constants/index.d.ts

@@ -0,0 +1,16 @@
+export declare const ATTRIBUTE_GROUP_KEY = ":@";
+export declare const ATTRIBUTE_TEXT = "#text";
+export declare const ATTRIBUTE_COMMENT = "#comment";
+export declare const ATTRIBUTE_CDATA = "#cdata";
+export declare const DECLARATION_TAG = "DECLARATION_TAG";
+export declare const TAG = "TAG";
+export declare const defaultTheme: {
+    tagColor: string;
+    textColor: string;
+    attributeKeyColor: string;
+    attributeValueColor: string;
+    separatorColor: string;
+    commentColor: string;
+    cdataColor: string;
+    fontFamily: string;
+};

package/lib/types/widgets/xml-viewer/context/xml-viewer-context.d.ts

@@ -0,0 +1,3 @@
+import { IXmlViewerContext } from '../types';
+export declare const XMLViewerContext: import("react").Context<IXmlViewerContext>;
+export declare const useXMLViewerContext: () => IXmlViewerContext;

package/lib/types/widgets/xml-viewer/helpers/index.d.ts

@@ -0,0 +1,12 @@
+import { AttributesObject, Element } from '../types';
+export declare function getIndentationString(size: number, level: number): string;
+export declare function hasBreakLines(elements: Element[] | string): boolean;
+export declare function isInlineTextElement(elements: Element[] | string): boolean;
+export declare function getTagType(tagKey: string): "#text" | "#comment" | "#cdata" | "DECLARATION_TAG" | "TAG";
+export declare function getTagProps(element: Element): {
+    attributes: AttributesObject;
+    tagKey: string;
+    subElements: any;
+    type: string;
+};
+export declare function hasAttributes(attributes: AttributesObject): boolean;

package/lib/types/widgets/xml-viewer/hooks/useCollapsible.d.ts

@@ -0,0 +1,14 @@
+export declare function useCollapsible(level: number): {
+    collapsed: boolean;
+    buttonProps: {
+        onClick?: undefined;
+        role?: undefined;
+        style?: undefined;
+    } | {
+        onClick: () => void;
+        role: string;
+        style: {
+            cursor: string;
+        };
+    };
+};

package/lib/types/widgets/xml-viewer/hooks/useXMLViewer.d.ts

@@ -0,0 +1,9 @@
+export default function useXMLViewer(xml: string): {
+    json: any;
+    valid: boolean;
+    errorMessage?: undefined;
+} | {
+    json: null;
+    valid: boolean;
+    errorMessage: string;
+};

package/lib/types/widgets/xml-viewer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/XMLViewer';
+export * from './components/types.js';

package/lib/types/widgets/xml-viewer/types/index.d.ts

@@ -0,0 +1,15 @@
+import { Theme } from '../components/types';
+import { ATTRIBUTE_TEXT } from '../constants';
+export interface ElementText {
+    [ATTRIBUTE_TEXT]: string;
+}
+export type AttributeValue = string | number | boolean;
+export type AttributesObject = Record<string, AttributeValue>;
+export type ElementObject = Record<string, AttributesObject | Element[]>;
+export type Element = ElementObject | ElementText;
+export interface IXmlViewerContext {
+    collapsible: boolean;
+    indentSize: number;
+    theme: Theme;
+    initialCollapsedDepth?: number;
+}