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

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

@@ -1,224 +0,0 @@
-import * as React from 'react';
-import {
-  Button,
-  Buttons,
-  Flex,
-  Modal,
-  ModalTitle,
-  Text,
-  Tooltip,
-  ModalHeader,
-  ModalBody,
-  Icon,
-  ModalHeaderProgress,
-} from '@bitrise/bitkit';
-import Section from '../../Section/Section';
-
-type ModalTypes =
-  | 'modalWithHeaderVisible'
-  | 'modalWithLotsOfContentVisible'
-  | 'modalWithProgressVisible'
-  | 'modalWithTitleVisible';
-
-const { useState } = React;
-
-const SectionModals = () => {
-  const [progress, setProgress] = useState(0);
-  const [state, setVisible] = useState<Record<ModalTypes, boolean>>({
-    modalWithHeaderVisible: false,
-    modalWithLotsOfContentVisible: false,
-    modalWithProgressVisible: false,
-    modalWithTitleVisible: false,
-  });
-
-  const handleCloseModal = (modalName: ModalTypes) => setVisible({ ...state, [modalName]: false });
-  const handleOpenModal = (modalName: ModalTypes) => setVisible({ ...state, [modalName]: true });
-
-  return (
-    <Section>
-      <Buttons margin="x2">
-        <Button level="primary" onClick={() => handleOpenModal('modalWithTitleVisible')}>
-          Open Modal with Title
-        </Button>
-      </Buttons>
-
-      <Buttons margin="x2">
-        <Button level="primary" onClick={() => handleOpenModal('modalWithHeaderVisible')}>
-          Open Modal with Header
-        </Button>
-      </Buttons>
-
-      <Buttons margin="x2">
-        <Button level="primary" onClick={() => handleOpenModal('modalWithProgressVisible')}>
-          Open Modal with Progress
-        </Button>
-      </Buttons>
-
-      <Buttons margin="x2">
-        <Button level="primary" onClick={() => handleOpenModal('modalWithLotsOfContentVisible')}>
-          Open Modal with lots of content
-        </Button>
-      </Buttons>
-
-      <Modal
-        backgroundColor="white"
-        onClose={() => handleCloseModal('modalWithTitleVisible')}
-        visible={state.modalWithTitleVisible}
-        width="28rem"
-      >
-        <ModalHeader />
-        <ModalBody>
-          <Flex direction="horizontal">
-            <Flex grow initial="none">
-              <ModalTitle>I protest your unauthorised presence!</ModalTitle>
-              <Text textColor="gray-7">I must protest your unauthorised presence on this bridge!</Text>
-            </Flex>
-          </Flex>
-          <Buttons alignChildrenHorizontal="end" margin="x6">
-            <Button level="secondary" onClick={() => handleCloseModal('modalWithTitleVisible')}>
-              Run
-            </Button>
-
-            <Tooltip title="Careful!" visible>
-              {({ ref }) => (
-                <Button
-                  innerRef={ref}
-                  level="primary"
-                  onClick={() => handleCloseModal('modalWithTitleVisible')}
-                  variant="danger"
-                >
-                  Jump!
-                </Button>
-              )}
-            </Tooltip>
-          </Buttons>
-        </ModalBody>
-      </Modal>
-
-      <Modal
-        backgroundColor="white"
-        onClose={() => handleCloseModal('modalWithHeaderVisible')}
-        visible={state.modalWithHeaderVisible}
-        width="600px"
-      >
-        <ModalHeader alignChildrenVertical="middle" minHeight="4.5rem" paddingVertical="x0" withSeparator>
-          <Flex alignChildrenVertical="middle" direction="horizontal" gap="x2">
-            <Flex>
-              <Icon name="Bitbot" size="2rem" />
-            </Flex>
-
-            <Flex>
-              <Text letterSpacing="x3" size="4" textColor="grape-4" weight="bold">
-                Modals may have complex headers
-              </Text>
-              <Text size="1" textColor="gray-7" uppercase>
-                Even a subtitle fits in here!
-              </Text>
-            </Flex>
-          </Flex>
-        </ModalHeader>
-
-        <ModalBody>
-          <ModalTitle>And we can still use a Title for the content!</ModalTitle>
-          <Text color="gray-7">And make the body look however you'd like</Text>
-          <Flex alignChildrenHorizontal="end" direction="horizontal" margin="x6">
-            <Button level="primary" onClick={() => handleCloseModal('modalWithHeaderVisible')}>
-              Close
-            </Button>
-          </Flex>
-        </ModalBody>
-      </Modal>
-
-      <Modal
-        backgroundColor="white"
-        onClose={() => handleCloseModal('modalWithProgressVisible')}
-        visible={state.modalWithProgressVisible}
-        width="600px"
-      >
-        <ModalHeader alignChildrenVertical="middle" minHeight="4.5rem" paddingVertical="x0" withSeparator>
-          <Text size="5" textColor="grape-4" weight="bold">
-            Modal Header
-          </Text>
-
-          <ModalHeaderProgress progress={progress} />
-        </ModalHeader>
-
-        <ModalBody>
-          <Text margin="x4">Modal with a progress line inside the header, click next to see it progress!</Text>
-
-          <Buttons alignChildrenHorizontal="end">
-            {progress === 1 ? (
-              <Button
-                level="primary"
-                onClick={() => {
-                  setProgress(0);
-                  handleCloseModal('modalWithProgressVisible');
-                }}
-              >
-                Ok, cool
-              </Button>
-            ) : (
-              <Button level="primary" onClick={() => setProgress(progress + 0.25)}>
-                Next!
-              </Button>
-            )}
-          </Buttons>
-        </ModalBody>
-      </Modal>
-
-      <Modal
-        backgroundColor="white"
-        onClose={() => handleCloseModal('modalWithLotsOfContentVisible')}
-        visible={state.modalWithLotsOfContentVisible}
-        width="600px"
-      >
-        <ModalHeader />
-        <ModalBody>
-          <ModalTitle>Modal Title</ModalTitle>
-
-          <Text margin="x2">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque arcu vitae nibh rutrum,
-            sit amet lobortis ligula rutrum. Quisque volutpat vitae mauris non interdum. Ut egestas, ex aliquam
-            hendrerit placerat, mi nisi sollicitudin elit, sit amet vulputate nisi leo a tortor. Pellentesque rhoncus
-            mattis nisl, vel efficitur libero euismod nec. Fusce sed tincidunt nisi. Sed porta odio risus, sagittis
-            venenatis lacus pharetra ut. Integer turpis leo, tempor vel est ut, viverra dignissim urna.
-          </Text>
-
-          <Text margin="x2">
-            Phasellus rhoncus consectetur risus efficitur finibus. Pellentesque in enim in lorem volutpat blandit sed
-            venenatis tortor. Praesent consectetur pellentesque risus eget elementum. Cras molestie dapibus nisl, in
-            consequat tellus sollicitudin id. Curabitur vitae molestie nunc. Mauris dapibus suscipit erat, vel tempus
-            tellus. Morbi mi dui, ornare et mattis eu, consequat ac tortor.
-          </Text>
-
-          <Text margin="x2">
-            Curabitur laoreet porta est eu fermentum. Nunc imperdiet porta leo, ac commodo nisi maximus eu. Morbi
-            ultricies sed ex ac fermentum. Sed posuere ex non lectus pretium viverra eu non arcu. Nullam vel auctor
-            tortor, non faucibus nunc. Vestibulum bibendum nibh quam, in faucibus lacus condimentum ac. Integer at
-            faucibus sapien. Phasellus fringilla magna neque, et sodales mauris semper et. Vestibulum aliquam, sem
-            gravida mollis hendrerit, felis dui rutrum lectus, eu congue metus neque id eros. Maecenas posuere nunc a
-            elit bibendum vulputate. Nam ut faucibus magna. Maecenas id dolor lacinia ipsum rhoncus pellentesque.
-            Maecenas nisl lectus, bibendum sit amet justo ut, vestibulum bibendum dolor. Nullam sodales ultrices congue.
-            Donec erat massa, consequat non tincidunt sagittis, lobortis vel odio.
-          </Text>
-
-          <Text margin="x2">
-            Fusce vitae semper nibh, et efficitur ipsum. Ut mattis sollicitudin nisl, sit amet gravida nibh ornare sed.
-            Cras quis turpis sem. Suspendisse eget urna ac quam varius ullamcorper et at erat. Fusce eleifend pulvinar
-            justo, non faucibus neque. Vivamus elementum convallis tempor. Suspendisse egestas nunc in erat commodo, sed
-            rutrum ante maximus. Orci varius natoque penatibus et magnis dis parturient montes, ]nascetur ridiculus mus.
-            Nam sapien lorem, finibus ac molestie ut, ultrices id purus.
-          </Text>
-
-          <Flex alignChildrenHorizontal="end" direction="horizontal" margin="x6">
-            <Button level="primary" onClick={() => handleCloseModal('modalWithLotsOfContentVisible')}>
-              Close
-            </Button>
-          </Flex>
-        </ModalBody>
-      </Modal>
-    </Section>
-  );
-};
-
-export default SectionModals;

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

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { Link, Notification } from '@bitrise/bitkit';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import Section from '../../Section/Section';
-
-const SectionNotification = () => {
-  return (
-    <Section>
-      <Notification margin="x2" onRemove={() => {}} type="warning">
-        You need to setup publishing on the <Link underline>Settings page</Link>.
-      </Notification>
-
-      <Notification icon="Deployment" margin="x2" onRemove={() => {}} type="inform">
-        App is ready for publishing to App Store Connect.
-      </Notification>
-
-      <Notification margin="x2" onRemove={() => {}} type="alert">
-        Publish has failed. See the error log at the <Link underline>Activity tab</Link>.
-      </Notification>
-
-      <Notification margin="x2" onRemove={() => {}} type="success">
-        App has successfully published to <Link underline>App Store Connect</Link>
-      </Notification>
-
-      <Notification margin="x2" onRemove={() => {}} type="progress">
-        Publishing to App Store Connect is in progress.
-      </Notification>
-
-      <CodeBlock title="Notification usage example">{`const Component = () => (
-  <Notification margin="x2" onRemove={ () => {} } type="progress">
-    Publishing to App Store Connect is in progress.
-  </Notification>
-);`}</CodeBlock>
-    </Section>
-  );
-};
-
-export default SectionNotification;

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

@@ -1,167 +0,0 @@
-import * as React from 'react';
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuItem,
-  Icon,
-  Placement,
-  PlacementArea,
-  PlacementManager,
-  PlacementReference,
-  Tab,
-  Tabs,
-} from '@bitrise/bitkit';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import Section from '../../Section/Section';
-
-const { useState } = React;
-
-const SectionPlacement = () => {
-  const [visible, setVisible] = useState(false);
-  const [selectedTab, setSelectedTab] = useState(1);
-  const [ref, setRef] = useState<SVGSVGElement>();
-
-  const handleToggle = () => {
-    setVisible(!visible);
-  };
-
-  return (
-    <Section>
-      <Tabs gap="x6" margin="x8">
-        <Tab active={selectedTab === 1} onClick={() => setSelectedTab(1)}>
-          Placement Reference
-        </Tab>
-
-        <Tab active={selectedTab === 2} onClick={() => setSelectedTab(2)}>
-          Reference Element
-        </Tab>
-      </Tabs>
-
-      {selectedTab === 1 && (
-        <>
-          <PlacementManager>
-            <PlacementReference>
-              {/* eslint-disable-next-line @typescript-eslint/no-shadow */}
-              {({ ref }) => (
-                <Button innerRef={ref} level="primary" onClick={handleToggle}>
-                  <Icon name="More" />
-                </Button>
-              )}
-            </PlacementReference>
-
-            <Placement
-              onClose={(event: MouseEvent) => {
-                console.log('Placement closed via event', event);
-                handleToggle();
-              }}
-              visible={visible}
-            >
-              {() => (
-                <DropdownMenu withArrow>
-                  <DropdownMenuItem icon="Percent" onClick={handleToggle}>
-                    Refer your friends
-                  </DropdownMenuItem>
-
-                  <DropdownMenuItem icon="Settings" onClick={handleToggle}>
-                    Account setings
-                  </DropdownMenuItem>
-
-                  <DropdownMenuItem icon="ChangePlan" onClick={handleToggle}>
-                    Change plan
-                  </DropdownMenuItem>
-
-                  <DropdownMenuItem icon="Logout" onClick={handleToggle}>
-                    Log out
-                  </DropdownMenuItem>
-                </DropdownMenu>
-              )}
-            </Placement>
-          </PlacementManager>
-
-          <CodeBlock margin="x4" title="PlacementReference Example">{`const Component = () => {
-  const [visible, setVisible] = React.useState(false);
-
-  return (
-    <PlacementManager>
-      <PlacementReference>
-        { ({ ref }) => (
-          <Button
-              innerRef={ ref }
-              level="primary"
-              onClick={ () => setVisible(true) }>
-            <Icon name="More" />
-          </Button>
-        ) }
-      </PlacementReference>
-
-      <Placement onClose={ () => setVisible(false) } visible={ visible }>
-        { () => (
-          <DropdownMenu withArrow>
-            <DropdownMenuItem icon="Percent">
-              Refer your friends
-            </DropdownMenuItem>
-
-            <DropdownMenuItem icon="Settings">
-              Account setings
-            </DropdownMenuItem>
-
-            <DropdownMenuItem icon="ChangePlan">
-              Change plan
-            </DropdownMenuItem>
-
-            <DropdownMenuItem icon="Logout">
-              Log out
-            </DropdownMenuItem>
-          </DropdownMenu>
-        ) }
-      </Placement>
-    </PlacementManager>
-  );
-};`}</CodeBlock>
-        </>
-      )}
-
-      {selectedTab === 2 && (
-        <>
-          <Icon innerRef={setRef} name="Bitbot" size="4rem" />
-
-          <Placement backgroundColor="black" placement="right" referenceElement={ref} textColor="white" visible={!!ref}>
-            {() => (
-              <PlacementArea padding="x3" withArrow>
-                Hi, I'm Bitbot 👋
-              </PlacementArea>
-            )}
-          </Placement>
-
-          <CodeBlock margin="x4" title="Pre-existing Reference Element">{`const Component = () => {
-  const [ref, setRef] = React.useState();
-
-  return (
-    <React.Fragment>
-      <Icon
-          innerRef={ setRef }
-          name="Bitbot"
-          size="4rem" />
-
-      <Placement
-          backgroundColor="black"
-          placement="right"
-          referenceElement={ ref }
-          textColor="white"
-          visible={ !!ref }>
-        { () => (
-          <PlacementArea padding="x3" withArrow>
-            Hi, I'm Bitbot 👋
-          </PlacementArea>
-        ) }
-      </Placement>
-    </React.Fragment>
-  );
-};`}</CodeBlock>
-        </>
-      )}
-    </Section>
-  );
-};
-
-export default SectionPlacement;

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

@@ -1,149 +0,0 @@
-import * as React from 'react';
-import {
-  hooks,
-  Base,
-  Buttons,
-  ProgressBar,
-  ProgressButton,
-  ProgressColorButton,
-  ProgressBitbot,
-  ProgressSpinner,
-  Flex,
-  Text,
-  Icon,
-} from '@bitrise/bitkit';
-import Section from '../../Section/Section';
-import SectionSubTitle from '../../Section/SectionSubTitle';
-
-const { useRef, useState } = React;
-const { useMediaQuery } = hooks;
-
-const SectionProgress = () => {
-  const match = useMediaQuery(['896px']);
-  const refTimeout = useRef(0);
-  const [progress, setProgress] = useState(0);
-  const [progressing1, setProgressing1] = useState(false);
-  const [progressing2, setProgressing2] = useState(false);
-  const [progressing3, setProgressing3] = useState(false);
-  const [progressing4, setProgressing4] = useState(false);
-  const [progressing5, setProgressing5] = useState(false);
-
-  React.useEffect(() => {
-    refTimeout.current = window.setTimeout(
-      () => {
-        setProgress(progress < 1 ? progress + Math.random() * (0.1 - 0.05) + 0.05 : 0);
-      },
-      progress < 1 ? Math.random() * (500 - 250) + 250 : 1000,
-    );
-
-    return () => {
-      window.clearTimeout(refTimeout.current);
-    };
-  }, [progress]);
-
-  return (
-    <Section>
-      <Base margin="x6">
-        <SectionSubTitle>Indeterminate progress Bitbot</SectionSubTitle>
-
-        <Flex direction={match('896px') ? 'horizontal' : 'vertical'} gap="x4">
-          <Flex backgroundColor="gray-1" grow padding="x6">
-            <ProgressBitbot content="Loading something..." size="64px" textColor="grape-3" />
-          </Flex>
-
-          <Flex backgroundColor="grape-5" grow padding="x6">
-            <ProgressBitbot content="Loading user settings..." size="64px" textColor="gray-1" />
-          </Flex>
-
-          <Flex backgroundColor="gray-1" grow padding="x6">
-            <ProgressBitbot content="Loading your apps..." size="64px" textColor="aqua-3" />
-          </Flex>
-        </Flex>
-      </Base>
-
-      <Base margin="x12">
-        <SectionSubTitle>Indeterminate progress spinner</SectionSubTitle>
-
-        <Flex direction={match('896px') ? 'horizontal' : 'vertical'} gap="x4">
-          <Flex backgroundColor="gray-1" grow padding="x6">
-            <ProgressSpinner size="2rem" textColor="grape-3" />
-          </Flex>
-
-          <Flex backgroundColor="grape-5" grow padding="x6">
-            <ProgressSpinner size="2rem" textColor="gray-1" />
-          </Flex>
-
-          <Flex backgroundColor="gray-1" grow padding="x6">
-            <ProgressSpinner size="2rem" textColor="aqua-3" />
-          </Flex>
-        </Flex>
-      </Base>
-
-      <Base margin="x12">
-        <SectionSubTitle>Indeterminate progress buttons (Press them to toggle the states)</SectionSubTitle>
-
-        <Buttons>
-          <ProgressButton level="primary" onClick={() => setProgressing1(!progressing1)} progressing={progressing1}>
-            Primary
-          </ProgressButton>
-
-          <ProgressButton
-            level="primary"
-            onClick={() => setProgressing2(!progressing2)}
-            progressing={progressing2}
-            variant="danger"
-          >
-            Danger!
-          </ProgressButton>
-
-          <ProgressButton level="secondary" onClick={() => setProgressing3(!progressing3)} progressing={progressing3}>
-            Secondary
-          </ProgressButton>
-
-          <ProgressColorButton
-            color="blue"
-            onClick={() => setProgressing4(!progressing4)}
-            progressing={progressing4}
-            size="medium"
-          >
-            Color button
-          </ProgressColorButton>
-
-          <ProgressButton level="primary" onClick={() => setProgressing5(!progressing5)} progressing={progressing5}>
-            <Icon name="App" />
-            <span>Button with icon</span>
-          </ProgressButton>
-        </Buttons>
-      </Base>
-
-      <Base margin="x12">
-        <SectionSubTitle>Determinate progress bar</SectionSubTitle>
-
-        <Text>Without stripes</Text>
-
-        <ProgressBar
-          backgroundColor="gray-2"
-          borderRadius="x2"
-          foregroundColor="grape-3"
-          height="8px"
-          margin="x2"
-          progress={progress}
-        />
-
-        <Text>With stripes</Text>
-
-        <ProgressBar
-          backgroundColor="gray-2"
-          borderRadius="x2"
-          foregroundColor="aqua-3"
-          height="8px"
-          margin="x2"
-          progress={progress}
-          stripeColor="gray-1"
-        />
-      </Base>
-    </Section>
-  );
-};
-
-export default SectionProgress;

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

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

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

@@ -1,33 +0,0 @@
-import * as React from 'react';
-
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import Section from '../../Section/Section';
-import Window from '../../Window/Window';
-import SandboxFrame from '../../Sandbox/SandboxFrame';
-
-const SectionRibbon = () => {
-  return (
-    <Section>
-      <Window
-        backgroundColor="gray-1"
-        borderColor="gray-2"
-        borderWidth="x1"
-        elevation="x2"
-        textColor="grape-5"
-        title="Responsive Ribbon"
-      >
-        <SandboxFrame minHeight="200px" src="/sandbox/ribbon" />
-      </Window>
-
-      <CodeBlock title="Ribbon usage example">{`const Component = () => (
-  <Ribbon type="warning" onRemove={ () => {} }>
-    <Text align="middle">
-      Ribbon text.
-    </Text>
-  </Ribbon>
-);`}</CodeBlock>
-    </Section>
-  );
-};
-
-export default SectionRibbon;

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

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { Ribbon, Link, Text } from '@bitrise/bitkit';
-import Section from '../../Section/Section';
-
-const SectionRibbonSandbox = () => {
-  return (
-    <Section>
-      <Ribbon onRemove={() => {}} type="warning">
-        <Text align="middle">
-          13 days, 3 hours and 25 minutes left from your two-week Development trial. <Link underline>More info</Link>
-        </Text>
-      </Ribbon>
-    </Section>
-  );
-};
-
-export default SectionRibbonSandbox;