@vertesia/ui 0.24.0-dev.202601221707

package/src/core/components/Modal.tsx

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

@@ -0,0 +1,64 @@
+import clsx from "clsx";
+import React, { ChangeEvent, useEffect } from "react";
+import { Styles } from "./styles.js";
+
+function numberToString(value: number | undefined) {
+    if (value == null || isNaN(value)) {
+        return '';
+    } else {
+        return value.toString();
+    }
+}
+
+interface NumberInputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'ref' | 'onChange' | 'value'> {
+    value?: number;
+    onChange?: (value: undefined | number, text: string) => void
+    noScroll?: boolean;
+    noSpinners?: boolean
+}
+
+/**
+ * The value of this input is always a number. It can be undefined or NaN. If NaN the input value will not be updated with the NaN one.
+ * If undefined the input will be updated to be empty.
+ * The onChange callback is called whenever the value changes. If the input cannot be parsed as a number
+ * it will be returned as NaN.
+ */
+const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(({ value, onChange, className, noScroll = false, noSpinners = false, ...others }: NumberInputProps, ref) => {
+    // we need to store the state here in string
+    const [textValue, setTextValue] = React.useState<string>(numberToString(value))
+    const _onChange = (ev: ChangeEvent<HTMLInputElement>) => {
+        const value = ev.target.value;
+        setTextValue(value)
+        if (value === '') {
+            onChange && onChange(undefined, value)
+        } else {
+            const num = parseFloat(value);
+            onChange && onChange(num, value)
+        }
+    }
+
+    useEffect(() => {
+        // we do not update if not empty and NaN
+        if (value == null || !isNaN(value)) {
+            const text = numberToString(value);
+            setTextValue(text);
+        }
+    }, [value])
+
+    return (
+        <input
+            onWheel={noScroll ? event => { (event.target as any).blur(); } : others.onWheel} /* avoid input change on wheel scroll */
+            type='number'
+            value={textValue}
+            onChange={_onChange}
+            className={clsx(className, Styles.INPUT, { "no-spinners": noSpinners },
+                noSpinners && "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+            )}
+            ref={ref}
+            {...others}
+        />
+
+    )
+})
+
+export { NumberInput };

package/src/core/components/Overlay.tsx

@@ -0,0 +1,129 @@
+import { motion } from "framer-motion"
+import { X } from "lucide-react"
+import { useState, ReactNode } from "react"
+
+import { Button } from "./Button"
+
+interface OverlayProps {
+    children: ReactNode
+    overlayContent: ReactNode
+    className?: string
+    overlayClassName?: string
+    position?: 'left' | 'right' | 'top' | 'bottom' | 'center'
+    width?: string
+    height?: string
+    showCloseButton?: boolean
+    closeButtonTooltip?: string
+    onOpen?: () => void
+    onClose?: () => void
+    triggerClassName?: string
+    backdropClassName?: string
+    animationConfig?: {
+        type?: "spring" | "tween"
+        stiffness?: number
+        damping?: number
+        duration?: number
+    }
+}
+export function Overlay({
+    children,
+    overlayContent,
+    className = "",
+    overlayClassName = "",
+    position = 'right',
+    width,
+    height,
+    showCloseButton = true,
+    onOpen,
+    onClose,
+    triggerClassName = "",
+    backdropClassName = "",
+    animationConfig = { type: "spring", stiffness: 300, damping: 30 }
+}: Readonly<OverlayProps>) {
+    const [isOpen, setIsOpen] = useState(false)
+
+    const handleOpen = () => {
+        setIsOpen(true)
+        onOpen?.()
+    }
+
+    const handleClose = () => {
+        setIsOpen(false)
+        onClose?.()
+    }
+
+    const animationProps = getAnimationProps(position)
+    const positionClasses = getPositionClasses(position, width, height)
+
+    return (
+        <div className={`flex items-center justify-center w-full ${className}`}>
+            <div onClick={handleOpen} className={`w-full align-left cursor-pointer ${triggerClassName}`}>
+                {children}
+            </div>
+            {
+                isOpen && (
+                    <div className={`z-45 fixed inset-0 bg-black bg-opacity-50 ${backdropClassName}`}>
+                        <motion.div
+                            {...animationProps}
+                            transition={animationConfig}
+                            className={`${positionClasses} ${overlayClassName}`}
+                        >
+                            {
+                                showCloseButton && (
+                                    <div className="absolute top-2 right-2 z-10">
+                                        <Button onClick={handleClose} variant="primary">
+                                            <X />
+                                        </Button>
+                                    </div>
+                                )
+                            }
+                            <div className={showCloseButton ? "mt-8" : ""}>
+                                {overlayContent}
+                            </div>
+                        </motion.div>
+                    </div>
+                )
+            }
+        </div>
+    )
+}
+
+function getAnimationProps(position: string) {
+    switch (position) {
+        case 'left':
+            return { initial: { x: "-100%" }, animate: { x: 0 }, exit: { x: "-100%" } }
+        case 'right':
+            return { initial: { x: "100%" }, animate: { x: 0 }, exit: { x: "100%" } }
+        case 'top':
+            return { initial: { y: "-100%" }, animate: { y: 0 }, exit: { y: "-100%" } }
+        case 'bottom':
+            return { initial: { y: "100%" }, animate: { y: 0 }, exit: { y: "100%" } }
+        case 'center':
+            return {
+                initial: { opacity: 0, scale: 0.8 },
+                animate: { opacity: 1, scale: 1 },
+                exit: { opacity: 0, scale: 0.8 }
+            }
+        default:
+            return { initial: { x: "100%" }, animate: { x: 0 }, exit: { x: "100%" } }
+    }
+}
+
+function getPositionClasses(position: string, width?: string, height?: string) {
+    const baseClasses = "fixed bg-white shadow-lg p-4 relative"
+
+    switch (position) {
+        case 'left':
+            return `${baseClasses} left-0 top-[var(--header-height)] h-full ${width || 'w-80'}`
+        case 'right':
+            return `${baseClasses} right-0 top-[var(--header-height)] h-full ${width || 'w-80'}`
+        case 'top':
+            return `${baseClasses} top-[var(--header-height)] left-0 right-0 ${height || 'h-80'}`
+        case 'bottom':
+            return `${baseClasses} bottom-0 left-0 right-0 ${height || 'h-80'}`
+        case 'center':
+            return `${baseClasses} top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 ${width || 'w-96'} ${height || 'max-h-96'}`
+        default:
+            return `${baseClasses} right-0 top-[var(--header-height)] h-full ${width || 'w-80'}`
+    }
+}

package/src/core/components/Panel.tsx

@@ -0,0 +1,34 @@
+import { VTooltip } from "./shadcn/tooltip"
+import { Info } from "lucide-react"
+
+interface PanelProps {
+    title: string | React.ReactNode
+    description?: React.ReactNode
+    action?: React.ReactNode
+    children: React.ReactNode
+    footer?: string | React.ReactNode
+    className?: string
+}
+
+export function Panel({ children, action, title, description, footer, className }: PanelProps) {
+
+    return (
+        <div className={`p-4 flex flex-col gap-2 rounded-sm border bg-card ${className}`}>
+            <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                    <div className="font-semibold text-lg">
+                        {title}
+                    </div>
+                    {description && <VTooltip description={description}><Info className="size-4 text-muted" /></VTooltip>}
+                </div>
+                {action}
+            </div>
+
+            {children}
+            {footer &&
+                <div className="border-t border-muted flex flex-col-2 text-sm pt-4">
+                    {footer}
+                </div>}
+        </div>
+    )
+}

package/src/core/components/Portal.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+const PORTAL_ID = '--tailwind-portal';
+
+interface PortalProps {
+    children: React.ReactNode | React.ReactNode[];
+}
+export function Portal({ children }: PortalProps) {
+    const tempNode = useRef<HTMLSpanElement>(null);
+    const [portalEl, setPortalEl] = useState<HTMLDivElement | null>(null);
+
+    // hack to have the Portal not generating hydration errors (content mismatch) on SSR / CSR
+    useEffect(() => {
+        if (tempNode.current) { // we are on the browser -> we an use the portal
+            const doc = tempNode.current.ownerDocument;
+            let portalEl = doc.getElementById(PORTAL_ID) as HTMLDivElement;
+            if (!portalEl) {
+                portalEl = doc.createElement('DIV') as HTMLDivElement;
+                portalEl.id = PORTAL_ID;
+                doc.body.appendChild(portalEl);
+            }
+            setPortalEl(portalEl);
+        }
+    }, [tempNode.current]);
+
+    if (portalEl) {
+        return createPortal(children, portalEl);
+    } else {
+        return <span ref={tempNode} />
+    }
+
+}

package/src/core/components/RadioGroup.tsx

@@ -0,0 +1,100 @@
+import clsx from "clsx";
+import { ReactNode, useState } from "react";
+
+export abstract class RadioOptionAdapter<T> {
+    abstract labelOf(item: T): string;
+    abstract idOf(item: T): string;
+    renderOption(item: T): ReactNode {
+        return this.labelOf(item);
+    }
+    findById(items: T[], id: string) {
+        return items.find(item => this.idOf(item) === id);
+    }
+}
+
+interface RadioGroupProps<OptionT> {
+    checkIcon?: React.ComponentType<CheckIconProps>;
+    options: OptionT[];
+    cols?: `grid-cols-${number}`;
+    gap?: `gap-${number}`;
+    value?: OptionT;
+    onChange: (value: OptionT) => void;
+    adapter: RadioOptionAdapter<OptionT>;
+    checkColor?: string;
+}
+export function RadioGroup<OptionT>({ checkColor, cols = "grid-cols-1", gap = "gap-2", value, onChange, options, checkIcon: CheckIcon = DefaultCheckIcon, adapter }: RadioGroupProps<OptionT>) {
+    const [selected, setSelected] = useState(value);
+    const onSelect = (option: OptionT) => {
+        setSelected(option);
+        onChange(option);
+    }
+    const selectedId = selected ? adapter.idOf(selected) : undefined;
+    return (
+        <div className={clsx("grid", cols, gap)}>
+            {
+                options.map(option => {
+                    const key = adapter.idOf(option);
+                    return (
+                        <RadioOption
+                            checkColor={checkColor}
+                            isSelected={key === selectedId}
+                            option={option} adapter={adapter}
+                            onSelect={onSelect}
+                            CheckIcon={CheckIcon} key={key}
+                        />
+                    );
+                })
+            }
+        </div>
+    )
+}
+
+interface RadioOptionProps<OptionT> {
+    CheckIcon: React.ComponentType<CheckIconProps>;
+    isSelected: boolean;
+    option: OptionT;
+    adapter: RadioOptionAdapter<OptionT>;
+    onSelect: (option: OptionT) => void;
+    checkColor?: string;
+}
+function RadioOption<OptionT>({ checkColor, CheckIcon, adapter, isSelected, option, onSelect }: RadioOptionProps<OptionT>) {
+    const [isHighlighted, setIsHighlighted] = useState(false);
+    return (
+        <div className="flex gap-1 cursor-pointer items-center" onClick={() => onSelect(option)}
+            onMouseEnter={() => setIsHighlighted(true)} onMouseLeave={() => setIsHighlighted(false)} >
+            <div className="">
+                <CheckIcon size={24} isChecked={isSelected} isHighlighted={isHighlighted} color={checkColor} />
+            </div>
+            <div>{adapter.renderOption(option)}</div>
+        </div>
+    )
+}
+
+export interface CheckIconProps {
+    size: number;
+    isChecked: boolean;
+    isHighlighted?: boolean;
+    color?: string;
+}
+function DefaultCheckIcon({ size, isChecked, isHighlighted, color = "currentColor" }: CheckIconProps) {
+    //https://www.svgrepo.com/svg/309414/checkbox-checked
+    //https://www.svgrepo.com/svg/309415/checkbox-unchecked
+    const opacity = isHighlighted ? 1 : 0.6;
+    return isChecked ? (
+        <svg width={`${size}px`} height={`${size}px`} viewBox="0 0 24 24" version="1.1">
+            <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                <g id="ic_fluent_checkbox_checked_24_regular" fill={color} fillRule="nonzero" opacity={opacity}>
+                    <path d="M18.25,3 C19.7687831,3 21,4.23121694 21,5.75 L21,18.25 C21,19.7687831 19.7687831,21 18.25,21 L5.75,21 C4.23121694,21 3,19.7687831 3,18.25 L3,5.75 C3,4.23121694 4.23121694,3 5.75,3 L18.25,3 Z M18.25,4.5 L5.75,4.5 C5.05964406,4.5 4.5,5.05964406 4.5,5.75 L4.5,18.25 C4.5,18.9403559 5.05964406,19.5 5.75,19.5 L18.25,19.5 C18.9403559,19.5 19.5,18.9403559 19.5,18.25 L19.5,5.75 C19.5,5.05964406 18.9403559,4.5 18.25,4.5 Z M10,14.4393398 L16.4696699,7.96966991 C16.7625631,7.6767767 17.2374369,7.6767767 17.5303301,7.96966991 C17.7965966,8.23593648 17.8208027,8.65260016 17.6029482,8.94621165 L17.5303301,9.03033009 L10.5303301,16.0303301 C10.2640635,16.2965966 9.84739984,16.3208027 9.55378835,16.1029482 L9.46966991,16.0303301 L6.46966991,13.0303301 C6.1767767,12.7374369 6.1767767,12.2625631 6.46966991,11.9696699 C6.73593648,11.7034034 7.15260016,11.6791973 7.44621165,11.8970518 L7.53033009,11.9696699 L10,14.4393398 L16.4696699,7.96966991 L10,14.4393398 Z" />
+                </g>
+            </g>
+        </svg>
+    ) : (
+        <svg width={`${size}px`} height={`${size}px`} viewBox="0 0 24 24" version="1.1">
+            <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                <g id="ic_fluent_checkbox_unchecked_24_regular" fill={color} fillRule="nonzero" opacity={opacity}>
+                    <path d="M5.75,3 L18.25,3 C19.7687831,3 21,4.23121694 21,5.75 L21,18.25 C21,19.7687831 19.7687831,21 18.25,21 L5.75,21 C4.23121694,21 3,19.7687831 3,18.25 L3,5.75 C3,4.23121694 4.23121694,3 5.75,3 Z M5.75,4.5 C5.05964406,4.5 4.5,5.05964406 4.5,5.75 L4.5,18.25 C4.5,18.9403559 5.05964406,19.5 5.75,19.5 L18.25,19.5 C18.9403559,19.5 19.5,18.9403559 19.5,18.25 L19.5,5.75 C19.5,5.05964406 18.9403559,4.5 18.25,4.5 L5.75,4.5 Z" />
+                </g>
+            </g>
+        </svg>
+    )
+}