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

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

@@ -1,187 +0,0 @@
-import * as React from 'react';
-import {
-  hooks,
-  Base,
-  Checkbox,
-  Flex,
-  Icon,
-  Input,
-  InputContainer,
-  InputContent,
-  InputLabel,
-  RadioButton,
-  Textarea,
-  Toggle,
-} from '@bitrise/bitkit';
-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="x6">
-        <Flex grow initial={match('896px') ? 'none' : 'content'}>
-          <SectionSubTitle>Input Inactive</SectionSubTitle>
-          <InputLabel>Text field label</InputLabel>
-          <InputContainer>
-            <InputContent>
-              <Input placeholder="Placeholder..." />
-            </InputContent>
-          </InputContainer>
-        </Flex>
-
-        <Flex grow initial={match('896px') ? 'none' : 'content'}>
-          <SectionSubTitle>Input Invalid</SectionSubTitle>
-          <InputLabel>Text field label</InputLabel>
-          <InputContainer invalid>
-            <InputContent grow>
-              <Input placeholder="Placeholder..." />
-            </InputContent>
-          </InputContainer>
-        </Flex>
-
-        <Flex grow initial={match('896px') ? 'none' : 'content'}>
-          <SectionSubTitle>Input Disabled</SectionSubTitle>
-          <InputLabel>Text field label</InputLabel>
-          <InputContainer disabled>
-            <InputContent grow>
-              <Input disabled placeholder="Placeholder..." />
-            </InputContent>
-          </InputContainer>
-        </Flex>
-      </Flex>
-
-      <Flex direction={match('896px') ? 'horizontal' : 'vertical'} gap="x12" margin="x12">
-        <Flex grow initial={match('896px') ? 'none' : 'content'}>
-          <SectionSubTitle>Icon inside to the left</SectionSubTitle>
-          <InputLabel>Text field label</InputLabel>
-          <InputContainer>
-            <InputContent>
-              <Icon name="Magnifier" />
-              <Input placeholder="Placeholder..." />
-            </InputContent>
-          </InputContainer>
-        </Flex>
-
-        <Flex grow initial={match('896px') ? 'none' : 'content'}>
-          <SectionSubTitle>Icon inside to the right</SectionSubTitle>
-          <InputLabel>Text field label</InputLabel>
-          <InputContainer>
-            <InputContent>
-              <Input placeholder="Placeholder..." />
-              <Icon name="Lock" />
-            </InputContent>
-          </InputContainer>
-        </Flex>
-      </Flex>
-
-      <Flex direction={match('896px') ? 'horizontal' : 'vertical'} gap="x12" margin="x12">
-        <Flex grow initial={match('896px') ? 'none' : 'content'}>
-          <SectionSubTitle>Icon outside to the left</SectionSubTitle>
-          <InputLabel>Text field label</InputLabel>
-          <InputContainer>
-            <InputContent outside>
-              <Icon name="Dollars" />
-            </InputContent>
-
-            <InputContent>
-              <Input placeholder="Placeholder..." />
-            </InputContent>
-          </InputContainer>
-        </Flex>
-
-        <Flex grow initial={match('896px') ? 'none' : 'content'}>
-          <SectionSubTitle>Icon outside to the right</SectionSubTitle>
-          <InputLabel>Text field label</InputLabel>
-          <InputContainer>
-            <InputContent>
-              <Input placeholder="Placeholder..." />
-            </InputContent>
-
-            <InputContent outside>
-              <Icon name="Key" />
-            </InputContent>
-          </InputContainer>
-        </Flex>
-      </Flex>
-
-      <Flex direction={match('896px') ? 'horizontal' : 'vertical'} gap="x12" margin="x12">
-        <Flex grow initial={match('896px') ? 'none' : 'content'}>
-          <SectionSubTitle>Textarea</SectionSubTitle>
-          <InputLabel>Textarea label</InputLabel>
-          <Textarea placeholder="Placeholder..." rows="9" />
-        </Flex>
-
-        <Flex grow initial={match('896px') ? 'none' : 'content'}>
-          <Base margin="x8">
-            <SectionSubTitle>Textarea invalid</SectionSubTitle>
-            <InputLabel>Textarea label</InputLabel>
-            <Textarea invalid placeholder="Placeholder..." />
-          </Base>
-
-          <Base margin="x8">
-            <SectionSubTitle>Textarea disabled</SectionSubTitle>
-            <InputLabel>Textarea label</InputLabel>
-            <Textarea disabled placeholder="Placeholder..." />
-          </Base>
-        </Flex>
-      </Flex>
-
-      <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>
-
-      <Flex direction={match('896px') ? 'horizontal' : 'vertical'} gap="x12" margin="x12">
-        <Flex grow initial={match('896px') ? 'none' : 'content'}>
-          <SectionSubTitle>Checked Radio button</SectionSubTitle>
-          <RadioButton defaultChecked name="radio">
-            Radio button label
-          </RadioButton>
-        </Flex>
-
-        <Flex grow initial={match('896px') ? 'none' : 'content'}>
-          <SectionSubTitle>Unchecked Radio button</SectionSubTitle>
-          <RadioButton name="radio">Radio button label</RadioButton>
-        </Flex>
-
-        <Flex grow initial={match('896px') ? 'none' : 'content'}>
-          <SectionSubTitle>Disabled Radio button</SectionSubTitle>
-          <RadioButton disabled name="radio">
-            Radio button label
-          </RadioButton>
-        </Flex>
-      </Flex>
-
-      <Flex direction={match('896px') ? 'horizontal' : 'vertical'} gap="x12" margin="x12">
-        <Flex grow initial={match('896px') ? 'none' : 'content'}>
-          <SectionSubTitle>Toggle Off</SectionSubTitle>
-          <Toggle>Toggle label</Toggle>
-        </Flex>
-
-        <Flex grow initial={match('896px') ? 'none' : 'content'}>
-          <SectionSubTitle>Toggle On</SectionSubTitle>
-          <Toggle defaultChecked>Toggle label</Toggle>
-        </Flex>
-      </Flex>
-    </Section>
-  );
-};
-
-export default SectionFormElements;

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

@@ -1,125 +0,0 @@
-import * as React from 'react';
-import shuffle from 'lodash.shuffle';
-import { hooks, variables, Divider, Flex, Grid, Icon, Tab, Tabs, Text, TypeColors } from '@bitrise/bitkit';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import Section from '../../Section/Section';
-
-const { useState } = React;
-const { useMediaQuery } = hooks;
-
-const colors = shuffle(Object.entries(variables.colorMap)).filter(
-  ([name]) =>
-    !name.startsWith('gray') && (name.endsWith('2') || name.endsWith('3') || name.endsWith('4') || name.endsWith('5')),
-);
-
-const SectionGrid = () => {
-  const match = useMediaQuery(['608px', '960px']);
-  const [selectedTab, setSelectedTab] = useState(1);
-
-  return (
-    <Section>
-      <Tabs gap="x6" margin="x8">
-        <Tab active={selectedTab === 1} onClick={() => setSelectedTab(1)}>
-          Min and Max widths
-        </Tab>
-
-        <Tab active={selectedTab === 2} onClick={() => setSelectedTab(2)}>
-          Fixed Columns
-        </Tab>
-      </Tabs>
-
-      {selectedTab === 1 && (
-        <>
-          <Text>
-            The repeatWidthMax and repeatWidthMin props resizied items between these values so that as many items as
-            possible fit the container width before flowing onto the next row. This is useful for layouts where the size
-            of the content is known.
-          </Text>
-
-          <Grid alignChildren="middle" gap="x2" margin="x8" repeatWidthMax="1fr" repeatWidthMin="4rem">
-            {colors.map(([name]) => (
-              <Flex
-                alignChildren="middle"
-                backgroundColor={name as TypeColors}
-                borderRadius="x1"
-                direction="horizontal"
-                key={name}
-                padding="x2"
-                textColor="white"
-              >
-                <Icon name="Bitbot" />
-              </Flex>
-            ))}
-          </Grid>
-
-          <CodeBlock margin="x4" title="Flexible & Responsive">{`const Component = () => (
-    <Grid
-        alignChildren="middle"
-        gap="x2"
-        repeatWidthMax="1fr"
-        repeatWidthMin="4rem">
-      <Flex>...</Flex>
-      <Flex>...</Flex>
-      <Flex>...</Flex>
-      <Flex>...</Flex>
-  </Grid>
-);`}</CodeBlock>
-        </>
-      )}
-
-      {selectedTab === 2 && (
-        <>
-          <Text>
-            Providing an explicit number of items on each row with a fraction width will cause the items to fill the
-            containing space. This is useful for layouts that need a bit of predictability.
-          </Text>
-
-          <Grid gap="x4" margin="x8" repeat={match({ '608px': '2', '960px': '4' }, '1')} repeatWidth="1fr">
-            {Array.from({ length: 8 }).map((_, key) => (
-              <Flex backgroundColor="gray-1" borderRadius="x2" direction="vertical" gap="x2" key={key} padding="x2">
-                <Flex alignChildrenVertical="middle" direction="horizontal" gap="x1">
-                  <Flex>
-                    <Icon name="Bitbot" />
-                  </Flex>
-
-                  <Flex>
-                    <Text weight="bold">Bitbot</Text>
-                  </Flex>
-                </Flex>
-
-                <Flex>
-                  <Divider color="gray-2" width="0.0625rem" />
-                </Flex>
-
-                <Flex>
-                  <Text size="1">
-                    I must protest your unauthorised presence on this bridge!
-                    {key % 2 ? ' I must protest your unauthorised presence on this bridge!' : undefined}
-                  </Text>
-                </Flex>
-              </Flex>
-            ))}
-          </Grid>
-
-          <CodeBlock margin="x4" title="Fixed Columns & Responsive">{`const Component = () => {
-  const match = useMediaQuery(['608px', '960px']);
-
-  return (
-    <Grid
-        gap="x4"
-        repeat={ match({ '608px': '2', '960px': '4' }, '1') }
-        repeatWidth="1fr">
-      <Flex>...</Flex>
-      <Flex>...</Flex>
-      <Flex>...</Flex>
-      <Flex>...</Flex>
-    </Grid>
-  );
-};`}</CodeBlock>
-        </>
-      )}
-    </Section>
-  );
-};
-
-export default SectionGrid;

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

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import { Flex, Hamburger, Link } from '@bitrise/bitkit';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import Section from '../../Section/Section';
-
-const { useState } = React;
-
-const SectionHamburger = () => {
-  const [isActive, setIsActive] = useState(false);
-
-  return (
-    <Section>
-      <Flex alignChildren="middle" direction="horizontal">
-        <Flex>
-          <Link color="grape-5" onClick={() => setIsActive(!isActive)}>
-            <Hamburger active={isActive} size="3rem" />
-          </Link>
-        </Flex>
-      </Flex>
-
-      <CodeBlock title="Hamburger Usage Example">{`const Component = () => {
-  const [isActive, setIsActive] = useState(false);
-
-  return (
-    <Link onClick={ () => setIsActive(!isActive) }>
-      <Hamburger active={ isActive } size="3rem" />
-    </Link>
-  );
-};`}</CodeBlock>
-    </Section>
-  );
-};
-
-export default SectionHamburger;

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

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { variables, Flex, Grid, Icon, Text } from '@bitrise/bitkit';
-import Section from '../../Section/Section';
-
-const SectionIcons = () => {
-  return (
-    <Section>
-      <Grid alignChildren="middle" gap="x2" repeatWidthMin="4rem">
-        {variables.icons.map((name) => (
-          <Flex
-            alignChildren="middle"
-            backgroundColor="gray-1"
-            borderRadius="x1"
-            direction="vertical"
-            key={name}
-            padding="x2"
-            title={name}
-          >
-            <Icon name={name} />
-            <Text ellipsis margin="x1" size="1">
-              {name}
-            </Text>
-          </Flex>
-        ))}
-      </Grid>
-    </Section>
-  );
-};
-
-export default SectionIcons;

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

@@ -1,89 +0,0 @@
-import * as React from 'react';
-import { Input, InputContainer, InputContent, InputLabel, InputInlineHelp, Base, Icon } from '@bitrise/bitkit';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import Section from '../../Section/Section';
-import SectionSubTitle from '../../Section/SectionSubTitle';
-
-const SectionInputs = () => {
-  return (
-    <Section>
-      <Base width="400px">
-        <Base margin="x6">
-          <SectionSubTitle>Input in InputContainer</SectionSubTitle>
-          <InputContainer>
-            <InputContent>
-              <Input placeholder="Input" />
-            </InputContent>
-          </InputContainer>
-        </Base>
-
-        <Base margin="x6">
-          <SectionSubTitle>Input with InputContent</SectionSubTitle>
-
-          <InputContainer>
-            <InputContent>
-              <Input />
-              <Icon name="Bell" />
-            </InputContent>
-          </InputContainer>
-        </Base>
-
-        <Base margin="x6">
-          <SectionSubTitle>Input with InputLabel and InputInlineHelp</SectionSubTitle>
-
-          <InputLabel>Label</InputLabel>
-          <InputContainer>
-            <InputContent>
-              <Input />
-              <Icon name="Bell" />
-            </InputContent>
-          </InputContainer>
-          <InputInlineHelp>Help the user how the input should be filled!</InputInlineHelp>
-        </Base>
-      </Base>
-
-      <CodeBlock title="Labels Usage Example">{`const Component = () => (
-  <Base width="400px">
-    <Base margin="x6">
-      <SectionSubTitle>Input in InputContainer</SectionSubTitle>
-      <InputContainer>
-        <InputContent>
-          <Input placeholder="Input"></Input>
-        </InputContent>
-      </InputContainer>
-    </Base>
-
-    <Base margin="x6">
-      <SectionSubTitle>Input with InputContent</SectionSubTitle>
-
-      <InputContainer>
-        <InputContent>
-          <Input />
-          <Icon name="Bell" />
-        </InputContent>
-      </InputContainer>
-    </Base>
-
-    <Base margin="x6">
-      <SectionSubTitle>
-        Input with InputLabel and InputInlineHelp
-      </SectionSubTitle>
-
-      <InputLabel>Label</InputLabel>
-      <InputContainer>
-        <InputContent>
-          <Input />
-          <Icon name="Bell" />
-        </InputContent>
-      </InputContainer>
-      <InputInlineHelp>
-        Help the user how the input should be filled!
-      </InputInlineHelp>
-    </Base>
-  </Base>
-);`}</CodeBlock>
-    </Section>
-  );
-};
-
-export default SectionInputs;

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

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { List, ListItem } from '@bitrise/bitkit';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import Section from '../../Section/Section';
-
-const SectionList = () => {
-  return (
-    <Section>
-      <List>
-        <ListItem>I must protest your unauthorised presence on this bridge!</ListItem>
-        <ListItem>Your unauthorised presence on this bridge I must protest!</ListItem>
-        <ListItem>On this bridge I must protest your unauthorised presence!</ListItem>
-      </List>
-
-      <CodeBlock title="List Usage Example">{`const Component = () => (
-  <List>
-    <ListItem>I must protest your unauthorised presence on this bridge!</ListItem>
-    <ListItem>Your unauthorised presence on this bridge I must protest!</ListItem>
-    <ListItem>On this bridge I must protest your unauthorised presence!</ListItem>
-  </List>
-);`}</CodeBlock>
-    </Section>
-  );
-};
-
-export default SectionList;