@bitrise/bitkit 9.3.0 → 9.3.1

package/src/AddonFooter/AddonFooter.tsx

@@ -10,10 +10,10 @@ export interface Props extends FlexProps {
 
 /** A common Bitrise footer component */
 const AddonFooter: React.FunctionComponent<Props> = ({ addonName, ...rest }: Props) => (
-  <Flex { ...rest } alignChildren="middle" direction="vertical">
+  <Flex {...rest} alignChildren="middle" direction="vertical">
     <Icon margin="x2" name="Bitbot" size="1.5rem" />
     <Text align="middle" letterSpacing="x5" size="1" uppercase>
-      { addonName }
+      {addonName}
     </Text>
     <Text align="middle" letterSpacing="x5" size="1" uppercase>
       An Official Bitrise Add-on

package/src/AppLayout/AppLayout.tsx

@@ -15,9 +15,7 @@ const AppLayout: React.FunctionComponent<Props> = (props: Props) => {
     'AppLayout--sidebar-visible': isSidebarVisible,
   });
 
-  return (
-    <Flex { ...rest } className={ classes } direction="vertical" grow />
-  );
+  return <Flex {...rest} className={classes} direction="vertical" grow />;
 };
 
 export default AppLayout;

package/src/AppLayout/AppLayoutBody.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 
-export interface Props extends FlexProps {}
+export type Props = FlexProps;
 
 const AppLayoutBody: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Flex { ...props } direction="horizontal" grow />
-  );
+  return <Flex {...props} direction="horizontal" grow />;
 };
 
 export default AppLayoutBody;

package/src/AppLayout/AppLayoutHeader.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 
-export interface Props extends FlexProps {}
+export type Props = FlexProps;
 
 const AppLayoutHeader: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Flex { ...props } className="AppLayout__header" />
-  );
+  return <Flex {...props} className="AppLayout__header" />;
 };
 
 export default AppLayoutHeader;

package/src/AppLayout/AppLayoutMain.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 
-export interface Props extends FlexProps {}
+export type Props = FlexProps;
 
 const AppLayoutMain: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Flex { ...props } direction="vertical" grow />
-  );
+  return <Flex {...props} direction="vertical" grow />;
 };
 
 export default AppLayoutMain;

package/src/AppLayout/AppLayoutSidebar.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 
-export interface Props extends FlexProps {}
+export type Props = FlexProps;
 
 const AppLayoutSidebar: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Flex { ...props } alignSelf="start" className="AppLayout__sidebar" />
-  );
+  return <Flex {...props} alignSelf="start" className="AppLayout__sidebar" />;
 };
 
 export default AppLayoutSidebar;

package/src/Appear/Appear.tsx

@@ -13,12 +13,7 @@ const durations = {
   slow: transitionDurationSlow,
 };
 
-export type TypeAppearAnimationName =
-  'Fade' |
-  'FadeSlideUp' |
-  'FadeSlideRight' |
-  'FadeSlideDown' |
-  'FadeSlideLeft';
+export type TypeAppearAnimationName = 'Fade' | 'FadeSlideUp' | 'FadeSlideRight' | 'FadeSlideDown' | 'FadeSlideLeft';
 
 export interface Props extends BaseProps {
   /** Type of enter and exit animation */
@@ -35,14 +30,7 @@ export interface Props extends BaseProps {
 
 /** Enter and exit components into view with a bit of bedazzle */
 const Appear: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    animation,
-    className,
-    delay,
-    duration = 'fast',
-    visible,
-    ...rest
-  } = props;
+  const { animation, className, delay, duration = 'fast', style, visible, ...rest } = props;
 
   const classes = classnames(className, 'Appear', `Appear--${animation}`, `Appear--${duration}`, {
     [`Appear--${animation}-appear`]: !isClient && visible,
@@ -59,19 +47,20 @@ const Appear: React.FunctionComponent<Props> = (props: Props) => {
     exitDone: `Appear--${animation}-exit-done`,
   };
 
-  const style = {
-    ...props.style,
+  const newStyle = {
+    ...style,
     animationDelay: `${delay}ms`,
     transitionDelay: `${delay}ms`,
   };
 
   return (
     <CSSTransition
-        appear={ isClient && visible }
-        classNames={ transition }
-        in={ isClient && visible }
-        timeout={ durations[duration] }>
-      <Base { ...rest } className={ classes } style={ style } />
+      appear={isClient && visible}
+      classNames={transition}
+      in={isClient && visible}
+      timeout={durations[duration]}
+    >
+      <Base {...rest} className={classes} style={newStyle} />
     </CSSTransition>
   );
 };

package/src/Avatar/Avatar.tsx

@@ -22,7 +22,7 @@ const Avatar: React.FunctionComponent<Props> = (props: Props) => {
       const seed = str.charCodeAt(0) + str.charCodeAt(str.length - 1);
 
       return {
-        shortHand: shortHand,
+        shortHand,
         styles: {
           backgroundColor: avatarColors[seed % avatarColors.length],
         },
@@ -39,22 +39,23 @@ const Avatar: React.FunctionComponent<Props> = (props: Props) => {
 
   return (
     <Flex
-        borderRadius="rounded"
-        { ...rest }
-        alignChildrenHorizontal="middle"
-        alignChildrenVertical="middle"
-        className="Avatar"
-        direction="horizontal"
-        height={ size }
-        overflow="hidden"
-        style={ { ...memoizedValue.styles, ...rest.styles } }
-        width={ size }>
+      borderRadius="rounded"
+      {...rest}
+      alignChildrenHorizontal="middle"
+      alignChildrenVertical="middle"
+      className="Avatar"
+      direction="horizontal"
+      height={size}
+      overflow="hidden"
+      style={{ ...memoizedValue.styles, ...rest.styles }}
+      width={size}
+    >
       <Flex>
-        { memoizedValue.shortHand && (
+        {memoizedValue.shortHand && (
           <Text size="3" textColor="white">
-            { memoizedValue.shortHand }
+            {memoizedValue.shortHand}
           </Text>
-        ) }
+        )}
       </Flex>
     </Flex>
   );

package/src/Badge/Badge.tsx

@@ -12,12 +12,7 @@ export interface Props extends TextProps {
  * important to a user.
  */
 const Badge: React.FunctionComponent<Props> = ({ uppercase = true, className, ...rest }: Props) => {
-  return (
-    <Text { ...rest }
-        className={ classnames('Badge', className) }
-        size="1"
-        uppercase={ uppercase } />
-  );
+  return <Text {...rest} className={classnames('Badge', className)} size="1" uppercase={uppercase} />;
 };
 
 export default Badge;

package/src/Base/Base.tsx

@@ -5,18 +5,62 @@ import './Base.css';
 export type TypeBorderRadius = 'x1' | 'x2' | 'x4' | 'rounded';
 
 export type TypeColors =
-  'black' | 'white' |
-  'gray-1' | 'gray-2' | 'gray-3' | 'gray-4' | 'gray-5' | 'gray-6' | 'gray-7' | 'gray-8' |
-  'aqua-1' | 'aqua-2' | 'aqua-3' | 'aqua-4' | 'aqua-5' |
-  'grape-1' | 'grape-2' | 'grape-3' | 'grape-4' | 'grape-5' |
-  'eggplant' |
-  'red-1' | 'red-2' | 'red-3' | 'red-4' | 'red-5' |
-  'orange-1' | 'orange-2' | 'orange-3' | 'orange-4' | 'orange-5' |
-  'yellow-1' | 'yellow-2' | 'yellow-3' | 'yellow-4' | 'yellow-5' |
-  'green-1' | 'green-2' | 'green-3' | 'green-4' | 'green-5' |
-  'blue-1' | 'blue-2' | 'blue-3' | 'blue-4' | 'blue-5' |
-  'darkblue-1' | 'darkblue-2' | 'darkblue-3' | 'darkblue-4' | 'darkblue-5' |
-  'violet-1' | 'violet-2' | 'violet-3' | 'violet-4' | 'violet-5';
+  | 'black'
+  | 'white'
+  | 'gray-1'
+  | 'gray-2'
+  | 'gray-3'
+  | 'gray-4'
+  | 'gray-5'
+  | 'gray-6'
+  | 'gray-7'
+  | 'gray-8'
+  | 'aqua-1'
+  | 'aqua-2'
+  | 'aqua-3'
+  | 'aqua-4'
+  | 'aqua-5'
+  | 'grape-1'
+  | 'grape-2'
+  | 'grape-3'
+  | 'grape-4'
+  | 'grape-5'
+  | 'eggplant'
+  | 'red-1'
+  | 'red-2'
+  | 'red-3'
+  | 'red-4'
+  | 'red-5'
+  | 'orange-1'
+  | 'orange-2'
+  | 'orange-3'
+  | 'orange-4'
+  | 'orange-5'
+  | 'yellow-1'
+  | 'yellow-2'
+  | 'yellow-3'
+  | 'yellow-4'
+  | 'yellow-5'
+  | 'green-1'
+  | 'green-2'
+  | 'green-3'
+  | 'green-4'
+  | 'green-5'
+  | 'blue-1'
+  | 'blue-2'
+  | 'blue-3'
+  | 'blue-4'
+  | 'blue-5'
+  | 'darkblue-1'
+  | 'darkblue-2'
+  | 'darkblue-3'
+  | 'darkblue-4'
+  | 'darkblue-5'
+  | 'violet-1'
+  | 'violet-2'
+  | 'violet-3'
+  | 'violet-4'
+  | 'violet-5';
 
 export type TypeSizes = 'x0' | 'x1' | 'x2' | 'x3' | 'x4' | 'x5' | 'x6' | 'x8' | 'x10' | 'x12' | 'x16';
 
@@ -99,6 +143,7 @@ const Base: React.FunctionComponent<Props> = (props: Props) => {
     container,
     elevation,
     height,
+    innerRef,
     margin,
     maxHeight,
     maxWidth,
@@ -115,36 +160,42 @@ const Base: React.FunctionComponent<Props> = (props: Props) => {
   } = props;
 
   const FinalComponent = Component || 'div';
-  const classes = classnames('Base', {
-    'Base--absolute': absolute === true,
-    [`Base--absolute-${absolute}`]: typeof absolute === 'string',
-    [`Base--background-color-${backgroundColor}`]: backgroundColor,
-    [`Base--border-radius-${borderRadius}`]: borderRadius,
-    [`Base--border-color-${borderColor}`]: borderColor,
-    [`Base--border-width-${borderWidth}`]: borderWidth,
-    'Base--clickable': clickable,
-    'Base--container': container,
-    [`Base--elevation-${elevation}`]: elevation,
-    [`Base--margin-${margin}`]: margin,
-    'Base--max-width': maxWidth,
-    [`Base--overflow-${overflow}`]: overflow,
-    [`Base--padding-horizontal-${paddingHorizontal}`]: paddingHorizontal,
-    [`Base--padding-vertical-${paddingVertical}`]: paddingVertical,
-    [`Base--text-color-${textColor}`]: textColor,
-  }, className);
+  const classes = classnames(
+    'Base',
+    {
+      'Base--absolute': absolute === true,
+      [`Base--absolute-${absolute}`]: typeof absolute === 'string',
+      [`Base--background-color-${backgroundColor}`]: backgroundColor,
+      [`Base--border-radius-${borderRadius}`]: borderRadius,
+      [`Base--border-color-${borderColor}`]: borderColor,
+      [`Base--border-width-${borderWidth}`]: borderWidth,
+      'Base--clickable': clickable,
+      'Base--container': container,
+      [`Base--elevation-${elevation}`]: elevation,
+      [`Base--margin-${margin}`]: margin,
+      'Base--max-width': maxWidth,
+      [`Base--overflow-${overflow}`]: overflow,
+      [`Base--padding-horizontal-${paddingHorizontal}`]: paddingHorizontal,
+      [`Base--padding-vertical-${paddingVertical}`]: paddingVertical,
+      [`Base--text-color-${textColor}`]: textColor,
+    },
+    className,
+  );
 
   // Work around for findDOMNode area causing constant renders. Forwards
   // refs for component compositions.
   if (typeof FinalComponent === 'string') {
-    rest.ref = props.innerRef;
+    rest.ref = innerRef;
     delete rest.innerRef;
   }
 
   return (
-    <FinalComponent { ...rest }
-        className={ classes }
-        style={ { ...style, height, maxHeight, maxWidth, minHeight, minWidth, width } }>
-      { children }
+    <FinalComponent
+      {...rest}
+      className={classes}
+      style={{ ...style, height, maxHeight, maxWidth, minHeight, minWidth, width }}
+    >
+      {children}
     </FinalComponent>
   );
 };

package/src/Bounds/Bounds.tsx

@@ -11,8 +11,8 @@ const Bounds: React.FunctionComponent<Props> = (props: Props) => {
   const [size, ref] = useResizeObserver();
 
   return (
-    <Base { ...rest } innerRef={ ref }>
-      { children(size) }
+    <Base {...rest} innerRef={ref}>
+      {children(size)}
     </Base>
   );
 };

package/src/Button/Button.test.tsx

@@ -5,50 +5,26 @@ import Button from './Button';
 
 describe('Button', () => {
   test('default template', () => {
-    expect(
-      shallowToJson(shallow(
-        <Button>Content</Button>
-      ))
-    ).toMatchSnapshot();
+    expect(shallowToJson(shallow(<Button>Content</Button>))).toMatchSnapshot();
   });
 
   test('borderless', () => {
-    expect(
-      shallowToJson(shallow(
-        <Button borderless>Content</Button>
-      ))
-    ).toMatchSnapshot();
+    expect(shallowToJson(shallow(<Button borderless>Content</Button>))).toMatchSnapshot();
   });
 
   test('fullWidth', () => {
-    expect(
-      shallowToJson(shallow(
-        <Button fullWidth>Content</Button>
-      ))
-    ).toMatchSnapshot();
+    expect(shallowToJson(shallow(<Button fullWidth>Content</Button>))).toMatchSnapshot();
   });
 
   test('level', () => {
-    expect(
-      shallowToJson(shallow(
-        <Button level="primary">Content</Button>
-      ))
-    ).toMatchSnapshot();
+    expect(shallowToJson(shallow(<Button level="primary">Content</Button>))).toMatchSnapshot();
   });
 
   test('size', () => {
-    expect(
-      shallowToJson(shallow(
-        <Button size="small">Content</Button>
-      ))
-    ).toMatchSnapshot();
+    expect(shallowToJson(shallow(<Button size="small">Content</Button>))).toMatchSnapshot();
   });
 
   test('variant', () => {
-    expect(
-      shallowToJson(shallow(
-        <Button variant="danger">Content</Button>
-      ))
-    ).toMatchSnapshot();
+    expect(shallowToJson(shallow(<Button variant="danger">Content</Button>))).toMatchSnapshot();
   });
 });

package/src/Button/Button.tsx

@@ -33,30 +33,17 @@ export interface Props extends FlexProps {
 
 /** Standard Button component */
 const Button: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    borderless,
-    fullWidth,
-    level,
-    size,
-    variant,
-    ...rest
-  } = props;
+  const { borderless, fullWidth, level, size, variant, ...rest } = props;
 
   const gap = size === 'small' ? 'x1' : 'x2';
-  const classes = classnames('Button',
-    `Button--level-${level}`,
-    `Button--size-${size}`, {
-      'Button--borderless': borderless,
-      'Button--full-width': fullWidth,
-      [`Button--variant-${variant}`]: variant,
-    });
+  const classes = classnames('Button', `Button--level-${level}`, `Button--size-${size}`, {
+    'Button--borderless': borderless,
+    'Button--full-width': fullWidth,
+    [`Button--variant-${variant}`]: variant,
+  });
 
   return (
-    <Flex Component="button" { ...rest }
-        alignChildren="middle"
-        className={ classes }
-        direction="horizontal"
-        gap={ gap } />
+    <Flex Component="button" {...rest} alignChildren="middle" className={classes} direction="horizontal" gap={gap} />
   );
 };
 

package/src/Button/Buttons.test.tsx

@@ -7,31 +7,37 @@ import Buttons from './Buttons';
 describe('Buttons', () => {
   test('default template', () => {
     expect(
-      shallowToJson(shallow(
-        <Buttons>
-          <Button>Content</Button>
-        </Buttons>
-      ))
+      shallowToJson(
+        shallow(
+          <Buttons>
+            <Button>Content</Button>
+          </Buttons>,
+        ),
+      ),
     ).toMatchSnapshot();
   });
 
   test('fullWidth', () => {
     expect(
-      shallowToJson(shallow(
-        <Buttons fullWidth>
-          <Button>Content</Button>
-        </Buttons>
-      ))
+      shallowToJson(
+        shallow(
+          <Buttons fullWidth>
+            <Button>Content</Button>
+          </Buttons>,
+        ),
+      ),
     ).toMatchSnapshot();
   });
 
   test('joined', () => {
     expect(
-      shallowToJson(shallow(
-        <Buttons joined>
-          <Button>Content</Button>
-        </Buttons>
-      ))
+      shallowToJson(
+        shallow(
+          <Buttons joined>
+            <Button>Content</Button>
+          </Buttons>,
+        ),
+      ),
     ).toMatchSnapshot();
   });
 });

package/src/Button/Buttons.tsx

@@ -5,6 +5,7 @@ import Flex, { Props as FlexProps } from '../Flex/Flex';
 export interface Props extends FlexProps {
   /** */
   fullWidth?: boolean;
+  gap?: FlexProps['gap'];
   /** Connects any child components, when not provided they will be spaced out a little bit. */
   joined?: boolean;
 }
@@ -17,10 +18,12 @@ const Buttons: React.FunctionComponent<Props> = (props: Props) => {
   });
 
   return (
-    <Flex { ...rest }
-        className={ classes }
-        direction={ fullWidth ? 'vertical' : 'horizontal' }
-        gap={ joined && !fullWidth ? undefined : gap } />
+    <Flex
+      {...rest}
+      className={classes}
+      direction={fullWidth ? 'vertical' : 'horizontal'}
+      gap={joined && !fullWidth ? undefined : gap}
+    />
   );
 };
 

package/src/Button/ColorButton.test.tsx

@@ -6,9 +6,13 @@ import ColorButton from './ColorButton';
 describe('ColorButton', () => {
   test('default template', () => {
     expect(
-      shallowToJson(shallow(
-        <ColorButton color="blue" size="small">Content</ColorButton>
-      ))
+      shallowToJson(
+        shallow(
+          <ColorButton color="blue" size="small">
+            Content
+          </ColorButton>,
+        ),
+      ),
     ).toMatchSnapshot();
   });
 });

package/src/Button/ColorButton.tsx

@@ -19,22 +19,12 @@ export interface Props extends FlexProps {
  *
  */
 const ColorButton: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    color,
-    size,
-    ...rest
-  } = props;
+  const { color, size, ...rest } = props;
 
-  const classes = classnames('ColorButton',
-    `ColorButton--color-${color}`,
-    `ColorButton--size-${size}`);
+  const classes = classnames('ColorButton', `ColorButton--color-${color}`, `ColorButton--size-${size}`);
 
   return (
-    <Flex Component="button" { ...rest }
-        alignChildren="middle"
-        className={ classes }
-        direction="horizontal"
-        gap="x1" />
+    <Flex Component="button" {...rest} alignChildren="middle" className={classes} direction="horizontal" gap="x1" />
   );
 };