@bitrise/bitkit 9.4.1-alpha.2 → 9.4.1

package/src/chakra/components/IconButton/IconButton.stories.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { sortObjectByKey } from '../../shared';
-import { IconList } from '../../../Icon/tsx';
-import IconButton from './IconButton';
-
-export default {
-  title: 'Components/IconButton',
-  component: IconButton,
-  argTypes: {
-    iconName: {
-      options: IconList,
-    },
-  },
-} as ComponentMeta<typeof IconButton>;
-
-const Template: ComponentStory<typeof IconButton> = ({ ...props }) => <IconButton {...props} />;
-
-export const WithProps = Template.bind({});
-WithProps.args = sortObjectByKey({
-  ...IconButton.defaultProps,
-  iconName: 'AddOns',
-  label: 'This is the label',
-});

package/src/chakra/components/IconButton/IconButton.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { IconButton as ChakraIconButton, IconButtonProps } from '@chakra-ui/react';
-import { Icon, TypeIconName } from '@bitrise/bitkit';
-
-export interface Props {
-  iconName: TypeIconName;
-  label: IconButtonProps['aria-label'];
-  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  size?: 'small' | 'medium';
-  sx?: IconButtonProps['sx'];
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'dangerPrimary' | 'dangerSecondary';
-}
-
-const IconButton = React.forwardRef<HTMLButtonElement, Props>((props: Props, ref) => {
-  const { iconName, label, ...rest } = props;
-  const properties: IconButtonProps = {
-    'aria-label': label,
-    icon: <Icon name={iconName} />,
-    ...rest,
-  };
-  return <ChakraIconButton ref={ref} {...properties} />;
-});
-
-IconButton.defaultProps = {
-  size: 'medium',
-  variant: 'primary',
-} as Props;
-
-export default IconButton;

package/src/chakra/components/Link/Link.stories.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { sortObjectByKey } from '../../shared';
-import Link from './Link';
-
-export default {
-  title: 'Components/Link',
-  component: Link,
-} as ComponentMeta<typeof Link>;
-
-const Template: ComponentStory<typeof Link> = ({ ...props }) => <Link {...props} />;
-
-export const WithProps = Template.bind({});
-WithProps.args = sortObjectByKey({
-  ...Link.defaultProps,
-  children: 'The quick brown fox jumps over the lazy dog.',
-  href: '#',
-  target: '_self',
-});

package/src/chakra/components/Link/Link.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Link as ChakraLink, LinkProps } from '@chakra-ui/react';
-
-export type TypeLinkColor = 'grape-3' | 'grape-5' | 'gray-1' | 'gray-5' | 'white' | 'inherit';
-
-export interface Props {
-  children: LinkProps['children'];
-  color?: TypeLinkColor;
-  href: string;
-  isUnderlined?: boolean;
-  target?: '_blank' | '_parent' | '_self' | '_top';
-}
-
-const Link = (props: Props) => {
-  const { isUnderlined, ...rest } = props;
-  const properties: LinkProps = { ...rest };
-  properties.as = 'a';
-  if (isUnderlined) {
-    properties.textDecoration = 'underline';
-  }
-
-  return <ChakraLink {...properties} />;
-};
-
-Link.defaultProps = {
-  color: 'grape-3',
-  isUnderlined: true,
-} as Props;
-
-export default Link;

package/src/chakra/components/Menu/Menu.stories.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { ButtonGroup, HStack, MenuButton, MenuList } from '@chakra-ui/react';
-import Button from '../Button/Button';
-import IconButton from '../IconButton/IconButton';
-import Menu from './Menu';
-import MenuItem from './MenuItem';
-
-export default {
-  title: 'Components/Menu',
-  component: Menu,
-  subcomponents: { MenuButton, MenuList, MenuItem },
-} as ComponentMeta<typeof Menu>;
-
-export const WithButton: ComponentStory<typeof Menu> = () => (
-  <Menu>
-    <MenuButton as={Button}>Actions</MenuButton>
-    <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>
-  </Menu>
-);
-
-export const WithIconButton: ComponentStory<typeof Menu> = () => (
-  <Menu>
-    <MenuButton as={IconButton} iconName="AddOnsColorTuorqouise" label="Open menu" />
-    <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>
-  </Menu>
-);
-
-export const WithButtonGroup: ComponentStory<typeof Menu> = () => (
-  <HStack justifyContent="end">
-    <ButtonGroup isAttached>
-      <Button>Button</Button>
-      <Menu>
-        <MenuButton as={IconButton} iconName="AddOnsColorTuorqouise" label="Open menu" />
-        <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>
-      </Menu>
-    </ButtonGroup>
-  </HStack>
-);

package/src/chakra/components/Menu/Menu.theme.ts

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

package/src/chakra/components/Menu/Menu.tsx

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

package/src/chakra/components/Menu/MenuItem.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-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;
-  sx?: MenuItemProps['sx'];
-};
-
-const MenuItem = (props: Props) => {
-  const { iconName, ...rest } = props;
-  const properties: MenuItemProps = { ...rest };
-  properties.icon = <Icon name={iconName} />;
-  properties.iconSpacing = '16px';
-  return <ChakraMenuItem {...properties} />;
-};
-
-export default MenuItem;

package/src/chakra/components/StatusTag/StatusTag.stories.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { sortObjectByKey } from '../../shared';
-import StatusTag, { Props } from './StatusTag';
-
-export default {
-  title: 'Components/StatusTag',
-  component: StatusTag,
-} as ComponentMeta<typeof StatusTag>;
-
-const Template: ComponentStory<typeof StatusTag> = ({ ...props }) => <StatusTag {...props} />;
-
-export const WithProps = Template.bind({});
-WithProps.args = sortObjectByKey({
-  ...StatusTag.defaultProps,
-  children: 'Running',
-  // iconName: 'BuildstatusLoadingAnimated',
-  variant: 'running',
-} as Props);

package/src/chakra/components/StatusTag/StatusTag.theme.ts

@@ -1,45 +0,0 @@
-const StatusTagTheme = {
-  baseStyle: {
-    borderRadius: '4px',
-    paddingX: '8px',
-  },
-  sizes: {
-    small: {
-      paddingY: '4px',
-    },
-    normal: {
-      paddingY: '8px',
-    },
-    big: {
-      paddingY: '20px',
-    },
-  },
-  variants: {
-    aborted: {
-      backgroundColor: '#FFF6D1',
-      color: '#875B00',
-    },
-    failed: {
-      backgroundColor: '#FFF0F3',
-      color: '#A91E2E',
-    },
-    onHold: {
-      backgroundColor: '#F6F4F6',
-      color: '#6B6071',
-    },
-    running: {
-      backgroundColor: '#F9F2FD',
-      color: '#492F5C',
-    },
-    starting: {
-      backgroundColor: '#ECF8FD',
-      color: '#1066AC',
-    },
-    success: {
-      backgroundColor: '#EEF9F1',
-      color: '#167231',
-    },
-  },
-};
-
-export default StatusTagTheme;

package/src/chakra/components/StatusTag/StatusTag.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import { HStack, useStyleConfig } from '@chakra-ui/react';
-import { Icon } from '@bitrise/bitkit';
-import Text from '../Text/Text';
-
-type IconName =
-  | 'BuildstatusAborted'
-  | 'BuildstatusFailed'
-  | 'BuildstatusLoadingAnimated'
-  | 'BuildstatusNeverbuilt'
-  | 'BuildstatusSuccessful';
-
-type Variant = 'aborted' | 'failed' | 'onHold' | 'running' | 'starting' | 'success';
-
-export interface Props {
-  children?: string;
-  iconName?: IconName;
-  size?: 'big' | 'normal' | 'small';
-  variant: Variant;
-  width?: '8.5rem' | 'auto';
-}
-
-const getIcon = (variant: Variant, iconName?: IconName): IconName => {
-  const iconMap = {
-    aborted: 'BuildstatusAborted',
-    failed: 'BuildstatusFailed',
-    onHold: 'BuildstatusAborted',
-    running: 'BuildstatusLoadingAnimated',
-    starting: 'BuildstatusLoadingAnimated',
-    success: 'BuildstatusSuccessful',
-  };
-  if (!iconName) {
-    return iconMap[variant] as IconName;
-  }
-  return iconName;
-};
-
-const StatusTag = ({ children, iconName, size, variant, width }: Props) => {
-  const styles = useStyleConfig('StatusTag', { size, variant });
-  return (
-    <HStack alignItems="center" sx={styles} width={width}>
-      <Icon name={getIcon(variant, iconName)} />
-      <Text fontWeight="bold" size="2" textTransform="uppercase">
-        {children}
-      </Text>
-    </HStack>
-  );
-};
-
-StatusTag.defaultProps = {
-  size: 'normal',
-  width: '8.5rem',
-} as Props;
-
-export default StatusTag;

package/src/chakra/components/Text/Text.stories.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { sortObjectByKey } from '../../shared';
-import Text from './Text';
-
-export default {
-  title: 'Components/Text',
-  component: Text,
-} as ComponentMeta<typeof Text>;
-
-const Template: ComponentStory<typeof Text> = ({ ...props }) => <Text {...props} />;
-
-export const WithProps = Template.bind({});
-WithProps.args = sortObjectByKey({
-  align: 'left',
-  className: '',
-  children: 'The quick brown fox jumps over the lazy dog.',
-  fontWeight: 'normal',
-  letterSpacing: 'normal',
-  textTransform: 'none',
-  ...Text.defaultProps,
-});

package/src/chakra/components/Text/Text.tsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import { Text as ChakraText, TextProps } from '@chakra-ui/react';
-
-type TextTags =
-  | 'a'
-  | 'abbr'
-  | 'bdi'
-  | 'bdo'
-  | 'blockquote'
-  | 'cite'
-  | 'data'
-  | 'dd'
-  | 'dfn'
-  | 'dt'
-  | 'em'
-  | 'figcaption'
-  | 'kbd'
-  | 'li'
-  | 'mark'
-  | 'p'
-  | 'pre'
-  | 'q'
-  | 'samp'
-  | 'small'
-  | 'span'
-  | 'strong'
-  | 'sub'
-  | 'sup'
-  | 'time'
-  | 'var';
-
-export interface Props {
-  align?: 'center' | 'justify' | 'left' | 'right';
-  /**
-   * Any valid HTML text tag
-   */
-  as?: TextTags;
-  children?: TextProps['children'];
-  className?: string;
-  /**
-   * Font weight
-   */
-  fontWeight?: 'bold' | 'normal';
-  letterSpacing?: string;
-  /**
-   * Size config (https://www.figma.com/file/grik9mTaJ5DfhydhWhXdP5/Bitkit-Foundations?node-id=211%3A12)
-   */
-  size?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
-  sx?: TextProps['sx'];
-  textTransform?: 'capitalize' | 'lowercase' | 'none' | 'uppercase';
-}
-
-/**
- * Basic `Text` component
- */
-const Text = (props: Props) => {
-  const { size, textTransform } = props;
-  const properties: TextProps = { ...props };
-  if (size === '1' && (!textTransform || textTransform === 'none')) {
-    properties.textTransform = 'uppercase';
-  }
-  if (size === '5' || size === '6' || size === '7' || size === '8') {
-    properties.fontWeight = 'bold';
-  }
-  return <ChakraText {...properties} />;
-};
-
-Text.defaultProps = {
-  as: 'span',
-  size: '4',
-} as Props;
-
-export default Text;

package/src/chakra/shared.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;
-    }, {});
-};

package/src/chakra/theme/theme.ts

@@ -1,50 +0,0 @@
-import { extendTheme } from '@chakra-ui/react';
-import { variables } from '@bitrise/bitkit';
-import ButtonTheme from '../components/Button/Button.theme';
-import StatusTagTheme from '../components/StatusTag/StatusTag.theme';
-import MenuTheme from '../components/Menu/Menu.theme';
-import typographyConfig from './typographyConfig';
-
-const theme = extendTheme({
-  config: {
-    cssVarPrefix: 'bitkit',
-  },
-  colors: variables.colorMap,
-  fonts: {
-    body: `"TT Norms Pro", sans-serif`,
-    heading: `"TT Norms Pro", sans-serif`,
-  },
-  fontSizes: {
-    1: '11px',
-    2: '14px',
-    3: '16px',
-    4: '19px',
-    5: '24px',
-    6: '30px',
-    7: '36px',
-    8: '48px',
-  },
-  lineHeights: {
-    1: '16px',
-    2: '20px',
-    3: '24px',
-    4: '28px',
-    5: '36px',
-    6: '40px',
-    7: '48px',
-    8: '60px',
-  },
-  components: {
-    Button: ButtonTheme,
-    Heading: {
-      sizes: typographyConfig,
-    },
-    Menu: MenuTheme,
-    StatusTag: StatusTagTheme,
-    Text: {
-      sizes: typographyConfig,
-    },
-  },
-});
-
-export default theme;

package/src/chakra/theme/typographyConfig.ts

@@ -1,38 +0,0 @@
-import { SystemStyleObject } from '@chakra-ui/react';
-
-const config: Record<string, SystemStyleObject> = {
-  1: {
-    fontSize: '11px',
-    lineHeight: '16px',
-  },
-  2: {
-    fontSize: '14px',
-    lineHeight: '20px',
-  },
-  3: {
-    fontSize: '16px',
-    lineHeight: '24px',
-  },
-  4: {
-    fontSize: '19px',
-    lineHeight: '28px',
-  },
-  5: {
-    fontSize: '24px',
-    lineHeight: '36px',
-  },
-  6: {
-    fontSize: '30px',
-    lineHeight: '40px',
-  },
-  7: {
-    fontSize: '36px',
-    lineHeight: '48px',
-  },
-  8: {
-    fontSize: '48px',
-    lineHeight: '60px',
-  },
-};
-
-export default config;