@bitrise/bitkit 9.3.0 → 9.3.1

package/site/components/Documentation/Components/SectionRibbon.tsx

@@ -9,22 +9,23 @@ const SectionRibbon = () => {
   return (
     <Section>
       <Window
-          backgroundColor="gray-1"
-          borderColor="gray-2"
-          borderWidth="x1"
-          elevation="x2"
-          textColor="grape-5"
-          title="Responsive Ribbon">
+        backgroundColor="gray-1"
+        borderColor="gray-2"
+        borderWidth="x1"
+        elevation="x2"
+        textColor="grape-5"
+        title="Responsive Ribbon"
+      >
         <SandboxFrame minHeight="200px" src="/sandbox/ribbon" />
       </Window>
 
-      <CodeBlock title="Ribbon usage example">{ `const Component = () => (
+      <CodeBlock title="Ribbon usage example">{`const Component = () => (
   <Ribbon type="warning" onRemove={ () => {} }>
     <Text align="middle">
       Ribbon text.
     </Text>
   </Ribbon>
-);` }</CodeBlock>
+);`}</CodeBlock>
     </Section>
   );
 };

package/site/components/Documentation/Components/SectionRibbonSandbox.tsx

@@ -5,7 +5,7 @@ import Section from '../../Section/Section';
 const SectionRibbonSandbox = () => {
   return (
     <Section>
-      <Ribbon onRemove={ () => {} } type="warning">
+      <Ribbon onRemove={() => {}} type="warning">
         <Text align="middle">
           13 days, 3 hours and 25 minutes left from your two-week Development trial. <Link underline>More info</Link>
         </Text>

package/site/components/Documentation/Components/SectionSidebar.tsx

@@ -20,52 +20,40 @@ const SectionSidebar = () => {
   return (
     <Section>
       <Flex direction="horizontal" gap="x6">
-        { (['dark', 'light'] as ('dark' | 'light')[]).map((theme) => (
-          <Flex
-              container
-              direction="vertical"
-              grow
-              height="30rem"
-              initial="none"
-              key={ theme }>
-            <Text margin="x3" size="2">{ theme }</Text>
-            <Sidebar theme={ theme }>
-              <SidebarMenu active={ active === '1' }>
-                <SidebarMenuItem
-                    icon="BuildstatusLoading"
-                    onClick={ () => setActive('1') }>MenuItem</SidebarMenuItem>
+        {(['dark', 'light'] as ('dark' | 'light')[]).map((theme) => (
+          <Flex container direction="vertical" grow height="30rem" initial="none" key={theme}>
+            <Text margin="x3" size="2">
+              {theme}
+            </Text>
+            <Sidebar theme={theme}>
+              <SidebarMenu active={active === '1'}>
+                <SidebarMenuItem icon="BuildstatusLoading" onClick={() => setActive('1')}>
+                  MenuItem
+                </SidebarMenuItem>
               </SidebarMenu>
 
-              <SidebarMenu active={ active.startsWith('2') }>
-                <SidebarMenuItem
-                    icon="BuildstatusLoading"
-                    onClick={ () => setActive('2') }>MenuItem</SidebarMenuItem>
+              <SidebarMenu active={active.startsWith('2')}>
+                <SidebarMenuItem icon="BuildstatusLoading" onClick={() => setActive('2')}>
+                  MenuItem
+                </SidebarMenuItem>
 
                 <SidebarSubMenu>
-                  <SidebarSubMenuItem
-                      active={ active === '2/1' }
-                      onClick={ () => setActive('2/1') }>
+                  <SidebarSubMenuItem active={active === '2/1'} onClick={() => setActive('2/1')}>
                     SubMenuItem
                   </SidebarSubMenuItem>
 
-                  <SidebarSubMenuItem
-                      active={ active === '2/2' }
-                      onClick={ () => setActive('2/2') }>
+                  <SidebarSubMenuItem active={active === '2/2'} onClick={() => setActive('2/2')}>
                     SubMenuItem
                   </SidebarSubMenuItem>
 
-                  <SidebarSubMenuItem
-                      active={ active === '2/3' }
-                      onClick={ () => setActive('2/3') }>
+                  <SidebarSubMenuItem active={active === '2/3'} onClick={() => setActive('2/3')}>
                     SubMenuItem
                   </SidebarSubMenuItem>
                 </SidebarSubMenu>
               </SidebarMenu>
 
-              <SidebarMenu active={ active.startsWith('3') }>
-                <SidebarMenuItem
-                    icon="BuildstatusLoading"
-                    onClick={ () => setActive('3') }>
+              <SidebarMenu active={active.startsWith('3')}>
+                <SidebarMenuItem icon="BuildstatusLoading" onClick={() => setActive('3')}>
                   <Flex direction="horizontal" gap="x2">
                     <Flex>MenuItem</Flex>
                     <Flex>
@@ -77,32 +65,25 @@ const SectionSidebar = () => {
                 </SidebarMenuItem>
 
                 <SidebarSubMenu>
-                  <SidebarSubMenuItem
-                      active={ active === '3/1' }
-                      onClick={ () => setActive('3/1') }>
+                  <SidebarSubMenuItem active={active === '3/1'} onClick={() => setActive('3/1')}>
                     SubMenuItem
                   </SidebarSubMenuItem>
 
-                  <SidebarSubMenuItem
-                      active={ active === '3/2' }
-                      onClick={ () => setActive('3/2') }>
+                  <SidebarSubMenuItem active={active === '3/2'} onClick={() => setActive('3/2')}>
                     SubMenuItem
                   </SidebarSubMenuItem>
 
-                  <SidebarSubMenuItem
-                      active={ active === '3/3' }
-                      onClick={ () => setActive('3/3') }>
+                  <SidebarSubMenuItem active={active === '3/3'} onClick={() => setActive('3/3')}>
                     SubMenuItem
                   </SidebarSubMenuItem>
                 </SidebarSubMenu>
               </SidebarMenu>
             </Sidebar>
           </Flex>
-        )) }
+        ))}
       </Flex>
 
-      <CodeBlock title="Sidebar Usage Example">{
-`const Component = () => {
+      <CodeBlock title="Sidebar Usage Example">{`const Component = () => {
   const [active, setActive] = useState();
 
   return (
@@ -136,9 +117,7 @@ const SectionSidebar = () => {
       </SidebarMenu>
     </Sidebar>
   );
-};`
-      }</CodeBlock>
-
+};`}</CodeBlock>
     </Section>
   );
 };

package/site/components/Documentation/Components/SectionSkeleton.tsx

@@ -7,14 +7,13 @@ const SectionSkeleton = () => {
   return (
     <Section>
       <Text>
-        The Skeleton pattern is a great alternative to showing a loading
-        spinner, by inserting similar shaped placeholders to the content
-        that will eventually be shown when it becomes available.
+        The Skeleton pattern is a great alternative to showing a loading spinner, by inserting similar shaped
+        placeholders to the content that will eventually be shown when it becomes available.
       </Text>
 
       <Flex direction="horizontal" gap="x6" margin="x6">
-        { Array.from({ length: 2 }).map((_, i) => (
-          <Flex grow initial="none" key={ i }>
+        {Array.from({ length: 2 }).map((_, i) => (
+          <Flex grow initial="none" key={i}>
             <Skeleton active>
               <Card direction="vertical">
                 <CardContent padding="x4">
@@ -42,12 +41,12 @@ const SectionSkeleton = () => {
               </Card>
             </Skeleton>
           </Flex>
-        )) }
+        ))}
       </Flex>
 
       <Flex direction="horizontal" gap="x6">
-        { Array.from({ length: 4 }).map((_, i) => (
-          <Flex grow initial="none" key={ i }>
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Flex grow initial="none" key={i}>
             <Skeleton active>
               <Card direction="vertical">
                 <CardContent padding="x4">
@@ -62,12 +61,10 @@ const SectionSkeleton = () => {
               </Card>
             </Skeleton>
           </Flex>
-        )) }
+        ))}
       </Flex>
 
-
-      <CodeBlock title="Skeleton Usage Example">{
-`const Component = () => (
+      <CodeBlock title="Skeleton Usage Example">{`const Component = () => (
   <Skeleton active>
     <Card direction="vertical">
       <CardContent padding="x4">
@@ -94,8 +91,7 @@ const SectionSkeleton = () => {
       </CardContent>
     </Card>
   </Skeleton>
-);`
-      }</CodeBlock>
+);`}</CodeBlock>
     </Section>
   );
 };

package/site/components/Documentation/Components/SectionStatus.tsx

@@ -12,46 +12,40 @@ const SectionStatus = () => {
   return (
     <Section>
       <Tabs gap="x6" margin="x4">
-        <Tab
-            active={ selectedTab === 1 }
-            onClick={ () => setSelectedTab(1) }>
+        <Tab active={selectedTab === 1} onClick={() => setSelectedTab(1)}>
           404 - Not Found
         </Tab>
 
-        <Tab
-            active={ selectedTab === 2 }
-            onClick={ () => setSelectedTab(2) }>
+        <Tab active={selectedTab === 2} onClick={() => setSelectedTab(2)}>
           500 - Server Error
         </Tab>
       </Tabs>
 
-      { selectedTab === 1 && (
+      {selectedTab === 1 && (
         <Window
-            backgroundColor="gray-1"
-            borderColor="gray-2"
-            borderWidth="x1"
-            elevation="x2"
-            textColor="grape-5"
-            title="404 - NotFound">
-          <SandboxFrame
-              minHeight="600px"
-              src="/sandbox/status404" />
+          backgroundColor="gray-1"
+          borderColor="gray-2"
+          borderWidth="x1"
+          elevation="x2"
+          textColor="grape-5"
+          title="404 - NotFound"
+        >
+          <SandboxFrame minHeight="600px" src="/sandbox/status404" />
         </Window>
-      ) }
+      )}
 
-      { selectedTab === 2 && (
+      {selectedTab === 2 && (
         <Window
-            backgroundColor="gray-1"
-            borderColor="gray-2"
-            borderWidth="x1"
-            elevation="x2"
-            textColor="grape-5"
-            title="500 - Server Error">
-          <SandboxFrame
-              minHeight="600px"
-              src="/sandbox/status500" />
+          backgroundColor="gray-1"
+          borderColor="gray-2"
+          borderWidth="x1"
+          elevation="x2"
+          textColor="grape-5"
+          title="500 - Server Error"
+        >
+          <SandboxFrame minHeight="600px" src="/sandbox/status500" />
         </Window>
-      ) }
+      )}
     </Section>
   );
 };

package/site/components/Documentation/Components/SectionStatusSandbox404.tsx

@@ -7,11 +7,7 @@ const SectionStatus404Example = () => {
   const match = useMediaQuery(['864px']);
 
   return (
-    <Flex
-        backgroundColor="grape-5"
-        grow
-        paddingVertical="x16"
-        textColor="aqua-1">
+    <Flex backgroundColor="grape-5" grow paddingVertical="x16" textColor="aqua-1">
       <Status404 />
 
       <Base paddingHorizontal="x6">
@@ -20,9 +16,10 @@ const SectionStatus404Example = () => {
         </Text>
 
         <Buttons
-            alignChildren={ match('864px') ? 'middle' : undefined }
-            fullWidth={ !match('864px') }
-            gap={ match('864px') ? 'x6' : 'x3' }>
+          alignChildren={match('864px') ? 'middle' : undefined}
+          fullWidth={!match('864px')}
+          gap={match('864px') ? 'x6' : 'x3'}
+        >
           <ColorButton color="white" size="large">
             Switch Account
           </ColorButton>

package/site/components/Documentation/Components/SectionStatusSandbox500.tsx

@@ -3,11 +3,7 @@ import { AddonFooter, Flex, Status500 } from '@bitrise/bitkit';
 
 const SectionStatus500Example = () => {
   return (
-    <Flex
-        backgroundColor="grape-5"
-        grow
-        paddingVertical="x16"
-        textColor="aqua-1">
+    <Flex backgroundColor="grape-5" grow paddingVertical="x16" textColor="aqua-1">
       <Status500 />
       <AddonFooter addonName="Ship" margin="x16" />
     </Flex>

package/site/components/Documentation/Components/SectionTable.tsx

@@ -26,13 +26,13 @@ const SectionTable = () => {
               <TableHeaderCell>Trace Name</TableHeaderCell>
               <TableHeaderCell align="middle">Duration</TableHeaderCell>
               <TableHeaderCell align="middle">Sample</TableHeaderCell>
-              <TableHeaderCell></TableHeaderCell>
+              <TableHeaderCell />
             </TableHeaderRow>
           </TableHeader>
 
           <TableBody>
-            { Array.from({ length: 10 }).map((_, i) => (
-              <TableRow key={ i }>
+            {Array.from({ length: 10 }).map((_, i) => (
+              <TableRow key={i}>
                 <TableCell>UIControllerName</TableCell>
                 <TableCell align="middle">23 443 sec</TableCell>
                 <TableCell align="middle">12 987</TableCell>
@@ -43,7 +43,7 @@ const SectionTable = () => {
                   </Button>
                 </TableCell>
               </TableRow>
-            )) }
+            ))}
           </TableBody>
         </Table>
       </Base>
@@ -55,13 +55,13 @@ const SectionTable = () => {
               <TableHeaderCell>Trace Name</TableHeaderCell>
               <TableHeaderCell align="middle">Duration</TableHeaderCell>
               <TableHeaderCell align="middle">Sample</TableHeaderCell>
-              <TableHeaderCell></TableHeaderCell>
+              <TableHeaderCell />
             </TableHeaderRow>
           </TableHeader>
 
           <TableBody>
-            { Array.from({ length: 10 }).map((_, i) => (
-              <TableRow key={ i }>
+            {Array.from({ length: 10 }).map((_, i) => (
+              <TableRow key={i}>
                 <TableCell>UIControllerName</TableCell>
                 <TableCell align="middle">23 443 sec</TableCell>
                 <TableCell align="middle">12 987</TableCell>
@@ -72,7 +72,7 @@ const SectionTable = () => {
                   </Button>
                 </TableCell>
               </TableRow>
-            )) }
+            ))}
           </TableBody>
         </Table>
       </Base>

package/site/components/Documentation/Components/SectionTabs.tsx

@@ -10,13 +10,13 @@ const SectionTabs = () => {
   return (
     <Section>
       <Tabs>
-        <Tab
-            active={ active === 0 }
-            onClick={ () => setActive(0) }>Metrics</Tab>
+        <Tab active={active === 0} onClick={() => setActive(0)}>
+          Metrics
+        </Tab>
 
-        <Tab
-            active={ active === 1 }
-            onClick={ () => setActive(1) }>Sessions</Tab>
+        <Tab active={active === 1} onClick={() => setActive(1)}>
+          Sessions
+        </Tab>
       </Tabs>
     </Section>
   );

package/site/components/Documentation/Components/SectionText.tsx

@@ -6,28 +6,27 @@ import Section from '../../Section/Section';
 const SectionText = () => {
   return (
     <Section paddingVertical="x8">
-      <Text align="middle" margin="x2" size="6" weight="bold">The spectacle before us was indeed sublime.</Text>
+      <Text align="middle" margin="x2" size="6" weight="bold">
+        The spectacle before us was indeed sublime.
+      </Text>
       <Text align="middle" margin="x2">
-        Apparently we had reached a great height in the atmosphere,
-        for the sky was a dead black, and the stars had ceased to twinkle.
-        By the same illusion which lifts the horizon of the sea to the
-        level of the spectator on a hillside, the sable cloud beneath
-        was dished out, and the car seemed to float in the middle of an
-        immense dark sphere, whose upper half was strewn with silver.
-        Looking down into the dark gulf below, I could see a ruddy light
-        streaming through a rift in the clouds.
+        Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had
+        ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a
+        hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark
+        sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy
+        light streaming through a rift in the clouds.
+      </Text>
+      <Text align="middle" margin="x4" size="6" uppercase weight="bold">
+        Bitbot
       </Text>
-      <Text align="middle" margin="x4" size="6" uppercase weight="bold">Bitbot</Text>
 
-      <CodeBlock title="Text Usage Example">{
-`const Component = () => (
+      <CodeBlock title="Text Usage Example">{`const Component = () => (
   <React.Fragment>
     <Text align="middle" margin="x2" size="6" weight="bold">...</Text>
     <Text align="middle" margin="x2" size="7">...</Text>
     <Text align="middle" margin="x4" size="6" weight="bold">...</Text>
   </React.Fragment>
-);`
-      }</CodeBlock>
+);`}</CodeBlock>
     </Section>
   );
 };

package/site/components/Documentation/Components/SectionTextarea.tsx

@@ -10,19 +10,18 @@ const SectionTextarea = () => {
       <Base margin="x6">
         <SectionSubTitle>Simple text area</SectionSubTitle>
 
-        <Textarea></Textarea>
+        <Textarea />
       </Base>
 
       <Base margin="x6">
         <SectionSubTitle>Text area with input label and inline help</SectionSubTitle>
 
         <InputLabel>How could be improve our services? *</InputLabel>
-        <Textarea placeholder="Your feedback"></Textarea>
+        <Textarea placeholder="Your feedback" />
         <InputInlineHelp>* Type in at least 8 characters</InputInlineHelp>
       </Base>
 
-      <CodeBlock title="Textarea usage example">{
-        `const Component = () => (
+      <CodeBlock title="Textarea usage example">{`const Component = () => (
 <Flex margin="x3">
   <InputLabel>
     How could be improve our services? *
@@ -36,8 +35,7 @@ const SectionTextarea = () => {
     * Type in at least 8 characters
   </InputInlineHelp>
 </Flex>
-);`
-      }</CodeBlock>
+);`}</CodeBlock>
     </Section>
   );
 };

package/site/components/Documentation/Components/SectionToggle.tsx

@@ -12,26 +12,25 @@ const SectionToggle = () => {
 
   return (
     <Section>
-      <Flex direction={ match('896px') ? 'horizontal' : 'vertical' } gap="x12" margin="x12">
-        <Flex grow initial={ match('896px') ? 'none' : 'content' }>
+      <Flex direction={match('896px') ? 'horizontal' : 'vertical'} gap="x12" margin="x12">
+        <Flex grow initial={match('896px') ? 'none' : 'content'}>
           <SectionSubTitle>Checked Toggle</SectionSubTitle>
           <Toggle defaultChecked>Label</Toggle>
         </Flex>
 
-        <Flex grow initial={ match('896px') ? 'none' : 'content' }>
+        <Flex grow initial={match('896px') ? 'none' : 'content'}>
           <SectionSubTitle>Unchecked Toggle</SectionSubTitle>
           <Toggle>Label</Toggle>
         </Flex>
       </Flex>
 
-      <CodeBlock title="Toggle usage example">{
-`const Component = () => (
+      <CodeBlock title="Toggle usage example">{`const Component = () => (
   const [checked, setChecked] = useState(false);
 
   <Toggle checked={ checked } onChange={ () => setChecked(!checked) }>
       Label
   </Toggle>
-);` }</CodeBlock>
+);`}</CodeBlock>
     </Section>
   );
 };

package/site/components/Documentation/Components/SectionTooltips.tsx

@@ -12,44 +12,34 @@ const SectionTooltips = () => {
 
   return (
     <Section>
-      <Flex
-          direction={ match('896px') ? 'horizontal' : 'vertical' }
-          gap="x12"
-          margin="x6">
-        <Flex grow initial={ match('896px') ? 'none' : 'content' }>
+      <Flex direction={match('896px') ? 'horizontal' : 'vertical'} gap="x12" margin="x6">
+        <Flex grow initial={match('896px') ? 'none' : 'content'}>
           <SectionSubTitle>Uncontrolled (Mouseover)</SectionSubTitle>
 
           <Flex direction="horizontal" gap="x6">
             <Flex>
               <Tooltip title="React!">
-                { ({ ref, ...rest }) => (
-                  <Icon { ...rest } innerRef={ ref } name="PlatformsReact" size="3rem" />
-                ) }
+                {({ ref, ...rest }) => <Icon {...rest} innerRef={ref} name="PlatformsReact" size="3rem" />}
               </Tooltip>
             </Flex>
 
             <Flex>
               <Tooltip title="Woooooooooooooow">
-                { ({ ref, ...rest }) => (
-                  <Icon { ...rest } innerRef={ ref } name="Wow" size="3rem" />
-                ) }
+                {({ ref, ...rest }) => <Icon {...rest} innerRef={ref} name="Wow" size="3rem" />}
               </Tooltip>
             </Flex>
           </Flex>
         </Flex>
 
-        <Flex grow initial={ match('896px') ? 'none' : 'content' }>
+        <Flex grow initial={match('896px') ? 'none' : 'content'}>
           <SectionSubTitle>Controlled (with state)</SectionSubTitle>
 
-          <Tooltip title="I'm being controlled!" visible={ visible }>
-            { ({ ref }) => (
-              <Button
-                  innerRef={ ref }
-                  level="primary"
-                  onClick={ () => setVisible(!visible) }>
-                { visible ? 'Hide Tooltip' : 'Show Tooltip' }
+          <Tooltip title="I'm being controlled!" visible={visible}>
+            {({ ref }) => (
+              <Button innerRef={ref} level="primary" onClick={() => setVisible(!visible)}>
+                {visible ? 'Hide Tooltip' : 'Show Tooltip'}
               </Button>
-            ) }
+            )}
           </Tooltip>
         </Flex>
       </Flex>