@vertesia/ui 0.24.0-dev.202601221707

package/src/core/components/SelectBox.tsx

@@ -0,0 +1,188 @@
+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/SelectList.tsx

@@ -0,0 +1,95 @@
+import { Check } from "lucide-react";
+import clsx from "clsx";
+import { ReactNode, useMemo, useState } from "react";
+import { Input } from "./shadcn";
+
+const Default_Option_Style = "flex-1 px-2 py-2 hover:bg-accent nowrap";
+
+export interface OptionLayout {
+    label?: ReactNode;
+    check?: ReactNode;
+    reverse?: boolean; // whether to reverse the layout and show the check box on the right
+    className?: string;
+}
+
+function defaultOptionLayout<T>(option: T, isSelected: boolean): OptionLayout {
+    return {
+        label: String(option),
+        check: isSelected ? <Check className='size-4' /> : <div className="size-4" />,
+        reverse: false,
+        className: Default_Option_Style,
+    }
+}
+
+export interface SelectListProps<T> {
+    value?: T;
+    options: T[];
+    onChange: (value: T) => void;
+    className?: string;
+    by?: (keyof T & string) | ((o1: T, o2: T) => boolean);
+    optionLayout?: (opt: T, selected: boolean) => OptionLayout;
+    noCheck?: boolean;
+    filterBy?: (filterValue: string) => (opt: T) => boolean;
+}
+export function SelectList<T>({ value, options, onChange, className, optionLayout, by, noCheck, filterBy }: SelectListProps<T>) {
+    const [selected, setSelected] = useState(value);
+    const [filterValue, setFilterValue] = useState("");
+
+    const onSelect = (option: T) => {
+        setSelected(option);
+        onChange(option);
+    }
+    const optionEquals = useMemo(() => {
+        if (typeof by === 'string') {
+            return (o1: T, o2: T) => o1[by] === o2[by];
+        } else if (!by) {
+            return (o1: T, o2: T) => o1 === o2;
+        } else {
+            return by as (o1: T, o2: T) => boolean;
+        }
+    }, [by]);
+    return (
+        <div className={clsx("", className)}>
+            {filterBy && (
+                <Input type="text" placeholder="Filter..." value={filterValue} onChange={(value) => setFilterValue(value)} />
+            )}
+            {options.map((option, i) => {
+                if (filterBy && !filterBy(filterValue)(option)) {
+                    return null;
+                }
+                const isSelected = selected ? optionEquals(selected, option) : false;
+                let layout: OptionLayout;
+                if (optionLayout) {
+                    layout = optionLayout(option, isSelected);
+                    layout = Object.assign(defaultOptionLayout(option, isSelected), layout);
+                } else {
+                    layout = defaultOptionLayout(option, isSelected);
+                }
+                return (
+                    <SelectListOption key={i}
+                        option={option}
+                        onSelect={onSelect}
+                        layout={layout}
+                        noCheck={noCheck}
+                    />
+                )
+            })}
+        </div>
+    )
+}
+interface SelectListOptionProps<T> {
+    option: T;
+    onSelect: (value: T) => void;
+    layout: OptionLayout;
+    noCheck?: boolean;
+}
+
+function SelectListOption<T>({ option, onSelect, layout, noCheck }: SelectListOptionProps<T>) {
+    return (
+        <div className={clsx('group flex items-center cursor-pointer gap-x-2 hover:bg-muted',
+            layout.reverse && 'flex-row-reverse', layout.className)} onClick={() => onSelect(option)}>
+            {noCheck ? null : <div className="">{layout.check}</div>}
+            <div className='flex-1'>{layout.label}</div>
+        </div>
+    )
+}

package/src/core/components/SelectStack.tsx

@@ -0,0 +1,63 @@
+import { RadioGroup } from '@headlessui/react'
+import clsx from 'clsx'
+
+
+interface SelectStackOption {
+    id: string
+    label: string
+    description?: React.ReactNode
+}
+
+interface SelectStackProps {
+    onSelect: (option: SelectStackOption) => void
+    selected?: SelectStackOption
+    options: SelectStackOption[]
+}
+
+export function SelectStack({ onSelect, selected, options }: SelectStackProps) {
+
+    return (
+        <RadioGroup value={selected} onChange={onSelect}>
+            <RadioGroup.Label className="sr-only">Server size</RadioGroup.Label>
+            <div className="space-y-4">
+                {options.map((option) => (
+                    <RadioGroup.Option
+                        key={option.id}
+                        value={option}
+                        className={({ active }) =>
+                            clsx(
+                                active ? 'border-border ring-2 ring-ring' : 'border-border',
+                                'relative block cursor-pointer rounded-lg border bg-accent px-6 py-4 shadow-2xs focus:outline-hidden sm:flex sm:justify-between'
+                            )
+                        }
+                    >
+                        {({ active, checked }) => (
+                            <>
+                                <span className="flex items-center">
+                                    <span className="flex flex-col text-sm">
+                                        <RadioGroup.Label as="span" className="font-medium text-text">
+                                            {option.label}
+                                        </RadioGroup.Label>
+                                        {option.description &&
+                                            <RadioGroup.Description as="span" className="text-muted-foreground">
+                                                {option.description}
+                                            </RadioGroup.Description>
+                                        }
+                                    </span>
+                                </span>
+                                <span
+                                    className={clsx(
+                                        active ? 'border' : 'border-2',
+                                        checked ? 'border-accent-foreground' : 'border-transparent',
+                                        'pointer-events-none absolute -inset-px rounded-lg'
+                                    )}
+                                    aria-hidden="true"
+                                />
+                            </>
+                        )}
+                    </RadioGroup.Option>
+                ))}
+            </div>
+        </RadioGroup>
+    )
+}

package/src/core/components/SidePanel.tsx

@@ -0,0 +1,114 @@
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Minus, X } from 'lucide-react';
+import { Button } from './shadcn/button';
+
+interface SidePanelProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    title?: string;
+    panelWidth?: number;
+    backdrop?: boolean;
+}
+export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768, backdrop = false }: SidePanelProps) {
+    const [_panelWidth, setPanelWidth] = useState(panelWidth);
+
+    const handleDragStart = (e: React.MouseEvent) => {
+        e.preventDefault();
+
+        let isDragging = true;
+        const startX = e.pageX;
+        const startWidth = _panelWidth;
+
+        const handleMouseMove = (e: MouseEvent) => {
+            if (isDragging) {
+                const deltaX = startX - e.pageX;
+                const newWidth = Math.max(startWidth + deltaX, 480);
+                setPanelWidth(newWidth);
+            }
+        };
+
+        const handleMouseUp = () => {
+            isDragging = false;
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    };
+
+    return (
+        <AnimatePresence>
+            {isOpen && (
+                <div className="relative z-20">
+                    {/* Backdrop */}
+                    {backdrop && (
+                        <motion.div
+                            className="fixed inset-0 bg-black/70"
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 0 }}
+                            onClick={onClose}
+                        />
+                    )}
+
+                    <div className="fixed inset-y-0 right-0 overflow-hidden">
+                        <div className="absolute inset-0 overflow-hidden">
+                            <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
+                                <motion.div
+                                    className="pointer-events-auto border-l"
+                                    style={{ width: `${_panelWidth}px` }}
+                                    initial={{ x: "100%" }}
+                                    animate={{ x: 0 }}
+                                    exit={{ x: "100%" }}
+                                    transition={{ type: "spring", stiffness: 300, damping: 30 }}
+                                >
+                                    <div className="relative flex h-full">
+                                        {/* Drag Handle */}
+                                        <div
+                                            className="absolute -left-1 top-0 bottom-0 w-3 cursor-ew-resize hover:bg-indigo-500 transition-colors flex items-center justify-center"
+                                            onMouseDown={handleDragStart}
+                                        >
+                                            <Minus className="rotate-90 font-semibold" strokeWidth={4} />
+                                        </div>
+                                        <div className="flex-1 flex flex-col overflow-y-scroll gap-4 bg-background py-2 shadow-xl">
+                                            {title && (
+                                                <div className="px-2 sm:px-4">
+                                                    <div className="flex items-start justify-between">
+                                                        <h2 className="w-full text-base font-semibold leading-6">
+                                                            <div className="text-2xl">{title ?? ""}</div>
+                                                        </h2>
+                                                        <div className="ml-3 flex h-7 items-center">
+                                                            <CloseButton onClose={onClose} />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            )}
+
+                                            <div className="px-2 sm:px-4">
+                                                {children}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </motion.div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </AnimatePresence>
+    );
+}
+
+function CloseButton({ onClose }: { onClose: () => void }) {
+    return (
+        <Button alt="Close panel"
+            variant="ghost"
+            onClick={onClose}
+        >
+            <X className="size-6" aria-hidden="true" />
+        </Button>
+    )
+}

package/src/core/components/Spinner.tsx

@@ -0,0 +1,33 @@
+import clsx from "clsx";
+
+function getRealSize(size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl') {
+    switch (size) {
+        case 'xs': return 'size-2';
+        case 'sm': return 'size-3';
+        case 'md': return 'size-4';
+        case 'lg': return 'size-5';
+        case 'xl': return 'size-7';
+        case '2xl': return 'size-10';
+        default: throw new Error('Unexpected size: ' + size);
+    }
+}
+
+interface SpinnerProps {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl',
+    className?: string
+}
+export function Spinner({ size, className }: SpinnerProps) {
+    const sizeClass = getRealSize(size || 'md');
+    return (
+        <>
+            <svg className={clsx(
+                "animate-[spin_0.8s_linear_infinite] text-indigo-500",
+                sizeClass,
+                className)} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+        </>
+    )
+
+}

package/src/core/components/Switch.tsx

@@ -0,0 +1,30 @@
+import { Switch as UISwitch } from "@headlessui/react";
+
+const sizes = {
+    'sm': ['h-5 w-8', 'size-3', 'translate-x-4'],
+    'md': ['h-6 w-11', 'size-4', 'translate-x-6'],
+    'lg': ['h-8 w-16', 'size-6', 'translate-x-9'],
+}
+
+interface SwitchProps {
+    size?: 'sm' | 'md' | 'lg'
+    value: boolean;
+    onChange: (value: boolean) => void;
+    children?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+export function Switch({ value, onChange, size = 'md', children, className, disabled }: SwitchProps) {
+    const sizeClass = sizes[size];
+    return (
+        <UISwitch checked={value} onChange={() => onChange(!value)} className={`flex items-center ${className} ${disabled ? 'cursor-not-allowed opacity-50' : 'hover:cursor-pointer'}`}>
+            <div className={`${value ? 'bg-primary' : 'bg-muted/50'} relative inline-flex ${sizeClass[0]} items-center rounded-full border-1`}>
+                <span
+                    className={`${value ? sizeClass[2] : 'translate-x-1'
+                        } inline-block ${sizeClass[1]} transform rounded-full bg-white transition`}
+                />
+            </div>
+            {children && <span className="px-2">{children}</span>}
+        </UISwitch>
+    )
+}