@bitrise/bitkit 13.318.0 → 13.320.0

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;

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

@@ -0,0 +1,236 @@
+import { useRef } from 'react';
+import ProgressSpinner from '../../ProgressSpinner/ProgressSpinner';
+import Divider from '../../Divider/Divider';
+import SearchInput from '../../SearchInput/SearchInput';
+import ControlButton from '../../ControlButton/ControlButton';
+import Text from '../../Text/Text';
+import type { DialogProps } from '../../Dialog/DialogProps';
+import Box from '../../Box/Box';
+import Button from '../../Button/Button';
+import Drawer from '../../Drawer/Drawer';
+import { useFilterContext } from '../Filter.context';
+import useFilterForm from '../hooks/useFilterForm';
+import { FilterValue } from '../Filter.types';
+import ButtonGroup from '../../ButtonGroup/ButtonGroup';
+import useIsScrollable from '../hooks/useIsScrollable';
+import DateSelectOption from './DateSelectOption';
+import MultiSelectOptions from './MultiSelectOptions';
+import SingleSelectOptions from './SingleSelectOptions';
+
+type FilterFormProps = Pick<DialogProps, 'isOpen' | 'onClose'> & { selectedCategory: string };
+
+const FilterForm = ({ isOpen, onClose, selectedCategory }: FilterFormProps) => {
+  const { data, onFilterChange } = useFilterContext();
+
+  const bodyRef = useRef<HTMLDivElement>(null);
+
+  const categoryData = data[selectedCategory || ''];
+
+  const categoryName = categoryData?.categoryName;
+  const categoryNamePlural = categoryData?.categoryNamePlural;
+  const hasNotFilteredOption =
+    categoryData?.hasNotFilteredOption === undefined ? true : categoryData?.hasNotFilteredOption;
+  const isMultiple = categoryData?.isMultiple;
+  const loadingText = categoryData?.loadingText;
+  const type = categoryData?.type;
+  const name = categoryData?.categoryName;
+
+  const onChange = (newCategory: string, newValue: FilterValue) => {
+    if (isMultiple) {
+      onFilterChange(newCategory, newValue);
+    } else {
+      onFilterChange(newCategory, newValue);
+      onClose();
+    }
+  };
+
+  const {
+    currentOptionMap,
+    getEmptyText,
+    isAsync,
+    isLoading,
+    isSubmitDisabled,
+    onClearClick,
+    onSearchChange,
+    onSubmit,
+    items,
+    searchValue,
+    selected,
+    setSelected,
+    withSearch,
+  } = useFilterForm({
+    category: selectedCategory,
+    categoryName,
+    categoryNamePlural,
+    loadingText,
+    onChange,
+  });
+
+  const { isScrollable } = useIsScrollable({
+    items,
+    hasNotFilteredOption,
+    ref: bodyRef,
+  });
+
+  const onClear = () => {
+    onClearClick();
+    onClose();
+  };
+
+  const count = selected.length || 0;
+  const showCount = isMultiple && type !== 'dateRange';
+
+  const clearText = type === 'dateRange' ? 'Reset' : `Clear ${isMultiple ? 'all' : ''}`;
+
+  const showFooter = selected.length > 0;
+
+  return (
+    <Drawer
+      bodyPadding="0"
+      bodyProps={{ overflowY: 'auto' }}
+      bodyRef={bodyRef}
+      contentProps={{ zIndex: 'dialog', top: '0' }}
+      headerPadding={16}
+      hideCloseButton
+      isOpen={isOpen}
+      maxWidth="100%"
+      onClose={onClose}
+      padding={0}
+      title={
+        <Box display="flex" alignItems="center" gap="12">
+          <ControlButton
+            aria-label="Back"
+            color="icon/secondary"
+            iconName="ArrowLeft"
+            isTooltipDisabled
+            onClick={onClose}
+            size="sm"
+          />
+          <Box display="flex" flexDirection="column">
+            <Text as="h6" color="text/tertiary" textStyle="heading/h6">
+              Filter
+            </Text>
+            <Text as="h3" color="text/primary" textStyle="heading/mobile/h3">
+              {name}
+            </Text>
+          </Box>
+        </Box>
+      }
+      footer={
+        showFooter && (hasNotFilteredOption || isMultiple) ? (
+          <Box width="100%">
+            <Divider />
+            <ButtonGroup
+              backgroundColor="background/primary"
+              display="flex"
+              gap="12"
+              justifyContent="space-between"
+              paddingBlock="12"
+              paddingInline="16"
+              width="100%"
+            >
+              {hasNotFilteredOption && (
+                <Button variant="secondary" onClick={onClear} flex="1" maxWidth="calc(50% - 0.5rem)" size="md">
+                  {clearText}
+                </Button>
+              )}
+              {isMultiple && (
+                <Button
+                  alignSelf="flex-end"
+                  flex="1"
+                  isDisabled={isSubmitDisabled}
+                  onClick={() => {
+                    onSubmit();
+                    onClose();
+                  }}
+                  size="md"
+                  type="submit"
+                >
+                  Apply {showCount && count ? `(${count})` : undefined}
+                </Button>
+              )}
+            </ButtonGroup>
+          </Box>
+        ) : null
+      }
+    >
+      <Box display="flex" flexDirection="column" gap="16">
+        <Box
+          backgroundColor="background/primary"
+          display="flex"
+          flexDirection="column"
+          gap="8"
+          marginBottom="8"
+          position="sticky"
+          top="0"
+        >
+          {(withSearch || isAsync) && (
+            <>
+              <Divider />
+              <SearchInput
+                marginInline="12"
+                onChange={onSearchChange}
+                placeholder="Search for options"
+                value={searchValue}
+                variant="mobile"
+              />
+            </>
+          )}
+          <Divider />
+        </Box>
+        <Box display="flex" flexDirection="column" gap="8">
+          {isLoading && (
+            <Box display="flex" alignItems="center" padding="24">
+              <ProgressSpinner color="sys/primary/base" marginRight="12" size="16" />
+              <Text color="text/secondary">{loadingText || 'Loading...'}</Text>
+            </Box>
+          )}
+          {type === 'dateRange' && (
+            <DateSelectOption
+              key={selectedCategory}
+              onChange={setSelected}
+              onClear={onClear}
+              selectedItems={selected}
+            />
+          )}
+          {type !== 'dateRange' && isMultiple && (
+            <MultiSelectOptions
+              currentOptionMap={currentOptionMap}
+              emptyText={getEmptyText()}
+              isLoading={isLoading}
+              items={items}
+              onChange={setSelected}
+              selectedItems={selected}
+            />
+          )}
+          {type !== 'dateRange' && !isMultiple && (
+            <SingleSelectOptions
+              currentOptionMap={currentOptionMap}
+              emptyText={getEmptyText()}
+              hasNotFilteredOption={hasNotFilteredOption}
+              isLoading={isLoading}
+              items={items}
+              onChange={(option: string) => {
+                onChange(selectedCategory, [option]);
+              }}
+              selectedItems={selected}
+            />
+          )}
+          {isScrollable && (
+            <Box
+              background="linear-gradient(0deg, white 0%, rgba(255, 255, 255, 0) 100%)"
+              bottom="0"
+              height="32"
+              left="0"
+              pointerEvents="none"
+              position="sticky"
+              right="0"
+            />
+          )}
+        </Box>
+      </Box>
+    </Drawer>
+  );
+};
+
+export default FilterForm;

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

@@ -0,0 +1,95 @@
+import { useId } from 'react';
+import { FormControl } from 'chakra-ui-2--react';
+import FormLabel from '../../Form/FormLabel';
+import Button from '../../Button/Button';
+import Box from '../../Box/Box';
+import Icon from '../../Icon/Icon';
+import IconButton from '../../IconButton/IconButton';
+import { useFilterContext } from '../Filter.context';
+import { getDateRangeLabel, getOptionLabel } from '../Filter.utils';
+
+export type FilterItemProps = {
+  category: string;
+};
+
+const FilterItem = ({ category }: FilterItemProps) => {
+  const { data, onFilterClear, setSelectedCategory, state } = useFilterContext();
+
+  const value = state[category];
+
+  const { categoryName, categoryNamePlural, isMultiple, optionsMap, unfilteredLabel, type } = data[category];
+
+  const pluralCategoryString = (categoryNamePlural || `${category}s`).toLowerCase();
+
+  const getText = () => {
+    if (!value || value.length === 0) {
+      return unfilteredLabel || `All ${pluralCategoryString}`;
+    }
+
+    if (value.length === 2 && type === 'dateRange') {
+      return getDateRangeLabel(value);
+    }
+
+    if (value.length > 1) {
+      return `${value.length} ${pluralCategoryString}`;
+    }
+
+    return getOptionLabel(value[0], optionsMap);
+  };
+
+  const buttonId = useId();
+  return (
+    <FormControl flex="1" isRequired>
+      <FormLabel htmlFor={buttonId}>{isMultiple && type !== 'dateRange' ? categoryNamePlural : categoryName}</FormLabel>
+      {type === 'tag' && (
+        <Box display="flex" alignItems="center">
+          <Button
+            borderRight="0"
+            borderRightRadius="0"
+            fontWeight="normal"
+            id={buttonId}
+            justifyContent="flex-start"
+            onClick={() => setSelectedCategory(category)}
+            rightIconName={type !== 'tag' ? 'ChevronRight' : undefined}
+            size="lg"
+            variant="secondary"
+            width="100%"
+          >
+            {getText()}
+          </Button>
+          <IconButton
+            aria-label="Clear"
+            borderLeft="0"
+            borderLeftRadius="0"
+            iconName="Cross"
+            onClick={() => onFilterClear(category)}
+            variant="secondary"
+          />
+        </Box>
+      )}
+      {type !== 'tag' && (
+        <Button
+          fontWeight="normal"
+          id={buttonId}
+          justifyContent="space-between"
+          onClick={() => setSelectedCategory(category)}
+          rightIconName="ChevronRight"
+          size="lg"
+          variant="secondary"
+          width="100%"
+        >
+          {type === 'dateRange' ? (
+            <Box display="flex" alignItems="center" gap="8">
+              <Icon color="icon/tertiary" name="Calendar" />
+              {getText()}
+            </Box>
+          ) : (
+            getText()
+          )}
+        </Button>
+      )}
+    </FormControl>
+  );
+};
+
+export default FilterItem;

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

@@ -0,0 +1,69 @@
+import { Checkbox, CheckboxGroup } from 'chakra-ui-2--react';
+import Box from '../../Box/Box';
+import Text from '../../Text/Text';
+import { FilterOptionsMap } from '../Filter.types';
+import { getOptionLabel } from '../Filter.utils';
+import { MAX_ITEMS } from '../hooks/useFilterForm';
+
+type MultiSelectOptionsProps = {
+  currentOptionMap?: FilterOptionsMap;
+  emptyText?: string;
+  isLoading: boolean;
+  items: string[];
+  onChange: (option: string[]) => void;
+  selectedItems: string[];
+};
+
+const MultiSelectOptions = ({
+  currentOptionMap,
+  emptyText,
+  isLoading,
+  items,
+  onChange,
+  selectedItems,
+}: MultiSelectOptionsProps) => {
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <CheckboxGroup onChange={onChange} value={selectedItems}>
+      <Box>
+        {items.length ? (
+          items?.slice(0, MAX_ITEMS).map((option) => {
+            const id = `checkbox-${option}`;
+            const isSelected = selectedItems.includes(option);
+
+            return (
+              <Box
+                alignItems="center"
+                as="label"
+                backgroundColor={isSelected ? 'background/selected' : 'transparent'}
+                display="flex"
+                gap="16"
+                htmlFor={id}
+                paddingBlock="12"
+                paddingInlineStart="24"
+                paddingInlineEnd="24"
+                cursor="pointer"
+                role="option"
+                _focusWithin={{
+                  backgroundColor: isSelected ? 'background/selected-hover' : 'background/hover',
+                }}
+                _hover={{ backgroundColor: isSelected ? 'background/selected-hover' : 'background/hover' }}
+                _active={{ backgroundColor: 'background/active' }}
+              >
+                <Checkbox id={id} key={option} value={option} position="static" />
+                {getOptionLabel(option, currentOptionMap)}
+              </Box>
+            );
+          })
+        ) : (
+          <Text paddingInline={16}>{emptyText}</Text>
+        )}
+      </Box>
+    </CheckboxGroup>
+  );
+};
+
+export default MultiSelectOptions;