@bitrise/bitkit 9.6.1 → 9.7.0-alpha-chakra.3

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

@@ -0,0 +1,74 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Box, ButtonGroup, HStack, MenuButton, MenuList, useMenuItem, useStyleConfig } from '@chakra-ui/react';
+import Button from '@/Components/Button/Button';
+import IconButton from '@/Components/IconButton/IconButton';
+import Menu from './Menu';
+import MenuItem from './MenuItem';
+
+export default {
+  title: 'Components/Menu (WIP)',
+  component: Menu,
+  subcomponents: { MenuButton, MenuList, MenuItem },
+} as ComponentMeta<typeof Menu>;
+
+const List = () => (
+  <MenuList>
+    <MenuItem iconName="AddOnsColorTuorqouise">Download</MenuItem>
+    <MenuItem iconName="AddOnsColorTuorqouise">Create a Copy</MenuItem>
+    <MenuItem iconName="AddOnsColorTuorqouise">Mark as Draft</MenuItem>
+    <MenuItem iconName="AddOnsColorTuorqouise">Delete</MenuItem>
+    <MenuItem iconName="AddOnsColorTuorqouise">Attend a Workshop</MenuItem>
+  </MenuList>
+);
+
+export const WithButton: ComponentStory<typeof Menu> = () => (
+  <Menu>
+    <MenuButton as={Button}>Actions</MenuButton>
+    <List />
+  </Menu>
+);
+
+export const WithIconButton: ComponentStory<typeof Menu> = () => (
+  <Menu>
+    <MenuButton as={IconButton} iconName="AddOnsColorTuorqouise" label="Open menu" />
+    <List />
+  </Menu>
+);
+
+export const WithButtonGroup: ComponentStory<typeof Menu> = () => (
+  <HStack justifyContent="end">
+    <ButtonGroup isAttached>
+      <Button>Button</Button>
+      <Menu>
+        <MenuButton as={IconButton} iconName="AddOnsColorTuorqouise" label="Open menu" />
+        <List />
+      </Menu>
+    </ButtonGroup>
+  </HStack>
+);
+
+const Asd = (props: any) => {
+  const menuProps = useMenuItem(props);
+  const { item } = useStyleConfig('Menu') as any;
+
+  return (
+    <Box as="button" {...menuProps} type="button" sx={{ ...item, width: '100%' }}>
+      <span>eee</span>
+      <br />
+      <strong>aaa</strong>
+    </Box>
+  );
+};
+
+export const WithdCustomList: ComponentStory<typeof Menu> = () => (
+  <Menu>
+    <MenuButton as={Button}>Actions</MenuButton>
+    <MenuList>
+      <Asd />
+      <MenuItem iconName="AddOnsColorTuorqouise">Create a Copy</MenuItem>
+      <MenuItem iconName="AddOnsColorTuorqouise">Mark as Draft</MenuItem>
+      <MenuItem iconName="AddOnsColorTuorqouise">Delete</MenuItem>
+      <MenuItem iconName="AddOnsColorTuorqouise">Attend a Workshop</MenuItem>
+    </MenuList>
+  </Menu>
+);

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

@@ -0,0 +1,23 @@
+import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+
+const MenuTheme: SystemStyleObject = {
+  baseStyle: {
+    list: {
+      backgroundColor: 'neutral.100',
+      borderRadius: '8',
+      filter: 'drop-shadow(0 0.125rem 0.3125rem rgba(199, 205, 207, 0.7))',
+      paddingY: '16',
+    },
+    item: {
+      padding: '12 32',
+      _focus: {
+        backgroundColor: 'neutral.95',
+      },
+      _hover: {
+        backgroundColor: 'neutral.95',
+      },
+    },
+  },
+};
+
+export default MenuTheme;

package/src/Components/Menu/Menu.tsx

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

package/src/Components/Menu/MenuItem.tsx

@@ -0,0 +1,18 @@
+import { MenuItem as ChakraMenuItem, MenuItemProps } from '@chakra-ui/react';
+import { Icon, TypeIconName } from '@bitrise/bitkit';
+
+export type Props = {
+  children: string;
+  iconName: TypeIconName;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+};
+
+const MenuItem = (props: Props) => {
+  const { iconName, ...rest } = props;
+  const properties: MenuItemProps = { ...rest };
+  properties.icon = <Icon name={iconName} />;
+  properties.iconSpacing = '16';
+  return <ChakraMenuItem {...properties} />;
+};
+
+export default MenuItem;

package/src/Components/Text/Text.stories.tsx

@@ -1,4 +1,5 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { sortObjectByKey } from '@/utils/storyUtils';
 import Text from './Text';
 
 export default {
@@ -9,7 +10,7 @@ export default {
 const Template: ComponentStory<typeof Text> = (props) => <Text {...props} />;
 
 export const WithProps = Template.bind({});
-WithProps.args = {
+WithProps.args = sortObjectByKey({
   ...Text.defaultProps,
   align: 'left',
   className: '',
@@ -17,4 +18,4 @@ WithProps.args = {
   fontWeight: 'normal',
   letterSpacing: 'normal',
   textTransform: 'none',
-};
+});

package/src/Components/Text/Text.tsx

@@ -13,6 +13,12 @@ type TextTags =
   | 'dt'
   | 'em'
   | 'figcaption'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
   | 'kbd'
   | 'li'
   | 'mark'
@@ -36,6 +42,7 @@ export interface Props {
   as?: TextTags;
   children?: TextProps['children'];
   className?: string;
+  color?: 'body' | 'secondary';
   /**
    * Font weight
    */
@@ -50,10 +57,10 @@ export interface Props {
 }
 
 /**
- * Basic `Text` component
+ * `Text` component is the used to render text and paragraphs within an interface. It renders a `<p>` tag by default.
  */
 const Text = (props: Props) => {
-  const { fontWeight, size, textTransform } = props;
+  const { color, fontWeight, size, textTransform } = props;
   const properties: TextProps = { ...props };
   if (size === '1' && (!textTransform || textTransform === 'none')) {
     properties.textTransform = 'uppercase';
@@ -61,6 +68,9 @@ const Text = (props: Props) => {
   if (!fontWeight && (size === '5' || size === '6' || size === '7' || size === '8')) {
     properties.fontWeight = 'bold';
   }
+  if (color) {
+    properties.color = `text.${color}`;
+  }
   return <ChakraText {...properties} />;
 };
 

package/src/Foundations/Colors/Colors.stories.mdx

@@ -1,8 +1,9 @@
 import { Meta } from '@storybook/addon-docs/blocks';
-import { Palette } from './Colors.examples';
+import DesignTokens from './DesignTokens';
+import Palette from './Palette';
 
 <Meta title="Foundations/Colors" />
 
-# Full palette
+<DesignTokens />
 
 <Palette />

package/src/Foundations/Colors/DesignTokens.tsx

@@ -0,0 +1,64 @@
+// import { ReactNode } from 'react';
+import { HStack, VStack } from '@chakra-ui/react';
+import Box from '@/Components/Box/Box';
+import Card from '@/Components/Card/Card';
+import Provider from '@/Components/Provider/Provider';
+import Text from '@/Components/Text/Text';
+
+const TOKENS = {
+  'brand.primary': 'Primary brand color',
+  'text.body': 'Default body text color',
+  'text.secondary': 'Secondary text color, for inline help and less important text',
+  'text.link': 'Default text link color',
+  'text.linkHover': 'Default text link hover color',
+  'separator.primary': 'Default color for separator lines and borders',
+} as any;
+
+const DesignTokens = () => {
+  const textWrapperStyle = {
+    marginBottom: '32',
+    maxWidth: '31.25rem',
+  };
+  return (
+    <Provider>
+      <Box sx={textWrapperStyle}>
+        <Text as="h2" size="8" sx={{ marginBottom: '24' }}>
+          Design tokens
+        </Text>
+        <Text>
+          Most of our color usage is defined in the Bitkit components themselves, but we also have some additional
+          colors that we frequently re-use outside of components too. We have defined these colors as design tokens.
+        </Text>
+        <Text color="secondary" size="2" sx={{ marginTop: '16' }}>
+          Design tokens are implemented as styles, which reference the color styles. They are managed by the Figma
+          plugin called “Theemo”.
+        </Text>
+      </Box>
+      <Card sx={{ marginBottom: '96' }}>
+        <VStack align="flex-start" as="ul" spacing="32">
+          {Object.keys(TOKENS).map((token: string) => (
+            <HStack as="li" spacing="32">
+              <Box
+                sx={{
+                  backgroundColor: token,
+                  height: '64',
+                  width: '10rem',
+                }}
+              />
+              <VStack align="flex-start">
+                <Text fontWeight="bold" size="4">
+                  {token}
+                </Text>
+                <Text color="secondary" size="2">
+                  {TOKENS[token]}
+                </Text>
+              </VStack>
+            </HStack>
+          ))}
+        </VStack>
+      </Card>
+    </Provider>
+  );
+};
+
+export default DesignTokens;

package/src/Foundations/Colors/{Colors.examples.tsx → Palette.tsx}

@@ -1,7 +1,10 @@
-import { Box, Divider, HStack, SystemStyleObject, VStack } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+import { HStack, SystemStyleObject, VStack } from '@chakra-ui/react';
+import Box from '@/Components/Box/Box';
+import Card from '@/Components/Card/Card';
+import Divider from '@/Components/Divider/Divider';
 import Provider from '@/Components/Provider/Provider';
 import Text from '@/Components/Text/Text';
-import Card from '@/Components/Card/Card';
 import colors, { Colors } from './Colors';
 
 const paletteKeys = ['neutral', 'purple', 'red', 'orange', 'yellow', 'green', 'turquoise', 'blue'] as Array<
@@ -10,11 +13,11 @@ const paletteKeys = ['neutral', 'purple', 'red', 'orange', 'yellow', 'green', 't
 
 const getTextColorFromShade = (backgroundColor: string, darkColor = 'text.body', lightColor = 'neutral.100') => {
   const shade = Number(backgroundColor.split('.')[1]);
-  return shade < 50 ? lightColor : darkColor;
+  return shade < 70 ? lightColor : darkColor;
 };
 
 const Shade = ({ children }: { children: number }) => {
-  const style = { paddingRight: '24', width: '80px', height: '80px', lineHeight: '80px' };
+  const style = { paddingRight: '24', width: '6rem', height: '6rem', lineHeight: '6rem' };
   return (
     <Text align="right" sx={style}>
       {children}
@@ -35,7 +38,10 @@ const InfoHeader = ({ description, shades, style, title }: InfoHeaderProps) => (
       <Text fontWeight="bold" size="4" sx={{ marginBottom: '8' }}>
         {title}
       </Text>
-      <Text size="2" sx={{ color: getTextColorFromShade(style.backgroundColor, 'text.secondary'), maxWidth: '190px' }}>
+      <Text
+        size="3"
+        sx={{ color: getTextColorFromShade(style.backgroundColor, 'text.secondary'), maxWidth: '11.875rem' }}
+      >
         {description}
       </Text>
     </Box>
@@ -47,31 +53,36 @@ const InfoHeader = ({ description, shades, style, title }: InfoHeaderProps) => (
   </HStack>
 );
 
-const Item = ({ backgroundColor, children }: { backgroundColor: string; children: string }) => {
+const Item = ({ backgroundColor, children }: { backgroundColor: string; children: ReactNode }) => {
   const style = {
     backgroundColor,
     color: 'transparent',
-    padding: '4',
-    height: '80px',
-    width: '80px',
+    padding: '8',
+    height: '6rem',
+    width: '6rem',
     _hover: { boxShadow: 'large', color: getTextColorFromShade(backgroundColor), transform: 'scale(1.1)' },
   } as SystemStyleObject;
   return (
     <Box sx={style}>
-      <Text size="1">{children}</Text>
+      <Text size="2" textTransform="lowercase">
+        {children}
+      </Text>
     </Box>
   );
 };
 
-export const Palette = () => (
+const Palette = () => (
   <Provider>
+    <Text as="h2" size="8">
+      Full palette
+    </Text>
     <Card sx={{ marginTop: '24' }}>
       <HStack spacing="0" sx={{ alignItems: 'flex-start', marginBottom: '16' }}>
         <VStack spacing="0">
           <InfoHeader
             description="These colors have sufficient contrast with any dark color."
             shades={[100, 95, 93]}
-            style={{ backgroundColor: 'neutral.95', marginTop: '29px' }}
+            style={{ backgroundColor: 'neutral.95', marginTop: '1.75rem' }}
             title="Light colors"
           />
           <InfoHeader
@@ -101,9 +112,9 @@ export const Palette = () => (
               {colorName}
             </Text>
             <Divider
+              size="1"
               sx={{
-                background: 'neutral.80',
-                height: '1',
+                borderColor: 'neutral.95',
               }}
             />
             {Object.keys(colors[colorName])
@@ -112,6 +123,9 @@ export const Palette = () => (
                 const backgroundColor = `${colorName}.${shade}`;
                 return (
                   <Item backgroundColor={backgroundColor} key={backgroundColor}>
+                    {backgroundColor}
+                    <br />
+                    <br />
                     {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
                     {/* @ts-ignore */}
                     {colors[colorName][shade]}
@@ -124,3 +138,5 @@ export const Palette = () => (
     </Card>
   </Provider>
 );
+
+export default Palette;

package/src/Foundations/Radii/Radii.examples.tsx

@@ -1,11 +1,15 @@
-import { Box, HStack, VStack } from '@chakra-ui/react';
+import { HStack, VStack } from '@chakra-ui/react';
+import Box from '@/Components/Box/Box';
+import Card from '@/Components/Card/Card';
 import Provider from '@/Components/Provider/Provider';
 import Text from '@/Components/Text/Text';
-import Card from '@/Components/Card/Card';
-import radii from './Radii.theme';
+import radii from './Radii';
 
 export const Radii = () => (
   <Provider>
+    <Text as="h2" size="8">
+      Radii (round corners)
+    </Text>
     <HStack
       as={Card}
       spacing="24"
@@ -15,7 +19,15 @@ export const Radii = () => (
     >
       {Object.keys(radii).map((size) => (
         <VStack key={size}>
-          <Box width="64" height="64" border="3px solid" borderColor="brand.primary" borderRadius={size} />
+          <Box
+            sx={{
+              border: '0.1875rem solid',
+              borderColor: 'brand.primary',
+              borderRadius: size,
+              height: '64',
+              width: '64',
+            }}
+          />
           <Text>{size}</Text>
         </VStack>
       ))}

package/src/Foundations/Radii/Radii.stories.mdx

@@ -3,6 +3,4 @@ import { Radii } from './Radii.examples';
 
 <Meta title="Foundations/Radii (round corners)" />
 
-# Radii (round corners)
-
 <Radii />

package/src/Foundations/Radii/Radii.ts

@@ -0,0 +1,10 @@
+const radii = {
+  '4': '0.25rem',
+  '8': '0.5rem',
+  '12': '0.75rem',
+  '16': '1rem',
+  '24': '1.5rem',
+};
+
+export type Radii = typeof radii;
+export default radii;

package/src/Foundations/Shadows/Shadows.examples.tsx

@@ -1,4 +1,5 @@
-import { Box, HStack, VStack } from '@chakra-ui/react';
+import { HStack, VStack } from '@chakra-ui/react';
+import Box from '@/Components/Box/Box';
 import Card from '@/Components/Card/Card';
 import Provider from '@/Components/Provider/Provider';
 import Text from '@/Components/Text/Text';
@@ -6,6 +7,9 @@ import shadows from './Shadows';
 
 export const Shadows = () => (
   <Provider>
+    <Text as="h2" size="8">
+      Shadows
+    </Text>
     <HStack
       as={Card}
       spacing="32"
@@ -15,7 +19,13 @@ export const Shadows = () => (
     >
       {Object.keys(shadows).map((key) => (
         <VStack key={key}>
-          <Box width="32" height="32" boxShadow={key} />
+          <Box
+            sx={{
+              width: 32,
+              height: 32,
+              boxShadow: key,
+            }}
+          />
           <Text>{key}</Text>
         </VStack>
       ))}

package/src/Foundations/Shadows/Shadows.stories.mdx

@@ -3,6 +3,4 @@ import { Shadows } from './Shadows.examples';
 
 <Meta title="Foundations/Shadows" />
 
-# Shadows
-
 <Shadows />

package/src/Foundations/Shadows/Shadows.ts

@@ -1,8 +1,8 @@
 const shadows = {
-  small: '0 2px 4px 0 rgba(0, 0, 0, 0.06)',
-  medium: '0 2px 12px 0 rgba(0, 0, 0, 0.06)',
-  large: '0 2px 24px 0 rgba(0, 0, 0, 0.08)',
-  inner: '0 2px 3px 0 rgba(0, 0, 0, 0.1) inset',
+  small: '0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.06)',
+  medium: '0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.06)',
+  large: '0 0.125rem 1.5rem 0 rgba(0, 0, 0, 0.08)',
+  inner: '0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset',
   none: 'none',
 };
 

package/src/Foundations/Sizes/Sizes.examples.tsx

@@ -1,4 +1,5 @@
-import { Box, HStack, VStack } from '@chakra-ui/react';
+import { HStack, VStack } from '@chakra-ui/react';
+import Box from '@/Components/Box/Box';
 import Card from '@/Components/Card/Card';
 import Provider from '@/Components/Provider/Provider';
 import Text from '@/Components/Text/Text';
@@ -6,6 +7,9 @@ import sizes from './Sizes';
 
 export const Sizes = () => (
   <Provider>
+    <Text as="h2" size="8">
+      Sizes
+    </Text>
     <HStack
       as={Card}
       spacing="24"
@@ -16,7 +20,13 @@ export const Sizes = () => (
     >
       {Object.keys(sizes).map((size) => (
         <VStack key={size}>
-          <Box width={size} height={size} background="brand.primary" />
+          <Box
+            sx={{
+              width: size,
+              height: size,
+              background: 'brand.primary',
+            }}
+          />
           <Text>{size}</Text>
         </VStack>
       ))}

package/src/Foundations/Sizes/Sizes.stories.mdx

@@ -3,6 +3,4 @@ import { Sizes } from './Sizes.examples';
 
 <Meta title="Foundations/Sizes" />
 
-# Sizes
-
-<Sizes />
+<Sizes />

package/src/Foundations/Sizes/Sizes.ts

@@ -1,14 +1,14 @@
 const sizes = {
-  '4': '4px',
-  '8': '8px',
-  '12': '12px',
-  '16': '16px',
-  '24': '24px',
-  '32': '32px',
-  '48': '48px',
-  '64': '64px',
-  '96': '96px',
-  '128': '128px',
+  '4': '0.25rem',
+  '8': '0.5rem',
+  '12': '0.75rem',
+  '16': '1rem',
+  '24': '1.5rem',
+  '32': '2rem',
+  '48': '3rem',
+  '64': '4rem',
+  '96': '6rem',
+  '128': '8rem',
 };
 
 export type Sizes = typeof sizes;

package/src/Foundations/Typography/Typography.examples.tsx

@@ -13,8 +13,8 @@ const style = {
     _before: {
       content: '"Size " counter(sizes) ":"',
       display: 'inline-block',
-      minWidth: '150px',
-      marginRight: '16px',
+      minWidth: '9.375rem',
+      marginRight: '16',
       textAlign: 'left',
     },
   },
@@ -22,6 +22,15 @@ const style = {
 
 export const FontSizes = () => (
   <Provider>
+    <Text as="h2" size="8">
+      TT Norm Pro
+    </Text>
+    <Text sx={{ marginTop: '8' }}>
+      <strong>Font weight:</strong> Normal, <strong>Bold</strong>
+    </Text>
+    <Text sx={{ marginTop: '8' }}>
+      <strong>Text transform:</strong> None, UPPERCASE
+    </Text>
     <Card sx={{ marginTop: '24' }}>
       <VStack as="ol" spacing={24} sx={style}>
         <Text as="li" size="1">

package/src/Foundations/Typography/Typography.stories.mdx

@@ -3,12 +3,6 @@ import { FontSizes } from './Typography.examples';
 
 <Meta title="Foundations/Typography" />
 
-# Typography
-
-**Font:** TT Norms Pro
-
-**Weights:** 400(regular), **700(bold)**
-
 <FontSizes />
 
 [Go to `Text` component](?path=/story/components-text--with-props)

package/src/Foundations/Typography/Typography.ts

@@ -4,28 +4,28 @@ const typography = {
     mono: `"Source Code Pro Bitrise", monospace`,
   },
   fontSizes: {
-    1: '11px',
-    2: '14px',
-    3: '16px',
-    4: '19px',
-    5: '24px',
-    6: '30px',
-    7: '36px',
-    8: '48px',
+    1: '0.6875rem',
+    2: '0.875rem',
+    3: '1rem',
+    4: '1.1875rem',
+    5: '1.5rem',
+    6: '1.875rem',
+    7: '2.25rem',
+    8: '3rem',
   },
   fontWeights: {
     normal: 400,
     bold: 700,
   },
   lineHeights: {
-    1: '16px',
-    2: '20px',
-    3: '24px',
-    4: '28px',
-    5: '36px',
-    6: '40px',
-    7: '48px',
-    8: '60px',
+    1: '1rem',
+    2: '1.25rem',
+    3: '1.5rem',
+    4: '1.75rem',
+    5: '2.25rem',
+    6: '2.5rem',
+    7: '3rem',
+    8: '3.75rem',
   },
 };
 

package/src/{AddonBeam → Old/AddonBeam}/AddonBeam.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import dataAtIds from '../dataAtIds.json';
 import { TypeIconName } from '../Icon/tsx';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 import Hamburger from '../Hamburger/Hamburger';
@@ -61,7 +60,7 @@ const AddonBeam: React.FunctionComponent<Props> = (props: Props) => {
         <Flex>
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
           <Link color="white" onClick={onHamburgerIconClick}>
-            <Hamburger active={isHamburgerIconActive} data-bitkit-at-id={dataAtIds.AddonBeamHamburger} />
+            <Hamburger active={isHamburgerIconActive} />
           </Link>
         </Flex>
       )}