@vertesia/ui 0.24.0-dev.202601221707

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

@@ -0,0 +1,145 @@
+import { useRef, useState } from "react";
+import { Checkbox } from "../../checkbox";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "../../command";
+import { Popover, PopoverContent, PopoverTrigger } from "../../popover";
+import { AnimateChangeInHeight } from "../animateChangeInHeight";
+import { FilterGroupOption, FilterOption } from "../types";
+import { DynamicLabel } from "../DynamicLabel";
+
+export const SelectionCombobox = ({
+    filterType,
+    filterValues,
+    setFilterValues,
+    options,
+    labelRenderer,
+}: {
+    filterType: string;
+    filterValues: FilterOption[];
+    setFilterValues: (filterValues: FilterOption[]) => void;
+    options: FilterGroupOption[];
+    labelRenderer?: (value: string) => React.ReactNode | Promise<React.ReactNode>;
+}) => {
+    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 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 (
+                                <DynamicLabel
+                                    value={option.value || ''}
+                                    labelRenderer={labelRenderer}
+                                    fallbackLabel={option.label}
+                                />
+                            )
+                        })()
+                    ) : (
+                        `${filterValues?.length} selected`
+                    )}
+                </div>
+            </PopoverTrigger>
+            <PopoverContent className="w-[300px] 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);
+                                            }}
+                                        >
+                                            <input type="checkbox" checked={true} onChange={() => {}} />
+                                            <DynamicLabel
+                                                value={value.value || ''}
+                                                labelRenderer={labelRenderer}
+                                                fallbackLabel={value.label}
+                                            />
+                                        </CommandItem>
+                                    );
+                                })}
+                            </CommandGroup>
+                            {nonSelectedFilterValues?.length > 0 && (
+                                <>
+                                    <CommandSeparator />
+                                    <CommandGroup>
+                                        {nonSelectedFilterValues
+                                            .filter(option =>
+                                                String(option.label || option.value).toLowerCase().includes(commandInput.toLowerCase())
+                                            )
+                                            .map((filter: FilterGroupOption) => (
+                                                <CommandItem
+                                                    className="group flex gap-2 items-center"
+                                                    key={filter.value}
+                                                    value={String(filter.label || filter.value)}
+                                                    onSelect={() => {
+                                                        setFilterValues([...filterValues, {
+                                                            value: filter.value,
+                                                            label: filter.label
+                                                        }]);
+                                                        setTimeout(() => {
+                                                            setCommandInput("");
+                                                        }, 200);
+                                                        setOpen(false);
+                                                    }}
+                                                >
+                                                    <Checkbox
+                                                        checked={false}
+                                                        className="opacity-0 group-data-[selected=true]:opacity-100"
+                                                    />
+                                                    <span className="text-muted">
+                                                        <DynamicLabel
+                                                            value={filter.value || ''}
+                                                            labelRenderer={filter.labelRenderer || labelRenderer}
+                                                            fallbackLabel={filter.label}
+                                                        />
+                                                    </span>
+                                                </CommandItem>
+                                            ))}
+                                    </CommandGroup>
+                                </>
+                            )}
+                        </CommandList>
+                    </Command>
+                </AnimateChangeInHeight>
+            </PopoverContent>
+        </Popover>
+    );
+};

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

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { Button } from "../../button";
+import { Popover, PopoverContent, PopoverTrigger } from "../../popover";
+import { InputList } from "../../../index";
+
+export const StringListCombobox = ({
+    filterType,
+    filterValues,
+    setFilterValues,
+}: {
+    filterType: string;
+    filterValues: string[];
+    setFilterValues: (values: string[]) => void;
+}) => {
+    const [open, setOpen] = useState(false);
+    const [tags, setTags] = useState<string[]>(filterValues);
+
+    const handleApply = () => {
+        setFilterValues(tags);
+        setOpen(false);
+    };
+
+    return (
+        <Popover
+            _open={open}
+            onOpenChange={(open) => {
+                setOpen(open);
+                if (!open && JSON.stringify(tags) !== JSON.stringify(filterValues)) {
+                    setTags(filterValues);
+                }
+            }}
+        >
+            <PopoverTrigger
+                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">
+                    {filterValues.length > 0 ? (
+                        filterValues.length === 1 ? filterValues[0] : `${filterValues.length} tags`
+                    ) : (
+                        "Add tags..."
+                    )}
+                </div>
+            </PopoverTrigger>
+            <PopoverContent className="w-[300px] p-3">
+                <div className="flex flex-col gap-3">
+                    <div className="flex items-center p-1.5 text-xs text-muted">
+                        <span>{filterType}</span>
+                    </div>
+                    <InputList
+                        value={tags}
+                        onChange={setTags}
+                        placeholder={`Add ${filterType.toLowerCase()}...`}
+                    />
+                    <div className="flex gap-2 justify-end">
+                        <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => {
+                                setTags(filterValues);
+                                setOpen(false);
+                            }}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            size="sm"
+                            onClick={handleApply}
+                        >
+                            Apply
+                        </Button>
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+};

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

@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { Button } from "../../button";
+import { Input } from "../../input";
+import { Popover, PopoverContent, PopoverTrigger } from "../../popover";
+
+export const TextCombobox = ({
+    filterType,
+    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 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-[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}
+                        onKeyDown={handleKeyDown}
+                        placeholder="Enter text..."
+                    />
+                    <div className="mt-2 p-2 border-t">
+                        <div className="flex gap-2 justify-end">
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => {
+                                    setInputValue(filterValue);
+                                    setOpen(false);
+                                }}
+                            >
+                                Cancel
+                            </Button>
+                            <Button
+                                size="sm"
+                                onClick={() => {
+                                    setFilterValue(inputValue);
+                                    setOpen(false);
+                                }}
+                            >
+                                Apply
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+};

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

@@ -0,0 +1,4 @@
+export { SelectionCombobox } from './SelectCombobox';
+export { DateCombobox } from './DateCombobox';
+export { TextCombobox } from './TextCombobox';
+export { StringListCombobox } from './StringListCombobox';

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

@@ -0,0 +1,161 @@
+import React, { useState } from "react";
+import { CommandItem } from "../../command";
+import { Button } from "../../button";
+import { Filter, FilterGroup, FilterGroupOption, FilterOption } from "../types";
+import { DynamicLabel } from "../DynamicLabel";
+
+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,
+}: Readonly<SelectFilterProps>) {
+  const [selectedOptions, setSelectedOptions] = useState<FilterOption[]>([]);
+  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;
+        return group.filterBy!(option.value, filterLc);
+      });
+      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);
+
+  const selectedGroup = filterGroups.find(g => g.name === selectedView);
+  const groupTitle = selectedGroup?.placeholder || selectedGroup?.name;
+
+  const handleApply = () => {
+    if (selectedOptions.length > 0) {
+      setFilters(prev => [
+        ...prev.filter(f => f.name !== selectedView),
+        {
+          name: selectedView || "",
+          placeholder: selectedGroup?.placeholder || "",
+          value: selectedOptions,
+          type: selectedGroup?.type || "select",
+          multiple: selectedGroup?.multiple || false,
+        }
+      ]);
+    }
+    handleClose();
+  };
+
+  const handleOptionToggle = (option: FilterGroupOption) => {
+    const filterOption = {
+      value: option.value,
+      label: option.label
+    };
+
+    if (selectedGroup?.multiple) {
+      // For multiple selection, toggle the option
+      const isSelected = selectedOptions.some(opt => opt.value === option.value);
+      if (isSelected) {
+        setSelectedOptions(prev => prev.filter(opt => opt.value !== option.value));
+      } else {
+        setSelectedOptions(prev => [...prev, filterOption]);
+      }
+    } else {
+      // For single selection, apply immediately
+      setFilters((prev: Filter[]) => {
+        const existingFilterIndex = prev.findIndex(f => f.name === selectedView);
+
+        if (existingFilterIndex >= 0) {
+          const updatedFilters = [...prev];
+          updatedFilters[existingFilterIndex] = {
+            ...updatedFilters[existingFilterIndex],
+            value: [filterOption]
+          };
+          return updatedFilters;
+        } else {
+          return [...prev, {
+            name: selectedView || "",
+            placeholder: selectedGroup?.placeholder || "",
+            value: [filterOption],
+            type: selectedGroup?.type || "select",
+            multiple: selectedGroup?.multiple || false,
+          }];
+        }
+      });
+      handleClose();
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center p-1.5 text-xs text-muted shrink-0">
+        <span>{groupTitle}</span>
+      </div>
+      <div className="flex-1 overflow-hidden min-h-0">
+        <div className="max-h-[200px] overflow-y-auto">
+          {options.length > 0 && (
+            options.map((option: FilterGroupOption) => {
+              const isSelected = selectedOptions.some(opt => opt.value === option.value);
+
+              return (
+                <CommandItem
+                  key={option.value || `option-${Math.random()}`}
+                  className={`group flex gap-2 items-center w-full hover:bg-muted ${selectedGroup?.multiple && isSelected ? 'bg-muted' : ''
+                    }`}
+                  onSelect={() => handleOptionToggle(option)}
+                >
+                  <DynamicLabel
+                    value={option.value || ''}
+                    labelRenderer={option.labelRenderer || selectedGroup?.labelRenderer}
+                    fallbackLabel={option.label}
+                  />
+                  {selectedGroup?.multiple && isSelected && (
+                    <span className="ml-auto text-xs text-success">✓</span>
+                  )}
+                </CommandItem>
+              );
+            })
+          )}
+        </div>
+      </div>
+      {selectedGroup?.multiple && (
+        <div className="p-2 border-t shrink-0">
+          <div className="flex gap-2 justify-end">
+            <Button variant="ghost" size="sm" onClick={handleClose}>
+              Cancel
+            </Button>
+            <Button size="sm" onClick={handleApply} disabled={selectedOptions.length === 0}>
+              Apply
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,58 @@
+import { Dispatch, SetStateAction, useState } from "react";
+import { InputList } from "../../../index";
+import { Button } from "../../button";
+import { Filter, FilterGroup } from "../types";
+
+interface StringListFilterProps {
+  selectedView: string;
+  setFilters: Dispatch<SetStateAction<Filter[]>>;
+  handleClose: () => void;
+  filterGroups: FilterGroup[];
+}
+
+export default function StringListFilter({
+  selectedView,
+  setFilters,
+  handleClose,
+  filterGroups,
+}: StringListFilterProps) {
+  const [tags, setTags] = useState<string[]>([]);
+
+  const selectedGroup = filterGroups.find(g => g.name === selectedView);
+
+  const handleApply = () => {
+    if (tags.length > 0) {
+      setFilters(prev => [
+        ...prev.filter(f => f.name !== selectedView),
+        {
+          name: selectedView,
+          placeholder: selectedGroup?.placeholder,
+          value: tags,
+          type: "stringList" as const
+        }
+      ]);
+    }
+    handleClose();
+  };
+
+  return (
+    <div className="p-2 space-y-3">
+      <div className="space-y-2">
+        <InputList
+          value={tags}
+          onChange={setTags}
+          placeholder={selectedGroup?.placeholder || `Add ${selectedView}...`}
+          autoFocus
+        />
+      </div>
+      <div className="flex gap-2 justify-end">
+        <Button variant="ghost" size="sm" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button size="sm" onClick={handleApply} disabled={tags.length === 0}>
+          Apply
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,69 @@
+import React from "react";
+import { Button } from "../../button";
+import { Input } from "../../input";
+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-1">
+      <div className="flex items-center p-1.5 text-xs text-muted">
+        <span>{filterGroups.find(group => group.name === selectedView)?.placeholder}</span>
+      </div>
+      <Input
+        autoFocus
+        type="text"
+        size="sm"
+        value={textValue}
+        onChange={setTextValue}
+        onKeyDown={(e) => e.key === "Enter" && handleTextFilterAdd()}
+        placeholder="Enter text..."
+      />
+      <div className="mt-2 p-2 border-t">
+        <div className="flex gap-2 justify-end">
+          <Button variant="ghost" size="sm" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button
+            size="sm"
+            onClick={handleTextFilterAdd}
+            disabled={!textValue.trim()}
+          >
+            Apply
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}