@bitrise/bitkit 13.9.0 → 13.10.1-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.9.0",
+  "version": "13.10.1-alpha.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -38,7 +38,7 @@
     "@floating-ui/react-dom-interactions": "^0.8.1",
     "@fontsource/figtree": "^5.0.18",
     "@fontsource/source-code-pro": "^5.0.16",
-    "framer-motion": "^11.0.6",
+    "framer-motion": "^11.0.8",
     "luxon": "^3.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -51,8 +51,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/preset-env": "^7.23.9",
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@bitrise/eslint-plugin": "^2.7.0",
@@ -73,7 +73,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/luxon": "^3.4.2",
-    "@types/react": "^18.2.60",
+    "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",

package/src/Components/Accordion/Accordion.theme.ts

@@ -0,0 +1,37 @@
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+
+const AccordionTheme: ComponentStyleConfig = {
+  baseStyle: {
+    button: {
+      _hover: {
+        background: 'background/hover',
+      },
+      _active: {
+        background: 'background/active',
+      },
+      alignItems: 'center',
+      display: 'flex',
+      justifyContent: 'space-between',
+      padding: '16',
+      width: '100%',
+    },
+    icon: {
+      height: '24',
+      marginLeft: '16',
+      width: '24',
+    },
+    item: {
+      borderTop: '1px solid',
+      borderTopColor: 'border/regular',
+    },
+    panel: {
+      padding: '16',
+    },
+    root: {
+      borderBottom: '1px solid',
+      borderBottomColor: 'border/regular',
+    },
+  },
+};
+
+export default AccordionTheme;

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

@@ -92,7 +92,7 @@ export const FILTER_STORY_DATA: FilterData = {
 export const FILTER_STORY_INIT_STATE: FilterState = {
   app: ['46b6b9a78a418ee8'],
   cache_type: ['gradle'],
-  pipeline: ['ipsum', 'dolor'],
+  pipeline: ['ipsum'],
 };
 
 export const FILTER_STORY_CONTEXT: FilterContextType = {

package/src/Components/Filter/Filter.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Modal, ModalOverlay, useMultiStyleConfig } from '@chakra-ui/react';
+import { isEqual } from '../../utils/utils';
 import Box, { BoxProps } from '../Box/Box';
 import Button from '../Button/Button';
 import Divider from '../Divider/Divider';
@@ -45,7 +46,7 @@ const Filter = (props: FilterProps) => {
     ...rest
   } = props;
 
-  const isInited = useRef<boolean>(false);
+  const initialState = useRef<FilterState>();
 
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
@@ -76,9 +77,6 @@ const Filter = (props: FilterProps) => {
   };
 
   const onFilterChange = (category: string, value: FilterValue) => {
-    if (isInited.current === false) {
-      return;
-    }
     let newState = { ...cleanState };
     if (value && value.length > 0) {
       newState[category] = value;
@@ -99,7 +97,7 @@ const Filter = (props: FilterProps) => {
   };
 
   const onClearFilters = () => {
-    onChange({});
+    onChange(initialState.current || {});
   };
 
   const filters = {
@@ -114,9 +112,7 @@ const Filter = (props: FilterProps) => {
     filters[value.type || 'tag'][category] = value;
   });
 
-  const stateCategories = Object.keys(cleanState).filter((c) => !['date_range', 'search'].includes(c));
-
-  const showClearFilters = stateCategories.length > 0 || (cleanState.search && cleanState.search.length > 0);
+  const showClearFilters = initialState.current && !isEqual(initialState.current, state);
 
   const contextValue: FilterContextType = useMemo(
     () => ({
@@ -132,10 +128,10 @@ const Filter = (props: FilterProps) => {
   );
 
   useEffect(() => {
-    if (isInited.current === false) {
-      isInited.current = true;
+    if (!initialState.current) {
+      initialState.current = cleanState;
     }
-  }, [isInited.current]);
+  }, []);
 
   return (
     <FilterContext value={contextValue}>
@@ -183,7 +179,7 @@ const Filter = (props: FilterProps) => {
             {showSearch && (
               <>
                 <Divider flexShrink="0" orientation="vertical" size="1" variant="solid" />
-                <FilterSearch onChange={onFilterChange} value={(cleanState.search && cleanState.search[0]) || ''} />
+                <FilterSearch onChange={onFilterChange} value={cleanState.search?.length ? cleanState.search[0] : ''} />
               </>
             )}
           </Box>

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

@@ -7,7 +7,6 @@ import {
   InputRightElement,
   useMultiStyleConfig,
 } from '@chakra-ui/react';
-import { useDebounce } from '../../../utils/utils';
 import Icon from '../../Icon/Icon';
 import IconButton from '../../IconButton/IconButton';
 import { FilterStyle } from '../Filter.theme';
@@ -23,7 +22,6 @@ const FilterSearch = (props: FilterSearchProps) => {
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
   const [searchValue, setSearchValue] = useState(value);
-  const debouncedSearchValue = useDebounce<string>(searchValue, 500);
 
   const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     setSearchValue(event.currentTarget.value);
@@ -34,8 +32,11 @@ const FilterSearch = (props: FilterSearchProps) => {
   };
 
   useEffect(() => {
-    onChange('search', debouncedSearchValue.length ? [debouncedSearchValue] : []);
-  }, [debouncedSearchValue]);
+    const delayInputTimeoutId = setTimeout(() => {
+      onChange('search', searchValue.length ? [searchValue] : []);
+    }, 500);
+    return () => clearTimeout(delayInputTimeoutId);
+  }, [searchValue, 500]);
 
   useEffect(() => {
     setSearchValue(value);

package/src/Components/components.theme.ts

@@ -1,4 +1,5 @@
 import Alert from './Alert/Alert.theme';
+import Accordion from './Accordion/Accordion.theme';
 import Avatar from './Avatar/Avatar.theme';
 import Badge from './Badge/Badge.theme';
 import Breadcrumb from './Breadcrumb/Breadcrumb.theme';
@@ -48,6 +49,7 @@ import FilterSwitch from './Filter/FilterSwitch/FilterSwitch.theme';
 import TagsInput from './Form/TagsInput/TagsInput.theme';
 
 const components = {
+  Accordion,
   Avatar,
   Badge,
   Breadcrumb,

package/src/utils/utils.ts

@@ -15,10 +15,24 @@ export function useObjectMemo<T extends object>(obj: T): T {
   }, Object.values(obj));
 }
 
-export function isEqual(a: number | string | number[] | string[], b: number | string | number[] | string[]) {
+export function isEqual(a: any, b: any) {
   if (Array.isArray(a) && Array.isArray(b)) {
     return a.length === b.length && [...a].every((val) => [...b].includes(val));
   }
+  if (typeof a === 'object' && typeof b === 'object') {
+    let isEqualObjects = true;
+    Object.keys(a).forEach((key: any) => {
+      if (!isEqual(a[key], b[key])) {
+        isEqualObjects = false;
+      }
+    });
+    Object.keys(b).forEach((key: any) => {
+      if (!isEqual(b[key], a[key])) {
+        isEqualObjects = false;
+      }
+    });
+    return isEqualObjects;
+  }
   return a === b;
 }