@bitrise/bitkit 10.36.2 → 11.0.0

package/src/Components/Ribbon/Ribbon.stories.tsx

@@ -1,35 +0,0 @@
-import { ComponentMeta, ComponentStoryFn } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import Ribbon from './Ribbon';
-
-export default {
-  title: 'Components/Ribbon',
-  component: Ribbon,
-  argTypes: {
-    children: { type: 'string' },
-    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: {
-    children: 'text',
-    colorScheme: 'blue',
-    action: undefined,
-  },
-} as ComponentMeta<typeof Ribbon>;
-
-export const Default: ComponentStoryFn<typeof Ribbon> = (args) => <Ribbon {...args} />;

package/src/Components/Select/Select.stories.tsx

@@ -1,100 +0,0 @@
-import { useState } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { useForm } from 'react-hook-form';
-import { sortObjectByKey } from '../../utils/storyUtils';
-import Select from './Select';
-
-export default {
-  title: 'Components/Select',
-  component: Select,
-  args: {
-    isLoading: false,
-    errorText: 'Error text',
-    helperText: 'Helpher text',
-    label: 'Label',
-    name: 'Name',
-  },
-  argTypes: {
-    onChange: {
-      action: 'onChange event',
-    },
-  },
-} as ComponentMeta<typeof Select>;
-
-const args = {
-  ...Select.defaultProps,
-  isDisabled: false,
-  isInvalid: false,
-  isRequired: false,
-};
-
-const children = (
-  <>
-    <option value="all">All status</option>
-    <option value="successful">Successful</option>
-    <option value="failed">Failed</option>
-    <option value="aborted">Aborted</option>
-    <option value="on_hold">On hold</option>
-  </>
-);
-
-const Template: ComponentStory<typeof Select> = (props) => <Select {...props}>{children}</Select>;
-
-export const WithProps = Template.bind({});
-WithProps.args = sortObjectByKey({
-  ...args,
-  placeholder: 'Select build status',
-});
-
-export const Controlled = () => {
-  const [value, setValue] = useState<string | undefined>(undefined);
-  return (
-    <Select w="300px" placeholder="Test holder" value={value} onChange={({ target: { value: val } }) => setValue(val)}>
-      {children}
-    </Select>
-  );
-};
-
-export const ControlledWithReactHookForm = () => {
-  const form = useForm({
-    defaultValues: {
-      field: undefined,
-    },
-  });
-
-  const props = form.register('field');
-
-  return (
-    <Select w="300px" placeholder="Test holder" {...props} isRequired>
-      {children}
-    </Select>
-  );
-};
-
-export const WithLoading = () => (
-  <>
-    <Select w="300px" isDisabled placeholder="Test holder">
-      {children}
-    </Select>
-    <Select w="300px" isLoading>
-      {children}
-    </Select>
-  </>
-);
-
-export const WithLoadingOnChange = () => {
-  const [loading, setLoading] = useState(false);
-
-  return (
-    <Select
-      w="240px"
-      isLoading={loading}
-      onChange={() => {
-        setLoading(true);
-        setTimeout(() => setLoading(false), 3000);
-      }}
-    >
-      {children}
-    </Select>
-  );
-};

package/src/Components/Select/Select.test.tsx

@@ -1,96 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { useForm } from 'react-hook-form';
-import Select from './Select';
-
-const WithReactHookForm = ({ placeholder }: { placeholder?: string }) => {
-  const form = useForm({ defaultValues: { rating: undefined } });
-  const props = form.register('rating');
-
-  return (
-    <Select placeholder={placeholder} {...props}>
-      <option value="bad">Bad</option>
-      <option value="good">Good</option>
-    </Select>
-  );
-};
-
-const placeholder = 'What was your impression?';
-
-describe('Select', () => {
-  it('renders placeholder option', async () => {
-    render(
-      <Select placeholder={placeholder}>
-        <option value="bad">Bad</option>
-        <option value="good">Good</option>
-      </Select>,
-    );
-
-    const placeholderOption = screen.queryByRole('option', { name: placeholder });
-    expect(placeholderOption).toBeInTheDocument();
-  });
-
-  it('renders placeholder option as disabled', async () => {
-    render(
-      <Select placeholder={placeholder}>
-        <option value="bad">Bad</option>
-        <option value="good">Good</option>
-      </Select>,
-    );
-
-    const placeholderOption = screen.queryByRole('option', { name: placeholder });
-    expect(placeholderOption).toBeDisabled();
-  });
-
-  it('placeholder option is selected if no value is set', async () => {
-    render(
-      <Select placeholder={placeholder}>
-        <option value="bad">Bad</option>
-        <option value="good">Good</option>
-      </Select>,
-    );
-
-    const select = await screen.findByRole<HTMLInputElement>('combobox');
-    expect(select).toHaveValue('');
-  });
-
-  it('updates selected option without placeholder', async () => {
-    render(<WithReactHookForm />);
-
-    const select = await screen.findByRole<HTMLInputElement>('combobox');
-    await userEvent.selectOptions(select, 'good');
-    expect(select).toHaveValue('good');
-  });
-
-  it('updates selected option with placeholder', async () => {
-    render(<WithReactHookForm placeholder="What was your impression?" />);
-
-    const select = await screen.findByRole<HTMLInputElement>('combobox');
-    await userEvent.selectOptions(select, 'good');
-    expect(select).toHaveValue('good');
-  });
-
-  it('handles defaultValue correctly without placeholder', async () => {
-    render(
-      <Select defaultValue="good">
-        <option value="bad">Bad</option>
-        <option value="good">Good</option>
-      </Select>,
-    );
-
-    const select = await screen.findByRole<HTMLInputElement>('combobox');
-    expect(select).toHaveValue('good');
-  });
-
-  it('handles defaultValue correctly with placeholder', async () => {
-    render(
-      <Select placeholder="What was your impression?" defaultValue="good">
-        <option value="bad">Bad</option>
-        <option value="good">Good</option>
-      </Select>,
-    );
-
-    const select = await screen.findByRole<HTMLInputElement>('combobox');
-    expect(select).toHaveValue('good');
-  });
-});

package/src/Components/Skeleton/Skeleton.stories.tsx

@@ -1,18 +0,0 @@
-import Skeleton, { SkeletonProps } from './Skeleton';
-import SkeletonBox from './SkeletonBox';
-
-export default {
-  component: Skeleton,
-  subComponents: [SkeletonBox],
-};
-
-export const WithProps = {
-  args: {
-    isActive: false,
-  },
-  render: (args: SkeletonProps) => (
-    <Skeleton display="flex" flexDirection="column" gap="8" padding="8" {...args}>
-      <SkeletonBox height="32" /> <SkeletonBox height="32" /> <SkeletonBox height="32" />
-    </Skeleton>
-  ),
-};

package/src/Components/Table/Table.stories.tsx

@@ -1,216 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Box from '../Box/Box';
-import Table from './Table';
-import TableContainer from './TableContainer';
-import Th from './Th';
-import Thead from './Thead';
-import Tbody from './Tbody';
-import Tr from './Tr';
-import Td from './Td';
-import TableCaption from './TableCaption';
-
-export default {
-  title: 'Components/Table',
-  component: Table,
-  args: {
-    isFixed: false,
-  },
-} as ComponentMeta<typeof Table>;
-
-const Template: ComponentStory<typeof Table> = (props) => (
-  <TableContainer>
-    <Table {...props} />
-  </TableContainer>
-);
-
-export const BasicVersion = Template.bind({});
-BasicVersion.args = {
-  children: (
-    <>
-      <TableCaption description="Table decription">Basic Table</TableCaption>
-      <Thead>
-        <Tr>
-          <Th>To convert</Th>
-          <Th>into</Th>
-          <Th textAlign="right">multiply by</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        <Tr>
-          <Td>inches</Td>
-          <Td>millimetres (mm)</Td>
-          <Td textAlign="right">25.4</Td>
-        </Tr>
-        <Tr>
-          <Td colSpan={3} textAlign="right" variant="separator">
-            Separator
-          </Td>
-        </Tr>
-        <Tr>
-          <Td>feet</Td>
-          <Td>centimetres (cm)</Td>
-          <Td textAlign="right">30.48</Td>
-        </Tr>
-        <Tr>
-          <Td>yards</Td>
-          <Td>metres (m)</Td>
-          <Td textAlign="right">0.91444</Td>
-        </Tr>
-      </Tbody>
-    </>
-  ),
-};
-
-export const SortableColumns = Template.bind({});
-SortableColumns.args = {
-  children: (
-    <>
-      <TableCaption description="You have to implelement the logic">Sortable columns</TableCaption>
-      <Thead>
-        <Tr>
-          <Th isSortable>isSortable: true</Th>
-          <Th isSortable sortedBy="ascending">
-            sortedBy: ascending
-          </Th>
-          <Th isSortable sortedBy="descending">
-            sortedBy: descending
-          </Th>
-          <Th>isSortable: false</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        <Tr>
-          <Td>1</Td>
-          <Td>foo</Td>
-          <Td>bar</Td>
-          <Td>baz</Td>
-        </Tr>
-        <Tr>
-          <Td>2</Td>
-          <Td>foo</Td>
-          <Td>bar</Td>
-          <Td>baz</Td>
-        </Tr>
-      </Tbody>
-    </>
-  ),
-};
-
-export const ColumnsWithTooltip = Template.bind({});
-ColumnsWithTooltip.args = {
-  children: (
-    <>
-      <TableCaption description="You have to implelement the logic">Columns with tooltip</TableCaption>
-      <Thead>
-        <Tr>
-          <Th>Name</Th>
-          <Th
-            isSortable
-            tooltip={{
-              label:
-                'How long successful builds typically take to run. We calculate this using the 50th percentile aggregation.',
-            }}
-          >
-            Typical build time (P50)
-          </Th>
-          <Th
-            isSortable
-            sortedBy="descending"
-            tooltip={{
-              label:
-                'How long slowest successful builds take to run. We calculate this using the 90th percentile aggregation.',
-            }}
-          >
-            Typical build time (P90)
-          </Th>
-          <Th
-            isSortable
-            tooltip={{ label: 'The total amount of time spent running builds of this app during the selected period.' }}
-          >
-            Build usage
-          </Th>
-          <Th isSortable tooltip={{ label: 'The total number of builds during the selected period.' }}>
-            Build count
-          </Th>
-          <Th isSortable tooltip={{ label: 'The percentage of completed builds that passed.' }}>
-            Success rate
-          </Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        <Tr>
-          <Td>bitrise-website</Td>
-          <Td>3m 36s</Td>
-          <Td>4m 10s</Td>
-          <Td>2d 13h 13s</Td>
-          <Td>21,433</Td>
-          <Td>54.43%</Td>
-        </Tr>
-      </Tbody>
-    </>
-  ),
-};
-
-const onRowClick = () => {};
-
-export const ClickableRows = Template.bind({});
-ClickableRows.args = {
-  children: (
-    <>
-      <TableCaption description="You can add onClick to the Tr">
-        Clickable rows - This is a temporary solution, please use it only when it really necessary
-      </TableCaption>
-      <Thead>
-        <Tr>
-          <Th>Workflow</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        <Tr onClick={onRowClick}>
-          <Td>ci-rspec-apps</Td>
-        </Tr>
-        <Tr onClick={onRowClick}>
-          <Td>ci-rspes</Td>
-        </Tr>
-        <Tr onClick={onRowClick}>
-          <Td>ci-be-lint</Td>
-        </Tr>
-      </Tbody>
-    </>
-  ),
-};
-
-export const ExpandableRows = Template.bind({});
-ExpandableRows.args = {
-  children: (
-    <>
-      <TableCaption description="Click on a row">Expandable rows</TableCaption>
-      <Thead>
-        <Tr>
-          <Th />
-          <Th>ID</Th>
-          <Th>Status</Th>
-          <Th>Time</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        <Tr expandableContent={<Box paddingY="12">😎</Box>} defaultIsExpanded>
-          <Td>f6963af857c8f2fe</Td>
-          <Td>Success</Td>
-          <Td>May 29, 2022 10:11:32am</Td>
-        </Tr>
-        <Tr expandableContent={<Box paddingY="12">🥳</Box>}>
-          <Td>f6963af857c8f2fe</Td>
-          <Td>Aborted</Td>
-          <Td>May 29, 2022 9:12:50am</Td>
-        </Tr>
-        <Tr>
-          <Td />
-          <Td>f6963af857c8f2fe</Td>
-          <Td>Failed</Td>
-          <Td>May 29, 2022 10:11:32am</Td>
-        </Tr>
-      </Tbody>
-    </>
-  ),
-};

package/src/Components/Tabs/Tabs.stories.tsx

@@ -1,65 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Tabs from './Tabs';
-import TabList from './TabList';
-import Tab from './Tab';
-import TabPanels from './TabPanels';
-import TabPanel from './TabPanel';
-
-export default {
-  title: 'Components/Tabs',
-  component: Tabs,
-  subcomponents: { Tab },
-  argTypes: {
-    onChange: {
-      action: 'onChange event',
-    },
-  },
-} as ComponentMeta<typeof Tabs>;
-
-const badge = {
-  backgroundColor: 'yellow.80',
-  children: 'new',
-  color: 'neutral.10',
-};
-
-export const WithDefaults: ComponentStory<typeof Tabs> = (props) => {
-  return (
-    <Tabs defaultTab="selected-as-default" {...props}>
-      <TabList>
-        <Tab id="basic">Basic</Tab>
-        <Tab id="selected-as-default">Selected as default</Tab>
-        <Tab id="with-left-icon" leftIconName="Bell">
-          With left icon
-        </Tab>
-        <Tab id="with-badge" badge={badge}>
-          With badge
-        </Tab>
-        <Tab id="disabled" isDisabled>
-          Disabled
-        </Tab>
-        <Tab id="with-right-icon" rightIconName="ArrowForward">
-          With right icon
-        </Tab>
-      </TabList>
-
-      <TabPanels>
-        <TabPanel paddingTop="16">
-          <p>
-            You can add any style prop to <code>TabPanel</code>, like padding.
-            <br />
-            But doesn't have any default style.
-          </p>
-        </TabPanel>
-        <TabPanel paddingTop="16">You can use defaultIndex for this</TabPanel>
-        <TabPanel paddingTop="16">You can add icon to tab</TabPanel>
-        <TabPanel paddingTop="16">Or Badge</TabPanel>
-        <TabPanel paddingTop="16">This panel is disabled</TabPanel>
-        <TabPanel paddingTop="16">You can add icon to tab</TabPanel>
-      </TabPanels>
-    </Tabs>
-  );
-};
-
-WithDefaults.args = {
-  withHistory: true,
-};

package/src/Components/Tabs/Tabs.test.tsx

@@ -1,36 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import Tabs from './Tabs';
-import TabList from './TabList';
-import Tab from './Tab';
-import TabPanels from './TabPanels';
-import TabPanel from './TabPanel';
-
-describe('Tabs', () => {
-  it('calls the onChange handler with the proper id if TabList has a conditionally not rendered item', async () => {
-    const thirdTabId = 'third-tab';
-    const thirdTabTitle = 'Third tab';
-
-    const handleChange = jest.fn();
-
-    render(
-      <Tabs onChange={handleChange}>
-        <TabList>
-          <Tab id="first-tab">First tab</Tab>
-          {false && <Tab id="second-tab">Second tab</Tab>}
-          <Tab id={thirdTabId}>{thirdTabTitle}</Tab>
-        </TabList>
-        <TabPanels>
-          <TabPanel>First content</TabPanel>
-          {false && <TabPanel>Second content</TabPanel>}
-          <TabPanel>Third content</TabPanel>
-        </TabPanels>
-      </Tabs>,
-    );
-
-    const thirdTab = await screen.findByText(thirdTabTitle);
-    await userEvent.click(thirdTab);
-
-    expect(handleChange).toHaveBeenCalledWith(1, thirdTabId);
-  });
-});

package/src/Components/Text/Text.stories.tsx

@@ -1,22 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { sortObjectByKey } from '../../utils/storyUtils';
-import Text from './Text';
-
-export default {
-  title: 'Components/Text',
-  component: Text,
-} as ComponentMeta<typeof Text>;
-
-const Template: ComponentStory<typeof Text> = (props) => <Text {...props} />;
-
-export const WithProps = Template.bind({});
-WithProps.args = sortObjectByKey({
-  ...Text.defaultProps,
-  align: 'left',
-  className: '',
-  children: 'The quick brown fox jumps over the lazy dog.',
-  fontWeight: 'normal',
-  letterSpacing: 'normal',
-  size: ['5', '3'],
-  textTransform: 'none',
-});

package/src/Components/Toast/Toast.stories.tsx

@@ -1,30 +0,0 @@
-import { useEffect } from 'react';
-import { Meta } from '@storybook/react';
-import NotificationStories from '../Notification/Notification.stories';
-import useToast, { ToastOptions } from './Toast';
-
-export default {
-  title: 'Components/Toast',
-  argTypes: {
-    isClosable: { type: 'boolean', defaultValue: true },
-    showTimestamp: { type: 'boolean', defaultValue: true },
-    action: NotificationStories.argTypes?.action,
-    title: { type: 'string', defaultValue: 'the title' },
-    description: { type: 'string', defaultValue: 'some description' },
-    duration: { control: { type: 'range', min: 0, max: 10000, step: 1000 } },
-    status: {
-      control: 'inline-radio',
-      defaultValue: 'success',
-      options: ['success', 'info', 'error', 'warning', 'progress'],
-    },
-  },
-} as Meta;
-
-export const Default = ({ duration, ...props }: ToastOptions) => {
-  const toast = useToast();
-  useEffect(() => {
-    toast({ duration: duration || null, ...props });
-  }, [duration, props]);
-
-  return <div />;
-};

package/src/Components/Toggle/Toggle.stories.tsx

@@ -1,19 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import Toggle from './Toggle';
-
-export default {
-  title: 'Components/Toggle',
-  component: Toggle,
-} as ComponentMeta<typeof Toggle>;
-
-export const WithProps = {
-  args: {
-    defaultChecked: false,
-    errorText: '',
-    helperText:
-      'Inline help. Maecenas a turpis tortor. Nunc vitae libero tempor, ullamcorper purus quis, mattis tellus.',
-    isDisabled: false,
-    isLoading: false,
-    label: 'Toggle the toggle',
-  },
-};

package/src/Foundations/Colors/Colors.stories.mdx

@@ -1,9 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import DesignTokens from './DesignTokens';
-import Palette from './Palette';
-
-<Meta title="Foundations/Colors" />
-
-<DesignTokens />
-
-<Palette />

package/src/Foundations/Radii/Radii.examples.tsx

@@ -1,25 +0,0 @@
-import { HStack, VStack } from '@chakra-ui/react';
-import Box from '../../Components/Box/Box';
-import Card from '../../Components/Card/Card';
-import CardContent from '../../Components/Card/CardContent';
-import Provider from '../../Components/Provider/Provider';
-import Text from '../../Components/Text/Text';
-import radii from './Radii';
-
-export const Radii = () => (
-  <Provider>
-    <Text as="h2" size="8">
-      Radii (round corners)
-    </Text>
-    <Card boxShadow="medium" marginTop="24">
-      <HStack as={CardContent} padding="24" spacing="24">
-        {Object.keys(radii).map((size) => (
-          <VStack key={size}>
-            <Box border="0.1875rem solid" borderColor="brand.primary" borderRadius={size} height="64" width="64" />
-            <Text>{size}</Text>
-          </VStack>
-        ))}
-      </HStack>
-    </Card>
-  </Provider>
-);

package/src/Foundations/Radii/Radii.stories.mdx

@@ -1,6 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import { Radii } from './Radii.examples';
-
-<Meta title="Foundations/Radii (round corners)" />
-
-<Radii />