@vertesia/ui 0.60.0 → 0.61.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "0.60.0",
+  "version": "0.61.0",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -21,7 +21,10 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.36.8",
+    "@floating-ui/dom": "^1.7.1",
+    "@floating-ui/react": "^0.27.11",
     "@headlessui/react": "^2.2.2",
+    "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-checkbox": "^1.3.1",
     "@radix-ui/react-dialog": "^1.1.13",
     "@radix-ui/react-label": "^2.1.6",
@@ -35,21 +38,26 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "codemirror": "^6.0.1",
-    "date-fns": "^4.1.0",
+    "dayjs": "^1.11.13",
     "debounce": "^2.2.0",
     "fast-xml-parser": "^5.2.3",
     "firebase": "^10.12.2",
     "jwt-decode": "^4.0.0",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.511.0",
+    "monaco-editor": "^0.52.2",
     "motion": "^12.12.1",
     "react": "^19.1.0",
     "react-day-picker": "^8.10.1",
     "react-dom": "^19.1.0",
+    "react-error-boundary": "^6.0.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.3.0",
-    "@vertesia/json": "0.60.0",
-    "@vertesia/client": "0.60.0",
-    "@vertesia/common": "0.60.0"
+    "ts-md5": "^1.3.1",
+    "@vertesia/client": "0.61.0",
+    "@vertesia/common": "0.61.0",
+    "@vertesia/json": "0.61.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.27.0",

package/src/core/components/FormItem.tsx

@@ -0,0 +1,35 @@
+import clsx from 'clsx';
+import { ReactNode } from 'react';
+
+import { VTooltip } from './shadcn/tooltip';
+import { Info } from 'lucide-react';
+
+interface FormItemProps {
+    label: any;
+    children: ReactNode;
+    className?: string;
+    description?: ReactNode;
+    required?: boolean;
+    direction?: "row" | "column";
+}
+export function FormItem({ description, required, label, className, direction = "column", children }: FormItemProps) {
+    return (
+        <div className={clsx("flex w-full space-y-1", className, direction === "row" ? "flex-row justify-between" : "flex-col")}>
+            <div className='flex items-center gap-1'>
+                <label className="text-sm font-medium mb-1">
+                    {label}{required ? <span className='text-destructive -mt-4 ml-1'>*</span> : ""}
+                </label>
+                {
+                    description &&
+                    <div className='mx-2 flex w-4 items-center'>
+                        <VTooltip
+                            description={description}>
+                            <Info className="size-3 text-muted" />
+                        </VTooltip>
+                    </div>
+                }
+            </div>
+            {children}
+        </div>
+    );
+}

package/src/core/components/InputList.tsx

@@ -2,7 +2,8 @@ import clsx from 'clsx';
 import { useState } from 'react';
 
 import { Badge } from './Badge';
-import { VInput } from './shadcn/input';
+import { Input } from './shadcn/input';
+import { Styles } from './styles';
 
 interface InputListProps {
     value?: string[];
@@ -48,7 +49,7 @@ export function InputList({ value = [], onChange, className, delimiters = ", ",
     };
 
     return (
-        <div className={clsx(className, 'w-full space-x-1 space-y-1 flex flex-wrap w-full rounded-md py-2 px-1 text-sm border border-input bg-background dark:bg-slate-800 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2')}>
+        <div className={clsx(className, 'w-full space-x-1 space-y-1 p-2', Styles.INPUT)}>
             {
                 value && value.length > 0 &&
                 (value.map((v, index) =>
@@ -58,7 +59,7 @@ export function InputList({ value = [], onChange, className, delimiters = ", ",
                 ))
             }
             <div>
-                <VInput
+                <Input
                     clearable={false}
                     className='placeholder:text-muted-foreground px-1'
                     variant='unstyled'

package/src/core/components/index.ts

@@ -6,12 +6,11 @@ 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 "./FormItem.js";
 export * from "./InputList.js";
 export * from "./Link.js";
 export * from "./MenuList.js";
@@ -24,6 +23,8 @@ export * from "./RadioGroup.js";
 export * from "./SelectBox.js";
 export * from "./SelectList.js";
 export * from "./SelectStack.js";
+export * from "./shadcn/index.js";
+export * from "./SidePanel.js";
 export * from "./Spinner.js";
 export * from "./styles.js";
 export * from "./Switch.js";
@@ -31,7 +32,6 @@ 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;

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

@@ -1,11 +1,12 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
-import { VTooltip } from "./tooltip"
+import { VTooltip } from "@vertesia/ui/core"
 
 import { cn } from "../libs/utils"
-import { Loader2 } from "lucide-react"
+import { Check, CopyIcon, Loader2 } from "lucide-react"
 import clsx from "clsx"
+import { useState } from "react"
 
 const buttonVariants = cva(
   "hover:cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -17,18 +18,17 @@ const buttonVariants = cva(
         outline:
           "border border-input bg-background shadow-xs hover:bg-muted ring-inset",
         secondary:
-          "bg-secondary-background text-secondary hover:bg-secondary-background/80 ring-inset",
+          "bg-primary/5 dark:bg-primary/10 text-primary shadow-xs hover:bg-primary/10 dark:hover:bg-primary/20 ring-inset",
         ghost: "hover:bg-muted/50 dark:hover:bg-muted/20 ring-inset",
         link: "text-white underline-offset-4 hover:underline ring-inset",
         primary:
           "bg-primary text-white shadow-xs hover:bg-primary/90 ring-inset",
-        soft: "bg-primary/5 dark:bg-primary/10 text-primary shadow-xs hover:bg-primary/10 dark:hover:bg-primary/20 ring-inset",
         unstyled:
           ""
       },
       size: {
         xs: 'h-7 rounded px-2 py-1 text-xs gap-x-1',
-        sm: "h-8 rounded px-2 text-xs",
+        sm: "h-8 rounded px-3 text-xs",
         md: "h-9 rounded-md px-4 py-2",
         lg: "h-10 rounded-md px-3",
         xl: 'rounded-md px-3.5 py-2.5 text-sm gap-x-2',
@@ -58,8 +58,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const buttonElement = (
       <Comp
         className={clsx(
-          className,
-          cn(buttonVariants({ variant, size}))
+          cn(buttonVariants({ variant, size})),
+          className
         )}
         disabled={isDisabled || isLoading || props.disabled}
         ref={ref}
@@ -92,4 +92,64 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 )
 Button.displayName = "Button"
 
-export { Button, buttonVariants }
+interface CopyButtonProps {
+  content: string
+  alt?: string
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon"
+  toast?: {
+    toast: any,
+    message: string
+  }
+  className?: string
+}
+
+const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
+  ({ size, content, toast, className, alt, ...props }, ref) => {
+
+    const [isCopied, setIsCopied] = useState(false);
+
+    const handleCopy = () => {
+      navigator.clipboard.writeText(content).then(() => {
+        setIsCopied(true)
+        setTimeout(() => setIsCopied(false), 2000)
+        if (!toast || !toast.toast) {
+          return
+        }
+        toast.toast({
+          status: "success",
+          title: toast.message || "Copied to clipboard",
+          duration: 2000,
+        })
+      }).catch((err) => {
+        console.error("Failed to copy text: ", err)
+        if (toast && toast.toast)
+          toast.toast({
+            status: "error",
+            title: "Failed to copy",
+            duration: 2000,
+          })
+      })
+    }
+
+    return (
+      <Button
+        ref={ref}
+        className={cn(className)}
+        variant={"unstyled"}
+        size={size || "sm"}
+        onClick={handleCopy}
+        {...props}
+        alt={alt ?? "Copy"}
+      >
+        {isCopied ? 
+          <Check className="text-success" />
+          :
+          <CopyIcon className="size-4" />
+        }
+      </Button>
+    )
+  }
+)
+CopyButton.displayName = "CopyButton"
+
+export { Button, CopyButton, buttonVariants }

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

@@ -58,7 +58,7 @@ export function VModal({
             </VisuallyHidden>
             <DialogContent
                 className={cn(
-                    "min-h-20 p-2",
+                    "min-h-20 p-4",
                     "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background shadow-lg duration-200 sm:rounded-lg",
                     className
                 )}
@@ -97,7 +97,7 @@ export const VModalTitle = ({
     }
     return (
         <DialogTitle
-            className={cn("text-lg font-semibold leading-6 tracking-tight p-4", className)}
+            className={cn("text-lg font-semibold leading-6 tracking-tight py-2", className)}
             {...props}
         >
             {children}
@@ -111,7 +111,7 @@ export const VModalBody = ({
     ...props
 }: React.HTMLAttributes<HTMLDivElement>) => {
     return (
-        <div className={cn("text-sm p-4 max-h-[80vh] overflow-y-auto", className)} {...props}>
+        <div className={cn("text-sm max-h-[80vh] overflow-y-auto", className)} {...props}>
             {children}
         </div>
     );

package/src/core/components/shadcn/filters/DynamicLabel.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+
+interface DynamicLabelProps {
+  value: string;
+  labelRenderer?: (value: string) => React.ReactNode | Promise<React.ReactNode>;
+  fallbackLabel?: React.ReactNode;
+}
+
+export function DynamicLabel({ value, labelRenderer, fallbackLabel }: DynamicLabelProps) {
+  const [label, setLabel] = useState<React.ReactNode>(fallbackLabel || value);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (!labelRenderer) {
+      setLabel(fallbackLabel || value);
+      return;
+    }
+
+    const renderLabel = async () => {
+      setIsLoading(true);
+      try {
+        const result = labelRenderer(value);
+        if (result instanceof Promise) {
+          const resolvedLabel = await result;
+          setLabel(resolvedLabel);
+        } else {
+          setLabel(result);
+        }
+      } catch (error) {
+        console.error('Error rendering label:', error);
+        setLabel(fallbackLabel || value);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    renderLabel();
+  }, [value, labelRenderer, fallbackLabel]);
+
+  if (isLoading) {
+    return <span className="text-muted-foreground">Loading...</span>;
+  }
+
+  return <>{label}</>;
+}

package/src/core/components/shadcn/filters/comboBox.tsx

@@ -1,16 +1,16 @@
 import { useRef, useState } from "react";
 // import { AnimatePresence, motion } from "motion/react";
+import dayjs from "dayjs";
 import { Calendar } from "../calendar";
-import { DateRange } from "react-day-picker";
-import { format } from "date-fns";
 
+import { Button } from "../button";
 import { Checkbox } from "../checkbox";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "../command";
+import { Input } from "../input";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
-import { FilterOption } from "./types";
 import { AnimateChangeInHeight } from "./animateChangeInHeight";
-import { Button } from "../button";
-import { VInput } from "../input";
+import { FilterGroupOption, FilterOption } from "./types";
+import { DynamicLabel } from "./DynamicLabel";
 
 
 export const SelectionCombobox = ({
@@ -18,11 +18,13 @@ export const SelectionCombobox = ({
     filterValues,
     setFilterValues,
     options,
+    labelRenderer,
 }: {
     filterType: string;
     filterValues: FilterOption[];
     setFilterValues: (filterValues: FilterOption[]) => void;
-    options: FilterOption[];
+    options: FilterGroupOption[];
+    labelRenderer?: (value: string) => React.ReactNode | Promise<React.ReactNode>;
 }) => {
     const [open, setOpen] = useState(false);
     const [commandInput, setCommandInput] = useState("");
@@ -43,21 +45,26 @@ export const SelectionCombobox = ({
             }}
         >
             <PopoverTrigger
-                className="rounded-none px-1.5 py-1 bg-muted hover:bg-muted/50 transition
-  text-muted-foreground hover:text-primary shrink-0"
+                className="rounded-none p-1 h-8 bg-muted hover:bg-muted/50 transition text-muted hover:text-primary shrink-0"
             >
                 <div className="flex gap-1.5 items-center">
                     {filterValues?.length === 1 ? (
                         (() => {
                             const option = filterValues[0];
-                            return option.label
+                            return (
+                                <DynamicLabel
+                                    value={option.value || ''}
+                                    labelRenderer={labelRenderer}
+                                    fallbackLabel={option.label}
+                                />
+                            )
                         })()
                     ) : (
                         `${filterValues?.length} selected`
                     )}
                 </div>
             </PopoverTrigger>
-            <PopoverContent className="w-[200px] p-0">
+            <PopoverContent className="w-[300px] p-0">
                 <AnimateChangeInHeight>
                     <Command>
                         <CommandInput
@@ -86,7 +93,11 @@ export const SelectionCombobox = ({
                                             }}
                                         >
                                             <Checkbox checked={true} />
-                                            {value.label}
+                                            <DynamicLabel
+                                                value={value.value || ''}
+                                                labelRenderer={labelRenderer}
+                                                fallbackLabel={value.label}
+                                            />
                                         </CommandItem>
                                     );
                                 })}
@@ -97,15 +108,18 @@ export const SelectionCombobox = ({
                                     <CommandGroup>
                                         {nonSelectedFilterValues
                                             .filter(option =>
-                                                String(option.label).toLowerCase().includes(commandInput.toLowerCase())
+                                                String(option.label || option.value).toLowerCase().includes(commandInput.toLowerCase())
                                             )
-                                            .map((filter: FilterOption) => (
+                                            .map((filter: FilterGroupOption) => (
                                                 <CommandItem
                                                     className="group flex gap-2 items-center"
                                                     key={filter.value}
-                                                    value={String(filter.label)}
+                                                    value={String(filter.label || filter.value)}
                                                     onSelect={() => {
-                                                        setFilterValues([...filterValues, filter]);
+                                                        setFilterValues([...filterValues, {
+                                                            value: filter.value,
+                                                            label: filter.label
+                                                        }]);
                                                         setTimeout(() => {
                                                             setCommandInput("");
                                                         }, 200);
@@ -116,8 +130,12 @@ export const SelectionCombobox = ({
                                                         checked={false}
                                                         className="opacity-0 group-data-[selected=true]:opacity-100"
                                                     />
-                                                    <span className="text-accent-foreground">
-                                                        {filter.label}
+                                                    <span className="text-muted">
+                                                        <DynamicLabel
+                                                            value={filter.value || ''}
+                                                            labelRenderer={filter.labelRenderer || labelRenderer}
+                                                            fallbackLabel={filter.label}
+                                                        />
                                                     </span>
                                                 </CommandItem>
                                             ))}
@@ -136,54 +154,37 @@ export const DateCombobox = ({
     filterValues,
     setFilterValues,
 }: {
-    filterType: string;
     filterValues: string[];
     setFilterValues: (values: string[]) => void;
 }) => {
     const [open, setOpen] = useState(false);
-    const [dateRange, setDateRange] = useState<DateRange | undefined>({
-        from: filterValues[0] ? new Date(filterValues[0]) : undefined,
-        to: filterValues[1] ? new Date(filterValues[1]) : undefined,
-    });
+    const selectedDate = filterValues[0] ? new Date(filterValues[0]) : undefined;
 
     return (
         <Popover _open={open} onOpenChange={setOpen}>
             <PopoverTrigger
-                className="rounded-none px-1.5 py-1 bg-muted hover:bg-muted/50 transition
-                text-muted-foreground hover:text-primary shrink-0"
+                className="rounded-none p-1 h-8 bg-muted hover:bg-muted/50 text-muted hover:text-primary shrink-0 transition"
             >
                 <div className="flex gap-1.5 items-center">
-                    {dateRange?.from ? (
-                        dateRange.to ? (
-                            <>
-                                {format(dateRange.from, "LLL dd, y")} -{" "}
-                                {format(dateRange.to, "LLL dd, y")}
-                            </>
-                        ) : (
-                            format(dateRange.from, "LLL dd, y")
-                        )
+                    {selectedDate ? (
+                        dayjs(selectedDate).format("MMM D, YYYY")
                     ) : (
                         <span>Pick a date</span>
                     )}
                 </div>
             </PopoverTrigger>
-            <PopoverContent className="w-full p-0" align="start">
+            <PopoverContent className="w-auto p-0" align="start">
                 <Calendar
-                    initialFocus
-                    mode="range"
-                    className="w-4/5 p-0"
-                    defaultMonth={dateRange?.from}
-                    selected={dateRange}
-                    onSelect={(range) => {
-                        setDateRange(range);
-                        if (range?.from) {
-                            setFilterValues([
-                                format(range.from, "yyyy-MM-dd"),
-                                range.to ? format(range.to, "yyyy-MM-dd") : "",
-                            ]);
+                    mode="single"
+                    className="p-0"
+                    defaultMonth={selectedDate}
+                    selected={selectedDate}
+                    onSelect={(date) => {
+                        if (date) {
+                            setFilterValues([dayjs(date).format("YYYY-MM-DD")]);
+                            setOpen(false);
                         }
                     }}
-                    numberOfMonths={2}
                 />
             </PopoverContent>
         </Popover>
@@ -191,6 +192,7 @@ export const DateCombobox = ({
 };
 
 export const TextCombobox = ({
+    filterType,
     filterValue,
     setFilterValue,
 }: {
@@ -219,16 +221,18 @@ export const TextCombobox = ({
             }}
         >
             <PopoverTrigger
-                className="rounded-none px-1.5 py-1 bg-muted hover:bg-muted/50 transition
-                text-muted-foreground hover:text-primary shrink-0"
+                className="rounded-none p-1 h-8 bg-muted hover:bg-muted/50 text-muted hover:text-primary shrink-0 transition"
             >
                 <div className="flex gap-1.5 items-center">
                     {filterValue || "Enter text..."}
                 </div>
             </PopoverTrigger>
-            <PopoverContent className="w-[200px] p-3">
-                <div className="flex flex-col gap-2 p-2">
-                    <VInput autoFocus
+            <PopoverContent className="w-[300px] p-3">
+                <div className="flex flex-col gap-1">
+                    <div className="flex items-center p-1.5 text-xs text-muted">
+                        <span>{filterType}</span>
+                    </div>
+                    <Input autoFocus
                         type="text" size={"sm"}
                         value={inputValue}
                         onChange={setInputValue}

package/src/core/components/shadcn/filters/dateFilter.tsx

@@ -1,14 +1,12 @@
-
+import dayjs from "dayjs";
 import React from "react";
 import { Calendar } from "../calendar";
-import { DateRange } from "react-day-picker";
-import { format } from "date-fns";
 import { Filter, FilterGroup } from "./types";
 
 interface DateFilterProps {
   selectedView: string | null;
-  dateRange: DateRange | undefined;
-  setDateRange: React.Dispatch<React.SetStateAction<DateRange | undefined>>;
+  selectedDate: Date | undefined;
+  setSelectedDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
   setFilters: React.Dispatch<React.SetStateAction<Filter[]>>;
   filters: Filter[];
   handleClose: () => void;
@@ -17,49 +15,50 @@ interface DateFilterProps {
 
 export default function DateFilter({
   selectedView,
-  dateRange,
-  setDateRange,
+  selectedDate,
+  setSelectedDate,
   setFilters,
   filters,
   handleClose,
   filterGroups,
 }: DateFilterProps) {
-  const handleDateRangeSelect = (range: DateRange | undefined) => {
-    setDateRange(range);
-    if (range?.from && range?.to) {
+  const handleDateSelect = (date: Date | undefined) => {
+    setSelectedDate(date);
+    if (date) {
       const selectedGroup = filterGroups.find(g => g.name === selectedView);
+      
+      // Set date to start of day (00:00)
+      const selectedDateStart = new Date(date);
+      selectedDateStart.setHours(0, 0, 0, 0);
+      
       setFilters([
         ...filters,
         {
           name: selectedView || "",
+          placeholder: selectedGroup?.placeholder,
           value: [
             {
-              value: format(range.from!, "yyyy-MM-dd"),
-              label: format(range.from!, "LLL dd, y")
-            },
-            {
-              value: format(range.to!, "yyyy-MM-dd"),
-              label: format(range.to!, "LLL dd, y")
+              value: selectedDateStart.toISOString(),
+              label: dayjs(selectedDateStart).format("LLL dd, y"),
             }
           ],
           type: selectedGroup?.type || "date",
         } as Filter,
       ]);
 
-      handleClose();
-    }
-  };
+            handleClose();
+        }
+    };
 
   return (
     <div className="p-2">
       <Calendar
-        initialFocus
-        mode="range"
-        defaultMonth={dateRange?.from}
-        selected={dateRange}
-        onSelect={handleDateRangeSelect}
+        mode="single"
+        defaultMonth={selectedDate}
+        selected={selectedDate}
+        onSelect={handleDateSelect}
         size="sm"
       />
     </div>
   );
-}
+}