@bitrise/bitkit 9.3.0-alpha.4 → 9.4.0

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

@@ -4,6 +4,7 @@ import {
   DropdownMenu,
   DropdownMenus,
   DropdownMenuItem,
+  DropdownMenuItemGroup,
   Flex,
   Icon,
   Placement,
@@ -21,63 +22,83 @@ import Section from '../../Section/Section';
 
 const { useState } = React;
 
-const options = [{
-  text: 'Item 1',
-  value: 'item-1',
-}, {
-  text: 'Item 2',
-  value: 'item-2',
-}, {
-  text: 'Item 3',
-  value: 'item-3',
-}, {
-  text: 'Item 4',
-  value: 'item-4',
-}, {
-  text: 'Item 5 with a long text to showcase ellipsis in the Dropdown Button',
-  value: 'Item 5 with a long text to showcase ellipsis in the Dropdown Button',
-}, {
-  text: 'an_other_long_item_without_spaces__an_other_long_item_without_spaces',
-  value: 'an_other_long_item_without_spaces__an_other_long_item_without_spaces',
-}];
-
-const lotsOfOptions = [{
-  text: 'Item 1',
-  value: 'item-1',
-}, {
-  text: 'Item 2',
-  value: 'item-2',
-}, {
-  text: 'Item 3',
-  value: 'item-3',
-}, {
-  text: 'Item 4',
-  value: 'item-4',
-}, {
-  text: 'Item 5',
-  value: 'item-5',
-}, {
-  text: 'Item 6',
-  value: 'item-6',
-}, {
-  text: 'Item 7',
-  value: 'item-7',
-}, {
-  text: 'Item 8',
-  value: 'item-8',
-}, {
-  text: 'Item 9',
-  value: 'item-9',
-}, {
-  text: 'Item 10',
-  value: 'item-10',
-}, {
-  text: 'Item 11',
-  value: 'item-11',
-}, {
-  text: 'Item 12',
-  value: 'item-12',
-}];
+const options = [
+  {
+    text: 'Item 1',
+    value: 'item-1',
+  },
+  {
+    text: 'Item 2',
+    value: 'item-2',
+  },
+  {
+    text: 'Item 3',
+    value: 'item-3',
+  },
+  {
+    text: 'Item 4',
+    value: 'item-4',
+  },
+  {
+    text: 'Item 5 with a long text to showcase ellipsis in the Dropdown Button',
+    value: 'Item 5 with a long text to showcase ellipsis in the Dropdown Button',
+  },
+  {
+    text: 'an_other_long_item_without_spaces__an_other_long_item_without_spaces',
+    value: 'an_other_long_item_without_spaces__an_other_long_item_without_spaces',
+  },
+];
+
+const lotsOfOptions = [
+  {
+    text: 'Item 1',
+    value: 'item-1',
+  },
+  {
+    text: 'Item 2',
+    value: 'item-2',
+  },
+  {
+    text: 'Item 3',
+    value: 'item-3',
+  },
+  {
+    text: 'Item 4',
+    value: 'item-4',
+  },
+  {
+    text: 'Item 5',
+    value: 'item-5',
+  },
+  {
+    text: 'Item 6',
+    value: 'item-6',
+  },
+  {
+    text: 'Item 7',
+    value: 'item-7',
+  },
+  {
+    text: 'Item 8',
+    value: 'item-8',
+  },
+  {
+    text: 'Item 9',
+    value: 'item-9',
+  },
+  {
+    text: 'Item 10',
+    value: 'item-10',
+  },
+  {
+    text: 'Item 11',
+    value: 'item-11',
+  },
+  {
+    text: 'Item 12',
+    value: 'item-12',
+  },
+];
 
 const optionGroups = [
   {
@@ -127,51 +148,35 @@ const SectionDropdown = () => {
   return (
     <Section>
       <Tabs gap="x6" margin="x8">
-        <Tab
-            active={ selectedTab === 1 }
-            onClick={ () => setSelectedTab(1) }>
+        <Tab active={selectedTab === 1} onClick={() => setSelectedTab(1)}>
           Simple
         </Tab>
 
-        <Tab
-            active={ selectedTab === 2 }
-            onClick={ () => setSelectedTab(2) }>
+        <Tab active={selectedTab === 2} onClick={() => setSelectedTab(2)}>
           With lots of options
         </Tab>
 
-        <Tab
-            active={ selectedTab === 3 }
-            onClick={ () => setSelectedTab(3) }>
+        <Tab active={selectedTab === 3} onClick={() => setSelectedTab(3)}>
           Nested/Dual View
         </Tab>
 
-        <Tab
-            active={ selectedTab === 4 }
-            onClick={ () => setSelectedTab(4) }>
+        <Tab active={selectedTab === 4} onClick={() => setSelectedTab(4)}>
           With option groups
         </Tab>
       </Tabs>
 
-      { selectedTab === 1 && (
-        <React.Fragment>
+      {selectedTab === 1 && (
+        <>
           <Text>
-            The single Dropdown component is a quick
-            alternative when you have a simple
-            single value that needs to be selected. It's limited
-            in it's behaviour so not to become prop
-            bloated and fragile to changes.
+            The single Dropdown component is a quick alternative when you have a simple single value that needs to be
+            selected. It's limited in it's behaviour so not to become prop bloated and fragile to changes.
           </Text>
 
-          <Dropdown
-              margin="x8"
-              onChange={ (item) => setSelectedItem(item) }
-              options={ options }
-              selected={ selectedItem }>
-            Select Item { selectedItem && `(${selectedItem})` }
+          <Dropdown margin="x8" onChange={(item) => setSelectedItem(item)} options={options} selected={selectedItem}>
+            Select Item {selectedItem && `(${selectedItem})`}
           </Dropdown>
 
-          <CodeBlock margin="x4" title="Dropdown usage example">{
-`const Component = () => {
+          <CodeBlock margin="x4" title="Dropdown usage example">{`const Component = () => {
   const [value, setValue] = useState();
 
   return (
@@ -182,34 +187,29 @@ const SectionDropdown = () => {
       Select item
     </Dropdown>
   );
-}`
-        }</CodeBlock>
-        </React.Fragment>
-      ) }
+}`}</CodeBlock>
+        </>
+      )}
 
-      { selectedTab === 2 && (
-        <React.Fragment>
+      {selectedTab === 2 && (
+        <>
           <Text>
-            The single Dropdown component is a quick
-            alternative when you have a simple
-            single value that needs to be selected. It's limited
-            in it's behaviour so not to become prop
-            bloated and fragile to changes.
-            When you have a lots of items you can set
-            the `maxHeight` prop to limit the height of the list
+            The single Dropdown component is a quick alternative when you have a simple single value that needs to be
+            selected. It's limited in it's behaviour so not to become prop bloated and fragile to changes. When you have
+            a lots of items you can set the `maxHeight` prop to limit the height of the list
           </Text>
 
           <Dropdown
-              margin="x8"
-              maxHeight="15rem"
-              onChange={ (item) => setSelectedItem2(item) }
-              options={ lotsOfOptions }
-              selected={ selectedItem2 }>
-            Select Item { selectedItem2 && `(${selectedItem2})` }
+            margin="x8"
+            maxHeight="15rem"
+            onChange={(item) => setSelectedItem2(item)}
+            options={lotsOfOptions}
+            selected={selectedItem2}
+          >
+            Select Item {selectedItem2 && `(${selectedItem2})`}
           </Dropdown>
 
-          <CodeBlock margin="x4" title="Dropdown usage example">{
-`const Component = () => {
+          <CodeBlock margin="x4" title="Dropdown usage example">{`const Component = () => {
   const [value, setValue] = useState();
 
   return (
@@ -221,106 +221,88 @@ const SectionDropdown = () => {
       Select item
     </Dropdown>
   );
-}`
-        }</CodeBlock>
-        </React.Fragment>
-      ) }
+}`}</CodeBlock>
+        </>
+      )}
 
-      { selectedTab === 3 && (
-        <React.Fragment>
-          <Text>
-            Another example of a complex custom use case with
-            a nested selection using a dual menu view.
-          </Text>
+      {selectedTab === 3 && (
+        <>
+          <Text>Another example of a complex custom use case with a nested selection using a dual menu view.</Text>
 
           <PlacementManager>
             <PlacementReference>
-              { ({ ref }) => (
-                <DropdownButton
-                    elevation="x1"
-                    innerRef={ ref }
-                    margin="x8"
-                    onClick={ handleToggle3 }>
+              {({ ref }) => (
+                <DropdownButton elevation="x1" innerRef={ref} margin="x8" onClick={handleToggle3}>
                   <Icon name="PlusAdd" />
                   <Text>Select Items</Text>
                 </DropdownButton>
-              ) }
+              )}
             </PlacementReference>
 
             <Placement
-                disableReposition
-                onClose={ () => {
-                  setSelectedItem(undefined);
-                  handleToggle3();
-                } }
-                visible={ visible3 }>
-              { () => (
+              disableReposition
+              onClose={() => {
+                setSelectedItem(undefined);
+                handleToggle3();
+              }}
+              visible={visible3}
+            >
+              {() => (
                 <DropdownMenus>
                   <DropdownMenu maxHeight="18rem" width="12rem">
-                    { options.map((item) => (
+                    {options.map((item) => (
                       <DropdownMenuItem
-                          Component={ VisibilityContainer }
-                          key={ item.value }
-                          onClick={ () => {
-                            setSelectedItem(item.value);
-                            setSelectedItems({});
-                          } }>
-                        <Flex
-                            alignChildrenVertical="middle"
-                            direction="horizontal"
-                            gap="x2"
-                            grow>
-                          <Flex
-                              grow
-                              initial="none">
-                            <Text ellipsis>{ item.text }</Text>
+                        Component={VisibilityContainer}
+                        key={item.value}
+                        onClick={() => {
+                          setSelectedItem(item.value);
+                          setSelectedItems({});
+                        }}
+                      >
+                        <Flex alignChildrenVertical="middle" direction="horizontal" gap="x2" grow>
+                          <Flex grow initial="none">
+                            <Text ellipsis>{item.text}</Text>
                           </Flex>
 
-                          <Visibility Component={ Flex }>
+                          <Visibility Component={Flex}>
                             <Icon name="ChevronRight" />
                           </Visibility>
                         </Flex>
                       </DropdownMenuItem>
-                    )) }
+                    ))}
                   </DropdownMenu>
 
-                  { selectedItem && (
-                    <DropdownMenu key={ selectedItem } maxHeight="18rem" width="17rem">
-                      { options.map((item) => (
+                  {selectedItem && (
+                    <DropdownMenu key={selectedItem} maxHeight="18rem" width="17rem">
+                      {options.map((item) => (
                         <DropdownMenuItem
-                            Component={ VisibilityContainer }
-                            key={ item.value }
-                            onClick={ () => handleSelectItem(item.value) }
-                            selected={ selectedItems[item.value] }
-                            title={ name }>
-                          <Flex
-                              alignChildrenVertical="middle"
-                              direction="horizontal"
-                              gap="x8"
-                              grow>
-                            <Flex
-                                grow
-                                initial="none">
-                              <Text ellipsis>{ selectedItem } / { item.text }</Text>
+                          Component={VisibilityContainer}
+                          key={item.value}
+                          onClick={() => handleSelectItem(item.value)}
+                          selected={selectedItems[item.value]}
+                          title={name}
+                        >
+                          <Flex alignChildrenVertical="middle" direction="horizontal" gap="x8" grow>
+                            <Flex grow initial="none">
+                              <Text ellipsis>
+                                {selectedItem} / {item.text}
+                              </Text>
                             </Flex>
 
-                            <Visibility Component={ Flex }>
-                              <Text size="2">
-                                { selectedItems[item.value] ? '- Remove' : '+ Add' }
-                              </Text>
+                            <Visibility Component={Flex}>
+                              <Text size="2">{selectedItems[item.value] ? '- Remove' : '+ Add'}</Text>
                             </Visibility>
                           </Flex>
                         </DropdownMenuItem>
-                      )) }
+                      ))}
                     </DropdownMenu>
-                  ) }
+                  )}
                 </DropdownMenus>
-              ) }
+              )}
             </Placement>
           </PlacementManager>
 
-          <CodeBlock margin="x4" title="Custom DropdownMenu usage example">{
-`
+          <CodeBlock margin="x4" title="Custom DropdownMenu usage example">{`
 const options = ${JSON.stringify(options)};
 
 const Component = () => {
@@ -365,31 +347,27 @@ const Component = () => {
       ) }
     </DropdownMenus>
   );
-};`
-          }</CodeBlock>
-        </React.Fragment>
-      ) }
+};`}</CodeBlock>
+        </>
+      )}
 
-      { selectedTab === 4 && (
-        <React.Fragment>
+      {selectedTab === 4 && (
+        <>
           <Text>
-            The single Dropdown component is a quick
-            alternative when you have a simple
-            single value that needs to be selected. It's limited
-            in it's behaviour so not to become prop
-            bloated and fragile to changes.
+            The single Dropdown component is a quick alternative when you have a simple single value that needs to be
+            selected. It's limited in it's behaviour so not to become prop bloated and fragile to changes.
           </Text>
 
           <Dropdown
-              margin="x8"
-              onChange={ (item) => setSelectedItem(item) }
-              options={ optionGroups }
-              selected={ selectedItem }>
-            Select Item { selectedItem && `(${selectedItem})` }
+            margin="x8"
+            onChange={(item) => setSelectedItem(item)}
+            options={optionGroups}
+            selected={selectedItem}
+          >
+            Select Item {selectedItem && `(${selectedItem})`}
           </Dropdown>
 
-          <CodeBlock margin="x4" title="Dropdown usage example">{
-`const Component = () => {
+          <CodeBlock margin="x4" title="Dropdown usage example">{`const Component = () => {
   const [value, setValue] = useState();
 
   return (
@@ -400,10 +378,9 @@ const Component = () => {
       Select item
     </Dropdown>
   );
-}`
-        }</CodeBlock>
-        </React.Fragment>
-      ) }
+}`}</CodeBlock>
+        </>
+      )}
     </Section>
   );
 };

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

@@ -1,5 +1,5 @@
-import { Base, Card, CardContent, CardDivider, Expand, Flex, Icon, Link, Text } from '@bitrise/bitkit';
 import * as React from 'react';
+import { Base, Card, CardContent, CardDivider, Expand, Flex, Icon, Link, Text } from '@bitrise/bitkit';
 
 import CodeBlock from '../../CodeBlock/CodeBlock';
 import Section from '../../Section/Section';
@@ -22,21 +22,22 @@ const SectionDot = () => {
             </Text>
 
             <Link
-                color="grape-3"
-                onClick={ () => {
-                  setBasicExpanded(!basicExpanded);
-                } }>
+              color="grape-3"
+              onClick={() => {
+                setBasicExpanded(!basicExpanded);
+              }}
+            >
               <Flex alignChildren="middle" direction="horizontal" gap="x1">
-                <Flex>See { basicExpanded ? 'less' : 'more' }</Flex>
+                <Flex>See {basicExpanded ? 'less' : 'more'}</Flex>
 
                 <Flex>
-                  <Icon name={ basicExpanded ? 'ArrowUp' : 'ArrowDown' } />
+                  <Icon name={basicExpanded ? 'ArrowUp' : 'ArrowDown'} />
                 </Flex>
               </Flex>
             </Link>
           </CardContent>
 
-          <Expand expanded={ basicExpanded } removeChildren>
+          <Expand expanded={basicExpanded} removeChildren>
             <CardDivider />
 
             <CardContent grow padding="x6">
@@ -48,7 +49,7 @@ const SectionDot = () => {
         </Card>
       </Base>
 
-      <CodeBlock title="Expand - Basic Usage Example">{ `const Component = () => {
+      <CodeBlock title="Expand - Basic Usage Example">{`const Component = () => {
   const [isExpanded, setIsExpanded] = useState(false);
 
   return (
@@ -62,7 +63,7 @@ const SectionDot = () => {
       </Expand>
     </React.Fragment>
   );
-};` }</CodeBlock>
+};`}</CodeBlock>
 
       <Base margin="x16">
         <SectionSubTitle>With some content visible</SectionSubTitle>
@@ -73,36 +74,40 @@ const SectionDot = () => {
             </Text>
 
             <Link
-                color="grape-3"
-                onClick={ () => {
-                  setPeekExpanded(!peekExpanded);
-                } }>
+              color="grape-3"
+              onClick={() => {
+                setPeekExpanded(!peekExpanded);
+              }}
+            >
               <Flex alignChildren="middle" direction="horizontal" gap="x1">
-                <Flex>See { peekExpanded ? 'less' : 'more' }</Flex>
+                <Flex>See {peekExpanded ? 'less' : 'more'}</Flex>
 
                 <Flex>
-                  <Icon name={ peekExpanded ? 'ArrowUp' : 'ArrowDown' } />
+                  <Icon name={peekExpanded ? 'ArrowUp' : 'ArrowDown'} />
                 </Flex>
               </Flex>
             </Link>
           </CardContent>
 
-          <Expand expanded={ peekExpanded } peekHeight="5rem">
+          <Expand expanded={peekExpanded} peekHeight="5rem">
             <CardDivider />
 
             <CardContent grow padding="x6">
               <Flex direction="vertical" gap="x4">
                 <Text align="middle" size="3">
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit corporis adipisci obcaecati aspernatur nam, dolor sapiente
-                  accusantium possimus tempora eaque atque. Delectus, iure doloribus. At veniam suscipit totam! Esse, quae?
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit corporis adipisci obcaecati aspernatur
+                  nam, dolor sapiente accusantium possimus tempora eaque atque. Delectus, iure doloribus. At veniam
+                  suscipit totam! Esse, quae?
                 </Text>
                 <Text align="middle" size="3">
-                  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem laboriosam asperiores tenetur nulla obcaecati
-                  praesentium nostrum quis dignissimos fuga eaque cupiditate rem, quod possimus delectus animi alias aliquam iusto adipisci?
+                  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem laboriosam asperiores tenetur nulla
+                  obcaecati praesentium nostrum quis dignissimos fuga eaque cupiditate rem, quod possimus delectus animi
+                  alias aliquam iusto adipisci?
                 </Text>
                 <Text align="middle" size="3">
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis earum fugit voluptas dolorum necessitatibus dicta iure
-                  molestiae consequatur tenetur a, ratione sapiente eius obcaecati cum nobis id quis veritatis eos.
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis earum fugit voluptas dolorum
+                  necessitatibus dicta iure molestiae consequatur tenetur a, ratione sapiente eius obcaecati cum nobis
+                  id quis veritatis eos.
                 </Text>
               </Flex>
             </CardContent>
@@ -110,7 +115,7 @@ const SectionDot = () => {
         </Card>
       </Base>
 
-      <CodeBlock title="Expand - 'Peek' Usage Example">{ `const Component = () => {
+      <CodeBlock title="Expand - 'Peek' Usage Example">{`const Component = () => {
   const [isExpanded, setIsExpanded] = useState(false);
 
   return (
@@ -130,7 +135,7 @@ const SectionDot = () => {
       </Expand>
     </React.Fragment>
   );
-};` }</CodeBlock>
+};`}</CodeBlock>
     </Section>
   );
 };

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

@@ -5,8 +5,7 @@ import Section from '../../Section/Section';
 const SectionBase = () => {
   return (
     <Section>
-      <CodeBlock title="Flex Usage Example">{
-`const Component = () => (
+      <CodeBlock title="Flex Usage Example">{`const Component = () => (
   <Flex direction="horizontal" paddingVertical="x6">
     <Flex alignChildrenVertical="middle" direction="horizontal" gap="x2" grow>
       <Flex>
@@ -26,8 +25,7 @@ const SectionBase = () => {
       </Tabs>
     </Flex>
   </Flex>
-);`
-      }</CodeBlock>
+);`}</CodeBlock>
     </Section>
   );
 };