@bitrise/bitkit 12.83.0 → 12.84.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.83.0",
+  "version": "12.84.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -35,7 +35,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@floating-ui/react-dom-interactions": "^0.8.1",
-    "framer-motion": "^10.18.0",
+    "framer-motion": "^11.0.3",
     "luxon": "^3.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -51,7 +51,7 @@
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@bitrise/eslint-plugin": "^2.3.3",
+    "@bitrise/eslint-plugin": "^2.5.0",
     "@chakra-ui/cli": "^2.4.1",
     "@google-cloud/storage": "^7.7.0",
     "@storybook/addon-actions": "^7.6.10",
@@ -73,7 +73,7 @@
     "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^6.19.1",
     "@typescript-eslint/parser": "^6.19.1",
-    "axios": "^1.6.6",
+    "axios": "^1.6.7",
     "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^27.6.3",

package/src/Components/Accordion/Accordion.tsx

@@ -16,7 +16,7 @@ const Accordion = (props: AccordionProps) => {
   const { children, defaultIndex, ...rest } = props;
 
   return (
-    <ChakraAccordion allowMultiple reduceMotion={prefersReducedMotion} defaultIndex={defaultIndex} {...rest}>
+    <ChakraAccordion allowMultiple defaultIndex={defaultIndex} reduceMotion={prefersReducedMotion} {...rest}>
       {children}
     </ChakraAccordion>
   );

package/src/Components/Accordion/AccordionItem.tsx

@@ -1,12 +1,12 @@
 import { ReactNode } from 'react';
 import {
+  AccordionButton,
+  AccordionIcon,
   AccordionItem as ChakraAccordionItem,
   AccordionItemProps as ChakraAccordionItemProps,
-  AccordionButton,
   AccordionPanel,
-  AccordionIcon,
-  useAccordionStyles,
   CollapseProps,
+  useAccordionStyles,
 } from '@chakra-ui/react';
 
 export interface AccordionItemProps {
@@ -21,7 +21,7 @@ const AccordionItem = (props: AccordionItemProps) => {
   const styles = useAccordionStyles();
 
   return (
-    <ChakraAccordionItem sx={styles.item} id={id}>
+    <ChakraAccordionItem id={id} sx={styles.item}>
       {(renderProps) => (
         <>
           <AccordionButton sx={styles.button}>

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

@@ -21,100 +21,100 @@ type VariantObj = {
 };
 
 const buttonStyle = {
-  display: 'flex',
   alignItems: 'center',
+  borderBottom: '1px solid',
+  display: 'flex',
   justifyContent: 'space-between',
-  width: '100%',
   padding: '16',
-  borderBottom: '1px solid',
+  width: '100%',
 };
 
 const iconStyle = {
-  width: '24',
   height: '24',
   marginLeft: '16',
+  width: '24',
 };
 
 const colors: ColorObj = {
-  white: {
-    enabledButton: 'neutral.100',
-    disabledButton: 'neutral.100',
-    enabledIcon: 'currentColor',
-    disabledIcon: 'currentColor',
-    hover: 'purple.95',
-    border: 'neutral.93',
-  },
   gray: {
-    enabledButton: 'neutral.95',
+    border: 'neutral.93',
     disabledButton: 'neutral.95',
-    enabledIcon: 'currentColor',
     disabledIcon: 'currentColor',
+    enabledButton: 'neutral.95',
+    enabledIcon: 'currentColor',
     hover: 'purple.95',
-    border: 'neutral.93',
   },
   orange: {
-    enabledButton: 'orange.93',
+    border: 'orange.90',
     disabledButton: 'orange.93',
-    enabledIcon: 'orange.10',
     disabledIcon: 'orange.80',
+    enabledButton: 'orange.93',
+    enabledIcon: 'orange.10',
     hover: 'orange.93',
-    border: 'orange.90',
+  },
+  white: {
+    border: 'neutral.93',
+    disabledButton: 'neutral.100',
+    disabledIcon: 'currentColor',
+    enabledButton: 'neutral.100',
+    enabledIcon: 'currentColor',
+    hover: 'purple.95',
   },
 };
 
 const variants: VariantObj = {
-  legacy: {
-    borderRadius: '8',
-    marginBottom: '16',
-  },
   flat: {
     borderRadius: '0',
     marginBottom: '16',
   },
+  legacy: {
+    borderRadius: '8',
+    marginBottom: '16',
+  },
 };
 
 const LegacyBaseStyle: ({
   colorScheme,
   variant,
 }: Pick<StyleFunctionProps, 'colorScheme' | 'variant'>) => SystemStyleObject = ({ colorScheme, variant }) => ({
-  item: {
-    border: variants[variant].border ?? '1px solid',
+  disabledButton: {
+    ...buttonStyle,
+    background: colors[colorScheme].disabledButton,
     borderColor: colors[colorScheme].border,
     borderRadius: variants[variant].borderRadius,
-    marginBottom: variants[variant].marginBottom,
-    _last: {
-      marginBottom: 0,
-    },
+    cursor: 'default',
+  },
+  disabledIcon: {
+    ...iconStyle,
+    color: colors[colorScheme].disabledIcon,
+    opacity: '0.4',
+    transform: 'none',
   },
   enabledButton: {
     ...buttonStyle,
-    borderColor: colors[colorScheme].border,
-    borderRadius: variants[variant].borderRadius,
-    background: colors[colorScheme].enabledButton,
-    _hover: {
-      background: colors[colorScheme].hover,
-    },
     _expanded: {
       borderBottomLeftRadius: '0',
       borderBottomRightRadius: '0',
     },
-  },
-  disabledButton: {
-    ...buttonStyle,
-    borderRadius: variants[variant].borderRadius,
-    background: colors[colorScheme].disabledButton,
+    _hover: {
+      background: colors[colorScheme].hover,
+    },
+    background: colors[colorScheme].enabledButton,
     borderColor: colors[colorScheme].border,
-    cursor: 'default',
+    borderRadius: variants[variant].borderRadius,
   },
   enabledIcon: {
     ...iconStyle,
     color: colors[colorScheme].enabledIcon,
   },
-  disabledIcon: {
-    ...iconStyle,
-    opacity: '0.4',
-    transform: 'none',
-    color: colors[colorScheme].disabledIcon,
+  item: {
+    _last: {
+      marginBottom: 0,
+    },
+    border: variants[variant].border ?? '1px solid',
+    borderColor: colors[colorScheme].border,
+    borderRadius: variants[variant].borderRadius,
+    marginBottom: variants[variant].marginBottom,
   },
   panel: {
     padding: '16',
@@ -122,28 +122,28 @@ const LegacyBaseStyle: ({
 });
 
 const BaseStyle: () => SystemStyleObject = () => ({
-  item: {
-    borderTop: '1px solid',
-    borderTopColor: 'neutral.90',
-  },
   button: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    width: '100%',
-    padding: '16',
-    borderColor: 'neutral.93',
-    _hover: {
-      background: 'neutral.93',
-    },
     _active: {
       background: 'neutral.90',
     },
+    _hover: {
+      background: 'neutral.93',
+    },
+    alignItems: 'center',
+    borderColor: 'neutral.93',
+    display: 'flex',
+    justifyContent: 'space-between',
+    padding: '16',
+    width: '100%',
   },
   icon: {
-    width: '24',
     height: '24',
     marginLeft: '16',
+    width: '24',
+  },
+  item: {
+    borderTop: '1px solid',
+    borderTopColor: 'neutral.90',
   },
   panel: {
     padding: '16',

package/src/Components/AccordionLegacy/LegacyAccordion.tsx

@@ -28,7 +28,7 @@ const getItemIds = (props: LegacyAccordionProps) => {
  */
 const LegacyAccordion = (props: LegacyAccordionProps) => {
   const prefersReducedMotion = usePrefersReducedMotion({ ssr: false });
-  const { children, colorScheme, variant, onChange, ...rest } = props;
+  const { children, colorScheme, onChange, variant, ...rest } = props;
   const itemIds = getItemIds(props);
 
   const onAccordionChange = (indexes: ExpandedIndex) => {
@@ -45,9 +45,9 @@ const LegacyAccordion = (props: LegacyAccordionProps) => {
     <ChakraAccordion
       allowMultiple
       colorScheme={colorScheme}
-      variant={variant}
-      reduceMotion={prefersReducedMotion}
       onChange={onAccordionChange}
+      reduceMotion={prefersReducedMotion}
+      variant={variant}
       {...rest}
     >
       {children}

package/src/Components/AccordionLegacy/LegacyAccordionItem.tsx

@@ -1,11 +1,11 @@
-import { ReactNode, isValidElement } from 'react';
+import { isValidElement, ReactNode } from 'react';
 import {
+  AccordionButton,
+  AccordionIcon,
   AccordionItem as ChakraAccordionItem,
   AccordionItemProps as ChakraAccordionItemProps,
-  AccordionButton,
   AccordionPanel,
   AccordionPanelProps,
-  AccordionIcon,
   useAccordionStyles,
 } from '@chakra-ui/react';
 import Text from '../Text/Text';
@@ -21,7 +21,7 @@ const LegacyAccordionItem = (props: LegacyAccordionItemProps) => {
   const styles = useAccordionStyles();
 
   return (
-    <ChakraAccordionItem sx={styles.item} id={id}>
+    <ChakraAccordionItem id={id} sx={styles.item}>
       <AccordionButton sx={children ? styles.enabledButton : styles.disabledButton}>
         {isValidElement(buttonContent) ? buttonContent : <Text as="span">{buttonContent}</Text>}
         <AccordionIcon sx={children ? styles.enabledIcon : styles.disabledIcon} />

package/src/Components/Badge/Badge.theme.ts

@@ -1,14 +1,14 @@
 const BadgeTheme = {
   baseStyle: {
+    borderRadius: '4',
     display: 'inline-block',
-    paddingX: '8',
-    paddingTop: '6px',
-    paddingBottom: '5px',
     fontSize: '1',
-    lineHeight: '11px',
     fontWeight: 'bold',
+    lineHeight: '11px',
+    paddingBottom: '5px',
+    paddingTop: '6px',
+    paddingX: '8',
     textTransform: 'uppercase',
-    borderRadius: '4',
   },
 };
 

package/src/Components/Badge/Badge.tsx

@@ -8,8 +8,8 @@ export type BadgeProps = ChakraBadgeProps;
 const Badge = forwardRef<BadgeProps, 'span'>((props, ref) => <ChakraBadge {...props} ref={ref} />);
 
 Badge.defaultProps = {
-  color: 'neutral.100',
   backgroundColor: 'purple.40',
+  color: 'neutral.100',
 } as BadgeProps;
 
 export default Badge;

package/src/Components/Breadcrumb/Breadcrumb.theme.ts

@@ -2,33 +2,33 @@ import type { SystemStyleObject } from '@chakra-ui/theme-tools';
 
 const BreadcrumbTheme: SystemStyleObject = {
   baseStyle: {
-    list: {
-      display: 'flex',
-      alignItems: 'center',
-    },
     item: {
       _last: {
         minWidth: 0,
       },
     },
     link: {
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      color: 'purple.50',
       _activeLink: {
-        color: 'neutral.10',
         _hover: {
           textDecoration: 'none',
         },
+        color: 'neutral.10',
       },
       _hover: {
         textDecoration: 'underline',
       },
+      color: 'purple.50',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
     },
-    separator: {
+    list: {
+      alignItems: 'center',
       display: 'flex',
+    },
+    separator: {
       color: 'neutral.80',
+      display: 'flex',
     },
   },
 };

package/src/Components/Breadcrumb/Breadcrumb.tsx

@@ -1,8 +1,8 @@
 import { Children } from 'react';
 import {
   Breadcrumb as ChakraBreadcrumb,
-  BreadcrumbProps as ChakraBreadcrumbProps,
   BreadcrumbItem,
+  BreadcrumbProps as ChakraBreadcrumbProps,
   BreadcrumbSeparator,
   forwardRef,
 } from '@chakra-ui/react';

package/src/Components/Button/Button.theme.ts

@@ -23,8 +23,6 @@ export const disabledStates = {
 
 const ButtonTheme = {
   baseStyle: {
-    border: '0.0625rem solid',
-    borderRadius: '4',
     _disabled: {
       cursor: 'not-allowed',
     },
@@ -33,118 +31,120 @@ const ButtonTheme = {
         bg: 'initial',
       },
     },
+    border: '0.0625rem solid',
+    borderRadius: '4',
+  },
+  sizes: {
+    medium: {
+      fontSize: '3',
+      height: '48',
+      minWidth: '48',
+      paddingX: '16',
+    },
+    small: {
+      fontSize: '2',
+      height: '32',
+      minWidth: '32',
+      paddingX: '12',
+    },
   },
   variants: {
     primary: {
+      _active: {
+        bgGradient: 'linear(to-b, purple.10, purple.10)',
+        ...disabledStates.primary,
+      },
+      _hover: {
+        bgGradient: 'linear(to-b, purple.30, purple.10)',
+        ...disabledStates.primary,
+      },
       bgGradient: 'linear(to-b, purple.40, purple.20)',
       borderColor: 'purple.40',
       color: 'neutral.95',
       fontWeight: 'bold',
-      _hover: {
-        bgGradient: 'linear(to-b, purple.30, purple.10)',
+      ...disabledStates.primary,
+    },
+    'primary--danger': {
+      _active: {
+        bgGradient: 'linear(to-b, red.20, red.20)',
+        borderColor: 'red.20',
         ...disabledStates.primary,
       },
-      _active: {
-        bgGradient: 'linear(to-b, purple.10, purple.10)',
+      _hover: {
+        bgGradient: 'linear(to-b, red.40, red.20)',
+        borderColor: 'red.40',
         ...disabledStates.primary,
       },
+      bgGradient: 'linear(to-b, red.50, red.30)',
+      borderColor: 'red.50',
+      color: 'neutral.95',
+      fontWeight: 'bold',
       ...disabledStates.primary,
     },
     secondary: {
-      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
-      borderColor: 'neutral.90',
-      color: 'purple.10',
-      _hover: {
-        bgGradient: 'linear(to-b, neutral.93, neutral.93)',
-        ...disabledStates.secondary,
-      },
       _active: {
         bgGradient: 'linear(to-b, neutral.90, neutral.90)',
         borderColor: 'neutral.80',
         ...disabledStates.secondary,
       },
-      ...disabledStates.secondary,
-    },
-    tertiary: {
-      background: 'transparent',
-      borderColor: 'transparent',
-      color: 'purple.50',
-      _hover: {
-        background: 'neutral.95',
-        borderColor: 'neutral.95',
-        ...disabledStates.tertiary,
-      },
-      _active: {
-        background: 'neutral.90',
-        borderColor: 'neutral.90',
-        ...disabledStates.tertiary,
-      },
-      ...disabledStates.tertiary,
-    },
-    'primary--danger': {
-      bgGradient: 'linear(to-b, red.50, red.30)',
-      borderColor: 'red.50',
-      color: 'neutral.95',
-      fontWeight: 'bold',
       _hover: {
-        bgGradient: 'linear(to-b, red.40, red.20)',
-        borderColor: 'red.40',
-        ...disabledStates.primary,
-      },
-      _active: {
-        bgGradient: 'linear(to-b, red.20, red.20)',
-        borderColor: 'red.20',
-        ...disabledStates.primary,
+        bgGradient: 'linear(to-b, neutral.93, neutral.93)',
+        ...disabledStates.secondary,
       },
-      ...disabledStates.primary,
-    },
-    'secondary--danger': {
       bgGradient: 'linear(to-b, neutral.100, neutral.93)',
       borderColor: 'neutral.90',
-      color: 'red.50',
-      _hover: {
-        bgGradient: 'linear(to-b, red.93, red.93)',
+      color: 'purple.10',
+      ...disabledStates.secondary,
+    },
+    'secondary--danger': {
+      _active: {
+        bgGradient: 'linear(to-b, red.90, red.90)',
         borderColor: 'red.70',
         ...disabledStates.secondary,
       },
-      _active: {
-        bgGradient: 'linear(to-b, red.90, red.90)',
+      _hover: {
+        bgGradient: 'linear(to-b, red.93, red.93)',
         borderColor: 'red.70',
         ...disabledStates.secondary,
       },
+      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
+      borderColor: 'neutral.90',
+      color: 'red.50',
       ...disabledStates.secondary,
     },
-    'tertiary--danger': {
-      background: 'transparent',
-      borderColor: 'transparent',
-      color: 'red.50',
+    tertiary: {
+      _active: {
+        background: 'neutral.90',
+        borderColor: 'neutral.90',
+        ...disabledStates.tertiary,
+      },
       _hover: {
-        background: 'red.93',
-        borderColor: 'red.93',
+        background: 'neutral.95',
+        borderColor: 'neutral.95',
         ...disabledStates.tertiary,
       },
+      background: 'transparent',
+      borderColor: 'transparent',
+      color: 'purple.50',
+      ...disabledStates.tertiary,
+    },
+    'tertiary--danger': {
       _active: {
         background: 'red.90',
         borderColor: 'red.90',
         ...disabledStates.tertiary,
       },
+      _hover: {
+        background: 'red.93',
+        borderColor: 'red.93',
+        ...disabledStates.tertiary,
+      },
+      background: 'transparent',
+      borderColor: 'transparent',
+      color: 'red.50',
       ...disabledStates.tertiary,
     },
   },
-  sizes: {
-    small: {
-      minWidth: '32',
-      height: '32',
-      fontSize: '2',
-      paddingX: '12',
-    },
-    medium: {
-      minWidth: '48',
-      height: '48',
-      fontSize: '3',
-      paddingX: '16',
-    },
-  },
 };
 
 export default ButtonTheme;

package/src/Components/Card/Card.theme.ts

@@ -3,11 +3,6 @@ import { CardProps } from './Card';
 const CardTheme = {
   baseStyle: ({ as, withHover }: CardProps) => {
     return {
-      backgroundColor: 'neutral.100',
-      display: 'block',
-      width: '100%',
-      borderRadius: '8',
-      border: '1px solid',
       _focusVisible: {
         boxShadow: 'outline',
       },
@@ -18,16 +13,21 @@ const CardTheme = {
               borderColor: 'neutral.90',
             }
           : undefined,
+      backgroundColor: 'neutral.100',
+      border: '1px solid',
+      borderRadius: '8',
+      display: 'block',
+      width: '100%',
     };
   },
   variants: {
     elevated: {
-      boxShadow: 'medium',
       borderColor: 'neutral.93',
+      boxShadow: 'medium',
     },
     outline: {
-      boxShadow: 'none',
       borderColor: 'neutral.90',
+      boxShadow: 'none',
     },
   },
 };

package/src/Components/CloseButton/CloseButton.theme.ts

@@ -1,14 +1,14 @@
 const sizes = {
-  large: { w: '40', h: '40' },
-  medium: { w: '32', h: '32' },
-  small: { w: '24', h: '24' },
+  large: { h: '40', w: '40' },
+  medium: { h: '32', w: '32' },
+  small: { h: '24', w: '24' },
 };
 
 // eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle
 const _disabled = {
+  background: 'transparent',
   cursor: 'not-allowed',
   opacity: '0.4',
-  background: 'transparent',
 };
 
 const CloseButtonTheme = {
@@ -21,21 +21,21 @@ const CloseButtonTheme = {
   }) {
     if (colorScheme === 'neutral') {
       return {
-        borderRadius: '4',
+        _active: { bg: 'neutral.90' },
+        _hover: { bg: 'neutral.95' },
         bg: 'neutral.100',
+        borderRadius: '4',
         color: 'purple.10',
-        _hover: { bg: 'neutral.95' },
-        _active: { bg: 'neutral.90' },
         ...sizes[size],
         _disabled,
       };
     }
     return {
-      borderRadius: '4',
+      _active: { bg: `${colorScheme}.90` },
+      _hover: { bg: `${colorScheme}.93` },
       bg: `${colorScheme}.95`,
+      borderRadius: '4',
       color: `${colorScheme}.40`,
-      _hover: { bg: `${colorScheme}.93` },
-      _active: { bg: `${colorScheme}.90` },
       ...sizes[size],
       _disabled,
     };

package/src/Components/CloseButton/CloseButton.tsx

@@ -1,7 +1,7 @@
 import {
-  forwardRef,
   CloseButton as ChakraCloseButton,
   CloseButtonProps as ChakraCloseButtonProps,
+  forwardRef,
 } from '@chakra-ui/react';
 import Icon from '../Icon/Icon';
 import CloseButtonTheme from './CloseButton.theme';