@vertesia/ui 0.81.1 → 0.82.0

package/src/core/components/Modal.tsx

@@ -1,144 +0,0 @@
-import clsx from "clsx";
-import { Fragment } from "react";
-
-import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
-import { X } from "lucide-react";
-
-interface ModalProps {
-    children: React.ReactNode | React.ReactNode[];
-    isOpen: boolean;
-    onClose: () => void;
-    noCloseButton?: boolean;
-    className?: string;
-    allowOverflow?: boolean;
-    disableCloseOnClickOutside?: boolean;
-}
-export function Modal({
-    className,
-    children,
-    isOpen,
-    onClose,
-    noCloseButton = false,
-    allowOverflow = false,
-    disableCloseOnClickOutside = false,
-}: ModalProps) {
-    const setOpen = (open: boolean) => {
-        if (!open) {
-            onClose();
-        }
-    };
-
-    return (
-        <Transition show={isOpen} as={Fragment}>
-            <Dialog
-                style={{ zIndex: 50 }}
-                as="div"
-                className="relative"
-                onClose={disableCloseOnClickOutside ? () => { } : setOpen}
-            >
-                <TransitionChild
-                    as={Fragment}
-                    enter="ease-out duration-300"
-                    enterFrom="opacity-0"
-                    enterTo="opacity-100"
-                    leave="ease-in duration-200"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                    unmount
-                >
-                    <div className="fixed inset-0 bg-gray-500  dark:bg-slate-800 dark:opacity-75 opacity-75 transition-opacity" />
-                </TransitionChild>
-
-                <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
-                    <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-                        <TransitionChild
-                            as={Fragment}
-                            enter="ease-out duration-300"
-                            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                            enterTo="opacity-100 translate-y-0 sm:scale-100"
-                            leave="ease-in duration-200"
-                            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                        >
-                            <DialogPanel
-                                className={clsx(
-                                    "p-0! relative transform rounded-lg bg-white dark:bg-slate-900 text-left dark:text-slate-100 shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-md sm:p-6",
-                                    allowOverflow ? "overflow-visible" : "overflow-hidden",
-                                    className,
-                                )}
-                            >
-                                {!noCloseButton && <ModalCloseButton onClose={onClose} />}
-                                {children}
-                            </DialogPanel>
-                        </TransitionChild>
-                    </div>
-                </div>
-            </Dialog>
-        </Transition>
-    );
-}
-
-interface ModalCloseButtonProps {
-    onClose: () => void;
-}
-function ModalCloseButton({ onClose }: ModalCloseButtonProps) {
-    return (
-        <div className="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
-            <button
-                tabIndex={-1}
-                type="button"
-                className="rounded-md bg-white text-gray-400 dark:text-slate-200 dark:bg-slate-800 hover:brightness-95 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 hover:cursor-pointer"
-                onClick={onClose}
-            >
-                <span className="sr-only">Close</span>
-                <X className="size-6" aria-hidden="true" />
-            </button>
-        </div>
-    );
-}
-
-interface ModalTitleProps {
-    children: React.ReactNode | React.ReactNode[];
-    showDivider?: boolean;
-}
-export function ModalTitle({ children, showDivider = false }: ModalTitleProps) {
-    return (
-        <div className={showDivider ? "border-b-solid border-b border-b-1" : ""}>
-            <DialogTitle
-                as="h3"
-                className="py-4 pl-4 pr-8 text-base font-semibold leading-6 text-gray-900 dark:text-slate-50"
-            >
-                {children}
-            </DialogTitle>
-        </div>
-    );
-}
-
-interface ModalFooterProps {
-    showDivider?: boolean;
-    fill?: boolean;
-    justify?: "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch";
-    className?: string;
-    children: React.ReactNode | React.ReactNode[];
-}
-export function ModalFooter({ children, className = "justify-end", fill = false }: ModalFooterProps) {
-    return (
-        <div
-            className={clsx(
-                "w-full flex space-x-2 p-4 border-t-solid border-t-gray-100 dark:border-t-gray-800 border-t",
-                className || "justify-end",
-                fill ? "bg-gray-100 dark:bg-slate-800" : "",
-            )}
-        >
-            {children}
-        </div>
-    );
-}
-
-interface ModalBodyProps {
-    children: React.ReactNode | React.ReactNode[];
-    className?: string;
-}
-export function ModalBody({ children, className = "" }: ModalBodyProps) {
-    return <div className={clsx("p-4", className)}>{children}</div>;
-}

package/src/core/components/SelectBox.tsx

@@ -1,188 +0,0 @@
-import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/react";
-import { X, Check, ChevronsUpDownIcon } from "lucide-react";
-import clsx from "clsx";
-import { ComponentType, KeyboardEvent, ReactNode, SyntheticEvent, useState, useEffect, useRef } from "react";
-import { Button } from "./Button";
-import { Center } from "./Center";
-
-type OnChangeClearableSelectFn<T> = (option: T | undefined) => void;
-type OnChangeNonClearableSelectFn<T> = (option: T) => void;
-
-interface SelectBoxBaseProps<T> {
-    options: T[] | undefined
-    optionLabel?: (option: T) => ReactNode
-    value?: T
-    onChange: OnChangeNonClearableSelectFn<T>
-    className?: string
-    // compare for equality by field or comparison function
-    by?: (keyof T & string) | ((a: T, z: T) => boolean)
-    placeholder?: ReactNode
-    addNew?: () => void
-    addNewLabel?: string
-    disabled?: boolean
-    isClearable?: false
-    showFilter?: boolean | string
-    filterBy?: string | ((o: T) => string)
-    ClearIcon?: ComponentType<any>
-    clearTitle?: string | undefined
-    label?: string | undefined
-}
-interface ClearableSelectBoxProps<T> extends Omit<SelectBoxBaseProps<T>, 'isClearable' | 'onChange'> {
-    onChange: OnChangeClearableSelectFn<T>
-    isClearable: true
-}
-// interface NonClearableSelectBoxProps<T> extends Omit<SelectBoxBaseProps<T>, 'onChange'> {
-//     onChange: OnChangeNonClearableSelectFn<T>
-// }
-
-type SelectBoxProps<T> = ClearableSelectBoxProps<T> | SelectBoxBaseProps<T>
-
-function getFilterByFn<T>(filterBy?: string | ((o: T) => string)) {
-    if (!filterBy) {
-        return (o: T) => String(o).toLowerCase();
-    } else if (typeof filterBy === 'string') {
-        return (o: any) => String(o[filterBy]).toLowerCase();
-    } else {
-        return filterBy;
-    }
-}
-
-export function SelectBox<T>({ clearTitle, ClearIcon = X, showFilter, filterBy, isClearable, disabled, by, options, value, onChange, className, addNew, addNewLabel, placeholder, optionLabel = (option) => String(option), label }: SelectBoxProps<T>) {
-    const [filter, setFilter] = useState<string>();
-    const buttonRef = useRef<HTMLButtonElement>(null);
-    const [buttonWidth, setButtonWidth] = useState<number>();
-
-    useEffect(() => {
-        if (buttonRef.current) {
-            const resizeObserver = new ResizeObserver((entries) => {
-                setButtonWidth(entries[0].contentRect.width);
-            });
-            resizeObserver.observe(buttonRef.current);
-            return () => resizeObserver.disconnect();
-        }
-    }, []);
-
-    const onClear = (e: SyntheticEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (isClearable) {
-            (onChange as any)(undefined);
-        }
-    }
-    const onFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setFilter(e.target.value);
-    }
-    let filteredOptions = options || [];
-    if (showFilter === undefined) {
-        showFilter = filteredOptions?.length >= 10;
-    }
-    if (showFilter && filter) {
-        const filterLc = filter.toLowerCase();
-        const filterFn = getFilterByFn(filterBy);
-        filteredOptions = filteredOptions.filter(o => filterFn(o).includes(filterLc))
-    }
-    const onFilterKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-        if (e.key !== "Escape"
-            && e.key !== "Enter"
-            && e.key !== "ArrowDown"
-            && e.key !== "ArrowUp") {
-            e.stopPropagation()
-        }
-    }
-    return (
-        <Listbox value={value ?? undefined} onChange={onChange} by={by} disabled={disabled}>
-            {() => (
-                <div className={'overflow-y-visible ' + className}>
-                    <div className="relative">
-                        <ListboxButton
-                            ref={buttonRef}
-                            className="relative w-full cursor-default rounded-md bg-white py-1.5 text-left text-gray-900 shadow-2xs ring-1 ring-inset ring-gray-300 focus:outline-hidden focus:ring-2 focus:ring-indigo-600 dark:ring-slate-600 dark:text-slate-50 dark:bg-slate-800 sm:text-sm sm:leading-6 hover:cursor-pointer"
-                        >
-                            {label && <div className='w-full text-gray-500 text-left px-2'>{label}</div>}
-                            <span className="block truncate pl-3 pr-14">{value ? optionLabel(value) : placeholder}</span>
-                            {
-                                isClearable && value != null && <span className="absolute inset-y-0 right-0 mr-5 flex items-center pr-2" onClick={onClear}>
-                                    <ClearIcon title={clearTitle} className="size-5 text-gray-400 hover:text-red-500 cursor-pointer" aria-hidden="true" />
-                                </span>
-                            }
-                            {
-                                !disabled &&
-                                <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                                    <ChevronsUpDownIcon className="size-5 text-gray-400" aria-hidden="true" />
-                                </span>
-                            }
-                        </ListboxButton>
-                        {/*
-                        <Transition
-                            show={open}
-                            as={Fragment}
-                            leave="transition ease-in duration-100"
-                            leaveFrom="opacity-100"
-                            leaveTo="opacity-0"
-                        >
-                            */}
-                        <ListboxOptions
-                            anchor="bottom"
-                            style={{ width: buttonWidth, zIndex: 100000000 }}
-                            className="absolute z-10 mt-1 overflow-auto rounded-md bg-white dark:ring-slate-600 dark:text-slate-50 dark:bg-slate-800 py-1 text-base shadow-lg ring-1 ring-gray-300 ring-opacity-5 focus:outline-hidden sm:text-sm"
-                        >
-                            {showFilter &&
-                                <div className="p-1">
-                                    <input type="text" value={filter || ''} onKeyDown={onFilterKeyDown} onChange={onFilterChange} className="w-full p-1 border border-gray-300 rounded-md dark:bg-slate-700 dark:text-slate-50" placeholder="Filter..." />
-                                </div>
-                            }
-                            <div className="overflow-y-auto max-h-60">
-                                {filteredOptions.map((option, i) =>
-                                    <ListOption key={i} option={option} optionLabel={optionLabel} className="hover:cursor-pointer"></ListOption>
-                                )}
-                            </div>
-                            {addNew &&
-                                <Center className="font-semibold py-2 border-t">
-                                    <Button variant='secondary' onClick={addNew}>{addNewLabel}</Button>
-                                </Center>
-                            }
-                        </ListboxOptions>
-
-                        {/*</Transition>*/}
-                    </div>
-                </div>
-            )
-            }
-        </Listbox >
-    )
-}
-
-
-export function ListOption<T>({ option, optionLabel, onClick, className }: { option: T, optionLabel: (option: T) => ReactNode, onClick?: () => void, value?: T, className?: string }) {
-    return (
-        <ListboxOption
-            className={({ active }) =>
-                clsx(
-                    active ? 'bg-indigo-600 text-white dark:bg-indigo-800 dark:text-white' : 'text-gray-900 dark:text-slate-50',
-                    'relative cursor-default select-none py-2 pl-3 pr-9',
-                    className
-                )
-            }
-            value={option}
-            onClick={onClick}
-        >
-            {({ selected, active }) => (
-                <>
-                    <div className={clsx(selected ? 'font-semibold' : 'font-inherit', 'block truncate')}>
-                        {optionLabel(option)}
-                    </div>
-
-                    {selected ? (
-                        <div
-                            className={clsx(
-                                active ? 'text-white' : 'text-indigo-600',
-                                'absolute inset-y-0 right-0 flex items-center pr-4'
-                            )}
-                        >
-                            <Check className="size-5" aria-hidden="true" />
-                        </div>
-                    ) : null}
-                </>
-            )}
-        </ListboxOption>)
-}

package/src/core/components/tabs/Tabs.tsx

@@ -1,132 +0,0 @@
-import clsx from 'clsx';
-import { ComponentType, isValidElement, ReactNode, SyntheticEvent, useEffect, useState } from 'react';
-
-import { Tab, TabsContext, useTabs } from './TabsContext.js';
-
-function applyCurrentTab(tabs: Tab[], current?: string | (() => string)) {
-    const name = typeof current === 'function' ? current() : current;
-    let currentTab: Tab | null = null;
-    const newTabs = [];
-    for (const tab of tabs) {
-        const newTab = { ...tab };
-        newTab.current = false;
-        newTabs.push(newTab);
-        if (newTab.name === name) {
-            currentTab = newTab;
-        }
-    }
-    if (!currentTab) {
-        currentTab = newTabs[0];
-    }
-    currentTab.current = true;
-    return newTabs;
-}
-
-interface TabsProps {
-    current?: string | (() => string);
-    /**
-     * Return false to prevent the tab from being selected
-     * @param tab
-     * @returns
-     */
-    onSelect?: (tab: Tab) => void | boolean;
-    tabs: Tab[];
-    children: ReactNode | ReactNode[];
-    navigate?: (path: string) => void;
-}
-export function Tabs({ current, onSelect, tabs, children, navigate }: TabsProps) {
-    const [_tabs, _setTabs] = useState<Tab[]>([]);
-    useEffect(() => {
-        _setTabs(applyCurrentTab(tabs, current));
-    }, [current, tabs]);
-    const context = {
-        tabs: _tabs,
-        select: (tab: Tab) => {
-            if (onSelect) {
-                if (onSelect(tab) === false) {
-                    return;
-                }
-            }
-            if (tab.href) {
-                if (navigate) {
-                    navigate(tab.href);
-                } else {
-                    window.location.href = tab.href;
-                }
-            } else {
-                _setTabs([...applyCurrentTab(_tabs, tab.name)]);
-            }
-        }
-    };
-
-    return (
-        <TabsContext.Provider value={context}>
-            <div className="flex flex-col h-full">
-                {children}
-            </div>
-        </TabsContext.Provider>
-    );
-}
-
-interface TabsBarProps {
-    actions?: ReactNode | ReactNode[];
-    className?: string;
-}
-export function TabsBar({ actions, className }: TabsBarProps) {
-    const { tabs, select } = useTabs();
-    const _onClick = (e: SyntheticEvent, tab: Tab) => {
-        e.preventDefault();
-        e.stopPropagation();
-        // ignore if disabled
-        !tab.disabled && select(tab);
-    };
-
-    return (
-        <div className="border-b flex items-start justify-between">
-            <nav className="flex space-x-4 px-4" aria-label="Tabs">
-                {tabs.map((tab) => {
-                    const cursor = tab.disabled ? 'cursor-not-allowed' : 'cursor-pointer';
-                    return (
-                        <a
-                            key={tab.name}
-                            href={tab.href || '#' + tab.name}
-                            onClick={(e) => _onClick(e, tab)}
-                            className={clsx(
-                                tab.current
-                                    ? 'border-indigo-500 text-indigo-600 dark:border-indigo-400 dark:text-indigo-50'
-                                    : 'border-transparent text-gray-500 dark:text-slate-300 hover:border-slate-400 hover:text-gray-700 dark:hover:border-slate-200 dark:hover:text-gray-200 ',
-                                className,
-                                'whitespace-nowrap border-b-2 py-2 px-1 text-sm font-medium',
-                                cursor
-                            )}
-                            aria-current={tab.current ? 'page' : undefined}
-                        >
-                            {tab.label}
-                        </a>
-                    );
-                })}
-            </nav>
-            <div className="flex gap-x-1">{actions}</div>
-        </div>
-    );
-}
-
-interface TabsPanelProps { }
-export function TabsPanel({ }: TabsPanelProps) {
-    const { tabs } = useTabs();
-    const content = tabs.find((t) => t.current)?.content;
-    if (!content) {
-        return null;
-    }
-
-    if (isValidElement(content)) {
-        return <div className="h-full overflow-y-auto flex-1">{content}</div>;
-    }
-
-    const Component = content as unknown as ComponentType;
-    return (
-        <div className="h-full overflow-y-auto flex-1">
-            <Component />
-        </div>
-    );
-}

package/src/core/components/tabs/TabsContext.ts

@@ -1,25 +0,0 @@
-import { ReactNode, createContext, useContext } from "react";
-
-export interface Tab {
-    name: string;
-    current?: boolean;
-    href?: string;
-    label: ReactNode;
-    content: ReactNode;
-    disabled?: boolean;
-}
-
-export interface TabsContextProps {
-    tabs: Tab[];
-    select: (tab: Tab) => void;
-}
-
-export function useTabs() {
-    return useContext(TabsContext);
-}
-
-const TabsContext = createContext<TabsContextProps>({} as TabsContextProps);
-
-export {
-    TabsContext
-};

package/src/core/components/tabs/index.ts

@@ -1,2 +0,0 @@
-export * from "./Tabs.js";
-export * from "./TabsContext.js";