@bitrise/bitkit 9.3.0-alpha.4 → 9.4.0

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

@@ -23,11 +23,8 @@ const SectionFormElements = () => {
 
   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>Input Inactive</SectionSubTitle>
           <InputLabel>Text field label</InputLabel>
           <InputContainer>
@@ -37,7 +34,7 @@ const SectionFormElements = () => {
           </InputContainer>
         </Flex>
 
-        <Flex grow initial={ match('896px') ? 'none' : 'content' }>
+        <Flex grow initial={match('896px') ? 'none' : 'content'}>
           <SectionSubTitle>Input Invalid</SectionSubTitle>
           <InputLabel>Text field label</InputLabel>
           <InputContainer invalid>
@@ -47,7 +44,7 @@ const SectionFormElements = () => {
           </InputContainer>
         </Flex>
 
-        <Flex grow initial={ match('896px') ? 'none' : 'content' }>
+        <Flex grow initial={match('896px') ? 'none' : 'content'}>
           <SectionSubTitle>Input Disabled</SectionSubTitle>
           <InputLabel>Text field label</InputLabel>
           <InputContainer disabled>
@@ -58,11 +55,8 @@ const SectionFormElements = () => {
         </Flex>
       </Flex>
 
-      <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>Icon inside to the left</SectionSubTitle>
           <InputLabel>Text field label</InputLabel>
           <InputContainer>
@@ -73,7 +67,7 @@ const SectionFormElements = () => {
           </InputContainer>
         </Flex>
 
-        <Flex grow initial={ match('896px') ? 'none' : 'content' }>
+        <Flex grow initial={match('896px') ? 'none' : 'content'}>
           <SectionSubTitle>Icon inside to the right</SectionSubTitle>
           <InputLabel>Text field label</InputLabel>
           <InputContainer>
@@ -85,11 +79,8 @@ const SectionFormElements = () => {
         </Flex>
       </Flex>
 
-      <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>Icon outside to the left</SectionSubTitle>
           <InputLabel>Text field label</InputLabel>
           <InputContainer>
@@ -103,7 +94,7 @@ const SectionFormElements = () => {
           </InputContainer>
         </Flex>
 
-        <Flex grow initial={ match('896px') ? 'none' : 'content' }>
+        <Flex grow initial={match('896px') ? 'none' : 'content'}>
           <SectionSubTitle>Icon outside to the right</SectionSubTitle>
           <InputLabel>Text field label</InputLabel>
           <InputContainer>
@@ -118,17 +109,14 @@ const SectionFormElements = () => {
         </Flex>
       </Flex>
 
-      <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>Textarea</SectionSubTitle>
           <InputLabel>Textarea label</InputLabel>
           <Textarea placeholder="Placeholder..." rows="9" />
         </Flex>
 
-        <Flex grow initial={ match('896px') ? 'none' : 'content' }>
+        <Flex grow initial={match('896px') ? 'none' : 'content'}>
           <Base margin="x8">
             <SectionSubTitle>Textarea invalid</SectionSubTitle>
             <InputLabel>Textarea label</InputLabel>
@@ -143,51 +131,37 @@ const SectionFormElements = () => {
         </Flex>
       </Flex>
 
-      <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 Checkbox</SectionSubTitle>
-          <Checkbox defaultChecked>
-            Checkbox label
-          </Checkbox>
+          <Checkbox defaultChecked>Checkbox label</Checkbox>
         </Flex>
 
-        <Flex grow initial={ match('896px') ? 'none' : 'content' }>
+        <Flex grow initial={match('896px') ? 'none' : 'content'}>
           <SectionSubTitle>Unchecked Checkbox</SectionSubTitle>
-          <Checkbox>
-            Checkbox label
-          </Checkbox>
+          <Checkbox>Checkbox label</Checkbox>
         </Flex>
 
-        <Flex grow initial={ match('896px') ? 'none' : 'content' }>
+        <Flex grow initial={match('896px') ? 'none' : 'content'}>
           <SectionSubTitle>Disabled Checkbox</SectionSubTitle>
-          <Checkbox disabled>
-            Checkbox label
-          </Checkbox>
+          <Checkbox disabled>Checkbox label</Checkbox>
         </Flex>
       </Flex>
 
-      <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 Radio button</SectionSubTitle>
           <RadioButton defaultChecked name="radio">
             Radio button label
           </RadioButton>
         </Flex>
 
-        <Flex grow initial={ match('896px') ? 'none' : 'content' }>
+        <Flex grow initial={match('896px') ? 'none' : 'content'}>
           <SectionSubTitle>Unchecked Radio button</SectionSubTitle>
-          <RadioButton name="radio">
-            Radio button label
-          </RadioButton>
+          <RadioButton name="radio">Radio button label</RadioButton>
         </Flex>
 
-        <Flex grow initial={ match('896px') ? 'none' : 'content' }>
+        <Flex grow initial={match('896px') ? 'none' : 'content'}>
           <SectionSubTitle>Disabled Radio button</SectionSubTitle>
           <RadioButton disabled name="radio">
             Radio button label
@@ -195,16 +169,13 @@ const SectionFormElements = () => {
         </Flex>
       </Flex>
 
-      <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>Toggle Off</SectionSubTitle>
           <Toggle>Toggle label</Toggle>
         </Flex>
 
-        <Flex grow initial={ match('896px') ? 'none' : 'content' }>
+        <Flex grow initial={match('896px') ? 'none' : 'content'}>
           <SectionSubTitle>Toggle On</SectionSubTitle>
           <Toggle defaultChecked>Toggle label</Toggle>
         </Flex>

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

@@ -1,27 +1,16 @@
 import * as React from 'react';
 import shuffle from 'lodash.shuffle';
-import {
-  hooks,
-  variables,
-  Divider,
-  Flex,
-  Grid,
-  Icon,
-  Tab,
-  Tabs,
-  Text,
-  TypeColors,
-} from '@bitrise/bitkit';
+import { hooks, variables, Divider, Flex, Grid, Icon, Tab, Tabs, Text, TypeColors } from '@bitrise/bitkit';
 import CodeBlock from '../../CodeBlock/CodeBlock';
 import Section from '../../Section/Section';
 
 const { useState } = React;
 const { useMediaQuery } = hooks;
 
-const colors = shuffle(Object.entries(variables.colorMap))
-  .filter(([name]) =>
-    !name.startsWith('gray') &&
-    (name.endsWith('2') || name.endsWith('3') || name.endsWith('4') || name.endsWith('5')));
+const colors = shuffle(Object.entries(variables.colorMap)).filter(
+  ([name]) =>
+    !name.startsWith('gray') && (name.endsWith('2') || name.endsWith('3') || name.endsWith('4') || name.endsWith('5')),
+);
 
 const SectionGrid = () => {
   const match = useMediaQuery(['608px', '960px']);
@@ -30,50 +19,40 @@ const SectionGrid = () => {
   return (
     <Section>
       <Tabs gap="x6" margin="x8">
-        <Tab
-            active={ selectedTab === 1 }
-            onClick={ () => setSelectedTab(1) }>
+        <Tab active={selectedTab === 1} onClick={() => setSelectedTab(1)}>
           Min and Max widths
         </Tab>
 
-        <Tab
-            active={ selectedTab === 2 }
-            onClick={ () => setSelectedTab(2) }>
+        <Tab active={selectedTab === 2} onClick={() => setSelectedTab(2)}>
           Fixed Columns
         </Tab>
       </Tabs>
 
-      { selectedTab === 1 && (
-        <React.Fragment>
+      {selectedTab === 1 && (
+        <>
           <Text>
-            The repeatWidthMax and repeatWidthMin props resizied items between
-            these values so that as many items as possible fit the container
-            width before flowing onto the next row. This is useful for layouts
-            where the size of the content is known.
+            The repeatWidthMax and repeatWidthMin props resizied items between these values so that as many items as
+            possible fit the container width before flowing onto the next row. This is useful for layouts where the size
+            of the content is known.
           </Text>
 
-          <Grid
-              alignChildren="middle"
-              gap="x2"
-              margin="x8"
-              repeatWidthMax="1fr"
-              repeatWidthMin="4rem">
-            { colors.map(([name]) => (
+          <Grid alignChildren="middle" gap="x2" margin="x8" repeatWidthMax="1fr" repeatWidthMin="4rem">
+            {colors.map(([name]) => (
               <Flex
-                  alignChildren="middle"
-                  backgroundColor={ name as TypeColors }
-                  borderRadius="x1"
-                  direction="horizontal"
-                  key={ name }
-                  padding="x2"
-                  textColor="white">
+                alignChildren="middle"
+                backgroundColor={name as TypeColors}
+                borderRadius="x1"
+                direction="horizontal"
+                key={name}
+                padding="x2"
+                textColor="white"
+              >
                 <Icon name="Bitbot" />
               </Flex>
-            )) }
+            ))}
           </Grid>
 
-          <CodeBlock margin="x4" title="Flexible & Responsive">{
-`const Component = () => (
+          <CodeBlock margin="x4" title="Flexible & Responsive">{`const Component = () => (
     <Grid
         alignChildren="middle"
         gap="x2"
@@ -84,36 +63,21 @@ const SectionGrid = () => {
       <Flex>...</Flex>
       <Flex>...</Flex>
   </Grid>
-);`
-        }</CodeBlock>
-        </React.Fragment>
-      ) }
+);`}</CodeBlock>
+        </>
+      )}
 
-      { selectedTab === 2 && (
-        <React.Fragment>
+      {selectedTab === 2 && (
+        <>
           <Text>
-            Providing an explicit number of items on each row with a fraction
-            width will cause the items to fill the containing space. This is
-            useful for layouts that need a bit of predictability.
+            Providing an explicit number of items on each row with a fraction width will cause the items to fill the
+            containing space. This is useful for layouts that need a bit of predictability.
           </Text>
 
-          <Grid
-              gap="x4"
-              margin="x8"
-              repeat={ match({ '608px': '2', '960px': '4' }, '1') }
-              repeatWidth="1fr">
-            { Array.from({ length: 8 }).map((_, key) => (
-              <Flex
-                  backgroundColor="gray-1"
-                  borderRadius="x2"
-                  direction="vertical"
-                  gap="x2"
-                  key={ key }
-                  padding="x2">
-                <Flex
-                    alignChildrenVertical="middle"
-                    direction="horizontal"
-                    gap="x1">
+          <Grid gap="x4" margin="x8" repeat={match({ '608px': '2', '960px': '4' }, '1')} repeatWidth="1fr">
+            {Array.from({ length: 8 }).map((_, key) => (
+              <Flex backgroundColor="gray-1" borderRadius="x2" direction="vertical" gap="x2" key={key} padding="x2">
+                <Flex alignChildrenVertical="middle" direction="horizontal" gap="x1">
                   <Flex>
                     <Icon name="Bitbot" />
                   </Flex>
@@ -130,15 +94,14 @@ const SectionGrid = () => {
                 <Flex>
                   <Text size="1">
                     I must protest your unauthorised presence on this bridge!
-                    { key % 2 ? ' I must protest your unauthorised presence on this bridge!' : undefined }
+                    {key % 2 ? ' I must protest your unauthorised presence on this bridge!' : undefined}
                   </Text>
                 </Flex>
               </Flex>
-            )) }
+            ))}
           </Grid>
 
-          <CodeBlock margin="x4" title="Fixed Columns & Responsive">{
-`const Component = () => {
+          <CodeBlock margin="x4" title="Fixed Columns & Responsive">{`const Component = () => {
   const match = useMediaQuery(['608px', '960px']);
 
   return (
@@ -152,10 +115,9 @@ const SectionGrid = () => {
       <Flex>...</Flex>
     </Grid>
   );
-};`
-        }</CodeBlock>
-        </React.Fragment>
-      ) }
+};`}</CodeBlock>
+        </>
+      )}
     </Section>
   );
 };

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

@@ -12,14 +12,13 @@ const SectionHamburger = () => {
     <Section>
       <Flex alignChildren="middle" direction="horizontal">
         <Flex>
-          <Link color="grape-5" onClick={ () => setIsActive(!isActive) }>
-            <Hamburger active={ isActive } size="3rem" />
+          <Link color="grape-5" onClick={() => setIsActive(!isActive)}>
+            <Hamburger active={isActive} size="3rem" />
           </Link>
         </Flex>
       </Flex>
 
-      <CodeBlock title="Hamburger Usage Example">{
-`const Component = () => {
+      <CodeBlock title="Hamburger Usage Example">{`const Component = () => {
   const [isActive, setIsActive] = useState(false);
 
   return (
@@ -27,8 +26,7 @@ const SectionHamburger = () => {
       <Hamburger active={ isActive } size="3rem" />
     </Link>
   );
-};`
-      }</CodeBlock>
+};`}</CodeBlock>
     </Section>
   );
 };

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

@@ -6,25 +6,25 @@ const SectionIcons = () => {
   return (
     <Section>
       <Grid alignChildren="middle" gap="x2" repeatWidthMin="4rem">
-        { variables.icons.map((name) => (
+        {variables.icons.map((name) => (
           <Flex
-              alignChildren="middle"
-              backgroundColor="gray-1"
-              borderRadius="x1"
-              direction="vertical"
-              key={ name }
-              padding="x2"
-              title={ name }>
-            <Icon name={ name } />
-            <Text ellipsis margin="x1" size="1">{ name }</Text>
+            alignChildren="middle"
+            backgroundColor="gray-1"
+            borderRadius="x1"
+            direction="vertical"
+            key={name}
+            padding="x2"
+            title={name}
+          >
+            <Icon name={name} />
+            <Text ellipsis margin="x1" size="1">
+              {name}
+            </Text>
           </Flex>
-        )) }
+        ))}
       </Grid>
     </Section>
   );
 };
 
 export default SectionIcons;
-
-
-

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

@@ -1,13 +1,5 @@
 import * as React from 'react';
-import {
-  Input,
-  InputContainer,
-  InputContent,
-  InputLabel,
-  InputInlineHelp,
-  Base,
-  Icon,
-} from '@bitrise/bitkit';
+import { Input, InputContainer, InputContent, InputLabel, InputInlineHelp, Base, Icon } from '@bitrise/bitkit';
 import CodeBlock from '../../CodeBlock/CodeBlock';
 import Section from '../../Section/Section';
 import SectionSubTitle from '../../Section/SectionSubTitle';
@@ -20,7 +12,7 @@ const SectionInputs = () => {
           <SectionSubTitle>Input in InputContainer</SectionSubTitle>
           <InputContainer>
             <InputContent>
-              <Input placeholder="Input"></Input>
+              <Input placeholder="Input" />
             </InputContent>
           </InputContainer>
         </Base>
@@ -37,9 +29,7 @@ const SectionInputs = () => {
         </Base>
 
         <Base margin="x6">
-          <SectionSubTitle>
-            Input with InputLabel and InputInlineHelp
-          </SectionSubTitle>
+          <SectionSubTitle>Input with InputLabel and InputInlineHelp</SectionSubTitle>
 
           <InputLabel>Label</InputLabel>
           <InputContainer>
@@ -48,13 +38,11 @@ const SectionInputs = () => {
               <Icon name="Bell" />
             </InputContent>
           </InputContainer>
-          <InputInlineHelp>
-            Help the user how the input should be filled!
-          </InputInlineHelp>
+          <InputInlineHelp>Help the user how the input should be filled!</InputInlineHelp>
         </Base>
       </Base>
 
-      <CodeBlock title="Labels Usage Example">{ `const Component = () => (
+      <CodeBlock title="Labels Usage Example">{`const Component = () => (
   <Base width="400px">
     <Base margin="x6">
       <SectionSubTitle>Input in InputContainer</SectionSubTitle>
@@ -93,7 +81,7 @@ const SectionInputs = () => {
       </InputInlineHelp>
     </Base>
   </Base>
-);` }</CodeBlock>
+);`}</CodeBlock>
     </Section>
   );
 };

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

@@ -12,15 +12,13 @@ const SectionList = () => {
         <ListItem>On this bridge I must protest your unauthorised presence!</ListItem>
       </List>
 
-      <CodeBlock title="List Usage Example">{
-`const Component = () => (
+      <CodeBlock title="List Usage Example">{`const Component = () => (
   <List>
     <ListItem>I must protest your unauthorised presence on this bridge!</ListItem>
     <ListItem>Your unauthorised presence on this bridge I must protest!</ListItem>
     <ListItem>On this bridge I must protest your unauthorised presence!</ListItem>
   </List>
-);`
-      }</CodeBlock>
+);`}</CodeBlock>
     </Section>
   );
 };