@vertesia/ui 0.67.0 → 0.68.0

package/lib/types/core/components/shadcn/filters/comboBox.d.ts

@@ -1,22 +0,0 @@
-import { FilterGroupOption, FilterOption } from "./types";
-export declare 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>;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const DateCombobox: ({ filterValues, setFilterValues, }: {
-    filterValues: string[];
-    setFilterValues: (values: string[]) => void;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const TextCombobox: ({ filterType, filterValue, setFilterValue, }: {
-    filterType: string;
-    filterValue: string;
-    setFilterValue: (value: string) => void;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const StringListCombobox: ({ filterType, filterValues, setFilterValues, }: {
-    filterType: string;
-    filterValues: string[];
-    setFilterValues: (values: string[]) => void;
-}) => import("react/jsx-runtime").JSX.Element;

package/lib/types/features/facets/InteractionFacet.d.ts

@@ -1,9 +0,0 @@
-import { FacetBucket } from '@vertesia/common';
-interface InteractionFacetProps {
-    search: any;
-    buckets: FacetBucket[];
-    placeholder?: string;
-    className?: string;
-}
-export declare function InteractionFacet({ search, buckets, placeholder, className }: InteractionFacetProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/types/features/facets/TypeOptions.d.ts

@@ -1,3 +0,0 @@
-import { FacetBucket } from "@vertesia/common";
-import { FilterOption } from "@vertesia/ui/core";
-export declare function TypeOptionLabel(buckets: FacetBucket[]): FilterOption[];

package/lib/types/features/facets/UserFacet.d.ts

@@ -1,11 +0,0 @@
-import { FacetBucket } from "@vertesia/common";
-export declare function facetOptionLabel(bucket: FacetBucket): string | import("react/jsx-runtime").JSX.Element;
-interface UserFacetProps {
-    search: any;
-    buckets: FacetBucket[];
-    placeholder?: string;
-    className?: string;
-    name: string;
-}
-export declare function UserFacet({ search, buckets, placeholder, className }: UserFacetProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,82 +0,0 @@
-import dayjs from "dayjs";
-import React, { useState } from "react";
-import DatePicker from "react-date-picker";
-import { Popover, PopoverContent, PopoverTrigger } from "../popover";
-import { Filter, FilterGroup } from "./types";
-
-type ValuePiece = Date | null;
-type Value = ValuePiece | [ValuePiece, ValuePiece];
-
-interface DateFilterProps {
-  selectedView: string | null;
-  selectedDate: Date | undefined;
-  setSelectedDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
-  setFilters: React.Dispatch<React.SetStateAction<Filter[]>>;
-  filters: Filter[];
-  handleClose: () => void;
-  filterGroups: FilterGroup[];
-}
-
-export default function DateFilter({
-  selectedView,
-  selectedDate,
-  setSelectedDate,
-  setFilters,
-  filters,
-  handleClose,
-  filterGroups,
-}: DateFilterProps) {
-  const [open, setOpen] = useState(true);
-
-  const handleDateChange = (value: Value) => {
-    const date = Array.isArray(value) ? value[0] : value;
-    setSelectedDate(date || undefined);
-    if (date) {
-      const selectedGroup = filterGroups.find(g => g.name === selectedView);
-      
-      // Set date to start of day (00:00)
-      const selectedDateStart = new Date(date);
-      selectedDateStart.setHours(0, 0, 0, 0);
-      
-      setFilters([
-        ...filters,
-        {
-          name: selectedView || "",
-          placeholder: selectedGroup?.placeholder,
-          value: [
-            {
-              value: selectedDateStart.toISOString(),
-              label: dayjs(selectedDateStart).format("LLL dd, y"),
-            }
-          ],
-          type: selectedGroup?.type || "date",
-        } as Filter,
-      ]);
-
-      setOpen(false);
-      handleClose();
-    }
-  };
-
-  return (
-    <Popover _open={open} onOpenChange={setOpen}>
-      <PopoverTrigger className="w-full p-2 text-left hover:bg-muted/50 rounded-sm">
-        <div className="flex gap-1.5 items-center">
-          {selectedDate ? (
-            dayjs(selectedDate).format("MMM D, YYYY")
-          ) : (
-            <span>Pick a date</span>
-          )}
-        </div>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start">
-        <DatePicker
-          value={selectedDate}
-          onChange={handleDateChange}
-          calendarIcon={false}
-          className="p-2"
-        />
-      </PopoverContent>
-    </Popover>
-  );
-}

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

@@ -1,110 +0,0 @@
-import React from "react";
-import { CommandItem, CommandEmpty } from "../command";
-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,
-}: 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>;
-  }
-
-  const groupTitle = filterGroups.find(group => group.name === selectedView)?.placeholder || filterGroups.find(group => group.name === selectedView)?.name;
-
-  return (
-    <>
-      <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 as FilterOption[]), filterOption]
-                    };
-                    return updatedFilters;
-                  } else {
-                    return [...prev, {
-                      name: selectedView || "",
-                      placeholder: selectedGroup?.placeholder || "",
-                      value: [filterOption],
-                      type: selectedGroup?.type || "select",
-                    }];
-                  }
-                });
-
-                handleClose();
-              }}
-            >
-              <DynamicLabel
-                value={option.value || ''}
-                labelRenderer={option.labelRenderer || selectedGroup?.labelRenderer}
-                fallbackLabel={option.label}
-              />
-            </CommandItem>
-          );
-        })}
-    </>
-  );
-}

package/src/features/facets/InteractionFacet.tsx

@@ -1,53 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { FacetBucket, FacetNameBucket } from '@vertesia/common';
-import { SelectBox } from '@vertesia/ui/core';
-import { useUserSession } from '@vertesia/ui/session';
-import { facetOptionNameLabel } from './utils';
-
-interface InteractionFacetProps {
-    search: any;
-    buckets: FacetBucket[];
-    placeholder?: string;
-    className?: string;
-}
-export function InteractionFacet({ search, buckets, placeholder = "All Interactions", className }: InteractionFacetProps) {
-    const { client } = useUserSession();
-
-    const [options, setOptions] = useState<FacetNameBucket[]>([]);
-
-    const filterValue = search.getFilterValue("interaction") as string;
-    const onChange = (option: FacetBucket | undefined) => {
-        search.setFilterValue("interaction", option?._id);
-    }
-
-    useEffect(() => {
-        if (client) {
-            const options = buckets.map(async (bucket) => {
-                let name;
-                await client.interactions.retrieve(bucket._id).then((interaction) => {
-                    name = interaction.name;
-                }).catch(() => {
-                    name = `${bucket._id} (deleted)`;
-                });
-                if (!name) {
-                    name = bucket._id;
-                }
-                return {
-                    ...bucket,
-                    name
-                }
-            })
-            Promise.all(options).then(resolvedOptions => {
-                resolvedOptions.sort((a, b) => a.name.localeCompare(b.name));
-                setOptions(resolvedOptions);
-            });
-        }
-    }, [buckets, client]);
-
-    const value = options?.find((option) => option._id === filterValue);
-
-    return (
-        <SelectBox filterBy="name" className={className} isClearable optionLabel={facetOptionNameLabel} options={options} value={value} onChange={onChange} by='_id' placeholder={placeholder} />
-    )
-}

package/src/features/facets/TypeOptions.tsx

@@ -1,22 +0,0 @@
-import { useUserSession } from "@vertesia/ui/session";
-import { FacetBucket } from "@vertesia/common";
-import { FilterOption } from "@vertesia/ui/core";
-
-export function TypeOptionLabel(buckets: FacetBucket[]): FilterOption[] {
-    const { typeRegistry } = useUserSession();
-
-    return buckets.map((bucket) => {
-        let name;
-        if (bucket._id == null) {
-            bucket._id = "Document";
-            name = "Document";
-        } else {
-            name = typeRegistry?.getTypeName(bucket._id) || bucket._id;
-        }
-
-        return {
-            name: `${name} (${bucket.count})`,
-            value: bucket._id,
-        };
-    }).sort((a, b) => a.name.localeCompare(b.name));
-}

package/src/features/facets/UserFacet.tsx

@@ -1,61 +0,0 @@
-import { FacetBucket } from "@vertesia/common";
-import { SelectBox } from "@vertesia/ui/core";
-import { useEffect, useState } from "react";
-import { UserInfo } from '../user/UserInfo';
-
-export function facetOptionLabel(bucket: FacetBucket) {
-    if (bucket._id == null) {
-        return `UnKnown User (${bucket.count})`;
-    }
-    else {
-        return (
-            <UserInfo userRef={bucket._id} showTitle={true} size={"sm"} />
-        );
-    }
-}
-
-interface UserFacetProps {
-    search: any;
-    buckets: FacetBucket[];
-    placeholder?: string;
-    className?: string;
-    name: string;
-}
-
-export function UserFacet({ search, buckets, placeholder = "Filter by User", className }: UserFacetProps) {
-    const [options, setOptions] = useState<FacetBucket[]>([]);
-    const filterValue = search.getFilterValue("created_by") as string;
-
-    const onChange = (option: FacetBucket | undefined) => {
-        search.setFilterValue("created_by", option?._id);
-    }
-
-    useEffect(() => {
-        const fetchOptions = async () => {
-            const options = await Promise.all(buckets.map(async (bucket) => {
-                return {
-                    ...bucket,
-                }
-            }));
-            setOptions(options);
-        };
-        fetchOptions();
-    }, [buckets]);
-
-
-    const value = options?.find((option) => option._id === filterValue);
-
-    return (
-        <SelectBox
-            filterBy="name"
-            className={className}
-            isClearable
-            optionLabel={facetOptionLabel}
-            options={options}
-            value={value}
-            onChange={onChange}
-            by='_id'
-            placeholder={placeholder}
-        />
-    )
-}