@bitrise/bitkit 9.5.2 → 9.5.4-alpha-chakra.1

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

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import SandboxFrame from '../../Sandbox/SandboxFrame';
-import Section from '../../Section/Section';
-import Window from '../../Window/Window';
-
-const SectionAddonBeam = () => {
-  return (
-    <Section>
-      <Window
-        backgroundColor="gray-1"
-        borderColor="gray-2"
-        borderWidth="x1"
-        elevation="x2"
-        textColor="grape-5"
-        title="Responsive AddonBeam"
-      >
-        <SandboxFrame minHeight="200px" src="/sandbox/addonbeam" />
-      </Window>
-
-      <CodeBlock title="AddonBeam usage example">{`const Component = () => {
-  const match = useMediaQuery(['900px']);
-  const [isHamburgerIconActive, setIsHamburgerIconActive] = useState(false);
-
-  return (
-      <AddonBeam
-        addonIcon="Deployment"
-        addonName="Ship"
-        appImage="https://app.images.com/app-image.png"
-        appLink="https://bitrise.io"
-        appName="App name this long"
-        backgroundColor="grape-4"
-        isHamburgerIconActive={ isHamburgerIconActive }
-        isInResponsiveView={ !match('900px') }
-        onHamburgerIconClick={ () => setIsHamburgerIconActive(!isHamburgerIconActive) }
-        textColor="gray-1">
-      <AddonBeamLink href="" icon="Settings">
-        Settings
-      </AddonBeamLink>
-    </AddonBeam>
-  );
-};`}</CodeBlock>
-    </Section>
-  );
-};
-
-export default SectionAddonBeam;

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

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import { hooks, AddonBeam, AddonBeamLink } from '@bitrise/bitkit';
-
-const { useState } = React;
-const { useMediaQuery } = hooks;
-
-const SectionAddonBeamSandbox = () => {
-  const match = useMediaQuery(['640px']);
-  const [isHamburgerIconActive, setIsHamburgerIconActive] = useState(false);
-
-  return (
-    <AddonBeam
-      addonIcon="Deployment"
-      addonName="Ship"
-      appImage="https://bitrise-steplib-collection.s3.amazonaws.com/steps/deploy-to-bitrise-io/assets/icon.svg"
-      appLink="https://bitrise.io"
-      appName="App name this long"
-      backgroundColor="grape-4"
-      isBeta
-      isHamburgerIconActive={isHamburgerIconActive}
-      isInResponsiveView={!match('640px')}
-      onHamburgerIconClick={() => setIsHamburgerIconActive(!isHamburgerIconActive)}
-      textColor="gray-1"
-    >
-      <AddonBeamLink href="" icon="Settings">
-        Settings
-      </AddonBeamLink>
-    </AddonBeam>
-  );
-};
-
-export default SectionAddonBeamSandbox;

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

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { AddonFooter, Base } from '@bitrise/bitkit';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import Section from '../../Section/Section';
-
-const SectionAddonFooter = () => {
-  return (
-    <Section>
-      <Base paddingVertical="x12">
-        <AddonFooter addonName="Ship" />
-      </Base>
-
-      <CodeBlock title="AddonFooter Usage Example">
-        {`const Component = () => (
-  <AddonFooter addonName="Ship" />
-);`}
-      </CodeBlock>
-    </Section>
-  );
-};
-
-export default SectionAddonFooter;

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

@@ -1,59 +0,0 @@
-import * as React from 'react';
-import { DocumentationObject, FlowElementsType, FlowLiteralType } from 'react-docgen';
-import { Appear, Base, Flex, Grid, Icon, Text, Toggle, TypeAppearAnimationName } from '@bitrise/bitkit';
-import documentation from '../../../../documentation.json';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import Section from '../../Section/Section';
-
-const { useState } = React;
-const AppearDocs: DocumentationObject = documentation.Appear;
-const animationElements =
-  AppearDocs.props &&
-  AppearDocs.props &&
-  AppearDocs.props.animation &&
-  AppearDocs.props.animation.flowType &&
-  ((AppearDocs.props.animation.flowType as FlowElementsType).elements as FlowLiteralType[]);
-
-const SectionAppear = () => {
-  const [visible, setVisible] = useState(true);
-
-  return (
-    <Section>
-      <Base margin="x6">
-        <Grid alignChildren="middle" gap="x2" repeatWidthMin="12rem">
-          {animationElements &&
-            animationElements.map(({ value }, i) => (
-              <Flex alignChildren="middle" direction="vertical" key={value} padding="x6">
-                <Appear
-                  animation={value.slice(1, -1) as TypeAppearAnimationName}
-                  duration="base"
-                  margin="x2"
-                  visible={visible}
-                >
-                  <Icon name="Bitbot" size="3rem" textColor={i % 2 ? 'grape-2' : 'grape-3'} />
-                </Appear>
-
-                <Text margin="x2">{value}</Text>
-              </Flex>
-            ))}
-        </Grid>
-      </Base>
-
-      <Flex alignChildren="middle" direction="vertical">
-        <Flex>
-          <Toggle checked={visible} onChange={() => setVisible(!visible)}>
-            Visible
-          </Toggle>
-        </Flex>
-      </Flex>
-
-      <CodeBlock title="Appear Usage Example">{`const Component = () => (
-  <Appear animation="FadeSlideUp" duration="slow">
-    <Icon name="Bitbot" size="3rem" textColor="grape-3"></Icon>
-  </Appear>
-);`}</CodeBlock>
-    </Section>
-  );
-};
-
-export default SectionAppear;

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

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { Base, Avatar, Flex } from '@bitrise/bitkit';
-import Section from '../../Section/Section';
-import SectionSubTitle from '../../Section/SectionSubTitle';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-
-const SectionBadge = () => {
-  const url = 'https://bitrise-public-content-production.s3.amazonaws.com/org-icons/default_avatar-02.png';
-  return (
-    <Section>
-      <Base margin="x6">
-        <SectionSubTitle>Avatar with URL</SectionSubTitle>
-        <Flex alignChildrenVertical="middle" direction="horizontal" gap="x2">
-          <Avatar name="Test User" size="4rem" url={url} />
-          <Avatar name="Test User" size="3rem" url={url} />
-          <Avatar name="Test User" size="2rem" url={url} />
-        </Flex>
-      </Base>
-
-      <Base margin="x6">
-        <SectionSubTitle>Avatar placeholder (no URL)</SectionSubTitle>
-        <Flex direction="horizontal" gap="x2">
-          <Avatar name="placeholder" size="40px" />
-          <Avatar name="another example" size="40px" />
-          <Avatar name="bitrise" size="40px" />
-        </Flex>
-      </Base>
-
-      <Base margin="x6">
-        <SectionSubTitle>Border radius variations</SectionSubTitle>
-        <Flex direction="horizontal" gap="x2">
-          <Avatar borderRadius="x1" name="placeholder" size="40px" />
-          <Avatar borderRadius="x1" name="placeholder" size="40px" url={url} />
-          <Avatar borderRadius="x2" name="placeholder" size="40px" />
-          <Avatar borderRadius="x2" name="placeholder" size="40px" url={url} />
-          <Avatar borderRadius="rounded" name="placeholder" size="40px" />
-          <Avatar borderRadius="rounded" name="placeholder" size="40px" url={url} />
-        </Flex>
-      </Base>
-
-      <CodeBlock title="Badge Usage Example">
-        {`const Component = () => (
-  <Avatar name="Bitrise" url="https://app.bitrise.io/assets/images/hero/cat-illustration.png" size="3rem" />
-);`}
-      </CodeBlock>
-    </Section>
-  );
-};
-
-export default SectionBadge;

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

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { Base, Badge } from '@bitrise/bitkit';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import Section from '../../Section/Section';
-
-const SectionBadge = () => {
-  return (
-    <Section>
-      <Base margin="x1">
-        <Badge backgroundColor="eggplant" textColor="gray-1">
-          Coming soon
-        </Badge>
-      </Base>
-
-      <Base margin="x1">
-        <Badge backgroundColor="blue-3" textColor="gray-1">
-          Beta
-        </Badge>
-      </Base>
-
-      <Base margin="x1">
-        <Badge backgroundColor="green-3" textColor="gray-1">
-          New feature
-        </Badge>
-      </Base>
-
-      <CodeBlock title="Badge Usage Example">{`const Component = () => (
-  <Badge
-      backgroundColor="eggplant"
-      textColor="gray-1">
-    Coming soon
-  </Badge>
-);`}</CodeBlock>
-    </Section>
-  );
-};
-
-export default SectionBadge;

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

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import Section from '../../Section/Section';
-
-const SectionBase = () => {
-  return (
-    <Section>
-      <CodeBlock title="Base Usage Example">{`const Component = () => (
-  <Base backgroundColor="grape-5" borderRadius="x2" padding="x6" textColor="gray-1">
-    Some content
-  </Base>
-);`}</CodeBlock>
-    </Section>
-  );
-};
-
-export default SectionBase;

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

@@ -1,361 +0,0 @@
-import * as React from 'react';
-import { Base, Button, Buttons, ColorButton, Icon, Tab, Tabs, Text, Ribbon } from '@bitrise/bitkit';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import Section from '../../Section/Section';
-import SectionSubTitle from '../../Section/SectionSubTitle';
-
-const SectionButtons = () => {
-  const [selectedTab, setSelectedTab] = React.useState(1);
-
-  return (
-    <Section>
-      <Tabs gap="x6" margin="x8">
-        <Tab active={selectedTab === 1} onClick={() => setSelectedTab(1)}>
-          Variants & Sizes
-        </Tab>
-
-        <Tab active={selectedTab === 2} onClick={() => setSelectedTab(2)}>
-          With Left & Right Icons
-        </Tab>
-
-        <Tab active={selectedTab === 3} onClick={() => setSelectedTab(3)}>
-          Color Button
-        </Tab>
-      </Tabs>
-
-      {selectedTab === 1 && (
-        <>
-          <Base margin="x12">
-            <SectionSubTitle>Default Variant Button</SectionSubTitle>
-            <Buttons alignChildrenVertical="end" margin="x3">
-              <Button level="primary" size="small">
-                Primary
-              </Button>
-              <Button disabled level="primary" size="small">
-                Disabled
-              </Button>
-              <Button level="primary" size="medium">
-                Primary
-              </Button>
-              <Button disabled level="primary" size="medium">
-                Disabled
-              </Button>
-              <Button level="primary" size="large">
-                Primary
-              </Button>
-              <Button disabled level="primary" size="large">
-                Disabled
-              </Button>
-            </Buttons>
-
-            <Buttons alignChildrenVertical="end" margin="x3">
-              <Button level="secondary" size="small">
-                Secondary
-              </Button>
-              <Button disabled level="secondary" size="small">
-                Disabled
-              </Button>
-              <Button level="secondary" size="medium">
-                Secondary
-              </Button>
-              <Button disabled level="secondary" size="medium">
-                Disabled
-              </Button>
-              <Button level="secondary" size="large">
-                Secondary
-              </Button>
-              <Button disabled level="secondary" size="large">
-                Disabled
-              </Button>
-            </Buttons>
-
-            <Buttons alignChildrenVertical="end" margin="x3">
-              <Button level="tertiary" size="small">
-                Tertiary
-              </Button>
-              <Button disabled level="tertiary" size="small">
-                Disabled
-              </Button>
-              <Button level="tertiary" size="medium">
-                Tertiary
-              </Button>
-              <Button disabled level="tertiary" size="medium">
-                Disabled
-              </Button>
-              <Button level="tertiary" size="large">
-                Tertiary
-              </Button>
-              <Button disabled level="tertiary" size="large">
-                Disabled
-              </Button>
-            </Buttons>
-          </Base>
-
-          <Base margin="x12">
-            <SectionSubTitle>Danger Variant Button</SectionSubTitle>
-
-            <Buttons alignChildrenVertical="end" margin="x3">
-              <Button level="primary" size="small" variant="danger">
-                Primary
-              </Button>
-              <Button disabled level="primary" size="small" variant="danger">
-                Disabled
-              </Button>
-              <Button level="primary" size="medium" variant="danger">
-                Primary
-              </Button>
-              <Button disabled level="primary" size="medium" variant="danger">
-                Disabled
-              </Button>
-              <Button level="primary" size="large" variant="danger">
-                Primary
-              </Button>
-              <Button disabled level="primary" size="large" variant="danger">
-                Disabled
-              </Button>
-            </Buttons>
-
-            <Buttons alignChildrenVertical="end" margin="x3">
-              <Button level="secondary" size="small" variant="danger">
-                Secondary
-              </Button>
-              <Button disabled level="secondary" size="small" variant="danger">
-                Disabled
-              </Button>
-              <Button level="secondary" size="medium" variant="danger">
-                Secondary
-              </Button>
-              <Button disabled level="secondary" size="medium" variant="danger">
-                Disabled
-              </Button>
-              <Button level="secondary" size="large" variant="danger">
-                Secondary
-              </Button>
-              <Button disabled level="secondary" size="large" variant="danger">
-                Disabled
-              </Button>
-            </Buttons>
-          </Base>
-
-          <CodeBlock title="Button Usage Example">{`const Component = () => (
-  <Buttons>
-    <Button level="secondary">Secondary</Button>
-    <Button level="primary" variant="danger">Danger Action</Button>
-  </Buttons>
-);`}</CodeBlock>
-        </>
-      )}
-
-      {selectedTab === 2 && (
-        <>
-          <Buttons margin="x4">
-            <Button level="primary" size="large">
-              <Icon name="Group" />
-              <Text>On the left</Text>
-            </Button>
-
-            <Button level="secondary" size="large">
-              <Text>On the right</Text>
-              <Icon name="Group" />
-            </Button>
-          </Buttons>
-
-          <Buttons margin="x4">
-            <Button level="primary">
-              <Icon name="Group" />
-              <Text>On the left</Text>
-            </Button>
-
-            <Button level="secondary">
-              <Text>On the right</Text>
-              <Icon name="Group" />
-            </Button>
-          </Buttons>
-
-          <Buttons margin="x4">
-            <Button level="primary" size="small">
-              <Icon name="Group" />
-              <Text>On the left</Text>
-            </Button>
-
-            <Button level="secondary" size="small">
-              <Text>On the right</Text>
-              <Icon name="Group" />
-            </Button>
-          </Buttons>
-
-          <CodeBlock title="Button with Icon usage example">{`const Component = () => (
-  <Buttons>
-    <Button level="primary" size="small">
-      <Icon name="Group" />
-      <Text>On the left</Text>
-    </Button>
-
-    <Button level="secondary" size="small">
-      <Text>On the right</Text>
-      <Icon name="Group" />
-    </Button>
-  </Buttons>
-);`}</CodeBlock>
-        </>
-      )}
-
-      {selectedTab === 3 && (
-        <>
-          <Ribbon margin="x6" type="inform">
-            <SectionSubTitle>Blue</SectionSubTitle>
-            <Buttons alignChildrenVertical="end" margin="x3">
-              <ColorButton color="blue" size="small">
-                Blue
-              </ColorButton>
-              <ColorButton color="blue" disabled size="small">
-                Disabled
-              </ColorButton>
-              <ColorButton color="blue" size="medium">
-                Blue
-              </ColorButton>
-              <ColorButton color="blue" disabled size="medium">
-                Disabled
-              </ColorButton>
-              <ColorButton color="blue" size="large">
-                Blue
-              </ColorButton>
-              <ColorButton color="blue" disabled size="large">
-                Disabled
-              </ColorButton>
-            </Buttons>
-          </Ribbon>
-
-          <Ribbon margin="x6" type="progress">
-            <SectionSubTitle>Grape</SectionSubTitle>
-            <Buttons alignChildrenVertical="end" margin="x3">
-              <ColorButton color="grape" size="small">
-                Grape
-              </ColorButton>
-              <ColorButton color="grape" disabled size="small">
-                Disabled
-              </ColorButton>
-              <ColorButton color="grape" size="medium">
-                Grape
-              </ColorButton>
-              <ColorButton color="grape" disabled size="medium">
-                Disabled
-              </ColorButton>
-              <ColorButton color="grape" size="large">
-                Grape
-              </ColorButton>
-              <ColorButton color="grape" disabled size="large">
-                Disabled
-              </ColorButton>
-            </Buttons>
-          </Ribbon>
-
-          <Ribbon margin="x6" type="success">
-            <SectionSubTitle>Green</SectionSubTitle>
-            <Buttons alignChildrenVertical="end" margin="x3">
-              <ColorButton color="green" size="small">
-                Green
-              </ColorButton>
-              <ColorButton color="green" disabled size="small">
-                Disabled
-              </ColorButton>
-              <ColorButton color="green" size="medium">
-                Green
-              </ColorButton>
-              <ColorButton color="green" disabled size="medium">
-                Disabled
-              </ColorButton>
-              <ColorButton color="green" size="large">
-                Green
-              </ColorButton>
-              <ColorButton color="green" disabled size="large">
-                Disabled
-              </ColorButton>
-            </Buttons>
-          </Ribbon>
-
-          <Ribbon margin="x6" type="alert">
-            <SectionSubTitle>Red</SectionSubTitle>
-            <Buttons alignChildrenVertical="end" margin="x3">
-              <ColorButton color="red" size="small">
-                Red
-              </ColorButton>
-              <ColorButton color="red" disabled size="small">
-                Disabled
-              </ColorButton>
-              <ColorButton color="red" size="medium">
-                Red
-              </ColorButton>
-              <ColorButton color="red" disabled size="medium">
-                Disabled
-              </ColorButton>
-              <ColorButton color="red" size="large">
-                Red
-              </ColorButton>
-              <ColorButton color="red" disabled size="large">
-                Disabled
-              </ColorButton>
-            </Buttons>
-          </Ribbon>
-
-          <Base backgroundColor="grape-4" margin="x6" paddingHorizontal="x6" paddingVertical="x4" textColor="white">
-            <SectionSubTitle>White</SectionSubTitle>
-            <Buttons alignChildrenVertical="end" margin="x3">
-              <ColorButton color="white" size="small">
-                White
-              </ColorButton>
-              <ColorButton color="white" disabled size="small">
-                Disabled
-              </ColorButton>
-              <ColorButton color="white" size="medium">
-                White
-              </ColorButton>
-              <ColorButton color="white" disabled size="medium">
-                Disabled
-              </ColorButton>
-              <ColorButton color="white" size="large">
-                White
-              </ColorButton>
-              <ColorButton color="white" disabled size="large">
-                Disabled
-              </ColorButton>
-            </Buttons>
-          </Base>
-
-          <Ribbon margin="x6" type="warning">
-            <SectionSubTitle>Yellow</SectionSubTitle>
-            <Buttons alignChildrenVertical="end" margin="x3">
-              <ColorButton color="yellow" size="small">
-                Yellow
-              </ColorButton>
-              <ColorButton color="yellow" disabled size="small">
-                Disabled
-              </ColorButton>
-              <ColorButton color="yellow" size="medium">
-                Yellow
-              </ColorButton>
-              <ColorButton color="yellow" disabled size="medium">
-                Disabled
-              </ColorButton>
-              <ColorButton color="yellow" size="large">
-                Yellow
-              </ColorButton>
-              <ColorButton color="yellow" disabled size="large">
-                Disabled
-              </ColorButton>
-            </Buttons>
-          </Ribbon>
-
-          <CodeBlock title="Button with Icon usage example">{`const Component = () => (
-  <Buttons>
-    <ColorButton color="blue" size="small">Blue</ColorButton>
-    <ColorButton color="green" size="medium">Green</ColorButton>
-  </Buttons>
-);`}</CodeBlock>
-        </>
-      )}
-    </Section>
-  );
-};
-
-export default SectionButtons;