@cleen/ui 0.1.0 → 0.1.1

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

@@ -1,119 +0,0 @@
-import { Button } from '@/components/button';
-import { DEFAULT_NEW_FILTER } from '@/components/filterDrawer/constants/filter';
-import { FilterDrawerContext } from '@/components/filterDrawer/context/context';
-import { cn } from '@cleen/ui-core';
-import { useContext, useState } from 'react';
-
-const TITLE_THRESHOLD = {
-  min: 3,
-  max: 50,
-};
-
-export const FilterDrawerFooter = () => {
-  const {
-    isSaveFiltersStep,
-    saveStepValues,
-    setSaveStepValues,
-    setIsSaveFiltersStep,
-    handleCloseSaveFilter,
-    setError,
-    onSave,
-    classNames,
-    styles,
-    labels,
-    withSavedFilters = true,
-    onCancel,
-    onApply,
-  } = useContext(FilterDrawerContext);
-  const [isSaving, setIsSaving] = useState(false);
-
-  const handleSave = async () => {
-    try {
-      if (saveStepValues.filterName.length < TITLE_THRESHOLD.min) {
-        setError?.('filterName', labels?.saveStep?.validation?.tooShort);
-        return;
-      }
-
-      if (saveStepValues.filterName.length > TITLE_THRESHOLD.max) {
-        setError?.('filterName', labels?.saveStep?.validation?.tooLong);
-        return;
-      }
-
-      setIsSaving(true);
-      await onSave?.(saveStepValues);
-      setIsSaveFiltersStep(false);
-    } catch (e) {
-      console.error('Error saving filters:', e);
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  return isSaveFiltersStep ? (
-    <div className="cleen-flex cleen-flex-1 cleen-justify-end cleen-gap-3">
-      <Button
-        onClick={() => setIsSaveFiltersStep(false)}
-        variant="secondary"
-        {...classNames?.saveFilter?.backBtn}
-        {...styles?.saveFilter?.backBtn}
-      >
-        {labels?.saveStep?.back}
-      </Button>
-
-      <Button
-        onClick={handleSave}
-        isLoading={isSaving}
-        loaderColor="rgb(var(--cleen-white))"
-        {...classNames?.saveFilter?.saveBtn}
-        {...styles?.saveFilter?.saveBtn}
-      >
-        {labels?.saveStep?.save}
-      </Button>
-    </div>
-  ) : (
-    <>
-      {withSavedFilters && (
-        <Button
-          onClick={() => {
-            setSaveStepValues(DEFAULT_NEW_FILTER);
-            setIsSaveFiltersStep(true);
-          }}
-          variant="borderless-blue"
-          {...classNames?.saveBtn}
-          {...styles?.saveBtn}
-        >
-          {labels?.save}
-        </Button>
-      )}
-
-      <div
-        className={cn('cleen-flex cleen-items-center cleen-gap-3', {
-          'cleen-flex-1 cleen-justify-end': !withSavedFilters,
-        })}
-      >
-        <Button
-          onClick={() => {
-            onCancel?.();
-            handleCloseSaveFilter();
-          }}
-          variant="secondary"
-          {...classNames?.cancelBtn}
-          {...styles?.cancelBtn}
-        >
-          {labels?.cancel}
-        </Button>
-
-        <Button
-          onClick={() => {
-            onApply?.();
-            handleCloseSaveFilter();
-          }}
-          {...classNames?.applyBtn}
-          {...styles?.applyBtn}
-        >
-          {labels?.apply}
-        </Button>
-      </div>
-    </>
-  );
-};

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

@@ -1,56 +0,0 @@
-import { FilterDrawerContext } from '@/components/filterDrawer/context/context';
-import { Input } from '@/components/input';
-import { Switch } from '@/components/switch';
-import { useContext } from 'react';
-
-export const SaveFilterStep = () => {
-  const {
-    classNames,
-    styles,
-    labels,
-    saveStepValues,
-    setSaveStepValues,
-    errors,
-    clearError,
-  } = useContext(FilterDrawerContext);
-
-  return (
-    <>
-      <Input
-        value={saveStepValues.filterName}
-        onChange={e => {
-          setSaveStepValues(prev => ({
-            ...prev,
-            filterName: e.target.value,
-          }));
-
-          if (errors?.filterName) {
-            clearError?.('filterName');
-          }
-        }}
-        label={labels?.saveStep?.filterNameInput?.label}
-        placeholder={labels?.saveStep?.filterNameInput?.placeholder}
-        infoLabels={{
-          errorMessage: errors?.filterName,
-        }}
-        {...classNames?.saveFilter?.filterName}
-        {...styles?.saveFilter?.filterName}
-      />
-
-      <Switch
-        checked={saveStepValues.exposed}
-        onChange={checked =>
-          setSaveStepValues(prev => ({
-            ...prev,
-            exposed: checked,
-          }))
-        }
-        title={labels?.saveStep?.exposureSwitch?.title}
-        label={labels?.saveStep?.exposureSwitch?.label}
-        sublabel={labels?.saveStep?.exposureSwitch?.sublabel}
-        {...classNames?.saveFilter?.exposure}
-        {...styles?.saveFilter?.exposure}
-      />
-    </>
-  );
-};

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

@@ -1,166 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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

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

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

@@ -1,52 +0,0 @@
-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

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

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

@@ -1,28 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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;
-}