@bitrise/bitkit 9.7.3 → 9.7.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.7.3",
+  "version": "9.7.4",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -40,11 +40,11 @@
     "@types/react-transition-group": "^4.4.4",
     "classnames": "^2.3.1",
     "clipboard": "^2.0.10",
-    "framer-motion": "^6.3.2",
+    "framer-motion": "^6.3.3",
     "luxon": "^2.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-popper": "^2.2.5",
+    "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.2"
   },
   "peerDependencies": {
@@ -52,12 +52,12 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.9",
+    "@babel/core": "^7.17.10",
     "@bitrise/eslint-plugin": "^2.1.0",
     "@chakra-ui/cli": "^1.9.0",
-    "@commitlint/cli": "^16.2.3",
-    "@commitlint/config-conventional": "^16.2.1",
-    "@google-cloud/storage": "^5.19.3",
+    "@commitlint/cli": "^16.2.4",
+    "@commitlint/config-conventional": "^16.2.4",
+    "@google-cloud/storage": "^5.19.4",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",
@@ -89,7 +89,7 @@
     "@typescript-eslint/eslint-plugin": "^5.21.0",
     "@typescript-eslint/parser": "^5.21.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
-    "axios": "^0.27.1",
+    "axios": "^0.27.2",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.2.5",
     "babel-plugin-polyfill-corejs2": "^0.3.1",
@@ -103,7 +103,7 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.4.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "eslint-plugin-storybook": "^0.5.11",
     "eslint-plugin-testing-library": "^5.3.1",
     "fscreen": "^1.2.0",
@@ -124,11 +124,11 @@
     "react-router": "^5.3.1",
     "react-router-dom": "^5.3.1",
     "semantic-release": "^19.0.2",
-    "superstatic": "^7.1.0",
+    "superstatic": "^8.0.0",
     "ts-jest": "^27.1.4",
     "ts-node": "^10.7.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.6.3",
+    "typescript": "^4.6.4",
     "webpack": "^5.72.0"
   },
   "files": [

package/src/Components/Box/Box.stories.tsx

@@ -9,15 +9,12 @@ export default {
 const Template: ComponentStory<typeof Box> = ({ ...props }) => <Box {...props} />;
 
 export const WithProps = Template.bind({});
-const sx = {
-  backgroundColor: 'brand.primary',
-  color: 'neutral.95',
-  padding: '12',
-  width: '100%',
-};
 WithProps.args = {
   as: 'div',
   className: '',
   children: 'This is the Box',
-  sx,
+  backgroundColor: 'brand.primary',
+  color: 'neutral.95',
+  padding: '12',
+  width: '100%',
 };

package/src/Components/Box/Box.tsx

@@ -1,19 +1,14 @@
 import { Box as ChakraBox, BoxProps } from '@chakra-ui/react';
 
-export interface Props {
-  as?: BoxProps['as'];
-  children?: BoxProps['children'];
-  className?: BoxProps['className'];
-  sx?: BoxProps['sx'];
-}
-
 /**
  * Box is the most abstract component on top of which all other components are built. By default, it renders a div element.
  *
- * And this is our CSS-in-JS component, you can use this with `sx` prop to style anything.
+ * And this is our CSS-in-JS component, you can use this with style props.
  */
-const Box = (props: Props) => {
+const Box = (props: BoxProps) => {
   return <ChakraBox {...props} />;
 };
 
+export { BoxProps } from '@chakra-ui/react';
+
 export default Box;

package/src/Components/Button/Button.stories.tsx

@@ -3,7 +3,7 @@ import { sortObjectByKey } from '../../utils/storyUtils';
 import Button from './Button';
 
 export default {
-  title: 'Components/Button (WIP)',
+  title: 'Components/Button',
   component: Button,
 } as ComponentMeta<typeof Button>;
 
@@ -12,12 +12,10 @@ const Template: ComponentStory<typeof Button> = (props) => <Button {...props} />
 export const WithProps = Template.bind({});
 WithProps.args = sortObjectByKey({
   ...Button.defaultProps,
-  as: 'button',
-  className: '',
+  children: 'Button',
   isDanger: false,
   isDisabled: false,
-  href: '',
+  href: '#',
   target: '_self',
   type: 'button',
-  children: 'Button',
 });

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

@@ -2,10 +2,7 @@ const ButtonTheme = {
   baseStyle: {
     border: '0.0625rem solid',
     borderRadius: '4',
-    fontWeight: 'normal',
-    lineHeight: 3,
     _disabled: {
-      cursor: 'not-allowed',
       pointerEvents: 'none',
     },
   },
@@ -17,10 +14,6 @@ const ButtonTheme = {
       fontWeight: 'bold',
       _hover: {
         bgGradient: 'linear(to-b, purple.30, purple.10)',
-        _disabled: {
-          bgGradient: 'linear(to-b, neutral.80, neutral.70)',
-          borderColor: 'neutral.70',
-        },
       },
       _active: {
         bgGradient: 'linear(to-b, purple.10, purple.10)',
@@ -31,20 +24,15 @@ const ButtonTheme = {
       },
     },
     secondary: {
-      bgGradient: 'linear(to-b, neutral.100, neutral.95)',
+      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
       borderColor: 'neutral.90',
       color: 'purple.10',
       _hover: {
-        bgGradient: 'linear(to-b, neutral.95, neutral.93)',
-        _disabled: {
-          bgGradient: 'linear(to-b, neutral.100, neutral.95)',
-          borderColor: 'neutral.90',
-          color: 'neutral.70',
-        },
+        bgGradient: 'linear(to-b, neutral.93, neutral.93)',
       },
       _active: {
-        bgGradient: 'linear(to-b, purple.10, purple.10)',
-        color: 'neutral.95',
+        bgGradient: 'linear(to-b, neutral.90, neutral.90)',
+        borderColor: 'neutral.80',
       },
       _disabled: {
         color: 'neutral.70',
@@ -53,39 +41,31 @@ const ButtonTheme = {
     tertiary: {
       background: 'transparent',
       borderColor: 'transparent',
-      color: 'purple.50',
+      color: 'purple.10',
       _hover: {
-        background: 'purple.95',
-        _disabled: {
-          background: 'transparent',
-          borderColor: 'transparent',
-        },
+        background: 'neutral.93',
+        borderColor: 'neutral.93',
       },
       _active: {
-        background: 'purple.10',
-        color: 'neutral.95',
-        _disabled: {
-          color: 'neutral.70',
-        },
+        background: 'neutral.90',
+        borderColor: 'neutral.90',
       },
       _disabled: {
         color: 'neutral.70',
       },
     },
     'primary--danger': {
-      bgGradient: 'linear(to-b, red.40, red.30)',
-      borderColor: 'red.30',
-      color: 'neutral.100',
+      bgGradient: 'linear(to-b, red.50, red.30)',
+      borderColor: 'red.50',
+      color: 'neutral.95',
       fontWeight: 'bold',
       _hover: {
-        bgGradient: 'linear(to-b, red.30, red.20)',
-        _disabled: {
-          bgGradient: 'linear(to-b, neutral.80, neutral.70)',
-          borderColor: 'neutral.70',
-        },
+        bgGradient: 'linear(to-b, red.40, red.20)',
+        borderColor: 'red.40',
       },
       _active: {
         bgGradient: 'linear(to-b, red.20, red.20)',
+        borderColor: 'red.20',
       },
       _disabled: {
         bgGradient: 'linear(to-b, neutral.80, neutral.70)',
@@ -93,21 +73,16 @@ const ButtonTheme = {
       },
     },
     'secondary--danger': {
-      bgGradient: 'linear(to-b, neutral.95, neutral.100)',
+      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
       borderColor: 'neutral.90',
       color: 'red.50',
       _hover: {
         bgGradient: 'linear(to-b, red.93, red.93)',
         borderColor: 'red.70',
-        _disabled: {
-          bgGradient: 'linear(to-b, neutral.95, neutral.100)',
-          borderColor: 'neutral.90',
-          color: 'neutral.70',
-        },
       },
       _active: {
-        bgGradient: 'linear(to-b, red.30, red.30)',
-        color: 'neutral.100',
+        bgGradient: 'linear(to-b, red.90, red.90)',
+        borderColor: 'red.70',
       },
       _disabled: {
         color: 'neutral.70',
@@ -119,14 +94,11 @@ const ButtonTheme = {
       color: 'red.50',
       _hover: {
         background: 'red.93',
-        _disabled: {
-          background: 'transparent',
-          color: 'neutral.70',
-        },
+        borderColor: 'red.93',
       },
       _active: {
-        background: 'red.30',
-        color: 'neutral.100',
+        background: 'red.90',
+        borderColor: 'red.90',
       },
       _disabled: {
         color: 'neutral.70',
@@ -137,13 +109,13 @@ const ButtonTheme = {
     small: {
       minWidth: '32',
       height: '32',
-      fontSize: 2,
+      fontSize: '2',
       paddingX: '12',
     },
     medium: {
       minWidth: '48',
       height: '48',
-      fontSize: 3,
+      fontSize: '3',
       paddingX: '16',
     },
   },

package/src/Components/Button/Button.tsx

@@ -1,38 +1,41 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import { forwardRef } from 'react';
-import { Button as ChakraButton, ButtonProps } from '@chakra-ui/react';
+import { forwardRef, HTMLAttributeAnchorTarget } from 'react';
+import { Button as ChakraButton, ButtonProps as ChackraButtonProps } from '@chakra-ui/react';
 import Icon from '../../Old/Icon/Icon';
 import { TypeIconName } from '../../Old/Icon/tsx';
 
-export interface Props {
-  as?: 'a' | 'button';
+export interface LinkProps extends ChackraButtonProps {
+  as: 'a';
+  target?: HTMLAttributeAnchorTarget;
+}
+
+export interface ButtonProps extends ChackraButtonProps {
+  as?: 'button';
+}
+
+export type Props = {
   children: string;
   className?: string;
-  href?: string;
   isDanger?: boolean;
   isDisabled?: boolean;
   leftIconName?: TypeIconName;
   onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  ref?: ButtonProps['itemRef'];
+  ref?: ChackraButtonProps['itemRef'];
   rightIconName?: TypeIconName;
   size?: 'small' | 'medium';
-  sx?: ButtonProps['sx'];
-  target?: '_blank' | '_parent' | '_self' | '_top';
-  type?: ButtonProps['type'];
   variant?: 'primary' | 'secondary' | 'tertiary';
-}
+} & (LinkProps | ButtonProps);
 
 /**
  * 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.
- *
- * TODO:
- * - Change to Chakra powered Icon component
- * - ColorButtons
  */
 const Button = forwardRef<HTMLButtonElement, Props>((props: Props, ref) => {
   const { as, isDanger, leftIconName, rightIconName, size, variant, ...rest } = props;
-  const properties: ButtonProps = { as, size, ...rest };
-  properties.variant = isDanger ? `${variant}--danger` : variant;
+  const properties: ChackraButtonProps = {
+    as,
+    size,
+    variant: isDanger ? `${variant}--danger` : variant,
+    ...rest,
+  };
   if (leftIconName) {
     properties.leftIcon = <Icon name={leftIconName} />;
   }
@@ -42,18 +45,12 @@ const Button = forwardRef<HTMLButtonElement, Props>((props: Props, ref) => {
   if (leftIconName || rightIconName) {
     properties.iconSpacing = size === 'medium' ? '0.625rem' : '0.375rem';
   }
-  if (as === 'a') {
-    delete properties.type;
-  } else {
-    /* @ts-ignore */
-    delete properties.href;
-    /* @ts-ignore */
-    delete properties.target;
-  }
+
   return <ChakraButton ref={ref} {...properties} />;
 });
 
 Button.defaultProps = {
+  // eslint-disable-next-line react/default-props-match-prop-types
   as: 'button',
   size: 'medium',
   variant: 'primary',

package/src/Components/Card/Card.tsx

@@ -1,40 +1,25 @@
-import { Box, BoxProps } from '@chakra-ui/react';
 import { Radii } from '../../Foundations/Radii/Radii';
 import { Shadows } from '../../Foundations/Shadows/Shadows';
 import { Sizes } from '../../Foundations/Sizes/Sizes';
+import Box, { BoxProps } from '../Box/Box';
 
-export interface Props {
+export interface CardProps extends BoxProps {
   borderRadius?: keyof Radii;
   boxShadow?: keyof Shadows;
-  children?: BoxProps['children'];
-  className?: string;
   padding?: keyof Sizes;
-  sx?: BoxProps['sx'];
 }
 
 /**
  * Basic container element with default box shadow, border radius and padding.
  */
-const Card = (props: Props) => {
-  const { borderRadius, boxShadow, children, className, padding, sx } = props;
-  const style = {
-    backgroundColor: 'neutral.100',
-    borderRadius,
-    boxShadow,
-    padding,
-    ...sx,
-  };
-  return (
-    <Box className={className} sx={style}>
-      {children}
-    </Box>
-  );
+const Card = (props: CardProps) => {
+  return <Box {...props} />;
 };
 
 Card.defaultProps = {
   borderRadius: '12',
   boxShadow: 'medium',
   padding: '24',
-} as Props;
+} as CardProps;
 
 export default Card;

package/src/Components/Divider/Divider.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Box } from '@chakra-ui/react';
 import { sortObjectByKey } from '../../utils/storyUtils';
+import Box from '../Box/Box';
 import Divider from './Divider';
 
 export default {
@@ -9,7 +9,7 @@ export default {
 } as ComponentMeta<typeof Divider>;
 
 const Template: ComponentStory<typeof Divider> = ({ ...props }) => (
-  <Box sx={{ height: '64' }}>
+  <Box height="64">
     <Divider {...props} />
   </Box>
 );

package/src/Components/Divider/Divider.tsx

@@ -1,18 +1,17 @@
-import { Divider as ChakraDivider, DividerProps } from '@chakra-ui/react';
+import { Divider as ChakraDivider, DividerProps as ChakraDividerProps } from '@chakra-ui/react';
 
-export interface Props {
-  orientation?: DividerProps['orientation'];
+export interface DividerProps extends ChakraDividerProps {
+  orientation: 'horizontal' | 'vertical';
   size?: '1' | '2';
-  sx?: DividerProps['sx'];
   variant?: 'dashed' | 'dotted' | 'solid';
 }
 
 /**
  * Dividers are used to visually separate content in a list or group.
  */
-const Divider = (props: Props) => {
+const Divider = (props: DividerProps) => {
   const { orientation, size, ...rest } = props;
-  const properties: DividerProps = { ...rest, orientation };
+  const properties: ChakraDividerProps = { ...rest, orientation };
   if (orientation === 'horizontal') {
     properties.borderBottomWidth = `${size}px`;
   } else {
@@ -22,9 +21,10 @@ const Divider = (props: Props) => {
 };
 
 Divider.defaultProps = {
+  as: 'hr',
   orientation: 'horizontal',
   size: '1',
   variant: 'solid',
-} as Props;
+} as DividerProps;
 
 export default Divider;

package/src/Components/IconButton/IconButton.stories.tsx

@@ -12,6 +12,8 @@ const Template: ComponentStory<typeof IconButton> = ({ ...props }) => <IconButto
 export const WithProps = Template.bind({});
 WithProps.args = sortObjectByKey({
   ...IconButton.defaultProps,
+  'aria-label': 'This is the label',
   iconName: 'AddOns',
-  label: 'This is the label',
+  isDanger: false,
+  isDisabled: false,
 });

package/src/Components/IconButton/IconButton.tsx

@@ -3,13 +3,14 @@ import { IconButton as ChakraIconButton, IconButtonProps } from '@chakra-ui/reac
 import Icon from '../../Old/Icon/Icon';
 import { TypeIconName } from '../../Old/Icon/tsx';
 
-export interface Props {
+export interface Props extends IconButtonProps {
+  className?: string;
   iconName: TypeIconName;
-  label: IconButtonProps['aria-label'];
+  isDanger?: boolean;
+  isDisabled?: boolean;
   onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   size?: 'small' | 'medium';
-  sx?: IconButtonProps['sx'];
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'dangerPrimary' | 'dangerSecondary' | 'tertiaryDanger';
+  variant?: 'primary' | 'secondary' | 'tertiary';
 }
 
 /**
@@ -19,10 +20,10 @@ export interface Props {
  * - Change to Chakra powered Icon component
  */
 const IconButton = forwardRef<HTMLButtonElement, Props>((props: Props, ref) => {
-  const { iconName, label, ...rest } = props;
+  const { iconName, isDanger, variant, ...rest } = props;
   const properties: IconButtonProps = {
-    'aria-label': label,
     icon: <Icon name={iconName} />,
+    variant: isDanger ? `${variant}--danger` : variant,
     ...rest,
   };
   return <ChakraIconButton ref={ref} {...properties} />;

package/src/Components/Link/Link.tsx

@@ -1,21 +1,19 @@
-import { Link as ChakraLink, LinkProps } from '@chakra-ui/react';
-import { TextSizes } from '../Text/Text';
+import { HTMLAttributeAnchorTarget } from 'react';
+import { Link as ChakraLink, LinkProps as ChakraLinkProps } from '@chakra-ui/react';
+import { TextSizes } from '../../Foundations/Typography/Typography';
 
-export interface Props {
-  children: LinkProps['children'];
-  href: string;
+export interface LinkProps extends ChakraLinkProps {
   isUnderlined?: boolean;
   size?: TextSizes;
-  sx?: LinkProps['sx'];
-  target?: '_blank' | '_parent' | '_self' | '_top';
+  target?: HTMLAttributeAnchorTarget;
 }
 
 /**
  * Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink and semantically renders an `<a>`
  */
-const Link = (props: Props) => {
+const Link = (props: LinkProps) => {
   const { isUnderlined, ...rest } = props;
-  const properties: LinkProps = { ...rest };
+  const properties: ChakraLinkProps = { ...rest };
   properties.as = 'a';
   if (isUnderlined) {
     properties.textDecoration = 'underline';
@@ -25,6 +23,6 @@ const Link = (props: Props) => {
 
 Link.defaultProps = {
   isUnderlined: true,
-} as Props;
+} as LinkProps;
 
 export default Link;

package/src/Components/Menu/Menu.stories.tsx

@@ -30,7 +30,7 @@ export const WithButton: ComponentStory<typeof Menu> = () => (
 
 export const WithIconButton: ComponentStory<typeof Menu> = () => (
   <Menu>
-    <MenuButton as={IconButton} iconName="AddOnsColorTuorqouise" label="Open menu" />
+    <MenuButton as={IconButton} iconName="AddOnsColorTuorqouise" aria-label="Open menu" />
     <List />
   </Menu>
 );
@@ -40,14 +40,14 @@ export const WithButtonGroup: ComponentStory<typeof Menu> = () => (
     <ButtonGroup isAttached>
       <Button>Button</Button>
       <Menu>
-        <MenuButton as={IconButton} iconName="AddOnsColorTuorqouise" label="Open menu" />
+        <MenuButton as={IconButton} iconName="AddOnsColorTuorqouise" aria-label="Open menu" />
         <List />
       </Menu>
     </ButtonGroup>
   </HStack>
 );
 
-const Asd = (props: any) => {
+const CustomItem = (props: any) => {
   const menuProps = useMenuItem(props);
   const { item } = useStyleConfig('Menu') as any;
 
@@ -60,11 +60,11 @@ const Asd = (props: any) => {
   );
 };
 
-export const WithdCustomList: ComponentStory<typeof Menu> = () => (
+export const WithCustomListWIP: ComponentStory<typeof Menu> = () => (
   <Menu>
     <MenuButton as={Button}>Actions</MenuButton>
     <MenuList>
-      <Asd />
+      <CustomItem />
       <MenuItem iconName="AddOnsColorTuorqouise">Create a Copy</MenuItem>
       <MenuItem iconName="AddOnsColorTuorqouise">Mark as Draft</MenuItem>
       <MenuItem iconName="AddOnsColorTuorqouise">Delete</MenuItem>

package/src/Components/Menu/Menu.theme.ts

@@ -9,7 +9,8 @@ const MenuTheme: SystemStyleObject = {
       paddingY: '16',
     },
     item: {
-      padding: '12 32',
+      paddingY: '12',
+      paddingX: '16',
       _focus: {
         backgroundColor: 'neutral.95',
       },

package/src/Components/Menu/Menu.tsx

@@ -1,7 +1,7 @@
-import { Menu as ChakraMenu, MenuProps } from '@chakra-ui/react';
+import { Menu as ChakraMenu, MenuProps as ChakraMenuProps } from '@chakra-ui/react';
 
-export type Props = MenuProps;
+export type MenuProps = ChakraMenuProps;
 
-const Menu = (props: Props) => <ChakraMenu {...props} />;
+const Menu = (props: MenuProps) => <ChakraMenu {...props} />;
 
 export default Menu;