@vertesia/ui 0.66.0 → 0.68.0

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

@@ -8,18 +8,146 @@ import { ListFilter } from "lucide-react";
 import { Filter, FilterGroup } from "./types";
 import Filters from "./filters";
 
-import TextFilter from "./textFilter";
-import DateFilter from "./dateFilter";
-import SelectFilter from "./selectFilter";
-import StringListFilter from "./stringListFilter";
+import TextFilter from "./filter/TextFilter";
+import DateFilter from "./filter/dateFilter";
+import SelectFilter from "./filter/SelectFilter";
+import StringListFilter from "./filter/StringListFilter";
 
-interface FilterBarProps {
+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;
 }
 
-export function FilterBar({ filters, setFilters, filterGroups }: FilterBarProps) {
+const FilterProvider = ({ filters, setFilters, filterGroups, children }: FilterProviderProps) => {
+  const url = new URL(window.location.href);
+  const searchParams = url.searchParams;
+  
+  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 || filter.value.length > 1) {
+              // Handle multiple values - use array format
+              values = `[${filter.value.map((item: any) => encodeURIComponent(item.value || '')).join(',')}]`;
+            } else {
+              // Single value in array - don't use array format
+              const firstValue = filter.value[0];
+              if (typeof firstValue === 'string') {
+                values = encodeURIComponent(firstValue);
+              } else {
+                values = encodeURIComponent(firstValue?.value || '');
+              }
+            }
+          } 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.history.replaceState({}, '', newUrl);
+    } catch (error) {
+      console.error("Failed to update URL with filters:", error);
+    }
+  }, [filters]);
+
+  useEffect(() => {
+    const filtersParam = searchParams.get('filters');
+    if (filtersParam) {
+      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
+              };
+            });
+          }
+
+          return {
+            name,
+            type: group?.type || 'select',
+            placeholder: group?.placeholder,
+            value: filterValue,
+            multiple: group?.multiple || false
+          };
+        });
+
+        setFilters(parsedFilters);
+      } catch (error) {
+        console.error("Failed to parse filters from URL:", error);
+      }
+    }
+  }, []);
+
+  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("");
@@ -42,7 +170,7 @@ export function FilterBar({ filters, setFilters, filterGroups }: FilterBarProps)
             return filter.name === group.name;
           }
           return filter.name === group.name &&
-            (Array.isArray(filter.value) && typeof filter.value[0] === 'string' 
+            (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));
         })
@@ -89,23 +217,10 @@ export function FilterBar({ filters, setFilters, filterGroups }: FilterBarProps)
     }
   };
 
-  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;
+    if (!selectedView) {
+      return null;
+    }
 
     const selectedGroupType = filterGroups.find(g => g.name === selectedView)?.type;
 
@@ -155,138 +270,79 @@ export function FilterBar({ filters, setFilters, filterGroups }: FilterBarProps)
     }
   };
 
-  const url = new URL(window.location.href);
-  const searchParams = url.searchParams;
-  useEffect(() => {
-    try {
-      const params = new URLSearchParams(searchParams.toString());
-      if (filters.length > 0) {
-        // Convert filters to simple format with URL-safe encoding: filterName:value,value;filterName2:value
-        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
-            values = (filter.value as string[]).map(item => encodeURIComponent(item)).join(',');
-          } else if (Array.isArray(filter.value)) {
-            // Handle other types with FilterOption array
-            values = filter.value.map((item: any) => encodeURIComponent(item.value || '')).join(',');
-          } 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.history.replaceState({}, '', newUrl);
-    } catch (error) {
-      console.error("Failed to update URL with filters:", error);
-    }
-  }, [filters]);
-
-  useEffect(() => {
-    const filtersParam = searchParams.get('filters');
-    if (filtersParam) {
-      try {
-        // 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);
-          let filterValue;
-          
-          if (group?.type === 'stringList') {
-            // For stringList, return direct string array
-            filterValue = values;
-          } else if (group?.type === 'text') {
-            // For text, return FilterOption array
-            filterValue = 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
-              };
-            });
+  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">
+        <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}
+              />
+            )
           }
-          
-          return {
-            name,
-            type: group?.type || 'select',
-            placeholder: group?.placeholder,
-            value: filterValue
-          };
-        });
-
-        setFilters(parsedFilters);
-      } catch (error) {
-        console.error("Failed to parse filters from URL:", error);
-      }
-    }
-  }, []);
+          <CommandList className="max-h-[300px] overflow-y-auto">
+            <CommandGroup>
+              {!selectedView ? getAvailableFilterGroups() : renderFilterOptions()}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
 
+const FilterBar = ({ className }: { className?: string }) => {
+  const { filters, setFilters, filterGroups } = React.useContext(FilterContext);
+  
   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-[300px] 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>
+    <div className={cn(className)}>
       <Filters filters={filters} setFilters={setFilters} filterGroups={filterGroups} />
-      {filters.filter((filter) => filter.value?.length > 0).length > 0 && <ButtonClearFilter />}
     </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

@@ -2,7 +2,7 @@ import { X } from "lucide-react";
 import { Dispatch, SetStateAction } from "react";
 import { Button } from "../button";
 
-import { DateCombobox, SelectionCombobox, TextCombobox, StringListCombobox } from "./comboBox";
+import { DateCombobox, SelectionCombobox, TextCombobox, StringListCombobox } from "./comboBox/comboBox";
 import { Filter, FilterGroup, FilterOption } from "./types";
 import dayjs from "dayjs";
 
@@ -22,15 +22,17 @@ function generateComboboxOptions(
             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 ? [{
-                                        value: filterValues[0],
-                                        label: dayjs(filterValues[0]).format("LLL dd, y"),
-                                    }] : []
+                                    value: filterValues.length > 0 ?
+                                        filterValues.map(dateValue => ({
+                                            value: dateValue,
+                                            label: dayjs(dateValue).format("LLL dd, y"),
+                                        })) : []
                                 } : f
                             )
                         );

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

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

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

@@ -13,6 +13,7 @@ export interface FilterGroup {
   name: string;
   placeholder?: string;
   type?: "select" | "date" | "text" | "stringList";
+  multiple?: boolean;
   options?: FilterGroupOption[];
   allowCreate?: boolean;
   filterBy?: (value: string, searchText: string) => boolean;
@@ -24,6 +25,7 @@ export interface Filter {
   placeholder?: string;
   value: FilterOption[] | string[];
   type?: "select" | "date" | "text" | "stringList";
+  multiple?: boolean;
 }
 
 export enum FilterOperator {

package/src/core/components/toast/NotificationPanel.tsx

@@ -1,6 +1,6 @@
 import { Transition } from "@headlessui/react"
 import { CircleCheck, AlertTriangle, Info, CircleX, X } from "lucide-react"
-import { Fragment, useEffect, useState } from "react"
+import { Fragment, useEffect, useState, useRef } from "react"
 import { ToastProps } from "./ToastProps.js"
 
 const icons = {
@@ -11,10 +11,10 @@ const icons = {
 }
 
 const colors = {
-    success: 'text-green-600',
-    error: 'text-red-600',
-    warning: 'text-yellow-600',
-    info: 'text-blue-600'
+    success: 'text-success',
+    error: 'text-destructive',
+    warning: 'text-attention',
+    info: 'text-info'
 }
 
 interface NotificationPanelProps {
@@ -23,23 +23,31 @@ interface NotificationPanelProps {
 }
 export function NotificationPanel({ data, onClose }: NotificationPanelProps) {
     const [show, setShow] = useState(true)
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null)
 
-    useEffect(() => {
-        let timeoutId: any;
+    const resetTimeout = () => {
+        if (timeoutRef.current) {
+            globalThis.clearTimeout(timeoutRef.current)
+        }
         if (data.duration) {
-            timeoutId = setTimeout(() => {
-                setShow(false)
-            }, data.duration);
+            timeoutRef.current = setTimeout(() => setShow(false), data.duration)
         }
-        return () => {
-            if (timeoutId) {
-                clearTimeout(timeoutId);
-            }
+    }
+
+    const clearCurrentTimeout = () => {
+        if (timeoutRef.current) {
+            globalThis.clearTimeout(timeoutRef.current)
+            timeoutRef.current = null
         }
-    }, [])
+    }
+
+    useEffect(() => {
+        resetTimeout()
+        return clearCurrentTimeout
+    }, [data.duration])
 
     const Icon = icons[data.status] || Info;
-    const color = colors[data.status] || 'text-blue-600';
+    const color = colors[data.status] || 'text-info';
 
     // Global notification live region, render this permanently at the end of the document
     return (
@@ -61,20 +69,28 @@ export function NotificationPanel({ data, onClose }: NotificationPanelProps) {
                     leaveFrom="opacity-100"
                     leaveTo="opacity-0"
                 >
-                    <div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
-                        <div className="p-4">
+                    <div
+                        className="pointer-events-auto w-full max-w-md overflow-hidden rounded-lg bg-muted shadow-lg ring-1 ring-border"
+                        onMouseEnter={clearCurrentTimeout}
+                        onMouseLeave={resetTimeout}
+                    >
+                        <div className="p-5">
                             <div className="flex items-start">
                                 <div className="shrink-0">
                                     <Icon className={`size-6 ${color}`} aria-hidden="true" />
                                 </div>
-                                <div className="ml-3 w-0 flex-1 pt-0.5">
-                                    <p className="text-sm font-medium text-gray-900">{data.title}</p>
-                                    <p className="mt-1 text-sm text-gray-500">{data.description}</p>
+                                <div className="ml-3 flex-1 pt-0.5 min-w-0">
+                                    <p className="text-sm font-semibold text-foreground break-words">{data.title}</p>
+                                    {data.description && (
+                                        <p className="mt-2 text-sm text-muted break-words whitespace-pre-wrap leading-relaxed">
+                                            {data.description}
+                                        </p>
+                                    )}
                                 </div>
                                 <div className="ml-4 flex shrink-0">
                                     <button
                                         type="button"
-                                        className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                                        className="inline-flex rounded-md bg-muted text-muted hover:text-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
                                         onClick={() => setShow(false)}
                                     >
                                         <span className="sr-only">Close</span>