@vertesia/ui 0.56.0 → 0.57.0

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

@@ -0,0 +1,262 @@
+import React, { Dispatch, SetStateAction, useEffect } from "react";
+import { cn } from "../../libs/utils";
+import { Button, Popover, PopoverTrigger, PopoverContent, Command, CommandInput, CommandList, CommandGroup, CommandItem, CommandEmpty } from "../index";
+import { ListFilter } from "lucide-react";
+import { DateRange } from "react-day-picker";
+
+import { Filter, FilterGroup } from "./types";
+import Filters from "./filters";
+
+import TextFilter from "./textFilter";
+import DateFilter from "./dateFilter";
+import SelectFilter from "./selectFilter";
+
+interface FilterBarProps {
+  filters: Filter[];
+  setFilters: Dispatch<SetStateAction<Filter[]>>;
+  filterGroups: FilterGroup[];
+}
+
+export function FilterBar({ filters, setFilters, filterGroups }: FilterBarProps) {
+  const [open, setOpen] = React.useState(false);
+  const [selectedView, setSelectedView] = React.useState<string | null>(null);
+  const [commandInput, setCommandInput] = React.useState("");
+  const commandInputRef = React.useRef<HTMLInputElement>(null);
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>();
+  const [textValue, setTextValue] = React.useState("");
+
+  const handleSelect = (groupName: string) => {
+    setSelectedView(groupName);
+    setCommandInput("");
+    commandInputRef.current?.focus();
+  };
+
+  const getAvailableFilterGroups = () => {
+    let options = filterGroups.map(group => ({
+      ...group,
+      options: (group.options ?? []).filter(option =>
+        !filters.some(filter => {
+          if (filter.type === "date") {
+            return filter.name === group.name;
+          }
+          return filter.name === group.name &&
+            filter.value.some(val => val.value === option.value);
+        })
+      )
+    })).filter(group =>
+      ((group.options ?? []).length > 0) ||
+      (group.type === "date" && !filters.some(filter => filter.name === group.name)) ||
+      (group.type === "text" && !filters.some(filter => filter.name === group.name))
+    );
+
+    if (options.length === 0) {
+      return <CommandEmpty>No available filters</CommandEmpty>;
+    }
+
+    return options.map((group: FilterGroup, index: number) => (
+      <CommandItem
+        key={index}
+        onSelect={() => handleSelect(group.name)}
+        className="group flex gap-2 items-center hover:bg-muted"
+      >
+        <span>{group.placeholder ?? group.name}</span>
+      </CommandItem>
+    ));
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+    setTimeout(() => {
+      setSelectedView(null);
+      setCommandInput("");
+      setDateRange(undefined);
+    }, 200);
+  };
+
+  const handleOpen = (open: boolean) => {
+    setOpen(open);
+    if (!open) {
+      setTimeout(() => {
+        setSelectedView(null);
+        setCommandInput("");
+        setTextValue("");
+      }, 200);
+    }
+  };
+
+  const ButtonClearFilter = () => {
+    return (
+      <div className="flex gap-2 items-center">
+        <Button
+          variant="outline"
+          size="xs"
+          className="transition group"
+          onClick={() => setFilters([])}
+        >
+          Clear All
+        </Button>
+      </div>
+    );
+  };
+
+  const renderFilterOptions = () => {
+    if (!selectedView) return null;
+
+    const selectedGroupType = filterGroups.find(g => g.name === selectedView)?.type;
+
+    switch (selectedGroupType) {
+      case "date":
+        return (
+          <DateFilter
+            selectedView={selectedView}
+            dateRange={dateRange}
+            setDateRange={setDateRange}
+            setFilters={setFilters}
+            filters={filters}
+            handleClose={handleClose}
+            filterGroups={filterGroups}
+          />
+        );
+      case "text":
+        return (
+          <TextFilter
+            selectedView={selectedView}
+            textValue={textValue}
+            setTextValue={setTextValue}
+            setFilters={setFilters}
+            handleClose={handleClose}
+            filterGroups={filterGroups}
+          />
+        );
+      default:
+        return (
+          <SelectFilter
+            selectedView={selectedView}
+            commandInput={commandInput}
+            setFilters={setFilters}
+            handleClose={handleClose}
+            filterGroups={filterGroups}
+          />
+        );
+    }
+  };
+
+  const url = new URL(window.location.href);
+  const searchParams = url.searchParams;
+  useEffect(() => {
+    try {
+      const urlSafeFilters = filters.map(filter => {
+        const safeValue = Array.isArray(filter.value)
+          ? filter.value.map(item => ({
+            value: item.value
+          }))
+          : filter.value;
+
+        return {
+          name: filter.name,
+          type: filter.type,
+          value: safeValue,
+          placeholder: filter.placeholder
+        };
+      });
+
+      const params = new URLSearchParams(searchParams.toString());
+      if (filters.length > 0) {
+        params.set('filters', encodeURIComponent(JSON.stringify(urlSafeFilters)));
+      } else {
+        params.delete('filters');
+      }
+
+      const newUrl = `${window.location.pathname}?${params.toString()}`;
+      window.history.replaceState({}, '', newUrl);
+    } catch (error) {
+      console.error("Failed to update URL with filters:", error);
+    }
+  }, [filters]);
+
+  useEffect(() => {
+    const filtersParam = searchParams.get('filters');
+    if (filtersParam) {
+      try {
+        const parsedFilters = JSON.parse(decodeURIComponent(filtersParam));
+
+        const hydratedFilters = parsedFilters.map((filter: any) => {
+
+          if (Array.isArray(filter.value)) {
+            const group = filterGroups.find(g => g.name === filter.name);
+            console.log("group", group);
+
+            const valuesWithLabels = filter.value.map((item: any) => {
+              const matchingOption = group?.options?.find(opt => opt.value === item.value);
+
+              return {
+                value: item.value,
+                label: matchingOption?.label || item.value
+              };
+            });
+
+            console.log("valuesWithLabels", valuesWithLabels);
+
+            return {
+              ...filter,
+              value: valuesWithLabels
+            };
+          }
+
+          return filter;
+        });
+
+        setFilters(hydratedFilters);
+      } catch (error) {
+        console.error("Failed to parse filters from URL:", error);
+      }
+    }
+  }, []);
+
+  return (
+    <div className="flex gap-2 flex-wrap justify-start w-full items-center">
+      <div className="flex gap-2 items-center">
+        <Popover _open={open} onOpenChange={handleOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="ghost"
+              role="combobox"
+              aria-expanded={open}
+              size="md"
+              className={cn(
+                "transition group flex gap-1.5",
+              )}
+            >
+              <ListFilter className="size-4 shrink-0 transition-all text-muted" />
+              {"Filter"}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-[200px] p-0" align="start">
+            <Command>
+              {filterGroups.find(group => group.name === selectedView)?.type === "select" ? (
+                <CommandInput
+                  placeholder={selectedView ? `Filter by ${selectedView}` : "Filter..."}
+                  className="h-9 ring-0"
+                  value={commandInput}
+                  onValueChange={(value) => {
+                    setCommandInput(value);
+                  }}
+                  ref={commandInputRef}
+                  autoFocus={true}
+                />
+              ) : null}
+
+              <CommandList className="max-h-[300px] overflow-y-auto">
+                <CommandGroup>
+                  {!selectedView ? getAvailableFilterGroups() : renderFilterOptions()}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      </div>
+      <Filters filters={filters} setFilters={setFilters} filterGroups={filterGroups} />
+      {filters.filter((filter) => filter.value?.length > 0).length > 0 && <ButtonClearFilter />}
+    </div>
+  );
+}

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

@@ -0,0 +1,110 @@
+import { X } from "lucide-react";
+import { Dispatch, SetStateAction } from "react";
+import { Button } from "../button";
+
+import { Filter, FilterGroup } from "./types";
+import { SelectionCombobox, DateCombobox, TextCombobox } from "./comboBox";
+import { format } from "date-fns";
+
+interface FiltersProps {
+    filters: Filter[];
+    setFilters: Dispatch<SetStateAction<Filter[]>>;
+    filterGroups: FilterGroup[];
+}
+
+function generateComboboxOptions(
+    filter: Filter,
+    setFilters: Dispatch<SetStateAction<Filter[]>>,
+    filterGroups: FilterGroup[]
+) {
+    switch (filter.type) {
+        case 'date':
+            return (
+                <DateCombobox
+                    filterType={filter.name}
+                    filterValues={filter.value.map(v => v.value || '')}
+                    setFilterValues={(filterValues) => {
+                        setFilters((prev) =>
+                            prev.map((f) =>
+                                f === filter ? {
+                                    ...f,
+                                    value: filterValues.map(val => ({
+                                        value: val,
+                                        label: format(new Date(val), "LLL dd, y")
+                                    }))
+                                } : f
+                            )
+                        );
+                    }}
+                />
+            );
+        case 'text':
+            return (
+                <TextCombobox
+                    filterType={filter.placeholder || filter.name}
+                    filterValue={filter.value[0]?.value || ''}
+                    setFilterValue={(textValue) => {
+                        setFilters((prev) =>
+                            prev.map((f) =>
+                                f === filter ? {
+                                    ...f,
+                                    value: [{
+                                        value: textValue,
+                                        label: textValue
+                                    }]
+                                } : f
+                            )
+                        );
+                    }}
+                />
+            );
+        case 'select':
+        default:
+            return (
+                <SelectionCombobox
+                    filterType={filter.placeholder || filter.name}
+                    filterValues={filter.value}
+                    setFilterValues={(filterValues) => {
+                        setFilters((prev) =>
+                            prev.map((f) =>
+                                f === filter ? { ...f, value: filterValues } : f
+                            )
+                        );
+                    }}
+                    options={filterGroups.find(group => group.name === filter.name)?.options || []}
+                />
+            );
+    }
+}
+
+export default function Filters({
+    filters,
+    setFilters,
+    filterGroups,
+}: FiltersProps) {
+
+    return (
+        <div className="flex gap-2 flex-wrap justify-end">
+            {filters
+                .filter((filter) => filter.value?.length > 0)
+                .map((filter) => (
+                    <div className="flex gap-[1px] items-center text-sm" key={filter.name + '-' + (filter.type == 'date' ? 'date' : filter.value.map(v => v.value).join(','))}>
+                        <div className="flex gap-1.5 shrink-0 rounded-l bg-muted px-1.5 py-1 items-center">
+                            {filter.placeholder || filter.name}
+                        </div>
+                        {generateComboboxOptions(filter, setFilters, filterGroups)}
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => {
+                                setFilters((prev) => prev.filter((f) => f !== filter));
+                            }}
+                            className="bg-muted rounded-l-none rounded-r-sm size-7 hover:text-primary hover:bg-muted/50 transition shrink-0"
+                        >
+                            <X className="size-6" />
+                        </Button>
+                    </div>
+                ))}
+        </div>
+    );
+}

package/src/core/components/shadcn/filters/index.ts

@@ -0,0 +1,5 @@
+export * from './animateChangeInHeight';
+export * from './comboBox';
+export * from './filterBar';
+export * from './filters';
+export * from './types';

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

@@ -0,0 +1,91 @@
+import React from "react";
+import { CommandItem, CommandEmpty } from "../index";
+import { Filter, FilterGroup, FilterOption } from "./types";
+
+interface SelectFilterProps {
+  selectedView: string | null;
+  commandInput: string;
+  setFilters: React.Dispatch<React.SetStateAction<Filter[]>>;
+  handleClose: () => void;
+  filterGroups: FilterGroup[];
+}
+
+export default function SelectFilter({
+  selectedView,
+  commandInput,
+  setFilters,
+  handleClose,
+  filterGroups,
+}: SelectFilterProps) {
+  const getFilteredOptions = (groupName: string) => {
+    const group = filterGroups.find(g => g.name === groupName);
+    if (!group) return [];
+
+    let filteredOptions = group.options || [];
+
+    if (!commandInput.trim()) {
+      return filteredOptions;
+    }
+
+    if (group.filterBy) {
+      const filterLc = commandInput.toLowerCase();
+      const results = filteredOptions.filter(option => {
+        if (option.value === undefined) return false;
+        const result = group.filterBy!(option.value, filterLc);
+        return result;
+      });
+      return results;
+    }
+
+    const filterLc = commandInput.toLowerCase();
+    return filteredOptions.filter(option => {
+      const optionValue = String(option.value || '').toLowerCase();
+      return optionValue.includes(filterLc);
+    });
+  };
+
+  if (!selectedView) return null;
+  
+  const options = getFilteredOptions(selectedView);
+  
+  if (options.length === 0) {
+    return <CommandEmpty>No matching options</CommandEmpty>;
+  }
+  
+  return (
+    <>
+      {options.map((option: FilterOption) => (
+        <CommandItem
+          key={option.value || `option-${Math.random()}`}
+          className="group flex gap-2 items-center w-full hover:bg-muted"
+          onSelect={() => {
+            setFilters((prev: Filter[]) => {
+              const existingFilterIndex = prev.findIndex(f => f.name === selectedView);
+              const selectedGroup = filterGroups.find(g => g.name === selectedView);
+
+              if (existingFilterIndex >= 0) {
+                const updatedFilters = [...prev];
+                updatedFilters[existingFilterIndex] = {
+                  ...updatedFilters[existingFilterIndex],
+                  value: [...updatedFilters[existingFilterIndex].value, option]
+                };
+                return updatedFilters;
+              } else {
+                return [...prev, {
+                  name: selectedView || "",
+                  placeholder: selectedGroup?.placeholder || "",
+                  value: [option],
+                  type: selectedGroup?.type || "select",
+                }];
+              }
+            });
+
+            handleClose();
+          }}
+        >
+          {option.label || option.value || 'Unnamed option'}
+        </CommandItem>
+      ))}
+    </>
+  );
+}

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

@@ -0,0 +1,59 @@
+import React from "react";
+import { Button, VInput } from "../index";
+import { Filter, FilterGroup } from "./types";
+
+interface TextFilterProps {
+  selectedView: string | null;
+  textValue: string;
+  setTextValue: (value: string) => void;
+  setFilters: React.Dispatch<React.SetStateAction<Filter[]>>;
+  handleClose: () => void;
+  filterGroups: FilterGroup[];
+}
+
+export default function TextFilter({
+  selectedView,
+  textValue,
+  setTextValue,
+  setFilters,
+  handleClose,
+  filterGroups,
+}: TextFilterProps) {
+  const handleTextFilterAdd = () => {
+    setFilters((prev: Filter[]) => {
+      return [
+        ...prev,
+        {
+          name: selectedView || "",
+          placeholder: filterGroups.find(group => group.name === selectedView)?.placeholder,
+          value: [{ value: textValue, label: textValue }],
+          type: "text",
+        }
+      ];
+    });
+
+    handleClose();
+  };
+
+  return (
+    <div className="p-2 flex flex-col gap-2">
+      <VInput
+        autoFocus
+        type="text"
+        size="sm"
+        value={textValue}
+        onChange={setTextValue}
+        onKeyDown={(e) => e.key === "Enter" && handleTextFilterAdd()}
+        placeholder="Enter text..."
+      />
+      <Button
+        size="sm"
+        variant="outline"
+        onClick={handleTextFilterAdd}
+        disabled={!textValue.trim()}
+      >
+        Apply
+      </Button>
+    </div>
+  );
+}

package/src/core/components/shadcn/filters/types.ts

@@ -0,0 +1,29 @@
+export interface FilterOption {
+  label?: React.ReactNode;
+  value?: string;
+}
+
+export interface FilterGroup {
+  name: string;
+  placeholder?: string;
+  type?: "select" | "date" | "text";
+  options?: FilterOption[];
+  allowCreate?: boolean;
+  filterBy?: (value: string, searchText: string) => boolean;
+}
+
+export interface Filter {
+  name: string;
+  placeholder?: string;
+  value: FilterOption[];
+  type?: "select" | "date" | "text";
+}
+
+export enum FilterOperator {
+  IS = "is",
+  IS_NOT = "is_not",
+  CONTAINS = "contains",
+  BEFORE = "before",
+  AFTER = "after",
+  IS_ANY_OF = "is_any_of"
+}

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

@@ -0,0 +1,23 @@
+import { cn } from "../libs/utils"
+import { type HTMLAttributes, forwardRef } from "react"
+
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+  level?: 1 | 2 | 3 | 4 | 5 | 6
+}
+
+export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({ className, level = 3, ...props }, ref) => {
+  const Component = `h${level}` as const
+
+  const styles = {
+    h1: "text-2xl font-medium tracking-tight",
+    h2: "text-xl font-medium tracking-tight",
+    h3: "text-lg font-medium",
+    h4: "text-base font-medium",
+    h5: "text-sm font-medium",
+    h6: "text-xs font-medium",
+  }
+
+  return <Component ref={ref} className={cn(styles[`h${level}`], 'mb-2', className)} {...props} />
+})
+
+Heading.displayName = "Heading"

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

@@ -0,0 +1,22 @@
+import ModeToggle from './theme/ThemeSwitcher';
+import { ThemeProvider } from './theme/ThemeProvider';
+export { ModeToggle, ThemeProvider };
+
+export * from './button';
+export * from './card';
+export * from './dialog';
+export * from './input';
+export * from './separator';
+export * from './selectBox';
+export * from './tabs';
+export * from './tooltip';
+export * from './label';
+export * from './breadcrumb';
+export * from './dialog';
+export * from './button';
+export * from './filters';
+export * from './popover';
+export * from './command';
+export * from './checkbox';
+export * from './heading';
+export * from './text';

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

@@ -0,0 +1,89 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../libs/utils"
+import { X } from "lucide-react";
+import { ChangeEvent } from "react";
+
+const variants = cva(
+  "",
+  {
+    variants: {
+      size: {
+        xs: "rounded py-1 text-xs rounded-xs",
+        sm: "rounded text-xs rounded-sm",
+        md: "rounded-md py-2 text-sm",
+        lg: "rounded-md text-base",
+        xl: "rounded-md py-2.5 text-lg",
+      },
+      variant: {
+        default: "flex w-full rounded-md border border-input bg-background py-2 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-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        unstyled: "block m-0 p-0 w-full border-0 focus:outline-hidden focus:ring-0 bg-transparent",
+        noPadding: "block rounded-md border-0 bg-background shadow-2xs ring-1 ring-inset ring-ring placeholder:text-muted-foreground focus:ring-2 focus:ring-inset focus:ring-ring ring-offset-background",
+        legacy: "py-1.5 block rounded-md border-0 bg-background shadow-2xs ring-1 ring-inset ring-ring placeholder:text-muted-foreground focus:ring-2 focus:ring-inset focus:ring-ring ring-offset-background",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default",
+    },
+  }
+)
+
+type InputVariant = "default" | "unstyled" | "noPadding" | "legacy";
+
+export interface VInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
+  size?: VariantProps<typeof variants>["size"];
+  variant?: InputVariant;
+  clearable?: boolean;
+  value?: string;
+  onChange?: (value: string) => void
+}
+
+const VInput = React.forwardRef<HTMLInputElement, VInputProps>(
+  ({ className, type, size = "md", variant = "default", clearable = true, onChange, value, ...props }, ref) => {
+
+    const _onClear = () => {
+      onChange && onChange('');
+    };
+
+    const _onChange = (ev: ChangeEvent<HTMLInputElement>) => {
+      onChange && onChange(ev.target.value);
+    };
+
+    return (
+      <div className="w-full" style={{ position: 'relative', display: 'inline-block' }}>
+        <input
+          type={type}
+          className={
+            cn(
+              variants({ size, variant }),
+              className,
+              clearable && value ? "pr-6" : "",
+            )}
+          ref={ref}
+          value={value == null ? '' : value}
+          onChange={_onChange}
+          {...props}
+        />
+        {clearable && value && !props.readOnly && !props.disabled && (
+          <button
+            onClick={_onClear}
+            className={`absolute ${type !== 'number' ? 'right-0' : 'right-7'} top-1/2 -translate-y-1/2 size-7 text-muted-foreground hover:text-destructive cursor-pointer flex items-center justify-center`}
+            type="button"
+            aria-label="Clear input"
+          >
+            <X size={16} />
+          </button>
+        )}
+      </div>
+    )
+  }
+)
+
+VInput.displayName = "VInput"
+
+export {
+  VInput,
+}