@bitrise/bitkit 13.317.0 → 13.319.0

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;

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

@@ -0,0 +1,97 @@
+import { Modal, ModalOverlay, Portal } from 'chakra-ui-2--react';
+import Menu from '../../Menu/Menu';
+import MenuItem from '../../Menu/MenuItem';
+import Button from '../../Button/Button';
+import Box from '../../Box/Box';
+import Text from '../../Text/Text';
+import { getMissingDependencies } from '../Filter.utils';
+import useFilterAdd from '../hooks/useFilterAdd';
+import { useFilterContext } from '../Filter.context';
+import FilterForm from './FilterForm';
+
+const FilterAdd = () => {
+  const { data } = useFilterContext();
+
+  const {
+    categoryList,
+    closeMenu,
+    isDisabled,
+    isMenuOpen,
+    onCategorySelect,
+    onOpen,
+    selectedCategory,
+    setSelectedCategory,
+    stateKeys,
+  } = useFilterAdd({ isMobile: true });
+
+  return (
+    <>
+      <Modal isOpen={isMenuOpen} onClose={() => closeMenu()} trapFocus={false} autoFocus={false}>
+        {isMenuOpen && <ModalOverlay onClick={() => closeMenu()} zIndex="popover" />}
+      </Modal>
+      <Button alignSelf="flex-start" isDisabled={isDisabled} variant="tertiary" leftIconName="Plus" onClick={onOpen}>
+        Add filter
+      </Button>
+      <FilterForm
+        isOpen={Boolean(selectedCategory)}
+        onClose={() => setSelectedCategory(undefined)}
+        selectedCategory={selectedCategory || ''}
+      />
+      {isMenuOpen && (
+        <Portal>
+          <Box
+            bg="white"
+            borderRadius="8px"
+            bottom="12px"
+            boxShadow="0 4px 12px rgba(0, 0, 0, 0.15)"
+            left="12px"
+            maxHeight="75vh"
+            overflowY="auto"
+            paddingY="8"
+            position="fixed"
+            right="12px"
+            sx={{
+              '@keyframes slideUp': {
+                from: { transform: 'translateY(100%)', opacity: 0 },
+                to: { transform: 'translateY(0)', opacity: 1 },
+              },
+              animation: 'slideUp 0.3s ease-out',
+            }}
+            zIndex="tooltip"
+          >
+            <Menu>
+              <Text
+                color="text/tertiary"
+                paddingBlock="8"
+                paddingInline="16"
+                textStyle="heading/h6"
+                textTransform="uppercase"
+              >
+                Select filter
+              </Text>
+              {categoryList.map((category) => {
+                const { categoryName, dependsOn } = data[category];
+                const missingDependencies = getMissingDependencies(stateKeys, Object.keys(dependsOn || []));
+                const isCategoryDisabled = missingDependencies.length > 0 || !data[category]?.options?.length;
+                return (
+                  <MenuItem
+                    isDisabled={isCategoryDisabled}
+                    key={category}
+                    onClick={() => onCategorySelect(category)}
+                    pointerEvents="all"
+                    rightIconName="ChevronRight"
+                    rightIconColor="neutral.60"
+                  >
+                    {categoryName || category}
+                  </MenuItem>
+                );
+              })}
+            </Menu>
+          </Box>
+        </Portal>
+      )}
+    </>
+  );
+};
+
+export default FilterAdd;

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

@@ -0,0 +1,96 @@
+import { useRef } from 'react';
+import ButtonGroup from '../../ButtonGroup/ButtonGroup';
+import type { DialogProps } from '../../Dialog/DialogProps';
+import Box from '../../Box/Box';
+import Button from '../../Button/Button';
+import Drawer from '../../Drawer/Drawer';
+import Divider from '../../Divider/Divider';
+import Text from '../../Text/Text';
+import { useFilterContext } from '../Filter.context';
+import FilterItem from './FilterItem';
+import FilterAdd from './FilterAdd';
+
+const FilterDrawer = ({
+  isOpen,
+  onClose,
+  showAdd,
+}: Pick<DialogProps, 'isOpen' | 'onClose'> & { showAdd?: boolean }) => {
+  const { filters, state, onClearFilters, showClearButton } = useFilterContext();
+
+  const initialFocusRef = useRef(null);
+
+  const onClear = () => {
+    onClearFilters();
+    onClose();
+  };
+
+  return (
+    <Drawer
+      blockScrollOnMount={false}
+      bodyPadding={16}
+      bodyProps={{ overflowY: 'auto' }}
+      contentProps={{ zIndex: 'fullDialog', top: '0' }}
+      headerPadding={0}
+      initialFocusRef={initialFocusRef}
+      isOpen={isOpen}
+      maxWidth="100%"
+      onClose={onClose}
+      overlayProps={{ zIndex: 'fullDialogOverlay' }}
+      padding={0}
+      title={
+        <>
+          <Text color="text/primary" padding="16" textStyle="heading/mobile/h2" textTransform="none">
+            Filters
+          </Text>
+          <Divider />
+        </>
+      }
+      footer={
+        <Box width="100%">
+          <Divider />
+          <ButtonGroup
+            display="flex"
+            justifyContent="space-between"
+            gap="12"
+            paddingBlock="12"
+            paddingInline="16"
+            width="100%"
+            ref={initialFocusRef}
+          >
+            <Button isDisabled={!showClearButton} variant="secondary" onClick={onClear} flex="1" size="md">
+              Clear filters
+            </Button>
+            <Button type="submit" flex="1" size="md" onClick={onClose}>
+              Show results
+            </Button>
+          </ButtonGroup>
+        </Box>
+      }
+    >
+      <Box display="flex" flexDirection="column" gap="16">
+        {Object.keys(filters.dateRange).map((category) => (
+          <FilterItem key={category} category={category} />
+        ))}
+
+        {Object.keys(filters.switch).map((category) => (
+          <FilterItem key={category} category={category} />
+        ))}
+
+        {Object.keys(filters.select).map((category) => (
+          <FilterItem key={category} category={category} />
+        ))}
+
+        {Object.keys(filters.tag).map((category) => {
+          if (!state[category]) {
+            return;
+          }
+          return <FilterItem key={category} category={category} />;
+        })}
+
+        {showAdd && <FilterAdd />}
+      </Box>
+    </Drawer>
+  );
+};
+
+export default FilterDrawer;