@bitrise/bitkit 10.36.1 → 11.0.0-alpha-migrated.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.36.1",
+  "version": "11.0.0-alpha-migrated.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -27,14 +27,11 @@
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@floating-ui/react-dom-interactions": "^0.8.1",
-    "@popperjs/core": "^2.11.5",
-    "classnames": "^2.3.1",
     "framer-motion": "^6.5.1",
     "luxon": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-focus-lock": "^2.9.1",
-    "react-popper": "^2.3.0"
+    "react-focus-lock": "^2.9.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -42,46 +39,34 @@
   },
   "devDependencies": {
     "@babel/core": "^7.18.9",
-    "@babel/parser": "^7.18.9",
     "@bitrise/eslint-plugin": "^2.2.0",
-    "@chakra-ui/cli": "^2.1.2",
     "@commitlint/cli": "^16.3.0",
     "@commitlint/config-conventional": "^16.2.4",
     "@google-cloud/storage": "^5.20.5",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-interactions": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/addons": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/react": "^6.5.9",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-interactions": "^6.5.12",
+    "@storybook/addon-links": "^6.5.12",
+    "@storybook/addons": "^6.5.12",
+    "@storybook/builder-webpack5": "^6.5.12",
+    "@storybook/manager-webpack5": "^6.5.12",
+    "@storybook/react": "^6.5.12",
     "@storybook/testing-library": "^0.0.13",
-    "@storybook/theming": "^6.5.9",
-    "@svgr/core": "^6.3.0",
+    "@storybook/theming": "^6.5.12",
     "@testing-library/dom": "^8.16.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/cheerio": "^0.22.31",
-    "@types/enzyme": "^3.10.12",
     "@types/jest": "^29.0.3",
-    "@types/luxon": "^2.4.0",
-    "@types/react": "18.0.18",
+    "@types/luxon": "^3.0.1",
+    "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
-    "@types/vfile-message": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "^5.30.7",
     "@typescript-eslint/parser": "^5.30.7",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "axios": "^0.27.2",
-    "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.2.5",
-    "babel-plugin-polyfill-corejs2": "^0.3.1",
-    "enzyme": "^3.11.0",
-    "enzyme-to-json": "^3.6.2",
     "eslint": "^8.20.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^26.6.0",
@@ -93,30 +78,24 @@
     "eslint-plugin-testing-library": "^5.5.1",
     "glob": "^8.0.3",
     "husky": "^7.0.4",
-    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.0.3",
     "jest-environment-jsdom": "^28.1.3",
-    "jsdom": "^19.0.0",
+    "jsdom": "^20.0.0",
     "prettier": "^2.7.1",
     "react-hook-form": "^7.33.1",
-    "recast": "^0.21.1",
     "semantic-release": "^19.0.3",
     "ts-jest": "^29.0.1",
-    "ts-node": "^10.9.1",
-    "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.8.2",
-    "webpack": "^5.73.0"
+    "typescript": "^4.8.2"
   },
   "files": [
     "src",
     "tsconfig.json"
   ],
+  "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
   "resolutions": {
-    "**/ast-types": "npm:@gkz/ast-types",
-    "ts-node": "^10.9.1",
-    "@types/react": "17.0.40"
+    "**/ast-types": "npm:@gkz/ast-types"
   }
 }

package/src/Components/Menu/MenuItem.tsx

@@ -1,5 +1,5 @@
 import { MenuItem as ChakraMenuItem, MenuItemProps as ChakraMenuItemProps, forwardRef } from '@chakra-ui/react';
-import { Icon, TypeIconName } from '@bitrise/bitkit';
+import Icon, { TypeIconName } from '../Icon/Icon';
 
 const dangerStyle = {
   color: 'red.50',

package/src/Components/Toggle/Toggle.theme.ts

@@ -14,6 +14,7 @@ const ToggleTheme: ComponentStyleConfig = {
       backgroundColor: 'neutral.50',
       borderRadius: '12',
       transition: '100ms',
+      isolation: 'isolate',
       _disabled: {
         backgroundColor: 'neutral.93',
         cursor: 'not-allowed',

package/tsconfig.json

@@ -13,11 +13,6 @@
     "jsx": "react-jsx",
     "module": "commonjs",
     "moduleResolution": "node",
-    "paths": {
-      "*": ["@types/*"],
-      "@bitrise/bitkit": ["src"],
-      "@/*": ["src/*"]
-    },
     "resolveJsonModule": true,
     // https://github.com/chakra-ui/chakra-ui/issues/2955
     "skipLibCheck": true,

package/src/Components/Accordion/Accordion.stories.tsx

@@ -1,63 +0,0 @@
-import { MouseEvent } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Box from '../Box/Box';
-import Button from '../Button/Button';
-import Icon from '../Icon/Icon';
-import Text from '../Text/Text';
-import Accordion from './Accordion';
-import AccordionItem from './AccordionItem';
-
-export default {
-  title: 'Components/Accordion',
-  component: Accordion,
-  args: {
-    colorScheme: 'white',
-  },
-  argTypes: {
-    onChange: {
-      action: 'onChange event',
-    },
-  },
-  subcomponents: { AccordionItem },
-} as ComponentMeta<typeof Accordion>;
-
-const onButtonClick = (e: MouseEvent<HTMLButtonElement>) => {
-  e.stopPropagation();
-};
-
-const ButtonContentElement = ({ title }: { title: string }) => {
-  return (
-    <Box display="flex" alignItems="center" flexGrow={1}>
-      <Icon name="Doc" />
-      <Text as="p" align="left" size="3" margin="0 auto 0 1rem">
-        {title}
-        <br />
-        <Text as="span" size="2" textColor="neutral.40">
-          Generated by clone-build workflow
-        </Text>
-      </Text>
-      <Button as="a" href="#" size="small" onClick={onButtonClick} leftIconName="Download">
-        Download
-      </Button>
-    </Box>
-  );
-};
-
-export const DefaultVariant: ComponentStory<typeof Accordion> = (props) => (
-  <Accordion {...props} marginLeft="32">
-    <AccordionItem buttonContent="The buttonContent is a string" fontSize="2" id="first">
-      Content - you can use any style prop on AccordionItem
-    </AccordionItem>
-    <AccordionItem
-      buttonContent={<ButtonContentElement title="The buttonContent is a React element" />}
-      fontSize="2"
-      id="second"
-    >
-      Content - you can use any style prop on AccordionItem
-    </AccordionItem>
-    <AccordionItem buttonContent={<ButtonContentElement title="Without children" />} id="third" />
-    <AccordionItem buttonContent="Fourth, enabled element" fontSize="2" id="fourth">
-      Fourth, enabled element
-    </AccordionItem>
-  </Accordion>
-);

package/src/Components/Accordion/Accordion.test.tsx

@@ -1,34 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import Accordion from './Accordion';
-import AccordionItem from './AccordionItem';
-
-describe('Accordion', () => {
-  it('calls the onChange handler with the proper id if Accordion has a conditionally not rendered item', async () => {
-    const thirdId = 'third-item';
-    const thirdTitle = 'Third item';
-
-    const handleChange = jest.fn();
-
-    render(
-      <Accordion onChange={handleChange}>
-        <AccordionItem id="first" buttonContent="First item">
-          First content
-        </AccordionItem>
-        {false && (
-          <AccordionItem id="second" buttonContent="Second item">
-            Second content
-          </AccordionItem>
-        )}
-        <AccordionItem id={thirdId} buttonContent={thirdTitle}>
-          Third content
-        </AccordionItem>
-      </Accordion>,
-    );
-
-    const thirdTab = await screen.findByText(thirdTitle);
-    await userEvent.click(thirdTab);
-
-    expect(handleChange).toHaveBeenCalledWith(['third-item'], [1]);
-  });
-});

package/src/Components/AspectRatio/AspectRatio.stories.tsx

@@ -1,24 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Image from '../Image/Image';
-import AspectRatio from './AspectRatio';
-
-export default {
-  title: 'Components/AspectRatio',
-  component: AspectRatio,
-} as ComponentMeta<typeof AspectRatio>;
-
-const Template: ComponentStory<typeof AspectRatio> = (props) => <AspectRatio {...props} />;
-
-export const WithImage = Template.bind({});
-WithImage.args = {
-  children: <Image alt="Bitrise office" src="bitrise_office.jpg" />,
-  maxWidth: 800,
-  ratio: 1920 / 1280,
-};
-
-export const WithVideo = Template.bind({});
-WithVideo.args = {
-  children: <iframe title="Intro to Bitrise" src="https://www.youtube.com/embed/JrCn9xWQ7IM" allowFullScreen />,
-  maxWidth: 800,
-  ratio: 16 / 9,
-};

package/src/Components/Avatar/Avatar.stories.tsx

@@ -1,15 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Avatar from './Avatar';
-
-export default {
-  title: 'Components/Avatar',
-  component: Avatar,
-} as ComponentMeta<typeof Avatar>;
-
-export const WithProps: ComponentStory<typeof Avatar> = ({ contentProps, ...props }) => <Avatar {...props} />;
-
-WithProps.args = {
-  ...Avatar.defaultProps,
-  name: 'Bitrise website',
-  src: 'https://bitrise-public-content-production.s3.amazonaws.com/org-icons/default_avatar-02.png',
-};

package/src/Components/Badge/Badge.stories.tsx

@@ -1,13 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Badge from './Badge';
-
-export default {
-  title: 'Components/Badge',
-  component: Badge,
-} as ComponentMeta<typeof Badge>;
-
-export const WithProps: ComponentStory<typeof Badge> = (props) => <Badge {...props} />;
-WithProps.args = {
-  children: 'Coming soon',
-  ...Badge.defaultProps,
-};

package/src/Components/Box/Box.stories.tsx

@@ -1,20 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Box from './Box';
-
-export default {
-  title: 'Components/Box',
-  component: Box,
-} as ComponentMeta<typeof Box>;
-
-const Template: ComponentStory<typeof Box> = (props) => <Box {...props} />;
-
-export const WithProps = Template.bind({});
-WithProps.args = {
-  as: 'div',
-  className: '',
-  children: 'This is the Box',
-  backgroundColor: 'brand.primary',
-  color: 'neutral.95',
-  padding: '12',
-  width: '100%',
-};

package/src/Components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,49 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import Breadcrumb from './Breadcrumb';
-import BreadcrumbLink from './BreadcrumbLink';
-
-export default {
-  component: Breadcrumb,
-  subcomponents: { BreadcrumbLink },
-  args: {
-    hasSeparatorAfterLast: true,
-    hasSeparatorBeforeFirst: false,
-  },
-} as ComponentMeta<typeof Breadcrumb>;
-
-export const DefaultVersion = {
-  args: {
-    children: [
-      <BreadcrumbLink
-        avatarUrl="https://bitrise-public-content-production.s3.amazonaws.com/org-icons/default_avatar-02.png"
-        href="#"
-      >
-        Bitrise #Core
-      </BreadcrumbLink>,
-      <BreadcrumbLink avatarName="Bitkit" href="#">
-        bitkit
-      </BreadcrumbLink>,
-      <BreadcrumbLink isCurrentPage>settings</BreadcrumbLink>,
-    ],
-  },
-};
-
-export const WithLongText = {
-  args: {
-    children: [
-      <BreadcrumbLink
-        avatarUrl="https://bitrise-public-content-production.s3.amazonaws.com/org-icons/default_avatar-02.png"
-        href="#"
-      >
-        Bitrise #Core
-      </BreadcrumbLink>,
-      <BreadcrumbLink avatarName="Bitkit" href="#">
-        Bitkit
-      </BreadcrumbLink>,
-      <BreadcrumbLink href="#">
-        There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
-        some form, by injected humour, or randomised words which don't look even slightly believable.
-      </BreadcrumbLink>,
-    ],
-  },
-};

package/src/Components/Button/Button.stories.tsx

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

package/src/Components/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,21 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Button from '../Button/Button';
-import ButtonGroup from './ButtonGroup';
-
-export default {
-  component: ButtonGroup,
-} as ComponentMeta<typeof ButtonGroup>;
-
-const Template: ComponentStory<typeof ButtonGroup> = (props) => (
-  <ButtonGroup {...props} width="900px" flexDirection="row">
-    <Button>Button 1</Button>
-    <Button>Button 2</Button>
-    <Button>Button 3</Button>
-  </ButtonGroup>
-);
-
-export const WithProps = Template.bind({});
-
-WithProps.args = {
-  isAttached: true,
-};

package/src/Components/Card/Card.stories.tsx

@@ -1,44 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Divider from '../Divider/Divider';
-import Card from './Card';
-import CardContent from './CardContent';
-
-export default {
-  title: 'Components/Card',
-  component: Card,
-  subcomponents: { CardContent },
-} as ComponentMeta<typeof Card>;
-
-export const WithProps: ComponentStory<typeof Card> = ({ contentProps, ...props }) => (
-  <Card {...props}>
-    <CardContent {...contentProps}>The quick brown fox jumps over the lazy dog.</CardContent>
-  </Card>
-);
-
-WithProps.args = {
-  ...Card.defaultProps,
-  boxShadow: 'medium',
-  className: '',
-  withBorder: false,
-  contentProps: {
-    padding: '24',
-  },
-};
-
-export const DividedContent: ComponentStory<typeof Card> = ({ contentProps, ...props }) => (
-  <Card {...props}>
-    <CardContent {...contentProps}>The quick brown fox jumps over the lazy dog.</CardContent>
-    <Divider />
-    <CardContent {...contentProps}>The quick brown fox jumps over the lazy dog.</CardContent>
-  </Card>
-);
-
-DividedContent.args = {
-  ...Card.defaultProps,
-  boxShadow: 'medium',
-  className: '',
-  withBorder: false,
-  contentProps: {
-    padding: '24',
-  },
-};

package/src/Components/ColorButton/ColorButton.stories.tsx

@@ -1,30 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { sortObjectByKey } from '../../utils/storyUtils';
-import Box from '../Box/Box';
-import ColorButton from './ColorButton';
-
-export default {
-  title: 'Components/ColorButton',
-  component: ColorButton,
-  argTypes: {
-    as: {
-      control: 'inline-radio',
-      options: ['a', 'button'],
-    },
-  },
-} as ComponentMeta<typeof ColorButton>;
-
-const Template: ComponentStory<typeof ColorButton> = ({ colorScheme, ...props }) => (
-  <Box padding={16} backgroundColor={colorScheme === 'neutral' ? 'black' : undefined}>
-    <ColorButton colorScheme={colorScheme} {...props} />
-  </Box>
-);
-
-export const WithProps = Template.bind({});
-WithProps.args = sortObjectByKey({
-  ...ColorButton.defaultProps,
-  children: 'ColorButton',
-  colorScheme: 'blue',
-  isDisabled: false,
-  isLoading: false,
-});

package/src/Components/DatePicker/DatePicker.stories.tsx

@@ -1,16 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import { DateTime } from 'luxon';
-import DatePicker from './DatePicker';
-import { DateRange } from './useDateRange';
-
-export default {
-  component: DatePicker,
-  args: { visible: true, children: <button type="button">ok</button> },
-} as ComponentMeta<typeof DatePicker>;
-
-export const Default = {};
-export const Selectable = {
-  args: {
-    selectable: new DateRange(DateTime.local(2022, 11, 20), DateTime.local(2022, 11, 30)),
-  },
-};

package/src/Components/DatePicker/DatePicker.test.tsx

@@ -1,94 +0,0 @@
-import { render, screen, waitFor, within } from '@testing-library/react';
-import { DateTime } from 'luxon';
-import userEventGlobal from '@testing-library/user-event';
-import Provider from '../Provider/Provider';
-import DatePicker, { DatePickerProps } from './DatePicker';
-import { DateRange } from './useDateRange';
-
-jest.mock('../../hooks/useResponsive', () => jest.fn(() => ({ isMobile: false })));
-
-jest.useFakeTimers();
-jest.setSystemTime(DateTime.local(2022, 1, 2).toJSDate());
-const userEvent = userEventGlobal.setup({ advanceTimers: (t) => jest.advanceTimersByTime(t) });
-const Subject = (props: Partial<DatePickerProps>) => (
-  <Provider>
-    <DatePicker onClose={() => {}} visible {...props}>
-      <div />
-    </DatePicker>
-  </Provider>
-);
-describe('DatePicker', () => {
-  it('works', async () => {
-    const handler = jest.fn<void, [DateRange]>();
-    render(<Subject onApply={handler} />);
-    await userEvent.click(await screen.findByRole('button', { name: 'January' }));
-    await userEvent.selectOptions(
-      await screen.findByRole('listbox', { name: 'month' }),
-      await screen.findByRole('option', { name: 'October' }),
-    );
-    const month = await screen.findByRole('listbox', { name: 'October 2022' });
-    await userEvent.selectOptions(month, await within(month).findByRole('option', { name: '23' }));
-    await userEvent.click(await screen.findByRole('button', { name: 'November' }));
-    const year = await screen.findByRole('spinbutton', { name: 'year' });
-    await userEvent.type(year, '{BackSpace}3');
-    await userEvent.selectOptions(
-      await screen.findByRole('listbox', { name: 'month' }),
-      await screen.findByRole('option', { name: 'February' }),
-    );
-    const month2 = await screen.findByRole('listbox', { name: 'February 2023' });
-    await userEvent.selectOptions(month2, await within(month2).findByRole('option', { name: '10' }));
-    await userEvent.click(await screen.findByRole('button', { name: 'Apply' }));
-    expect(handler).toHaveBeenCalledWith(expect.any(DateRange));
-    const [{ from: begin, to: end }] = handler.mock.lastCall!;
-    expect(begin! < end!).toBe(true);
-    expect(begin?.toObject()).toMatchObject({ year: 2022, month: 10, day: 23 });
-    expect(end?.toObject()).toMatchObject({ year: 2023, month: 2, day: 10 });
-  });
-  describe('with range pre-selected', () => {
-    describe('when range start/end is in the same month', () => {
-      it('shows the start month on the left and the next month on the right', async () => {
-        render(<Subject selected={new DateRange(DateTime.local(2022, 2, 1), DateTime.local(2022, 2, 7))} />);
-        const left = await screen.findByRole('listbox', { name: 'February 2022' });
-        expect(left).toBeInTheDocument();
-        const right = await screen.findByRole('listbox', { name: 'March 2022' });
-        expect(right).toBeInTheDocument();
-      });
-    });
-    describe('when range start/end is in consequitive months', () => {
-      it('shows the start month on the left and the next month on the right', async () => {
-        render(<Subject selected={new DateRange(DateTime.local(2022, 2, 1), DateTime.local(2022, 3, 7))} />);
-        const left = await screen.findByRole('listbox', { name: 'February 2022' });
-        expect(left).toBeInTheDocument();
-        const right = await screen.findByRole('listbox', { name: 'March 2022' });
-        expect(right).toBeInTheDocument();
-      });
-    });
-    describe('when range start/end have more than 1 month between them', () => {
-      it('shows the start month on the left and the next month on the right', async () => {
-        render(<Subject selected={new DateRange(DateTime.local(2022, 2, 1), DateTime.local(2022, 5, 7))} />);
-        const left = await screen.findByRole('listbox', { name: 'February 2022' });
-        expect(left).toBeInTheDocument();
-        const right = await screen.findByRole('listbox', { name: 'March 2022' });
-        expect(right).toBeInTheDocument();
-      });
-    });
-  });
-  describe('month selector', () => {
-    it('shows current month as selected', async () => {
-      render(<Subject />);
-      const left = await screen.findByRole('button', { name: 'January' });
-      await userEvent.click(left);
-      const jan = await screen.findByRole('option', { name: 'January' });
-      const feb = await screen.findByRole('option', { name: 'February' });
-      expect(jan).toHaveAttribute('aria-selected', 'true');
-      expect(feb).not.toHaveAttribute('aria-selected');
-    });
-    it('focuses the year input when clicked', async () => {
-      render(<Subject />);
-      const left = await screen.findByRole('button', { name: 'January' });
-      await userEvent.click(left);
-      const year = await screen.findByRole('spinbutton', { name: 'year' });
-      await waitFor(() => expect(year).toHaveFocus());
-    });
-  });
-});