@bitrise/bitkit 9.3.0-alpha.4 → 9.4.0

package/site/components/PropsTable/PropsTable.tsx

@@ -12,29 +12,24 @@ interface Props extends TableProps {
 }
 
 const PropsTable: React.SFC<Props> = ({ composes, displayName, props = {}, ...rest }: Props) => {
-
   if (Object.keys(props).length === 0) {
     return (
       <Text margin="x1" size="2" textColor="gray-5">
-        This component has no props to
-        show { composes && composes.length && `, however it extends ${composes.join(', ')}` }.
+        This component has no props to show{' '}
+        {composes && composes.length && `, however it extends ${composes.join(', ')}`}.
       </Text>
     );
   }
 
   return (
-    <Table { ...rest }>
+    <Table {...rest}>
       <TableBody>
-        { Object.entries(props).map(([propName, prop]) => (
-          <PropsTableRow { ...prop }
-              id={ `${displayName}-${propName}` }
-              key={ propName }
-              name={ propName } />
-        )) }
+        {Object.entries(props).map(([propName, prop]) => (
+          <PropsTableRow {...prop} id={`${displayName}-${propName}`} key={propName} name={propName} />
+        ))}
       </TableBody>
     </Table>
   );
 };
 
-
 export default PropsTable;

package/site/components/PropsTable/PropsTableCellUnion.tsx

@@ -1,10 +1,5 @@
 import * as React from 'react';
-import {
-  FlowElementsType,
-  FlowLiteralType,
-  FlowTypeDescriptor,
-  PropDescriptor,
-} from 'react-docgen';
+import { FlowElementsType, FlowLiteralType, FlowTypeDescriptor, PropDescriptor } from 'react-docgen';
 import { Text } from '@bitrise/bitkit';
 
 interface Props extends PropDescriptor {
@@ -20,8 +15,7 @@ const elementFormatter = (element: FlowTypeDescriptor) => {
     default:
       return element.name;
   }
-}
-;
+};
 const PropsTableCellUnion: React.SFC<Props> = (props: Props) => {
   const { flowType } = props;
 
@@ -29,11 +23,7 @@ const PropsTableCellUnion: React.SFC<Props> = (props: Props) => {
     return null;
   }
 
-  return (
-    <Text size="2">
-      { flowType.elements.map(elementFormatter).join(' | ') }
-    </Text>
-  );
+  return <Text size="2">{flowType.elements.map(elementFormatter).join(' | ')}</Text>;
 };
 
 export default PropsTableCellUnion;

package/site/components/PropsTable/PropsTableRow.tsx

@@ -19,35 +19,35 @@ const PropsTableRow: React.SFC<Props> = (props: Props) => {
   const TypeCell = flowType && CellMap[flowType.name as FlowTypeName];
 
   return (
-    <TableRow { ...rest }>
+    <TableRow {...rest}>
       <TableCell>
         <Flex alignChildrenVertical="middle" direction="horizontal" gap="x2">
           <Flex>
-            <Text>{ name }</Text>
+            <Text>{name}</Text>
           </Flex>
 
-          { required && (
+          {required && (
             <Flex>
-              <Text size="1" textColor="red-3" uppercase>[Required]</Text>
+              <Text size="1" textColor="red-3" uppercase>
+                [Required]
+              </Text>
             </Flex>
-          ) }
+          )}
         </Flex>
 
-        <Text size="2">{ description }</Text>
+        <Text size="2">{description}</Text>
       </TableCell>
 
       <TableCell>
-        { flowType && flowType.name }
-        { defaultValue && (
+        {flowType && flowType.name}
+        {defaultValue && (
           <Text breakOn="none" size="2" textColor="gray-5">
-            Default Value: { defaultValue.value }
+            Default Value: {defaultValue.value}
           </Text>
-        ) }
+        )}
       </TableCell>
 
-      <TableCell>
-        { TypeCell && <TypeCell { ...props } /> }
-      </TableCell>
+      <TableCell>{TypeCell && <TypeCell {...props} />}</TableCell>
     </TableRow>
   );
 };

package/site/components/Root/Root.tsx

@@ -6,14 +6,9 @@ import Documentation from '../Documentation/Documentation';
 const Root = () => {
   return (
     <Flex direction="vertical" grow maxWidth="75rem" paddingHorizontal="x6">
-      <Flex
-          Component="header"
-          alignChildrenVertical="middle"
-          direction="horizontal"
-          gap="x6"
-          paddingVertical="x6">
+      <Flex Component="header" alignChildrenVertical="middle" direction="horizontal" gap="x6" paddingVertical="x6">
         <Flex grow>
-          <Link Component={ RouterLink } color="grape-5" to="/">
+          <Link Component={RouterLink} color="grape-5" to="/">
             <Flex alignChildrenVertical="middle" direction="horizontal" gap="x2">
               <Flex>
                 <Icon name="Bitbot" />
@@ -29,11 +24,11 @@ const Root = () => {
         <Flex>
           <Tabs>
             <Route path="/documentation">
-              { ({ match }) => (
-                <Tab active={ !!match } to="/documentation">
+              {({ match }) => (
+                <Tab active={!!match} to="/documentation">
                   Documentation
                 </Tab>
-              ) }
+              )}
             </Route>
           </Tabs>
         </Flex>
@@ -41,7 +36,7 @@ const Root = () => {
 
       <Flex direction="vertical" grow paddingVertical="x6">
         <Switch>
-          <Route component={ Documentation } path="/documentation" />
+          <Route component={Documentation} path="/documentation" />
           <Redirect to="/documentation" />
         </Switch>
       </Flex>
@@ -50,19 +45,13 @@ const Root = () => {
         <Flex alignChildren="middle" direction="vertical" margin="x4">
           <Icon margin="x2" name="Bitbot" size="3rem" />
 
-          <Text
-              letterSpacing="x5"
-              size="1"
-              uppercase>
+          <Text letterSpacing="x5" size="1" uppercase>
             Bitkit
           </Text>
 
           <Flex direction="horizontal" gap="x1">
             <Flex>
-              <Text
-                  letterSpacing="x5"
-                  size="1"
-                  uppercase>
+              <Text letterSpacing="x5" size="1" uppercase>
                 Built with
               </Text>
             </Flex>
@@ -72,38 +61,23 @@ const Root = () => {
             </Flex>
 
             <Flex>
-              <Text
-                  letterSpacing="x5"
-                  size="1"
-                  uppercase>
+              <Text letterSpacing="x5" size="1" uppercase>
                 in London & Budapest
               </Text>
             </Flex>
           </Flex>
         </Flex>
 
-        <Flex
-            alignChildren="middle"
-            direction="horizontal"
-            gap="x4"
-            margin="x4">
+        <Flex alignChildren="middle" direction="horizontal" gap="x4" margin="x4">
           <Flex>
-            <Link
-                color="gray-5"
-                href="https://github.com/bitrise-io/bitkit"
-                target="BitkitGithub">
-              <Image
-                  src="https://img.shields.io/bitrise/32b14416be4b7b24?token=HajDQ5RghA58-GjGCjGPMA" />
+            <Link color="gray-5" href="https://github.com/bitrise-io/bitkit" target="BitkitGithub">
+              <Image src="https://img.shields.io/bitrise/32b14416be4b7b24?token=HajDQ5RghA58-GjGCjGPMA" />
             </Link>
           </Flex>
 
           <Flex>
-            <Link
-                color="gray-5"
-                href="https://www.npmjs.com/package/@bitrise/bitkit"
-                target="BitkitNPM">
-              <Image
-                  src="https://img.shields.io/npm/v/@bitrise/bitkit" />
+            <Link color="gray-5" href="https://www.npmjs.com/package/@bitrise/bitkit" target="BitkitNPM">
+              <Image src="https://img.shields.io/npm/v/@bitrise/bitkit" />
             </Link>
           </Flex>
         </Flex>

package/site/components/Sandbox/Sandbox.tsx

@@ -8,10 +8,10 @@ import SectionStatusSandbox500 from '../Documentation/Components/SectionStatusSa
 const Sandbox = () => {
   return (
     <Switch>
-      <Route component={ SectionAddonBeamSandbox } path="/sandbox/addonbeam" />
-      <Route component={ SectionRibbonSandbox } path="/sandbox/ribbon" />
-      <Route component={ SectionStatusSandbox404 } path="/sandbox/status404" />
-      <Route component={ SectionStatusSandbox500 } path="/sandbox/status500" />
+      <Route component={SectionAddonBeamSandbox} path="/sandbox/addonbeam" />
+      <Route component={SectionRibbonSandbox} path="/sandbox/ribbon" />
+      <Route component={SectionStatusSandbox404} path="/sandbox/status404" />
+      <Route component={SectionStatusSandbox500} path="/sandbox/status500" />
     </Switch>
   );
 };

package/site/components/Sandbox/SandboxFrame.css

@@ -6,7 +6,7 @@
 .Sandbox__frame-content {
   position: relative;
   padding-right: var(--size--x4);
-  border-left: 0.0625rem solid var(--bitkit-colors-gray-2);
+  border-left: 0.0625rem solid var(--color-gray--2);
 }
 
 .Sandbox__frame-handle {
@@ -14,7 +14,7 @@
   top: 0;
   right: 0;
   bottom: 0;
-  border-left: 0.0625rem solid var(--bitkit-colors-gray-2);
-  background-color: var(--bitkit-colors-gray-1);
+  border-left: 0.0625rem solid var(--color-gray--2);
+  background-color: var(--color-gray--1);
   cursor: col-resize;
 }

package/site/components/Sandbox/SandboxFrame.tsx

@@ -42,36 +42,31 @@ const SandboxFrame = (props: Props) => {
     if (isDragging.current && refContainer.current && refContent.current) {
       const containerWidth = refContainer.current.clientWidth;
       const dx = xStart.current - clientX;
-      const p = Math.max(0, Math.min(1, ((refContentWidth.current / 2) - dx) / (containerWidth / 2)));
+      const p = Math.max(0, Math.min(1, (refContentWidth.current / 2 - dx) / (containerWidth / 2)));
 
       refContent.current.style.width = `${p * 100}%`;
     }
   });
 
   return (
-    <Flex { ...rest }
-        alignChildrenHorizontal="middle"
-        backgroundColor="black"
-        className="Sandbox__frame"
-        direction="horizontal"
-        grow
-        innerRef={ refContainer }>
-      <Flex
-          className="Sandbox__frame-content"
-          direction="horizontal"
-          elevation="x2"
-          innerRef={ refContent }
-          width="100%">
-        <Flex Component="iframe" { ...rest }
-            className="Sandbox__iframe"
-            grow
-            src={ src } />
+    <Flex
+      {...rest}
+      alignChildrenHorizontal="middle"
+      backgroundColor="black"
+      className="Sandbox__frame"
+      direction="horizontal"
+      grow
+      innerRef={refContainer}
+    >
+      <Flex className="Sandbox__frame-content" direction="horizontal" elevation="x2" innerRef={refContent} width="100%">
+        <Flex Component="iframe" {...rest} className="Sandbox__iframe" grow src={src} />
 
         <Flex
-            alignChildren="middle"
-            className="Sandbox__frame-handle"
-            direction="vertical"
-            onMouseDown={ handleMouseDown }>
+          alignChildren="middle"
+          className="Sandbox__frame-handle"
+          direction="vertical"
+          onMouseDown={handleMouseDown}
+        >
           <Icon name="Pause" size="1rem" />
         </Flex>
       </Flex>

package/site/components/Section/Section.tsx

@@ -2,9 +2,7 @@ import * as React from 'react';
 import { Base, BaseProps } from '@bitrise/bitkit';
 
 const Section: React.SFC<BaseProps> = (props: BaseProps) => {
-  return (
-    <Base { ...props } margin="x4" />
-  );
+  return <Base {...props} margin="x4" />;
 };
 
 export default Section;

package/site/components/Section/SectionSubTitle.tsx

@@ -2,12 +2,7 @@ import * as React from 'react';
 import { Text, TextProps } from '@bitrise/bitkit';
 
 const SectionSubTitle: React.SFC<TextProps> = (props: TextProps) => {
-  return (
-    <Text { ...props }
-        margin="x3"
-        size="2"
-        uppercase />
-  );
+  return <Text {...props} margin="x3" size="2" uppercase />;
 };
 
 export default SectionSubTitle;

package/site/components/Section/SectionTitle.tsx

@@ -2,13 +2,7 @@ import * as React from 'react';
 import { Text, TextProps } from '@bitrise/bitkit';
 
 const SectionTitle: React.SFC<TextProps> = (props: TextProps) => {
-  return (
-    <Text { ...props }
-        margin="x6"
-        size="5"
-        textColor="grape-4"
-        weight="bold" />
-  );
+  return <Text {...props} margin="x6" size="5" textColor="grape-4" weight="bold" />;
 };
 
 export default SectionTitle;

package/site/components/SideMenu/SideMenu.css

@@ -1,5 +1,5 @@
 .SideMenu {
-  color: var(--bitkit-colors-gray-5);
+  color: var(--color-gray--5);
   transition-property: background-color;
   transition-duration: var(--transition-duration--fast);
   transition-timing-function: var(--transition-timing-function);
@@ -18,8 +18,8 @@
 }
 
 .SideMenu--active .SideMenu__link-text {
-  border-bottom-color: var(--bitkit-colors-aqua-3);
-  color: var(--bitkit-colors-aqua-3);
+  border-bottom-color: var(--color-aqua--3);
+  color: var(--color-aqua--3);
 }
 
 .SideMenu__item {
@@ -30,10 +30,10 @@
   transition-timing-function: var(--transition-timing-function);
 
   &:hover {
-    color: var(--bitkit-colors-aqua-3);
+    color: var(--color-aqua--3);
   }
 }
 
 .SideMenu__item--active {
-  border-bottom: 0.125rem solid var(--bitkit-colors-aqua-3);
+  border-bottom: 0.125rem solid var(--color-aqua--3);
 }

package/site/components/SideMenu/SideMenu.tsx

@@ -18,36 +18,34 @@ const SideMenu: React.SFC<Props> = (props: Props) => {
   });
 
   return (
-    <Base { ...rest } className={ classes } margin="x1">
+    <Base {...rest} className={classes} margin="x1">
       <VisibilityContainer
-          Component={ to ? Link : undefined }
-          alignChildrenVertical="middle"
-          className="SideMenu__link"
-          direction="horizontal"
-          enabled={ !active }
-          gap="x4"
-          to={ to }>
+        Component={to ? Link : undefined}
+        alignChildrenVertical="middle"
+        className="SideMenu__link"
+        direction="horizontal"
+        enabled={!active}
+        gap="x4"
+        to={to}
+      >
         <Flex grow initial="none">
           <Text className="SideMenu__link-text" inline>
-            { name }
+            {name}
           </Text>
         </Flex>
 
-        { children && (
-          <Visibility Component={ Flex }>
+        {children && (
+          <Visibility Component={Flex}>
             <Icon name="ChevronDown" />
           </Visibility>
-        ) }
+        )}
       </VisibilityContainer>
 
-      { children && (
-        <Expand
-            className="SideMenu__items"
-            expanded={ active }
-            paddingVertical="x2">
-          { children }
+      {children && (
+        <Expand className="SideMenu__items" expanded={active} paddingVertical="x2">
+          {children}
         </Expand>
-      ) }
+      )}
     </Base>
   );
 };

package/site/components/SideMenu/SideMenuItem.tsx

@@ -25,12 +25,8 @@ const SidebarMenuItem: React.SFC<Props> = (props: Props) => {
   };
 
   return (
-    <Base { ...rest }
-        Component={ to ? Link : undefined }
-        className={ classes }
-        onClick={ handleClick }
-        to={ to }>
-      { children }
+    <Base {...rest} Component={to ? Link : undefined} className={classes} onClick={handleClick} to={to}>
+      {children}
     </Base>
   );
 };

package/site/components/Window/Window.tsx

@@ -21,21 +21,9 @@ const Window: React.FunctionComponent<Props> = (props: Props) => {
   };
 
   return (
-    <Flex { ...rest }
-        borderRadius="x2"
-        direction="vertical"
-        innerRef={ refFullscreen }
-        overflow="hidden">
-      <Flex
-          alignChildrenVertical="middle"
-          direction="horizontal"
-          gap="x4"
-          paddingHorizontal="x4"
-          paddingVertical="x3">
-        <Flex
-            alignChildrenVertical="middle"
-            direction="horizontal"
-            gap="x2">
+    <Flex {...rest} borderRadius="x2" direction="vertical" innerRef={refFullscreen} overflow="hidden">
+      <Flex alignChildrenVertical="middle" direction="horizontal" gap="x4" paddingHorizontal="x4" paddingVertical="x3">
+        <Flex alignChildrenVertical="middle" direction="horizontal" gap="x2">
           <Flex>
             <Dot backgroundColor="red-3" size="0.5rem" />
           </Flex>
@@ -50,11 +38,13 @@ const Window: React.FunctionComponent<Props> = (props: Props) => {
         </Flex>
 
         <Flex grow initial="none">
-          <Text ellipsis size="2">{ title }</Text>
+          <Text ellipsis size="2">
+            {title}
+          </Text>
         </Flex>
 
         <Flex>
-          <Link onClick={ handleOnFullscreen }>
+          <Link onClick={handleOnFullscreen}>
             <Icon name="Fullscreen" size="1rem" />
           </Link>
         </Flex>
@@ -63,7 +53,7 @@ const Window: React.FunctionComponent<Props> = (props: Props) => {
       <Divider color="gray-2" direction="horizontal" elevation="x2" width="0.0625rem" />
 
       <Flex direction="vertical" grow>
-        { children }
+        {children}
       </Flex>
     </Flex>
   );

package/site/index.tsx

@@ -8,9 +8,9 @@ import './index.css';
 render(
   <BrowserRouter>
     <Switch>
-      <Route component={ Sandbox } path="/sandbox" />
-      <Route component={ Root } path="/"/>
+      <Route component={Sandbox} path="/sandbox" />
+      <Route component={Root} path="/" />
     </Switch>
   </BrowserRouter>,
-  document.getElementById('Root')
+  document.getElementById('Root'),
 );

package/src/AddonBeam/AddonBeam.css

@@ -15,6 +15,6 @@
   transition-timing-function: var(--transition-timing-function);
 
   &:hover {
-    background-color: rgba(var(--rgb-grape-1), 0.2);
+    background-color: rgba(var(--rgb-grape--1), 0.2);
   }
 }