@vertesia/ui 0.24.0-dev.202601221707

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

@@ -0,0 +1,375 @@
+import React, { Dispatch, SetStateAction, useEffect } from "react";
+import { cn } from "../../libs/utils";
+import { Button } from "../button";
+import { Popover, PopoverTrigger, PopoverContent } from "../popover";
+import { Command, CommandInput, CommandList, CommandGroup, CommandItem, CommandEmpty } from "../command";
+import { ListFilter } from "lucide-react";
+
+import { Filter, FilterGroup } from "./types";
+import Filters from "./filters";
+
+import TextFilter from "./filter/TextFilter";
+import DateFilter from "./filter/dateFilter";
+import SelectFilter from "./filter/SelectFilter";
+import StringListFilter from "./filter/StringListFilter";
+
+const FilterContext = React.createContext<{
+  filters: Filter[];
+  setFilters: Dispatch<SetStateAction<Filter[]>>;
+  filterGroups: FilterGroup[];
+}>({} as any);
+
+interface FilterProviderProps {
+  filters: Filter[];
+  setFilters: Dispatch<SetStateAction<Filter[]>>;
+  filterGroups: FilterGroup[];
+  children: React.ReactNode;
+}
+
+const FilterProvider = ({ filters, setFilters, filterGroups, children }: FilterProviderProps) => {
+  const url = new URL(window.location.href);
+  const searchParams = url.searchParams;
+  const [hasInitialized, setHasInitialized] = React.useState(false);
+
+  useEffect(() => {
+    try {
+      const params = new URLSearchParams(searchParams.toString());
+      if (filters.length > 0) {
+        // Convert filters to format with array indicators: filterName:value,value;filterName2:value
+        // Arrays are prefixed with []: filterName:[value1,value2]
+        const filterString = filters.map(filter => {
+          let values;
+          if (filter.type === 'stringList' && Array.isArray(filter.value) && typeof filter.value[0] === 'string') {
+            // Handle stringList with direct string array - always array format
+            values = `[${(filter.value as string[]).map(item => encodeURIComponent(item)).join(',')}]`;
+          } else if (Array.isArray(filter.value)) {
+            if (filter.multiple) {
+              // Handle multiple filters - always use array format for multiple=true
+              values = `[${filter.value.map((item: any) => encodeURIComponent(item.value || item || '')).join(',')}]`;
+            } else if (filter.value.length > 1) {
+              // Handle multiple values for non-multiple filters
+              values = `[${filter.value.map((item: any) => encodeURIComponent(item.value || item || '')).join(',')}]`;
+            } else {
+              // Single value in array for non-multiple filter - don't use array format
+              const firstValue = filter.value[0];
+              if (typeof firstValue === 'string') {
+                values = encodeURIComponent(firstValue);
+              } else if (typeof firstValue === 'object' && firstValue?.value !== undefined) {
+                // Handle FilterOption object
+                values = encodeURIComponent(String(firstValue.value));
+              } else {
+                values = encodeURIComponent(String(firstValue || ''));
+              }
+            }
+          } else {
+            values = encodeURIComponent(filter.value || '');
+          }
+          return `${encodeURIComponent(filter.name)}:${values}`;
+        }).join(';');
+        params.set('filters', filterString);
+      } else {
+        params.delete('filters');
+      }
+
+      const newUrl = `${window.location.pathname}?${params.toString()}${window.location.hash}`;
+      window.history.replaceState(window.history.state || {}, '', newUrl);
+    } catch (error) {
+      console.error("Failed to update URL with filters:", error);
+    }
+  }, [filters]);
+
+  useEffect(() => {
+    const filtersParam = searchParams.get('filters');
+    if (filtersParam && filterGroups.length > 0 && !hasInitialized) {
+      try {
+        // Parse format with array indicators: filterName:value or filterName:[value1,value2]
+        const filterPairs = filtersParam.split(';');
+        const parsedFilters = filterPairs.map(pair => {
+          const [encodedName, valuesString] = pair.split(':');
+          const name = decodeURIComponent(encodedName);
+
+          let values: string[];
+          // Check if it's an array format [value1,value2]
+          if (valuesString.startsWith('[') && valuesString.endsWith(']')) {
+            // Array format - remove brackets and split by comma
+            const arrayContent = valuesString.slice(1, -1); // Remove [ and ]
+            values = arrayContent ? arrayContent.split(',').map(encodedValue => decodeURIComponent(encodedValue)) : [];
+          } else {
+            // Single value format
+            values = [decodeURIComponent(valuesString)];
+          }
+
+          const group = filterGroups.find(g => g.name === name);
+          let filterValue;
+
+          if (group?.type === 'stringList') {
+            // For stringList, return direct string array
+            filterValue = values;
+          } else if (group?.type === 'text') {
+            // For text, return FilterOption array (single value for text inputs)
+            filterValue = values.length === 1 ? [{ value: values[0], label: values[0] }] :
+              values.map(value => ({ value, label: value }));
+          } else {
+            // For other types, find options with labels
+            filterValue = values.map(value => {
+              const matchingOption = group?.options?.find(opt => opt.value === value);
+              let label = value;
+
+              if (matchingOption?.label) {
+                label = String(matchingOption.label);
+              } else if (matchingOption?.labelRenderer) {
+                label = String(matchingOption.labelRenderer(value));
+              } else if (group?.labelRenderer) {
+                label = String(group.labelRenderer(value));
+              }
+
+              return {
+                value,
+                label
+              };
+            });
+          }
+
+          if (group?.multiple && !valuesString.startsWith('[') && !valuesString.endsWith(']')) {
+            if (group.type === 'stringList') {
+              filterValue = values;
+            } else {
+              if (!Array.isArray(filterValue)) {
+                filterValue = [filterValue];
+              }
+            }
+          }
+
+          // Fallback: if group not found but we detected array format, assume it should be multiple
+          const shouldBeMultiple = group?.multiple || (!group && valuesString.startsWith('[') && valuesString.endsWith(']'));
+
+          const filter = {
+            name,
+            type: group?.type || 'select',
+            placeholder: group?.placeholder,
+            value: filterValue,
+            multiple: shouldBeMultiple
+          };
+
+          return filter;
+        });
+
+        setFilters(parsedFilters);
+        setHasInitialized(true);
+      } catch (error) {
+        setHasInitialized(true);
+      }
+    } else if (filterGroups.length > 0 && !hasInitialized) {
+      // No URL params but we have groups - mark as initialized
+      setHasInitialized(true);
+    }
+  }, [filterGroups, hasInitialized]);
+
+  return (
+    <FilterContext.Provider value={{ filters, setFilters, filterGroups }}>
+      {children}
+    </FilterContext.Provider>
+  );
+};
+
+const FilterBtn = ({ className }: { className?: string }) => {
+  const { filters, setFilters, filterGroups } = React.useContext(FilterContext);
+  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 [selectedDate, setSelectedDate] = React.useState<Date | 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 &&
+            (Array.isArray(filter.value) && typeof filter.value[0] === 'string'
+              ? filter.value.some(val => val === option.value)
+              : filter.value.some(val => (val as any).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)) ||
+      (group.type === "stringList" && !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("");
+      setSelectedDate(undefined);
+    }, 200);
+  };
+
+  const handleOpen = (open: boolean) => {
+    setOpen(open);
+    if (!open) {
+      setTimeout(() => {
+        setSelectedView(null);
+        setCommandInput("");
+        setTextValue("");
+      }, 200);
+    }
+  };
+
+  const renderFilterOptions = () => {
+    if (!selectedView) {
+      return null;
+    }
+
+    const selectedGroupType = filterGroups.find(g => g.name === selectedView)?.type;
+
+    switch (selectedGroupType) {
+      case "date":
+        return (
+          <DateFilter
+            selectedView={selectedView}
+            selectedDate={selectedDate}
+            setSelectedDate={setSelectedDate}
+            setFilters={setFilters}
+            filters={filters}
+            handleClose={handleClose}
+            filterGroups={filterGroups}
+          />
+        );
+      case "text":
+        return (
+          <TextFilter
+            selectedView={selectedView}
+            textValue={textValue}
+            setTextValue={setTextValue}
+            setFilters={setFilters}
+            handleClose={handleClose}
+            filterGroups={filterGroups}
+          />
+        );
+      case "stringList":
+        return (
+          <StringListFilter
+            selectedView={selectedView}
+            setFilters={setFilters}
+            handleClose={handleClose}
+            filterGroups={filterGroups}
+          />
+        );
+      default:
+        return (
+          <SelectFilter
+            selectedView={selectedView}
+            commandInput={commandInput}
+            setFilters={setFilters}
+            handleClose={handleClose}
+            filterGroups={filterGroups}
+          />
+        );
+    }
+  };
+
+  return (
+    <Popover _open={open} onOpenChange={handleOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          size="md"
+          className={cn(
+            "transition group flex gap-1.5",
+            className
+          )}
+        >
+          <ListFilter className="size-4 shrink-0 transition-all text-muted" />
+          {"Filter"}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[300px] p-0" align="start" sideOffset={4}>
+        <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}
+              />
+            )
+          }
+          <CommandList>
+            <CommandEmpty>No matching filters</CommandEmpty>
+            <CommandGroup>
+              {!selectedView ? getAvailableFilterGroups() : renderFilterOptions()}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+const FilterBar = ({ className }: { className?: string }) => {
+  const { filters, setFilters, filterGroups } = React.useContext(FilterContext);
+
+  return (
+    <div className={cn(className)}>
+      <Filters filters={filters} setFilters={setFilters} filterGroups={filterGroups} />
+    </div>
+  );
+};
+
+const FilterClear = ({ className }: { className?: string}) => {
+  const { filters, setFilters } = React.useContext(FilterContext);
+
+  const hasActiveFilters = filters.filter((filter) => filter.value?.length > 0).length > 0;
+
+  if (!hasActiveFilters) {
+    return null;
+  }
+
+  return (
+    <Button
+      variant="outline"
+      size="xs"
+      className={cn("transition group", className)}
+      onClick={() => setFilters([])}
+    >
+      Clear All
+    </Button>
+  );
+};
+
+export { FilterProvider, FilterBtn, FilterBar, FilterClear };

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

@@ -0,0 +1,141 @@
+import { X } from "lucide-react";
+import { Dispatch, SetStateAction } from "react";
+import { Button } from "../button";
+
+import { DateCombobox, SelectionCombobox, TextCombobox, StringListCombobox } from "./comboBox/comboBox";
+import { Filter, FilterGroup, FilterOption } from "./types";
+import dayjs from "dayjs";
+
+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
+                    filterValues={Array.isArray(filter.value) && typeof filter.value[0] === 'object' ? filter.value.map((v: any) => v.value || '') : []}
+                    isRange={filter.multiple}
+                    setFilterValues={(filterValues) => {
+                        setFilters((prev) =>
+                            prev.map((f) =>
+                                f === filter ? {
+                                    ...f,
+                                    value: filterValues.length > 0 ?
+                                        filterValues.map(dateValue => ({
+                                            value: dateValue,
+                                            label: dayjs(dateValue).format("LLL dd, y"),
+                                        })) : []
+                                } : f
+                            )
+                        );
+                    }}
+                />
+            );
+        case "text":
+            return (
+                <TextCombobox
+                    filterType={filter.placeholder || filter.name}
+                    filterValue={Array.isArray(filter.value) && filter.value[0] && typeof filter.value[0] === 'object' ? filter.value[0].value || "" : ""}
+                    setFilterValue={(textValue) => {
+                        setFilters((prev) =>
+                            prev.map((f) =>
+                                f === filter
+                                    ? {
+                                        ...f,
+                                        value: [
+                                            {
+                                                value: textValue,
+                                                label: textValue,
+                                            },
+                                        ],
+                                    }
+                                    : f,
+                            ),
+                        );
+                    }}
+                />
+            );
+        case "stringList":
+            return (
+                <StringListCombobox
+                    filterType={filter.placeholder || filter.name}
+                    filterValues={Array.isArray(filter.value) && typeof filter.value[0] === 'string' ? filter.value as string[] : []}
+                    setFilterValues={(values) => {
+                        setFilters((prev) =>
+                            prev.map((f) =>
+                                f === filter
+                                    ? { ...f, value: values }
+                                    : f,
+                            ),
+                        );
+                    }}
+                />
+            );
+        case 'select':
+        default: {
+            const filterGroup = filterGroups.find(group => group.name === filter.name);
+            return (
+                <SelectionCombobox
+                    filterType={filter.placeholder || filter.name}
+                    filterValues={Array.isArray(filter.value) && typeof filter.value[0] === 'object' ? filter.value as FilterOption[] : []}
+                    setFilterValues={(filterValues) => {
+                        setFilters((prev) =>
+                            prev.map((f) =>
+                                f === filter
+                                    ? { ...f, value: filterValues }
+                                    : f,
+                            ),
+                        );
+                    }}
+                    options={filterGroup?.options || []}
+                    labelRenderer={filterGroup?.labelRenderer}
+                />
+            );
+        }
+    }
+}
+
+export default function Filters({
+    filters,
+    setFilters,
+    filterGroups,
+}: FiltersProps) {
+    return (
+        <div className="flex gap-2 flex-wrap justify-start">
+            {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.type === 'stringList' && typeof filter.value[0] === 'string' ? (filter.value as string[]).join(',') : Array.isArray(filter.value) ? filter.value.map((v: any) => v.value).join(',') : '')}>
+                        <div className="flex gap-1.5 shrink-0 rounded-l bg-muted p-1.5 h-8 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-8 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/comboBox';
+export * from './filterBar';
+export * from './filters';
+export * from './types';

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

@@ -0,0 +1,38 @@
+export interface FilterOption {
+  label?: React.ReactNode;
+  value?: string;
+}
+
+export interface FilterGroupOption {
+  label?: React.ReactNode;
+  value?: string;
+  labelRenderer?: (value: string) => React.ReactNode | Promise<React.ReactNode>;
+}
+
+export interface FilterGroup {
+  name: string;
+  placeholder?: string;
+  type?: "select" | "date" | "text" | "stringList";
+  multiple?: boolean;
+  options?: FilterGroupOption[];
+  allowCreate?: boolean;
+  filterBy?: (value: string, searchText: string) => boolean;
+  labelRenderer?: (value: string) => React.ReactNode | Promise<React.ReactNode>;
+}
+
+export interface Filter {
+  name: string;
+  placeholder?: string;
+  value: FilterOption[] | string[];
+  type?: "select" | "date" | "text" | "stringList";
+  multiple?: boolean;
+}
+
+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,23 @@
+export * from './theme/ThemeSwitcher';
+export * from './theme/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';
+export * from './resizeable';
+export * from './textarea';