@bitrise/bitkit 12.70.0-alpha-filter-1.1 → 12.70.0-alpha-filter-2.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.70.0-alpha-filter-1.1",
+  "version": "12.70.0-alpha-filter-2.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -28,7 +28,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@floating-ui/react-dom-interactions": "^0.8.1",
-    "framer-motion": "^10.16.5",
+    "framer-motion": "^10.16.16",
     "luxon": "^3.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -40,38 +40,38 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.3",
-    "@babel/preset-env": "^7.23.3",
+    "@babel/core": "^7.23.6",
+    "@babel/preset-env": "^7.23.6",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@bitrise/eslint-plugin": "^2.3.2",
+    "@bitrise/eslint-plugin": "^2.3.3",
     "@commitlint/cli": "^17.8.0",
     "@commitlint/config-conventional": "^17.8.0",
-    "@google-cloud/storage": "^7.6.0",
+    "@google-cloud/storage": "^7.7.0",
     "@semantic-release/commit-analyzer": "^11.1.0",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-actions": "^7.5.3",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/addons": "^7.5.3",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-webpack5": "^7.5.3",
+    "@storybook/addon-actions": "^7.6.4",
+    "@storybook/addon-essentials": "^7.6.4",
+    "@storybook/addon-interactions": "^7.6.4",
+    "@storybook/addon-links": "^7.6.4",
+    "@storybook/addons": "^7.6.4",
+    "@storybook/blocks": "^7.6.4",
+    "@storybook/react": "^7.6.4",
+    "@storybook/react-webpack5": "^7.6.4",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.5.3",
+    "@storybook/theming": "^7.6.4",
     "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.1.0",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.8",
-    "@types/luxon": "^3.3.4",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
-    "@typescript-eslint/eslint-plugin": "^6.11.0",
-    "@typescript-eslint/parser": "^6.11.0",
+    "@types/jest": "^29.5.11",
+    "@types/luxon": "^3.3.7",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
     "axios": "^1.6.2",
-    "eslint": "^8.53.0",
+    "eslint": "^8.55.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
@@ -79,15 +79,15 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-testing-library": "^6.1.2",
+    "eslint-plugin-testing-library": "^6.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jsdom": "^22.1.0",
-    "prettier": "^3.1.0",
-    "react-hook-form": "^7.48.2",
-    "semantic-release": "^22.0.7",
-    "storybook": "^7.5.3",
+    "jsdom": "^23.0.1",
+    "prettier": "^3.1.1",
+    "react-hook-form": "^7.49.0",
+    "semantic-release": "^22.0.12",
+    "storybook": "^7.6.4",
     "ts-jest": "^29.1.1",
     "typescript": "^4.8.4"
   },

package/src/Components/Avatar/Avatar.tsx

@@ -12,7 +12,10 @@ const getInitials = (name: string) => {
   if (name.length < 3) {
     return name;
   }
-  return `${name.charAt(0)}${name.charAt(name.length - 1)}`;
+
+  const nameArray = Array.from(name);
+
+  return `${nameArray[0]}${nameArray[nameArray.length - 1]}`;
 };
 
 const Avatar = forwardRef<AvatarProps, 'span'>((props, ref) => (

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

@@ -9,23 +9,26 @@ export const FILTER_STORY_DATA: FilterData = {
   date_range: {
     categoryName: 'Date',
     categoryNamePlural: 'dates',
-    isPermanent: true,
+    type: 'dateRange',
   },
   pipeline: {
     categoryName: 'Pipeline',
     categoryNamePlural: 'Pipelines',
     options: FILTER_STORY_OPTIONS,
+    type: 'tag',
   },
   stage: {
     categoryName: 'Stage',
     categoryNamePlural: 'Stages',
     options: FILTER_STORY_OPTIONS,
     dependsOn: ['pipeline'],
+    type: 'tag',
   },
   workflow: {
     categoryName: 'Workflow',
     isMultiple: true,
     options: FILTER_STORY_OPTIONS,
+    type: 'tag',
   },
   branch: {
     options: [
@@ -34,16 +37,17 @@ export const FILTER_STORY_DATA: FilterData = {
       'master',
       'CI-2264-consolidate-other-provider-type-to-custom',
     ],
+    type: 'tag',
   },
   app: {
     categoryName: 'App',
-    isPermanent: true,
     options: ['46b6b9a78a418ee8', '32b14416be4b7b24', '0a248b278e135ea7'],
     optionsMap: {
       '46b6b9a78a418ee8': 'bitrise-website',
       '32b14416be4b7b24': 'bitkit',
       '0a248b278e135ea7': 'pipeline-service',
     },
+    type: 'select',
   },
   test_case: {
     categoryName: 'Test case',
@@ -56,16 +60,24 @@ export const FILTER_STORY_DATA: FilterData = {
       });
     },
     options: ['default 1', 'default 2', 'default 3'],
+    type: 'tag',
+  },
+  cache_type: {
+    options: ['gradle', 'bazel'],
+    type: 'switch',
   },
 };
 
 export const FILTER_STORY_INIT_STATE: FilterState = {
   pipeline: ['ipsum'],
   app: ['46b6b9a78a418ee8'],
+  cache_type: ['gradle'],
 };
 
 export const FILTER_STORY_CONTEXT: FilterContextType = {
   data: FILTER_STORY_DATA,
   setPopoverOpen: () => {},
   state: FILTER_STORY_INIT_STATE,
+  onFilterChange: () => {},
+  onFilterClear: () => {},
 };

package/src/Components/Filter/Filter.tsx

@@ -6,29 +6,47 @@ import Divider from '../Divider/Divider';
 import Icon from '../Icon/Icon';
 import { FilterContext } from './Filter.context';
 import { FilterStyle } from './Filter.theme';
-import { FilterContextType, FilterData, FilterState, FilterValue } from './Filter.types';
-import { getDependents, hasAllDependencies } from './Filter.utils';
+import {
+  FilterCategoryProps,
+  FilterContextType,
+  FilterData,
+  FilterState,
+  FilterType,
+  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'> {
   filtersDependOn?: string[];
   initialData: FilterData;
+  initialState: FilterState;
   isLoading?: boolean;
   onChange: (state: FilterState) => void;
   showSearch?: boolean;
-  state: FilterState;
 }
 
 const Filter = (props: FilterProps) => {
-  const { filtersDependOn, initialData, isLoading, onChange, showSearch, state, ...rest } = props;
+  const { filtersDependOn, initialData, initialState, isLoading, onChange, showSearch, ...rest } = props;
 
   const isInited = useRef<boolean>(false);
 
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
+  const state: FilterState = {};
+  Object.entries(initialState).forEach(([category, values]) => {
+    if (values?.length) {
+      const cleanValues = values.filter((v) => v !== null && v !== '' && v !== undefined);
+      if (cleanValues.length) {
+        state[category] = cleanValues;
+      }
+    }
+  });
+
   const [data] = useState<FilterData>(initialData);
   const [isPopoverOpen, setPopoverOpen] = useState<boolean>(false);
 
@@ -58,7 +76,7 @@ const Filter = (props: FilterProps) => {
     onChange(newState);
   };
 
-  const onClear = (category: string) => {
+  const onFilterClear = (category: string) => {
     onChange(deleteFromState(category, state));
   };
 
@@ -66,14 +84,19 @@ const Filter = (props: FilterProps) => {
     onChange({});
   };
 
-  const permanentCategories = Object.keys(data).filter(
-    (category) => data[category].isPermanent && category !== 'date_range',
-  );
+  const filters = {
+    search: {},
+    select: {},
+    switch: {},
+    dateRange: {},
+    tag: {},
+  } as Record<FilterType, Record<string, FilterCategoryProps>>;
 
-  const stateCategories = Object.keys(state).filter((c) => !['date_range', 'search'].includes(c));
-  const filteredStateCategories = stateCategories.filter((category) => !data[category].isPermanent);
+  Object.entries(data).forEach(([category, value]) => {
+    filters[value.type || 'tag'][category] = value;
+  });
 
-  const filterCategories = [...permanentCategories, ...filteredStateCategories];
+  const stateCategories = Object.keys(state).filter((c) => !['date_range', 'search'].includes(c));
 
   const showClearFilters = stateCategories.length > 0 || (state.search && state.search.length > 0);
 
@@ -82,10 +105,12 @@ const Filter = (props: FilterProps) => {
       data: initialData,
       filtersDependOn,
       isLoading,
+      onFilterChange,
+      onFilterClear,
       setPopoverOpen,
       state,
     }),
-    [filtersDependOn, isLoading, initialData, setPopoverOpen, state],
+    [filtersDependOn, isLoading, initialData, onFilterChange, onFilterClear, setPopoverOpen, state],
   );
 
   useEffect(() => {
@@ -102,27 +127,25 @@ const Filter = (props: FilterProps) => {
         </Modal>
         <Box sx={filterStyle.content}>
           <Icon name="Filter" sx={filterStyle.icon} />
-          {!!data.date_range && <FilterDate onChange={onFilterChange} onClear={onClear} value={state.date_range} />}
-          {filterCategories.length > 0 &&
-            filterCategories.map((category) => {
-              const { categoryName, categoryNamePlural, dependsOn, isPermanent, optionsMap } = data[category];
-              if (hasAllDependencies(filterCategories, dependsOn)) {
-                return (
-                  <FilterItem
-                    category={category}
-                    categoryName={categoryName}
-                    categoryNamePlural={categoryNamePlural}
-                    isPermanent={isPermanent}
-                    key={category}
-                    onChange={onFilterChange}
-                    onClear={onClear}
-                    optionsMap={optionsMap}
-                    value={state[category]}
-                  />
-                );
-              }
-              return null;
-            })}
+
+          {Object.keys(filters.switch).map((category) => (
+            <FilterSwitchAdapter category={category} key={category} />
+          ))}
+
+          {Object.keys(filters.dateRange).map((category) => (
+            <FilterDate category={category} key={category} />
+          ))}
+
+          {Object.keys(filters.select).map((category) => (
+            <FilterItem category={category} key={category} />
+          ))}
+          {Object.keys(filters.tag).map((category) => {
+            if (!state[category]) {
+              return;
+            }
+            return <FilterItem category={category} key={category} />;
+          })}
+
           <FilterAdd onChange={onFilterChange} />
         </Box>
         {(showClearFilters || showSearch) && (
@@ -142,13 +165,7 @@ const Filter = (props: FilterProps) => {
             {showClearFilters && showSearch && (
               <Divider orientation="vertical" size="1" variant="solid" flexShrink="0" />
             )}
-            {showSearch && (
-              <FilterSearch
-                onChange={onFilterChange}
-                onClear={onClear}
-                value={(state.Search && state.Search[0]) || ''}
-              />
-            )}
+            {showSearch && <FilterSearch onChange={onFilterChange} value={(state.Search && state.Search[0]) || ''} />}
           </Box>
         )}
       </Box>

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

@@ -1,5 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 
+export type FilterType = 'dateRange' | 'search' | 'select' | 'switch' | 'tag';
+
 export type FilterOptions = string[];
 export type FilterValue = string[];
 export type FilterOptionsMap = Record<string, string>;
@@ -11,10 +13,10 @@ export type FilterCategoryProps = {
   categoryNamePlural?: string;
   dependsOn?: string[];
   isMultiple?: boolean;
-  isPermanent?: boolean;
   onAsyncSearch?: FilterSearchCallback;
   options?: FilterOptions;
   optionsMap?: FilterOptionsMap;
+  type?: FilterType;
 };
 
 export type FilterData = Record<string, FilterCategoryProps>;
@@ -24,6 +26,8 @@ export interface FilterContextType {
   data: FilterData;
   filtersDependOn?: string[];
   isLoading?: boolean;
+  onFilterClear: (category: string) => void;
+  onFilterChange: (category: string, value: FilterValue) => void;
   setPopoverOpen: Dispatch<SetStateAction<boolean>>;
   state: FilterState;
 }

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

@@ -11,7 +11,7 @@ export const getDependents = (data: FilterData, categoryKey: string, filtersDepe
   const dependents: string[] = [];
   if (filtersDependOn && filtersDependOn.includes(categoryKey)) {
     Object.keys(data).forEach((category) => {
-      if (!data[category].isPermanent) {
+      if (data[category].type !== 'select') {
         dependents.push(category);
       }
     });

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

@@ -67,8 +67,8 @@ const FilterAdd = (props: FilterAddProps) => {
           <FilterForm category={selectedCategory} onChange={onFilterChange} onCancel={onClose} />
         ) : (
           Object.keys(data).map((category) => {
-            const { categoryName, dependsOn, isPermanent } = data[category];
-            if (isPermanent) {
+            const { categoryName, dependsOn, type } = data[category];
+            if (type !== 'tag') {
               return null;
             }
             return (

package/src/Components/Filter/FilterDate/FilterDate.tsx

@@ -9,30 +9,29 @@ import Text from '../../Text/Text';
 import Tooltip from '../../Tooltip/Tooltip';
 import { useFilterContext } from '../Filter.context';
 import { FilterStyle } from '../Filter.theme';
-import { FilterValue } from '../Filter.types';
 
 export type FilterDateProps = {
-  onChange: (category: string, value: FilterValue) => void;
-  onClear: (category: string) => void;
-  value: FilterValue;
+  category: string;
 };
 
 const FilterDate = (props: FilterDateProps) => {
-  const { onChange, onClear, value } = props;
+  const { category } = props;
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
-  const { isLoading, setPopoverOpen } = useFilterContext();
+  const { isLoading, onFilterChange, onFilterClear, setPopoverOpen, state } = useFilterContext();
 
   const { isOpen, onClose, onToggle } = useDisclosure();
 
+  const value = state[category];
+
   const onDateRangeApply = (range: DateRange) => {
     if (range.from && range.to) {
-      onChange('date_range', [String(range.from.toMillis()), String(range.to.toMillis())]);
+      onFilterChange('date_range', [String(range.from.toMillis()), String(range.to.toMillis())]);
     }
   };
 
   const onClearClick = () => {
-    onClear('date_range');
+    onFilterClear('date_range');
     onClose();
   };
 

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

@@ -9,24 +9,23 @@ import PopoverTrigger from '../../Popover/PopoverTrigger';
 import Text from '../../Text/Text';
 import Tooltip from '../../Tooltip/Tooltip';
 import { FilterStyle } from '../Filter.theme';
-import { FilterOptionsMap, FilterValue } from '../Filter.types';
+import { FilterValue } from '../Filter.types';
 import FilterForm from '../FilterForm/FilterForm';
 import { useFilterContext } from '../Filter.context';
 import { getOptionLabel } from '../Filter.utils';
 
 export type FilterItemProps = {
   category: string;
-  categoryName?: string;
-  categoryNamePlural?: string;
-  isPermanent?: boolean;
-  onChange: (category: string, value: FilterValue) => void;
-  onClear: (category: string) => void;
-  optionsMap?: FilterOptionsMap;
-  value: FilterValue;
 };
 
 const FilterItem = (props: FilterItemProps) => {
-  const { category, categoryName, categoryNamePlural, isPermanent, onChange, onClear, optionsMap, value } = props;
+  const { category } = props;
+
+  const { data, isLoading, onFilterChange, onFilterClear, setPopoverOpen, state } = useFilterContext();
+
+  const { categoryName, categoryNamePlural, optionsMap, type } = data[category];
+
+  const value = state[category];
 
   const pluralCategoryString = (categoryNamePlural || `${category}s`).toLowerCase();
 
@@ -34,8 +33,6 @@ const FilterItem = (props: FilterItemProps) => {
 
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
-  const { isLoading, setPopoverOpen } = useFilterContext();
-
   const onToggle = () => {
     togglePopover();
   };
@@ -45,9 +42,9 @@ const FilterItem = (props: FilterItemProps) => {
     setPopoverOpen(false);
   };
 
-  const onFilterChange = (newCategory: string, newValue: FilterValue) => {
+  const onChange = (newCategory: string, newValue: FilterValue) => {
     onClose();
-    onChange(newCategory, newValue);
+    onFilterChange(newCategory, newValue);
   };
 
   const getText = () => {
@@ -73,15 +70,15 @@ const FilterItem = (props: FilterItemProps) => {
           <Tooltip isDisabled={isLoading} label="Edit">
             <Text as="button" disabled={isLoading} onClick={onToggle} size="2" sx={filterStyle.tagEdit}>
               {getText()}
-              {isPermanent && <Icon name="ChevronDown" size="16" />}
+              {type === 'select' && <Icon name="ChevronDown" size="16" />}
             </Text>
           </Tooltip>
-          {!isPermanent && (
+          {type !== 'select' && (
             <IconButton
               aria-label={isLoading ? '' : 'Clear'}
               iconName="CloseSmall"
               isDisabled={isLoading}
-              onClick={() => onClear(category)}
+              onClick={() => onFilterClear(category)}
               size="small"
               variant="tertiary"
               sx={filterStyle.tagClear}
@@ -91,7 +88,7 @@ const FilterItem = (props: FilterItemProps) => {
         </Box>
       </PopoverTrigger>
       <PopoverContent>
-        <FilterForm category={category} categoryName={categoryName} onChange={onFilterChange} onCancel={onClose} />
+        <FilterForm category={category} categoryName={categoryName} onChange={onChange} onCancel={onClose} />
       </PopoverContent>
     </Popover>
   );

package/src/Components/Filter/FilterSearch/FilterSearch.tsx

@@ -15,12 +15,11 @@ import { FilterValue } from '../Filter.types';
 
 export interface FilterSearchProps extends Omit<InputProps, 'onChange' | 'value'> {
   onChange: (category: string, selected: FilterValue) => void;
-  onClear: (category: string) => void;
   value: string;
 }
 
 const FilterSearch = (props: FilterSearchProps) => {
-  const { onChange, onClear, value, ...rest } = props;
+  const { onChange, value, ...rest } = props;
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
   const [searchValue, setSearchValue] = useState(value);
@@ -31,7 +30,7 @@ const FilterSearch = (props: FilterSearchProps) => {
   };
 
   const onClearClick = () => {
-    onClear('search');
+    setSearchValue('');
   };
 
   useEffect(() => {
@@ -55,9 +54,11 @@ const FilterSearch = (props: FilterSearchProps) => {
         <Icon color="neutral.60" name="Magnifier" size="16" />
       </InputLeftElement>
       <Input {...inputProps} />
-      <InputRightElement>
-        <IconButton aria-label="Clear" iconName="CloseSmall" onClick={onClearClick} size="small" variant="tertiary" />
-      </InputRightElement>
+      {!!searchValue && (
+        <InputRightElement>
+          <IconButton aria-label="Clear" iconName="CloseSmall" onClick={onClearClick} size="small" variant="tertiary" />
+        </InputRightElement>
+      )}
     </InputGroup>
   );
 };

package/src/Components/Filter/FilterSwitchAdapter/FilterSwitchAdapter.tsx

@@ -0,0 +1,31 @@
+import { useFilterContext } from '../Filter.context';
+import FilterSwitch from '../FilterSwitch/FilterSwitch';
+import FilterSwitchGroup from '../FilterSwitch/FilterSwitchGroup';
+
+type FilterSwitchAdapterProps = {
+  category: string;
+};
+
+const FilterSwitchAdapter = (props: FilterSwitchAdapterProps) => {
+  const { category } = props;
+  const { data, onFilterChange, state } = useFilterContext();
+  const { options } = data[category];
+
+  if (!options?.length) {
+    return null;
+  }
+
+  const value = state[category]?.[0] || '';
+
+  return (
+    <FilterSwitchGroup onChange={(newValue) => onFilterChange(category, [newValue])} value={value}>
+      {options.map((opt) => (
+        <FilterSwitch key={opt} value={opt}>
+          {opt}
+        </FilterSwitch>
+      ))}
+    </FilterSwitchGroup>
+  );
+};
+
+export default FilterSwitchAdapter;

package/src/Components/Form/Input/Input.tsx

@@ -36,6 +36,7 @@ type UsedChakraInputProps = Pick<
   | 'min'
   | 'minLength'
   | 'pattern'
+  | 'placeholder'
   | 'step'
 >;
 export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {

package/src/Components/Form/Textarea/Textarea.tsx

@@ -17,7 +17,16 @@ import Tooltip, { TooltipProps } from '../../Tooltip/Tooltip';
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
 type UsedChakraTextProps = Pick<
   ChakraTextareaProps,
-  'onBlur' | 'onChange' | 'role' | 'name' | 'value' | 'autoComplete' | 'autoFocus' | 'maxLength' | 'minLength'
+  | 'onBlur'
+  | 'onChange'
+  | 'role'
+  | 'name'
+  | 'value'
+  | 'autoComplete'
+  | 'autoFocus'
+  | 'maxLength'
+  | 'minLength'
+  | 'placeholder'
 >;
 
 export interface TextareaProps extends UsedFormControlProps, UsedChakraTextProps {

package/src/Components/Select/Select.tsx

@@ -20,6 +20,7 @@ export interface SelectProps extends Omit<FormControlProps, 'label' | 'onBlur' |
   isLoading?: boolean;
   label?: ReactNode;
   name?: string;
+  placeholder?: ChakraSelectProps['placeholder'];
   onBlur?: ChakraSelectProps['onBlur'];
   onChange?: ChakraSelectProps['onChange'];
   size?: 'small' | 'medium';