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

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

@@ -1,125 +0,0 @@
-import * as React from 'react';
-import {
-  Badge,
-  Flex,
-  Sidebar,
-  SidebarMenu,
-  SidebarMenuItem,
-  SidebarSubMenu,
-  SidebarSubMenuItem,
-  Text,
-} from '@bitrise/bitkit';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import Section from '../../Section/Section';
-
-const { useState } = React;
-
-const SectionSidebar = () => {
-  const [active, setActive] = useState('1');
-
-  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>
-              </SidebarMenu>
-
-              <SidebarMenu active={active.startsWith('2')}>
-                <SidebarMenuItem icon="BuildstatusLoading" onClick={() => setActive('2')}>
-                  MenuItem
-                </SidebarMenuItem>
-
-                <SidebarSubMenu>
-                  <SidebarSubMenuItem active={active === '2/1'} onClick={() => setActive('2/1')}>
-                    SubMenuItem
-                  </SidebarSubMenuItem>
-
-                  <SidebarSubMenuItem active={active === '2/2'} onClick={() => setActive('2/2')}>
-                    SubMenuItem
-                  </SidebarSubMenuItem>
-
-                  <SidebarSubMenuItem active={active === '2/3'} onClick={() => setActive('2/3')}>
-                    SubMenuItem
-                  </SidebarSubMenuItem>
-                </SidebarSubMenu>
-              </SidebarMenu>
-
-              <SidebarMenu active={active.startsWith('3')}>
-                <SidebarMenuItem icon="BuildstatusLoading" onClick={() => setActive('3')}>
-                  <Flex direction="horizontal" gap="x2">
-                    <Flex>MenuItem</Flex>
-                    <Flex>
-                      <Badge backgroundColor="blue-3" textColor="gray-1">
-                        BETA
-                      </Badge>
-                    </Flex>
-                  </Flex>
-                </SidebarMenuItem>
-
-                <SidebarSubMenu>
-                  <SidebarSubMenuItem active={active === '3/1'} onClick={() => setActive('3/1')}>
-                    SubMenuItem
-                  </SidebarSubMenuItem>
-
-                  <SidebarSubMenuItem active={active === '3/2'} onClick={() => setActive('3/2')}>
-                    SubMenuItem
-                  </SidebarSubMenuItem>
-
-                  <SidebarSubMenuItem active={active === '3/3'} onClick={() => setActive('3/3')}>
-                    SubMenuItem
-                  </SidebarSubMenuItem>
-                </SidebarSubMenu>
-              </SidebarMenu>
-            </Sidebar>
-          </Flex>
-        ))}
-      </Flex>
-
-      <CodeBlock title="Sidebar Usage Example">{`const Component = () => {
-  const [active, setActive] = useState();
-
-  return (
-    <Sidebar>
-      <SidebarMenu active={ active.startsWith('/1') }>
-        <SidebarMenuItem onClick={ () => setActive('/1') }>
-          1
-        </SidebarMenuItem>
-      </SidebarMenu>
-
-      <SidebarMenu active={ active.startsWith('/2') }>
-        <SidebarMenuItem onClick={ () => setActive('/2/1') }>
-          2
-        </SidebarMenuItem>
-
-        <SidebarSubMenu>
-          <SidebarSubMenuItem
-              active={ active === '/2/1' }
-              icon="App"
-              onClick={ () => setActive('/2/1') }>
-            2 / 1
-          </SidebarSubMenuItem>
-
-          <SidebarSubMenuItem
-              active={ active === '/2/2' }
-              icon="Trigger"
-              onClick={ () => setActive('/2/2') }>
-            2 / 2
-          </SidebarSubMenuItem>
-        </SidebarSubMenu>
-      </SidebarMenu>
-    </Sidebar>
-  );
-};`}</CodeBlock>
-    </Section>
-  );
-};
-
-export default SectionSidebar;

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

@@ -1,99 +0,0 @@
-import * as React from 'react';
-import { Card, CardContent, CardDivider, Flex, Skeleton, SkeletonBox, Text } from '@bitrise/bitkit';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import Section from '../../Section/Section';
-
-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.
-      </Text>
-
-      <Flex direction="horizontal" gap="x6" margin="x6">
-        {Array.from({ length: 2 }).map((_, i) => (
-          <Flex grow initial="none" key={i}>
-            <Skeleton active>
-              <Card direction="vertical">
-                <CardContent padding="x4">
-                  <SkeletonBox height="1.5rem" margin="x1" />
-                  <SkeletonBox height="0.5rem" margin="x1" />
-                  <SkeletonBox height="0.5rem" margin="x1" />
-                  <SkeletonBox height="0.5rem" margin="x1" />
-                </CardContent>
-                <CardDivider />
-                <CardContent padding="x4">
-                  <Flex direction="horizontal" gap="x6">
-                    <Flex grow initial="none">
-                      <SkeletonBox height="1.5rem" />
-                    </Flex>
-
-                    <Flex grow initial="none">
-                      <SkeletonBox height="1.5rem" />
-                    </Flex>
-
-                    <Flex grow initial="none">
-                      <SkeletonBox height="1.5rem" />
-                    </Flex>
-                  </Flex>
-                </CardContent>
-              </Card>
-            </Skeleton>
-          </Flex>
-        ))}
-      </Flex>
-
-      <Flex direction="horizontal" gap="x6">
-        {Array.from({ length: 4 }).map((_, i) => (
-          <Flex grow initial="none" key={i}>
-            <Skeleton active>
-              <Card direction="vertical">
-                <CardContent padding="x4">
-                  <SkeletonBox height="3rem" margin="x1" />
-                </CardContent>
-                <CardDivider />
-                <CardContent padding="x4">
-                  <SkeletonBox height="0.25rem" margin="x1" />
-                  <SkeletonBox height="0.25rem" margin="x1" />
-                  <SkeletonBox height="0.25rem" margin="x1" />
-                </CardContent>
-              </Card>
-            </Skeleton>
-          </Flex>
-        ))}
-      </Flex>
-
-      <CodeBlock title="Skeleton Usage Example">{`const Component = () => (
-  <Skeleton active>
-    <Card direction="vertical">
-      <CardContent padding="x4">
-        <SkeletonBox height="1.5rem" margin="x1" />
-        <SkeletonBox height="0.5rem" margin="x1" />
-        <SkeletonBox height="0.5rem" margin="x1" />
-        <SkeletonBox height="0.5rem" margin="x1" />
-      </CardContent>
-      <CardDivider />
-      <CardContent padding="x4">
-        <Flex direction="horizontal" gap="x6">
-          <Flex grow initial="none">
-            <SkeletonBox height="1.5rem" />
-          </Flex>
-
-          <Flex grow initial="none">
-            <SkeletonBox height="1.5rem" />
-          </Flex>
-
-          <Flex grow initial="none">
-            <SkeletonBox height="1.5rem" />
-          </Flex>
-        </Flex>
-      </CardContent>
-    </Card>
-  </Skeleton>
-);`}</CodeBlock>
-    </Section>
-  );
-};
-
-export default SectionSkeleton;

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

@@ -1,53 +0,0 @@
-import * as React from 'react';
-import { Tabs, Tab } from '@bitrise/bitkit';
-import SandboxFrame from '../../Sandbox/SandboxFrame';
-import Section from '../../Section/Section';
-import Window from '../../Window/Window';
-
-const { useState } = React;
-
-const SectionStatus = () => {
-  const [selectedTab, setSelectedTab] = useState(1);
-
-  return (
-    <Section>
-      <Tabs gap="x6" margin="x4">
-        <Tab active={selectedTab === 1} onClick={() => setSelectedTab(1)}>
-          404 - Not Found
-        </Tab>
-
-        <Tab active={selectedTab === 2} onClick={() => setSelectedTab(2)}>
-          500 - Server Error
-        </Tab>
-      </Tabs>
-
-      {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" />
-        </Window>
-      )}
-
-      {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" />
-        </Window>
-      )}
-    </Section>
-  );
-};
-
-export default SectionStatus;

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

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import { hooks, AddonFooter, Base, ColorButton, Buttons, Flex, Status404, Text } from '@bitrise/bitkit';
-
-const { useMediaQuery } = hooks;
-
-const SectionStatus404Example = () => {
-  const match = useMediaQuery(['864px']);
-
-  return (
-    <Flex backgroundColor="grape-5" grow paddingVertical="x16" textColor="aqua-1">
-      <Status404 />
-
-      <Base paddingHorizontal="x6">
-        <Text align="middle" margin="x8" size="4" weight="bold">
-          Do you prefer the deep unkown, or looking for something else?
-        </Text>
-
-        <Buttons
-          alignChildren={match('864px') ? 'middle' : undefined}
-          fullWidth={!match('864px')}
-          gap={match('864px') ? 'x6' : 'x3'}
-        >
-          <ColorButton color="white" size="large">
-            Switch Account
-          </ColorButton>
-
-          <ColorButton color="white" size="large">
-            Learn Bitrise Tricks
-          </ColorButton>
-
-          <ColorButton color="white" size="large">
-            Check Open Positions
-          </ColorButton>
-        </Buttons>
-      </Base>
-
-      <AddonFooter addonName="Ship" margin="x16" />
-    </Flex>
-  );
-};
-
-export default SectionStatus404Example;

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

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { AddonFooter, Flex, Status500 } from '@bitrise/bitkit';
-
-const SectionStatus500Example = () => {
-  return (
-    <Flex backgroundColor="grape-5" grow paddingVertical="x16" textColor="aqua-1">
-      <Status500 />
-      <AddonFooter addonName="Ship" margin="x16" />
-    </Flex>
-  );
-};
-
-export default SectionStatus500Example;

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

@@ -1,83 +0,0 @@
-import * as React from 'react';
-import {
-  Button,
-  Icon,
-  Table,
-  TableBody,
-  TableCell,
-  TableHeader,
-  TableHeaderCell,
-  TableHeaderRow,
-  TableRow,
-  Text,
-  Base,
-} from '@bitrise/bitkit';
-import Section from '../../Section/Section';
-import SectionSubTitle from '../../Section/SectionSubTitle';
-
-const SectionTable = () => {
-  return (
-    <Section>
-      <Base margin="x6">
-        <SectionSubTitle>Card Table</SectionSubTitle>
-        <Table type="card">
-          <TableHeader>
-            <TableHeaderRow>
-              <TableHeaderCell>Trace Name</TableHeaderCell>
-              <TableHeaderCell align="middle">Duration</TableHeaderCell>
-              <TableHeaderCell align="middle">Sample</TableHeaderCell>
-              <TableHeaderCell />
-            </TableHeaderRow>
-          </TableHeader>
-
-          <TableBody>
-            {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>
-                <TableCell shrink>
-                  <Button level="tertiary" size="small">
-                    <Text>Details</Text>
-                    <Icon name="ArrowForward" />
-                  </Button>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </Base>
-      <Base margin="x12">
-        <SectionSubTitle>Flat Table</SectionSubTitle>
-        <Table type="flat">
-          <TableHeader>
-            <TableHeaderRow>
-              <TableHeaderCell>Trace Name</TableHeaderCell>
-              <TableHeaderCell align="middle">Duration</TableHeaderCell>
-              <TableHeaderCell align="middle">Sample</TableHeaderCell>
-              <TableHeaderCell />
-            </TableHeaderRow>
-          </TableHeader>
-
-          <TableBody>
-            {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>
-                <TableCell shrink>
-                  <Button level="tertiary" size="small">
-                    <Text>Details</Text>
-                    <Icon name="ArrowForward" />
-                  </Button>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </Base>
-    </Section>
-  );
-};
-
-export default SectionTable;

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

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { Tab, Tabs } from '@bitrise/bitkit';
-import Section from '../../Section/Section';
-
-const { useState } = React;
-
-const SectionTabs = () => {
-  const [active, setActive] = useState(0);
-
-  return (
-    <Section>
-      <Tabs>
-        <Tab active={active === 0} onClick={() => setActive(0)}>
-          Metrics
-        </Tab>
-
-        <Tab active={active === 1} onClick={() => setActive(1)}>
-          Sessions
-        </Tab>
-      </Tabs>
-    </Section>
-  );
-};
-
-export default SectionTabs;

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

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import { Text } from '@bitrise/bitkit';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-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">
-        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>
-
-      <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>
-    </Section>
-  );
-};
-
-export default SectionText;

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

@@ -1,43 +0,0 @@
-import * as React from 'react';
-import { Textarea, Base, InputLabel, InputInlineHelp } from '@bitrise/bitkit';
-import SectionSubTitle from '../../Section/SectionSubTitle';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import Section from '../../Section/Section';
-
-const SectionTextarea = () => {
-  return (
-    <Section>
-      <Base margin="x6">
-        <SectionSubTitle>Simple text area</SectionSubTitle>
-
-        <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" />
-        <InputInlineHelp>* Type in at least 8 characters</InputInlineHelp>
-      </Base>
-
-      <CodeBlock title="Textarea usage example">{`const Component = () => (
-<Flex margin="x3">
-  <InputLabel>
-    How could be improve our services? *
-  </InputLabel>
-
-  <Textarea placeholder="Your feedback">
-    My awesome feedback
-  </Textarea>
-
-  <InputInlineHelp>
-    * Type in at least 8 characters
-  </InputInlineHelp>
-</Flex>
-);`}</CodeBlock>
-    </Section>
-  );
-};
-
-export default SectionTextarea;

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

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { hooks, Toggle, Flex } from '@bitrise/bitkit';
-
-import Section from '../../Section/Section';
-import SectionSubTitle from '../../Section/SectionSubTitle';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-
-const { useMediaQuery } = hooks;
-
-const SectionToggle = () => {
-  const match = useMediaQuery(['896px']);
-
-  return (
-    <Section>
-      <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'}>
-          <SectionSubTitle>Unchecked Toggle</SectionSubTitle>
-          <Toggle>Label</Toggle>
-        </Flex>
-
-        <Flex grow initial={match('896px') ? 'none' : 'content'}>
-          <SectionSubTitle>Disabled & checked Toggle</SectionSubTitle>
-          <Toggle defaultChecked disabled>
-            Label
-          </Toggle>
-        </Flex>
-
-        <Flex grow initial={match('896px') ? 'none' : 'content'}>
-          <SectionSubTitle>Disabled & unchecked Toggle</SectionSubTitle>
-          <Toggle disabled>Label</Toggle>
-        </Flex>
-      </Flex>
-
-      <CodeBlock title="Toggle usage example">{`const Component = () => (
-  const [checked, setChecked] = useState(false);
-
-  <Toggle checked={ checked } onChange={ () => setChecked(!checked) }>
-      Label
-  </Toggle>
-);`}</CodeBlock>
-    </Section>
-  );
-};
-
-export default SectionToggle;

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

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { hooks, Button, Flex, Icon, Tooltip } from '@bitrise/bitkit';
-import Section from '../../Section/Section';
-import SectionSubTitle from '../../Section/SectionSubTitle';
-
-const { useState } = React;
-const { useMediaQuery } = hooks;
-
-const SectionTooltips = () => {
-  const [visible, setVisible] = useState(false);
-  const match = useMediaQuery(['896px']);
-
-  return (
-    <Section>
-      <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" />}
-              </Tooltip>
-            </Flex>
-
-            <Flex>
-              <Tooltip title="Woooooooooooooow">
-                {({ ref, ...rest }) => <Icon {...rest} innerRef={ref} name="Wow" size="3rem" />}
-              </Tooltip>
-            </Flex>
-          </Flex>
-        </Flex>
-
-        <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'}
-              </Button>
-            )}
-          </Tooltip>
-        </Flex>
-      </Flex>
-    </Section>
-  );
-};
-
-export default SectionTooltips;