@vertesia/ui 0.56.0 → 0.57.0

package/src/core/components/shadcn/theme/ThemeSwitcher.tsx

@@ -0,0 +1,35 @@
+import { Computer, Moon, Sun } from "lucide-react"
+
+import { Button } from "../button"
+import { useTheme } from "./ThemeProvider"
+
+interface ModeOptionProps {
+  current: string;
+  option: ("system" | "light" | "dark");
+  setTheme: (theme: "system" | "light" | "dark") => void;
+  icon: React.ReactNode;
+}
+
+export function ModeOption({ option, current, setTheme, icon }: ModeOptionProps) {
+  return (
+    <Button variant={current === option ? "secondary" : "outline"} size="sm" onClick={() => setTheme(option)} alt={option}>
+      {icon}
+    </Button>
+  );
+}
+
+export default function ModeToggle() {
+  const { setTheme } = useTheme()
+  const theme = useTheme().theme
+
+  return (
+    <div className="flex justify-between px-2 items-center">
+      <p className="text-sm font-semibold">Theme</p>
+      <div className="flex gap-2">
+        <ModeOption current={theme} option="system" setTheme={setTheme} icon={<Computer className="text-muted" />} />
+        <ModeOption current={theme} option="light" setTheme={setTheme} icon={<Sun className="text-muted" />} />
+        <ModeOption current={theme} option="dark" setTheme={setTheme} icon={<Moon className="text-muted" />} />
+      </div>
+    </div>
+  )
+}

package/src/core/components/shadcn/tooltip.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import { cn } from "../libs/utils"
+import { ReactNode } from "react"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    side?: "top" | "right" | "bottom" | "left"
+  }
+>(({ className, sideOffset = 4, side = "top", ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      side={side}
+      style={{ zIndex: 100 }}
+      className={cn(
+        "max-w-[90vw]",
+        "z-50 overflow-hidden rounded-md bg-tooltips border px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+interface TooltipPopoverProps {
+  description?: ReactNode;
+  children: ReactNode;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  placement?: 'top' | 'right' | 'bottom' | 'left';
+  className?: string;
+  asChild?: boolean;
+}
+export function VTooltip({ description, children, size = 'sm', placement = 'top', className, asChild }: TooltipPopoverProps) {
+  return (
+    <TooltipProvider delayDuration={0}>
+      <Tooltip>
+        <TooltipTrigger className="cursor-pointer" asChild={asChild}>
+          {children}
+        </TooltipTrigger>
+        <TooltipContent side={placement} className={`px-3 py-1.5 max-w-${size} text-${size} px-3 ${className}`}>
+          {description}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/core/components/styles.ts

@@ -0,0 +1,11 @@
+const INPUT_UNSTYLED = "block m-0 p-0 w-full border-0 focus:outline-hidden focus:ring-0 bg-transparent"
+const INPUT_NO_PADDING = "block sm:text-sm sm:leading-6 rounded-md border-0 text-gray-900 shadow-2xs ring-1 ring-inset ring-gray-300 dark:ring-slate-600 dark:text-slate-50 dark:bg-slate-800 placeholder:text-gray-400 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 dark:focus:ring-indigo-800"
+const INPUT = INPUT_NO_PADDING + " py-1.5";
+
+const Styles = {
+    INPUT_UNSTYLED,
+    INPUT_NO_PADDING,
+    INPUT
+}
+
+export { Styles }

package/src/core/components/table/index.tsx

@@ -0,0 +1,49 @@
+import clsx from "clsx";
+import React from "react";
+
+
+const defaultTableCass = `
+divide-y divide-border
+[&>tbody]:divide-y [&>tbody]:divide-border
+[&_th]:text-left [&_th]:px-3 [&_th]:py-3.5 [&_th]:text-sm [&_th]:font-normal [&_th]:text-muted-foreground
+[&_td]:px-3 [&_td]:py-4 [&_td]:text-sm
+`;
+
+
+export function Table({ className, children, ...others }: React.HTMLProps<HTMLTableElement>) {
+    return (
+        <table className={clsx(defaultTableCass, className)} {...others}>
+            {children}
+        </table>
+    )
+}
+
+export function RowSkeleton({ columns }: { columns: number }) {
+    return (
+        <tr className="hover:bg-muted">
+            {Array(columns).fill(0).map((_, index) =>
+                <td key={index}>
+                    <div className="animate-pulse rounded-xs h-5 bg-gray-200 dark:bg-gray-600"></div>
+                </td>
+            )}
+        </tr>
+    )
+}
+
+interface TBodySkeletonProps {
+    isLoading?: boolean
+    columns: number
+    rows?: number
+    children: React.ReactNode
+}
+
+export function TBody({ isLoading = false, columns, rows = 3, children }: TBodySkeletonProps) {
+    return (
+        <tbody>
+            {isLoading ?
+                Array(rows).fill(0).map((_, index) => <RowSkeleton columns={columns} key={index} />)
+                : children
+            }
+        </tbody>
+    )
+}

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

@@ -0,0 +1,132 @@
+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

@@ -0,0 +1,25 @@
+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

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

package/src/core/components/toast/NotificationPanel.tsx

@@ -0,0 +1,91 @@
+import { Transition } from "@headlessui/react"
+import { CircleCheck, AlertTriangle, Info, CircleX, X } from "lucide-react"
+import { Fragment, useEffect, useState } from "react"
+import { ToastProps } from "./ToastProps.js"
+
+const icons = {
+    success: CircleCheck,
+    error: CircleX,
+    warning: AlertTriangle,
+    info: Info
+}
+
+const colors = {
+    success: 'text-green-600',
+    error: 'text-red-600',
+    warning: 'text-yellow-600',
+    info: 'text-blue-600'
+}
+
+interface NotificationPanelProps {
+    data: ToastProps
+    onClose: () => void
+}
+export function NotificationPanel({ data, onClose }: NotificationPanelProps) {
+    const [show, setShow] = useState(true)
+
+    useEffect(() => {
+        let timeoutId: any;
+        if (data.duration) {
+            timeoutId = setTimeout(() => {
+                setShow(false)
+            }, data.duration);
+        }
+        return () => {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        }
+    }, [])
+
+    const Icon = icons[data.status] || Info;
+    const color = colors[data.status] || 'text-blue-600';
+
+    // Global notification live region, render this permanently at the end of the document
+    return (
+        <div
+            aria-live="assertive"
+            className="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-100"
+        >
+            <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
+                {/* Notification panel, dynamically insert this into the live region when it needs to be displayed */}
+                <Transition
+                    appear={true}
+                    show={show}
+                    as={Fragment}
+                    afterLeave={onClose}
+                    enter="transform ease-out duration-700 transition"
+                    enterFrom="translate-y-0 opacity-0 sm:translate-y-0 sm:translate-x-2"
+                    enterTo="translate-y-2 opacity-100 sm:translate-x-0"
+                    leave="transition ease-in duration-300"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
+                        <div className="p-4">
+                            <div className="flex items-start">
+                                <div className="shrink-0">
+                                    <Icon className={`size-6 ${color}`} aria-hidden="true" />
+                                </div>
+                                <div className="ml-3 w-0 flex-1 pt-0.5">
+                                    <p className="text-sm font-medium text-gray-900">{data.title}</p>
+                                    <p className="mt-1 text-sm text-gray-500">{data.description}</p>
+                                </div>
+                                <div className="ml-4 flex shrink-0">
+                                    <button
+                                        type="button"
+                                        className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                                        onClick={() => setShow(false)}
+                                    >
+                                        <span className="sr-only">Close</span>
+                                        <X className="size-5" aria-hidden="true" />
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </Transition>
+            </div>
+        </div>
+    )
+}

package/src/core/components/toast/ToastContext.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+import { ToastProps } from "./ToastProps.js";
+
+export function useToast() {
+    return useContext(ToastContext);
+}
+
+export type ToastFn = (data: ToastProps) => void;
+
+const ToastContext = createContext<ToastFn>(() => { });
+
+export { ToastContext };

package/src/core/components/toast/ToastProps.ts

@@ -0,0 +1,6 @@
+export interface ToastProps {
+    status: 'success' | 'error' | 'warning' | 'info';
+    title: string;
+    description?: string;
+    duration?: number
+}

package/src/core/components/toast/ToastProvider.tsx

@@ -0,0 +1,26 @@
+import { useState } from "react";
+import { Portal } from "../Portal.js";
+import { NotificationPanel } from "./NotificationPanel.js";
+import { ToastContext } from "./ToastContext.js";
+import { ToastProps } from "./ToastProps.js";
+
+
+interface ToastProviderProps {
+    children: React.ReactNode | React.ReactNode[];
+}
+export function ToastProvider({ children }: ToastProviderProps) {
+    const [data, setData] = useState<ToastProps | null>(null);
+
+    const toast = (data: ToastProps | null) => {
+        setData(data);
+    }
+
+    return (
+        <>
+            <ToastContext.Provider value={toast}>{children}</ToastContext.Provider>
+            {data && <Portal>
+                <NotificationPanel data={data} onClose={() => toast(null)} />
+            </Portal>}
+        </>
+    )
+}

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

@@ -0,0 +1,2 @@
+export * from "./ToastContext.js"
+export * from "./ToastProvider.js"

package/src/core/hooks/CompositeState.tsx

@@ -0,0 +1,142 @@
+import React, { ReactNode, useContext, useEffect, useState } from "react";
+
+//type KeysOfType<T, V> = { [K in keyof T]-?: T[K] extends V ? K : never }[keyof T];
+//type KeysNotOfType<T, V> = { [K in keyof T]-?: T[K] extends V ? never : K }[keyof T];
+
+export class Property<V = any> {
+    _value?: V;
+    watchers: ((value: V) => void)[] = [];
+    constructor(value?: V) {
+        this._value = value;
+    }
+
+    get value() {
+        return this._value;
+    }
+
+    set value(value: any) {
+        if (value !== this._value) {
+            this._value = value;
+            for (const watcher of this.watchers) {
+                watcher(value);
+            }
+        }
+    }
+
+    watch(watcher: (value: any) => void) {
+        this.watchers.push(watcher);
+        return () => {
+            this.watchers = this.watchers.filter(w => w !== watcher);
+        }
+    }
+}
+
+interface ContextContainer<T> {
+    Context: React.Context<T>
+}
+
+type ConstructorOf<T = any> = new (...args: any[]) => T;
+export function createCompositeStateProvider<T>(StateClass: ConstructorOf<T>) {
+    const context = React.createContext<T>(undefined as any);
+    (StateClass as unknown as ContextContainer<T>).Context = context;
+    return context.Provider;
+}
+
+
+export class Slot {
+
+    private consume: ((content: ReactNode) => void) | undefined = undefined
+    private _current: ReactNode;
+
+    constructor(content?: ReactNode) {
+        this._current = content;
+    }
+
+    set current(content: ReactNode) {
+        if (content !== this._current) {
+            this._current = content;
+            this.consume?.(content);
+        }
+    }
+
+    get current() {
+        return this._current;
+    }
+
+    withConsumer(consume: ((content: ReactNode) => void) | undefined) {
+        this.consume = consume;
+        consume && consume(this.current);
+        return this;
+    }
+}
+
+
+export function useCompositeState<T>(StateClass: ConstructorOf<T>) {
+    const context = (StateClass as unknown as ContextContainer<T>).Context;
+    if (!context) {
+        throw new Error("Context not defined for " + StateClass.name);
+    }
+    return useContext(context);
+}
+
+export function useGetCompositeStateProperty<V>(property: Property<V>) {
+    const [value, setValue] = useState(property.value)
+    useEffect(() => {
+        return property.watch((value) => {
+            if (typeof value === 'function') {
+                setValue(() => value) // cannot directly store functions
+            } else {
+                setValue(value)
+            }
+        });
+    }, [property])
+    return value as V;
+}
+
+// use memo on value to avoid re-computations if needed
+export function useSetCompositeStateProperty<V>(property: Property<V>, value: V | undefined) {
+    useEffect(() => {
+        property.value = value;
+        return () => {
+            property.value = undefined;
+        }
+    }, [property, value])
+    return value;
+}
+
+// use memo on watcher to avoid re-computations if needed
+export function useWatchCompositeStateProperty<V>(property: Property<V>, watcher: (value: V | undefined) => void) {
+    useEffect(() => {
+        return property.watch(watcher);
+    }, [property, watcher])
+}
+
+export function useSlot(slot: Slot) {
+    const [value, setValue] = useState(slot.current)
+    useEffect(() => {
+        slot.withConsumer(setValue);
+        return () => {
+            slot.withConsumer(undefined);
+        }
+    }, [slot])
+    return value;
+}
+
+export function useWatchSlot(slot: Slot, watcher: (value: ReactNode | undefined) => void) {
+    useEffect(() => {
+        slot.withConsumer(watcher);
+        return () => {
+            slot.withConsumer(undefined);
+        }
+    }, [slot, watcher])
+}
+
+// use memo for value if needed
+export function useDefineSlot(slot: Slot, value: ReactNode | undefined) {
+    useEffect(() => {
+        slot.current = value;
+        return () => {
+            slot.current = undefined;
+        }
+    }, [slot, value])
+}

package/src/core/hooks/SharedState.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useState } from "react";
+
+export class SharedState<V = any> {
+    _value: V;
+    watchers: ((value: V) => void)[] = [];
+    constructor(value: V) {
+        this._value = value;
+    }
+
+    get value(): V {
+        return this._value;
+    }
+
+    set value(value: V) {
+        if (value !== this._value) {
+            this._value = value;
+            for (const watcher of this.watchers) {
+                watcher(value);
+            }
+        }
+    }
+
+    addWatcher(watcher: (value: V) => void) {
+        this.watchers.push(watcher);
+        return () => {
+            this.watchers = this.watchers.filter(w => w !== watcher);
+        }
+    }
+}
+
+export function useWatchSharedState<T>(state: SharedState<T>) {
+    const [value, setValue] = useState(state.value)
+    useEffect(() => {
+        return state.addWatcher((value) => {
+            if (typeof value === 'function') {
+                setValue(() => value) // cannot directly store functions
+            } else {
+                setValue(value)
+            }
+        });
+    }, [state])
+    return value;
+}
+
+// export function createSharedStateContext<T>(initialValue: T) {
+//     const Context = React.createContext<SharedState<T>>(undefined as any);
+//     function SharedStateProvider({ value = initialValue, children }: {
+//         value?: T,
+//         children: React.ReactNode
+//     }) {
+//         const state = useMemo(() => {
+//             return new SharedState(value);
+//         }, []);
+//         return <Context.Provider value={state}>{children}</Context.Provider>
+//     }
+
+//     const useSharedState = () => {
+//         return React.useContext(Context);
+//     }
+//     return {
+//         Context,
+//         Provider: SharedStateProvider,
+//         useSharedState,
+//         useWatchSharedState: () => {
+//             const state = useSharedState();
+//             return state ? useWatchSharedState(state) : undefined;
+//         }
+//     }
+// }

package/src/core/hooks/index.ts

@@ -0,0 +1,13 @@
+export * from "./CompositeState.js"
+export * from "./SharedState.js"
+export * from "./useClickOutside.js"
+export * from "./useCopyToClipboard.js"
+export * from "./useDarkMode.js"
+export * from "./useDebounce"
+export * from "./useEventSource.js"
+export * from "./useFetch.js"
+export * from "./useFlag.js"
+export * from "./useIntersectionObserver.js"
+export * from "./useIsFistRendering.js"
+export * from "./useSafeLayoutEffect.js"
+export * from "./useSharedValue.js"