@bitrise/bitkit 13.62.1-alpha.1 → 13.63.1-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.62.1-alpha.1",
+  "version": "13.63.1-alpha.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -38,10 +38,10 @@
     "@floating-ui/react-dom-interactions": "^0.8.1",
     "@fontsource/figtree": "^5.0.20",
     "@fontsource/source-code-pro": "^5.0.18",
-    "framer-motion": "^11.1.7",
+    "framer-motion": "^11.1.8",
     "luxon": "^3.4.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-focus-lock": "^2.12.1",
     "react-imask": "^7.6.0",
     "react-markdown": "^9.0.1"
@@ -51,32 +51,32 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.4",
-    "@babel/preset-env": "^7.24.4",
+    "@babel/core": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
     "@bitrise/eslint-plugin": "^2.10.2",
     "@chakra-ui/cli": "^2.4.1",
-    "@google-cloud/storage": "^7.10.1",
-    "@storybook/addon-actions": "^8.0.9",
-    "@storybook/addon-essentials": "^8.0.9",
-    "@storybook/addon-interactions": "^8.0.9",
-    "@storybook/addon-links": "^8.0.9",
+    "@google-cloud/storage": "^7.11.0",
+    "@storybook/addon-actions": "^8.0.10",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-interactions": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
-    "@storybook/blocks": "^8.0.9",
-    "@storybook/react": "^8.0.9",
-    "@storybook/react-webpack5": "^8.0.9",
-    "@storybook/theming": "^8.0.9",
-    "@testing-library/dom": "^10.0.0",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^15.0.3",
+    "@storybook/blocks": "^8.0.10",
+    "@storybook/react": "^8.0.10",
+    "@storybook/react-webpack5": "^8.0.10",
+    "@storybook/theming": "^8.0.10",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.6",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/luxon": "^3.4.2",
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
-    "@typescript-eslint/eslint-plugin": "^7.7.1",
-    "@typescript-eslint/parser": "^7.7.1",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
     "axios": "^1.6.8",
     "eslint": "^8.57.0",
     "glob": "^10.3.12",
@@ -84,9 +84,9 @@
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^24.0.0",
     "prettier": "^3.2.5",
-    "react-hook-form": "^7.51.3",
-    "release-it": "^17.2.0",
-    "storybook": "^8.0.9",
+    "react-hook-form": "^7.51.4",
+    "release-it": "^17.2.1",
+    "storybook": "^8.0.10",
     "ts-jest": "^29.1.2",
     "typescript": "^5.4.5"
   },

package/src/Components/Avatar/Avatar.tsx

@@ -20,9 +20,4 @@ const Avatar = forwardRef<AvatarProps, 'span'>((props, ref) => (
   <ChakraAvatar getInitials={getInitials} {...props} ref={ref} />
 ));
 
-Avatar.defaultProps = {
-  borderRadius: '8',
-  size: '32',
-} as AvatarProps;
-
 export default Avatar;

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

@@ -5,6 +5,8 @@ const BadgeTheme = {
     paddingX: '8',
     paddingY: '4',
     textStyle: 'comp/badge/sm',
+    color: 'text/on-color',
+    backgroundColor: 'sys/primary/base',
   },
 };
 

package/src/Components/Badge/Badge.tsx

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

package/src/Components/Button/Button.tsx

@@ -15,7 +15,16 @@ export interface ButtonProps extends ChakraButtonProps {
  * The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
  */
 const Button = forwardRef<ButtonProps, 'button'>((props, ref) => {
-  const { as, isDanger, isDisabled, leftIconName, rightIconName, size = 'lg', variant, ...rest } = props;
+  const {
+    as = 'button',
+    isDanger,
+    isDisabled,
+    leftIconName,
+    rightIconName,
+    size = 'lg',
+    variant = 'primary',
+    ...rest
+  } = props;
   const properties: ChakraButtonProps = {
     as: isDisabled ? 'button' : as,
     isDisabled,
@@ -34,10 +43,4 @@ const Button = forwardRef<ButtonProps, 'button'>((props, ref) => {
   return <ChakraButton {...properties} ref={ref} />;
 });
 
-Button.defaultProps = {
-  as: 'button',
-  size: 'lg',
-  variant: 'primary',
-} as ButtonProps;
-
 export default Button;

package/src/Components/Card/Card.tsx

@@ -11,7 +11,7 @@ export interface CardProps extends BoxProps {
  * Basic container element with default box shadow and border radius.
  */
 const Card = forwardRef<CardProps, 'div'>((props, ref) => {
-  const { as, variant, withHover, ...rest } = props;
+  const { as = 'div', variant = 'elevated', withHover, ...rest } = props;
   const css = useStyleConfig('Card', { as, variant, withHover });
 
   const properties = {
@@ -24,9 +24,4 @@ const Card = forwardRef<CardProps, 'div'>((props, ref) => {
   return <Box __css={css} {...properties} ref={ref} />;
 });
 
-Card.defaultProps = {
-  as: 'div',
-  variant: 'elevated',
-} as CardProps;
-
 export default Card;

package/src/Components/CodeBlock/CodeBlock.tsx

@@ -34,8 +34,4 @@ const CodeBlock = ({ children, isCopiable, ...props }: CodeBlockProps) => {
   );
 };
 
-CodeBlock.defaultProps = {
-  size: 'lg',
-} as CodeBlockProps;
-
 export default CodeBlock;

package/src/Components/CodeSnippet/CodeSnippet.tsx

@@ -34,8 +34,4 @@ const CodeSnippet = (props: CodeSnippetProps) => {
   );
 };
 
-CodeSnippet.defaultProps = {
-  size: 'lg',
-} as CodeSnippetProps;
-
 export default CodeSnippet;

package/src/Components/ColorButton/ColorButton.tsx

@@ -10,7 +10,7 @@ export interface ColorButtonProps extends ChakraButtonProps {
  * The ColorButton component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
  */
 const ColorButton = forwardRef<ColorButtonProps, 'button'>((props, ref) => {
-  const { as, colorScheme, isDisabled, isLoading, ...rest } = props;
+  const { as = 'button', colorScheme, isDisabled, isLoading, ...rest } = props;
   const styles = {
     ...useStyleConfig('Button', { size: 'sm' }),
     ...useStyleConfig('ColorButton', { colorScheme }),
@@ -29,8 +29,4 @@ const ColorButton = forwardRef<ColorButtonProps, 'button'>((props, ref) => {
   return <ChakraButton {...properties} ref={ref} size="sm" />;
 });
 
-ColorButton.defaultProps = {
-  as: 'button',
-} as ColorButtonProps;
-
 export default ColorButton;

package/src/Components/Dialog/Dialog.tsx

@@ -34,16 +34,16 @@ export interface DialogProps
 const Dialog: ComponentWithAs<'section', DialogProps> = ({
   children,
   closeNotice,
-  isClosable,
+  isClosable = true,
   isOpen,
   onClose,
   onCloseComplete,
   returnFocusOnClose = true,
-  scrollBehavior,
-  size,
+  scrollBehavior = 'outside',
+  size = 'medium',
   title,
-  trapFocus,
-  variant,
+  trapFocus = true,
+  variant = 'default',
   ...rest
 }: DialogProps) => {
   const dialogSize = useBreakpointValue({ [BREAKPOINTS.MOBILE]: 'mobile', [BREAKPOINTS.TABLET]: size });
@@ -93,12 +93,4 @@ const Dialog: ComponentWithAs<'section', DialogProps> = ({
   );
 };
 
-Dialog.defaultProps = {
-  isClosable: true,
-  scrollBehavior: 'outside',
-  size: 'medium',
-  trapFocus: true,
-  variant: 'default',
-} as DialogProps;
-
 export default Dialog;

package/src/Components/Divider/Divider.tsx

@@ -1,7 +1,7 @@
 import { Divider as ChakraDivider, DividerProps as ChakraDividerProps } from '@chakra-ui/react';
 
 export interface DividerProps extends ChakraDividerProps {
-  orientation: 'horizontal' | 'vertical';
+  orientation?: 'horizontal' | 'vertical';
   size?: '1' | '2';
   variant?: 'dashed' | 'dotted' | 'solid';
 }
@@ -11,21 +11,19 @@ export interface DividerProps extends ChakraDividerProps {
  */
 const Divider = (props: DividerProps) => {
   const { orientation, size, ...rest } = props;
-  const properties: ChakraDividerProps = { ...rest, orientation };
+  const properties: ChakraDividerProps = {
+    color: 'separator.primary',
+    orientation: orientation || 'horizontal',
+    size: size || '1',
+    variant: 'solid',
+    ...rest,
+  };
   if (orientation === 'horizontal') {
     properties.borderBottomWidth = `${size}px`;
   } else {
     properties.borderLeftWidth = `${size}px`;
   }
-  return <ChakraDivider {...properties} />;
+  return <ChakraDivider as="hr" {...properties} />;
 };
 
-Divider.defaultProps = {
-  as: 'hr',
-  color: 'separator.primary',
-  orientation: 'horizontal',
-  size: '1',
-  variant: 'solid',
-} as DividerProps;
-
 export default Divider;

package/src/Components/Dropdown/Dropdown.tsx

@@ -271,7 +271,7 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
       readOnly,
       returnFocus = true,
       search,
-      size,
+      size = 'lg',
       value,
       ...props
     },
@@ -381,10 +381,6 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
   },
 );
 
-Dropdown.defaultProps = {
-  size: 'lg',
-} as DropdownProps<string | null>;
-
 export function typedDropdown<T>() {
   return {
     Dropdown: Dropdown as React.ForwardRefExoticComponent<DropdownProps<T> & React.RefAttributes<Element>>,

package/src/Components/Form/FileInput/FileInput.tsx

@@ -31,7 +31,7 @@ const FileInput = forwardRef<FileInputProps, 'div'>((props, ref) => {
     isDisabled,
     isInvalid,
     isRequired,
-    label,
+    label = 'Drag and drop file here or click to select',
     name,
     onChange,
     ...rest
@@ -147,8 +147,4 @@ const FileInput = forwardRef<FileInputProps, 'div'>((props, ref) => {
   );
 });
 
-FileInput.defaultProps = {
-  label: 'Drag and drop file here or click to select',
-};
-
 export default FileInput;

package/src/Components/IconButton/IconButton.tsx

@@ -21,17 +21,17 @@ export interface IconButtonProps extends ChakraIconButtonProps {
  */
 const IconButton = forwardRef<IconButtonProps, 'button'>((props, ref) => {
   const {
-    as,
+    as = 'button',
     iconName,
     iconSize,
     isDanger,
     isDisabled,
     isTooltipDisabled,
     label,
-    size,
-    tooltipCloseDelay,
+    size = 'lg',
+    tooltipCloseDelay = 0,
     tooltipProps,
-    variant,
+    variant = 'primary',
     ...rest
   } = props;
   const properties: ChakraIconButtonProps = {
@@ -55,11 +55,4 @@ const IconButton = forwardRef<IconButtonProps, 'button'>((props, ref) => {
   );
 });
 
-IconButton.defaultProps = {
-  as: 'button',
-  size: 'lg',
-  tooltipCloseDelay: 0,
-  variant: 'primary',
-} as IconButtonProps;
-
 export default IconButton;

package/src/Components/LightBox/LightBox.tsx

@@ -15,7 +15,7 @@ export interface LightBoxProps extends Omit<HTMLChakraProps<'section'>, 'scrollB
   onClose(): void;
 }
 
-const LightBox = ({ children, dataTestid, isOpen, onClose, size, ...rest }: LightBoxProps) => {
+const LightBox = ({ children, dataTestid, isOpen, onClose, size = 'large', ...rest }: LightBoxProps) => {
   const prefersReducedMotion = usePrefersReducedMotion({ ssr: false });
   const dialogSize = useBreakpointValue({ [BREAKPOINTS.MOBILE]: 'mobile', [BREAKPOINTS.TABLET]: size });
 
@@ -29,8 +29,4 @@ const LightBox = ({ children, dataTestid, isOpen, onClose, size, ...rest }: Ligh
   );
 };
 
-LightBox.defaultProps = {
-  size: 'large',
-} as LightBoxProps;
-
 export default LightBox;

package/src/Components/Link/Link.tsx

@@ -12,7 +12,7 @@ export interface LinkProps extends ChakraLinkProps {
  * Links are accessible elements used primarily for navigation.
  */
 const Link = forwardRef<LinkProps, 'a'>((props, ref) => {
-  const { as, isUnderlined, ...rest } = props;
+  const { as = 'a', isUnderlined, ...rest } = props;
   const properties: ChakraLinkProps = { as, ...rest };
   if (isUnderlined) {
     properties.textDecoration = 'underline';
@@ -20,12 +20,7 @@ const Link = forwardRef<LinkProps, 'a'>((props, ref) => {
   if (as === 'button') {
     properties.type = 'button';
   }
-  return <ChakraLink {...properties} ref={ref} />;
+  return <ChakraLink as={as} {...properties} ref={ref} />;
 });
 
-Link.defaultProps = {
-  as: 'a',
-  isUnderlined: false,
-} as LinkProps;
-
 export default Link;

package/src/Components/List/List.tsx

@@ -8,13 +8,9 @@ export interface ListProps extends ChakraListProps {
  * List is used to display list items. It renders a <ul> or <ol> element by default.
  */
 const List = forwardRef<ListProps, 'ul'>((props, ref) => {
-  const { isOrdered, ...rest } = props;
+  const { isOrdered, spacing = '8', ...rest } = props;
   const Component = isOrdered ? OrderedList : UnorderedList;
-  return <Component {...rest} ref={ref} />;
+  return <Component spacing={spacing} {...rest} ref={ref} />;
 });
 
-List.defaultProps = {
-  spacing: '8',
-};
-
 export default List;

package/src/Components/OverflowMenu/OverflowMenu.tsx

@@ -12,7 +12,7 @@ export interface OverflowMenuProps extends MenuProps {
   withPortal?: boolean;
 }
 
-const OverflowMenu = ({ buttonSize = 'sm', children, triggerLabel, withPortal }: OverflowMenuProps) => {
+const OverflowMenu = ({ buttonSize = 'sm', children, triggerLabel = 'Open menu', withPortal }: OverflowMenuProps) => {
   const Wrapper = withPortal ? Portal : Fragment;
   return (
     <Menu isLazy>
@@ -31,9 +31,4 @@ const OverflowMenu = ({ buttonSize = 'sm', children, triggerLabel, withPortal }:
   );
 };
 
-OverflowMenu.defaultProps = {
-  triggerLabel: 'Open menu',
-  withPortal: false,
-};
-
 export default OverflowMenu;

package/src/Components/Popover/Popover.tsx

@@ -8,11 +8,12 @@ export interface PopoverProps extends ChakraPopoverProps {
 }
 
 const Popover = (props: PopoverProps) => {
-  const { withArrow, ...rest } = props;
+  const { variant = 'light', withArrow, ...rest } = props;
   const popoverProps = {
     arrowPadding: 16,
     arrowSize: 16,
     gutter: withArrow ? 16 : 8,
+    variant,
     ...rest,
   };
   const ctx = useMemo<PopoverContextType>(
@@ -29,8 +30,4 @@ const Popover = (props: PopoverProps) => {
   );
 };
 
-Popover.defaultProps = {
-  variant: 'light',
-};
-
 export default Popover;

package/src/Components/Tag/Tag.tsx

@@ -25,27 +25,35 @@ export interface TagProps extends Omit<ChakraTagProps, 'colorScheme' | 'size' |
 }
 
 const Tag = forwardRef<TagProps, 'span'>((props, ref) => {
-  const { children, closeButtonTooltip, iconColor, iconName, isDisabled, isLoading, onClose, withIcon, ...tagProps } =
-    props;
+  const {
+    children,
+    closeButtonTooltip,
+    colorScheme = 'neutral',
+    iconColor,
+    iconName,
+    isDisabled,
+    isLoading,
+    onClose,
+    size = 'md',
+    withIcon,
+    ...tagProps
+  } = props;
   const style = useMultiStyleConfig('Tag', props);
 
   return (
     <ChakraTag
       aria-busy={isLoading}
       aria-disabled={isDisabled}
+      colorScheme={colorScheme}
       data-disabled={isDisabled || undefined}
       data-loading={isLoading || undefined}
+      size={size}
       sx={style.container}
       {...tagProps}
       ref={ref}
     >
       {(withIcon || !!iconName) && (
-        <Icon
-          __css={style.icon}
-          color={iconColor}
-          name={iconName || 'Tick'}
-          size={tagProps.size === 'sm' ? '16' : '24'}
-        />
+        <Icon __css={style.icon} color={iconColor} name={iconName || 'Tick'} size={size === 'sm' ? '16' : '24'} />
       )}
       <Text as="span" hasEllipsis sx={style.label}>
         {isLoading ? (
@@ -67,9 +75,4 @@ const Tag = forwardRef<TagProps, 'span'>((props, ref) => {
   );
 });
 
-Tag.defaultProps = {
-  colorScheme: 'neutral',
-  size: 'md',
-} as TagProps;
-
 export default Tag;

package/src/Components/Text/Text.tsx

@@ -10,8 +10,8 @@ export interface TextProps extends ChakraTextProps {
  * `Text` component is the used to render text and paragraphs within an interface. It renders a `<p>` tag by default.
  */
 const Text = forwardRef<TextProps, 'p'>((props, ref) => {
-  const { hasEllipsis, size, ...rest } = props;
-  const properties: ChakraTextProps = { size, ...rest };
+  const { hasEllipsis, ...rest } = props;
+  const properties: ChakraTextProps = { ...rest };
 
   if (hasEllipsis) {
     if (!properties.maxWidth) {
@@ -21,11 +21,7 @@ const Text = forwardRef<TextProps, 'p'>((props, ref) => {
     properties.whiteSpace = 'nowrap';
     properties.overflow = 'hidden';
   }
-  return <ChakraText {...properties} ref={ref} />;
+  return <ChakraText as="p" {...properties} ref={ref} />;
 });
 
-Text.defaultProps = {
-  as: 'p',
-} as TextProps;
-
 export default Text;

package/src/utils/storyUtils.ts

@@ -1,11 +0,0 @@
-/* eslint-disable */
-
-export const sortObjectByKey = (unordered: any) => {
-  return Object.keys(unordered)
-    .sort()
-    .reduce((obj, key) => {
-      /* @ts-ignore */
-      obj[key] = unordered[key];
-      return obj;
-    }, {});
-};