@vertesia/ui 0.60.0 → 0.61.0

package/src/features/store/types/SelectContentType.tsx

@@ -0,0 +1,88 @@
+import { ContentObjectTypeItem } from "@vertesia/common";
+import { VSelectBox } from "@vertesia/ui/core";
+import { useUserSession } from "@vertesia/ui/session";
+import { useEffect, useState } from "react";
+
+const optionLabel = (t: ContentObjectTypeItem | null) => {
+    if (t === null) return 'None';
+
+    return (
+        <div>
+            <div className="text-sm">{t.name}</div>
+            <div className="text-xs text-gray-500">{t.description}</div>
+        </div>
+    );
+};
+
+interface SelectContentTypeProps {
+    defaultValue?: string | string[] | null; // the typeId
+    onChange: (type: ContentObjectTypeItem | null | ContentObjectTypeItem[]) => void;
+    className?: string;
+    isClearable?: boolean;
+    multiple?: boolean;
+}
+export function SelectContentType({ className, defaultValue, onChange, isClearable, multiple}: SelectContentTypeProps) {
+    const session = useUserSession();
+    const [isMounted, setIsMounted] = useState(false);
+    const [selectedType, setSelectedType] = useState<ContentObjectTypeItem | undefined>();
+    const [selectedTypes, setSelectedTypes] = useState<ContentObjectTypeItem[]>([])
+
+    useEffect(() => {
+        if (!isMounted) {
+            setIsMounted(true);
+            if (session.typeRegistry && defaultValue) {
+                if (multiple && Array.isArray(defaultValue)) {
+                    const types = session.typeRegistry.types.filter(t => defaultValue.includes(t.id));
+                    setSelectedTypes(types);
+                }
+                const type = session.typeRegistry.types.find(t => t.id === defaultValue);
+                if (type) {
+                    setSelectedType(type);
+                }
+            }
+        }
+    }, [session.typeRegistry, defaultValue, multiple])
+
+    const _onChange = (option: ContentObjectTypeItem | null) => {
+        setSelectedType(option || undefined);
+        onChange(option);
+    };
+
+    const _onChangeMultiple = (options: ContentObjectTypeItem[]) => {
+        setSelectedTypes(options);
+        onChange(options);
+    };
+
+    if (multiple) {
+        return (
+            <div className='flex flex-col gap-4 content-between'>
+                <VSelectBox<ContentObjectTypeItem>
+                    options={session.typeRegistry?.types || []}
+                    value={selectedTypes}
+                    onChange={_onChangeMultiple}
+                    placeholder="Choose Content Types..."
+                    optionLabel={optionLabel}
+                    className={className || "text-sm bg-background"}
+                    filterBy="name"
+                    isClearable={isClearable || false as any}
+                    multiple
+                />
+            </div>
+        );
+    }
+
+    return (
+        <div className='flex flex-col gap-4 content-between'>
+            <VSelectBox<ContentObjectTypeItem>
+                options={session.typeRegistry?.types || []}
+                value={selectedType}
+                onChange={_onChange}
+                placeholder="Choose a Content Type..."
+                optionLabel={optionLabel}
+                className={className || "text-sm bg-background"}
+                filterBy="name"
+                isClearable={isClearable || false as any}
+            />
+        </div>
+    );
+}

package/src/features/store/types/SelectContentTypeModal.tsx

@@ -0,0 +1,142 @@
+import { useState, ReactNode } from "react";
+import {
+    Button,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    ModalTitle,
+    SelectBox,
+} from "@vertesia/ui/core";
+import { ContentObjectTypeItem } from "@vertesia/common";
+import { useUserSession } from "@vertesia/ui/session";
+import { CheckCircleIcon } from "lucide-react";
+
+/**
+ * Props for the SelectTypeModal component
+ */
+interface SelectContentTypeModalProps {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Callback when the modal is closed */
+    onClose: (typeId?: string | null | undefined) => void;
+    /** Title for the modal */
+    title?: string;
+    /** Children to render in the modal */
+    children?: ReactNode;
+    /** Optional initial selected type */
+    initialSelectedType?: ContentObjectTypeItem | null;
+    /** Optional description text */
+    description?: string;
+    /** Label for the confirm button */
+    confirmLabel?: string;
+    /** Whether to allow the "None" option */
+    allowNone?: boolean;
+}
+
+/**
+ * A dedicated modal for selecting content types.
+ *
+ * This is a lightweight modal specifically for selecting a content type,
+ * without any file upload functionality. Used for changing types, setting
+ * types in other contexts, etc.
+ */
+export function SelectContentTypeModal({
+    isOpen,
+    onClose,
+    title = "Select Content Type",
+    children,
+    initialSelectedType = null,
+    confirmLabel = "Select Type",
+    allowNone = true,
+}: SelectContentTypeModalProps) {
+    const { typeRegistry } = useUserSession();
+    const [selectedType, setSelectedType] = useState<ContentObjectTypeItem | null>(initialSelectedType);
+
+    // Get available types from the registry
+    const types = typeRegistry?.types || [];
+
+    // Handle close/cancel
+    const handleClose = () => {
+        onClose(undefined);
+    };
+
+    // Handle type selection and confirmation
+    const handleConfirm = () => {
+        onClose(selectedType?.id ?? null);
+    };
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            onClose={handleClose}
+            className="w-full max-w-xl mx-auto"
+        >
+            <ModalTitle>{title}</ModalTitle>
+            <ModalBody className="p-6">
+                {children}
+
+                {/* Type selection */}
+                <div className="mb-4 mt-4">
+                    <label className="block text-sm font-medium mb-2">
+                        Content Type {allowNone && <span className="text-gray-500 font-normal">(Optional)</span>}
+                    </label>
+                    {allowNone ? (
+                        <SelectBox
+                            options={types}
+                            value={selectedType}
+                            optionLabel={(type) => type ? type.name : 'Select a content type'}
+                            placeholder="Select a content type or leave empty for automatic detection"
+                            onChange={(selected: ContentObjectTypeItem | null | undefined) => setSelectedType(selected || null)}
+                            filterBy="name"
+                            isClearable={true}
+                        />
+                    ) : (
+                        <SelectBox
+                            options={types}
+                            value={selectedType}
+                            optionLabel={(type) => type ? type.name : 'Select a content type'}
+                            placeholder="Select a content type"
+                            onChange={(selected: ContentObjectTypeItem | null | undefined) => setSelectedType(selected || null)}
+                            filterBy="name"
+                        />
+                    )}
+
+                    {allowNone && (
+                        <div className="mt-2 text-sm text-blue-600 flex items-center">
+                            <CheckCircleIcon className="h-4 w-4 mr-1" />
+                            <span><strong>Type selection is optional.</strong> Leave empty to let Vertesia choose the appropriate type</span>
+                        </div>
+                    )}
+                </div>
+
+                {selectedType ? (
+                    <div className="text-sm text-gray-500 bg-gray-50 p-3 rounded-md mb-4">
+                        <div className="font-medium">{selectedType.name}</div>
+                        {selectedType.description && (
+                            <div className="mt-1">{selectedType.description}</div>
+                        )}
+                    </div>
+                ) : allowNone && (
+                    <div className="text-sm text-blue-600 bg-blue-50 p-3 rounded-md mb-4">
+                        <div className="font-medium">Automatic Type Detection</div>
+                        <div className="mt-1">
+                            Vertesia will analyze each file&apos;s content and automatically select the most appropriate type.
+                            <br />
+                            <span className="mt-1 block font-medium">This is recommended for most uploads.</span>
+                        </div>
+                    </div>
+                )}
+            </ModalBody>
+            <ModalFooter>
+                <Button variant="ghost" onClick={handleClose}>
+                    Cancel
+                </Button>
+                <Button
+                    onClick={handleConfirm}
+                >
+                    {selectedType ? `${confirmLabel}: ${selectedType.name}` : allowNone ? "Let Vertesia Choose" : confirmLabel}
+                </Button>
+            </ModalFooter>
+        </Modal>
+    );
+}

package/src/features/store/types/TableLayoutEditor.tsx

@@ -0,0 +1,104 @@
+import { basicSetup } from 'codemirror';
+import { useMemo, useRef, useState } from 'react';
+import { json } from '@codemirror/lang-json';
+import { ColumnLayout, ContentObjectType } from '@vertesia/common';
+import { Button, useToast } from '@vertesia/ui/core';
+import { useUserSession } from '@vertesia/ui/session';
+import { CodeMirrorEditor, EditorApi } from '@vertesia/ui/widgets';
+
+const extensions = [basicSetup, json()];
+
+interface TableLayoutEditorProps {
+    objectType: ContentObjectType;
+    onLayoutUpdate: (value: ColumnLayout[] | undefined) => void;
+}
+export function TableLayoutEditor({ objectType, onLayoutUpdate }: TableLayoutEditorProps) {
+    const toast = useToast();
+
+    const [isUpdating, setUpdating] = useState(false);
+    const { store } = useUserSession();
+
+    const editorRef = useRef<EditorApi | undefined>(undefined);
+
+    const value = useMemo(() => {
+        return stringifyTableLayout(objectType.table_layout);
+    }, [objectType.table_layout])
+
+    const validationError = (title: string, message: string) => {
+        toast({
+            status: 'error',
+            title: title,
+            description: message,
+            duration: 5000
+        })
+    }
+
+    const onSave = () => {
+        if (!editorRef.current) {
+            return;
+        }
+        const value = editorRef.current.getValue();
+        let table_layout: ColumnLayout[] | null;
+        if (!value) {
+            table_layout = null;
+        } else {
+            try {
+                table_layout = JSON.parse(value);
+            } catch (err: any) {
+                return validationError('Invalid JSON', err.message);
+            }
+        }
+
+        if (!Array.isArray(table_layout)) {
+            return validationError('Invalid JSON', 'The table layout must be an array');
+        }
+        if (table_layout.some((col) => !col || !col.name || !col.field)) {
+            return validationError('Invalid JSON', 'A table layout entry must contain the following properties:] {field, name, converter?}');
+        }
+
+        setUpdating(true);
+        store.types.update(objectType.id, {
+            table_layout
+        }).then((response) => {
+            toast({
+                status: 'success',
+                title: 'Table Layout updated',
+                description: 'The table layout has been updated successfully',
+                duration: 2000
+            });
+            onLayoutUpdate(response.table_layout);
+        }).catch((err) => {
+            toast({
+                status: 'error',
+                title: 'Failed to update table layout',
+                description: err.message,
+                duration: 5000
+            })
+        }).finally(() => {
+            setUpdating(false);
+        });
+    }
+
+
+    return (
+        <div className="mx-2 my-2 rounded-md border border-solid shadow-xs">
+            <div className="flex items-center rounded-t-md gap-x-2 bg-gray-50 dark:bg-slate-800 py-2 px-2">
+                <div className="text-lg font-semibold ">Table Layout Editor</div>
+                <div className="ml-auto flex gap-x-2">
+                    <Button isLoading={isUpdating} variant="secondary" onClick={onSave}>Save Changes</Button>
+                </div>
+            </div>
+            <div className="px-4 py-2">
+                <CodeMirrorEditor value={value} extensions={extensions} editorRef={editorRef} />
+            </div>
+        </div>
+    )
+}
+
+
+export function stringifyTableLayout(obj: any) {
+    if (!obj) {
+        return '[\n\n]';
+    }
+    return JSON.stringify(obj, null, 2);
+}

package/src/features/store/types/index.ts

@@ -0,0 +1,10 @@
+export * from "./ContentObjectTypesSearch";
+export * from "./ContentObjectTypesTable";
+export * from "./ContentObjectTypesView";
+export * from "./ContentObjectTypeView";
+export * from "./CreateOrUpdateTypeModal";
+export * from "./ObjectSchemaEditor";
+export * from "./search";
+export * from "./SelectContentType";
+export * from "./SelectContentTypeModal";
+export * from "./TableLayoutEditor";

package/src/features/store/types/search/ObjectTypeSearchContext.tsx

@@ -0,0 +1,119 @@
+import { ContentObjectTypeItem, ObjectTypeSearchQuery } from "@vertesia/common";
+import { VertesiaClient, ZenoClient } from "@vertesia/client";
+import { SharedState, useWatchSharedState } from "@vertesia/ui/core";
+import { createContext, useContext } from "react";
+
+
+interface ObjectTypeSearchResult {
+    objects: ContentObjectTypeItem[],
+    error?: Error;
+    isLoading: boolean;
+}
+
+export class ObjectTypeSearch {
+    result = new SharedState<ObjectTypeSearchResult>({ objects: [], isLoading: false });
+
+    query: ObjectTypeSearchQuery = {};
+
+    constructor(public client: VertesiaClient | ZenoClient, public limit = 100) { }
+
+    get objects() {
+        return this.result.value.objects;
+    }
+
+    get error() {
+        return this.result.value.error;
+    }
+
+    get isRunning() {
+        return this.result.value.isLoading;
+    }
+
+    getFilterValue(name: string) {
+        return (this.query as any)[name];
+    }
+
+    setFilterValue(name: string, value: any) {
+        (this.query as any)[name] = value;
+        this.search();
+    }
+
+    reset(isLoading = false) {
+        this.result.value = {
+            objects: [],
+            isLoading
+        };
+    }
+
+    _updateRunningState(value: boolean) {
+        const prev = this.result.value;
+        this.result.value = {
+            objects: prev.objects,
+            isLoading: value,
+            error: prev.error
+        }
+    }
+
+    async _search(loadMore = false) {
+        if (this.isRunning) {
+            return Promise.resolve(false);
+        }
+        this.result.value = {
+            isLoading: true,
+            objects: loadMore ? this.objects : [],
+        }
+        const limit = this.limit;
+        const offset = this.objects.length;
+        return this.client.types.list({
+            limit,
+            offset,
+            query: this.query
+        }).then(async (result) => {
+            this.result.value = {
+                isLoading: false,
+                objects: this.objects.concat(result)
+            }
+            return true;
+        }).catch((err) => {
+            this.result.value = {
+                error: err,
+                isLoading: false,
+                objects: this.objects
+            }
+            throw err;
+        })
+    }
+
+    search() {
+        if (this.isRunning) {
+            return Promise.resolve(false);
+        }
+        return this._search(false);
+    }
+
+    loadMore() {
+        if (this.isRunning) {
+            return Promise.resolve(false);
+        }
+        return this._search(true);
+    }
+}
+
+const ObjectTypeSearchContext = createContext<ObjectTypeSearch | undefined>(undefined);
+
+export function useSearch() {
+    return useContext(ObjectTypeSearchContext)!;
+}
+
+export function useWatchSearchResult() {
+    const search = useSearch();
+    const result = useWatchSharedState(search.result);
+    return { ...result, search };
+}
+
+export function useSearchCount() {
+    const search = useSearch();
+    return search.objects.length;
+}
+
+export { ObjectTypeSearchContext };

package/src/features/store/types/search/ObjectTypeSearchProvider.tsx

@@ -0,0 +1,24 @@
+import { useUserSession } from "@vertesia/ui/session";
+import React, { useMemo } from "react";
+import { ObjectTypeSearch, ObjectTypeSearchContext } from "./ObjectTypeSearchContext";
+
+interface SearchProviderProps {
+    children: React.ReactNode;
+    limit?: number;
+    offset?: number;
+    name?: string;
+    chunkable?: boolean;
+}
+export function ObjectTypeSearchProvider({ children, limit, name, chunkable: chunkable }: SearchProviderProps) {
+    const { store } = useUserSession();
+    const search = useMemo(() => {
+        const search = new ObjectTypeSearch(store, limit);
+        search.query.name = name;
+        search.query.chunkable = chunkable;
+        return search;
+    }, [limit]);
+
+    return (
+        <ObjectTypeSearchContext.Provider value={search}>{children}</ObjectTypeSearchContext.Provider>
+    )
+}

package/src/features/store/types/search/index.ts

@@ -0,0 +1,2 @@
+export * from "./ObjectTypeSearchContext";
+export * from "./ObjectTypeSearchProvider";

package/src/features/user/UserAvatar.tsx

@@ -0,0 +1,34 @@
+import { AuthTokenPayload, UserRef } from "@vertesia/common";
+
+/**
+ * UserAvatar
+ * Show user picture, name and email
+ **/
+
+export function UserAvatar({ user }: { user: AuthTokenPayload | UserRef; }) {
+
+    const userPicture = () => {
+        if (!user.picture) {
+            const initials = user.name.split(' ').map((n) => n[0]).join('');
+            return <span className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600">
+                <span className="text-sm font-medium leading-none text-white">{initials}</span>
+            </span>
+        } else {
+            return <img className="inline-block h-9 w-9 rounded-full"
+                src={user.picture}
+                alt={user.name} />
+        }
+    }
+
+    return (
+        <div className="flex items-center">
+            <div className="w-9 h-9">
+                {userPicture()}
+            </div>
+            <div className="ml-3">
+                <p className="text-sm font-medium text-gray-700 dark:text-slate-50 group-hover:text-gray-900">{user.name ?? 'Deleted User'}</p>
+                <p className="text-xs font-medium text-gray-500 dark:text-slate-300 group-hover:text-gray-700">{user.email ?? 'Deleted User'}</p>
+            </div>
+        </div>
+    );
+}