@cleen/ui 0.1.0

package/src/components/filterDrawer/blocks/SavedFilterRow.tsx

@@ -0,0 +1,166 @@
+import { IconPin, IconTrash, IconX } from '@/components/cleenIcon';
+import { FilterTab } from '@/components/filterDrawer/constants/tab';
+import { FilterDrawerContext } from '@/components/filterDrawer/context/context';
+import type { FilterDrawerSavedFilter } from '@/components/filterDrawer/types/filters';
+import { Loader } from '@/components/loader';
+import { Menu } from '@/components/menu';
+import { PillBadge } from '@/components/pillBadge';
+import { cn } from '@cleen/ui-core';
+import { useContext, useState } from 'react';
+
+interface SavedFilterRowProps {
+  filter: FilterDrawerSavedFilter;
+  activeTabId: FilterTab;
+}
+
+export const SavedFilterRow = ({
+  filter,
+  activeTabId,
+}: SavedFilterRowProps) => {
+  //   const [isFilterHovered, setIsFilterHovered] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isPinning, setIsPinning] = useState(false);
+
+  const {
+    labels,
+    onFilterDelete: onDelete,
+    onFilterPin: onPin,
+    onFilterSelect: onSelect,
+    onFilterUnpin: onUnpin,
+    setIsFiltersDropdownOpen,
+    // filterDateFormatter,
+  } = useContext(FilterDrawerContext);
+
+  const handleDelete = async () => {
+    try {
+      if (!onDelete) {
+        return;
+      }
+
+      setIsDeleting(true);
+
+      await onDelete(filter.filterID);
+    } catch (e) {
+      console.error('Error while deleting filter:', e);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const handleTogglePin = async () => {
+    try {
+      setIsPinning(true);
+
+      if (filter?.isPinned) {
+        await onUnpin?.(filter.filterID);
+      } else {
+        await onPin?.(filter.filterID);
+      }
+    } catch (e) {
+      console.error('Error while pinning/unpinnning filter:', e);
+    } finally {
+      setIsPinning(false);
+    }
+  };
+
+  return (
+    <div
+      className="cleen-group cleen-flex cleen-flex-col cleen-justify-around cleen-gap-2 hover:cleen-bg-primary/5 cleen-p-2 cleen-rounded-md cleen-min-h-10"
+      //   onMouseEnter={() => setIsFilterHovered(true)}
+      //   onMouseLeave={() => setIsFilterHovered(false)}
+    >
+      <div
+        className="cleen-flex cleen-items-center cleen-gap-3 cleen-cursor-pointer"
+        onClick={() => {
+          onSelect?.(filter);
+          setIsFiltersDropdownOpen(false);
+        }}
+      >
+        <span className="cleen-flex-1 cleen-text-gray/70 cleen-text-sm cleen-text-left cleen-truncate">
+          {filter.title}
+        </span>
+
+        {/* TBD */}
+        {/* {!isPinning && (
+          <span
+            className="cleen-font-normal cleen-text-gray/50 cleen-text-xs hover:cleen-underline cleen-cursor-pointer"
+            onClick={e => {
+              e.stopPropagation();
+              handleTogglePin();
+            }}
+          >
+            {(activeTabId === FilterTab.All && isFilterHovered) ||
+            activeTabId === FilterTab.Pinned
+              ? filter?.isPinned
+                ? labels?.unpin
+                : labels?.pin
+              : dateFormatter(filter.createdDate)}
+          </span>
+        )} */}
+
+        {isPinning ? (
+          <Loader classNames={{ loader: 'cleen-size-5' }} />
+        ) : (
+          <PillBadge
+            color="gray"
+            onClick={e => {
+              e.stopPropagation();
+              handleTogglePin();
+            }}
+            icon={
+              <IconPin
+                name="pin"
+                className={cn(
+                  'cleen-size-3.5 group-hover:cleen-text-gray/60 cleen-transition-colors cleen-cursor-pointer',
+                  filter?.isPinned ? 'cleen-text-gray/60' : 'cleen-text-gray/20'
+                )}
+              />
+            }
+            classNames={{
+              container: 'cleen-font-bold',
+            }}
+            label={
+              filter?.isPinned
+                ? labels?.savedFilters?.filter?.unpin
+                : labels?.savedFilters?.filter?.pin
+            }
+          />
+        )}
+
+        {activeTabId === FilterTab.Mine && (
+          <Menu
+            items={[
+              {
+                id: 'duplicate',
+                type: 'button',
+                label: labels?.savedFilters?.filter?.cancelDelete,
+                icon: <IconX className="cleen-size-5" />,
+                onClick: () => {},
+              },
+              {
+                id: 'archive',
+                type: 'button',
+                label: labels?.savedFilters?.filter?.delete,
+                icon: <IconTrash />,
+                danger: true,
+                onClick: () => handleDelete(),
+              },
+            ]}
+            keepOpenOnClick={false}
+            onClick={e => e.stopPropagation()}
+            className="cleen-flex"
+          >
+            {isDeleting ? (
+              <Loader size="sm" color="rgb(var(--cleen-error))" />
+            ) : (
+              <IconTrash
+                className="cleen-text-black hover:cleen-text-error cleen-transition-colors cleen-cursor-pointer"
+                name="delete"
+              />
+            )}
+          </Menu>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/filterDrawer/blocks/SavedFiltersDropdown.tsx

@@ -0,0 +1,142 @@
+import { IconFilter2 } from '@/components/cleenIcon';
+import { Dropdown } from '@/components/dropdown';
+import { SavedFilterRow } from '@/components/filterDrawer/blocks/SavedFilterRow';
+import { FilterTab } from '@/components/filterDrawer/constants/tab';
+import { FilterDrawerContext } from '@/components/filterDrawer/context/context';
+import type {
+  FilterDrawerFilterCategories,
+  FilterDrawerSavedFilter,
+} from '@/components/filterDrawer/types/filters';
+import { Loader } from '@/components/loader';
+import { Tabs } from '@/components/tabs';
+import { useContext, useState } from 'react';
+
+const transformTabToCategories = (tab: FilterTab) => {
+  const categories: FilterDrawerFilterCategories = {
+    isFeatured: null,
+    isMine: null,
+    isPinned: null,
+    isShared: null,
+  };
+
+  switch (tab) {
+    case FilterTab.Featured:
+      categories.isFeatured = true;
+      break;
+
+    case FilterTab.Mine:
+      categories.isMine = true;
+      break;
+
+    case FilterTab.Pinned:
+      categories.isPinned = true;
+      break;
+
+    case FilterTab.Shared:
+      categories.isShared = true;
+      break;
+
+    case FilterTab.All:
+    default:
+      break;
+  }
+
+  return categories;
+};
+
+interface SavedFiltersDropdownProps {
+  selectedSavedFilter?: FilterDrawerSavedFilter;
+  filters?: FilterDrawerSavedFilter[];
+  isFiltersFetching?: boolean;
+  onFilterCategoryChange?: (
+    categories: FilterDrawerFilterCategories
+  ) => Promise<void>;
+}
+
+export const SavedFiltersDropdown = ({
+  selectedSavedFilter,
+  filters,
+  isFiltersFetching,
+  onFilterCategoryChange,
+}: SavedFiltersDropdownProps) => {
+  const [activeTabId, setActiveTabId] = useState<FilterTab>(FilterTab.All);
+
+  const {
+    labels,
+    classNames,
+    styles,
+    isFiltersDropdownOpen,
+    setIsFiltersDropdownOpen,
+  } = useContext(FilterDrawerContext);
+
+  return (
+    <Dropdown
+      isOpen={isFiltersDropdownOpen}
+      onOpenChange={setIsFiltersDropdownOpen}
+      leftIcon={<IconFilter2 className="cleen-size-5" />}
+      label={selectedSavedFilter?.title ?? labels?.savedFilters?.label}
+      fullWidthDropdown
+      {...classNames?.dropdown}
+      {...styles?.dropdown}
+    >
+      <div className="flex flex-col gap-2 p-2.5 w-full">
+        <Tabs
+          tabs={[
+            {
+              id: FilterTab.All,
+              label: labels?.savedFilters?.tabs?.all,
+            },
+            {
+              id: FilterTab.Mine,
+              label: labels?.savedFilters?.tabs?.mine,
+            },
+            {
+              id: FilterTab.Shared,
+              label: labels?.savedFilters?.tabs?.shared,
+            },
+            {
+              id: FilterTab.Featured,
+              label: labels?.savedFilters?.tabs?.featured,
+            },
+            {
+              id: FilterTab.Pinned,
+              label: labels?.savedFilters?.tabs?.pinned,
+            },
+          ]}
+          variant="padded"
+          onTabChange={(_, tab) => {
+            setActiveTabId(tab?.id as FilterTab);
+            onFilterCategoryChange?.(
+              transformTabToCategories(tab?.id as FilterTab)
+            );
+          }}
+          classNames={{
+            list: 'cleen-mb-2',
+          }}
+        />
+
+        <div className="flex flex-col">
+          {isFiltersFetching ? (
+            <Loader
+              classNames={{
+                loader: 'cleen-size-6',
+              }}
+            />
+          ) : (filters?.length || 0) > 0 ? (
+            filters?.map(filter => (
+              <SavedFilterRow
+                key={filter.filterID}
+                filter={filter}
+                activeTabId={activeTabId}
+              />
+            ))
+          ) : (
+            <p className="cleen-font-normal cleen-text-gray/60 cleen-text-base cleen-text-center">
+              {labels?.savedFilters?.noFilters}
+            </p>
+          )}
+        </div>
+      </div>
+    </Dropdown>
+  );
+};

package/src/components/filterDrawer/constants/filter.ts

@@ -0,0 +1,4 @@
+export const DEFAULT_NEW_FILTER = {
+  filterName: '',
+  exposed: false,
+};

package/src/components/filterDrawer/constants/labels.ts

@@ -0,0 +1,52 @@
+import type { FilterDrawerProps } from '@/components/filterDrawer/types/props';
+import type { ReactNode } from 'react';
+
+export const DEFAULT_FILTER_DRAWER_LABELS: FilterDrawerProps['labels'] & {
+  title?: ReactNode;
+  subtitle?: ReactNode;
+} = {
+  title: 'Filters',
+  subtitle: 'Apply filters to table data.',
+  apply: 'Apply',
+  cancel: 'Cancel',
+  clear: 'Clear',
+  save: 'Save filters',
+  saveStep: {
+    back: 'Back',
+    save: 'Save',
+    title: 'Save Filter',
+    subtitle: 'Filters are reusable and shareable.',
+    filterNameInput: {
+      label: 'Filter name',
+      placeholder: 'Type a name for this filter',
+    },
+    exposureSwitch: {
+      title: 'Exposure',
+      label: 'Share this filter',
+      sublabel: 'Allows others to see and use this filter',
+    },
+    validation: {
+      tooShort:
+        'You must provide a valid filter title, above 3 characters long.',
+      tooLong:
+        'You must provide a valid filter title, below 50 characters long.',
+    },
+  },
+  savedFilters: {
+    label: 'Select saved filter',
+    noFilters: 'No saved filters',
+    filter: {
+      delete: 'Delete',
+      cancelDelete: 'Cancel',
+      pin: 'Pin',
+      unpin: 'Unpin',
+    },
+    tabs: {
+      all: 'All',
+      featured: 'Featured',
+      mine: 'Mine',
+      pinned: 'Pinned',
+      shared: 'Shared',
+    },
+  },
+};

package/src/components/filterDrawer/constants/tab.ts

@@ -0,0 +1,7 @@
+export enum FilterTab {
+  All = 'all',
+  Mine = 'mine',
+  Shared = 'shared',
+  Featured = 'featured',
+  Pinned = 'pinned',
+}

package/src/components/filterDrawer/context/context.ts

@@ -0,0 +1,28 @@
+import type { FilterDrawerNewFilter } from '@/components/filterDrawer/types/filters';
+import type { FilterDrawerStandaloneProps } from '@/components/filterDrawer/types/props';
+import type { SaveFilterStepValidation } from '@/components/filterDrawer/types/validation';
+import type { useValidation } from '@cleen/ui-core';
+import { createContext, type Dispatch, type SetStateAction } from 'react';
+
+type FilterDrawerContextProps = FilterDrawerStandaloneProps & {
+  isSaveFiltersStep: boolean;
+  setIsSaveFiltersStep: Dispatch<SetStateAction<boolean>>;
+  saveStepValues: FilterDrawerNewFilter;
+  setSaveStepValues: Dispatch<SetStateAction<FilterDrawerNewFilter>>;
+  handleCloseSaveFilter: () => void;
+  isFiltersDropdownOpen: boolean;
+  setIsFiltersDropdownOpen: Dispatch<SetStateAction<boolean>>;
+} & Partial<ReturnType<typeof useValidation<SaveFilterStepValidation>>>;
+
+export const FilterDrawerContext = createContext<FilterDrawerContextProps>({
+  isSaveFiltersStep: false,
+  setIsSaveFiltersStep: () => {},
+  saveStepValues: { exposed: false, filterName: '' },
+  setSaveStepValues: () => {},
+  handleCloseSaveFilter: () => {},
+  isFiltersDropdownOpen: false,
+  setIsFiltersDropdownOpen: () => {},
+  errors: {},
+  setErrors: () => {},
+  setError: () => {},
+});

package/src/components/filterDrawer/context/provider.tsx

@@ -0,0 +1,50 @@
+import { DEFAULT_NEW_FILTER } from '@/components/filterDrawer/constants/filter';
+import { FilterDrawerContext } from '@/components/filterDrawer/context/context';
+import type { FilterDrawerNewFilter } from '@/components/filterDrawer/types/filters';
+import type { FilterDrawerStandaloneProps } from '@/components/filterDrawer/types/props';
+import type { SaveFilterStepValidation } from '@/components/filterDrawer/types/validation';
+import { useValidation } from '@cleen/ui-core';
+import { useState, type ReactNode } from 'react';
+
+interface FilterDrawerProviderProps {
+  children: ReactNode;
+  value: FilterDrawerStandaloneProps;
+}
+
+export const FilterDrawerProvider = ({
+  children,
+  value,
+}: FilterDrawerProviderProps) => {
+  const [isSaveFiltersStep, setIsSaveFiltersStep] = useState(false);
+  const [saveStepValues, setSaveStepValues] =
+    useState<FilterDrawerNewFilter>(DEFAULT_NEW_FILTER);
+  const { errors, setError, clearError } =
+    useValidation<SaveFilterStepValidation>({});
+
+  const [isFiltersDropdownOpen, setIsFiltersDropdownOpen] = useState(false);
+
+  const handleCloseSaveFilter = () => {
+    setIsSaveFiltersStep(false);
+    value?.onClose?.();
+  };
+
+  return (
+    <FilterDrawerContext.Provider
+      value={{
+        isSaveFiltersStep,
+        setIsSaveFiltersStep,
+        saveStepValues,
+        setSaveStepValues,
+        handleCloseSaveFilter,
+        isFiltersDropdownOpen,
+        setIsFiltersDropdownOpen,
+        errors,
+        setError,
+        clearError,
+        ...value,
+      }}
+    >
+      {children}
+    </FilterDrawerContext.Provider>
+  );
+};

package/src/components/filterDrawer/index.ts

@@ -0,0 +1,7 @@
+export { FilterDrawer } from './FilterDrawer';
+export type {
+  FilterDrawerFilterCategories,
+  FilterDrawerNewFilter,
+  FilterDrawerSavedFilter,
+} from './types/filters';
+export type { FilterDrawerProps } from './types/props';

package/src/components/filterDrawer/types/filters.ts

@@ -0,0 +1,28 @@
+export interface FilterDrawerNewFilter {
+  filterName: string;
+  exposed: boolean;
+}
+
+export interface FilterDrawerFilterCategories {
+  isFeatured: boolean | null;
+  isMine: boolean | null;
+  isPinned: boolean | null;
+  isShared: boolean | null;
+}
+
+export interface SavedFilterParameter {
+  controlCode: string;
+  controlTypeID: number;
+  valueObject: string; // JSON
+}
+
+export interface FilterDrawerSavedFilter {
+  filterID: number;
+  title: string | null;
+  isFeatured: boolean | null;
+  isPinned: boolean | null;
+  isShared: boolean | null;
+  createdDate: string; // Date
+  filterParameters: SavedFilterParameter[] | null;
+  [key: string]: unknown;
+}

package/src/components/filterDrawer/types/props.ts

@@ -0,0 +1,107 @@
+import type { ButtonProps } from '@/components/button/Button';
+import type { DrawerProps } from '@/components/drawer/Drawer';
+import type { DropdownProps } from '@/components/dropdown/Dropdown';
+import type {
+  FilterDrawerFilterCategories,
+  FilterDrawerNewFilter,
+  FilterDrawerSavedFilter,
+} from '@/components/filterDrawer/types/filters';
+import type { InputProps } from '@/components/input/Input';
+import type { SwitchProps } from '@/components/switch/Switch';
+import type { ComponentClassnames, ComponentStyles } from '@cleen/ui-core';
+import type { ReactNode } from 'react';
+
+export interface FilterDrawerLabels {
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  save?: ReactNode;
+  apply?: ReactNode;
+  cancel?: ReactNode;
+  clear?: ReactNode;
+  saveStep?: {
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    back?: ReactNode;
+    save?: ReactNode;
+    filterNameInput?: {
+      label?: ReactNode;
+      placeholder?: string;
+    };
+    exposureSwitch?: {
+      title?: ReactNode;
+      label?: ReactNode;
+      sublabel?: ReactNode;
+    };
+    validation?: {
+      tooShort?: ReactNode;
+      tooLong?: ReactNode;
+    };
+  };
+  savedFilters?: {
+    label?: ReactNode;
+    noFilters?: ReactNode;
+    filter?: {
+      delete?: ReactNode;
+      cancelDelete?: ReactNode;
+      pin?: string;
+      unpin?: string;
+    };
+    tabs?: {
+      all?: ReactNode;
+      mine?: ReactNode;
+      shared?: ReactNode;
+      featured?: ReactNode;
+      pinned?: ReactNode;
+    };
+  };
+}
+
+export type FilterDrawerStandaloneProps = {
+  selectedSavedFilter?: FilterDrawerSavedFilter;
+  savedFilters?: FilterDrawerSavedFilter[];
+  isFiltersFetching?: boolean;
+  labels?: FilterDrawerLabels;
+  withSavedFilters?: boolean;
+  activeFiltersCount?: number;
+  onClear?: () => void;
+  onSave?: (newFilter: FilterDrawerNewFilter) => Promise<void>;
+  onCancel?: () => void;
+  onApply?: () => void;
+  onClose?: () => void;
+  filterDateFormatter?: (date: string) => string;
+  onFilterCategoryChange?: (
+    categories: FilterDrawerFilterCategories
+  ) => Promise<void>;
+  onFilterDelete?: (filterID: number) => Promise<void>;
+  onFilterPin?: (filterID: number) => Promise<void>;
+  onFilterUnpin?: (filterID: number) => Promise<void>;
+  onFilterSelect?: (filter: FilterDrawerSavedFilter | undefined) => void;
+  classNames?: DrawerProps['classNames'] & {
+    dropdown?: ComponentClassnames<DropdownProps>;
+    clearBtn?: ComponentClassnames<ButtonProps>;
+    cancelBtn?: ComponentClassnames<ButtonProps>;
+    applyBtn?: ComponentClassnames<ButtonProps>;
+    saveBtn?: ComponentClassnames<ButtonProps>;
+    saveFilter?: {
+      filterName?: ComponentClassnames<InputProps>;
+      exposure?: ComponentClassnames<SwitchProps>;
+      backBtn?: ComponentClassnames<ButtonProps>;
+      saveBtn?: ComponentClassnames<ButtonProps>;
+    };
+  };
+  styles?: DrawerProps['styles'] & {
+    dropdown?: ComponentStyles<DropdownProps>;
+    clearBtn?: ComponentStyles<ButtonProps>;
+    cancelBtn?: ComponentStyles<ButtonProps>;
+    applyBtn?: ComponentStyles<ButtonProps>;
+    saveBtn?: ComponentStyles<ButtonProps>;
+    saveFilter?: {
+      filterName?: ComponentStyles<InputProps>;
+      exposure?: ComponentStyles<SwitchProps>;
+      backBtn?: ComponentStyles<ButtonProps>;
+      saveBtn?: ComponentStyles<ButtonProps>;
+    };
+  };
+};
+
+export type FilterDrawerProps = DrawerProps & FilterDrawerStandaloneProps;

package/src/components/filterDrawer/types/validation.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+
+export type SaveFilterStepValidation = Partial<{
+  filterName: ReactNode;
+  exposed: ReactNode;
+}>;