@bitrise/bitkit 9.7.0-alpha-chakra.4 → 9.7.2

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-alpha-chakra.4",
+  "version": "9.7.2",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -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",
@@ -97,9 +97,9 @@
     "concurrently": "^7.1.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^8.13.0",
+    "eslint": "^8.14.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.1.4",
+    "eslint-plugin-jest": "^26.1.5",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.4",

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,5 +1,6 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { sortObjectByKey } from '@/utils/storyUtils';
+import { sortObjectByKey } from '../../utils/storyUtils';
+import Text from '../Text/Text';
 import Link from './Link';
 
 export default {
@@ -7,12 +8,21 @@ export default {
   component: Link,
 } as ComponentMeta<typeof Link>;
 
-const Template: ComponentStory<typeof Link> = ({ ...props }) => <Link {...props} />;
-
-export const WithProps = Template.bind({});
-WithProps.args = sortObjectByKey({
+const args = sortObjectByKey({
   ...Link.defaultProps,
   children: 'The quick brown fox jumps over the lazy dog.',
   href: '#',
   target: '_self',
 });
+
+export const WithProps: ComponentStory<typeof Link> = ({ ...props }) => <Link {...props} />;
+WithProps.args = args;
+
+export const InsideText: ComponentStory<typeof Link> = ({ ...props }) => (
+  <Text size="2">
+    This is a text with link: <Link {...props} />
+    <br />
+    The Link inherits fontSize, but you can overwrite with size param (or sx).
+  </Text>
+);
+InsideText.args = args;

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

@@ -1,10 +1,14 @@
+import { textSizes } from '../../Foundations/Typography/Typography';
+
 const LinkTheme = {
   baseStyle: {
     color: 'text.link',
+    fontSize: 'inherit',
     _hover: {
       color: 'text.linkHover',
     },
   },
+  ...textSizes,
 };
 
 export default LinkTheme;

package/src/Components/Link/Link.tsx

@@ -1,9 +1,11 @@
 import { Link as ChakraLink, LinkProps } from '@chakra-ui/react';
+import { TextSizes } from '../Text/Text';
 
 export interface Props {
   children: LinkProps['children'];
   href: string;
   isUnderlined?: boolean;
+  size?: TextSizes;
   sx?: LinkProps['sx'];
   target?: '_blank' | '_parent' | '_self' | '_top';
 }

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,38 +1,5 @@
-const TextTheme = {
-  sizes: {
-    1: {
-      fontSize: '1',
-      lineHeight: '1',
-    },
-    2: {
-      fontSize: '2',
-      lineHeight: '2',
-    },
-    3: {
-      fontSize: '3',
-      lineHeight: '3',
-    },
-    4: {
-      fontSize: '4',
-      lineHeight: '4',
-    },
-    5: {
-      fontSize: '5',
-      lineHeight: '5',
-    },
-    6: {
-      fontSize: '6',
-      lineHeight: '6',
-    },
-    7: {
-      fontSize: '7',
-      lineHeight: '7',
-    },
-    8: {
-      fontSize: '8',
-      lineHeight: '8',
-    },
-  },
-};
+import { textSizes } from '../../Foundations/Typography/Typography';
+
+const TextTheme = textSizes;
 
 export default TextTheme;

package/src/Components/Text/Text.tsx

@@ -34,6 +34,8 @@ type TextTags =
   | 'time'
   | 'var';
 
+export type TextSizes = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
+
 export interface Props {
   align?: 'center' | 'justify' | 'left' | 'right';
   /**
@@ -51,7 +53,7 @@ export interface Props {
   /**
    * Size config (https://www.figma.com/file/grik9mTaJ5DfhydhWhXdP5/Bitkit-Foundations?node-id=211%3A12)
    */
-  size?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
+  size?: TextSizes;
   sx?: TextProps['sx'];
   textTransform?: 'capitalize' | 'lowercase' | 'none' | 'uppercase';
 }

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/Foundations/Typography/Typography.ts

@@ -29,4 +29,41 @@ const typography = {
   },
 };
 
+export const textSizes = {
+  sizes: {
+    1: {
+      fontSize: '1',
+      lineHeight: '1',
+    },
+    2: {
+      fontSize: '2',
+      lineHeight: '2',
+    },
+    3: {
+      fontSize: '3',
+      lineHeight: '3',
+    },
+    4: {
+      fontSize: '4',
+      lineHeight: '4',
+    },
+    5: {
+      fontSize: '5',
+      lineHeight: '5',
+    },
+    6: {
+      fontSize: '6',
+      lineHeight: '6',
+    },
+    7: {
+      fontSize: '7',
+      lineHeight: '7',
+    },
+    8: {
+      fontSize: '8',
+      lineHeight: '8',
+    },
+  },
+};
+
 export default typography;

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>

package/src/Old/Table/TableHeaderCell.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import classnames from 'classnames';
+import Flex from '../Flex/Flex';
 import Icon from '../Icon/Icon';
 import Text, { Props as TextProps } from '../Text/Text';
 import Visibility from '../Visibility/Visibility';
 import VisibilityContainer from '../Visibility/VisibilityContainer';
-import Flex from '../Flex/Flex';
 
 export type TypeTableSort = 'asc' | 'desc';