@bitrise/bitkit 12.69.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.69.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/Button/Button.theme.ts

@@ -1,4 +1,4 @@
-const disabledStates = {
+export const disabledStates = {
   primary: {
     _disabled: {
       bgGradient: 'linear(to-b, neutral.80, neutral.70)',

package/src/Components/DatePicker/DatePicker.tsx

@@ -22,6 +22,7 @@ export interface DatePickerProps {
   selected?: DateRange;
   onApply?: (range: DateRange) => void;
   onClose: () => void;
+  onClear?: () => void;
   visible: boolean;
 }
 
@@ -30,7 +31,7 @@ export interface DatePickerProps {
  * range selection.
  */
 const DatePicker = (props: DatePickerProps) => {
-  const { children, onApply, onClose, visible, selectable, selected } = props;
+  const { children, onApply, onClose, onClear, visible, selectable, selected } = props;
 
   const { isMobile } = useResponsive();
   const today = DateTime.now().startOf('day');
@@ -63,7 +64,7 @@ const DatePicker = (props: DatePickerProps) => {
   };
 
   const { leftViewDate, rightViewDate, updateLeftViewDate, updateRightViewDate } = useViewDate({
-    initalView: dateFrom || selectable?.from,
+    initalView: dateFrom || selectable?.to,
   });
 
   const [preview, setPreview] = useState<'from' | 'to' | undefined>(undefined);
@@ -164,7 +165,7 @@ const DatePicker = (props: DatePickerProps) => {
                       />
                     )}
                   </Box>
-                  <DatePickerFooter onApply={handleApply} onClose={handleClose} selected={selected} />
+                  <DatePickerFooter onApply={handleApply} onClose={handleClose} onClear={onClear} selected={selected} />
                 </>
               )}
             </Box>

package/src/Components/DatePicker/DatePickerFooter.tsx

@@ -8,10 +8,12 @@ const DatePickerFooter = ({
   selected,
   onClose,
   onApply,
+  onClear,
 }: {
   selected?: DateRange;
   onClose: () => void;
   onApply: () => void;
+  onClear?: () => void;
 }) => {
   return (
     <Box
@@ -20,6 +22,11 @@ const DatePickerFooter = ({
       gridTemplateRows={['1.25rem 2rem', 'unset']}
       gap="24"
     >
+      {!!onClear && (
+        <Button size="small" variant="tertiary" width="fit-content" onClick={() => onClear()}>
+          Clear
+        </Button>
+      )}
       <Text alignSelf="center" justifySelf="center" size="2" color="text.secondary" gridColumn={['1', '2']}>
         {selected?.from?.toFormat('DD', { locale: 'en-US' })}
         {selected?.from || selected?.to ? ' - ' : undefined}

package/src/Components/Filter/Filter.context.tsx

@@ -0,0 +1,6 @@
+import { createContext } from '@chakra-ui/react-utils';
+import { FilterContextType } from './Filter.types';
+
+export const [FilterContext, useFilterContext] = createContext<FilterContextType>({
+  name: 'FilterContext',
+});

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

@@ -0,0 +1,83 @@
+import { FilterContextType, FilterData, FilterOptions, FilterState } from './Filter.types';
+
+export const FILTER_STORY_OPTIONS: FilterOptions =
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit Reiciendis reprehenderit laudantium laborum excepturi nam quae quod sunt expedita vel repellat cum cupiditate esse similique est ducimus provident eos numquam voluptas'.split(
+    ' ',
+  );
+
+export const FILTER_STORY_DATA: FilterData = {
+  date_range: {
+    categoryName: 'Date',
+    categoryNamePlural: 'dates',
+    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: [
+      'BIVS-2231-create-rename-to-utilisation-views',
+      'revert-11937-revert-11884-RA-2060-release-manager-role',
+      'master',
+      'CI-2264-consolidate-other-provider-type-to-custom',
+    ],
+    type: 'tag',
+  },
+  app: {
+    categoryName: 'App',
+    options: ['46b6b9a78a418ee8', '32b14416be4b7b24', '0a248b278e135ea7'],
+    optionsMap: {
+      '46b6b9a78a418ee8': 'bitrise-website',
+      '32b14416be4b7b24': 'bitkit',
+      '0a248b278e135ea7': 'pipeline-service',
+    },
+    type: 'select',
+  },
+  test_case: {
+    categoryName: 'Test case',
+    onAsyncSearch: (category, q) => {
+      console.log('onAsyncSearch', { category, q });
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(['found 1', 'found 2']);
+        }, 2000);
+      });
+    },
+    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.theme.ts

@@ -0,0 +1,161 @@
+import { createMultiStyleConfigHelpers, SystemStyleObject } from '@chakra-ui/styled-system';
+import { rem } from '../../utils/utils';
+import { disabledStates } from '../Button/Button.theme';
+
+export const parts = [
+  'container',
+  'icon',
+  'content',
+  'rightContent',
+  'item',
+  'tagEdit',
+  'tagClear',
+  'form',
+  'formHeader',
+  'formTitle',
+  'formBadge',
+  'formSearch',
+  'formInputGroup',
+  'formButtonGroup',
+  'searchInput',
+] as const;
+export type FilterStyle = Record<(typeof parts)[number], SystemStyleObject>;
+
+const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts);
+
+const FilterTheme = defineMultiStyleConfig({
+  baseStyle: {
+    container: {
+      background: 'neutral.100',
+      display: 'flex',
+      flexDirection: ['column', 'row'],
+      gap: '12',
+    },
+    icon: {
+      margin: '4',
+      color: 'neutral.60',
+    },
+    content: {
+      display: 'flex',
+      gap: '12',
+      flexWrap: 'wrap',
+    },
+    rightContent: {
+      display: 'flex',
+      gap: '16',
+      marginInlineStart: 'auto',
+    },
+    item: {
+      border: '1px solid',
+      borderColor: 'neutral.80',
+      borderRadius: '4',
+      display: 'flex',
+      width: 'fit-content',
+      background: 'neutral.100',
+      wordBreak: 'break-word',
+    },
+    tagEdit: {
+      color: 'purple.10',
+      display: 'flex',
+      gap: '8',
+      alignItems: 'center',
+      paddingBlock: '4',
+      paddingInlineStart: rem(11),
+      paddingInlineEnd: rem(7),
+      borderRadius: '4',
+      _hover: {
+        background: 'neutral.93',
+      },
+      _active: {
+        background: 'neutral.90',
+      },
+      _disabled: {
+        cursor: 'not-allowed',
+        ...disabledStates.tertiary,
+        _hover: disabledStates.tertiary,
+        _active: disabledStates.tertiary,
+      },
+    },
+    tagClear: {
+      color: 'purple.10',
+      borderRadius: '4',
+      border: 0,
+      minWidth: rem(27),
+      height: rem(30),
+      justifyContent: 'flex-start',
+      svg: {
+        marginInlineStart: '4',
+      },
+      _hover: {
+        background: 'neutral.93',
+      },
+      _active: {
+        background: 'neutral.90',
+      },
+      _disabled: {
+        cursor: 'not-allowed',
+        ...disabledStates.tertiary,
+        _hover: disabledStates.tertiary,
+        _active: disabledStates.tertiary,
+      },
+    },
+    form: {
+      background: 'neutral.100',
+      borderRadius: '8',
+      padding: '16',
+      minWidth: rem(352),
+      maxWidth: rem(480),
+    },
+    formHeader: {
+      display: 'flex',
+      gap: '8',
+      justifyContent: 'space-between',
+      marginBlockEnd: '8',
+    },
+    formTitle: {
+      color: 'purpe.10',
+      fontWeight: 'demiBold',
+    },
+    formBadge: {
+      backgroundColor: 'neutral.93',
+      color: 'neutral.40',
+      fontWeight: 'bold',
+      fontVariantNumeric: 'tabular-nums',
+    },
+    formSearch: {
+      marginBlockEnd: '16',
+    },
+    formInputGroup: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '12',
+      maxHeight: rem(196),
+      overflowY: 'scroll',
+      paddingInline: '12',
+      paddingBlock: rem(3),
+    },
+    formButtonGroup: {
+      display: 'flex',
+      justifyContent: 'flex-end',
+      marginBlockStart: '24',
+    },
+    searchInput: {
+      paddingLeft: '32',
+      paddingY: '4',
+      paddingRight: '8',
+      border: undefined,
+      borderRadius: '4',
+      borderColor: undefined,
+      boxShadow: undefined,
+      fontSize: '2',
+      _focusVisible: {
+        backgroundColor: 'neutral.95',
+      },
+      _hover: {
+        backgroundColor: 'neutral.95',
+      },
+    },
+  },
+});
+
+export default FilterTheme;

package/src/Components/Filter/Filter.tsx

@@ -0,0 +1,176 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Modal, ModalOverlay, useMultiStyleConfig } from '@chakra-ui/react';
+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 { 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;
+}
+
+const Filter = (props: FilterProps) => {
+  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);
+
+  const deleteFromState = (category: string, stateProp: FilterState): FilterState => {
+    const filteredState = { ...stateProp };
+    delete filteredState[category];
+
+    const dependents = getDependents(data, category, filtersDependOn);
+
+    dependents.forEach((dependent) => {
+      delete filteredState[dependent];
+    });
+
+    return filteredState;
+  };
+
+  const onFilterChange = (category: string, value: FilterValue) => {
+    if (isInited.current === false) {
+      return;
+    }
+    let newState = { ...state };
+    if (value && value.length > 0) {
+      newState[category] = value;
+    } else if (newState[category]) {
+      newState = deleteFromState(category, newState);
+    }
+    onChange(newState);
+  };
+
+  const onFilterClear = (category: string) => {
+    onChange(deleteFromState(category, state));
+  };
+
+  const onClearFilters = () => {
+    onChange({});
+  };
+
+  const filters = {
+    search: {},
+    select: {},
+    switch: {},
+    dateRange: {},
+    tag: {},
+  } as Record<FilterType, Record<string, FilterCategoryProps>>;
+
+  Object.entries(data).forEach(([category, value]) => {
+    filters[value.type || 'tag'][category] = value;
+  });
+
+  const stateCategories = Object.keys(state).filter((c) => !['date_range', 'search'].includes(c));
+
+  const showClearFilters = stateCategories.length > 0 || (state.search && state.search.length > 0);
+
+  const contextValue: FilterContextType = useMemo(
+    () => ({
+      data: initialData,
+      filtersDependOn,
+      isLoading,
+      onFilterChange,
+      onFilterClear,
+      setPopoverOpen,
+      state,
+    }),
+    [filtersDependOn, isLoading, initialData, onFilterChange, onFilterClear, setPopoverOpen, state],
+  );
+
+  useEffect(() => {
+    if (isInited.current === false) {
+      isInited.current = true;
+    }
+  }, [isInited.current]);
+
+  return (
+    <FilterContext value={contextValue}>
+      <Box sx={filterStyle.container} {...rest}>
+        <Modal isOpen={isPopoverOpen} onClose={() => {}}>
+          {isPopoverOpen && <ModalOverlay />}
+        </Modal>
+        <Box sx={filterStyle.content}>
+          <Icon name="Filter" sx={filterStyle.icon} />
+
+          {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) && (
+          <Box sx={filterStyle.rightContent}>
+            {showClearFilters && (
+              <Button
+                isDisabled={isLoading}
+                leftIconName="CloseSmall"
+                minWidth="7.5rem"
+                onClick={onClearFilters}
+                size="small"
+                variant="tertiary"
+              >
+                Clear filters
+              </Button>
+            )}
+            {showClearFilters && showSearch && (
+              <Divider orientation="vertical" size="1" variant="solid" flexShrink="0" />
+            )}
+            {showSearch && <FilterSearch onChange={onFilterChange} value={(state.Search && state.Search[0]) || ''} />}
+          </Box>
+        )}
+      </Box>
+    </FilterContext>
+  );
+};
+
+export default Filter;

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

@@ -0,0 +1,33 @@
+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>;
+
+export type FilterSearchCallback = (category: string, q: string) => Promise<FilterValue>;
+
+export type FilterCategoryProps = {
+  categoryName?: string;
+  categoryNamePlural?: string;
+  dependsOn?: string[];
+  isMultiple?: boolean;
+  onAsyncSearch?: FilterSearchCallback;
+  options?: FilterOptions;
+  optionsMap?: FilterOptionsMap;
+  type?: FilterType;
+};
+
+export type FilterData = Record<string, FilterCategoryProps>;
+export type FilterState = Record<string, FilterValue>;
+
+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

@@ -0,0 +1,33 @@
+import { FilterData, FilterOptionsMap } from './Filter.types';
+
+export const hasAllDependencies = (stateKeys: string[], dependsOn?: string[]): boolean => {
+  if (!dependsOn || dependsOn.length === 0) {
+    return true;
+  }
+  return dependsOn.every((key) => stateKeys.includes(key));
+};
+
+export const getDependents = (data: FilterData, categoryKey: string, filtersDependOn?: string[]): string[] => {
+  const dependents: string[] = [];
+  if (filtersDependOn && filtersDependOn.includes(categoryKey)) {
+    Object.keys(data).forEach((category) => {
+      if (data[category].type !== 'select') {
+        dependents.push(category);
+      }
+    });
+  } else {
+    Object.keys(data).forEach((category) => {
+      if (data[category].dependsOn?.includes(categoryKey)) {
+        dependents.push(category);
+      }
+    });
+  }
+  return dependents;
+};
+
+export const getOptionLabel = (option: string, optionsMap?: FilterOptionsMap) => {
+  if (!optionsMap) {
+    return option;
+  }
+  return optionsMap[option] || option;
+};