@bitrise/bitkit 9.21.1 → 9.23.0-alpha-chakra.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.21.1",
+  "version": "9.23.0-alpha-chakra.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

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

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

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

@@ -23,4 +23,5 @@ WithProps.args = sortObjectByKey({
   isDanger: false,
   isDisabled: false,
   isLoading: false,
+  isTooltipDisabled: false,
 });

package/src/Components/IconButton/IconButton.tsx

@@ -7,6 +7,7 @@ export interface IconButtonProps extends ChakraIconButtonProps {
   as?: 'a' | 'button';
   iconName: TypeIconName;
   isDanger?: boolean;
+  isTooltipDisabled?: boolean;
   label?: string;
   size?: 'small' | 'medium';
   tooltipCloseDelay?: number;
@@ -17,7 +18,7 @@ export interface IconButtonProps extends ChakraIconButtonProps {
  * IconButton composes the `Button` component except that it renders only an icon.
  */
 const IconButton = forwardRef<IconButtonProps, 'button'>((props, ref) => {
-  const { as, iconName, isDanger, isDisabled, label, tooltipCloseDelay, variant, ...rest } = props;
+  const { as, iconName, isDanger, isDisabled, isTooltipDisabled, label, tooltipCloseDelay, variant, ...rest } = props;
   const properties: ChakraIconButtonProps = {
     as: isDisabled ? 'button' : as,
     icon: <Icon name={iconName} />,
@@ -26,7 +27,12 @@ const IconButton = forwardRef<IconButtonProps, 'button'>((props, ref) => {
     ...rest,
   };
   return (
-    <Tooltip closeDelay={tooltipCloseDelay} label={label || rest['aria-label']} shouldWrapChildren={isDisabled}>
+    <Tooltip
+      closeDelay={tooltipCloseDelay}
+      isDisabled={isTooltipDisabled}
+      label={label || rest['aria-label']}
+      shouldWrapChildren={isDisabled}
+    >
       <ChakraIconButton {...properties} ref={ref} />
     </Tooltip>
   );

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

@@ -1,23 +1,35 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Box, ButtonGroup, HStack, MenuButton, MenuList, useMenuItem, useStyleConfig } from '@chakra-ui/react';
-import Button from '../Button/Button';
+import { forwardRef } from '@chakra-ui/react';
+import Badge from '../Badge/Badge';
+import Box from '../Box/Box';
+import Button, { ButtonProps } from '../Button/Button';
+import ButtonGroup from '../ButtonGroup/ButtonGroup';
 import IconButton from '../IconButton/IconButton';
+import Link from '../Link/Link';
+import Icon from '../Icon/Icon';
 import Menu from './Menu';
+import MenuButton from './MenuButton';
+import MenuList from './MenuList';
 import MenuItem from './MenuItem';
 
 export default {
-  title: 'Components/Menu (WIP)',
+  title: 'Components/Menu',
   component: Menu,
   subcomponents: { MenuButton, MenuList, MenuItem },
 } as ComponentMeta<typeof Menu>;
 
 const List = () => (
   <MenuList>
-    <MenuItem iconName="AddonsTuorqouise">Download</MenuItem>
-    <MenuItem iconName="AddonsTuorqouise">Create a Copy</MenuItem>
-    <MenuItem iconName="AddonsTuorqouise">Mark as Draft</MenuItem>
-    <MenuItem iconName="AddonsTuorqouise">Delete</MenuItem>
-    <MenuItem iconName="AddonsTuorqouise">Attend a Workshop</MenuItem>
+    <MenuItem iconName="Download">Download</MenuItem>
+    <MenuItem as="a" href="#" iconName="Link">
+      As a link
+    </MenuItem>
+    <MenuItem iconName="Pencil" isDisabled>
+      Disabled
+    </MenuItem>
+    <MenuItem iconName="DeleteNope" isDanger>
+      Danger version
+    </MenuItem>
   </MenuList>
 );
 
@@ -28,47 +40,51 @@ export const WithButton: ComponentStory<typeof Menu> = () => (
   </Menu>
 );
 
-export const WithIconButton: ComponentStory<typeof Menu> = () => (
+export const WithLink: ComponentStory<typeof Menu> = () => (
   <Menu>
-    <MenuButton as={IconButton} iconName="AddOnsColorTuorqouise" aria-label="Open menu" />
+    <MenuButton as={Link}>Open menu</MenuButton>
     <List />
   </Menu>
 );
 
 export const WithButtonGroup: ComponentStory<typeof Menu> = () => (
-  <HStack justifyContent="end">
+  <Box display="flex" justifyContent="flex-end">
     <ButtonGroup isAttached>
       <Button>Button</Button>
       <Menu>
-        <MenuButton as={IconButton} iconName="AddOnsColorTuorqouise" aria-label="Open menu" />
+        <MenuButton as={IconButton} iconName="AddonsTuorqouise" aria-label="Open menu" isTooltipDisabled />
         <List />
       </Menu>
     </ButtonGroup>
-  </HStack>
+  </Box>
 );
 
-const CustomItem = (props: any) => {
-  const menuProps = useMenuItem(props);
-  const { item } = useStyleConfig('Menu') as any;
+const TriggerButton = forwardRef<ButtonProps, 'button'>((props, ref) => (
+  <Button gap="12" ref={ref} rightIconName="DropdownArrows" variant="secondary" {...props}>
+    <span>Attempt #3</span>
+    <Badge>Latest</Badge>
+  </Button>
+));
 
+export const WithCustomItems: ComponentStory<typeof Menu> = () => {
   return (
-    <Box as="button" {...menuProps} type="button" sx={{ ...item, width: '100%' }}>
-      <span>eee</span>
-      <br />
-      <strong>aaa</strong>
-    </Box>
+    <Menu>
+      <MenuButton as={TriggerButton} />
+      <MenuList>
+        <MenuItem>
+          <Box display="flex" alignItems="center" gap="8">
+            <Icon color="green.50" name="BuildstatusSuccessful" />
+            <span>Successful</span>
+            <Badge>Latest</Badge>
+          </Box>
+        </MenuItem>
+        <MenuItem>
+          <Box display="flex" alignItems="center" gap="8">
+            <Icon color="red.50" name="BuildstatusFailed" />
+            <span>Failed</span>
+          </Box>
+        </MenuItem>
+      </MenuList>
+    </Menu>
   );
 };
-
-export const WithCustomListWIP: ComponentStory<typeof Menu> = () => (
-  <Menu>
-    <MenuButton as={Button}>Actions</MenuButton>
-    <MenuList>
-      <CustomItem />
-      <MenuItem iconName="AddonsTuorqouise">Create a Copy</MenuItem>
-      <MenuItem iconName="AddonsTuorqouise">Mark as Draft</MenuItem>
-      <MenuItem iconName="AddonsTuorqouise">Delete</MenuItem>
-      <MenuItem iconName="AddonsTuorqouise">Attend a Workshop</MenuItem>
-    </MenuList>
-  </Menu>
-);

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

@@ -1,5 +1,13 @@
 import type { SystemStyleObject } from '@chakra-ui/theme-tools';
 
+const disabledItem: SystemStyleObject = {
+  _disabled: {
+    backgroundColor: 'neutral.100',
+    color: 'neutral.70',
+    cursor: 'not-allowed',
+  },
+};
+
 const MenuTheme: SystemStyleObject = {
   baseStyle: {
     list: {
@@ -18,10 +26,13 @@ const MenuTheme: SystemStyleObject = {
       _focus: {
         backgroundColor: 'neutral.93',
         boxShadow: 'none',
+        ...disabledItem,
       },
       _active: {
         backgroundColor: 'neutral.90',
+        ...disabledItem,
       },
+      ...disabledItem,
     },
   },
 };

package/src/Components/Menu/Menu.tsx

@@ -3,6 +3,6 @@ import { Menu as ChakraMenu, MenuProps as ChakraMenuProps } from '@chakra-ui/rea
 
 export type MenuProps = ChakraMenuProps;
 
-const Menu = (props: MenuProps) => <ChakraMenu {...props} />;
+const Menu = (props: MenuProps) => <ChakraMenu matchWidth {...props} />;
 
 export default Menu;

package/src/Components/Menu/MenuButton.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { MenuButton as ChakraMenuButton, MenuButtonProps as ChakraMenuButtonProps, forwardRef } from '@chakra-ui/react';
+
+export type MenuButtonProps = ChakraMenuButtonProps;
+
+const MenuButton = forwardRef<MenuButtonProps, 'button'>((props, ref) => {
+  return <ChakraMenuButton {...props} ref={ref} />;
+});
+
+export default MenuButton;

package/src/Components/Menu/MenuItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MenuItem as ChakraMenuItem, MenuItemProps } from '@chakra-ui/react';
+import { MenuItem as ChakraMenuItem, MenuItemProps as ChakraMenuItemProps, forwardRef } from '@chakra-ui/react';
 import { Icon, TypeIconName } from '@bitrise/bitkit';
 
 const dangerStyle = {
@@ -13,22 +13,28 @@ const dangerStyle = {
   },
 };
 
-export type Props = {
-  children: string;
-  iconName: TypeIconName;
+export interface MenuItemProps extends ChakraMenuItemProps {
+  as?: 'a' | 'button';
+  iconName?: TypeIconName;
   isDanger?: boolean;
-  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-};
+}
 
-const MenuItem = (props: Props) => {
-  const { iconName, isDanger, ...rest } = props;
-  const properties: MenuItemProps = {
-    ...rest,
-    icon: <Icon name={iconName} />,
+const MenuItem = forwardRef<MenuItemProps, 'button'>((props, ref) => {
+  const { as, iconName, isDanger, isDisabled, ...rest } = props;
+  const properties: ChakraMenuItemProps = {
+    as: isDisabled ? 'button' : as,
     iconSpacing: '12',
-    sx: isDanger ? dangerStyle : undefined,
+    isDisabled,
+    ...rest,
   };
-  return <ChakraMenuItem {...properties} />;
-};
+  if (iconName) {
+    properties.icon = <Icon name={iconName} />;
+  }
+  // There is no variant for MenuItem
+  if (isDanger) {
+    properties.sx = dangerStyle;
+  }
+  return <ChakraMenuItem {...properties} ref={ref} />;
+});
 
 export default MenuItem;

package/src/Components/Menu/MenuList.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { MenuList as ChakraMenuList, MenuListProps as ChakraMenuListProps, forwardRef } from '@chakra-ui/react';
+
+export type MenuListProps = ChakraMenuListProps;
+
+const MenuList = forwardRef<MenuListProps, 'div'>((props, ref) => {
+  return <ChakraMenuList {...props} ref={ref} />;
+});
+
+export default MenuList;

package/src/Components/OverflowMenu/OverflowMenu.stories.tsx

@@ -1,5 +1,5 @@
-import { Flex } from '@chakra-ui/react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Box from '../Box/Box';
 import OverflowMenu from './OverflowMenu';
 import OverflowMenuItem from './OverflowMenuItem';
 
@@ -9,26 +9,21 @@ export default {
 } as ComponentMeta<typeof OverflowMenu>;
 
 export const WithProps: ComponentStory<typeof OverflowMenu> = (props) => (
-  <Flex direction="column" alignItems="flex-end" minHeight="400px">
+  <Box display="flex" flexDirection="column" alignItems="flex-end" minHeight="400px">
     <OverflowMenu {...props}>
       <OverflowMenuItem iconName="PlusAdd">Add member</OverflowMenuItem>
       <OverflowMenuItem iconName="MinusRemove">Remove member</OverflowMenuItem>
-      <OverflowMenuItem iconName="Filter">Assign access to apps</OverflowMenuItem>
-      <OverflowMenuItem iconName="Pencil">Rename group</OverflowMenuItem>
-      <OverflowMenuItem iconName="Trash" isDanger>
-        Delete group
+      <OverflowMenuItem as="a" iconName="Link" href="#">
+        As a link
+      </OverflowMenuItem>
+      <OverflowMenuItem iconName="Pencil" isDisabled>
+        Disabled item
       </OverflowMenuItem>
-    </OverflowMenu>
-    <OverflowMenu {...props}>
-      <OverflowMenuItem iconName="PlusAdd">Add member</OverflowMenuItem>
-      <OverflowMenuItem iconName="MinusRemove">Remove member</OverflowMenuItem>
-      <OverflowMenuItem iconName="Filter">Assign access to apps</OverflowMenuItem>
-      <OverflowMenuItem iconName="Pencil">Rename group</OverflowMenuItem>
       <OverflowMenuItem iconName="Trash" isDanger>
-        Delete group
+        Danger version
       </OverflowMenuItem>
     </OverflowMenu>
-  </Flex>
+  </Box>
 );
 WithProps.args = {
   ...OverflowMenu.defaultProps,

package/src/Components/OverflowMenu/OverflowMenu.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { MenuButton, MenuList, MenuListProps } from '@chakra-ui/react';
 import IconButton from '../IconButton/IconButton';
-import Menu from '../Menu/Menu';
+import Menu, { MenuProps } from '../Menu/Menu';
+import MenuButton from '../Menu/MenuButton';
+import MenuList, { MenuListProps } from '../Menu/MenuList';
 
-export interface OverflowMenuProps {
+export interface OverflowMenuProps extends MenuProps {
   children: MenuListProps['children'];
   triggerLabel?: string;
 }
@@ -11,7 +12,14 @@ export interface OverflowMenuProps {
 const OverflowMenu = ({ children, triggerLabel }: OverflowMenuProps) => {
   return (
     <Menu isLazy>
-      <MenuButton aria-label={triggerLabel} as={IconButton} iconName="MoreVertical" size="small" variant="tertiary" />
+      <MenuButton
+        aria-label={triggerLabel}
+        as={IconButton}
+        iconName="MoreVertical"
+        isTooltipDisabled
+        size="small"
+        variant="tertiary"
+      />
       <MenuList>{children}</MenuList>
     </Menu>
   );

package/src/Components/OverflowMenu/OverflowMenuItem.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import MenuItem, { Props as MenuItemProps } from '../Menu/MenuItem';
+import { forwardRef } from '@chakra-ui/react';
+import MenuItem, { MenuItemProps } from '../Menu/MenuItem';
 
 export interface OverflowMenuItemProps extends MenuItemProps {
   children: MenuItemProps['children'];
 }
 
-const OverflowMenuItem = (props: OverflowMenuItemProps) => {
-  return <MenuItem {...props} />;
-};
+const OverflowMenuItem = forwardRef<OverflowMenuItemProps, 'button'>((props, ref) => {
+  return <MenuItem {...props} ref={ref} />;
+});
 
 export default OverflowMenuItem;

package/src/Components/Select/Select.stories.tsx

@@ -0,0 +1,38 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { sortObjectByKey } from '../../utils/storyUtils';
+import Select from './Select';
+
+export default {
+  title: 'Components/Select',
+  component: Select,
+  argTypes: {
+    onChange: {
+      action: 'onChange event',
+    },
+  },
+} as ComponentMeta<typeof Select>;
+
+const args = {
+  ...Select.defaultProps,
+  isDisabled: false,
+  isInvalid: false,
+  isRequired: false,
+};
+
+const children = (
+  <>
+    <option value="all">All status</option>
+    <option value="successful">Successful</option>
+    <option value="failed">Failed</option>
+    <option value="aborted">Aborted</option>
+    <option value="on_hold">On hold</option>
+  </>
+);
+
+const Template: ComponentStory<typeof Select> = (props) => <Select {...props}>{children}</Select>;
+
+export const WithProps = Template.bind({});
+WithProps.args = sortObjectByKey({
+  ...args,
+  placeholder: 'Select build status',
+});

package/src/Components/Select/Select.theme.ts

@@ -0,0 +1,51 @@
+const SelectTheme = {
+  baseStyle: {
+    field: {
+      appearance: 'none',
+      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
+      border: '0.0625rem solid',
+      borderColor: 'neutral.90',
+      borderRadius: '4',
+      color: 'purple.10',
+      position: 'relative',
+      width: '100%',
+      _hover: {
+        bgGradient: 'linear(to-b, neutral.93, neutral.93)',
+      },
+      _active: {
+        bgGradient: 'linear(to-b, neutral.90, neutral.90)',
+        borderColor: 'neutral.80',
+      },
+      _disabled: {
+        color: 'neutral.70',
+        pointerEvents: 'none',
+      },
+    },
+    icon: {
+      right: '8',
+      _disabled: {
+        opacity: '0.2',
+      },
+    },
+  },
+  sizes: {
+    small: {
+      field: {
+        fontSize: '2',
+        height: '32',
+        paddingLeft: '12',
+        paddingRight: '32',
+      },
+    },
+    medium: {
+      field: {
+        fontSize: '3',
+        height: '48',
+        paddingLeft: '16',
+        paddingRight: '32',
+      },
+    },
+  },
+};
+
+export default SelectTheme;

package/src/Components/Select/Select.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Select as ChakraSelect, SelectProps as ChakraSelectProps } from '@chakra-ui/react';
+import Icon, { TypeIconName } from '../Icon/Icon';
+
+export interface SelectProps extends ChakraSelectProps {
+  iconName?: TypeIconName;
+  size?: 'small' | 'medium';
+}
+
+const Select = (props: SelectProps) => {
+  const { iconName = 'DropdownArrows', size, ...rest } = props;
+  const iconSize = size === 'medium' ? '24' : '16';
+  const properties: ChakraSelectProps = {
+    icon: <Icon name={iconName} fontSize={iconSize} size={iconSize} />,
+    size,
+    variant: 'select',
+    ...rest,
+  };
+  return <ChakraSelect {...properties} />;
+};
+
+Select.defaultProps = {
+  iconName: 'DropdownArrows',
+  size: 'medium',
+} as SelectProps;
+
+export default Select;

package/src/index.ts

@@ -65,3 +65,6 @@ export { default as IconButton } from './Components/IconButton/IconButton';
 
 export type { TooltipProps } from './Components/Tooltip/Tooltip';
 export { default as Tooltip } from './Components/Tooltip/Tooltip';
+
+export type { SelectProps } from './Components/Select/Select';
+export { default as Select } from './Components/Select/Select';

package/src/theme.ts

@@ -5,6 +5,7 @@ import ColorButton from './Components/ColorButton/ColorButton.theme';
 import Divider from './Components/Divider/Divider.theme';
 import Link from './Components/Link/Link.theme';
 import Menu from './Components/Menu/Menu.theme';
+import Select from './Components/Select/Select.theme';
 import Tabs from './Components/Tabs/Tabs.theme';
 import Text from './Components/Text/Text.theme';
 import Tooltip from './Components/Tooltip/Tooltip.theme';
@@ -56,6 +57,7 @@ const theme = {
     Divider,
     Link,
     Menu,
+    Select,
     Tabs,
     Text,
     Tooltip,