@bitrise/bitkit 9.5.0 → 9.5.3-alpha-src.1

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

@@ -1,388 +0,0 @@
-import * as React from 'react';
-import {
-  Dropdown,
-  DropdownMenu,
-  DropdownMenus,
-  DropdownMenuItem,
-  Flex,
-  Icon,
-  Placement,
-  PlacementManager,
-  PlacementReference,
-  Tab,
-  Tabs,
-  Text,
-  Visibility,
-  VisibilityContainer,
-  DropdownButton,
-} from '@bitrise/bitkit';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-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 optionGroups = [
-  {
-    text: 'Workflows',
-    options: [
-      {
-        text: 'Workflow 1',
-        value: 'Workflow 1',
-      },
-      {
-        text: 'Workflow 2',
-        value: 'Workflow 2',
-      },
-    ],
-  },
-  {
-    text: 'Pipelines',
-    options: [
-      {
-        text: 'Pipeline 1',
-        value: 'Pipeline 1',
-      },
-      {
-        text: 'Pipeline 2',
-        value: 'Pipeline 2',
-      },
-    ],
-  },
-];
-
-const SectionDropdown = () => {
-  const [visible3, setVisible3] = useState(false);
-  const [selectedItem, setSelectedItem] = useState();
-  const [selectedItem2, setSelectedItem2] = useState();
-  const [selectedItems, setSelectedItems] = useState({});
-  const [selectedTab, setSelectedTab] = useState(1);
-
-  const handleToggle3 = () => setVisible3(!visible3);
-
-  const handleSelectItem = (value: string) => {
-    setSelectedItems({
-      ...selectedItems,
-      [value]: !selectedItems[value],
-    });
-  };
-
-  return (
-    <Section>
-      <Tabs gap="x6" margin="x8">
-        <Tab active={selectedTab === 1} onClick={() => setSelectedTab(1)}>
-          Simple
-        </Tab>
-
-        <Tab active={selectedTab === 2} onClick={() => setSelectedTab(2)}>
-          With lots of options
-        </Tab>
-
-        <Tab active={selectedTab === 3} onClick={() => setSelectedTab(3)}>
-          Nested/Dual View
-        </Tab>
-
-        <Tab active={selectedTab === 4} onClick={() => setSelectedTab(4)}>
-          With option groups
-        </Tab>
-      </Tabs>
-
-      {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.
-          </Text>
-
-          <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 = () => {
-  const [value, setValue] = useState();
-
-  return (
-    <Dropdown
-        onChange={ setValue }
-        options={ ${JSON.stringify(options)} }
-        selected={ value }>
-      Select item
-    </Dropdown>
-  );
-}`}</CodeBlock>
-        </>
-      )}
-
-      {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
-          </Text>
-
-          <Dropdown
-            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 = () => {
-  const [value, setValue] = useState();
-
-  return (
-    <Dropdown
-        onChange={ setValue }
-        options={ ${JSON.stringify(lotsOfOptions)} }
-        selected={ value }
-        maxHeight="15rem">
-      Select item
-    </Dropdown>
-  );
-}`}</CodeBlock>
-        </>
-      )}
-
-      {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}>
-                  <Icon name="PlusAdd" />
-                  <Text>Select Items</Text>
-                </DropdownButton>
-              )}
-            </PlacementReference>
-
-            <Placement
-              disableReposition
-              onClose={() => {
-                setSelectedItem(undefined);
-                handleToggle3();
-              }}
-              sameWidth
-              visible={visible3}
-            >
-              {() => (
-                <DropdownMenus>
-                  <DropdownMenu maxHeight="18rem" width="12rem">
-                    {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>
-                          </Flex>
-
-                          <Visibility Component={Flex}>
-                            <Icon name="ChevronRight" />
-                          </Visibility>
-                        </Flex>
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenu>
-
-                  {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>
-                            </Flex>
-
-                            <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">{`
-const options = ${JSON.stringify(options)};
-
-const Component = () => {
-  const [group, setGroup] = useState();
-  const [item, setItem] = useState();
-
-  return (
-    <DropdownMenus>
-      <DropdownMenu maxHeight="18rem" width="15rem">
-        { options.map(({ text, value }) => (
-          <DropdownMenuItem
-              Component={ VisibilityContainer }
-              key={ value }
-              onClick={ () => setGroup(value) }>
-            <Flex
-                alignChildrenVertical="middle"
-                direction="horizontal"
-                gap="x2"
-                grow>
-              <Flex
-                  grow
-                  initial="none">
-                <Text ellipsis>{ text }</Text>
-              </Flex>
-
-              <Visibility>
-                <Icon name="ChevronRight" />
-              </Visibility>
-            </Flex>
-          </DropdownMenuItem>
-        )) }
-      </DropdownMenu>
-
-      { group && (
-        <DropdownMenu key={ group } maxHeight="18rem" width="15rem">
-          { options.map(({ text, value }) => (
-            <DropdownMenuItem onClick={ () => setItem(value) }>
-            { group } / { text }
-            </DropdownMenuItem>
-          ) }
-        </DropdownMenu>
-      ) }
-    </DropdownMenus>
-  );
-};`}</CodeBlock>
-        </>
-      )}
-
-      {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.
-          </Text>
-
-          <Dropdown
-            margin="x8"
-            onChange={(item) => setSelectedItem(item)}
-            options={optionGroups}
-            selected={selectedItem}
-          >
-            Select Item {selectedItem && `(${selectedItem})`}
-          </Dropdown>
-
-          <CodeBlock margin="x4" title="Dropdown usage example">{`const Component = () => {
-  const [value, setValue] = useState();
-
-  return (
-    <Dropdown
-        onChange={ setValue }
-        options={ ${JSON.stringify(optionGroups)} }
-        selected={ value }>
-      Select item
-    </Dropdown>
-  );
-}`}</CodeBlock>
-        </>
-      )}
-    </Section>
-  );
-};
-
-export default SectionDropdown;

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

@@ -1,143 +0,0 @@
-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';
-import SectionSubTitle from '../../Section/SectionSubTitle';
-
-const { useState } = React;
-
-const SectionDot = () => {
-  const [basicExpanded, setBasicExpanded] = useState(false);
-  const [peekExpanded, setPeekExpanded] = useState(false);
-
-  return (
-    <Section>
-      <Base margin="x16">
-        <SectionSubTitle>Basic example</SectionSubTitle>
-        <Card direction="vertical" elevation="x2">
-          <CardContent grow padding="x6">
-            <Text align="middle" margin="x4" size="4" weight="bold">
-              I must protest your unauthorised presence...
-            </Text>
-
-            <Link
-              color="grape-3"
-              onClick={() => {
-                setBasicExpanded(!basicExpanded);
-              }}
-            >
-              <Flex alignChildren="middle" direction="horizontal" gap="x1">
-                <Flex>See {basicExpanded ? 'less' : 'more'}</Flex>
-
-                <Flex>
-                  <Icon name={basicExpanded ? 'ArrowUp' : 'ArrowDown'} />
-                </Flex>
-              </Flex>
-            </Link>
-          </CardContent>
-
-          <Expand expanded={basicExpanded} removeChildren>
-            <CardDivider />
-
-            <CardContent grow padding="x6">
-              <Text align="middle" size="4" weight="bold">
-                ... on this bridge!
-              </Text>
-            </CardContent>
-          </Expand>
-        </Card>
-      </Base>
-
-      <CodeBlock title="Expand - Basic Usage Example">{`const Component = () => {
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  return (
-    <React.Fragment>
-      <Link onClick={ () => setIsExpanded(!isExpanded) }>
-        Toggle expanded area
-      </Link>
-
-      <Expand expanded={ isExpanded }>
-        You can see me when expanded!
-      </Expand>
-    </React.Fragment>
-  );
-};`}</CodeBlock>
-
-      <Base margin="x16">
-        <SectionSubTitle>With some content visible</SectionSubTitle>
-        <Card direction="vertical" elevation="x2">
-          <CardContent grow padding="x6">
-            <Text align="middle" margin="x4" size="4" weight="bold">
-              I must protest your unauthorised presence...
-            </Text>
-
-            <Link
-              color="grape-3"
-              onClick={() => {
-                setPeekExpanded(!peekExpanded);
-              }}
-            >
-              <Flex alignChildren="middle" direction="horizontal" gap="x1">
-                <Flex>See {peekExpanded ? 'less' : 'more'}</Flex>
-
-                <Flex>
-                  <Icon name={peekExpanded ? 'ArrowUp' : 'ArrowDown'} />
-                </Flex>
-              </Flex>
-            </Link>
-          </CardContent>
-
-          <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?
-                </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?
-                </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.
-                </Text>
-              </Flex>
-            </CardContent>
-          </Expand>
-        </Card>
-      </Base>
-
-      <CodeBlock title="Expand - 'Peek' Usage Example">{`const Component = () => {
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  return (
-    <React.Fragment>
-      <Link onClick={ () => setIsExpanded(!isExpanded) }>
-        Toggle expanded area
-      </Link>
-
-      <Expand expanded={ isExpanded } peekHeight="5rem">
-        <Flex direction="vertical" gap="x4>
-          <Text>Some of me is always visible, even when collapsed!</Text>
-
-          <Text>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea, consequuntur harum? Eos similique veritatis dolores voluptas aliquam dignissimos expedita hic molestias ipsa, magni eum, qui fugit dolorem modi vero laborum.</Text>
-
-          <Text>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem minus possimus distinctio ipsa enim aspernatur, nihil dolores labore, illo molestiae ad veniam, laborum fugit iste optio incidunt dignissimos ut? Quia!</Text>
-        </Flex>
-      </Expand>
-    </React.Fragment>
-  );
-};`}</CodeBlock>
-    </Section>
-  );
-};
-
-export default SectionDot;

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

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import Section from '../../Section/Section';
-
-const SectionBase = () => {
-  return (
-    <Section>
-      <CodeBlock title="Flex Usage Example">{`const Component = () => (
-  <Flex direction="horizontal" paddingVertical="x6">
-    <Flex alignChildrenVertical="middle" direction="horizontal" gap="x2" grow>
-      <Flex>
-        <Icon name="Bitbot" />
-      </Flex>
-
-      <Flex>
-        <Text size="3">Bitkit</Text>
-      </Flex>
-    </Flex>
-
-    <Flex>
-      <Tabs>
-        <Tab>
-          Documentation
-        </Tab>
-      </Tabs>
-    </Flex>
-  </Flex>
-);`}</CodeBlock>
-    </Section>
-  );
-};
-
-export default SectionBase;