@bitrise/bitkit 9.3.1 → 9.4.1-alpha.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.3.1",
+  "version": "9.4.1-alpha.2",
   "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/site/components/Documentation/Components/SectionToggle.tsx

@@ -22,6 +22,18 @@ const SectionToggle = () => {
           <SectionSubTitle>Unchecked Toggle</SectionSubTitle>
           <Toggle>Label</Toggle>
         </Flex>
+
+        <Flex grow initial={match('896px') ? 'none' : 'content'}>
+          <SectionSubTitle>Disabled & checked Toggle</SectionSubTitle>
+          <Toggle defaultChecked disabled>
+            Label
+          </Toggle>
+        </Flex>
+
+        <Flex grow initial={match('896px') ? 'none' : 'content'}>
+          <SectionSubTitle>Disabled & unchecked Toggle</SectionSubTitle>
+          <Toggle disabled>Label</Toggle>
+        </Flex>
       </Flex>
 
       <CodeBlock title="Toggle usage example">{`const Component = () => (

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/Toggle/Toggle.css

@@ -3,11 +3,18 @@
   --Toggle--border: 0.125rem;
 }
 
+.Toggle__container--disabled {
+  cursor: not-allowed;
+}
+
 .Toggle {
   display: block;
   position: relative;
   width: calc(var(--Toggle--size) * 2);
   height: var(--Toggle--size);
+}
+
+.Toggle__container:not(.Toggle__container--disabled) .Toggle {
   cursor: pointer;
 }
 
@@ -56,6 +63,10 @@
 .Toggle__icon-left { left: var(--Toggle--border); }
 .Toggle__icon-right { right: var(--Toggle--border); }
 
+.Toggle__container--disabled .Toggle__control {
+  background-color: var(--color-gray--2);
+}
+
 .Toggle__input:checked + .Toggle__control {
   background-color: var(--color-aqua--3);
 
@@ -63,3 +74,11 @@
     transform: translate(calc(100% + (var(--Toggle--border) * 2)), -50%);
   }
 }
+
+.Toggle__container--disabled .Toggle__input:checked + .Toggle__control {
+  background-color: var(--color-aqua--2);
+}
+
+.Toggle__container--disabled .Toggle__label {
+  opacity: 0.8;
+}

package/src/Toggle/Toggle.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import classnames from 'classnames';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 import Icon from '../Icon/Icon';
 import './Toggle.css';
@@ -10,16 +11,29 @@ export interface Props extends FlexProps {
   defaultChecked?: boolean;
   /** Handler for when the toggle state changes */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /** Applies styling to indicate the input is disabled */
+  disabled?: boolean;
 }
 
 /**
  * A slick styled toggle component.
  */
 const Toggle: React.FunctionComponent<Props> = (props: Props) => {
-  const { checked, children, defaultChecked, onChange, ...rest } = props;
+  const { className, checked, children, defaultChecked, onChange, disabled, ...rest } = props;
+
+  const classes = classnames(className, 'Toggle__container', {
+    'Toggle__container--disabled': disabled,
+  });
 
   return (
-    <Flex {...rest} Component="label" alignChildrenVertical="middle" direction="horizontal" gap="x2">
+    <Flex
+      {...rest}
+      Component="label"
+      alignChildrenVertical="middle"
+      direction="horizontal"
+      gap="x2"
+      className={classes}
+    >
       <Flex className="Toggle">
         <input
           checked={checked}
@@ -27,6 +41,7 @@ const Toggle: React.FunctionComponent<Props> = (props: Props) => {
           defaultChecked={defaultChecked}
           onChange={onChange}
           type="checkbox"
+          disabled={disabled}
         />
         <Flex className="Toggle__control">
           <span className="Toggle__icon-left">
@@ -42,7 +57,7 @@ const Toggle: React.FunctionComponent<Props> = (props: Props) => {
       </Flex>
 
       {children && (
-        <Flex minWidth="0px" shrink>
+        <Flex minWidth="0px" shrink className="Toggle__label">
           {children}
         </Flex>
       )}

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;