@bitrise/bitkit 10.36.2 → 11.0.0

package/src/Components/Dialog/Dialog.stories.tsx

@@ -1,82 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-import { Story, ComponentMeta } from '@storybook/react';
-import { useDisclosure } from '@chakra-ui/react';
-import { sortObjectByKey } from '../../utils/storyUtils';
-import Button from '../Button/Button';
-import Link from '../Link/Link';
-import Dialog, { DialogProps } from './Dialog';
-import DialogBody from './DialogBody';
-import DialogFooter from './DialogFooter';
-
-export default {
-  title: 'Components/Dialog',
-  component: Dialog,
-} as ComponentMeta<typeof Dialog>;
-
-const TextContent = ({ lotsOfContent = false }: { lotsOfContent?: boolean }) => (
-  <>
-    {[...Array(lotsOfContent ? 10 : 1)].map((_key, index) => (
-      // eslint-disable-next-line react/no-array-index-key
-      <p key={index}>
-        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
-        galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
-        the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
-        release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
-        like Aldus PageMaker including versions of Lorem Ipsum.
-      </p>
-    ))}
-  </>
-);
-
-interface StoryType extends DialogProps {
-  lotsOfContent: boolean;
-}
-
-export const WithProps: Story<StoryType> = ({ lotsOfContent, ...props }: StoryType) => {
-  const { variant } = props;
-  const { isOpen, onClose, onOpen } = useDisclosure();
-
-  const getContent = () => {
-    if (variant === 'empty') {
-      return (
-        <DialogBody padding="0">
-          <TextContent lotsOfContent={lotsOfContent} />
-          <Link as="button" colorScheme="purple" onClick={onClose} marginTop="16">
-            Link or button or anything to close this Dialog with onClick
-          </Link>
-        </DialogBody>
-      );
-    }
-    return (
-      <>
-        <DialogBody>
-          <TextContent lotsOfContent={lotsOfContent} />
-        </DialogBody>
-        <DialogFooter>
-          <Button marginRight="auto" variant="tertiary">
-            Tertiary
-          </Button>
-          <Button variant="secondary">Secondary</Button>
-          <Button>Primary</Button>
-        </DialogFooter>
-      </>
-    );
-  };
-
-  return (
-    <>
-      <Button onClick={onOpen}>Open Dialog</Button>
-      <Dialog padding={variant === 'empty' ? '16' : '0'} {...props} isOpen={isOpen} onClose={onClose}>
-        {getContent()}
-      </Dialog>
-    </>
-  );
-};
-
-WithProps.args = sortObjectByKey({
-  ...Dialog.defaultProps,
-  title: 'Title',
-  lotsOfContent: false,
-  dataTestid: 'test-modal',
-  trapFocus: false,
-});

package/src/Components/Divider/Divider.stories.tsx

@@ -1,18 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { sortObjectByKey } from '../../utils/storyUtils';
-import Box from '../Box/Box';
-import Divider from './Divider';
-
-export default {
-  title: 'Components/Divider',
-  component: Divider,
-} as ComponentMeta<typeof Divider>;
-
-const Template: ComponentStory<typeof Divider> = ({ ...props }) => (
-  <Box height="64">
-    <Divider {...props} />
-  </Box>
-);
-
-export const WithProps = Template.bind({});
-WithProps.args = sortObjectByKey(Divider.defaultProps);

package/src/Components/Dot/Dot.stories.tsx

@@ -1,15 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Dot from './Dot';
-
-export default {
-  title: 'Components/Dot',
-  component: Dot,
-} as ComponentMeta<typeof Dot>;
-
-const Template: ComponentStory<typeof Dot> = ({ ...props }) => <Dot {...props} />;
-
-export const WithProps = Template.bind({});
-WithProps.args = {
-  size: 32,
-  backgroundColor: 'green.50',
-};

package/src/Components/Dropdown/Dropdown.stories.tsx

@@ -1,154 +0,0 @@
-import { ReactNode, useState } from 'react';
-import { ComponentStoryFn } from '@storybook/react';
-import Notification from '../Notification/Notification';
-import Avatar from '../Avatar/Avatar';
-import Provider from '../Provider/Provider';
-import Dialog from '../Dialog/Dialog';
-import DialogBody from '../Dialog/DialogBody';
-import Dropdown, {
-  DropdownGroup,
-  DropdownOption,
-  DropdownDetailedOption,
-  NoResultsFound,
-  DropdownSearch,
-} from './Dropdown';
-
-export default {
-  title: 'Components/Dropdown',
-  component: Dropdown,
-};
-
-const opts = [
-  { value: 'x1', label: 'text1' },
-  { value: 'x2', label: 'text2' },
-  { value: 'x3', label: 'text3' },
-  { value: 'x4', label: 'text4' },
-];
-export const CustomSearch = () => {
-  const [searchValue, setSearchValue] = useState('');
-  const [options, setOptions] = useState<ReactNode[]>([]);
-  const searchOnChange = (nv: string) => {
-    setSearchValue(nv);
-    setOptions(
-      opts
-        .filter((opt) => opt.label.includes(nv))
-        .map((opt) => (
-          <DropdownOption value={opt.value} key={opt.value}>
-            {opt.label}
-          </DropdownOption>
-        )),
-    );
-  };
-  return <Dropdown search={<DropdownSearch value={searchValue} onChange={searchOnChange} />}>{options}</Dropdown>;
-};
-export const CustomSearchError = () => {
-  return (
-    <Dropdown search={<DropdownSearch />}>
-      <NoResultsFound>
-        <Notification status="error">Error</Notification>
-      </NoResultsFound>
-    </Dropdown>
-  );
-};
-
-export const WithDetail = () => {
-  return (
-    <Dropdown>
-      <DropdownDetailedOption value="user1" icon={<Avatar name="some" />} title="hello" subtitle="sub" />
-    </Dropdown>
-  );
-};
-
-export const WithLongOptions = () => {
-  return (
-    <Dropdown defaultValue="y" w="150px">
-      <DropdownOption value="y">
-        some very long option text longer than the component with verylongwordwithoutbreakopportunities
-      </DropdownOption>
-      <DropdownOption>some very long option text longer than the component</DropdownOption>
-    </Dropdown>
-  );
-};
-
-export const WithoutSearch = () => {
-  return (
-    <Dropdown search={false}>
-      <DropdownOption>opt1</DropdownOption>
-      <DropdownOption>opt2</DropdownOption>
-      <DropdownOption>opt3</DropdownOption>
-    </Dropdown>
-  );
-};
-
-export const Default: ComponentStoryFn<typeof Dropdown> = (args) => {
-  return (
-    <form
-      onSubmit={(ev) => {
-        ev.preventDefault();
-        const data = new FormData(ev.target as HTMLFormElement);
-        console.log(data.get('dropdown'));
-      }}
-    >
-      <Dropdown aria-label="test" name="dropdown" w="800px" {...args}>
-        <DropdownOption>Unset</DropdownOption>
-        <DropdownOption value="x1">text1</DropdownOption>
-        <DropdownOption value="x2">text2</DropdownOption>
-        <DropdownOption value="x3">text3</DropdownOption>
-        <DropdownOption value="x4">text4</DropdownOption>
-        <DropdownGroup label="test">
-          <DropdownOption value="x5">text5</DropdownOption>
-          <DropdownOption value="x6">text6</DropdownOption>
-          <DropdownOption value="x7">text7</DropdownOption>
-        </DropdownGroup>
-        <DropdownOption value="v1">
-          <div>label</div>
-        </DropdownOption>
-        <DropdownOption value="v2">
-          <div>label</div>
-        </DropdownOption>
-      </Dropdown>
-      <button type="submit">Send</button>
-    </form>
-  );
-};
-export const InsideDialog = () => {
-  return (
-    <Provider>
-      <Dialog isOpen isClosable title="Dropdown inside Dialog">
-        <DialogBody paddingBottom="24">
-          <Dropdown search={false}>
-            <DropdownOption value="x">Test Opt1</DropdownOption>
-          </Dropdown>
-        </DialogBody>
-      </Dialog>
-    </Provider>
-  );
-};
-export const WithIcon = () => {
-  return (
-    <Dropdown iconName="Calendar" defaultValue="daily">
-      <DropdownOption value="daily">Daily</DropdownOption>
-      <DropdownOption value="weekly">Weekly</DropdownOption>
-      <DropdownOption value="monthly">Monthly</DropdownOption>
-    </Dropdown>
-  );
-};
-export const WithCustomLabel = () => {
-  const [value, setValue] = useState('custom');
-
-  return (
-    <Dropdown
-      iconName="Calendar"
-      value={value}
-      onChange={(event) => setValue(event.target.value as string)}
-      formLabel={value === 'custom' ? '18 Aug - 19 Aug' : value}
-      search={false}
-    >
-      <DropdownOption value="Last 30 days">Last 30 days</DropdownOption>
-      <DropdownOption value="Last 40 days">Last 45 days</DropdownOption>
-      <DropdownOption value="Last 50 days">Last 60 days</DropdownOption>
-      <DropdownOption value="Last 90 days">Last 90 days</DropdownOption>
-      <DropdownOption value="custom">Custom</DropdownOption>
-    </Dropdown>
-  );
-};