@vertesia/ui 0.56.0 → 0.58.0

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

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../libs/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants> & {
+      required?: boolean
+    }
+>(({ className, required, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  >
+    {props.children}
+    {required && <span className="text-destructive-foreground ml-1">*</span>}
+  </LabelPrimitive.Root>
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

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

@@ -0,0 +1,115 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "../libs/utils"
+import { JSX } from "react";
+import { useIsInModal } from "./dialog";
+
+interface PopoverContextValue {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  hover: boolean;
+  click: boolean;
+}
+const PopoverContext = React.createContext<PopoverContextValue | null>(null);
+
+interface PopoverProps {
+  _open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  hover?: boolean;
+  click?: boolean;
+  children?: React.ReactNode;
+}
+const Popover = ({ hover = false, click = false, children, _open, onOpenChange }: PopoverProps): JSX.Element => {
+  const [open, setOpen] = React.useState(_open || false);
+  const insideModal = useIsInModal();
+
+  const handleOpenChange = (open: boolean) => {
+    setOpen(open);
+    if (onOpenChange) {
+      onOpenChange(open);
+    }
+  };
+
+  return (
+    <PopoverContext.Provider value={{ open, setOpen, hover, click }}>
+      <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange} modal={insideModal}>
+        {children}
+      </PopoverPrimitive.Root>
+    </PopoverContext.Provider>
+  );
+};
+
+function handleHover(hover: boolean = false, setOpen: React.Dispatch<React.SetStateAction<boolean>> = () => { }, type: "enter" | "leave") {
+  if (hover) {
+    setOpen(type === "enter");
+  }
+}
+
+const PopoverTrigger = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>
+>(({ children, ...props }, ref) => {
+  const context = React.useContext(PopoverContext);
+
+  if (!context) {
+    throw new Error("PopoverTrigger must be used within a Popover");
+  }
+
+  const { setOpen, hover, click } = context;
+
+  return (
+    <PopoverPrimitive.Trigger
+      ref={ref}
+      asChild
+      onMouseEnter={() => handleHover(hover, setOpen, "enter")}
+      onMouseLeave={() => handleHover(hover, setOpen, "leave")}
+      onClick={() => {
+        if (click) setOpen((prev) => !prev);
+      }}
+      {...props}
+    >
+      {children}
+    </PopoverPrimitive.Trigger>
+  );
+});
+PopoverTrigger.displayName = PopoverPrimitive.Trigger.displayName;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", side = "bottom", ...props }, ref) => {
+  const context = React.useContext<PopoverContextValue | null>(PopoverContext);
+
+  if (!context) {
+    throw new Error("PopoverContent must be used within a Popover");
+  }
+
+  const { setOpen, hover } = context;
+
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        side={side}
+        onMouseEnter={() => handleHover(hover, setOpen, "enter")}
+        onMouseLeave={() => handleHover(hover, setOpen, "leave")}
+        // onClick={() => {setOpen(false)}}
+        className={cn(
+          "z-50 w-72 rounded-md border-popover bg-popover text-popover-foreground ring-1 ring-gray-200 dark:ring-slate-700 shadow-md focus:outline-none animate-in",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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}
+      />
+    </PopoverPrimitive.Portal>
+  );
+});
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+const PopoverClose = PopoverPrimitive.Close;
+PopoverClose.displayName = PopoverPrimitive.Close.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose };

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

@@ -0,0 +1,186 @@
+import clsx from 'clsx';
+import { isEqual } from 'lodash-es';
+import { Check, ChevronsUpDown, SearchIcon, SquarePlus, X } from 'lucide-react';
+import { useState, useEffect, useRef } from 'react';
+
+import { Popover, PopoverContent, PopoverTrigger, PopoverClose } from './popover';
+import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from './command';
+import { VInput } from './input';
+
+interface VSelectBoxProps<T> {
+    options: T[] | undefined;
+    value?: T;
+    optionLabel?: (option: T) => React.ReactNode;
+    onChange: (option: T) => void;
+    onBlur?: () => void;
+    onKeyDown?: (e: React.KeyboardEvent, isOpen: boolean) => void;
+    label?: string;
+    placeholder?: string;
+    addNew?: () => void;
+    addNewLabel?: string;
+    disabled?: boolean;
+    filterBy?: string | ((o: T) => string);
+    by?: (keyof T & string) | ((a: T, z: T) => boolean)
+    className?: string;
+    popupClass?: string;
+    isClearable?: boolean;
+    border?: boolean;
+}
+
+export function VSelectBox<T = any>({ options, optionLabel, value, onChange, addNew, addNewLabel, disabled, filterBy, label, placeholder, className, popupClass, isClearable, border= true }: Readonly<VSelectBoxProps<T>>) {
+    const triggerRef = useRef<HTMLDivElement>(null);
+    const [open, setOpen] = useState(false);
+    const [width, setWidth] = useState<number>(0);
+    const [filterValue, setFilterValue] = useState('');
+
+    useEffect(() => {
+        const element = triggerRef.current;
+        if (!element) {
+            return;
+        }
+
+        const updateWidth = () => {
+            const contentWidth = element.getBoundingClientRect().width;
+            setWidth(contentWidth);
+        };
+
+        const resizeObserver = new ResizeObserver(() => {
+            updateWidth();
+        });
+
+        updateWidth();
+        resizeObserver.observe(element);
+
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+
+    const handleTriggerClick = (e: React.MouseEvent) => {
+        if (disabled) {
+            e.preventDefault();
+            return;
+        }
+        setOpen(!open);
+    };
+
+    const _onClick = (opt: any) => {
+        setOpen(false);
+        onChange(opt);
+    };
+
+    let filteredOptions = options || [];
+
+    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;
+        }
+    }
+
+    const filterLc = filterValue.toLowerCase();
+    const filterFn = getFilterByFn(filterBy);
+    filteredOptions = filteredOptions.filter(o => filterFn(o).includes(filterLc))
+
+    return (
+        <Popover>
+            <PopoverTrigger asChild>
+                <div
+                    ref={triggerRef}
+                    onClick={handleTriggerClick}
+                    className={clsx(
+                        className,
+                        border && 'border border-border',
+                        'flex flex-row gap-2 items-center justify-between p-2 rounded-md group',
+                        !disabled && "cursor-pointer hover:bg-muted"
+                    )}
+                >
+                    <div
+                        className={clsx(
+                            "flex flex-col w-fill rounded-md text-sm items-center justify-center truncate ",
+                            !disabled && ""
+                        )}
+                    >
+                        {label && <div className='w-full text-left text-xs font-semibold'>{label}</div>}
+                        <div className={clsx('w-full text-left', !disabled && '')}>
+                            {value ? (optionLabel ? optionLabel(value) : value as string) : placeholder}
+                        </div>
+                        {isClearable && value && (
+                            <div
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                }}
+                                className="absolute right-2 top-1/2 transform -translate-y-1/2 cursor-pointer"
+                            >
+                                <X className="size-4" />
+                            </div>
+                        )}
+                    </div>
+                    {
+                        !disabled && (
+                            <ChevronsUpDown className="size-4 opacity-50" />
+                        )
+                    }
+                </div>
+            </PopoverTrigger>
+
+            <PopoverContent
+                style={{ width: `${width}px`, zIndex: 1000000 }}
+                className={clsx(
+                    "min-w-[8rem] w-64 bg-popover p-1 border shadow",
+                    "divide-y divide-border",
+                    popupClass
+                )}
+            >
+                {filterBy && (
+
+                    <div className='flex justify-start items-center mb-1'>
+                        <div className='mx-2'>
+                            <SearchIcon className="size-4" />
+                        </div>
+                        <VInput variant='unstyled' value={filterValue} onChange={setFilterValue} className="w-full p-1 rounded-md" placeholder="Search..." />
+                    </div>
+                )}
+                <Command className="overflow-hidden">
+                    <CommandList className="max-h-[200px] overflow-y-auto">
+                        <CommandEmpty>No result found.</CommandEmpty>
+                        <CommandGroup className="overflow-visible">
+                            {filteredOptions?.map((opt, index) => (
+                                <CommandItem
+                                    key={index}
+                                    onSelect={() => _onClick(opt)}
+                                    className="w-full"
+                                >
+                                    <PopoverClose className='w-full flex justify-between items-center'>
+                                        <div className='w-full truncate text-left'>
+                                            {optionLabel ? optionLabel(opt) : opt as String}
+                                        </div>
+                                        {isEqual(value, opt) && <Check className="size-4" />}
+                                    </PopoverClose>
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                    </CommandList>
+                </Command>
+                {
+                    addNew && (
+                        <div className='p-1'>
+                            <a
+                                onClick={addNew}
+                                className={clsx(
+                                    'gap-x-2 px-2 py-1.5 truncate group flex rounded-md items-center text-sm cursor-pointer hover:bg-accent',
+                                )}
+                            >
+                                <SquarePlus size={16} strokeWidth={1.25} absoluteStrokeWidth />
+                                {addNewLabel}
+                            </a>
+                        </div>
+                    )
+                }
+            </PopoverContent>
+        </Popover>
+    );
+}

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

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "../libs/utils"
+
+const Separator = React.forwardRef<
+    React.ElementRef<typeof SeparatorPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+    (
+        { className, orientation = "horizontal", decorative = true, ...props },
+        ref
+    ) => (
+        <SeparatorPrimitive.Root
+            ref={ref}
+            decorative={decorative}
+            orientation={orientation}
+            className={cn(
+                "shrink-0 bg-border",
+                orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+                className
+            )}
+            {...props}
+        />
+    )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

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

@@ -0,0 +1,218 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "../libs/utils";
+import { Tab, TabsContext as _TabContext } from '../tabs/TabsContext.js';
+import { VSelectBox } from "./selectBox";
+
+const TabsContext = React.createContext<{
+  size?: number;
+  tabs?: Tab[];
+  current?: string;
+  setTab?: (name: string) => void;
+  responsive?: boolean;
+}>({
+  size: undefined,
+  tabs: undefined,
+  current: undefined,
+  setTab: undefined,
+  responsive: false
+});
+
+interface TabsProps {
+  current?: string | (() => string);
+  tabs: Tab[];
+  defaultValue?: string;
+  className?: string;
+  fullWidth?: boolean;
+  children?: React.ReactNode;
+  onTabChange?: (tabName: string) => void;
+  responsive?: boolean;
+}
+
+const VTabs = ({
+  tabs,
+  defaultValue,
+  current,
+  className,
+  fullWidth,
+  children,
+  onTabChange,
+  responsive = false
+}: TabsProps) => {
+  const currentValue = typeof current === 'function' ? current() : current || defaultValue;
+
+  const [value, setValue] = React.useState(currentValue);
+
+  React.useEffect(() => {
+    if (currentValue) {
+      setValue(currentValue);
+    }
+  }, [currentValue]);
+
+  const handleValueChange = (newValue: string) => {
+    setValue(newValue);
+    if (onTabChange) {
+      onTabChange(newValue);
+    }
+  };
+
+  const setTab = React.useCallback((tabName: string) => {
+    handleValueChange(tabName);
+  }, [handleValueChange]);
+
+  return (
+    <TabsContext.Provider value={{ tabs, size: fullWidth ? tabs.length : 0, current: value, setTab, responsive: responsive }}>
+      <TabsPrimitive.Root
+        defaultValue={tabs[0]?.name}
+        value={value}
+        onValueChange={handleValueChange}
+        className={className}
+      >
+        {children}
+      </TabsPrimitive.Root>
+    </TabsContext.Provider>
+  );
+};
+
+const VTabsBar = ({ className }: { className?: string }) => {
+  const { tabs, size, current, setTab, responsive } = React.useContext(TabsContext);
+
+  const fullWidth = size !== 0;
+
+  const handleTabChange = React.useCallback((tabName: string) => {
+    if (!tabs || !setTab) return;
+
+    const tab = tabs.find(t => t.name === tabName);
+
+    if (tab?.href) {
+      window.history.pushState(null, '', tab.href);
+    }
+
+    setTab(tabName);
+
+  }, [tabs, setTab]);
+
+  if (!tabs || !setTab) {
+    console.warn("TabsBar: No tabs provided or setTab not available");
+    return null;
+  }
+
+  return (
+    <>
+      {responsive && (
+        <div className="px-2 block lg:hidden">
+          <VSelectBox
+            label="Tab"
+            className={(className)}
+            options={tabs}
+            optionLabel={(tab: Tab) => typeof tab.label === 'string' ? tab.label : String(tab.label)}
+            value={tabs.find(tab => tab.name === current)}
+            onChange={(tab: Tab) => {
+              handleTabChange(tab.name);
+            }}
+          />
+        </div>
+      )}
+      <TabsList size={size} className={cn((fullWidth ? "w-full" : ""), className, (responsive ? "hidden lg:flex" : ""))}>
+        {tabs.map((tab) => (
+          <TabsTrigger
+            key={tab.name}
+            value={tab.name}
+            disabled={tab.disabled}
+            href={tab.href}
+            onClick={() => handleTabChange(tab.name)}
+          >
+            {tab.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+    </>
+  );
+};
+
+const VTabsPanel = () => {
+  const { tabs } = React.useContext(TabsContext);
+
+  if (!tabs) return null;
+
+  return (
+    <>
+      {tabs.map((tab) => (
+        <TabsContent key={tab.name} value={tab.name}>
+          {tab.content}
+        </TabsContent>
+      ))}
+    </>
+  );
+};
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & { size?: number }
+>(({ className, size, ...props }, ref) => (
+  <TabsContext.Provider value={{ size }}>
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn(
+        "border-b -mb-px flex space-x-4",
+        className
+      )}
+      {...props}
+    />
+  </TabsContext.Provider>
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+    href?: string;
+  }
+>(({ className, href, ...props }, ref) => {
+  const { size } = React.useContext(TabsContext);
+
+  const handleClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    if (href) {
+      event.preventDefault();
+      window.history.pushState(null, '', href);
+    }
+    if (props.onClick) {
+      (props.onClick as React.MouseEventHandler<HTMLButtonElement>)(event);
+    }
+  }, [href, props.onClick]);
+
+  return (
+    <TabsPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "border-b-2 px-2 py-1.5 text-sm font-medium whitespace-nowrap cursor-pointer",
+        "border-transparent text-muted-foreground hover:border-border hover:text-foreground",
+        "data-[state=active]:border-primary data-[state=active]:text-primary",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className,
+        size ? `w-1/${size}` : ""
+      )}
+      onClick={handleClick}
+      {...props}
+    />
+  );
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "focus-visible:outline-none",
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { VTabs, VTabsBar, VTabsPanel, TabsList, TabsTrigger, TabsContent };

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

@@ -0,0 +1,33 @@
+import { cn } from "../libs/utils"
+import { type VariantProps, cva } from "class-variance-authority"
+import { type HTMLAttributes, forwardRef } from "react"
+
+// Update the text variants to match the new sizing requirements
+const textVariants = cva("text-foreground", {
+  variants: {
+    size: {
+      xl: "text-base md:text-lg leading-relaxed",
+      lg: "text-base leading-relaxed",
+      default: "text-sm leading-normal",
+      sm: "text-sm leading-normal",
+      xs: "text-xs leading-normal",
+    },
+    weight: {
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+    weight: "normal",
+  },
+})
+
+export interface TextProps extends HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof textVariants> {}
+
+export const Text = forwardRef<HTMLParagraphElement, TextProps>(({ className, size, weight, ...props }, ref) => {
+  return <p ref={ref} className={cn(textVariants({ size, weight, className }))} {...props} />
+})
+
+Text.displayName = "Text"

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

@@ -0,0 +1,73 @@
+import { createContext, useContext, useEffect, useState } from "react"
+
+type Theme = "dark" | "light" | "system"
+
+type ThemeProviderProps = {
+  children: React.ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+}
+
+type ThemeProviderState = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+}
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "vite-ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  )
+
+  useEffect(() => {
+    const root = window.document.documentElement
+
+    root.classList.remove("light", "dark")
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light"
+
+      root.classList.add(systemTheme)
+      return
+    }
+
+    root.classList.add(theme)
+  }, [theme])
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme)
+      setTheme(theme)
+    },
+  }
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext)
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider")
+
+  return context
+}