@vertesia/ui 0.24.0-dev.202601221707

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,41 @@
+import { Plus } from "lucide-react";
+import { Button } from "@vertesia/ui/core";
+
+
+interface EmptyInteractionsProps {
+    buttonLabel: string;
+    title: string;
+    onClick: () => void;
+    children: React.ReactNode | React.ReactNode[];
+}
+export function EmptyCollection({ buttonLabel, title, children, onClick }: EmptyInteractionsProps) {
+    return (
+        <div className="flex items-center justify-center h-full text-center">
+            <div className="py-12">
+                <svg
+                    className="mx-auto size-12"
+                    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">{title}</h3>
+                <p className="mt-1 text-sm text-muted">{children}</p>
+                <div className="mt-6">
+                    <Button onClick={onClick}>
+                        <Plus className="-ml-0.5 mr-1.5 size-5" aria-hidden="true" />
+                        {buttonLabel}
+                    </Button>
+                </div>
+            </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/FormItem.tsx

@@ -0,0 +1,36 @@
+import clsx from 'clsx';
+import { ReactNode } from 'react';
+
+import { VTooltip } from './shadcn/tooltip';
+import { Info } from 'lucide-react';
+
+interface FormItemProps {
+    label: any;
+    children: ReactNode;
+    className?: string;
+    description?: ReactNode;
+    required?: boolean;
+    direction?: "row" | "column";
+    disabled?: boolean;
+}
+export function FormItem({ description, required, label, className, direction = "column", children, disabled = false }: FormItemProps) {
+    return (
+        <div className={clsx("flex w-full space-y-1", className, direction === "row" ? "flex-row justify-between items-center gap-2" : "flex-col")}>
+            <div className='flex items-center gap-1'>
+                <label className={`text-sm font-medium mb-1 ${disabled ? "text-muted" : ""}`}>
+                    {label}{required ? <span className='text-destructive -mt-4 ml-1'>*</span> : ""}
+                </label>
+                {
+                    description &&
+                    <div className='mx-2 flex w-4 items-center'>
+                        <VTooltip
+                            description={description}>
+                            <Info className="size-3 text-muted" />
+                        </VTooltip>
+                    </div>
+                }
+            </div>
+            {children}
+        </div>
+    );
+}

package/src/core/components/InputList.tsx

@@ -0,0 +1,112 @@
+import clsx from 'clsx';
+import React, { useState } from 'react';
+
+import { Badge } from './Badge';
+import { Input } from './shadcn/input';
+import { VTooltip } from '@vertesia/ui/core';
+
+interface InputListProps {
+    value?: string[];
+    onChange: (value: string[]) => void;
+    className?: string;
+    allowSpaces?: boolean;
+    delimiters?: string; // space and , by default
+    placeholder?: string;
+    autoFocus?: boolean;
+}
+export function InputList({ value = [], onChange, className, delimiters = ", ", placeholder, autoFocus }: 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 onPaste = (ev: React.ClipboardEvent<HTMLInputElement>) => {
+        const pastedText = ev.clipboardData.getData('text');
+        if (pastedText) {
+            ev.preventDefault();
+
+            // Create a regex pattern from delimiters
+            const delimiterPattern = delimiters.split('').map((char: string) =>
+                char === ' ' ? '\\s' : char.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+            ).join('|');
+            const regex = new RegExp(`[${delimiterPattern}]+`);
+
+            // Split the pasted text by delimiters and filter out empty values
+            const newValues = pastedText
+                .split(regex)
+                .map((item: string) => item.trim())
+                .filter((item: string) => item.length > 0);
+
+            if (newValues.length > 0) {
+                onChange([...value, ...newValues]);
+            }
+
+            setText('');
+        }
+    }
+
+    const _onClick = (index: any): void => {
+        if (value && value.length > 0) {
+            value.splice(index, 1);
+            onChange([...value]);
+        }
+    };
+
+    return (
+        <div className={clsx(className,
+            'w-full flex flex-wrap items-center gap-1 p-2 py-1.5',
+            'rounded-md text-sm rounded-md border border-input bg-background ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted focus-visible:outline-none focus-visible:ring-1 ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50')}>
+            {
+                value && value.length > 0 &&
+                (value.map((v, index) =>
+                    <VTooltip description={'click to remove'} key={index}>
+                        <Badge
+                            variant={"secondary"}
+                            key={index}
+                            onClick={() => _onClick(index)}
+                            className='cursor-pointer flex-shrink-0 hover:bg-destructive hover:text-destructive transition-colors'
+                            title={v}
+                        >
+                            <span className='break-all'>{v}</span>
+                        </Badge>
+                    </VTooltip>
+                ))
+            }
+            <Input
+                clearable={false}
+                className='placeholder:text-muted px-1 flex-1 min-w-[120px]'
+                variant='unstyled'
+                type='text'
+                value={text}
+                onBlur={onBlur}
+                onKeyDown={onKeyDown}
+                onPaste={onPaste}
+                onChange={setText}
+                placeholder={!value || value.length === 0 ? placeholder : ''}
+                autoFocus={autoFocus}
+            />
+        </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,41 @@
+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`}>
+            {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-muted' : '',
+            'w-full p-2 pl-3 text-sm leading-6 font-semibold hover:bg-muted')}>
+            <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;

package/src/core/components/MessageBox.tsx

@@ -0,0 +1,101 @@
+import { CircleX, CircleCheck, AlertTriangle, Info } from 'lucide-react';
+import React from 'react';
+
+interface MessageBoxProps {
+    status: 'error' | 'info' | 'warning' | 'success' | 'default' | 'done'
+    icon?: React.ReactNode
+    title?: string
+    children: React.ReactNode | React.ReactNode[]
+    className?: string
+}
+export function MessageBox({ icon, status, title, children, className }: MessageBoxProps) {
+
+    let defaultIcon, titleColor, textColor, bgColor;
+    switch (status) {
+        case 'error': {
+            defaultIcon = <CircleX className="size-5 text-destructive" aria-hidden="true" />
+            titleColor = "";
+            textColor = "text-foreground";
+            bgColor = "bg-destructive border border-destructive";
+            break;
+        }
+        case 'warning': {
+            defaultIcon = <AlertTriangle className="size-5 text-attention" aria-hidden="true" />
+            titleColor = "";
+            textColor = "text-foreground";
+            bgColor = "bg-attention border border-attention";
+            break;
+        }
+        case 'success': {
+            defaultIcon = <CircleCheck className="size-5 text-success" aria-hidden="true" />
+            titleColor = "";
+            textColor = "text-foreground";
+            bgColor = "bg-success border border-success";
+            break;
+        }
+        case 'info': {
+            defaultIcon = <Info className="size-5 text-info" aria-hidden="true" />
+            titleColor = "";
+            textColor = "text-foreground";
+            bgColor = "bg-info border border-info";
+            break;
+        }
+        case 'default': {
+            defaultIcon = <Info className="size-5 text-muted" aria-hidden="true" />
+            titleColor = "";
+            textColor = "text-foreground";
+            bgColor = "bg-muted border border-muted";
+            break;
+        }
+        case 'done': {
+            defaultIcon = <Info className="size-5 text-done" aria-hidden="true" />
+            titleColor = "";
+            textColor = "text-foreground";
+            bgColor = "bg-done border border-done";
+            break;
+        }
+    }
+
+    return (
+        <div className={`rounded-md p-4 ${bgColor} ${className}`}>
+            <div className="flex">
+                <div className="shrink-0">
+                    {icon ?? defaultIcon}
+                </div>
+                <div className="w-full ml-2 px-1">
+                    {title && <h3 className={`text-sm font-medium mb-2 ${titleColor}`}>{title}</h3>}
+                    <div className={`text-sm ${textColor} break-words`}>
+                        {children}
+                    </div>
+                </div>
+            </div>
+        </div >
+    )
+}
+
+export function ErrorBox({ title, className, children }: { title: string, className?:string, children: React.ReactNode }) {
+    return (
+        <MessageBox status="error" title={title} className={className}>
+            <pre className="whitespace-pre-wrap break-words">
+                {children}
+            </pre>
+        </MessageBox>
+    );
+}
+
+export function InfoBox({ title, className, children }: { title: string, className?:string, children: React.ReactNode }) {
+    return <MessageBox status="info" title={title} className={className}>{children}</MessageBox>
+}
+
+export function WarningBox({ title, className, children }: { title: string, className?:string, children: React.ReactNode }) {
+    return <MessageBox status="warning" title={title} className={className}>{children}</MessageBox>
+}
+
+export function SuccessBox({ title, className, children }: { title: string, className?:string, children: React.ReactNode }) {
+    return <MessageBox status="success" title={title} className={className}>{children}</MessageBox>
+}
+
+export function DefaultBox({ title, className, children }: { title: string, className?:string, children: React.ReactNode }) {
+    return <MessageBox status="default" title={title} className={className}>{children}</MessageBox>
+}
+