@vertesia/ui 0.56.0 → 0.57.0

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

@@ -0,0 +1,230 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cn } from "../libs/utils";
+
+import { X } from "lucide-react";
+import { Button } from "./button";
+import { VisuallyHidden } from "../libs/visuallyHidden";
+import { createContext, useContext } from "react";
+
+interface ModalProps {
+    children: React.ReactNode | React.ReactNode[];
+    isOpen: boolean;
+    onClose: () => void;
+    description?: string;
+    noCloseButton?: boolean;
+    className?: string;
+    allowOverflow?: boolean;
+    disableCloseOnClickOutside?: boolean;
+}
+const ModalContext = createContext<boolean>(false)
+export function useIsInModal() {
+    return !!useContext(ModalContext);
+}
+export function ModalContextProvider({ children }: { children: React.ReactNode }) {
+    return <ModalContext.Provider value={true}>{children}</ModalContext.Provider>
+}
+
+export function VModal({
+    className,
+    children,
+    isOpen,
+    onClose,
+    description = "Modal Description",
+    noCloseButton = false,
+    allowOverflow = false,
+    disableCloseOnClickOutside = false,
+}: ModalProps) {
+    const handleOpenChange = (open: boolean) => {
+        if (!open) {
+            onClose();
+        }
+    };
+
+    return (
+        <Dialog
+            open={isOpen}
+            onOpenChange={(open) => {
+                if (!disableCloseOnClickOutside || open) {
+                    handleOpenChange(open);
+                }
+            }}
+        >
+            {allowOverflow && <DialogOverlay className="z-50 fixed inset-0 bg-black/80" />}
+            <VisuallyHidden>
+                <DialogDescription>{description}</DialogDescription>
+            </VisuallyHidden>
+            <DialogContent
+                className={cn(
+                    "min-h-20 p-2",
+                    "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
+                )}
+            >
+                {!noCloseButton && (
+                    <DialogClose onClick={() => handleOpenChange(false)} asChild autoFocus={false}>
+                        <Button
+                            variant="outline"
+                            alt="Close"
+                            className="top-4 right-4 absolute data-[state=open]:bg-accent opacity-70 hover:opacity-100 rounded-sm focus:outline-none focus:ring-2 focus:ring-ring ring-offset-background focus:ring-offset-2 data-[state=open]:text-muted-foreground transition-opacity disabled:pointer-events-none"
+                        >
+                            <X className="w-4 h-4" />
+                        </Button>
+                    </DialogClose>
+                )}
+                <ModalContextProvider>
+                    {children}
+                </ModalContextProvider>
+            </DialogContent>
+        </Dialog>
+    );
+}
+
+export const VModalTitle = ({
+    children,
+    show = true,
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLHeadingElement> & { show?: boolean }) => {
+    if (!show) {
+        return (
+            <VisuallyHidden>
+                <DialogTitle>{children}</DialogTitle>
+            </VisuallyHidden>
+        )
+    }
+    return (
+        <DialogTitle
+            className={cn("text-lg font-semibold leading-6 tracking-tight p-4", className)}
+            {...props}
+        >
+            {children}
+        </DialogTitle>
+    );
+};
+
+export const VModalBody = ({
+    children,
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <div className={cn("text-sm p-4 max-h-[80vh] overflow-y-auto", className)} {...props}>
+            {children}
+        </div>
+    );
+};
+
+interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    align?: "left" | "right" | "center";
+}
+
+export const VModalFooter = ({
+    align = "right",
+    children,
+    className,
+    ...props
+}: ModalFooterProps) => {
+    const alignClass = {
+        left: "justify-start",
+        center: "justify-center",
+        right: "justify-end",
+    };
+    return (
+        <div
+            className={cn(
+                "w-full flex py-3 sm:py-2 sm:flex sm:flex-row-reverse sm:flex-row sm:justify-end sm:space-x-2",
+                alignClass[align],
+                className
+            )}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+};
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Overlay
+        ref={ref}
+        className={cn(
+            "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            className
+        )}
+        {...props}
+    />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <DialogPortal>
+        <DialogOverlay />
+        <DialogPrimitive.Content
+            ref={ref}
+            autoFocus={false}
+            onOpenAutoFocus={(event) => {
+                event.preventDefault();
+            }}
+            className={cn(
+                "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-2 border bg-background shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+                className
+            )}
+            {...props}
+        >
+            {children}
+        </DialogPrimitive.Content>
+    </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogDescription = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Description
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+const DialogTitle = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Title
+        ref={ref}
+        className={cn(
+            "text-lg font-semibold leading-none tracking-tight",
+            className
+        )}
+        {...props}
+    />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+
+export {
+    Dialog,
+    DialogPortal,
+    DialogOverlay,
+    DialogClose,
+    DialogTrigger,
+    DialogContent,
+    DialogTitle,
+    DialogDescription,
+};

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

@@ -0,0 +1,41 @@
+import { cn } from "../../libs/utils";
+import { useEffect, useRef, useState } from "react";
+
+interface AnimateChangeInHeightProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export const AnimateChangeInHeight: React.FC<AnimateChangeInHeightProps> = ({
+    children,
+    className,
+}: AnimateChangeInHeightProps) => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const [height, setHeight] = useState<number | "auto">("auto");
+
+    useEffect(() => {
+        if (containerRef.current) {
+            const resizeObserver = new ResizeObserver((entries) => {
+                // We only have one entry, so we can use entries[0].
+                const observedHeight = entries[0].contentRect.height;
+                setHeight(observedHeight);
+            });
+
+            resizeObserver.observe(containerRef.current);
+
+            return () => {
+                // Cleanup the observer when the component is unmounted
+                resizeObserver.disconnect();
+            };
+        }
+    }, []);
+
+    return (
+        <div
+            className={cn(className, "overflow-hidden transition-all duration-100 ease-in")}
+            style={{ height }}
+        >
+            <div ref={containerRef}>{children}</div>
+        </div>
+    );
+};

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

@@ -0,0 +1,251 @@
+import { useRef, useState } from "react";
+// import { AnimatePresence, motion } from "motion/react";
+import { Calendar } from "../calendar";
+import { DateRange } from "react-day-picker";
+import { format } from "date-fns";
+
+import { Checkbox } from "../checkbox";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "../command";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { FilterOption } from "./types";
+import { AnimateChangeInHeight } from "./animateChangeInHeight";
+import { Button } from "../button";
+import { VInput } from "../input";
+
+
+export const SelectionCombobox = ({
+    filterType,
+    filterValues,
+    setFilterValues,
+    options,
+}: {
+    filterType: string;
+    filterValues: FilterOption[];
+    setFilterValues: (filterValues: FilterOption[]) => void;
+    options: FilterOption[];
+}) => {
+    const [open, setOpen] = useState(false);
+    const [commandInput, setCommandInput] = useState("");
+    const commandInputRef = useRef<HTMLInputElement>(null);
+    const nonSelectedFilterValues = options?.filter(
+        (option) => !filterValues.some(filter => filter.value === option.value)
+    );
+    return (
+        <Popover
+            _open={open}
+            onOpenChange={(open) => {
+                setOpen(open);
+                if (!open) {
+                    setTimeout(() => {
+                        setCommandInput("");
+                    }, 200);
+                }
+            }}
+        >
+            <PopoverTrigger
+                className="rounded-none px-1.5 py-1 bg-muted hover:bg-muted/50 transition
+  text-muted-foreground hover:text-primary shrink-0"
+            >
+                <div className="flex gap-1.5 items-center">
+                    {filterValues?.length === 1 ? (
+                        (() => {
+                            const option = filterValues[0];
+                            return option.label
+                        })()
+                    ) : (
+                        `${filterValues?.length} selected`
+                    )}
+                </div>
+            </PopoverTrigger>
+            <PopoverContent className="w-[200px] p-0">
+                <AnimateChangeInHeight>
+                    <Command>
+                        <CommandInput
+                            placeholder={filterType}
+                            className="h-9"
+                            value={commandInput}
+                            onInputCapture={(e) => {
+                                setCommandInput(e.currentTarget.value);
+                            }}
+                            ref={commandInputRef}
+                        />
+                        <CommandList>
+                            <CommandEmpty>No results found.</CommandEmpty>
+                            <CommandGroup>
+                                {filterValues.map((value) => {
+                                    return (
+                                        <CommandItem
+                                            key={value.value}
+                                            className="group flex gap-2 items-center"
+                                            onSelect={() => {
+                                                setFilterValues(filterValues.filter((v) => v.value !== value.value));
+                                                setTimeout(() => {
+                                                    setCommandInput("");
+                                                }, 200);
+                                                setOpen(false);
+                                            }}
+                                        >
+                                            <Checkbox checked={true} />
+                                            {value.label}
+                                        </CommandItem>
+                                    );
+                                })}
+                            </CommandGroup>
+                            {nonSelectedFilterValues?.length > 0 && (
+                                <>
+                                    <CommandSeparator />
+                                    <CommandGroup>
+                                        {nonSelectedFilterValues
+                                            .filter(option =>
+                                                String(option.label).toLowerCase().includes(commandInput.toLowerCase())
+                                            )
+                                            .map((filter: FilterOption) => (
+                                                <CommandItem
+                                                    className="group flex gap-2 items-center"
+                                                    key={filter.value}
+                                                    value={String(filter.label)}
+                                                    onSelect={() => {
+                                                        setFilterValues([...filterValues, filter]);
+                                                        setTimeout(() => {
+                                                            setCommandInput("");
+                                                        }, 200);
+                                                        setOpen(false);
+                                                    }}
+                                                >
+                                                    <Checkbox
+                                                        checked={false}
+                                                        className="opacity-0 group-data-[selected=true]:opacity-100"
+                                                    />
+                                                    <span className="text-accent-foreground">
+                                                        {filter.label}
+                                                    </span>
+                                                </CommandItem>
+                                            ))}
+                                    </CommandGroup>
+                                </>
+                            )}
+                        </CommandList>
+                    </Command>
+                </AnimateChangeInHeight>
+            </PopoverContent>
+        </Popover>
+    );
+};
+
+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,
+    });
+
+    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"
+            >
+                <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")
+                        )
+                    ) : (
+                        <span>Pick a date</span>
+                    )}
+                </div>
+            </PopoverTrigger>
+            <PopoverContent className="w-full 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") : "",
+                            ]);
+                        }
+                    }}
+                    numberOfMonths={2}
+                />
+            </PopoverContent>
+        </Popover>
+    );
+};
+
+export const TextCombobox = ({
+    filterValue,
+    setFilterValue,
+}: {
+    filterType: string;
+    filterValue: string;
+    setFilterValue: (value: string) => void;
+}) => {
+    const [open, setOpen] = useState(false);
+    const [inputValue, setInputValue] = useState(filterValue);
+
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+        if (event.key === "Enter") {
+            setFilterValue(inputValue);
+            setOpen(false);
+        }
+    };
+
+    return (
+        <Popover
+            _open={open}
+            onOpenChange={(open) => {
+                setOpen(open);
+                if (!open && inputValue !== filterValue) {
+                    setInputValue(filterValue);
+                }
+            }}
+        >
+            <PopoverTrigger
+                className="rounded-none px-1.5 py-1 bg-muted hover:bg-muted/50 transition
+                text-muted-foreground hover:text-primary shrink-0"
+            >
+                <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
+                        type="text" size={"sm"}
+                        value={inputValue}
+                        onChange={setInputValue}
+                        onKeyDown={handleKeyDown}
+                        placeholder="Enter text..."
+                    />
+                    <Button
+                        size="sm" variant={"outline"}
+                        onClick={() => {
+                            setFilterValue(inputValue);
+                            setOpen(false);
+                        }}
+                    >
+                        Apply
+                    </Button>
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+};

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

@@ -0,0 +1,65 @@
+
+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>>;
+  setFilters: React.Dispatch<React.SetStateAction<Filter[]>>;
+  filters: Filter[];
+  handleClose: () => void;
+  filterGroups: FilterGroup[];
+}
+
+export default function DateFilter({
+  selectedView,
+  dateRange,
+  setDateRange,
+  setFilters,
+  filters,
+  handleClose,
+  filterGroups,
+}: DateFilterProps) {
+  const handleDateRangeSelect = (range: DateRange | undefined) => {
+    setDateRange(range);
+    if (range?.from && range?.to) {
+      const selectedGroup = filterGroups.find(g => g.name === selectedView);
+      setFilters([
+        ...filters,
+        {
+          name: selectedView || "",
+          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")
+            }
+          ],
+          type: selectedGroup?.type || "date",
+        } as Filter,
+      ]);
+
+      handleClose();
+    }
+  };
+
+  return (
+    <div className="p-2">
+      <Calendar
+        initialFocus
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={handleDateRangeSelect}
+        size="sm"
+      />
+    </div>
+  );
+}