@bitrise/bitkit 10.36.2 → 11.0.0

package/src/Components/Form/Checkbox/Checkbox.stories.tsx

@@ -1,43 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import CheckboxGroup from './CheckboxGroup';
-import Checkbox from './Checkbox';
-
-export default {
-  component: Checkbox,
-  argTypes: {
-    onChange: {
-      action: 'onChange event',
-    },
-  },
-} as ComponentMeta<typeof Checkbox>;
-
-const Template: ComponentStory<typeof Checkbox> = (props) => <Checkbox {...props} />;
-
-export const WithProps = Template.bind({});
-WithProps.args = {
-  children: 'Checkbox',
-  isDisabled: false,
-  isIndeterminate: false,
-};
-
-export const InGroup: ComponentStory<typeof CheckboxGroup> = (props) => (
-  <CheckboxGroup {...props} display="flex" gap="24">
-    <Checkbox value="1">
-      Checkbox 1<br />
-      asddssadsda
-    </Checkbox>
-    <Checkbox
-      value="2"
-      inputProps={{
-        'data-testid': 'test-checkbox-2',
-      }}
-    >
-      Checkbox 2
-    </Checkbox>
-    <Checkbox value="3">Checkbox 3</Checkbox>
-  </CheckboxGroup>
-);
-
-InGroup.args = {
-  defaultValue: ['1', '3'],
-};

package/src/Components/Form/Input/Input.stories.tsx

@@ -1,71 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import Button from '@/Components/Button/Button';
-import IconButton from '@/Components/IconButton/IconButton';
-import Input from './Input';
-
-export default {
-  component: Input,
-  argTypes: {
-    type: {
-      control: 'inline-radio',
-      options: ['number', 'password', 'text'],
-    },
-  },
-  args: {
-    isDisabled: false,
-    isInvalid: false,
-    isLoading: false,
-    isReadOnly: false,
-    label: 'Input',
-    placeholder: 'Placeholder text',
-    type: 'text',
-  },
-} as ComponentMeta<typeof Input>;
-
-export const WithProps = {
-  args: {
-    errorText: '',
-    helperText:
-      'Inline help. Maecenas a turpis tortor. Nunc vitae libero tempor, ullamcorper purus quis, mattis tellus.',
-    label: 'Input',
-  },
-};
-
-export const WithElementOutside = {
-  args: {
-    isDisabled: true,
-    label: 'With additional element outside (Like Button)',
-    rightAddon: (
-      <Button borderLeftRadius="0" leftIconName="Duplicate" variant="secondary">
-        Copy to clipboard
-      </Button>
-    ),
-    rightAddonPlacement: 'outside',
-    value: '1234567890ABCDE',
-  },
-};
-
-export const WithElementInside = {
-  args: {
-    label: 'With additional element inside (Like IconButton)',
-    rightAddon: (
-      <IconButton
-        aria-label="Search"
-        borderLeftRadius="0"
-        iconName="Magnifier"
-        variant="tertiary"
-        _active={{ background: 'transparent' }}
-        _hover={{ background: 'transparent' }}
-      />
-    ),
-    rightAddonPlacement: 'inside',
-    width: '100%',
-  },
-};
-
-export const WithIcon = {
-  args: {
-    label: 'With Icon on the left and/or right side',
-    leftIconName: 'Magnifier',
-  },
-};

package/src/Components/Form/Radio/Radio.stories.tsx

@@ -1,35 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import RadioGroup from './RadioGroup';
-import Radio from './Radio';
-
-export default {
-  component: Radio,
-  argTypes: {
-    onChange: {
-      action: 'onChange event',
-    },
-  },
-} as ComponentMeta<typeof Radio>;
-
-export const InGroup: ComponentStory<typeof RadioGroup> = (props) => (
-  <RadioGroup {...props} display="flex" gap="24">
-    <Radio value="1">
-      Radio 1<br />
-      asdasddsa
-    </Radio>
-    <Radio
-      value="2"
-      inputProps={{
-        'data-testid': 'test-radio-2',
-      }}
-    >
-      Radio 2
-    </Radio>
-    <Radio value="3">Radio 3</Radio>
-  </RadioGroup>
-);
-
-InGroup.args = {
-  defaultValue: '2',
-  name: 'radioName',
-};

package/src/Components/Form/Textarea/Textarea.stories.tsx

@@ -1,20 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import Textarea from './Textarea';
-
-export default {
-  component: Textarea,
-} as ComponentMeta<typeof Textarea>;
-
-export const WithProps = {
-  args: {
-    errorText: '',
-    helperText:
-      'Inline help. Maecenas a turpis tortor. Nunc vitae libero tempor, ullamcorper purus quis, mattis tellus.',
-    isDisabled: false,
-    isInvalid: false,
-    isLoading: false,
-    isReadOnly: false,
-    label: 'Textarea',
-    placeholder: 'Placeholder text',
-  },
-};

package/src/Components/Form/Textarea/Textarea.test.tsx

@@ -1,35 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { useForm } from 'react-hook-form';
-import Textarea from './Textarea';
-
-describe('Textarea', () => {
-  it('forwards data-testid', async () => {
-    render(<Textarea data-testid="testid" />);
-    const elem = await screen.findByTestId('testid');
-    expect(elem.tagName).toBe('TEXTAREA');
-    expect(elem).toBeInTheDocument();
-  });
-  describe('react-hook-form support', () => {
-    it('sends data when submitted', async () => {
-      const handler = jest.fn();
-      const TestComponent = () => {
-        const { register, handleSubmit } = useForm();
-        return (
-          <form onSubmit={handleSubmit((data) => handler(data))}>
-            <Textarea {...register('textarea')} />
-            <button type="submit">Send</button>
-          </form>
-        );
-      };
-      render(<TestComponent />);
-      const submit = await screen.findByRole('button', { name: 'Send' });
-      const textarea = await screen.findByRole('textbox');
-      await userEvent.type(textarea, 'test');
-      await userEvent.click(submit);
-
-      expect(handler).toHaveBeenCalledWith({ textarea: 'test' });
-      expect(handler).toHaveBeenCalledTimes(1);
-    });
-  });
-});

package/src/Components/Icon/Icon.stories.tsx

@@ -1,10 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Icon from './Icon';
-
-export default {
-  title: 'Components/Icon',
-  args: { name: 'Bitbot' },
-  component: Icon,
-} as ComponentMeta<typeof Icon>;
-
-export const Default: ComponentStory<typeof Icon> = (args) => <Icon {...args} />;

package/src/Components/IconButton/IconButton.stories.tsx

@@ -1,27 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { sortObjectByKey } from '../../utils/storyUtils';
-import IconButton from './IconButton';
-
-export default {
-  title: 'Components/IconButton',
-  component: IconButton,
-  argTypes: {
-    as: {
-      control: 'inline-radio',
-      options: ['a', 'button'],
-    },
-  },
-} as ComponentMeta<typeof IconButton>;
-
-const Template: ComponentStory<typeof IconButton> = (props) => <IconButton {...props} />;
-
-export const WithProps = Template.bind({});
-WithProps.args = sortObjectByKey({
-  ...IconButton.defaultProps,
-  'aria-label': 'This is the label',
-  iconName: 'Bitbot',
-  isDanger: false,
-  isDisabled: false,
-  isLoading: false,
-  isTooltipDisabled: false,
-});

package/src/Components/Icons/index.stories.tsx

@@ -1,60 +0,0 @@
-import { Fragment } from 'react';
-import { Meta } from '@storybook/react';
-import { Grid, GridItem, Tooltip, useClipboard, useToast } from '@chakra-ui/react';
-import Icon, { TypeIconName } from '../Icon/Icon';
-import Text from '../Text/Text';
-import * as bigIcons from './24x24';
-
-export default { title: 'Components/Icons' } as Meta;
-
-const IconCard = ({ iconName }: { iconName: string }) => {
-  const { onCopy } = useClipboard(iconName, {});
-  const toast = useToast();
-  return (
-    <Tooltip
-      label={
-        <Text textAlign="center">
-          {iconName} <br /> click to copy <Icon size="16" color="white" name="Duplicate" />
-        </Text>
-      }
-    >
-      <Grid
-        onClick={() => {
-          onCopy();
-          toast.closeAll();
-          toast({
-            title: (
-              <>
-                Copied <code>{iconName}</code>!
-              </>
-            ),
-          });
-        }}
-        cursor="pointer"
-        background="neutral.50"
-        alignContent="space-around"
-        gridTemplateColumns="1f 1f"
-        padding="8"
-        gap="4"
-        alignItems="center"
-        margin="4"
-      >
-        <Icon marginX="auto" name={iconName as TypeIconName} size="24" />
-        <Icon marginX="auto" name={iconName as TypeIconName} size="16" />
-        <GridItem as={Text} hasEllipsis textAlign="center" fontSize="2" lineHeight="2" colSpan={2}>
-          {iconName}
-        </GridItem>
-      </Grid>
-    </Tooltip>
-  );
-};
-
-export const List = () => (
-  <Grid gap="2" templateColumns="repeat(auto-fit, minmax(150px, 1fr))">
-    {Object.keys(bigIcons).map((icon) => (
-      <Fragment key={icon}>
-        <IconCard iconName={icon} />
-      </Fragment>
-    ))}
-  </Grid>
-);

package/src/Components/Image/Image.stories.tsx

@@ -1,15 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Image from './Image';
-
-export default {
-  title: 'Components/Image',
-  component: Image,
-} as ComponentMeta<typeof Image>;
-
-const Template: ComponentStory<typeof Image> = (props) => <Image {...props} />;
-
-export const WithProps = Template.bind({});
-WithProps.args = {
-  alt: 'Bitrise office',
-  src: 'bitrise_office.jpg',
-};

package/src/Components/LightBox/LightBox.stories.tsx

@@ -1,39 +0,0 @@
-import { Story, ComponentMeta } from '@storybook/react';
-import { useDisclosure } from '@chakra-ui/react';
-import Button from '../Button/Button';
-import AspectRatio from '../AspectRatio/AspectRatio';
-import LightBox, { LightBoxProps } from './LightBox';
-
-export default {
-  title: 'Components/LightBox',
-  component: LightBox,
-} as ComponentMeta<typeof LightBox>;
-
-export const WithProps: Story<LightBoxProps> = ({ ...props }: LightBoxProps) => {
-  const { isOpen, onClose, onOpen } = useDisclosure();
-
-  const getContent = () => {
-    return (
-      <AspectRatio ratio={props.size === 'full' ? 1.33 : 1.77}>
-        <iframe
-          id="ytplayer"
-          title="Intro to Bitrise"
-          src="https://www.youtube.com/embed/JrCn9xWQ7IM"
-          frameBorder="0"
-          allowFullScreen
-        />
-      </AspectRatio>
-    );
-  };
-
-  return (
-    <>
-      <Button onClick={onOpen}>Open LightBox</Button>
-      <LightBox padding="0" {...props} isOpen={isOpen} onClose={onClose}>
-        {getContent()}
-      </LightBox>
-    </>
-  );
-};
-
-WithProps.args = { ...LightBox.defaultProps };

package/src/Components/Link/Link.stories.tsx

@@ -1,28 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { sortObjectByKey } from '../../utils/storyUtils';
-import Text from '../Text/Text';
-import Link from './Link';
-
-export default {
-  title: 'Components/Link',
-  component: Link,
-} as ComponentMeta<typeof Link>;
-
-const args = sortObjectByKey({
-  ...Link.defaultProps,
-  children: 'The quick brown fox jumps over the lazy dog.',
-  href: '#',
-});
-
-export const WithProps: ComponentStory<typeof Link> = (props) => <Link {...props} />;
-WithProps.args = args;
-
-export const InsideText: ComponentStory<typeof Link> = (props) => (
-  <Text size="2">
-    This is a text with link: <Link {...props} />
-    <br />
-    The Link inherits fontSize, but you can overwrite with size param (or sx).
-  </Text>
-);
-InsideText.args = args;

package/src/Components/List/List.stories.tsx

@@ -1,24 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import List from './List';
-import ListItem from './ListItem';
-
-export default {
-  title: 'Components/List',
-  component: List,
-} as ComponentMeta<typeof List>;
-
-export const WithProps: ComponentStory<typeof List> = (props) => (
-  <List {...props}>
-    <ListItem>Lorem ipsum dolor sit amet</ListItem>
-    <ListItem>Consectetur adipiscing elit</ListItem>
-    <ListItem>
-      Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
-    </ListItem>
-    <ListItem>Facilisis in pretium nisl aliquet</ListItem>
-  </List>
-);
-
-WithProps.args = {
-  ...List.defaultProps,
-  isOrdered: false,
-};

package/src/Components/Menu/Menu.stories.tsx

@@ -1,90 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { forwardRef } from '@chakra-ui/react';
-import Badge from '../Badge/Badge';
-import Box from '../Box/Box';
-import Button, { ButtonProps } from '../Button/Button';
-import ButtonGroup from '../ButtonGroup/ButtonGroup';
-import IconButton from '../IconButton/IconButton';
-import Link from '../Link/Link';
-import Icon from '../Icon/Icon';
-import Menu from './Menu';
-import MenuButton from './MenuButton';
-import MenuList from './MenuList';
-import MenuItem from './MenuItem';
-
-export default {
-  title: 'Components/Menu',
-  component: Menu,
-  subcomponents: { MenuButton, MenuList, MenuItem },
-} as ComponentMeta<typeof Menu>;
-
-const List = () => (
-  <MenuList>
-    <MenuItem iconName="Download">Download</MenuItem>
-    <MenuItem as="a" href="#" iconName="Link">
-      As a link
-    </MenuItem>
-    <MenuItem iconName="Pencil" isDisabled>
-      Disabled
-    </MenuItem>
-    <MenuItem iconName="DeleteNope" isDanger>
-      Danger version
-    </MenuItem>
-  </MenuList>
-);
-
-export const WithButton: ComponentStory<typeof Menu> = () => (
-  <Menu>
-    <MenuButton as={Button}>Actions</MenuButton>
-    <List />
-  </Menu>
-);
-
-export const WithLink: ComponentStory<typeof Menu> = () => (
-  <Menu>
-    <MenuButton as={Link}>Open menu</MenuButton>
-    <List />
-  </Menu>
-);
-
-export const WithButtonGroup: ComponentStory<typeof Menu> = () => (
-  <Box display="flex" justifyContent="flex-end">
-    <ButtonGroup isAttached>
-      <Button>Button</Button>
-      <Menu>
-        <MenuButton as={IconButton} iconName="AddonsTuorqouise" aria-label="Open menu" isTooltipDisabled />
-        <List />
-      </Menu>
-    </ButtonGroup>
-  </Box>
-);
-
-const TriggerButton = forwardRef<ButtonProps, 'button'>((props, ref) => (
-  <Button gap="12" ref={ref} rightIconName="DropdownArrows" variant="secondary" {...props}>
-    <span>Attempt #3</span>
-    <Badge>Latest</Badge>
-  </Button>
-));
-
-export const WithCustomItems: ComponentStory<typeof Menu> = () => {
-  return (
-    <Menu>
-      <MenuButton as={TriggerButton} />
-      <MenuList>
-        <MenuItem>
-          <Box display="flex" alignItems="center" gap="8">
-            <Icon color="green.50" name="BuildstatusSuccessful" />
-            <span>Successful</span>
-            <Badge>Latest</Badge>
-          </Box>
-        </MenuItem>
-        <MenuItem>
-          <Box display="flex" alignItems="center" gap="8">
-            <Icon color="red.50" name="BuildstatusFailed" />
-            <span>Failed</span>
-          </Box>
-        </MenuItem>
-      </MenuList>
-    </Menu>
-  );
-};

package/src/Components/Notification/Notification.stories.tsx

@@ -1,84 +0,0 @@
-import { ComponentMeta, ComponentStoryFn } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import Link from '../Link/Link';
-import Notification from './Notification';
-
-export default {
-  title: 'Components/Notification',
-  component: Notification,
-  argTypes: {
-    children: { type: 'string', defaultValue: 'text' },
-    action: {
-      control: 'inline-radio',
-      options: ['unset', 'link', 'action'],
-      mapping: {
-        unset: undefined,
-        link: { label: 'link', href: '#' },
-        action: { label: 'action', onClick: action('action') },
-      },
-    },
-    onClose: {
-      control: 'inline-radio',
-      options: ['unset', 'action'],
-      mapping: {
-        unset: undefined,
-        action: action('onClose'),
-      },
-    },
-  },
-  args: {
-    status: 'info',
-  },
-} as ComponentMeta<typeof Notification>;
-
-const Template: ComponentStoryFn<typeof Notification> = (props) => <Notification {...props} />;
-
-export const Default: ComponentStoryFn<typeof Notification> = (props) => <Template {...props} />;
-Default.args = {
-  action: undefined,
-};
-
-export const WithCustomIcon: ComponentStoryFn<typeof Notification> = (props) => <Template {...props} />;
-WithCustomIcon.storyName = 'With custom icon';
-WithCustomIcon.args = {
-  action: undefined,
-  iconName: 'Bitbot',
-};
-
-export const WithoutIcon: ComponentStoryFn<typeof Notification> = (props) => <Template {...props} />;
-WithoutIcon.storyName = 'Without icon';
-WithoutIcon.args = {
-  action: undefined,
-  showIcon: false,
-};
-
-export const WithAction: ComponentStoryFn<typeof Notification> = (props) => <Template {...props} />;
-WithAction.storyName = 'With action';
-WithAction.args = {
-  action: {
-    label: 'Upgrade',
-  },
-};
-
-export const WithActionAfterContent: ComponentStoryFn<typeof Notification> = (props) => <Template {...props} />;
-WithActionAfterContent.storyName = 'With action after content';
-WithActionAfterContent.args = {
-  action: {
-    label: 'Upgrade',
-    placement: 'after-content',
-  },
-};
-
-export const WithLink: ComponentStoryFn<typeof Notification> = (props) => <Template {...props} />;
-WithLink.storyName = 'With link';
-WithLink.args = {
-  children: (
-    <>
-      Unable to send build status back to your git host. Please check{' '}
-      <Link href="#/" isUnderlined>
-        our guide
-      </Link>
-      .
-    </>
-  ),
-};

package/src/Components/OverflowMenu/OverflowMenu.stories.tsx

@@ -1,30 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Box from '../Box/Box';
-import OverflowMenu from './OverflowMenu';
-import OverflowMenuItem from './OverflowMenuItem';
-
-export default {
-  title: 'Components/OverflowMenu',
-  component: OverflowMenu,
-} as ComponentMeta<typeof OverflowMenu>;
-
-export const WithProps: ComponentStory<typeof OverflowMenu> = (props) => (
-  <Box display="flex" flexDirection="column" alignItems="flex-end" minHeight="400px">
-    <OverflowMenu {...props}>
-      <OverflowMenuItem iconName="PlusAdd">Add member</OverflowMenuItem>
-      <OverflowMenuItem iconName="MinusRemove">Remove member</OverflowMenuItem>
-      <OverflowMenuItem as="a" iconName="Link" href="#">
-        As a link
-      </OverflowMenuItem>
-      <OverflowMenuItem iconName="Pencil" isDisabled>
-        Disabled item
-      </OverflowMenuItem>
-      <OverflowMenuItem iconName="Trash" isDanger>
-        Danger version
-      </OverflowMenuItem>
-    </OverflowMenu>
-  </Box>
-);
-WithProps.args = {
-  ...OverflowMenu.defaultProps,
-};

package/src/Components/Popover/Popover.stories.tsx

@@ -1,19 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Button from '../Button/Button';
-import Popover from './Popover';
-import PopoverTrigger from './PopoverTrigger';
-import PopoverContent from './PopoverContent';
-
-export default {
-  title: 'Components/Popover',
-  component: Popover,
-} as ComponentMeta<typeof Popover>;
-
-export const Default: ComponentStory<typeof Popover> = () => (
-  <Popover>
-    <PopoverTrigger>
-      <Button>Open popover</Button>
-    </PopoverTrigger>
-    <PopoverContent>Test content</PopoverContent>
-  </Popover>
-);

package/src/Components/ProgressBar/ProgressBar.stories.tsx

@@ -1,11 +0,0 @@
-import ProgressBar from './ProgressBar';
-
-export default {
-  component: ProgressBar,
-};
-
-export const WithProps = {
-  args: {
-    value: 35,
-  },
-};

package/src/Components/ProgressBitbot/ProgressBitbot.stories.tsx

@@ -1,12 +0,0 @@
-import ProgressBitbot from './ProgressBitbot';
-
-export default {
-  component: ProgressBitbot,
-};
-
-export const WithProps = {
-  args: {
-    content: 'Loading...',
-    size: 64,
-  },
-};

package/src/Components/ProgressSpinner/ProgressSpinner.stories.tsx

@@ -1,12 +0,0 @@
-import ProgressSpinner from './ProgressSpinner';
-
-export default {
-  component: ProgressSpinner,
-};
-
-export const WithProps = {
-  args: {
-    color: 'purple.40',
-    size: 24,
-  },
-};