@bitrise/bitkit 9.3.1 → 9.4.1-alpha.2

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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1,11 @@
+/* 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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,38 @@
+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;

package/src/index.ts

@@ -106,3 +106,13 @@ export { default as Toggle, Props as ToggleProps } from './Toggle/Toggle';
 export { default as Tooltip, Props as TooltipProps } from './Tooltip/Tooltip';
 export { default as Visibility, Props as VisibilityProps } from './Visibility/Visibility';
 export { default as VisibilityContainer, Props as VisibilityContainerProps } from './Visibility/VisibilityContainer';
+
+export { default as BitkitProvider } from './chakra/BitkitProvider';
+export { default as BitkitTheme } from './chakra/theme/theme';
+export { default as NewButton, Props as NewButtonProps } from './chakra/components/Button/Button';
+export { default as NewIconButton, Props as NewIconButtonProps } from './chakra/components/IconButton/IconButton';
+export { default as NewLink, Props as NewLinkProps } from './chakra/components/Link/Link';
+export { default as Menu, Props as MenuProps } from './chakra/components/Menu/Menu';
+export { default as MenuItem, Props as MenuItemProps } from './chakra/components/Menu/MenuItem';
+export { default as StatusTag, Props as StatusTagProps } from './chakra/components/StatusTag/StatusTag';
+export { default as NewText, Props as NewTextProps } from './chakra/components/Text/Text';

package/tsconfig.json

@@ -12,11 +12,14 @@
     "moduleResolution": "node",
     "paths": {
       "*": ["@types/*"],
-      "@bitrise/bitkit": ["src"]
+      "@": ["src"],
+      "@bitrise/bitkit": ["src"],
     },
     "resolveJsonModule": true,
     "sourceMap": true,
     "strict": true,
-    "target": "es5"
+    "target": "es5",
+    // https://github.com/chakra-ui/chakra-ui/issues/2955 :(
+    "skipLibCheck": true,
   }
 }