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

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

@@ -1,276 +0,0 @@
-import * as React from 'react';
-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';
-
-const SectionCards = () => {
-  const [selectedTab, setSelectedTab] = React.useState(1);
-
-  return (
-    <Section>
-      <Tabs gap="x6" margin="x8">
-        <Tab active={selectedTab === 1} onClick={() => setSelectedTab(1)}>
-          Elevation Levels
-        </Tab>
-
-        <Tab active={selectedTab === 2} onClick={() => setSelectedTab(2)}>
-          Divided Content
-        </Tab>
-
-        <Tab active={selectedTab === 3} onClick={() => setSelectedTab(3)}>
-          Card Buttons
-        </Tab>
-      </Tabs>
-
-      {selectedTab === 1 && (
-        <>
-          <Card margin="x4">
-            <CardContent padding="x6">
-              <Flex alignChildrenVertical="middle" direction="horizontal" gap="x4">
-                <Flex>
-                  <Icon name="App" textColor="aqua-3" />
-                </Flex>
-
-                <Flex>
-                  <Text size="2" textColor="grape-5" uppercase weight="bold">
-                    Unelevated
-                  </Text>
-                </Flex>
-              </Flex>
-            </CardContent>
-          </Card>
-
-          <Card elevation="x2" margin="x4">
-            <CardContent padding="x6">
-              <Flex alignChildrenVertical="middle" direction="horizontal" gap="x4">
-                <Flex>
-                  <Icon name="App" textColor="aqua-3" />
-                </Flex>
-
-                <Flex>
-                  <Text size="2" textColor="grape-5" uppercase weight="bold">
-                    Elevation x2
-                  </Text>
-                </Flex>
-              </Flex>
-            </CardContent>
-          </Card>
-
-          <Card elevation="x3" margin="x4">
-            <CardContent padding="x6">
-              <Flex alignChildrenVertical="middle" direction="horizontal" gap="x4">
-                <Flex>
-                  <Icon name="App" textColor="aqua-3" />
-                </Flex>
-
-                <Flex>
-                  <Text size="2" textColor="grape-5" uppercase weight="bold">
-                    Elevation x3
-                  </Text>
-                </Flex>
-              </Flex>
-            </CardContent>
-          </Card>
-
-          <CodeBlock title="Card with elevation">{`const Component = () => (
-  <Card direction="vertical" elevation="x2">
-    <CardContent padding="x6">...</CardContent>
-  </Card>
-);`}</CodeBlock>
-        </>
-      )}
-
-      {selectedTab === 2 && (
-        <>
-          <Card direction="vertical" margin="x4">
-            <CardContent grow padding="x6">
-              <Flex alignChildrenVertical="middle" direction="horizontal" gap="x4">
-                <Flex>
-                  <Icon name="App" textColor="aqua-3" />
-                </Flex>
-
-                <Flex>
-                  <Text size="2" textColor="grape-5" uppercase weight="bold">
-                    Vertically Divided Content
-                  </Text>
-                </Flex>
-              </Flex>
-            </CardContent>
-
-            <CardDivider />
-
-            <CardContent grow padding="x6">
-              <Text align="end" size="2" textColor="gray-5" uppercase>
-                Showing 1 / 1 Apps
-              </Text>
-            </CardContent>
-          </Card>
-
-          <Card direction="horizontal" margin="x4">
-            <CardContent grow padding="x6">
-              <Flex alignChildrenVertical="middle" direction="horizontal" gap="x4">
-                <Flex>
-                  <Icon name="BuildstatusAborted" textColor="red-3" />
-                </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>
-                </Flex>
-              </Flex>
-            </CardContent>
-
-            <CardDivider />
-
-            <CardContent alignChildren="middle" direction="horizontal" padding="x6">
-              <Icon name="Clock" textColor="gray-4" />
-            </CardContent>
-          </Card>
-
-          <CodeBlock title="Card with divisions">{`const VerticalDividedComponent = () => (
-  <Card direction="vertical">
-    <CardContent padding="x6">...</CardContent>
-    <CardDivider />
-    <CardContent padding="x6">...</CardContent>
-  </Card>
-);
-
-const HorizontalDividedComponent = () => (
-  <Card direction="horizontal">
-    <CardContent padding="x6">...</CardContent>
-    <CardDivider />
-    <CardContent padding="x6">...</CardContent>
-  </Card>
-);`}</CodeBlock>
-        </>
-      )}
-
-      {selectedTab === 3 && (
-        <>
-          <Flex margin="x12">
-            <SectionSubTitle>Vertical Divided Buttons</SectionSubTitle>
-
-            <Flex direction="horizontal" gap="x6">
-              <Flex grow initial="none">
-                <Card direction="vertical" margin="x4">
-                  <CardContent grow padding="x6">
-                    <ProgressBitbot textColor="grape-3" />
-                  </CardContent>
-
-                  <CardDivider />
-
-                  <CardButton level="primary">
-                    <Text>Primary</Text>
-                    <Icon name="ArrowForward" />
-                  </CardButton>
-                </Card>
-              </Flex>
-
-              <Flex grow initial="none">
-                <Card direction="vertical" margin="x4">
-                  <CardContent grow padding="x6">
-                    <ProgressBitbot textColor="grape-3" />
-                  </CardContent>
-
-                  <CardDivider />
-
-                  <CardButton level="secondary">
-                    <Text>Secondary</Text>
-                    <Icon name="ArrowForward" />
-                  </CardButton>
-                </Card>
-              </Flex>
-
-              <Flex grow initial="none">
-                <Card direction="vertical" margin="x4">
-                  <CardContent grow padding="x6">
-                    <ProgressBitbot textColor="grape-3" />
-                  </CardContent>
-
-                  <CardDivider />
-
-                  <CardButton level="tertiary">
-                    <Text>Tertiary</Text>
-                    <Icon name="ArrowForward" />
-                  </CardButton>
-                </Card>
-              </Flex>
-            </Flex>
-          </Flex>
-
-          <Flex margin="x12">
-            <SectionSubTitle>Horizontally Divided Buttons</SectionSubTitle>
-
-            <Card direction="horizontal" margin="x4">
-              <CardContent grow padding="x6">
-                <Text size="2" textColor="gray-5" uppercase weight="bold">
-                  Primary
-                </Text>
-              </CardContent>
-
-              <CardDivider />
-
-              <CardButton level="primary">
-                <Icon name="ArrowForward" />
-              </CardButton>
-            </Card>
-
-            <Card direction="horizontal" margin="x4">
-              <CardContent grow padding="x6">
-                <Text size="2" textColor="gray-5" uppercase weight="bold">
-                  Secondary
-                </Text>
-              </CardContent>
-
-              <CardDivider />
-
-              <CardButton level="secondary">
-                <Icon name="ArrowForward" />
-              </CardButton>
-            </Card>
-
-            <Card direction="horizontal" margin="x4">
-              <CardContent grow padding="x6">
-                <Text size="2" textColor="gray-5" uppercase weight="bold">
-                  Tertiary
-                </Text>
-              </CardContent>
-
-              <CardDivider />
-
-              <CardButton level="tertiary">
-                <Icon name="ArrowForward" />
-              </CardButton>
-            </Card>
-          </Flex>
-
-          <CodeBlock title="Card with CardButton">{`const VerticalDividedComponent = () => (
-  <Card direction="vertical">
-    <CardContent padding="x6">...</CardContent>
-    <CardDivider />
-    <CardButton level="primary">Action</CardButton>
-  </Card>
-);`}</CodeBlock>
-        </>
-      )}
-    </Section>
-  );
-};
-
-export default SectionCards;

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

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { hooks, Checkbox, Flex } from '@bitrise/bitkit';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import Section from '../../Section/Section';
-import SectionSubTitle from '../../Section/SectionSubTitle';
-
-const { useMediaQuery } = hooks;
-
-const SectionFormElements = () => {
-  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 Checkbox</SectionSubTitle>
-          <Checkbox defaultChecked>Checkbox label</Checkbox>
-        </Flex>
-
-        <Flex grow initial={match('896px') ? 'none' : 'content'}>
-          <SectionSubTitle>Unchecked Checkbox</SectionSubTitle>
-          <Checkbox>Checkbox label</Checkbox>
-        </Flex>
-
-        <Flex grow initial={match('896px') ? 'none' : 'content'}>
-          <SectionSubTitle>Disabled Checkbox</SectionSubTitle>
-          <Checkbox disabled>Checkbox label</Checkbox>
-        </Flex>
-      </Flex>
-
-      <CodeBlock title="Checkbox usage example">{`const Component = () => (
-  <Checkbox>Checkbox label</Checkbox>
-);`}</CodeBlock>
-    </Section>
-  );
-};
-
-export default SectionFormElements;

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

@@ -1,82 +0,0 @@
-import * as React from 'react';
-import { DateTime } from 'luxon';
-import { Button, Buttons, DatePicker, Icon, Text } from '@bitrise/bitkit';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import Section from '../../Section/Section';
-
-const { useState } = React;
-
-const dateSelectableFrom = DateTime.local().minus({ months: 2 }).toMillis();
-const dateSelectableTo = DateTime.local().plus({ days: 5 }).toMillis();
-
-const SectionDatePicker = () => {
-  const [dateSelectedFrom, setDateSelectedFrom] = useState();
-  const [dateSelectedTo, setDateSelectedTo] = useState();
-  const [visible, setVisible] = useState(false);
-
-  const handleClose = () => setVisible(false);
-  const handleOpen = () => setVisible(true);
-  const handleApply = (dateSelectedFrom?: number, dateSelectedTo?: number) => {
-    setDateSelectedFrom(dateSelectedFrom);
-    setDateSelectedTo(dateSelectedTo);
-  };
-
-  return (
-    <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}>
-              <Icon name="Calendar" />
-              <Text>
-                {!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 = () => {
-  const [dateSelectedFrom, setDateSelectedFrom] = useState();
-  const [dateSelectedTo, setDateSelectedTo] = useState();
-  const [visible, setVisible] = useState(false);
-
-  return (
-    <DatePicker
-      dateSelectableFrom={ ${dateSelectableFrom} }
-      dateSelectableTo={ ${dateSelectableTo} }
-      dateSelectedFrom={ dateSelectedFrom }
-      dateSelectedTo={ dateSelectedTo }
-      onApply={ (dateSelectedFrom?: number, dateSelectedTo?: number) => {
-        setDateSelectedFrom(dateSelectedFrom);
-        setDateSelectedTo(dateSelectedTo);
-      } }
-      onClose={ () => setVisible(false) }
-      visible={ visible }>
-    { ({ ref }) => (
-    <Button
-        innerRef={ ref }
-        level="primary"
-        onClick={ () => setVisible(true) }>
-      <Icon name="Calendar" />
-      <Text>Select a Date</Text>
-    </Button>
-    ) }
-  </DatePicker>
-  );
-}`}</CodeBlock>
-    </Section>
-  );
-};
-
-export default SectionDatePicker;

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

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { Divider } from '@bitrise/bitkit';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import Section from '../../Section/Section';
-
-const SectionDivider = () => {
-  return (
-    <Section>
-      <Divider color="grape-5" direction="horizontal" margin="x1" />
-      <Divider color="grape-4" direction="horizontal" margin="x1" />
-      <Divider color="grape-3" direction="horizontal" margin="x1" />
-      <Divider color="grape-2" direction="horizontal" margin="x1" />
-      <Divider color="grape-1" direction="horizontal" margin="x1" />
-
-      <Divider color="gray-1" direction="horizontal" margin="x1" />
-      <Divider color="gray-2" direction="horizontal" margin="x1" />
-      <Divider color="gray-3" direction="horizontal" margin="x1" />
-      <Divider color="gray-4" direction="horizontal" margin="x1" />
-      <Divider color="gray-5" direction="horizontal" margin="x1" />
-      <Divider color="gray-6" direction="horizontal" margin="x1" />
-      <Divider color="gray-7" direction="horizontal" margin="x1" />
-      <Divider color="gray-8" direction="horizontal" margin="x1" />
-
-      <CodeBlock title="Divider Usage Example">{`const Component = () => (
-  <Divider color="gray-1" direction="horizontal" margin="x1" width="0.125rem" />
-);`}</CodeBlock>
-    </Section>
-  );
-};
-
-export default SectionDivider;

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

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import shuffle from 'lodash.shuffle';
-import { variables, Dot, Flex, Grid, TypeColors } from '@bitrise/bitkit';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import Section from '../../Section/Section';
-
-const colors = shuffle(Object.entries(variables.colorMap));
-
-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" />
-          </Flex>
-        ))}
-      </Grid>
-
-      <CodeBlock title="Dot Usage Example">{`const Component = () => (
-  <Dot backgroundColor="grape-3" size="0.5rem" />
-);`}</CodeBlock>
-    </Section>
-  );
-};
-
-export default SectionDot;