@vertesia/ui 1.3.0 → 1.4.0-dev.20260615.051508Z

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

@@ -1,21 +1,19 @@
-import { useState } from 'react';
-
+import { Button, errorMessage, useToast } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
 import { ChevronDown, ChevronRight, Plus } from 'lucide-react';
-import { Button, useToast } from '@vertesia/ui/core';
-
-import { useUITranslation } from '../../../i18n/index.js';
-import { ManagedSchema, SchemaNode } from '../ManagedSchema.js';
+import { useState } from 'react';
+import type { ManagedSchema, SchemaNode } from '../ManagedSchema.js';
 import { TypeNames } from '../type-signature.js';
 import { Editable } from './Editable.js';
-import { EditableSchemaProperty, getEditableSchemaProperty } from './EditableSchemaProperty.js';
+import { type 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'));
-};
+    return !!target.closest?.('.schema-type-suggest-popup');
+}
 
 interface SchemaTreeProps {
     schema: ManagedSchema;
@@ -24,30 +22,25 @@ interface SchemaTreeProps {
 export function SchemaEditor({ schema, readonly = false }: SchemaTreeProps) {
     return (
         <ul className="">
-            {
-                schema.children.map(prop => {
-                    return renderProperty(prop, readonly)
-                })
-            }
-            {
-                !readonly ? <AddPropertyButton parent={schema.root} /> : null
-            }
+            {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} />
+    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
+    readonly: boolean;
 }
 function SimpleItem({ node, readonly }: SimpleItemProps) {
     return (
@@ -67,21 +60,26 @@ function ParentItem({ property, readonly }: ParentItemProps) {
 
     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 className="flex items-center w-full">
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => setOpen(!isOpen)}
+                    aria-label={isOpen ? `Collapse ${property.name}` : `Expand ${property.name}`}
+                    aria-expanded={isOpen}
+                >
+                    <Icon className="size-4 cn-rtl-flip" />
+                </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
-                    }
+            {isOpen && (
+                <ul className="ms-4 border-s border-gray-400 border-dashed">
+                    {(property.children || []).map((prop) => renderProperty(prop, readonly))}
+                    {!readonly ? <AddPropertyButton parent={property} /> : null}
                 </ul>
-            }
+            )}
         </li>
     );
 }
@@ -91,7 +89,7 @@ export function validatePropertyName(propertyName: string): string | undefined {
         return 'Name is required';
     }
     if (/^[a-zA-Z0-9_]+[?]?$/.test(propertyName)) {
-        return undefined;  // valid
+        return undefined; // valid
     }
     return 'Only letters, numbers, underscores or question mark are allowed (a-zA-Z0-9_?)';
 }
@@ -115,29 +113,32 @@ function PropertyTitleBar({ property, readonly }: PropertyTitleBarProps) {
             if (property.update({ ...update, description: value.description })) {
                 property.reloadTree();
             }
-        } catch (err: any) {
+        } catch (err: unknown) {
             toast({
                 status: 'error',
                 title: t('widgets.schema.invalidPropertyDeclaration'),
-                description: err.message,
-                duration: 9000
-            })
+                description: errorMessage(err),
+                duration: 9000,
+            });
             return false;
         }
         return true;
-    }
+    };
     const isNew = property.resetIsNew();
     const editableProp = getEditableSchemaProperty(property);
 
     return (
-        <Editable value={editableProp} onChange={onChange}
+        <Editable
+            value={editableProp}
+            onChange={onChange}
             onDelete={() => {
-                property.remove()
+                property.remove();
                 property.reloadTree();
             }}
             editor={PropertyEditor}
             viewer={PropertyViewer}
-            outlineOnHover isEditing={isNew}
+            outlineOnHover
+            isEditing={isNew}
             skipClickOutside={skipClickOutside}
             readonly={readonly}
             onValidate={(property) => validatePropertyName(property.name)}
@@ -150,14 +151,19 @@ interface AddPropertyButtonProps {
 }
 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);
+        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
+            <Plus className="size-4" />
+            Add property
         </Button>
-    )
+    );
 }

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

@@ -1,6 +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";
+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';
+export * from './ManagedSchema.js';

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

@@ -1,6 +1,5 @@
-import type { JSONSchema, JSONSchemaTypeName } from "@vertesia/common";
-import { TypeNames, TypeSignature } from "./type-signature.js";
-
+import type { JSONSchema, JSONSchemaTypeName } from '@vertesia/common';
+import type { TypeNames, TypeSignature } from './type-signature.js';
 
 export function setPropertyName(schema: JSONSchema, name: string, newName: string) {
     if (schema.properties) {
@@ -17,7 +16,7 @@ export function setPropertyName(schema: JSONSchema, name: string, newName: strin
         schema.properties = newProperties;
     }
     if (schema.required) {
-        schema.required = (schema.required as string[]).map(x => x === name ? newName : x);
+        schema.required = (schema.required as string[]).map((x) => (x === name ? newName : x));
     }
 }
 
@@ -39,20 +38,20 @@ export function setRequireProperty(schema: JSONSchema, name: string, isRequired:
 }
 
 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);
+    const isAny = type.name === 'any';
+    const typeObj: JSONSchemaTypeName | JSONSchemaTypeName[] | undefined = isAny
+        ? undefined
+        : type.isNullable
+          ? ([type.name, 'null'] as JSONSchemaTypeName[])
+          : (type.name as JSONSchemaTypeName);
     if (type.isArray) {
-        schema.type = "array";
+        schema.type = 'array';
         schema.properties = undefined;
         if (!schema.items || Array.isArray(schema.items)) {
             schema.items = {
                 type: typeObj,
-                properties: type.isObject ? {} : undefined
-            }
+                properties: type.isObject ? {} : undefined,
+            };
         } else {
             const items = schema.items as JSONSchema;
             items.type = typeObj;
@@ -77,7 +76,7 @@ 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);
+            schema.required = schema.required.filter((x) => x !== name);
         }
     }
 }
@@ -90,8 +89,8 @@ export function removeProperty(schema: JSONSchema, name: string) {
  * @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.type !== 'object') {
+        throw new Error('Cannot add property to a non-object schema');
     }
     if (!schema.properties) {
         schema.properties = {};
@@ -110,12 +109,13 @@ export function addProperty(schema: JSONSchema, name: string, type: TypeSignatur
 }
 
 export function getTypeSignature(schema: JSONSchema): TypeSignature {
-    let isNullable = false, isArray = false;
+    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") {
+            if (t === 'null') {
                 isNullable = true;
             } else if (!typeName) {
                 typeName = t;
@@ -125,7 +125,7 @@ export function getTypeSignature(schema: JSONSchema): TypeSignature {
         typeName = type;
     }
     if (!typeName) {
-        typeName = "any";
+        typeName = 'any';
     }
     if (typeName === 'array') {
         isArray = true;
@@ -134,54 +134,56 @@ export function getTypeSignature(schema: JSONSchema): TypeSignature {
     let displayTypeName: string = typeName;
     switch (schema.editor) {
         case 'textarea': {
-            displayTypeName = 'text'; break;
+            displayTypeName = 'text';
+            break;
         }
         case 'media': {
-            displayTypeName = 'media'; break;
+            displayTypeName = 'media';
+            break;
         }
         case 'document': {
-            displayTypeName = 'document'; break;
+            displayTypeName = 'document';
+            break;
         }
     }
     return {
         isNullable,
         isArray,
-        isObject: typeName === "object",
-        name: displayTypeName as TypeNames
-    }
+        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"
+        return 'any';
     }
     let name: JSONSchemaTypeName;
     if (Array.isArray(schema)) {
-        name = getFirstNotNullType(schema[0].type)
+        name = getFirstNotNullType(schema[0].type);
     } else {
-        name = getFirstNotNullType(schema.type)
+        name = getFirstNotNullType(schema.type);
     }
-    if (name === "array" || name === "null") {
-        name = "any";
+    if (name === 'array' || name === 'null') {
+        name = 'any';
     }
     return name;
 }
 
 function getFirstNotNullType(type: JSONSchemaTypeName | JSONSchemaTypeName[] | undefined) {
     if (!type) {
-        return "any";
+        return 'any';
     }
     if (Array.isArray(type)) {
-        return type.find(x => x !== "null") || "any";
+        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

@@ -1,28 +1,26 @@
-
 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
+    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,
+    name: TypeNames;
+    isObject: boolean;
+    isNullable: boolean;
+    isArray: boolean;
 }
 
-
 export function parseTypeSignature(text: string): TypeSignature {
     text = text.trim();
-    let isArray = false, isNullable = false;
+    let isArray = false,
+        isNullable = false;
     if (text.endsWith('?')) {
         isNullable = true;
         text = text.substring(0, text.length - 1).trim();
@@ -31,7 +29,7 @@ export function parseTypeSignature(text: string): TypeSignature {
         isArray = true;
         text = text.substring(0, text.length - 2).trim();
     }
-    const name = TypeNames[text as TypeNames]
+    const name = TypeNames[text as TypeNames];
     if (!name) {
         throw new Error(`Unknown type "${text}"`);
     }

package/src/widgets/upload/DropZone.tsx

@@ -1,7 +1,33 @@
-import { useState, useRef } from "react";
-import { UploadIcon } from "lucide-react";
-import { Button } from "@vertesia/ui/core";
-import { useUITranslation } from "@vertesia/ui/i18n";
+import { Button } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { UploadIcon } from 'lucide-react';
+import { useRef, useState } from 'react';
+
+interface FileSystemEntry {
+    fullPath: string;
+    isFile: boolean;
+    isDirectory: boolean;
+}
+
+interface FileSystemFileEntry extends FileSystemEntry {
+    isFile: true;
+    file(callback: (file: File) => void): void;
+}
+
+interface FileSystemDirectoryEntry extends FileSystemEntry {
+    isDirectory: true;
+    createReader(): {
+        readEntries(callback: (entries: FileSystemEntry[]) => void): void;
+    };
+}
+
+function isFileEntry(entry: FileSystemEntry): entry is FileSystemFileEntry {
+    return entry.isFile;
+}
+
+function isDirectoryEntry(entry: FileSystemEntry): entry is FileSystemDirectoryEntry {
+    return entry.isDirectory;
+}
 
 /**
  * Props for the DropZone component
@@ -44,13 +70,7 @@ export interface DropZoneProps {
  *   buttonLabel="Select Files"
  * />
  */
-export function DropZone({
-    onDrop,
-    message,
-    buttonLabel,
-    allowFolders = true,
-    className = ""
-}: DropZoneProps) {
+export function DropZone({ onDrop, message, buttonLabel, allowFolders = true, className = '' }: DropZoneProps) {
     const { t } = useUITranslation();
     const resolvedButtonLabel = buttonLabel ?? t('upload.uploadFiles');
     const [isDragging, setIsDragging] = useState(false);
@@ -82,13 +102,13 @@ export function DropZone({
             const files: File[] = [];
             const folders = new Set<string>();
 
-            const processEntry = async (entry: any) => {
-                if (entry.isFile) {
+            const processEntry = async (entry: FileSystemEntry) => {
+                if (isFileEntry(entry)) {
                     // Get file
                     const file = await new Promise<File>((resolve) => {
                         entry.file((file: File) => {
                             // Store full path in the file object for location use
-                            Object.defineProperty(file, "webkitRelativePath", {
+                            Object.defineProperty(file, 'webkitRelativePath', {
                                 writable: true,
                                 value: entry.fullPath.substring(1), // Remove leading slash
                             });
@@ -97,20 +117,20 @@ export function DropZone({
                     });
 
                     // Skip hidden files
-                    if (!file.name.startsWith(".") && file.size > 0) {
+                    if (!file.name.startsWith('.') && file.size > 0) {
                         files.push(file);
                     }
 
                     // Add folder path to tracking
-                    const folderPath = entry.fullPath.substring(1).split("/").slice(0, -1).join("/");
+                    const folderPath = entry.fullPath.substring(1).split('/').slice(0, -1).join('/');
                     if (folderPath) {
                         folders.add(folderPath);
                     }
-                } else if (entry.isDirectory) {
+                } else if (isDirectoryEntry(entry)) {
                     // Get folder reader
                     const reader = entry.createReader();
-                    const entries = await new Promise<any[]>((resolve) => {
-                        reader.readEntries((entries: any[]) => {
+                    const entries = await new Promise<FileSystemEntry[]>((resolve) => {
+                        reader.readEntries((entries) => {
                             resolve(entries);
                         });
                     });
@@ -130,7 +150,9 @@ export function DropZone({
                 // Process all dropped items
                 await Promise.all(
                     items.map((item) => {
-                        const entry = item.webkitGetAsEntry ? item.webkitGetAsEntry() : item;
+                        const entry = item.webkitGetAsEntry
+                            ? (item.webkitGetAsEntry() as FileSystemEntry | null)
+                            : (item as unknown as FileSystemEntry);
                         if (entry) {
                             return processEntry(entry);
                         }
@@ -141,14 +163,14 @@ export function DropZone({
                 if (files.length > 0) {
                     const topLevelFolders = new Set(
                         Array.from(folders)
-                            .map((path) => path.split("/")[0])
+                            .map((path) => path.split('/')[0])
                             .filter(Boolean),
                     );
 
                     const folderCount = topLevelFolders.size;
                     const fileCount = files.length;
 
-                    let message = "";
+                    let message = '';
                     if (folderCount > 0) {
                         message = t('upload.preparingFolder', { count: folderCount, folderCount, fileCount });
                     } else {
@@ -158,7 +180,7 @@ export function DropZone({
                     onDrop(files, { count: files.length, message });
                 }
             } catch (error) {
-                console.error("Error processing dropped files:", error);
+                console.error('Error processing dropped files:', error);
                 // Fallback to simple file array if folder processing fails
                 const fileArray = Array.from(e.dataTransfer.files);
                 if (fileArray.length > 0) {
@@ -172,19 +194,17 @@ export function DropZone({
         }
     };
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (e.target.files && e.target.files.length > 0) {
-            const fileArray = Array.from(e.target.files);
+    const handleInputFiles = (fileList: FileList | null) => {
+        if (fileList && fileList.length > 0) {
+            const fileArray = Array.from(fileList);
 
             // Check if there are directories (with webkitRelativePath)
-            const hasDirectories = fileArray.some(
-                (file) => (file as any).webkitRelativePath && (file as any).webkitRelativePath.includes("/"),
-            );
+            const hasDirectories = fileArray.some((file) => file.webkitRelativePath?.includes('/'));
 
             if (hasDirectories) {
                 // Count the unique top-level directories
                 const topLevelDirs = new Set(
-                    fileArray.map((file) => (file as any).webkitRelativePath?.split("/")[0]).filter(Boolean),
+                    fileArray.map((file) => file.webkitRelativePath.split('/')[0]).filter(Boolean),
                 );
 
                 const folderCount = topLevelDirs.size;
@@ -211,46 +231,47 @@ export function DropZone({
     };
 
     const selectFile = () => {
-        const fileInput = document.createElement("input");
-        fileInput.type = "file";
+        const fileInput = document.createElement('input');
+        fileInput.type = 'file';
         fileInput.multiple = true;
-        fileInput.accept = "*";
+        fileInput.accept = '*';
         fileInput?.click();
-        fileInput.onchange = (event) => {
-            handleChange(event as unknown as React.ChangeEvent<HTMLInputElement>);
+        fileInput.onchange = () => {
+            handleInputFiles(fileInput.files);
         };
     };
 
     const selectFolder = () => {
-        const folderInput = document.createElement("input");
-        folderInput.type = "file";
+        const folderInput = document.createElement('input');
+        folderInput.type = 'file';
         folderInput.multiple = true;
-        folderInput.accept = "*";
-        (folderInput as any).webkitdirectory = true; // webkitdirectory is not standard but widely supported
+        folderInput.accept = '*';
+        (folderInput as HTMLInputElement & { webkitdirectory: boolean }).webkitdirectory = true; // webkitdirectory is not standard but widely supported
         folderInput?.click();
-        folderInput.onchange = (event) => {
-            handleChange(event as unknown as React.ChangeEvent<HTMLInputElement>);
+        folderInput.onchange = () => {
+            handleInputFiles(folderInput.files);
         };
     };
 
     return (
+        // biome-ignore lint/a11y/noStaticElementInteractions: drag/drop target; file selection is exposed via the buttons inside.
         <div
-            className={`flex flex-col items-center justify-center py-12 border-2 rounded-lg transition-colors ${isDragging ? "border-color-primary bg-color-primary/10" : "border-dashed border-color-border"
-                } ${className}`}
+            className={`flex flex-col items-center justify-center py-12 border-2 rounded-lg transition-colors ${
+                isDragging ? 'border-color-primary bg-color-primary/10' : 'border-dashed border-color-border'
+            } ${className}`}
             onDragOver={handleDragOver}
             onDragLeave={handleDragLeave}
             onDrop={handleDrop}
         >
             <UploadIcon
-                className={`h-12 w-12 mb-3 transition-colors ${isDragging ? "text-primary" : "text-muted/50"}`}
+                className={`h-12 w-12 mb-3 transition-colors ${isDragging ? 'text-primary' : 'text-muted/50'}`}
             />
             <p className="text-muted">{message}</p>
 
             <div className="flex gap-2 justify-center mt-2">
                 <Button onClick={selectFile}>{resolvedButtonLabel}</Button>
-                {allowFolders && (<Button onClick={selectFolder}>{t('upload.selectFolder')}</Button>)}
+                {allowFolders && <Button onClick={selectFolder}>{t('upload.selectFolder')}</Button>}
             </div>
-
         </div>
     );
-}
+}