@vertesia/ui 0.55.0 → 0.57.0

package/src/core/components/ConfirmModal.tsx

@@ -0,0 +1,51 @@
+import { TriangleAlert } from "lucide-react"
+import React, { useRef } from "react"
+import { VModal, VModalTitle, VModalFooter } from "./shadcn"
+import { Button } from "./shadcn/button"
+
+interface ConfirmModalProps {
+    title: string
+    content: string | React.ReactNode
+    onConfirm: () => void
+    onCancel: () => void
+    isOpen: boolean
+}
+
+export function ConfirmModal({ title, content, onConfirm, onCancel, isOpen }: ConfirmModalProps) {
+    const cancelButtonRef = useRef(null)
+
+    return (
+        <VModal isOpen={isOpen} onClose={onCancel} description="Confirm Modal">
+            <div className="sm:flex sm:items-start p-2">
+                <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                    <TriangleAlert className="size-6 text-red-600" aria-hidden="true" />
+                </div>
+                <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                    <VModalTitle className="leading-6" show >
+                        {title}
+                    </VModalTitle>
+                    <div className="mt-2">
+                        <div className="prose text-sm text-gray-500">
+                            {content}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <VModalFooter align="right">
+                <Button
+                    variant="destructive"
+                    onClick={onConfirm}
+                >
+                    Confirm
+                </Button>
+                <Button
+                    variant="outline"
+                    onClick={onCancel}
+                    ref={cancelButtonRef}
+                >
+                    Cancel
+                </Button>
+            </VModalFooter>
+        </VModal>
+    )
+}

package/src/core/components/DeleteModal.tsx

@@ -0,0 +1,45 @@
+import { ReactNode } from "react";
+import { ConfirmModal } from "./ConfirmModal.js";
+import { useToast } from "./toast/index.js";
+
+interface DeleteModalProps {
+    idToDelete?: string;
+    title: string;
+    content: string | ReactNode;
+    setIdToDelete: (id: string | undefined) => void;
+    deleteApi: (id: string) => Promise<any>;
+}
+export function DeleteModal({ idToDelete, title, content, setIdToDelete, deleteApi }: DeleteModalProps) {
+    const toast = useToast();
+
+    const doDelete = async () => {
+
+        if (!idToDelete) {
+            return;
+        }
+        return deleteApi(idToDelete)
+            .then(() => {
+                toast({
+                    title: 'Delete succeeded',
+                    status: 'success'
+                });
+            }).catch((err: any) => {
+                toast({
+                    title: 'Failed to delete',
+                    description: err.message ?? 'An error occurred while deleting the object',
+                    status: 'error'
+                });
+            }).finally(() => {
+                setIdToDelete(undefined);
+            });
+    };
+
+    return (
+        <ConfirmModal
+            title={title}
+            content={content}
+            isOpen={!!idToDelete}
+            onConfirm={doDelete}
+            onCancel={() => { setIdToDelete(undefined); }} />
+    );
+}

package/src/core/components/Divider.tsx

@@ -0,0 +1,11 @@
+import clsx from "clsx";
+
+
+interface DividerProps {
+    className?: string;
+}
+export function Divider({ className }: DividerProps) {
+    return (
+        <hr className={clsx("w-full h-0.5 border-t-0 bg-border", className)} />
+    )
+}

package/src/core/components/Dropdown.tsx

@@ -0,0 +1,63 @@
+import { Menu, MenuButton, MenuItems, MenuItem as _MenuItem, Transition } from '@headlessui/react';
+import clsx from 'clsx';
+import { Fragment } from 'react';
+
+interface DropdownProps {
+    trigger: React.ReactNode;
+    children: React.ReactNode | React.ReactNode[];
+}
+export function Dropdown({ trigger, children }: DropdownProps) {
+    return (
+        <Menu as="div" className="relative">
+            <MenuButton as="span" className="-m-1.5 flex items-center p-1.5">
+                {trigger}
+            </MenuButton>
+            <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
+            >
+                <MenuItems className="absolute right-0 z-10 mt-2.5 w-48 origin-top-right rounded-md bg-white dark:bg-slate-900 dark:border-slate-800 dark:border py-2 shadow-lg ring-1 ring-gray-900/5 dark:ring-slate-200/5 focus:outline-hidden">
+                    {children}
+                </MenuItems>
+            </Transition>
+        </Menu>
+    )
+}
+
+interface MenuItemProps {
+    children: React.ReactNode | React.ReactNode[]
+    onClick?: (ev: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    href?: string
+    closeOnClick?: boolean
+    isDisabled?: boolean
+}
+export function MenuItem({ children, href = '#', onClick, closeOnClick = true, isDisabled = false }: MenuItemProps) {
+    return (
+        <_MenuItem disabled={isDisabled}>
+            {
+                ({ active, close }) => (
+                    <a
+                        href={href}
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onClick && onClick(e);
+                            closeOnClick && close();
+                        }}
+                        className={clsx(
+                            active ? 'bg-gray-50 dark:bg-slate-800' : '',
+                            isDisabled ? 'opacity-50 cursor-not-allowed' : '',
+                            'block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-gray-200'
+                        )}
+                    >
+                        {children}
+                    </a>
+                )}
+        </_MenuItem>
+    )
+}

package/src/core/components/DropdownList.tsx

@@ -0,0 +1,72 @@
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from "@headlessui/react";
+import { Check, ChevronDown } from "lucide-react";
+import clsx from "clsx";
+import { Fragment } from "react";
+
+export interface IListItem {
+    id: string, name: string, description?: string
+}
+interface DropdownListProps {
+    value: IListItem;
+    items: IListItem[];
+    onChange: (item: IListItem) => void;
+}
+export function DropdownList({ items, value, onChange }: DropdownListProps) {
+    return (
+        <Listbox value={value} onChange={onChange}>
+            {({ open }) => (
+                <div className="relative">
+                    <div className="inline-flex divide-x divide-indigo-700 rounded-md shadow-2xs">
+                        <div className="inline-flex items-center gap-x-1.5 rounded-l-md bg-indigo-600 px-3 py-2 text-white shadow-2xs">
+                            {value.name && <Check className="-ml-0.5 size-5" aria-hidden="true" />}
+                            <p className="text-sm font-semibold">{value.name || ""}</p>
+                        </div>
+                        <ListboxButton className="inline-flex items-center rounded-l-none rounded-r-md bg-indigo-600 p-2 hover:bg-indigo-700 focus:outline-hidden focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-gray-50">
+                            <span className="sr-only">Change selection</span>
+                            <ChevronDown className="size-5 text-white" aria-hidden="true" />
+                        </ListboxButton>
+                    </div>
+
+                    <Transition
+                        show={open}
+                        as={Fragment}
+                        leave="transition ease-in duration-100"
+                        leaveFrom="opacity-100"
+                        leaveTo="opacity-0"
+                    >
+                        <ListboxOptions className="absolute right-0 z-10 mt-2 w-72 origin-top-right divide-y divide-gray-200 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-hidden">
+                            {items.map((option) => (
+                                <ListboxOption
+                                    key={option.id}
+                                    className={({ active }) =>
+                                        clsx(
+                                            active ? 'bg-indigo-600 text-white' : 'text-gray-900',
+                                            'cursor-default select-none p-4 text-sm'
+                                        )
+                                    }
+                                    value={option}
+                                >
+                                    {({ selected, active }) => (
+                                        <div className="flex flex-col">
+                                            <div className="flex justify-between">
+                                                <p className={selected ? 'font-semibold' : 'font-normal'}>{option.name}</p>
+                                                {selected ? (
+                                                    <span className={active ? 'text-white' : 'text-indigo-600'}>
+                                                        <Check className="size-5" aria-hidden="true" />
+                                                    </span>
+                                                ) : null}
+                                            </div>
+                                            <p className={clsx(active ? 'text-indigo-200' : 'text-gray-500', 'mt-2')}>
+                                                {option.description}
+                                            </p>
+                                        </div>
+                                    )}
+                                </ListboxOption>
+                            ))}
+                        </ListboxOptions>
+                    </Transition>
+                </div>
+            )}
+        </Listbox>
+    )
+}

package/src/core/components/EmptyCollection.tsx

@@ -0,0 +1,39 @@
+import { Plus } from "lucide-react";
+import { Button } from "./Button.js";
+
+
+interface EmptyInteractionsProps {
+    buttonLabel: string;
+    title: string;
+    onClick: () => void;
+    children: React.ReactNode | React.ReactNode[];
+}
+export function EmptyCollection({ buttonLabel, title, children, onClick }: EmptyInteractionsProps) {
+    return (
+        <div className="text-center py-12">
+            <svg
+                className="mx-auto h-12 w-12 text-gray-400 dark:text-gray-200"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                aria-hidden="true"
+            >
+                <path
+                    vectorEffect="non-scaling-stroke"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
+                />
+            </svg>
+            <h3 className="mt-2 text-sm font-semibold text-gray-500">{title}</h3>
+            <p className="mt-1 text-sm text-gray-500">{children}</p>
+            <div className="mt-6">
+                <Button onClick={onClick} size='lg'>
+                    <Plus className="-ml-0.5 mr-1.5 size-5" aria-hidden="true" />
+                    {buttonLabel}
+                </Button>
+            </div>
+        </div>
+    )
+}

package/src/core/components/FileUpload.tsx

@@ -0,0 +1,196 @@
+import { DragEventHandler, MutableRefObject, ReactNode, useRef } from "react";
+
+/**
+ * TODO: TS complains that:
+ * Type 'FileList' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.
+ * So as a quick fix aI use a for loop to convert FileList to File[]
+ * @param files
+ * @returns
+ */
+function fileListToArray(files: FileList) {
+    const ar = [];
+    for (let i = 0, l = files.length; i < l; i++) {
+        ar.push(files[i]);
+    }
+    return ar;
+}
+
+interface FileUploadInputProps {
+    onUpload: (files: File[]) => unknown;
+    children: ReactNode | ReactNode[];
+}
+export function FileUploadInput({ children, onUpload }: FileUploadInputProps) {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const _onUpload = () => {
+        if (inputRef.current?.files) {
+            onUpload(fileListToArray(inputRef.current.files));
+        }
+    };
+    return (
+        <label style={{ cursor: "pointer" }}>
+            {children}
+            <input ref={inputRef} type="file" style={{ display: "none" }} onChange={_onUpload} />
+        </label>
+    );
+}
+
+interface DropZoneProps {
+    onUpload: (files: File[]) => unknown;
+    children: ReactNode | ReactNode[];
+    height?: string;
+    border?: string;
+    borderActiveColor?: string;
+}
+//TODO implement using tailwind
+export function DropZone({ onUpload }: DropZoneProps) {
+    const dropZoneProps = useDropZone<HTMLDivElement>({ onUpload });
+
+    return (
+        <div
+            {...dropZoneProps}
+            className="flex items-center justify-center w-full h-64 border-2 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+        >
+            <label htmlFor="dropzone-file" className="flex flex-col items-center justify-center w-full h-full">
+                <div className="flex flex-col items-center justify-center pt-5 pb-6">
+                    <svg
+                        className="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
+                        aria-hidden="true"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 20 16"
+                    >
+                        <path
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
+                        />
+                    </svg>
+                    <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
+                        <span className="font-semibold">Click to upload</span> or drag and drop
+                    </p>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
+                </div>
+                <input id="dropzone-file" type="file" className="hidden" />
+            </label>
+        </div>
+    );
+}
+
+function _onDragEnter(el: any) {
+    let cnt = el.__dragOver_cnt__ || 0;
+    el.__dragOver_cnt__ = cnt + 1;
+    return !cnt; // true if first drag o ver false if dragover already recorded
+}
+
+function _onDragLeave(el: any) {
+    let cnt = el.__dragOver_cnt__;
+    if (!cnt) return false;
+    el.__dragOver_cnt__ = cnt - 1;
+    return cnt === 1; // true if leave false if not
+}
+
+function _onDrop(el: any) {
+    delete el.__dragOver_cnt__;
+}
+
+export interface IDropZoneOpts {
+    onUpload: (files: File[]) => unknown;
+    dragOverClass?: string;
+    dropEffect?: "none" | "copy" | "link" | "move";
+}
+export interface IDropZoneProps<T> {
+    onDrop: DragEventHandler<T>;
+    onDragOver: DragEventHandler<T>;
+    onDragEnter: DragEventHandler<T>;
+    onDragLeave: DragEventHandler<T>;
+    ref: MutableRefObject<T | null>;
+}
+
+export function useDropZone<T extends HTMLElement = HTMLDivElement>({
+    onUpload,
+    dragOverClass = "is-drag-over-on",
+    dropEffect = "copy",
+}: IDropZoneOpts): IDropZoneProps<T> {
+    const ref = useRef<T>(null);
+
+    const onDrop = (ev: React.DragEvent<T>) => {
+        ev.preventDefault();
+        _onDrop(ref.current);
+        ref.current?.classList.remove(dragOverClass);
+
+        const items = ev.dataTransfer.items;
+        if (items) {
+            const promises: Promise<File[]>[] = [];
+
+            const traverseFileTree = (item: any, path: string = ""): Promise<File[]> => {
+                return new Promise((resolve) => {
+                    if (item.isFile) {
+                        item.file((file: File) => {
+                            Object.defineProperty(file, "webkitRelativePath", { value: path + file.name });
+                            resolve([file]);
+                        });
+                    } else if (item.isDirectory) {
+                        const dirReader = item.createReader();
+                        const entries: Promise<File[]>[] = [];
+
+                        const readEntries = () => {
+                            dirReader.readEntries((results: any[]) => {
+                                if (!results.length) {
+                                    Promise.all(entries).then((filesArrays) => resolve(filesArrays.flat()));
+                                } else {
+                                    for (const entry of results) {
+                                        entries.push(traverseFileTree(entry, path + item.name + "/"));
+                                    }
+                                    readEntries();
+                                }
+                            });
+                        };
+
+                        readEntries();
+                    }
+                });
+            };
+
+            for (let i = 0; i < items.length; i++) {
+                const entry = items[i].webkitGetAsEntry();
+                if (entry) {
+                    promises.push(traverseFileTree(entry));
+                }
+            }
+
+            Promise.all(promises).then((filesArrays) => {
+                const allFiles = filesArrays.flat();
+                if (allFiles.length) {
+                    onUpload(allFiles);
+                }
+            });
+        }
+    };
+
+    const onDragOver = (ev: React.DragEvent<T>) => {
+        ev.preventDefault();
+        ev.dataTransfer.dropEffect = dropEffect;
+    };
+
+    const onDragEnter = () => {
+        if (_onDragEnter(ref.current)) {
+            ref.current?.classList.add(dragOverClass);
+        }
+    };
+
+    const onDragLeave = () => {
+        if (_onDragLeave(ref.current)) {
+            ref.current?.classList.remove(dragOverClass);
+        }
+    };
+
+    return {
+        onDrop,
+        onDragOver,
+        onDragEnter,
+        onDragLeave,
+        ref,
+    };
+}

package/src/core/components/Input.tsx

@@ -0,0 +1,43 @@
+import clsx from 'clsx';
+import React, { ChangeEvent } from 'react';
+
+import { X } from 'lucide-react';
+
+import { Styles } from './styles.js';
+
+interface InputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'ref' | 'onChange' | 'value'> {
+    value?: string;
+    onChange?: (value: string) => void
+    unstyled?: boolean;
+}
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ unstyled, value, onChange, className, type, ...others }: InputProps, ref) => {
+    const _onChange = (ev: ChangeEvent<HTMLInputElement>) => {
+        onChange && onChange(ev.target.value);
+    };
+
+    const _onClear = () => {
+        onChange && onChange('');
+    };
+
+    return (
+        <div style={{ position: 'relative', display: 'inline-block' }} className={clsx("w-full", className)}>
+            <input
+                type={type || 'text'}
+                value={value == null ? '' : value}
+                onChange={_onChange}
+                className={clsx('w-full', unstyled ? Styles.INPUT_UNSTYLED : Styles.INPUT, className)}
+                ref={ref}
+                {...others}
+            />
+            {
+                value && (
+                    <button onClick={_onClear} className={`absolute ${type !== 'number' ? 'right-2' : 'right-7'} top-1/2 -translate-y-1/2 size-7 text-gray-400 hover:text-red-500 cursor-pointer`}>
+                        <X />
+                    </button>
+                )
+            }
+        </div>
+    );
+})
+
+export { Input };

package/src/core/components/InputList.tsx

@@ -0,0 +1,75 @@
+import clsx from 'clsx';
+import { useState } from 'react';
+
+import { Badge } from './Badge';
+import { VInput } from './shadcn/input';
+
+interface InputListProps {
+    value?: string[];
+    onChange: (value: string[]) => void;
+    className?: string;
+    allowSpaces?: boolean;
+    delimiters?: string; // space and , by default
+    placeholder?: string;
+}
+export function InputList({ value = [], onChange, className, delimiters = ", ", placeholder }: InputListProps) {
+    const [text, setText] = useState<string>('');
+
+    const onBlur = (ev: any) => {
+        const v = ev.target.value;
+        if (v && v.trim()) {
+            onChange([...value, v.trim()])
+            setText('')
+        }
+    }
+    const onKeyDown = (ev: any) => {
+        const v = ev.target.value;
+        const isEmpty = !v.trim();
+        const key = ev.key;
+        if (key === 'Enter' || delimiters.indexOf(key) > -1) {
+            ev.preventDefault();
+            if (value && !isEmpty) {
+                onChange([...value, v.trim()])
+                setText('')
+            }
+        } else if (key === 'Backspace' && isEmpty) {
+            if (value && value.length > 0) {
+                value.pop();
+                onChange([...value])
+            }
+        }
+    }
+
+    const _onClick = (index: any): void => {
+        if (value && value.length > 0) {
+            value.splice(index, 1);
+            onChange([...value]);
+        }
+    };
+
+    return (
+        <div className={clsx(className, 'w-full space-x-1 space-y-1 flex flex-wrap w-full rounded-md py-2 px-1 text-sm border border-input bg-background dark:bg-slate-800 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2')}>
+            {
+                value && value.length > 0 &&
+                (value.map((v, index) =>
+                    <Badge variant={"secondary"} key={index} onClick={() => _onClick(index)} style={{ whiteSpace: 'nowrap' }} className='cursor-pointer'>
+                        {v}
+                    </Badge>
+                ))
+            }
+            <div>
+                <VInput
+                    clearable={false}
+                    className='placeholder:text-muted-foreground px-1'
+                    variant='unstyled'
+                    type='text'
+                    value={text}
+                    onBlur={onBlur}
+                    onKeyDown={onKeyDown}
+                    onChange={setText}
+                    placeholder={!value || value.length === 0 ? placeholder : ''}
+                />
+            </div>
+        </div>
+    )
+}

package/src/core/components/Link.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import clsx from "clsx";
+
+interface LinkProps extends React.HTMLProps<HTMLAnchorElement> {
+    underline?: 'always' | 'hover' | 'none'
+}
+export function Link({ underline = 'always', className, children, ...others }: LinkProps) {
+
+    let underlineClass: string | undefined;
+    if (underline === 'always') {
+        underlineClass = 'underline';
+    } else if (underline === 'hover') {
+        underlineClass = 'hover:underline';
+    }
+    return <a className={clsx("text-indigo-800 dark:text-indigo-300", className, underlineClass)} {...others}>{children}</a>
+}

package/src/core/components/MenuList.tsx

@@ -0,0 +1,44 @@
+import clsx from "clsx";
+import { AnchorHTMLAttributes, forwardRef } from "react";
+
+interface MenuListProps {
+    children: React.ReactNode | React.ReactNode[]
+    className?: string
+}
+export function MenuList({ className, children }: MenuListProps) {
+    return (
+        <ul className={`${className} space-y-1 flex flex-col items-start dark:px-2`}>
+            {children}
+        </ul>
+    )
+}
+
+
+interface MenuListItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    current?: boolean
+}
+
+const MenuListItem = forwardRef<HTMLAnchorElement, MenuListItemProps>(function _MenuListItem(props, ref) {
+    const { current, children, className, href = '#', onClick, ...others } = props;
+    return (
+        <li className={clsx(className, current ?
+            'bg-gray-50 text-indigo-600'
+            :
+            'text-gray-700 dark:dark:text-slate-300  hover:text-indigo-600 hover:bg-gray-50  dark:hover:bg-slate-800 dark:hover:text-slate-50 dark:border dark:border-transparent dark:hover:border-slate-50',
+            'w-full rounded-md p-2 pl-3 text-sm leading-6 font-semibold')}>
+            <a ref={ref} href={href} onClick={(e) => {
+                if (onClick) {
+                    e.preventDefault();
+                    onClick(e);
+                } else if (href === '#') {
+                    e.preventDefault();
+                }
+            }}
+                className='w-full flex items-center gap-x-3'
+                {...others}
+            >{children}</a>
+        </li>
+    )
+});
+
+MenuList.Item = MenuListItem;