@bitrise/bitkit 9.3.0-alpha.3 → 9.3.1

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

@@ -1,5 +1,16 @@
 import * as React from 'react';
-import { Card, CardContent, CardDivider, Flex, Icon, Tab, Tabs, Text, CardButton, ProgressBitbot } from '@bitrise/bitkit';
+import {
+  Card,
+  CardContent,
+  CardDivider,
+  Flex,
+  Icon,
+  Tab,
+  Tabs,
+  Text,
+  CardButton,
+  ProgressBitbot,
+} from '@bitrise/bitkit';
 import CodeBlock from '../../CodeBlock/CodeBlock';
 import Section from '../../Section/Section';
 import SectionSubTitle from '../../Section/SectionSubTitle';
@@ -10,27 +21,21 @@ const SectionCards = () => {
   return (
     <Section>
       <Tabs gap="x6" margin="x8">
-        <Tab
-            active={ selectedTab === 1 }
-            onClick={ () => setSelectedTab(1) }>
+        <Tab active={selectedTab === 1} onClick={() => setSelectedTab(1)}>
           Elevation Levels
         </Tab>
 
-        <Tab
-            active={ selectedTab === 2 }
-            onClick={ () => setSelectedTab(2) }>
+        <Tab active={selectedTab === 2} onClick={() => setSelectedTab(2)}>
           Divided Content
         </Tab>
 
-        <Tab
-            active={ selectedTab === 3 }
-            onClick={ () => setSelectedTab(3) }>
+        <Tab active={selectedTab === 3} onClick={() => setSelectedTab(3)}>
           Card Buttons
         </Tab>
       </Tabs>
 
-      { selectedTab === 1 && (
-        <React.Fragment>
+      {selectedTab === 1 && (
+        <>
           <Card margin="x4">
             <CardContent padding="x6">
               <Flex alignChildrenVertical="middle" direction="horizontal" gap="x4">
@@ -39,7 +44,9 @@ const SectionCards = () => {
                 </Flex>
 
                 <Flex>
-                  <Text size="2" textColor="grape-5" uppercase weight="bold">Unelevated</Text>
+                  <Text size="2" textColor="grape-5" uppercase weight="bold">
+                    Unelevated
+                  </Text>
                 </Flex>
               </Flex>
             </CardContent>
@@ -53,7 +60,9 @@ const SectionCards = () => {
                 </Flex>
 
                 <Flex>
-                  <Text size="2" textColor="grape-5" uppercase weight="bold">Elevation x2</Text>
+                  <Text size="2" textColor="grape-5" uppercase weight="bold">
+                    Elevation x2
+                  </Text>
                 </Flex>
               </Flex>
             </CardContent>
@@ -67,24 +76,24 @@ const SectionCards = () => {
                 </Flex>
 
                 <Flex>
-                  <Text size="2" textColor="grape-5" uppercase weight="bold">Elevation x3</Text>
+                  <Text size="2" textColor="grape-5" uppercase weight="bold">
+                    Elevation x3
+                  </Text>
                 </Flex>
               </Flex>
             </CardContent>
           </Card>
 
-          <CodeBlock title="Card with elevation">{
-`const Component = () => (
+          <CodeBlock title="Card with elevation">{`const Component = () => (
   <Card direction="vertical" elevation="x2">
     <CardContent padding="x6">...</CardContent>
   </Card>
-);`
-      }</CodeBlock>
-        </React.Fragment>
-      ) }
+);`}</CodeBlock>
+        </>
+      )}
 
-      { selectedTab === 2 && (
-        <React.Fragment>
+      {selectedTab === 2 && (
+        <>
           <Card direction="vertical" margin="x4">
             <CardContent grow padding="x6">
               <Flex alignChildrenVertical="middle" direction="horizontal" gap="x4">
@@ -93,7 +102,9 @@ const SectionCards = () => {
                 </Flex>
 
                 <Flex>
-                  <Text size="2" textColor="grape-5" uppercase weight="bold">Vertically Divided Content</Text>
+                  <Text size="2" textColor="grape-5" uppercase weight="bold">
+                    Vertically Divided Content
+                  </Text>
                 </Flex>
               </Flex>
             </CardContent>
@@ -101,7 +112,9 @@ const SectionCards = () => {
             <CardDivider />
 
             <CardContent grow padding="x6">
-              <Text align="end" size="2" textColor="gray-5" uppercase>Showing 1 / 1 Apps</Text>
+              <Text align="end" size="2" textColor="gray-5" uppercase>
+                Showing 1 / 1 Apps
+              </Text>
             </CardContent>
           </Card>
 
@@ -113,8 +126,12 @@ const SectionCards = () => {
                 </Flex>
 
                 <Flex>
-                  <Text size="1" textColor="gray-4" uppercase weight="bold">Horizontal Divided Content</Text>
-                  <Text size="2" textColor="gray-5" uppercase weight="bold">Horizontal Divided Content</Text>
+                  <Text size="1" textColor="gray-4" uppercase weight="bold">
+                    Horizontal Divided Content
+                  </Text>
+                  <Text size="2" textColor="gray-5" uppercase weight="bold">
+                    Horizontal Divided Content
+                  </Text>
                 </Flex>
               </Flex>
             </CardContent>
@@ -126,8 +143,7 @@ const SectionCards = () => {
             </CardContent>
           </Card>
 
-          <CodeBlock title="Card with divisions">{
-`const VerticalDividedComponent = () => (
+          <CodeBlock title="Card with divisions">{`const VerticalDividedComponent = () => (
   <Card direction="vertical">
     <CardContent padding="x6">...</CardContent>
     <CardDivider />
@@ -141,13 +157,12 @@ const HorizontalDividedComponent = () => (
     <CardDivider />
     <CardContent padding="x6">...</CardContent>
   </Card>
-);`
-          }</CodeBlock>
-        </React.Fragment>
-      ) }
+);`}</CodeBlock>
+        </>
+      )}
 
-      { selectedTab === 3 && (
-        <React.Fragment>
+      {selectedTab === 3 && (
+        <>
           <Flex margin="x12">
             <SectionSubTitle>Vertical Divided Buttons</SectionSubTitle>
 
@@ -204,7 +219,9 @@ const HorizontalDividedComponent = () => (
 
             <Card direction="horizontal" margin="x4">
               <CardContent grow padding="x6">
-                <Text size="2" textColor="gray-5" uppercase weight="bold">Primary</Text>
+                <Text size="2" textColor="gray-5" uppercase weight="bold">
+                  Primary
+                </Text>
               </CardContent>
 
               <CardDivider />
@@ -216,7 +233,9 @@ const HorizontalDividedComponent = () => (
 
             <Card direction="horizontal" margin="x4">
               <CardContent grow padding="x6">
-                <Text size="2" textColor="gray-5" uppercase weight="bold">Secondary</Text>
+                <Text size="2" textColor="gray-5" uppercase weight="bold">
+                  Secondary
+                </Text>
               </CardContent>
 
               <CardDivider />
@@ -228,7 +247,9 @@ const HorizontalDividedComponent = () => (
 
             <Card direction="horizontal" margin="x4">
               <CardContent grow padding="x6">
-                <Text size="2" textColor="gray-5" uppercase weight="bold">Tertiary</Text>
+                <Text size="2" textColor="gray-5" uppercase weight="bold">
+                  Tertiary
+                </Text>
               </CardContent>
 
               <CardDivider />
@@ -239,17 +260,15 @@ const HorizontalDividedComponent = () => (
             </Card>
           </Flex>
 
-          <CodeBlock title="Card with CardButton">{
-`const VerticalDividedComponent = () => (
+          <CodeBlock title="Card with CardButton">{`const VerticalDividedComponent = () => (
   <Card direction="vertical">
     <CardContent padding="x6">...</CardContent>
     <CardDivider />
     <CardButton level="primary">Action</CardButton>
   </Card>
-);`
-          }</CodeBlock>
-        </React.Fragment>
-      ) }
+);`}</CodeBlock>
+        </>
+      )}
     </Section>
   );
 };

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

@@ -11,37 +11,26 @@ const SectionFormElements = () => {
 
   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 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>
 
-      <CodeBlock title="Checkbox usage example">{
-`const Component = () => (
+      <CodeBlock title="Checkbox usage example">{`const Component = () => (
   <Checkbox>Checkbox label</Checkbox>
-);`
-      }</CodeBlock>
+);`}</CodeBlock>
     </Section>
   );
 };

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

@@ -25,31 +25,28 @@ const SectionDatePicker = () => {
     <Section>
       <Buttons>
         <DatePicker
-            dateSelectableFrom={ dateSelectableFrom }
-            dateSelectableTo={ dateSelectableTo }
-            dateSelectedFrom={ dateSelectedFrom }
-            dateSelectedTo={ dateSelectedTo }
-            onApply={ handleApply }
-            onClose={ handleClose }
-            visible={ visible }>
-          { ({ ref }) => (
-            <Button
-                innerRef={ ref }
-                level="primary"
-                onClick={ handleOpen }>
+          dateSelectableFrom={dateSelectableFrom}
+          dateSelectableTo={dateSelectableTo}
+          dateSelectedFrom={dateSelectedFrom}
+          dateSelectedTo={dateSelectedTo}
+          onApply={handleApply}
+          onClose={handleClose}
+          visible={visible}
+        >
+          {({ ref }) => (
+            <Button innerRef={ref} level="primary" onClick={handleOpen}>
               <Icon name="Calendar" />
               <Text>
-                { !dateSelectedFrom && 'Select a Date' }
-                { dateSelectedFrom && DateTime.fromMillis(dateSelectedFrom).toFormat('dd MMM') }
-                { dateSelectedTo && `- ${DateTime.fromMillis(dateSelectedTo).toFormat('dd MMM yyyy')}` }
+                {!dateSelectedFrom && 'Select a Date'}
+                {dateSelectedFrom && DateTime.fromMillis(dateSelectedFrom).toFormat('dd MMM')}
+                {dateSelectedTo && `- ${DateTime.fromMillis(dateSelectedTo).toFormat('dd MMM yyyy')}`}
               </Text>
             </Button>
-          ) }
+          )}
         </DatePicker>
       </Buttons>
 
-      <CodeBlock title="DatePicker usage example">{
-`const Component = () => {
+      <CodeBlock title="DatePicker usage example">{`const Component = () => {
   const [dateSelectedFrom, setDateSelectedFrom] = useState();
   const [dateSelectedTo, setDateSelectedTo] = useState();
   const [visible, setVisible] = useState(false);
@@ -77,8 +74,7 @@ const SectionDatePicker = () => {
     ) }
   </DatePicker>
   );
-}`
-      }</CodeBlock>
+}`}</CodeBlock>
     </Section>
   );
 };

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

@@ -21,11 +21,9 @@ const SectionDivider = () => {
       <Divider color="gray-7" direction="horizontal" margin="x1" />
       <Divider color="gray-8" direction="horizontal" margin="x1" />
 
-      <CodeBlock title="Divider Usage Example">{
-`const Component = () => (
+      <CodeBlock title="Divider Usage Example">{`const Component = () => (
   <Divider color="gray-1" direction="horizontal" margin="x1" width="0.125rem" />
-);`
-      }</CodeBlock>
+);`}</CodeBlock>
     </Section>
   );
 };

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

@@ -10,24 +10,16 @@ const SectionDot = () => {
   return (
     <Section>
       <Grid alignChildren="middle" gap="x2" repeatWidthMin="4em">
-        { colors.map(([name]) => (
-          <Flex
-              alignChildren="middle"
-              borderRadius="x1"
-              direction="vertical"
-              key={ name }
-              padding="x2"
-              title={ name }>
-            <Dot backgroundColor={ name as TypeColors } size="0.5rem" />
+        {colors.map(([name]) => (
+          <Flex alignChildren="middle" borderRadius="x1" direction="vertical" key={name} padding="x2" title={name}>
+            <Dot backgroundColor={name as TypeColors} size="0.5rem" />
           </Flex>
-        )) }
+        ))}
       </Grid>
 
-      <CodeBlock title="Dot Usage Example">{
-`const Component = () => (
+      <CodeBlock title="Dot Usage Example">{`const Component = () => (
   <Dot backgroundColor="grape-3" size="0.5rem" />
-);`
-      }</CodeBlock>
+);`}</CodeBlock>
     </Section>
   );
 };