@bitrise/bitkit 9.5.0-alpha.2 → 9.5.0

package/src/Components/Card/Card.tsx

@@ -0,0 +1,37 @@
+import { Box, BoxProps } from '@chakra-ui/react';
+import { Radii } from '@/Foundations/Radii/Radii.theme';
+import { Shadows } from '@/Foundations/Shadows/Shadows';
+import { Sizes } from '@/Foundations/Sizes/Sizes';
+
+export interface Props {
+  borderRadius?: keyof Radii;
+  boxShadow?: keyof Shadows;
+  children?: BoxProps['children'];
+  className?: string;
+  padding?: keyof Sizes;
+  sx?: BoxProps['sx'];
+}
+
+const Card = (props: Props) => {
+  const { borderRadius, boxShadow, children, className, padding, sx } = props;
+  const style = {
+    backgroundColor: 'neutral.0',
+    borderRadius,
+    boxShadow,
+    padding,
+    ...sx,
+  };
+  return (
+    <Box className={className} sx={style}>
+      {children}
+    </Box>
+  );
+};
+
+Card.defaultProps = {
+  borderRadius: '12',
+  boxShadow: 'medium',
+  padding: '24',
+} as Props;
+
+export default Card;

package/src/Components/Provider/Provider.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/react';
+import theme from '../../theme';
+
+const Provider = ({ children }: ChakraProviderProps) => {
+  return <ChakraProvider theme={theme}>{children}</ChakraProvider>;
+};
+
+export default Provider;

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

@@ -0,0 +1,20 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+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 = {
+  ...Text.defaultProps,
+  align: 'left',
+  className: '',
+  children: 'The quick brown fox jumps over the lazy dog.',
+  fontWeight: 'normal',
+  letterSpacing: 'normal',
+  textTransform: 'none',
+};

package/src/Components/Text/Text.theme.ts

@@ -0,0 +1,38 @@
+const TextTheme = {
+  sizes: {
+    1: {
+      fontSize: '1',
+      lineHeight: '1',
+    },
+    2: {
+      fontSize: '2',
+      lineHeight: '2',
+    },
+    3: {
+      fontSize: '3',
+      lineHeight: '3',
+    },
+    4: {
+      fontSize: '4',
+      lineHeight: '4',
+    },
+    5: {
+      fontSize: '5',
+      lineHeight: '5',
+    },
+    6: {
+      fontSize: '6',
+      lineHeight: '6',
+    },
+    7: {
+      fontSize: '7',
+      lineHeight: '7',
+    },
+    8: {
+      fontSize: '8',
+      lineHeight: '8',
+    },
+  },
+};
+
+export default TextTheme;

package/src/Components/Text/Text.tsx

@@ -0,0 +1,72 @@
+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?: TextProps['letterSpacing'];
+  /**
+   * 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 { fontWeight, size, textTransform } = props;
+  const properties: TextProps = { ...props };
+  if (size === '1' && (!textTransform || textTransform === 'none')) {
+    properties.textTransform = 'uppercase';
+  }
+  if (!fontWeight && (size === '5' || size === '6' || size === '7' || size === '8')) {
+    properties.fontWeight = 'bold';
+  }
+  return <ChakraText {...properties} />;
+};
+
+Text.defaultProps = {
+  as: 'p',
+  size: '3',
+} as Props;
+
+export default Text;

package/src/DatePicker/DatePickerDay.tsx

@@ -63,7 +63,7 @@ const DatePickerDay: React.FunctionComponent<Props> = (props: Props) => {
       onClick={isSelectable ? () => onSelect(date) : undefined}
     >
       <Flex alignChildren="middle" className="DatePicker__day-inner" direction="horizontal">
-        {isPreviousMonth && daysInPreviousMonth - (dayOfWeek - n)}
+        {isPreviousMonth && daysInPreviousMonth - (dayOfWeek - n - 1)}
         {isCurrentMonth && n - dayOfWeek + 1}
         {isNextMonth && n - dayOfWeek - daysInMonth + 1}
       </Flex>

package/src/Dropdown/Dropdown.tsx

@@ -62,10 +62,7 @@ const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
             {...rest}
             alignChildrenHorizontal="start"
             innerRef={ref}
-            onClick={(event: any) => {
-              if (event && event.preventDefault) {
-                event.stopPropagation();
-              }
+            onClick={() => {
               setVisible(!visible);
             }}
           >

package/src/Foundations/Colors/Colors.examples.tsx

@@ -0,0 +1,126 @@
+import { Box, Divider, HStack, SystemStyleObject, VStack } from '@chakra-ui/react';
+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<
+  keyof Colors
+>;
+
+const getTextColorFromShade = (backgroundColor: string, darkColor = 'text.body', lightColor = 'neutral.100') => {
+  const shade = Number(backgroundColor.split('.')[1]);
+  return shade < 50 ? lightColor : darkColor;
+};
+
+const Shade = ({ children }: { children: number }) => {
+  const style = { paddingRight: '24', width: '80px', height: '80px', lineHeight: '80px' };
+  return (
+    <Text align="right" sx={style}>
+      {children}
+    </Text>
+  );
+};
+
+type InfoHeaderProps = { description: string; shades: number[]; style?: any; title: string };
+
+const InfoHeader = ({ description, shades, style, title }: InfoHeaderProps) => (
+  <HStack
+    sx={{
+      color: getTextColorFromShade(style.backgroundColor),
+      ...style,
+    }}
+  >
+    <Box sx={{ paddingLeft: '24' }}>
+      <Text fontWeight="bold" size="4" sx={{ marginBottom: '8' }}>
+        {title}
+      </Text>
+      <Text size="2" sx={{ color: getTextColorFromShade(style.backgroundColor, 'text.secondary'), maxWidth: '190px' }}>
+        {description}
+      </Text>
+    </Box>
+    <VStack spacing="0">
+      {shades.map((s) => (
+        <Shade key={s}>{s}</Shade>
+      ))}
+    </VStack>
+  </HStack>
+);
+
+const Item = ({ backgroundColor, children }: { backgroundColor: string; children: string }) => {
+  const style = {
+    backgroundColor,
+    color: 'transparent',
+    padding: '4',
+    height: '80px',
+    width: '80px',
+    _hover: { boxShadow: 'large', color: getTextColorFromShade(backgroundColor), transform: 'scale(1.1)' },
+  } as SystemStyleObject;
+  return (
+    <Box sx={style}>
+      <Text size="1">{children}</Text>
+    </Box>
+  );
+};
+
+export const Palette = () => (
+  <Provider>
+    <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' }}
+            title="Light colors"
+          />
+          <InfoHeader
+            description="Avoid using these colors for text. If you do, check if they have a high enough contrast."
+            shades={[90, 80, 70, 60, 50]}
+            style={{ backgroundColor: 'neutral.100' }}
+            title="Decorative colors"
+          />
+          <InfoHeader
+            description="These colors have sufficient contrast with any light color."
+            shades={[40, 30, 20, 10]}
+            style={{ backgroundColor: 'neutral.10' }}
+            title="Dark colors"
+          />
+        </VStack>
+        {paletteKeys.map((colorName) => (
+          <VStack key={colorName} spacing="0">
+            <Text
+              as="span"
+              size="1"
+              sx={{
+                color: 'text.primary',
+                marginBottom: '12',
+              }}
+              textTransform="uppercase"
+            >
+              {colorName}
+            </Text>
+            <Divider
+              sx={{
+                background: 'neutral.80',
+                height: '1',
+              }}
+            />
+            {Object.keys(colors[colorName])
+              .reverse()
+              .map((shade) => {
+                const backgroundColor = `${colorName}.${shade}`;
+                return (
+                  <Item backgroundColor={backgroundColor} key={backgroundColor}>
+                    {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+                    {/* @ts-ignore */}
+                    {colors[colorName][shade]}
+                  </Item>
+                );
+              })}
+          </VStack>
+        ))}
+      </HStack>
+    </Card>
+  </Provider>
+);

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

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

package/src/Foundations/Colors/Colors.ts

@@ -0,0 +1,129 @@
+const colors = {
+  neutral: {
+    10: '#201B22',
+    20: '#362D39',
+    30: '#49404F',
+    40: '#6B6071',
+    50: '#7D7184',
+    60: '#94879B',
+    70: '#AFA4B4',
+    80: '#C9C1CD',
+    90: '#DFDAE1',
+    93: '#EFEBEF',
+    95: '#F6F4F6',
+    100: '#FFFFFF',
+  },
+  purple: {
+    10: '#2B0E3F',
+    20: '#421560',
+    30: '#5C2A7E',
+    40: '#7B3BA5',
+    50: '#9247C2',
+    60: '#AE63DE',
+    70: '#C289E6',
+    80: '#D5ADEB',
+    90: '#EAD4F2',
+    93: '#F3E7F9',
+    95: '#F9F2FD',
+    100: '#FFFFFF',
+  },
+  red: {
+    10: '#47060C',
+    20: '#630811',
+    30: '#78111C',
+    40: '#A91E2E',
+    50: '#D72D40',
+    60: '#F7596C',
+    70: '#FF8091',
+    80: '#FFA8B5',
+    90: '#FFCCD5',
+    93: '#FFE5EB',
+    95: '#FFF0F3',
+    100: '#FFFFFF',
+  },
+  orange: {
+    10: '#421000',
+    20: '#661900',
+    30: '#7A2200',
+    40: '#A33500',
+    50: '#D45202',
+    60: '#ED720C',
+    70: '#FD9730',
+    80: '#FFB766',
+    90: '#FFD5A3',
+    93: '#FFE9CF',
+    95: '#FFF4E5',
+    100: '#FFFFFF',
+  },
+  yellow: {
+    10: '#2E1C00',
+    20: '#4D2F00',
+    30: '#613E00',
+    40: '#875B00',
+    50: '#B27E00',
+    60: '#D6A200',
+    70: '#EBBA00',
+    80: '#F9CC15',
+    90: '#FBE074',
+    93: '#FFEFAD',
+    95: '#FFF6D1',
+    100: '#FFFFFF',
+  },
+  green: {
+    10: '#042A0F',
+    20: '#064217',
+    30: '#0B5620',
+    40: '#167231',
+    50: '#2A9D4C',
+    60: '#4EB76C',
+    70: '#77CF8F',
+    80: '#A1DEB2',
+    90: '#C3EACE',
+    93: '#E1F4E7',
+    95: '#EEF9F1',
+    100: '#FFFFFF',
+  },
+  turquoise: {
+    10: '#002924',
+    20: '#003D36',
+    30: '#005248',
+    40: '#007366',
+    50: '#009E8E',
+    60: '#11BBA9',
+    70: '#55CEC3',
+    80: '#8AE0D7',
+    90: '#AEEFE8',
+    93: '#D8F8F4',
+    95: '#E9FBF9',
+    100: '#FFFFFF',
+  },
+  blue: {
+    10: '#002442',
+    20: '#00315C',
+    30: '#044781',
+    40: '#1066AC',
+    50: '#2582D0',
+    60: '#4F9BDE',
+    70: '#71B8EF',
+    80: '#99D1F5',
+    90: '#C2E7FA',
+    93: '#DEF2FC',
+    95: '#ECF8FD',
+    100: '#FFFFFF',
+  },
+  brand: {
+    primary: '#5C2A7E', // purple.30
+  },
+  text: {
+    body: '#201B22', // neutral.10
+    secondary: '#6B6071', // neutral.40
+    link: '#9247C2', // purple.50
+    linkHover: '#5C2A7E', // purple.30
+  },
+  separator: {
+    primary: '#DFDAE1', // neutral.90,
+  },
+};
+
+export type Colors = typeof colors;
+export default colors;

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

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

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

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { Radii } from './Radii.examples';
+
+<Meta title="Foundations/Radii (round corners)" />
+
+# Radii (round corners)
+
+<Radii />

package/src/Foundations/Radii/Radii.theme.ts

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

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

@@ -0,0 +1,24 @@
+import { Box, HStack, VStack } from '@chakra-ui/react';
+import Card from '@/Components/Card/Card';
+import Provider from '@/Components/Provider/Provider';
+import Text from '@/Components/Text/Text';
+import shadows from './Shadows';
+
+export const Shadows = () => (
+  <Provider>
+    <HStack
+      as={Card}
+      spacing="32"
+      sx={{
+        marginTop: '24',
+      }}
+    >
+      {Object.keys(shadows).map((key) => (
+        <VStack key={key}>
+          <Box width="32" height="32" boxShadow={key} />
+          <Text>{key}</Text>
+        </VStack>
+      ))}
+    </HStack>
+  </Provider>
+);

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

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { Shadows } from './Shadows.examples';
+
+<Meta title="Foundations/Shadows" />
+
+# Shadows
+
+<Shadows />

package/src/Foundations/Shadows/Shadows.ts

@@ -0,0 +1,10 @@
+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',
+  none: 'none',
+};
+
+export type Shadows = typeof shadows;
+export default shadows;

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

@@ -0,0 +1,25 @@
+import { Box, HStack, VStack } from '@chakra-ui/react';
+import Card from '@/Components/Card/Card';
+import Provider from '@/Components/Provider/Provider';
+import Text from '@/Components/Text/Text';
+import sizes from './Sizes';
+
+export const Sizes = () => (
+  <Provider>
+    <HStack
+      as={Card}
+      spacing="24"
+      sx={{
+        alignItems: 'flex-end',
+        marginTop: '24',
+      }}
+    >
+      {Object.keys(sizes).map((size) => (
+        <VStack key={size}>
+          <Box width={size} height={size} background="brand.primary" />
+          <Text>{size}</Text>
+        </VStack>
+      ))}
+    </HStack>
+  </Provider>
+);

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

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { Sizes } from './Sizes.examples';
+
+<Meta title="Foundations/Sizes" />
+
+# Sizes
+
+<Sizes />

package/src/Foundations/Sizes/Sizes.ts

@@ -0,0 +1,15 @@
+const sizes = {
+  '4': '4px',
+  '8': '8px',
+  '12': '12px',
+  '16': '16px',
+  '24': '24px',
+  '32': '32px',
+  '48': '48px',
+  '64': '64px',
+  '96': '96px',
+  '128': '128px',
+};
+
+export type Sizes = typeof sizes;
+export default sizes;

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

@@ -0,0 +1,54 @@
+import { VStack } from '@chakra-ui/react';
+import Card from '@/Components/Card/Card';
+import Provider from '@/Components/Provider/Provider';
+import Text from '@/Components/Text/Text';
+import typography from './Typography';
+
+const style = {
+  alignItems: 'flex-start',
+  counterReset: 'sizes',
+  listStyle: 'none',
+  li: {
+    counterIncrement: 'sizes',
+    _before: {
+      content: '"Size " counter(sizes) ":"',
+      display: 'inline-block',
+      minWidth: '150px',
+      marginRight: '16px',
+      textAlign: 'left',
+    },
+  },
+};
+
+export const FontSizes = () => (
+  <Provider>
+    <Card sx={{ marginTop: '24' }}>
+      <VStack as="ol" spacing={24} sx={style}>
+        <Text as="li" size="1">
+          {typography.fontSizes[1]} / {typography.lineHeights[1]} / Normal / Uppercase
+        </Text>
+        <Text as="li" size="2">
+          {typography.fontSizes[2]} / {typography.lineHeights[2]} / Normal
+        </Text>
+        <Text as="li" size="3">
+          {typography.fontSizes[3]} / {typography.lineHeights[3]} / Normal
+        </Text>
+        <Text as="li" size="4">
+          {typography.fontSizes[4]} / {typography.lineHeights[4]} / Normal
+        </Text>
+        <Text as="li" size="5">
+          {typography.fontSizes[5]} / {typography.lineHeights[5]} / Bold
+        </Text>
+        <Text as="li" size="6">
+          {typography.fontSizes[6]} / {typography.lineHeights[6]} / Bold
+        </Text>
+        <Text as="li" size="7">
+          {typography.fontSizes[7]} / {typography.lineHeights[7]} / Bold
+        </Text>
+        <Text as="li" size="8">
+          {typography.fontSizes[8]} / {typography.lineHeights[8]} / Bold
+        </Text>
+      </VStack>
+    </Card>
+  </Provider>
+);

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

@@ -0,0 +1,14 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+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)