@bitrise/bitkit 13.318.0 → 13.320.0

package/src/Components/Filter/{FilterForm → Desktop}/FilterForm.tsx

@@ -1,4 +1,3 @@
-import { FormEvent, useEffect, useMemo, useState } from 'react';
 import { useMultiStyleConfig } from 'chakra-ui-2--react';
 import FocusLock from 'react-focus-lock';
 import Tooltip from '../../Tooltip/Tooltip';
@@ -18,12 +17,10 @@ import RadioGroup from '../../Form/Radio/RadioGroup';
 import SearchInput from '../../SearchInput/SearchInput';
 import Text from '../../Text/Text';
 import { FilterStyle } from '../Filter.theme';
-import { FilterOptions, FilterOptionsMap, FilterValue } from '../Filter.types';
-import { isEqual, useDebounce } from '../../../utils/utils';
+import { FilterFormProps, FilterOptions, FilterValue } from '../Filter.types';
 import { getOptionLabel } from '../Filter.utils';
 import { useFilterContext } from '../Filter.context';
-
-const MAX_ITEMS = 100;
+import useFilterForm, { MAX_ITEMS } from '../hooks/useFilterForm';
 
 /**
  * https://gist.github.com/donmccurdy/6d073ce2c6f3951312dfa45da14a420f
@@ -88,128 +85,40 @@ const MatchingResults = (props: MatchingResultsProps) => {
   );
 };
 
-export type FilterFormProps = {
-  category: string;
-  categoryName?: string;
-  categoryNamePlural?: string;
-  loadingText?: string;
-  onChange: (category: string, selected: FilterValue, previousValue: FilterValue) => void;
-  onCancel: () => void;
-};
-
 const FilterForm = (props: FilterFormProps) => {
-  const { category, categoryName, categoryNamePlural, loadingText, onCancel, onChange } = props;
+  const { category, categoryName, categoryNamePlural, loadingText, onCancel } = props;
 
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
-  const { data, state } = useFilterContext();
-
-  const {
-    isPatternEnabled,
-    iconsMap,
-    hasNotFilteredOption = true,
-    preserveOptionOrder,
-    isInitialLoading,
-    isMultiple,
-    onAsyncSearch,
-    options,
-    optionsMap,
-  } = data[category];
-  const value = state[category] || [];
-
-  const [selected, setSelected] = useState<FilterValue>(value);
-
-  const [mode, setMode] = useState<'manually' | 'pattern'>(
-    isPatternEnabled && value?.length && value[0].includes('*') ? 'pattern' : 'manually',
-  );
-
-  const [searchValue, setSearchValue] = useState<string>('');
-  const debouncedSearchValue = useDebounce<string>(searchValue, 1000);
-
-  const [isLoading, setLoading] = useState(Boolean(isInitialLoading));
-  const [foundOptions, setFoundOptions] = useState<FilterOptions>([]);
-  const [foundOptionsMap, setFoundOptionsMap] = useState<FilterOptionsMap>();
-
-  const isAsync = !!onAsyncSearch;
-  const withSearch = (options && options.length > 5) || isAsync;
-
-  const isSubmitDisabled =
-    isEqual(selected, value) || (mode === 'pattern' && !!selected[0] && !selected[0].includes('*'));
-  const filteredOptions = useMemo(() => {
-    if (options?.length) {
-      return options.filter((opt) => {
-        const optLabel = (optionsMap && optionsMap[opt]) || opt;
-        return optLabel.toLowerCase().includes(searchValue.toLowerCase());
-      });
-    }
-    return [];
-  }, [searchValue, options]);
-
-  const onSearchChange = (q: string) => {
-    setSearchValue(q);
-    if (isAsync) {
-      if (q.length > 0) {
-        setLoading(true);
-      } else {
-        setFoundOptions([]);
-      }
-    }
-  };
+  const { data } = useFilterContext();
 
-  const onSubmit = (e: FormEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    const newSelected = selected[0] === '' ? [] : selected;
-    onChange(category, newSelected, value);
-  };
+  const { isPatternEnabled, iconsMap, hasNotFilteredOption = true, isInitialLoading, isMultiple } = data[category];
 
-  const onClearClick = () => {
-    setSelected([]);
-    onChange(category, [], value);
-  };
+  const {
+    currentOptionMap,
+    getEmptyText,
+    isAsync,
+    isLoading,
+    isSubmitDisabled,
+    mode,
+    onClearClick,
+    onSearchChange,
+    onSubmit,
+    isEditMode,
+    items,
+    searchValue,
+    selected,
+    setMode,
+    setSelected,
+    value,
+    withSearch,
+  } = useFilterForm(props);
 
   const onCancelClick = () => {
     setSelected(value);
     onCancel();
   };
 
-  const getEmptyText = () => {
-    if (searchValue.length) {
-      return 'No result. Refine your search term.';
-    }
-    return '';
-  };
-
-  const getAsyncList = async () => {
-    if (onAsyncSearch) {
-      const response = await onAsyncSearch(category, searchValue);
-      setLoading(false);
-      setFoundOptions(response.options);
-      setFoundOptionsMap(response.optionsMap || optionsMap);
-    }
-  };
-
-  useEffect(() => {
-    setLoading(Boolean(isInitialLoading));
-  }, [isInitialLoading]);
-
-  useEffect(() => {
-    if (debouncedSearchValue.length > 0) {
-      getAsyncList();
-    } else {
-      setLoading(Boolean(isInitialLoading));
-    }
-  }, [debouncedSearchValue]);
-
-  const isEditMode = value.length !== 0;
-
-  const isAsyncSearch = isAsync && !!searchValue;
-
-  const items = isAsyncSearch
-    ? Array.from(new Set(preserveOptionOrder ? [...foundOptions] : [...value, ...foundOptions]))
-    : Array.from(new Set(preserveOptionOrder ? [...filteredOptions] : [...value, ...filteredOptions]));
-
-  const currentOptionMap = isAsyncSearch ? foundOptionsMap : optionsMap;
-
   return (
     <FocusLock>
       <Box as="form" data-testid={`${category}-form`} onSubmit={onSubmit} sx={filterStyle.form}>

package/src/Components/Filter/{FilterItem → Desktop}/FilterItem.tsx

@@ -10,9 +10,9 @@ import Text from '../../Text/Text';
 import Tooltip from '../../Tooltip/Tooltip';
 import { FilterStyle } from '../Filter.theme';
 import { FilterValue } from '../Filter.types';
-import FilterForm from '../FilterForm/FilterForm';
 import { useFilterContext } from '../Filter.context';
 import { getOptionLabel } from '../Filter.utils';
+import FilterForm from './FilterForm';
 
 export type FilterItemProps = {
   category: string;

package/src/Components/Filter/{FilterSwitch → Desktop/FilterSwitch}/FilterSwitch.theme.ts

@@ -1,4 +1,4 @@
-import { rem } from '../../../utils/utils';
+import { rem } from '../../../../utils/utils';
 
 const FilterSwitch = {
   baseStyle: ({ isChecked, iconColor }: { isChecked: boolean; iconColor?: string }) => {

package/src/Components/Filter/{FilterSwitch → Desktop/FilterSwitch}/FilterSwitch.tsx

@@ -9,10 +9,10 @@ import {
 } from 'chakra-ui-2--react';
 import { omitThemingProps } from 'chakra-ui-2--styled-system';
 import { createContext } from 'chakra-ui-2--react-utils';
-import Divider from '../../Divider/Divider';
-import Text from '../../Text/Text';
-import Box from '../../Box/Box';
-import Icon, { TypeIconName } from '../../Icon/Icon';
+import Divider from '../../../Divider/Divider';
+import Text from '../../../Text/Text';
+import Box from '../../../Box/Box';
+import Icon, { TypeIconName } from '../../../Icon/Icon';
 
 type RadioInputProps = ChakraRadioProps['inputProps'] & {
   'data-testid'?: string;

package/src/Components/Filter/{FilterSwitchAdapter → Desktop/FilterSwitch}/FilterSwitchAdapter.tsx

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
-import { useFilterContext } from '../Filter.context';
-import { getOptionLabel } from '../Filter.utils';
-import FilterSwitch from '../FilterSwitch/FilterSwitch';
-import FilterSwitchGroup from '../FilterSwitch/FilterSwitchGroup';
-import { FilterCategoryProps } from '../Filter.types';
+import { useFilterContext } from '../../Filter.context';
+import { getOptionLabel } from '../../Filter.utils';
+import { FilterCategoryProps } from '../../Filter.types';
+import FilterSwitch from './FilterSwitch';
+import FilterSwitchGroup from './FilterSwitchGroup';
 
 type FilterSwitchAdapterProps = {
   category: string;

package/src/Components/Filter/Filter.storyData.ts

@@ -49,6 +49,8 @@ export const FILTER_STORY_DATA: FilterData = {
     type: 'tag',
   },
   cache_type: {
+    categoryName: 'Cache type',
+    categoryNamePlural: 'Cache types',
     allOptionLabel: 'All items',
     iconsMap: {
       bazel: 'Bazel',
@@ -63,7 +65,7 @@ export const FILTER_STORY_DATA: FilterData = {
   },
   date_range: {
     categoryName: 'Date',
-    categoryNamePlural: 'dates',
+    categoryNamePlural: 'Dates',
     isMultiple: true,
     dayTooltip: ({ date }) => (date > DateTime.now() ? 'Date must be in the past' : undefined),
     selectable: new DateRange(DateTime.now().minus({ days: 15 }), DateTime.now()),
@@ -97,6 +99,7 @@ export const FILTER_STORY_DATA: FilterData = {
   },
   workflow: {
     categoryName: 'Workflow',
+    categoryNamePlural: 'Workflows',
     isMultiple: true,
     options: FILTER_STORY_OPTIONS,
     type: 'tag',
@@ -115,4 +118,14 @@ export const FILTER_STORY_CONTEXT: FilterContextType = {
   onFilterClear: () => {},
   setPopoverOpen: () => {},
   state: FILTER_STORY_INIT_STATE,
+  filters: {
+    dateRange: {},
+    search: {},
+    select: {},
+    switch: {},
+    tag: {},
+  },
+  isPopoverOpen: false,
+  onClearFilters: () => {},
+  setSelectedCategory: () => {},
 };

package/src/Components/Filter/Filter.tsx

@@ -1,58 +1,15 @@
-import { ReactNode, useMemo, useState } from 'react';
-import { Modal, ModalOverlay, useMultiStyleConfig } from 'chakra-ui-2--react';
+import { useMemo, useState } from 'react';
 import { isEqual } from '../../utils/utils';
-import Box, { BoxProps } from '../Box/Box';
-import Button from '../Button/Button';
-import Divider from '../Divider/Divider';
-import Icon from '../Icon/Icon';
 import { FilterContext } from './Filter.context';
-import { FilterStyle } from './Filter.theme';
-import {
-  FilterCategoryProps,
-  FilterContextType,
-  FilterData,
-  FilterState,
-  FilterType,
-  FilterValue,
-} from './Filter.types';
+import { FilterContextType, FilterProps, Filters, FilterState, FilterValue } from './Filter.types';
 import { getDependents } from './Filter.utils';
-import FilterAdd from './FilterAdd/FilterAdd';
-import FilterItem from './FilterItem/FilterItem';
-import FilterSearch from './FilterSearch/FilterSearch';
-import FilterDate from './FilterDate/FilterDate';
-import FilterSwitchAdapter from './FilterSwitchAdapter/FilterSwitchAdapter';
-
-export interface FilterProps extends Omit<BoxProps, 'onChange'> {
-  data: FilterData;
-  defaultState?: FilterState;
-  filtersDependOn?: string[];
-  isLoading?: boolean;
-  onChange: (state: FilterState) => void;
-  searchTooltip?: ReactNode;
-  showAdd?: boolean;
-  showFilterIcon?: boolean;
-  showClearFilters?: boolean;
-  showSearch?: boolean;
-  state: FilterState;
-}
+import FilterMobile from './Mobile/Filter';
+import FilterDesktop from './Desktop/Filter';
 
 const Filter = (props: FilterProps) => {
-  const {
-    data,
-    defaultState,
-    filtersDependOn,
-    isLoading,
-    onChange,
-    searchTooltip,
-    showAdd = true,
-    showFilterIcon = true,
-    showClearFilters = true,
-    showSearch,
-    state,
-    ...rest
-  } = props;
-
-  const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
+  const { data, defaultState, filtersDependOn, isLoading, isMobile, onChange, showClearFilters = true, state } = props;
+
+  const [selectedCategory, setSelectedCategory] = useState<string | undefined>();
 
   const cleanState: FilterState = {};
   Object.entries(state).forEach(([category, values]) => {
@@ -106,13 +63,13 @@ const Filter = (props: FilterProps) => {
     onChange(stateToRestore || {});
   };
 
-  const filters = {
+  const filters: Filters = {
     dateRange: {},
     search: {},
     select: {},
     switch: {},
     tag: {},
-  } as Record<FilterType, Record<string, FilterCategoryProps>>;
+  };
 
   Object.entries(data).forEach(([category, value]) => {
     filters[value.type || 'tag'][category] = value;
@@ -123,11 +80,17 @@ const Filter = (props: FilterProps) => {
   const contextValue: FilterContextType = useMemo(
     () => ({
       data,
+      filters,
       filtersDependOn,
+      isPopoverOpen,
       isLoading,
+      onClearFilters,
       onFilterChange,
       onFilterClear,
+      selectedCategory,
+      showClearButton,
       setPopoverOpen,
+      setSelectedCategory,
       state: cleanState,
     }),
     [data, filtersDependOn, isLoading, onFilterChange, onFilterClear, setPopoverOpen, cleanState],
@@ -135,60 +98,7 @@ const Filter = (props: FilterProps) => {
 
   return (
     <FilterContext value={contextValue}>
-      <Box sx={filterStyle.container} {...rest}>
-        <Modal isOpen={isPopoverOpen} onClose={() => {}}>
-          {isPopoverOpen && <ModalOverlay />}
-        </Modal>
-        <Box sx={filterStyle.content}>
-          {showFilterIcon && <Icon name="Filter" sx={filterStyle.icon} />}
-
-          {Object.keys(filters.switch).map((category) => (
-            <FilterSwitchAdapter key={category} category={category} />
-          ))}
-
-          {Object.keys(filters.dateRange).map((category) => (
-            <FilterDate key={category} category={category} />
-          ))}
-
-          {Object.keys(filters.select).map((category) => (
-            <FilterItem key={category} category={category} />
-          ))}
-          {Object.keys(filters.tag).map((category) => {
-            if (!cleanState[category]) {
-              return;
-            }
-            return <FilterItem key={category} category={category} />;
-          })}
-
-          {showAdd && <FilterAdd onChange={onFilterChange} />}
-        </Box>
-        {(showClearButton || showSearch) && (
-          <Box sx={filterStyle.rightContent}>
-            {showClearButton && (
-              <Button
-                isDisabled={isLoading}
-                leftIconName="Cross"
-                minWidth="7.5rem"
-                onClick={onClearFilters}
-                size="sm"
-                variant="tertiary"
-              >
-                Clear filters
-              </Button>
-            )}
-            {showSearch && (
-              <>
-                <Divider flexShrink="0" orientation="vertical" size="1" variant="solid" />
-                <FilterSearch
-                  onChange={onFilterChange}
-                  value={cleanState.search?.length ? cleanState.search[0] : ''}
-                  searchTooltip={searchTooltip}
-                />
-              </>
-            )}
-          </Box>
-        )}
-      </Box>
+      {isMobile ? <FilterMobile {...props} /> : <FilterDesktop {...props} />}
     </FilterContext>
   );
 };

package/src/Components/Filter/Filter.types.ts

@@ -1,6 +1,7 @@
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, ReactNode, SetStateAction } from 'react';
 import { TypeIconName } from '../Icon/Icon';
 import { DatePickerProps, DateRange } from '../DatePicker/DatePicker';
+import { BoxProps } from '../Box/Box';
 
 export type FilterType = 'dateRange' | 'search' | 'select' | 'switch' | 'tag';
 
@@ -58,10 +59,42 @@ export type FilterState = Record<string, FilterValue>;
 
 export interface FilterContextType {
   data: FilterData;
+  filters: Filters;
   filtersDependOn?: string[];
   isLoading?: boolean;
+  isPopoverOpen: boolean;
+  onClearFilters: () => void;
   onFilterClear: (category: string) => void;
   onFilterChange: (category: string, value: FilterValue) => void;
+  selectedCategory?: string;
   setPopoverOpen: Dispatch<SetStateAction<boolean>>;
+  setSelectedCategory: Dispatch<SetStateAction<string | undefined>>;
+  showClearButton?: boolean;
   state: FilterState;
 }
+
+export type Filters = Record<FilterType, Record<string, FilterCategoryProps>>;
+
+export interface FilterProps extends Omit<BoxProps, 'onChange'> {
+  data: FilterData;
+  defaultState?: FilterState;
+  filtersDependOn?: string[];
+  isLoading?: boolean;
+  isMobile?: boolean;
+  onChange: (state: FilterState) => void;
+  searchTooltip?: ReactNode;
+  showAdd?: boolean;
+  showFilterIcon?: boolean;
+  showClearFilters?: boolean;
+  showSearch?: boolean;
+  state: FilterState;
+}
+
+export type FilterFormProps = {
+  category: string;
+  categoryName?: string;
+  categoryNamePlural?: string;
+  loadingText?: string;
+  onChange: (category: string, selected: FilterValue, previousValue: FilterValue) => void;
+  onCancel: () => void;
+};

package/src/Components/Filter/Filter.utils.ts

@@ -1,3 +1,5 @@
+import { DateTime } from 'luxon';
+import { DateRange } from '../DatePicker/DatePicker';
 import { FilterData, FilterOptionsMap } from './Filter.types';
 
 export const hasAllDependencies = (stateKeys: string[], dependsOn?: string[]): boolean => {
@@ -38,3 +40,14 @@ export const getOptionLabel = (option: string, optionsMap?: FilterOptionsMap) =>
   }
   return optionsMap[option] || option;
 };
+
+export const getDateRangeLabel = (value: string[] | undefined): string => {
+  const selectedRange: DateRange | undefined =
+    value && value[0]
+      ? new DateRange(DateTime.fromMillis(Number(value[0])), DateTime.fromMillis(Number(value[1])))
+      : undefined;
+
+  return selectedRange
+    ? `${selectedRange.from?.toFormat('LLL dd')} - ${selectedRange.to?.toFormat('LLL dd')}`
+    : 'All dates';
+};

package/src/Components/Filter/Mobile/DateSelectOption.tsx

@@ -0,0 +1,53 @@
+import { DateTime } from 'luxon';
+import Box from '../../Box/Box';
+import DatePicker, { DatePickerProps, DateRange, useDateRange } from '../../DatePicker/DatePicker';
+import { useFilterContext } from '../Filter.context';
+import { FilterCategoryProps } from '../Filter.types';
+
+type DateSelectOptionProps = {
+  onClear: () => void;
+  onChange: (dateRange: string[]) => void;
+  selectedItems: string[];
+};
+
+const DateSelectOption = ({ onClear, onChange, selectedItems }: DateSelectOptionProps) => {
+  const { data } = useFilterContext();
+
+  const dateRangeData = data.date_range as FilterCategoryProps & {
+    dayTooltip?: DatePickerProps['dayTooltip'];
+    selectable?: DateRange;
+  };
+
+  const handleChange = (range: DateRange) => {
+    if (range.from && range.to) {
+      onChange([String(range.from.toMillis()), String(range.to.endOf('day').toMillis())]);
+    }
+  };
+
+  const now = DateTime.local();
+  const twoYearsAgo = now.minus({ years: 2 });
+
+  const selectable = useDateRange(twoYearsAgo, now);
+
+  const selectedRange: DateRange | undefined =
+    selectedItems && selectedItems[0]
+      ? new DateRange(DateTime.fromMillis(Number(selectedItems[0])), DateTime.fromMillis(Number(selectedItems[1])))
+      : undefined;
+
+  return (
+    <Box display="flex" justifyContent="center">
+      <DatePicker
+        dayTooltip={dateRangeData.dayTooltip}
+        mode="range"
+        onApply={handleChange}
+        onClear={selectedItems?.length ? onClear : undefined}
+        selectable={dateRangeData.selectable || selectable}
+        selected={selectedRange}
+        variant="inline"
+        visible
+      />
+    </Box>
+  );
+};
+
+export default DateSelectOption;

package/src/Components/Filter/Mobile/Filter.tsx

@@ -0,0 +1,57 @@
+import Badge from '../../Badge/Badge';
+import Text from '../../Text/Text';
+import Button from '../../Button/Button';
+import Box from '../../Box/Box';
+import { useFilterContext } from '../Filter.context';
+import { FilterProps } from '../Filter.types';
+import FilterDrawer from './FilterDrawer';
+import FilterForm from './FilterForm';
+
+const Filter = ({ isLoading, showAdd = true }: FilterProps) => {
+  const {
+    isPopoverOpen,
+    onClearFilters,
+    selectedCategory,
+    setSelectedCategory,
+    setPopoverOpen,
+    showClearButton,
+    state,
+  } = useFilterContext();
+
+  const count = Object.values(state).filter((item) => item?.length > 0).length;
+
+  return (
+    <>
+      <Box alignItems="center" display="flex" justifyContent="space-between">
+        <Button leftIconName="Filter" onClick={() => setPopoverOpen(true)} size="sm" variant="secondary">
+          <Text alignItems="center" display="flex" gap="8">
+            Filters
+            <Badge colorScheme={count > 0 ? 'progress' : 'neutral'} variant="subtle">
+              {String(count)}
+            </Badge>
+          </Text>
+        </Button>
+        {showClearButton && (
+          <Button
+            isDisabled={isLoading}
+            leftIconName="Cross"
+            minWidth="7.5rem"
+            onClick={onClearFilters}
+            size="sm"
+            variant="tertiary"
+          >
+            Clear filters
+          </Button>
+        )}
+      </Box>
+      <FilterDrawer isOpen={isPopoverOpen} onClose={() => setPopoverOpen(false)} showAdd={showAdd} />
+      <FilterForm
+        isOpen={Boolean(selectedCategory)}
+        onClose={() => setSelectedCategory(undefined)}
+        selectedCategory={selectedCategory || ''}
+      />
+    </>
+  );
+};
+
+export default Filter;