@vertesia/ui 0.60.0 → 0.61.0

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

@@ -2,7 +2,6 @@ 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";
@@ -22,7 +21,7 @@ export function FilterBar({ filters, setFilters, filterGroups }: FilterBarProps)
   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 [selectedDate, setSelectedDate] = React.useState<Date | undefined>();
   const [textValue, setTextValue] = React.useState("");
 
   const handleSelect = (groupName: string) => {
@@ -69,7 +68,7 @@ export function FilterBar({ filters, setFilters, filterGroups }: FilterBarProps)
     setTimeout(() => {
       setSelectedView(null);
       setCommandInput("");
-      setDateRange(undefined);
+      setSelectedDate(undefined);
     }, 200);
   };
 
@@ -109,8 +108,8 @@ export function FilterBar({ filters, setFilters, filterGroups }: FilterBarProps)
         return (
           <DateFilter
             selectedView={selectedView}
-            dateRange={dateRange}
-            setDateRange={setDateRange}
+            selectedDate={selectedDate}
+            setSelectedDate={setSelectedDate}
             setFilters={setFilters}
             filters={filters}
             handleClose={handleClose}
@@ -145,24 +144,16 @@ export function FilterBar({ filters, setFilters, filterGroups }: FilterBarProps)
   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)));
+        // Convert filters to simple format with URL-safe encoding: filterName:value,value;filterName2:value
+        const filterString = filters.map(filter => {
+          const values = Array.isArray(filter.value) 
+            ? filter.value.map(item => encodeURIComponent(item.value || '')).join(',')
+            : encodeURIComponent(filter.value || '');
+          return `${encodeURIComponent(filter.name)}:${values}`;
+        }).join(';');
+        params.set('filters', filterString);
       } else {
         params.delete('filters');
       }
@@ -178,35 +169,50 @@ export function FilterBar({ filters, setFilters, filterGroups }: FilterBarProps)
     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);
-
+        // Parse simple format with URL-safe decoding: filterName:value,value;filterName2:value
+        const filterPairs = filtersParam.split(';');
+        const parsedFilters = filterPairs.map(pair => {
+          const [encodedName, valuesString] = pair.split(':');
+          const name = decodeURIComponent(encodedName);
+          const values = valuesString.split(',').map(encodedValue => decodeURIComponent(encodedValue));
+          
+          const group = filterGroups.find(g => g.name === name);
+          console.log("group", group);
+          
+          const filterOptions = values.map(value => {
+            if (group?.type === 'text') {
+              return { value, label: value };
+            } else {
+              // Try to find option with label, or use labelRenderer, or fallback to 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: item.value,
-                label: matchingOption?.label || item.value
+                value,
+                label
               };
-            });
-
-            console.log("valuesWithLabels", valuesWithLabels);
-
-            return {
-              ...filter,
-              value: valuesWithLabels
-            };
-          }
-
-          return filter;
+            }
+          });
+          
+          console.log("valuesWithLabels", filterOptions);
+          
+          return {
+            name,
+            type: group?.type || 'select',
+            placeholder: group?.placeholder,
+            value: filterOptions
+          };
         });
 
-        setFilters(hydratedFilters);
+        setFilters(parsedFilters);
       } catch (error) {
         console.error("Failed to parse filters from URL:", error);
       }
@@ -231,7 +237,7 @@ export function FilterBar({ filters, setFilters, filterGroups }: FilterBarProps)
               {"Filter"}
             </Button>
           </PopoverTrigger>
-          <PopoverContent className="w-[200px] p-0" align="start">
+          <PopoverContent className="w-[300px] p-0" align="start">
             <Command>
               {filterGroups.find(group => group.name === selectedView)?.type === "select" ? (
                 <CommandInput

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

@@ -2,9 +2,9 @@ import { X } from "lucide-react";
 import { Dispatch, SetStateAction } from "react";
 import { Button } from "../button";
 
+import { DateCombobox, SelectionCombobox, TextCombobox } from "./comboBox";
 import { Filter, FilterGroup } from "./types";
-import { SelectionCombobox, DateCombobox, TextCombobox } from "./comboBox";
-import { format } from "date-fns";
+import dayjs from "dayjs";
 
 interface FiltersProps {
     filters: Filter[];
@@ -15,51 +15,55 @@ interface FiltersProps {
 function generateComboboxOptions(
     filter: Filter,
     setFilters: Dispatch<SetStateAction<Filter[]>>,
-    filterGroups: FilterGroup[]
+    filterGroups: FilterGroup[],
 ) {
     switch (filter.type) {
-        case 'date':
+        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")
-                                    }))
+                                    value: filterValues.length > 0 ? [{
+                                        value: filterValues[0],
+                                        label: dayjs(filterValues[0]).format("LLL dd, y"),
+                                    }] : []
                                 } : f
                             )
                         );
                     }}
                 />
             );
-        case 'text':
+        case "text":
             return (
                 <TextCombobox
                     filterType={filter.placeholder || filter.name}
-                    filterValue={filter.value[0]?.value || ''}
+                    filterValue={filter.value[0]?.value || ""}
                     setFilterValue={(textValue) => {
                         setFilters((prev) =>
                             prev.map((f) =>
-                                f === filter ? {
-                                    ...f,
-                                    value: [{
-                                        value: textValue,
-                                        label: textValue
-                                    }]
-                                } : f
-                            )
+                                f === filter
+                                    ? {
+                                          ...f,
+                                          value: [
+                                              {
+                                                  value: textValue,
+                                                  label: textValue,
+                                              },
+                                          ],
+                                      }
+                                    : f,
+                            ),
                         );
                     }}
                 />
             );
         case 'select':
-        default:
+        default: {
+            const filterGroup = filterGroups.find(group => group.name === filter.name);
             return (
                 <SelectionCombobox
                     filterType={filter.placeholder || filter.name}
@@ -67,13 +71,17 @@ function generateComboboxOptions(
                     setFilterValues={(filterValues) => {
                         setFilters((prev) =>
                             prev.map((f) =>
-                                f === filter ? { ...f, value: filterValues } : f
-                            )
+                                f === filter
+                                    ? { ...f, value: filterValues }
+                                    : f,
+                            ),
                         );
                     }}
-                    options={filterGroups.find(group => group.name === filter.name)?.options || []}
+                    options={filterGroup?.options || []}
+                    labelRenderer={filterGroup?.labelRenderer}
                 />
             );
+        }
     }
 }
 
@@ -82,24 +90,29 @@ export default function Filters({
     setFilters,
     filterGroups,
 }: FiltersProps) {
-
     return (
-        <div className="flex gap-2 flex-wrap justify-end">
+        <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.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">
+                        <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)}
+                        {generateComboboxOptions(
+                            filter,
+                            setFilters,
+                            filterGroups,
+                        )}
                         <Button
                             variant="ghost"
                             size="icon"
                             onClick={() => {
-                                setFilters((prev) => prev.filter((f) => f !== filter));
+                                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"
+                            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>
@@ -107,4 +120,4 @@ export default function Filters({
                 ))}
         </div>
     );
-}
+}

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { CommandItem, CommandEmpty } from "../index";
-import { Filter, FilterGroup, FilterOption } from "./types";
+import { Filter, FilterGroup, FilterGroupOption } from "./types";
+import { DynamicLabel } from "./DynamicLabel";
 
 interface SelectFilterProps {
   selectedView: string | null;
@@ -45,47 +46,65 @@ export default function SelectFilter({
   };
 
   if (!selectedView) return null;
-  
+
   const options = getFilteredOptions(selectedView);
-  
+
   if (options.length === 0) {
     return <CommandEmpty>No matching options</CommandEmpty>;
   }
-  
+
+  const groupTitle = filterGroups.find(group => group.name === selectedView)?.placeholder || filterGroups.find(group => group.name === selectedView)?.name;
+
   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);
+      <div className="flex items-center p-1.5 text-xs text-muted">
+        <span>{groupTitle}</span>
+      </div>
+      {options.map((option: FilterGroupOption) => {
+          const selectedGroup = filterGroups.find(g => g.name === selectedView);
+
+          return (
+            <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);
+
+                  // Create filter option with value and label for storage
+                  const filterOption = {
+                    value: option.value,
+                    label: option.label
+                  };
 
-              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",
-                }];
-              }
-            });
+                  if (existingFilterIndex >= 0) {
+                    const updatedFilters = [...prev];
+                    updatedFilters[existingFilterIndex] = {
+                      ...updatedFilters[existingFilterIndex],
+                      value: [...updatedFilters[existingFilterIndex].value, filterOption]
+                    };
+                    return updatedFilters;
+                  } else {
+                    return [...prev, {
+                      name: selectedView || "",
+                      placeholder: selectedGroup?.placeholder || "",
+                      value: [filterOption],
+                      type: selectedGroup?.type || "select",
+                    }];
+                  }
+                });
 
-            handleClose();
-          }}
-        >
-          {option.label || option.value || 'Unnamed option'}
-        </CommandItem>
-      ))}
+                handleClose();
+              }}
+            >
+              <DynamicLabel
+                value={option.value || ''}
+                labelRenderer={option.labelRenderer || selectedGroup?.labelRenderer}
+                fallbackLabel={option.label}
+              />
+            </CommandItem>
+          );
+        })}
     </>
   );
 }

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, VInput } from "../index";
+import { Button, Input } from "../index";
 import { Filter, FilterGroup } from "./types";
 
 interface TextFilterProps {
@@ -36,8 +36,11 @@ export default function TextFilter({
   };
 
   return (
-    <div className="p-2 flex flex-col gap-2">
-      <VInput
+    <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"

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

@@ -3,13 +3,20 @@ export interface FilterOption {
   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";
-  options?: FilterOption[];
+  options?: FilterGroupOption[];
   allowCreate?: boolean;
   filterBy?: (value: string, searchText: string) => boolean;
+  labelRenderer?: (value: string) => React.ReactNode | Promise<React.ReactNode>;
 }
 
 export interface Filter {

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

@@ -17,7 +17,7 @@ const variants = cva(
         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-1 ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        default: "flex w-full rounded-md border border-input bg-background 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-1 ring-inset focus-visible:ring-ring 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",
@@ -32,7 +32,7 @@ const variants = cva(
 
 type InputVariant = "default" | "unstyled" | "noPadding" | "legacy";
 
-export interface VInputProps
+export interface InputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
   size?: VariantProps<typeof variants>["size"];
   variant?: InputVariant;
@@ -41,7 +41,7 @@ export interface VInputProps
   onChange?: (value: string) => void
 }
 
-const VInput = React.forwardRef<HTMLInputElement, VInputProps>(
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, size = "md", variant = "default", clearable = true, onChange, value, ...props }, ref) => {
 
     const _onClear = () => {
@@ -82,8 +82,8 @@ const VInput = React.forwardRef<HTMLInputElement, VInputProps>(
   }
 )
 
-VInput.displayName = "VInput"
+Input.displayName = "Input"
 
 export {
-  VInput,
+  Input,
 }