@vertesia/ui 0.56.0 → 0.58.0

package/src/core/components/SelectList.tsx

@@ -0,0 +1,85 @@
+import { Check } from "lucide-react";
+import clsx from "clsx";
+import { ReactNode, useMemo, useState } from "react";
+
+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;
+}
+export function SelectList<T>({ value, options, onChange, className, optionLayout, by, noCheck }: SelectListProps<T>) {
+    const [selected, setSelected] = useState(value);
+    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)}>
+            {options.map((option, i) => {
+                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,104 @@
+
+
+import { useState, Fragment } from 'react';
+import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
+import { X } from 'lucide-react';
+import { Button } from './shadcn/button';
+
+interface SidePanelProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    title?: string;
+}
+export function SidePanel({ isOpen, title, onClose, children }: SidePanelProps) {
+    const [panelWidth, setPanelWidth] = useState(768);
+
+    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 (
+        <Transition show={isOpen} as={Fragment}>
+            <Dialog as="div" className="relative z-10" onClose={onClose}>
+                <div className="fixed inset-0" />
+                <div className="fixed inset-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">
+                            <TransitionChild
+                                as={Fragment}
+                                enter="transform transition ease-in-out duration-500 sm:duration-700"
+                                enterFrom="translate-x-full"
+                                enterTo="translate-x-0"
+                                leave="transform transition ease-in-out duration-500 sm:duration-700"
+                                leaveFrom="translate-x-0"
+                                leaveTo="translate-x-full"
+                                unmount={true}
+                            >
+                                <DialogPanel
+                                    className="pointer-events-auto border-l"
+                                    style={{ width: `${panelWidth}px` }}
+                                >
+                                    <div className="relative flex h-full">
+                                        {/* Drag Handle */}
+                                        <div
+                                            className="absolute left-0 top-0 bottom-0 w-1 cursor-ew-resize hover:bg-indigo-500 transition-colors"
+                                            onMouseDown={handleDragStart}
+                                        />
+                                        <div className="flex-1 flex flex-col overflow-y-scroll gap-4 bg-background py-6 shadow-xl">
+                                            <div className="px-4 sm:px-6">
+                                                <div className="flex items-start justify-between">
+                                                    <DialogTitle className="w-full text-base font-semibold leading-6">
+                                                        <div className="text-2xl">{title ?? ""}</div>
+                                                    </DialogTitle>
+                                                    <div className="ml-3 flex h-7 items-center">
+                                                        <CloseButton onClose={onClose} />
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div className="px-4 sm:px-6">
+                                                {children}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </DialogPanel>
+                            </TransitionChild>
+                        </div>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+}
+
+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,29 @@
+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;
+}
+export function Switch({ value, onChange, size = 'md', children, className }: SwitchProps) {
+    const sizeClass = sizes[size];
+    return (
+        <UISwitch checked={value} onChange={() => onChange(!value)} className={`flex items-center ${className} hover:cursor-pointer`}>
+            <div className={`${value ? 'bg-primary' : 'bg-muted'} relative inline-flex ${sizeClass[0]} items-center rounded-full`}>
+                <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>
+    )
+}

package/src/core/components/Textarea.tsx

@@ -0,0 +1,25 @@
+import clsx from "clsx";
+import React, { useState } from "react";
+import { Styles } from "./styles";
+
+interface TextareaProps extends Omit<React.HTMLProps<HTMLTextAreaElement>, 'ref' | 'onChange'> {
+    onChange: (value: string) => void;
+    unstyled?: boolean;
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ unstyled, value, onChange, className, ...others }: TextareaProps, ref) => {
+    const [currentValue, setCurrentValue] = useState(value || "");
+    const _onChange = (ev: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const value = ev.target.value;
+        setCurrentValue(value);
+        onChange && onChange(value);
+    }
+    return (
+        <textarea ref={ref}
+            {...others}
+            className={clsx('w-full', unstyled ? Styles.INPUT_UNSTYLED : Styles.INPUT, className)}
+            value={currentValue} onChange={_onChange} />
+    )
+});
+
+export { Textarea }

package/src/core/components/index.ts

@@ -0,0 +1,39 @@
+
+export * from "./Avatar.js";
+export * from "./Badge.js";
+export * from "./Center.js";
+export * from "./ComboBox.js";
+export * from "./ConfirmModal.js";
+export * from "./DeleteModal.js";
+export * from "./Divider.js";
+export * from "./SidePanel.js";
+export * from "./Dropdown.js";
+export * from "./DropdownList.js";
+export * from "./EmptyCollection.js";
+export * from "./FileUpload.js";
+export * from "./Input.js";
+export * from "./InputList.js";
+export * from "./Link.js";
+export * from "./MenuList.js";
+export * from "./MessageBox.js";
+export * from "./Modal.js";
+export * from "./NumberInput.js";
+export * from "./popup/index.js";
+export * from "./Portal.js";
+export * from "./RadioGroup.js";
+export * from "./SelectBox.js";
+export * from "./SelectList.js";
+export * from "./SelectStack.js";
+export * from "./Spinner.js";
+export * from "./styles.js";
+export * from "./Switch.js";
+export * from "./table/index.js";
+export * from "./tabs/index.js";
+export * from "./Textarea.js";
+export * from "./toast/index.js";
+export * from "./shadcn/index.js";
+
+export type HeroIcon = React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
+    title?: string | undefined;
+    titleId?: string | undefined;
+} & React.RefAttributes<SVGSVGElement>>;

package/src/core/components/libs/utils.tsx

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/core/components/libs/visuallyHidden.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+interface VisuallyHiddenProps {
+    children: React.ReactNode
+}
+export function VisuallyHidden({ children }: VisuallyHiddenProps) {
+    return (
+        <span
+            style={{
+                border: 0,
+                clip: "rect(0 0 0 0)",
+                height: "1px",
+                margin: "-1px",
+                overflow: "hidden",
+                padding: 0,
+                position: "absolute",
+                width: "1px",
+                whiteSpace: "nowrap",
+                wordWrap: "normal",
+            }}
+        >
+            {children}
+        </span>
+    )
+}

package/src/core/components/popup/Popup.tsx

@@ -0,0 +1,94 @@
+import { createContext, MutableRefObject, ReactNode, useContext, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { PopupController, PopupControllerOptions } from "./PopupController";
+import { Constraints } from "./position";
+
+
+const PopupContext = createContext<PopupController | undefined>(undefined);
+
+export function usePopupController() {
+    const ctrl = useContext(PopupContext);
+    if (!ctrl) throw new Error("usePopupController must be used inside a Popup component");
+    return ctrl;
+}
+
+interface DOMPopupProps extends Omit<PopupControllerOptions, 'anchor' | 'popup' | 'root'> {
+    isOpen: boolean;
+    constraints: Constraints;
+    anchor: HTMLElement;
+    root?: HTMLElement;
+    zIndex?: number;
+    position?: "absolute" | "fixed";
+    onClose?: () => void;
+    onOpen?: () => void;
+    className?: string;
+    id?: string;
+    children: ReactNode | ReactNode[];
+    ctrlRef?: MutableRefObject<PopupController | undefined>;
+}
+export function DOMPopup({ ctrlRef, id, constraints, isOpen, children, className, onClose, zIndex, position, ...props }: DOMPopupProps) {
+    const popupRef = useRef<HTMLDivElement>(null);
+    const [ctrl, setCtrl] = useState<PopupController | undefined>();
+    useEffect(() => {
+        if (!props.anchor) throw new Error("Anchor element is required");
+        const _ctrl = new PopupController({
+            ...props,
+            onClose
+        });
+        setCtrl(_ctrl);
+        return () => {
+            _ctrl.tryClose();
+        }
+    }, []);
+
+    useEffect(() => {
+        if (ctrlRef) {
+            ctrlRef.current = ctrl;
+        }
+    }, [ctrl]);
+
+    // effect to open / close the popup
+    useEffect(() => {
+        if (ctrl && popupRef.current) {
+            if (ctrl.isOpen !== isOpen) {
+                if (isOpen) {
+                    ctrl.open(popupRef.current, constraints);
+                } else {
+                    ctrl.close();
+                }
+            }
+        } else if (ctrl?.isOpen && !isOpen) {
+            // close the popup - happens when isOpen becomes false but the ctrl is still open
+            // and the popupRef was destroyed by the isOpen && below
+            ctrl.close();
+        }
+    }, [isOpen, ctrl, popupRef.current]);
+
+    return (
+        <PopupContext.Provider value={ctrl}>
+            {isOpen && createPortal(
+                <div id={id} style={{
+                    //display: isOpen ? 'block' : 'none',
+                    visibility: 'hidden',
+                    position: position || 'absolute',
+                    zIndex: zIndex || 100,
+                }} ref={popupRef} className={className}>
+                    {children}
+                </div>,
+                document.body
+            )}
+        </PopupContext.Provider>
+    )
+}
+
+export interface PopupProps extends Omit<DOMPopupProps, 'anchor' | 'root'> {
+    anchor: React.RefObject<HTMLElement | null | undefined>;
+    root?: React.RefObject<HTMLElement | null | undefined>;
+}
+export function Popup({ anchor, root, children, ...others }: PopupProps) {
+    return anchor.current && (!root || root.current) ? (
+        <DOMPopup anchor={anchor.current!} root={root?.current || undefined} {...others}>
+            {children}
+        </DOMPopup>
+    ) : null;
+}