@bitrise/bitkit 13.317.0 → 13.319.0

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;

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

@@ -0,0 +1,136 @@
+import { ReactNode } from 'react';
+import Icon from '../../Icon/Icon';
+import Box from '../../Box/Box';
+import Text from '../../Text/Text';
+import { getOptionLabel } from '../Filter.utils';
+import { FilterOptionsMap } from '../Filter.types';
+import { MAX_ITEMS } from '../hooks/useFilterForm';
+import useListBox from '../hooks/useListBox';
+
+type SingleSelectOptionsProps = {
+  currentOptionMap?: FilterOptionsMap;
+  emptyText?: string;
+  hasNotFilteredOption: boolean;
+  isLoading: boolean;
+  items: string[];
+  onChange: (option: string) => void;
+  selectedItems: string[];
+};
+
+const Option = ({
+  onChange,
+  index,
+  isActive,
+  isSelected,
+  option,
+  children,
+}: Pick<SingleSelectOptionsProps, 'onChange'> & {
+  index: number;
+  isActive?: boolean;
+  isSelected: boolean;
+  option: string;
+  children: ReactNode;
+}) => {
+  const getBackgroundColor = () => {
+    if (isActive && isSelected) return 'background/selected-hover';
+    if (isSelected) return 'background/selected';
+    if (isActive) return 'background/hover';
+    return undefined;
+  };
+
+  const getHoverBackgroundColor = () => {
+    if (isSelected) return 'background/selected-hover';
+    return 'background/hover';
+  };
+
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      backgroundColor={getBackgroundColor()}
+      gap="16"
+      id={`option-${index}`}
+      onClick={(e) => {
+        e.stopPropagation();
+        onChange(option);
+      }}
+      paddingBlock="12"
+      paddingInlineStart={isSelected ? '16' : '56'}
+      paddingInlineEnd="24"
+      cursor="pointer"
+      role="option"
+      tabIndex={-1}
+      sx={{
+        backgroundColor: getBackgroundColor(),
+        '&:hover': {
+          backgroundColor: getHoverBackgroundColor(),
+        },
+        '&:active': {
+          backgroundColor: 'background/active',
+        },
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+const SingleSelectOptions = ({
+  currentOptionMap,
+  emptyText,
+  hasNotFilteredOption,
+  isLoading,
+  items,
+  onChange,
+  selectedItems,
+}: SingleSelectOptionsProps) => {
+  const { activeIndex, handleKeyDown, handleFocus, handleBlur, handleMouseDown, handleMouseMove } = useListBox({
+    items: hasNotFilteredOption ? [''].concat(items) : items,
+    hasNotFilteredOption,
+    onChange,
+  });
+
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <Box
+      aria-label="Filter options"
+      onKeyDown={handleKeyDown}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      outline="none"
+      role="listbox"
+      tabIndex={0}
+      _focusVisible={{
+        boxShadow: 'none',
+        outline: 'none',
+      }}
+    >
+      {items.length ? (
+        items?.slice(0, MAX_ITEMS).map((option, index) => {
+          const isSelected = selectedItems.includes(option);
+          return (
+            <Option
+              index={index}
+              isActive={activeIndex === index}
+              isSelected={isSelected}
+              onChange={onChange}
+              option={option}
+            >
+              {isSelected && <Icon name="Check" color="icon/interactive" />}
+              {getOptionLabel(option, currentOptionMap)}
+            </Option>
+          );
+        })
+      ) : (
+        <Text paddingInline={16}>{emptyText}</Text>
+      )}
+    </Box>
+  );
+};
+
+export default SingleSelectOptions;

package/src/Components/Filter/hooks/useFilterAdd.ts

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { useDisclosure } from 'chakra-ui-2--react';
+import { useFilterContext } from '../Filter.context';
+import { hasAllDependencies } from '../Filter.utils';
+import { FilterValue } from '../Filter.types';
+
+type UseFilterAddProps = {
+  isMobile?: boolean;
+};
+
+const useFilterAdd = ({ isMobile }: UseFilterAddProps) => {
+  const { isOpen: isMenuOpen, onClose: closeMenu, onOpen: openMenu } = useDisclosure();
+
+  const { data, filtersDependOn, onFilterChange, setPopoverOpen, state } = useFilterContext();
+
+  const [selectedCategory, setSelectedCategory] = useState<string | undefined>();
+
+  const onCategorySelect = (category: string) => {
+    setSelectedCategory(category);
+    if (isMobile) {
+      closeMenu();
+    }
+  };
+
+  const onOpen = () => {
+    openMenu();
+
+    if (!isMobile) {
+      setPopoverOpen(true);
+      setSelectedCategory(undefined);
+    }
+  };
+
+  const onClose = () => {
+    setPopoverOpen(false);
+    closeMenu();
+    setSelectedCategory(undefined);
+  };
+
+  const onChange = (category: string, value: FilterValue) => {
+    onClose();
+    onFilterChange(category, value);
+  };
+
+  const stateKeys = Object.keys(state);
+
+  const categoryList = Object.keys(data).filter((category) => {
+    return !stateKeys.includes(category) && data[category].type === 'tag';
+  });
+
+  const isDisabled = !hasAllDependencies(stateKeys, filtersDependOn) || categoryList.length === 0;
+
+  return {
+    categoryList,
+    closeMenu,
+    isDisabled,
+    isMenuOpen,
+    onCategorySelect,
+    onChange,
+    onClose,
+    onOpen,
+    selectedCategory,
+    setSelectedCategory,
+    stateKeys,
+  };
+};
+
+export default useFilterAdd;