@vertesia/ui 0.24.0-dev.202601221707

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

@@ -0,0 +1,302 @@
+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;
+  variant?: "tabs" | "pills";
+  updateHash?: boolean;
+}>({
+  size: undefined,
+  tabs: undefined,
+  current: undefined,
+  setTab: undefined,
+  responsive: false,
+  variant: "tabs",
+  updateHash: true
+});
+
+interface TabsProps {
+  current?: string | (() => string);
+  tabs: Tab[];
+  defaultValue?: string;
+  className?: string;
+  fullWidth?: boolean;
+  children?: React.ReactNode;
+  onTabChange?: (tabName: string) => void;
+  responsive?: boolean;
+  variant?: "tabs" | "pills";
+  updateHash?: boolean;
+}
+
+const VTabs = ({
+  tabs,
+  defaultValue,
+  current,
+  className,
+  fullWidth,
+  children,
+  onTabChange,
+  responsive = false,
+  variant = "tabs",
+  updateHash = true
+}: TabsProps) => {
+  // Initialize value
+  const [value, setValue] = React.useState(() => {
+    // First check if current is provided
+    const currentValue = typeof current === 'function' ? current() : current;
+    if (currentValue) {
+      return currentValue;
+    }
+
+    // Then check hash
+    const hash = window.location.hash;
+    const currentTab = hash ? hash.substring(1) : undefined;
+    
+    // Check if the tab from hash exists in tabs
+    if (currentTab && tabs.some(tab => tab.name === currentTab)) {
+      return currentTab;
+    }
+    
+    // Fall back to default or first tab
+    return defaultValue || tabs[0]?.name;
+  });
+
+  // Update when current prop changes (but don't create a loop)
+  React.useEffect(() => {
+    const currentValue = typeof current === 'function' ? current() : current;
+    if (currentValue && currentValue !== value) {
+      setValue(currentValue);
+    }
+  }, [current]);
+
+  // Listen to hash changes only when there's no current prop being controlled externally
+  React.useEffect(() => {
+    if (current) return; // Skip hash handling if controlled by parent
+
+    const handleHashChange = () => {
+      const hash = window.location.hash;
+      const currentTab = hash ? hash.substring(1) : undefined;
+      
+      // Only update if the tab exists in tabs
+      if (currentTab && tabs.some(tab => tab.name === currentTab)) {
+        setValue(currentTab);
+      } else if (!hash && defaultValue) {
+        // If no hash, fall back to default
+        setValue(defaultValue);
+      }
+    };
+
+    // Check initial hash
+    handleHashChange();
+
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, [current, tabs, defaultValue]);
+
+  const handleValueChange = (newValue: string) => {
+    setValue(newValue);
+    
+    // Update the URL hash when tab changes (only if updateHash is true and not controlled by parent)
+    if (updateHash && !current) {
+      // Preserve existing history state when changing hash
+      const currentState = window.history.state;
+      const newUrl = window.location.pathname + window.location.search + '#' + newValue;
+      window.history.pushState(currentState, '', newUrl);
+    }
+    
+    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, variant, updateHash }}>
+      <TabsPrimitive.Root
+        defaultValue={value || 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, variant, updateHash } = 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 && updateHash) {
+      // Preserve existing history state when changing tabs
+      const currentState = window.history.state;
+      window.history.pushState(currentState, '', tab.href);
+    }
+
+    setTab(tabName);
+
+  }, [tabs, setTab, updateHash]);
+
+  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} variant={variant} 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}
+            variant={variant}
+            onClick={() => handleTabChange(tab.name)}
+          >
+            {tab.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+    </>
+  );
+};
+
+const VTabsPanel = ({ className }: { className?: string }) => {
+  const { tabs } = React.useContext(TabsContext);
+
+  if (!tabs) return null;
+
+  return (
+    <>
+      {tabs.map((tab) => (
+        <TabsContent key={tab.name} value={tab.name} className={className}>
+          {tab.content}
+        </TabsContent>
+      ))}
+    </>
+  );
+};
+
+type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & { size?: number; variant?: "tabs" | "pills" };
+
+const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.List>>> = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  TabsListProps
+>(({ className, size, variant = "tabs", ...props }, ref) => (
+  <TabsContext.Provider value={{ size, variant }}>
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn(
+        variant === "tabs" 
+          ? "border-b -mb-px flex space-x-4"
+          : "flex space-x-2 p-1 rounded-md",
+        className
+      )}
+      {...props}
+    />
+  </TabsContext.Provider>
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+  href?: string;
+  variant?: "tabs" | "pills";
+};
+
+const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Trigger>>> = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  TabsTriggerProps
+>(({ className, href, variant = "tabs", ...props }, ref) => {
+  const { size } = React.useContext(TabsContext);
+
+  const handleClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    if (href) {
+      event.preventDefault();
+      // Preserve existing history state when changing tabs
+      const currentState = window.history.state;
+      window.history.pushState(currentState, '', href);
+    }
+    if (props.onClick) {
+      (props.onClick as React.MouseEventHandler<HTMLButtonElement>)(event);
+    }
+  }, [href, props.onClick]);
+
+  return (
+    <TabsPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        variant === "tabs" 
+          ? 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"
+            )
+          : cn(
+              "px-3 py-1.5 text-sm font-medium whitespace-nowrap cursor-pointer rounded-sm transition-colors",
+              "tborder border-input bg-muted shadow-xs hover:bg-muted ring-inset",
+              "data-[state=active]:bg-primary data-[state=active]:text-white data-[state=active]:shadow-sm",
+              "disabled:pointer-events-none disabled:opacity-50"
+            ),
+        className,
+        size ? `w-1/${size}` : ""
+      )}
+      onClick={handleClick}
+      {...props}
+    />
+  );
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+type TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
+
+const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Content>>> = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  TabsContentProps
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "focus-visible:outline-none",
+      "flex-1 overflow-y-auto min-h-0 pt-2",
+      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/textarea.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "../libs/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "py-2 text-sm",
+        "flex w-full rounded-md border border-input bg-background ring-offset-background",
+        "placeholder:text-muted focus-visible:outline-none focus-visible:ring-1 ring-inset focus-visible:ring-ring",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

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

@@ -0,0 +1,75 @@
+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 { ThemeProviderContext }
+
+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
+}

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 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,59 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import { cn } from "../libs/utils"
+import { ReactNode } from "react"
+
+const TooltipProvider: typeof TooltipPrimitive.Provider = TooltipPrimitive.Provider
+
+const Tooltip: typeof TooltipPrimitive.Root = TooltipPrimitive.Root
+
+const TooltipTrigger: typeof TooltipPrimitive.Trigger = TooltipPrimitive.Trigger
+
+type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+};
+
+const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<React.ElementRef<typeof TooltipPrimitive.Content>>> = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  TooltipContentProps
+>(({ 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-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 border border-gray-700 dark:border-gray-300 px-3 py-1.5 text-xs shadow-lg 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 = "rounded-md text-sm flex w-full rounded-md border border-input bg-background ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+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,70 @@
+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>
+    )
+}
+
+interface THeadProps {
+    children: React.ReactNode
+}
+export function THead({ children }: Readonly<THeadProps>) {
+    return (
+        <thead className="sticky top-0 bg-background z-10 after:absolute after:bottom-0 after:left-0 after:w-full after:h-px after:bg-muted/20">
+            {children}
+        </thead>
+    )
+}
+
+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-muted"></div>
+                </td>
+            )}
+        </tr>
+    )
+}
+
+interface TBodySkeletonProps {
+    isLoading?: boolean
+    columns: number
+    rows?: number
+    children: React.ReactNode
+}
+export function TBody({ isLoading = false, columns, rows = 3, children }: Readonly<TBodySkeletonProps>) {
+    return (
+        <tbody>
+            {
+                (isLoading) ? (
+                    Array(rows).fill(0).map((_, index) => <RowSkeleton columns={columns} key={index} />)
+                ) : (
+                    children
+                )
+            }
+        </tbody>
+    )
+}
+
+export function TR({ className, children, ...others }: React.HTMLProps<HTMLTableRowElement>) {
+    return (
+        <tr className={clsx("hover:bg-muted hover:cursor-pointer", className)} {...others}>
+            {children}
+        </tr>
+    )
+}