@bitrise/bitkit 9.7.0 → 9.7.3

package/README.md

@@ -44,7 +44,7 @@ Cleans up the build directories
 
 #### `$ yarn lint`
 
-Runs Javascript and CSS linting
+Runs Javascript linting
 
 #### `$ yarn serve`
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.7.0",
+  "version": "9.7.3",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -12,7 +12,7 @@
     "build:lib": "rm -rf ./lib && yarn build:lib:cjs && yarn build:lib:esn",
     "build:lib:esn": "tsc -p src -m esnext -t esnext --outDir lib/esn",
     "build:lib:cjs": "tsc -p src --outDir lib/cjs",
-    "build:site": "rm -rf ./dist && rm -rf ./public && yarn build:docs && parcel build site/index.html -d dist",
+    "build:site": "rm -rf ./dist && rm -rf ./public && yarn build:docs && parcel build site/index.html -d dist --public-url '.'",
     "commitlint": "commitlint",
     "lint": "yarn lint:js",
     "lint:js": "eslint src/**/*.tsx",
@@ -40,7 +40,7 @@
     "@types/react-transition-group": "^4.4.4",
     "classnames": "^2.3.1",
     "clipboard": "^2.0.10",
-    "framer-motion": "^6.3.1",
+    "framer-motion": "^6.3.2",
     "luxon": "^2.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -81,15 +81,15 @@
     "@types/luxon": "^2.3.1",
     "@types/prismjs": "^1.26.0",
     "@types/react": "17.0.44",
-    "@types/react-dom": "^17.0.15",
+    "@types/react-dom": "^17.0.16",
     "@types/react-router": "^5.1.18",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-transition-group": "^4.4.4",
     "@types/vfile-message": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.20.0",
-    "@typescript-eslint/parser": "^5.20.0",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
+    "@typescript-eslint/parser": "^5.21.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
-    "axios": "^0.26.1",
+    "axios": "^0.27.1",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.2.5",
     "babel-plugin-polyfill-corejs2": "^0.3.1",

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

@@ -1,5 +1,5 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { sortObjectByKey } from '@/utils/storyUtils';
+import { sortObjectByKey } from '../../utils/storyUtils';
 import Button from './Button';
 
 export default {

package/src/Components/Button/Button.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { forwardRef } from 'react';
 import { Button as ChakraButton, ButtonProps } from '@chakra-ui/react';
-import Icon from '@/Old/Icon/Icon';
-import { TypeIconName } from '@/Old/Icon/tsx';
+import Icon from '../../Old/Icon/Icon';
+import { TypeIconName } from '../../Old/Icon/tsx';
 
 export interface Props {
   as?: 'a' | 'button';

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

@@ -1,5 +1,5 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { sortObjectByKey } from '@/utils/storyUtils';
+import { sortObjectByKey } from '../../utils/storyUtils';
 import Card from './Card';
 
 export default {

package/src/Components/Card/Card.tsx

@@ -1,7 +1,7 @@
 import { Box, BoxProps } from '@chakra-ui/react';
-import { Radii } from '@/Foundations/Radii/Radii';
-import { Shadows } from '@/Foundations/Shadows/Shadows';
-import { Sizes } from '@/Foundations/Sizes/Sizes';
+import { Radii } from '../../Foundations/Radii/Radii';
+import { Shadows } from '../../Foundations/Shadows/Shadows';
+import { Sizes } from '../../Foundations/Sizes/Sizes';
 
 export interface Props {
   borderRadius?: keyof Radii;

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

@@ -1,6 +1,6 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { Box } from '@chakra-ui/react';
-import { sortObjectByKey } from '@/utils/storyUtils';
+import { sortObjectByKey } from '../../utils/storyUtils';
 import Divider from './Divider';
 
 export default {

package/src/Components/IconButton/IconButton.stories.tsx

@@ -1,6 +1,5 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { sortObjectByKey } from '@/utils/storyUtils';
-// import { IconList } from '../../../Icon/tsx';
+import { sortObjectByKey } from '../../utils/storyUtils';
 import IconButton from './IconButton';
 
 export default {

package/src/Components/IconButton/IconButton.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import { IconButton as ChakraIconButton, IconButtonProps } from '@chakra-ui/react';
-import Icon from '@/Old/Icon/Icon';
-import { TypeIconName } from '@/Old/Icon/tsx';
+import Icon from '../../Old/Icon/Icon';
+import { TypeIconName } from '../../Old/Icon/tsx';
 
 export interface Props {
   iconName: TypeIconName;

package/src/Components/Link/Link.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { sortObjectByKey } from '@/utils/storyUtils';
-import Text from '@/Components/Text/Text';
+import { sortObjectByKey } from '../../utils/storyUtils';
+import Text from '../Text/Text';
 import Link from './Link';
 
 export default {

package/src/Components/Link/Link.theme.ts

@@ -1,4 +1,4 @@
-import { textSizes } from '@/Foundations/Typography/Typography';
+import { textSizes } from '../../Foundations/Typography/Typography';
 
 const LinkTheme = {
   baseStyle: {

package/src/Components/Link/Link.tsx

@@ -1,5 +1,5 @@
 import { Link as ChakraLink, LinkProps } from '@chakra-ui/react';
-import { TextSizes } from '@/Components/Text/Text';
+import { TextSizes } from '../Text/Text';
 
 export interface Props {
   children: LinkProps['children'];

package/src/Components/Menu/Menu.stories.tsx

@@ -1,7 +1,7 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { Box, ButtonGroup, HStack, MenuButton, MenuList, useMenuItem, useStyleConfig } from '@chakra-ui/react';
-import Button from '@/Components/Button/Button';
-import IconButton from '@/Components/IconButton/IconButton';
+import Button from '../Button/Button';
+import IconButton from '../IconButton/IconButton';
 import Menu from './Menu';
 import MenuItem from './MenuItem';
 

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

@@ -1,5 +1,5 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { sortObjectByKey } from '@/utils/storyUtils';
+import { sortObjectByKey } from '../../utils/storyUtils';
 import Text from './Text';
 
 export default {

package/src/Components/Text/Text.theme.ts

@@ -1,4 +1,4 @@
-import { textSizes } from '@/Foundations/Typography/Typography';
+import { textSizes } from '../../Foundations/Typography/Typography';
 
 const TextTheme = textSizes;
 

package/src/Foundations/Colors/DesignTokens.tsx

@@ -1,9 +1,9 @@
 // import { ReactNode } from 'react';
 import { HStack, VStack } from '@chakra-ui/react';
-import Box from '@/Components/Box/Box';
-import Card from '@/Components/Card/Card';
-import Provider from '@/Components/Provider/Provider';
-import Text from '@/Components/Text/Text';
+import Box from '../../Components/Box/Box';
+import Card from '../../Components/Card/Card';
+import Provider from '../../Components/Provider/Provider';
+import Text from '../../Components/Text/Text';
 
 const TOKENS = {
   'brand.primary': 'Primary brand color',

package/src/Foundations/Colors/Palette.tsx

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
 import { HStack, SystemStyleObject, VStack } from '@chakra-ui/react';
-import Box from '@/Components/Box/Box';
-import Card from '@/Components/Card/Card';
-import Divider from '@/Components/Divider/Divider';
-import Provider from '@/Components/Provider/Provider';
-import Text from '@/Components/Text/Text';
+import Box from '../../Components/Box/Box';
+import Card from '../../Components/Card/Card';
+import Divider from '../../Components/Divider/Divider';
+import Provider from '../../Components/Provider/Provider';
+import Text from '../../Components/Text/Text';
 import colors, { Colors } from './Colors';
 
 const paletteKeys = ['neutral', 'purple', 'red', 'orange', 'yellow', 'green', 'turquoise', 'blue'] as Array<

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

@@ -1,8 +1,8 @@
 import { HStack, VStack } from '@chakra-ui/react';
-import Box from '@/Components/Box/Box';
-import Card from '@/Components/Card/Card';
-import Provider from '@/Components/Provider/Provider';
-import Text from '@/Components/Text/Text';
+import Box from '../../Components/Box/Box';
+import Card from '../../Components/Card/Card';
+import Provider from '../../Components/Provider/Provider';
+import Text from '../../Components/Text/Text';
 import radii from './Radii';
 
 export const Radii = () => (

package/src/Foundations/Shadows/Shadows.examples.tsx

@@ -1,8 +1,8 @@
 import { HStack, VStack } from '@chakra-ui/react';
-import Box from '@/Components/Box/Box';
-import Card from '@/Components/Card/Card';
-import Provider from '@/Components/Provider/Provider';
-import Text from '@/Components/Text/Text';
+import Box from '../../Components/Box/Box';
+import Card from '../../Components/Card/Card';
+import Provider from '../../Components/Provider/Provider';
+import Text from '../../Components/Text/Text';
 import shadows from './Shadows';
 
 export const Shadows = () => (

package/src/Foundations/Sizes/Sizes.examples.tsx

@@ -1,8 +1,8 @@
 import { HStack, VStack } from '@chakra-ui/react';
-import Box from '@/Components/Box/Box';
-import Card from '@/Components/Card/Card';
-import Provider from '@/Components/Provider/Provider';
-import Text from '@/Components/Text/Text';
+import Box from '../../Components/Box/Box';
+import Card from '../../Components/Card/Card';
+import Provider from '../../Components/Provider/Provider';
+import Text from '../../Components/Text/Text';
 import sizes from './Sizes';
 
 export const Sizes = () => (

package/src/Foundations/Typography/Typography.examples.tsx

@@ -1,7 +1,7 @@
 import { VStack } from '@chakra-ui/react';
-import Card from '@/Components/Card/Card';
-import Provider from '@/Components/Provider/Provider';
-import Text from '@/Components/Text/Text';
+import Card from '../../Components/Card/Card';
+import Provider from '../../Components/Provider/Provider';
+import Text from '../../Components/Text/Text';
 import typography from './Typography';
 
 const style = {

package/src/Old/Button/Button.tsx

@@ -33,10 +33,10 @@ export interface Props extends FlexProps {
 
 /** Standard Button component */
 const Button: React.FunctionComponent<Props> = (props: Props) => {
-  const { borderless, fullWidth, level, size, variant, ...rest } = props;
+  const { borderless, className, fullWidth, level, size, variant, ...rest } = props;
 
   const gap = size === 'small' ? 'x1' : 'x2';
-  const classes = classnames('Button', `Button--level-${level}`, `Button--size-${size}`, {
+  const classes = classnames(className, 'Button', `Button--level-${level}`, `Button--size-${size}`, {
     'Button--borderless': borderless,
     'Button--full-width': fullWidth,
     [`Button--variant-${variant}`]: variant,

package/src/Old/Dropdown/Dropdown.tsx

@@ -30,6 +30,7 @@ export interface Props extends DropdownButtonProps {
   /** Selected value from the options */
   selected?: DropdownValue;
   maxHeight?: string;
+  menuClassName?: string;
 }
 
 /**
@@ -38,7 +39,7 @@ export interface Props extends DropdownButtonProps {
  * and custom should be done with Placement.
  */
 const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, options, onChange, selected, maxHeight, ...rest } = props;
+  const { children, options, onChange, selected, maxHeight, menuClassName, ...rest } = props;
   const [visible, setVisible] = useState(false);
 
   const handleChange = (value: DropdownValue) => {
@@ -73,7 +74,7 @@ const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
 
       <Placement onClose={() => setVisible(false)} sameWidth visible={visible}>
         {() => (
-          <DropdownMenu maxHeight={maxHeight} width="100%">
+          <DropdownMenu className={menuClassName} maxHeight={maxHeight} width="100%">
             {options.map((option) => (
               <React.Fragment key={option.text}>
                 {'options' in option ? (

package/src/Old/Dropdown/DropdownMenu.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import classNames from 'classnames';
 import { Props as BaseProps } from '../Base/Base';
 import Flex from '../Flex/Flex';
 import PlacementArea from '../Placement/PlacementArea';
@@ -15,11 +16,13 @@ export interface Props extends BaseProps {
  * Parent container for DropdownMenuItems
  */
 const DropdownMenu: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, maxHeight, width, ...rest } = props;
+  const { className, children, maxHeight, width, ...rest } = props;
+
+  const classes = classNames(className, 'DropdownMenu__content');
 
   return (
     <PlacementArea {...rest} direction="vertical" paddingVertical="x4">
-      <Flex className="DropdownMenu__content" direction="vertical" maxHeight={maxHeight} width={width}>
+      <Flex className={classes} direction="vertical" maxHeight={maxHeight} width={width}>
         {children}
       </Flex>
     </PlacementArea>