@bitrise/bitkit 9.4.0 → 9.4.1-alpha.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.4.0",
+  "version": "9.4.1-alpha.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "lib/cjs/index.js",
   "esnext": "lib/esn/index.js",
@@ -27,34 +27,50 @@
     "start:docs": "ts-node ./scripts/build-docs-watch",
     "start:site": "parcel serve site/index.html --port 4001 -d dist --no-cache",
     "start:icons": "chokidar src/Icon/svg/** -c \"yarn svgr {path} && yarn lint:fix-icons\"",
-    "test": "jest ./src"
+    "test": "jest ./src",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "alias": {
-    "@bitrise/bitkit": "./src"
+    "@bitrise/bitkit": "./src",
+    "framer-motion": "./node_modules/framer-motion/dist/cjs"
   },
   "dependencies": {
+    "@chakra-ui/react": "^1.8.6",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
     "@juggle/resize-observer": "^3.3.1",
     "classnames": "^2.3.1",
     "clipboard": "^2.0.10",
-    "luxon": "^1.28.0",
+    "framer-motion": "^6",
+    "luxon": "^2.3.1",
     "normalize.css": "^8.0.1",
     "popper.js": "^1.14.4",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-popper": "^1.3.11",
-    "react-transition-group": "^2.9.0"
+    "react-transition-group": "^4.4.2"
   },
   "peerDependencies": {
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.8",
     "@bitrise/eslint-plugin": "^2.1.0",
     "@commitlint/cli": "^8.3.6",
     "@commitlint/config-conventional": "^8.3.6",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-interactions": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/builder-webpack5": "^6.4.19",
+    "@storybook/manager-webpack5": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@storybook/testing-library": "^0.0.9",
     "@svgr/cli": "^6.2.1",
     "@types/cheerio": "^0.22.31",
     "@types/clipboard": "^2.0.1",
@@ -62,30 +78,33 @@
     "@types/jest": "^27.4.1",
     "@types/lodash.sample": "^4.2.6",
     "@types/lodash.shuffle": "^4.2.6",
-    "@types/luxon": "^1.27.1",
+    "@types/luxon": "^2.3.1",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "^17.0.40",
-    "@types/react-dom": "^17.0.13",
+    "@types/react": "17.0.40",
+    "@types/react-dom": "^17.0.14",
     "@types/react-router": "^5.1.18",
     "@types/react-router-dom": "^5.3.3",
-    "@types/react-transition-group": "^2.9.2",
+    "@types/react-transition-group": "^4.4.4",
     "@types/vfile-message": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
     "@typescript-eslint/parser": "^5.15.0",
-    "autoprefixer": "^9.8.8",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
+    "autoprefixer": "^9",
     "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.2.3",
     "chokidar-cli": "^3.0.0",
     "concurrently": "^4.1.2",
+    "csstype": "3.0.9",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",
     "eslint": "^8.11.0",
     "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jest": "^26.1.1",
+    "eslint-plugin-jest": "^26.1.2",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-storybook": "^0.5.7",
     "eslint-plugin-testing-library": "^5.1.0",
     "fscreen": "^1.2.0",
     "husky": "^3.1.0",
@@ -100,16 +119,17 @@
     "postcss-preset-env": "^6.7.1",
     "prettier": "^2.6.0",
     "prismjs": "^1.27.0",
-    "react-docgen": "5.4.0",
     "react-router": "^5.2.1",
     "react-router-dom": "^5.3.0",
     "semantic-release": "^18.0.1",
-    "stylelint": "^9.10.1",
-    "stylelint-order": "^0.8.1",
-    "superstatic": "^6.0.4",
+    "stylelint": "^14.6.0",
+    "stylelint-order": "^5.0.0",
+    "superstatic": "^7.1.0",
     "ts-jest": "^27.1.3",
     "ts-node": "^10.7.0",
-    "typescript": "^4.6.2"
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "typescript": "^4.6.2",
+    "webpack": "^5.70.0"
   },
   "publishConfig": {
     "access": "public"
@@ -129,5 +149,8 @@
     "transform": {
       "\\.tsx?$": "ts-jest"
     }
+  },
+  "resolutions": {
+    "@types/react": "17.0.40"
   }
 }

package/src/Dropdown/DropdownMenu.css

@@ -15,7 +15,7 @@
 .DropdownMenu__group-text::after {
   content: '';
   flex: 1;
-  /* stylelint-disable-next-line unit-blacklist */
+  /* stylelint-disable-next-line unit-disallowed-list */
   height: 1px;
   background-color: var(--color-gray--3);
 }

package/src/chakra/BitkitProvider.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/react';
+import theme from './theme/theme';
+
+const BitkitProvider = ({ children }: ChakraProviderProps) => {
+  return <ChakraProvider theme={theme}>{children}</ChakraProvider>;
+};
+
+export default BitkitProvider;

package/src/chakra/components/Button/Button.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { sortObjectByKey } from '../../shared';
+import { IconList } from '../../../Icon/tsx';
+import Button from './Button';
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {
+    leftIconName: {
+      options: IconList,
+    },
+    rightIconName: {
+      options: IconList,
+    },
+  },
+} as ComponentMeta<typeof Button>;
+
+const Template: ComponentStory<typeof Button> = (props) => <Button {...props} />;
+
+export const WithProps = Template.bind({});
+WithProps.args = sortObjectByKey({
+  ...Button.defaultProps,
+  as: 'button',
+  className: '',
+  isDisabled: false,
+  href: '',
+  target: '_self',
+  type: 'button',
+  children: 'Button',
+});

package/src/chakra/components/Button/Button.theme.ts

@@ -0,0 +1,117 @@
+const ButtonTheme = {
+  baseStyle: {
+    border: '1px solid',
+    borderRadius: 'base',
+    fontWeight: 'normal',
+    lineHeight: 3,
+  },
+  variants: {
+    primary: {
+      bgGradient: 'linear(to-b, #6C0EB2, #450674)',
+      borderColor: '#683D87',
+      color: '#F8F8F8',
+      fontWeight: 'bold',
+      _hover: {
+        bgGradient: 'linear(to-b, #50167B, #3D125D)',
+        _disabled: {
+          bgGradient: 'linear(to-b, #ccc, #ACACAC)',
+          borderColor: '#ACACAC',
+        },
+      },
+      _active: {
+        bgGradient: 'linear(to-b, #351D48, #351D48)',
+      },
+      _disabled: {
+        bgGradient: 'linear(to-b, #ccc, #ACACAC)',
+        borderColor: '#ACACAC',
+      },
+    },
+    secondary: {
+      bgGradient: 'linear(to-b, #f8f8f8, #fff)',
+      borderColor: '#ddd',
+      color: '#351D48',
+      _hover: {
+        bgGradient: 'linear(to-b, #ECECEC, #ECECEC)',
+      },
+      _active: {
+        bgGradient: 'linear(to-b, #351D48, #351D48)',
+        color: '#F8F8F8',
+      },
+      _disabled: {
+        color: '#ACACAC',
+      },
+    },
+    tertiary: {
+      background: 'transparent',
+      borderColor: 'transparent',
+      color: '#760FC3',
+      _hover: {
+        background: '#F8F0FF',
+      },
+      _active: {
+        background: '#351D48',
+        color: '#F8F8F8',
+      },
+      _disabled: {
+        color: '#ACACAC',
+      },
+    },
+    dangerPrimary: {
+      bgGradient: 'linear(to-b, #E41447, #FF2158)',
+      borderColor: '#D4093C',
+      color: '#fff',
+      fontWeight: 'bold',
+      _hover: {
+        bgGradient: 'linear(to-b, #C90032, #C90032)',
+        _disabled: {
+          bgGradient: 'linear(to-b, #ccc, #acacac)',
+          borderColor: '#ACACAC',
+        },
+      },
+      _active: {
+        bgGradient: 'linear(to-b, #C02048, #C02048)',
+      },
+      _disabled: {
+        bgGradient: 'linear(to-b, #ccc, #acacac)',
+        borderColor: '#ACACAC',
+      },
+    },
+    dangerSecondary: {
+      bgGradient: 'linear(to-b, #f8f8f8, #fff)',
+      borderColor: '#ddd',
+      color: '#FF2158',
+      _hover: {
+        bgGradient: 'linear(to-b, #FFE8EE, #FFE8EE)',
+        borderColor: '#FF8FAB',
+        _disabled: {
+          bgGradient: 'linear(to-b, #f8f8f8, #fff)',
+          borderColor: '#ddd',
+          color: '#ACACAC',
+        },
+      },
+      _active: {
+        bgGradient: 'linear(to-b, #C02048, #C02048)',
+        color: '#fff',
+      },
+      _disabled: {
+        color: '#ACACAC',
+      },
+    },
+  },
+  sizes: {
+    small: {
+      minWidth: '32px',
+      height: '32px',
+      fontSize: 2,
+      paddingX: '12px',
+    },
+    medium: {
+      minWidth: '48px',
+      height: '48px',
+      fontSize: 3,
+      paddingX: '16px',
+    },
+  },
+};
+
+export default ButtonTheme;

package/src/chakra/components/Button/Button.tsx

@@ -0,0 +1,52 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import React from 'react';
+import { Button as ChakraButton, ButtonProps } from '@chakra-ui/react';
+import { Icon, TypeIconName } from '@bitrise/bitkit';
+
+export interface Props {
+  as?: 'a' | 'button';
+  children: string;
+  className?: string;
+  href?: string;
+  isDisabled?: boolean;
+  leftIconName?: TypeIconName;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  ref?: ButtonProps['itemRef'];
+  rightIconName?: TypeIconName;
+  size?: 'small' | 'medium';
+  sx?: ButtonProps['sx'];
+  target?: '_blank' | '_parent' | '_self' | '_top';
+  type?: ButtonProps['type'];
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'dangerPrimary' | 'dangerSecondary';
+}
+
+const Button = React.forwardRef<HTMLButtonElement, Props>((props: Props, ref) => {
+  const { as, leftIconName, rightIconName, size, ...rest } = props;
+  const properties: ButtonProps = { as, size, ...rest };
+  if (leftIconName) {
+    properties.leftIcon = <Icon name={leftIconName} />;
+  }
+  if (rightIconName) {
+    properties.rightIcon = <Icon name={rightIconName} />;
+  }
+  if (leftIconName || rightIconName) {
+    properties.iconSpacing = size === 'medium' ? '10px' : '6px';
+  }
+  if (as === 'a') {
+    delete properties.type;
+  } else {
+    /* @ts-ignore */
+    delete properties.href;
+    /* @ts-ignore */
+    delete properties.target;
+  }
+  return <ChakraButton ref={ref} {...properties} />;
+});
+
+Button.defaultProps = {
+  as: 'button',
+  size: 'medium',
+  variant: 'primary',
+};
+
+export default Button;

package/src/chakra/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { sortObjectByKey } from '../../shared';
+import { IconList } from '../../../Icon/tsx';
+import IconButton from './IconButton';
+
+export default {
+  title: 'Components/IconButton',
+  component: IconButton,
+  argTypes: {
+    iconName: {
+      options: IconList,
+    },
+  },
+} as ComponentMeta<typeof IconButton>;
+
+const Template: ComponentStory<typeof IconButton> = ({ ...props }) => <IconButton {...props} />;
+
+export const WithProps = Template.bind({});
+WithProps.args = sortObjectByKey({
+  ...IconButton.defaultProps,
+  iconName: 'AddOns',
+  label: 'This is the label',
+});

package/src/chakra/components/IconButton/IconButton.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { IconButton as ChakraIconButton, IconButtonProps } from '@chakra-ui/react';
+import { Icon, TypeIconName } from '@bitrise/bitkit';
+
+export interface Props {
+  iconName: TypeIconName;
+  label: IconButtonProps['aria-label'];
+  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  size?: 'small' | 'medium';
+  sx?: IconButtonProps['sx'];
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'dangerPrimary' | 'dangerSecondary';
+}
+
+const IconButton = React.forwardRef<HTMLButtonElement, Props>((props: Props, ref) => {
+  const { iconName, label, ...rest } = props;
+  const properties: IconButtonProps = {
+    'aria-label': label,
+    icon: <Icon name={iconName} />,
+    ...rest,
+  };
+  return <ChakraIconButton ref={ref} {...properties} />;
+});
+
+IconButton.defaultProps = {
+  size: 'medium',
+  variant: 'primary',
+} as Props;
+
+export default IconButton;

package/src/chakra/components/Link/Link.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { sortObjectByKey } from '../../shared';
+import Link from './Link';
+
+export default {
+  title: 'Components/Link',
+  component: Link,
+} as ComponentMeta<typeof Link>;
+
+const Template: ComponentStory<typeof Link> = ({ ...props }) => <Link {...props} />;
+
+export const WithProps = Template.bind({});
+WithProps.args = sortObjectByKey({
+  ...Link.defaultProps,
+  children: 'The quick brown fox jumps over the lazy dog.',
+  href: '#',
+  target: '_self',
+});

package/src/chakra/components/Link/Link.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Link as ChakraLink, LinkProps } from '@chakra-ui/react';
+
+export type TypeLinkColor = 'grape-3' | 'grape-5' | 'gray-1' | 'gray-5' | 'white' | 'inherit';
+
+export interface Props {
+  children: LinkProps['children'];
+  color?: TypeLinkColor;
+  href: string;
+  isUnderlined?: boolean;
+  target?: '_blank' | '_parent' | '_self' | '_top';
+}
+
+const Link = (props: Props) => {
+  const { isUnderlined, ...rest } = props;
+  const properties: LinkProps = { ...rest };
+  properties.as = 'a';
+  if (isUnderlined) {
+    properties.textDecoration = 'underline';
+  }
+
+  return <ChakraLink {...properties} />;
+};
+
+Link.defaultProps = {
+  color: 'grape-3',
+  isUnderlined: true,
+} as Props;
+
+export default Link;

package/src/chakra/components/Menu/Menu.stories.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ButtonGroup, HStack, MenuButton, MenuList } from '@chakra-ui/react';
+import Button from '../Button/Button';
+import IconButton from '../IconButton/IconButton';
+import Menu from './Menu';
+import MenuItem from './MenuItem';
+
+export default {
+  title: 'Components/Menu',
+  component: Menu,
+  subcomponents: { MenuButton, MenuList, MenuItem },
+} as ComponentMeta<typeof Menu>;
+
+export const WithButton: ComponentStory<typeof Menu> = () => (
+  <Menu>
+    <MenuButton as={Button}>Actions</MenuButton>
+    <MenuList>
+      <MenuItem iconName="AddOnsColorTuorqouise">Download</MenuItem>
+      <MenuItem iconName="AddOnsColorTuorqouise">Create a Copy</MenuItem>
+      <MenuItem iconName="AddOnsColorTuorqouise">Mark as Draft</MenuItem>
+      <MenuItem iconName="AddOnsColorTuorqouise">Delete</MenuItem>
+      <MenuItem iconName="AddOnsColorTuorqouise">Attend a Workshop</MenuItem>
+    </MenuList>
+  </Menu>
+);
+
+export const WithIconButton: ComponentStory<typeof Menu> = () => (
+  <Menu>
+    <MenuButton as={IconButton} iconName="AddOnsColorTuorqouise" label="Open menu" />
+    <MenuList>
+      <MenuItem iconName="AddOnsColorTuorqouise">Download</MenuItem>
+      <MenuItem iconName="AddOnsColorTuorqouise">Create a Copy</MenuItem>
+      <MenuItem iconName="AddOnsColorTuorqouise">Mark as Draft</MenuItem>
+      <MenuItem iconName="AddOnsColorTuorqouise">Delete</MenuItem>
+      <MenuItem iconName="AddOnsColorTuorqouise">Attend a Workshop</MenuItem>
+    </MenuList>
+  </Menu>
+);
+
+export const WithButtonGroup: ComponentStory<typeof Menu> = () => (
+  <HStack justifyContent="end">
+    <ButtonGroup isAttached>
+      <Button>Button</Button>
+      <Menu>
+        <MenuButton as={IconButton} iconName="AddOnsColorTuorqouise" label="Open menu" />
+        <MenuList>
+          <MenuItem iconName="AddOnsColorTuorqouise">Download</MenuItem>
+          <MenuItem iconName="AddOnsColorTuorqouise">Create a Copy</MenuItem>
+          <MenuItem iconName="AddOnsColorTuorqouise">Mark as Draft</MenuItem>
+          <MenuItem iconName="AddOnsColorTuorqouise">Delete</MenuItem>
+          <MenuItem iconName="AddOnsColorTuorqouise">Attend a Workshop</MenuItem>
+        </MenuList>
+      </Menu>
+    </ButtonGroup>
+  </HStack>
+);

package/src/chakra/components/Menu/Menu.theme.ts

@@ -0,0 +1,23 @@
+import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+
+const MenuTheme: SystemStyleObject = {
+  baseStyle: {
+    list: {
+      backgroundColor: '#fff',
+      borderRadius: '8px',
+      filter: 'drop-shadow(0 0.125rem 0.3125rem rgba(199, 205, 207, 0.7))',
+      paddingY: '16px',
+    },
+    item: {
+      padding: '12px 32px',
+      _focus: {
+        backgroundColor: '#F8F0FF',
+      },
+      _hover: {
+        backgroundColor: '#F8F0FF',
+      },
+    },
+  },
+};
+
+export default MenuTheme;

package/src/chakra/components/Menu/Menu.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Menu as ChakraMenu, MenuProps } from '@chakra-ui/react';
+
+export type Props = MenuProps;
+
+const Menu = (props: Props) => <ChakraMenu {...props} />;
+
+export default Menu;

package/src/chakra/components/Menu/MenuItem.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { MenuItem as ChakraMenuItem, MenuItemProps } from '@chakra-ui/react';
+import { Icon, TypeIconName } from '@bitrise/bitkit';
+
+export type Props = {
+  children: string;
+  iconName: TypeIconName;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+};
+
+const MenuItem = (props: Props) => {
+  const { iconName, ...rest } = props;
+  const properties: MenuItemProps = { ...rest };
+  properties.icon = <Icon name={iconName} />;
+  properties.iconSpacing = '16px';
+  return <ChakraMenuItem {...properties} />;
+};
+
+export default MenuItem;

package/src/chakra/components/StatusTag/StatusTag.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { sortObjectByKey } from '../../shared';
+import StatusTag, { Props } from './StatusTag';
+
+export default {
+  title: 'Components/StatusTag',
+  component: StatusTag,
+} as ComponentMeta<typeof StatusTag>;
+
+const Template: ComponentStory<typeof StatusTag> = ({ ...props }) => <StatusTag {...props} />;
+
+export const WithProps = Template.bind({});
+WithProps.args = sortObjectByKey({
+  ...StatusTag.defaultProps,
+  children: 'Running',
+  // iconName: 'BuildstatusLoadingAnimated',
+  variant: 'running',
+} as Props);

package/src/chakra/components/StatusTag/StatusTag.theme.ts

@@ -0,0 +1,45 @@
+const StatusTagTheme = {
+  baseStyle: {
+    borderRadius: '4px',
+    paddingX: '8px',
+  },
+  sizes: {
+    small: {
+      paddingY: '4px',
+    },
+    normal: {
+      paddingY: '8px',
+    },
+    big: {
+      paddingY: '20px',
+    },
+  },
+  variants: {
+    aborted: {
+      backgroundColor: '#FFF6D1',
+      color: '#875B00',
+    },
+    failed: {
+      backgroundColor: '#FFF0F3',
+      color: '#A91E2E',
+    },
+    onHold: {
+      backgroundColor: '#F6F4F6',
+      color: '#6B6071',
+    },
+    running: {
+      backgroundColor: '#F9F2FD',
+      color: '#492F5C',
+    },
+    starting: {
+      backgroundColor: '#ECF8FD',
+      color: '#1066AC',
+    },
+    success: {
+      backgroundColor: '#EEF9F1',
+      color: '#167231',
+    },
+  },
+};
+
+export default StatusTagTheme;