@bitrise/bitkit 9.6.1-alpha-chakra.1 → 9.7.0-alpha-chakra.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.6.1-alpha-chakra.1",
+  "version": "9.7.0-alpha-chakra.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -40,8 +40,10 @@
     "@types/react-transition-group": "^4.4.4",
     "classnames": "^2.3.1",
     "clipboard": "^2.0.10",
-    "framer-motion": "^6.2.9",
-    "luxon": "^2.3.1",
+    "framer-motion": "^6.3.1",
+    "luxon": "^2.3.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.2"
   },
@@ -55,27 +57,27 @@
     "@chakra-ui/cli": "^1.9.0",
     "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
-    "@google-cloud/storage": "^5.19.1",
+    "@google-cloud/storage": "^5.19.3",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-actions": "^6.4.21",
-    "@storybook/addon-essentials": "^6.4.21",
-    "@storybook/addon-interactions": "^6.4.21",
-    "@storybook/addon-links": "^6.4.21",
-    "@storybook/addons": "^6.4.21",
-    "@storybook/builder-webpack5": "^6.4.21",
-    "@storybook/manager-webpack5": "^6.4.21",
-    "@storybook/react": "^6.4.21",
-    "@storybook/testing-library": "^0.0.9",
-    "@storybook/theming": "^6.4.21",
+    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-interactions": "^6.4.22",
+    "@storybook/addon-links": "^6.4.22",
+    "@storybook/addons": "^6.4.22",
+    "@storybook/builder-webpack5": "^6.4.22",
+    "@storybook/manager-webpack5": "^6.4.22",
+    "@storybook/react": "^6.4.22",
+    "@storybook/testing-library": "^0.0.11",
+    "@storybook/theming": "^6.4.22",
     "@svgr/cli": "^6.2.1",
     "@types/cheerio": "^0.22.31",
     "@types/clipboard": "^2.0.1",
     "@types/enzyme": "^3.10.12",
     "@types/jest": "^27.4.1",
-    "@types/lodash.sample": "^4.2.6",
-    "@types/lodash.shuffle": "^4.2.6",
+    "@types/lodash.sample": "^4.2.7",
+    "@types/lodash.shuffle": "^4.2.7",
     "@types/luxon": "^2.3.1",
     "@types/prismjs": "^1.26.0",
     "@types/react": "17.0.44",
@@ -84,13 +86,12 @@
     "@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.18.0",
-    "@typescript-eslint/parser": "^5.18.0",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
-    "autoprefixer": "^9.8.8",
     "axios": "^0.26.1",
     "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.2.4",
+    "babel-loader": "^8.2.5",
     "babel-plugin-polyfill-corejs2": "^0.3.1",
     "chokidar-cli": "^3.0.0",
     "concurrently": "^7.1.0",
@@ -103,8 +104,8 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.4.0",
-    "eslint-plugin-storybook": "^0.5.8",
-    "eslint-plugin-testing-library": "^5.2.1",
+    "eslint-plugin-storybook": "^0.5.11",
+    "eslint-plugin-testing-library": "^5.3.1",
     "fscreen": "^1.2.0",
     "glob": "^8.0.1",
     "husky": "^7.0.4",
@@ -116,12 +117,12 @@
     "node-watch": "^0.7.3",
     "parcel-bundler": "^1.12.0",
     "prettier": "^2.6.2",
-    "prismjs": "^1.27.0",
+    "prismjs": "^1.28.0",
     "react": "^17.0.2",
     "react-docgen": "5.4.0",
     "react-dom": "^17.0.2",
-    "react-router": "^5.2.1",
-    "react-router-dom": "^5.3.0",
+    "react-router": "^5.3.1",
+    "react-router-dom": "^5.3.1",
     "semantic-release": "^19.0.2",
     "superstatic": "^7.1.0",
     "ts-jest": "^27.1.4",
@@ -147,5 +148,9 @@
     "transform": {
       "\\.tsx?$": "ts-jest"
     }
+  },
+  "resolutions": {
+    "**/ast-types": "npm:@gkz/ast-types",
+    "@types/react": "17.0.40"
   }
 }

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

@@ -0,0 +1,23 @@
+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({});
+const sx = {
+  backgroundColor: 'brand.primary',
+  color: 'neutral.95',
+  padding: '12',
+  width: '100%',
+};
+WithProps.args = {
+  as: 'div',
+  className: '',
+  children: 'This is the Box',
+  sx,
+};

package/src/Components/Box/Box.tsx

@@ -0,0 +1,19 @@
+import { Box as ChakraBox, BoxProps } from '@chakra-ui/react';
+
+export interface Props {
+  as?: BoxProps['as'];
+  children?: BoxProps['children'];
+  className?: BoxProps['className'];
+  sx?: BoxProps['sx'];
+}
+
+/**
+ * Box is the most abstract component on top of which all other components are built. By default, it renders a div element.
+ *
+ * And this is our CSS-in-JS component, you can use this with `sx` prop to style anything.
+ */
+const Box = (props: Props) => {
+  return <ChakraBox {...props} />;
+};
+
+export default Box;

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

@@ -0,0 +1,23 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { sortObjectByKey } from '@/utils/storyUtils';
+import Button from './Button';
+
+export default {
+  title: 'Components/Button (WIP)',
+  component: Button,
+} 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: '',
+  isDanger: false,
+  isDisabled: false,
+  href: '',
+  target: '_self',
+  type: 'button',
+  children: 'Button',
+});

package/src/Components/Button/Button.theme.ts

@@ -0,0 +1,152 @@
+const ButtonTheme = {
+  baseStyle: {
+    border: '0.0625rem solid',
+    borderRadius: '4',
+    fontWeight: 'normal',
+    lineHeight: 3,
+    _disabled: {
+      cursor: 'not-allowed',
+      pointerEvents: 'none',
+    },
+  },
+  variants: {
+    primary: {
+      bgGradient: 'linear(to-b, purple.40, purple.20)',
+      borderColor: 'purple.40',
+      color: 'neutral.95',
+      fontWeight: 'bold',
+      _hover: {
+        bgGradient: 'linear(to-b, purple.30, purple.10)',
+        _disabled: {
+          bgGradient: 'linear(to-b, neutral.80, neutral.70)',
+          borderColor: 'neutral.70',
+        },
+      },
+      _active: {
+        bgGradient: 'linear(to-b, purple.10, purple.10)',
+      },
+      _disabled: {
+        bgGradient: 'linear(to-b, neutral.80, neutral.70)',
+        borderColor: 'neutral.70',
+      },
+    },
+    secondary: {
+      bgGradient: 'linear(to-b, neutral.100, neutral.95)',
+      borderColor: 'neutral.90',
+      color: 'purple.10',
+      _hover: {
+        bgGradient: 'linear(to-b, neutral.95, neutral.93)',
+        _disabled: {
+          bgGradient: 'linear(to-b, neutral.100, neutral.95)',
+          borderColor: 'neutral.90',
+          color: 'neutral.70',
+        },
+      },
+      _active: {
+        bgGradient: 'linear(to-b, purple.10, purple.10)',
+        color: 'neutral.95',
+      },
+      _disabled: {
+        color: 'neutral.70',
+      },
+    },
+    tertiary: {
+      background: 'transparent',
+      borderColor: 'transparent',
+      color: 'purple.50',
+      _hover: {
+        background: 'purple.95',
+        _disabled: {
+          background: 'transparent',
+          borderColor: 'transparent',
+        },
+      },
+      _active: {
+        background: 'purple.10',
+        color: 'neutral.95',
+        _disabled: {
+          color: 'neutral.70',
+        },
+      },
+      _disabled: {
+        color: 'neutral.70',
+      },
+    },
+    'primary--danger': {
+      bgGradient: 'linear(to-b, red.40, red.30)',
+      borderColor: 'red.30',
+      color: 'neutral.100',
+      fontWeight: 'bold',
+      _hover: {
+        bgGradient: 'linear(to-b, red.30, red.20)',
+        _disabled: {
+          bgGradient: 'linear(to-b, neutral.80, neutral.70)',
+          borderColor: 'neutral.70',
+        },
+      },
+      _active: {
+        bgGradient: 'linear(to-b, red.20, red.20)',
+      },
+      _disabled: {
+        bgGradient: 'linear(to-b, neutral.80, neutral.70)',
+        borderColor: 'neutral.70',
+      },
+    },
+    'secondary--danger': {
+      bgGradient: 'linear(to-b, neutral.95, neutral.100)',
+      borderColor: 'neutral.90',
+      color: 'red.50',
+      _hover: {
+        bgGradient: 'linear(to-b, red.93, red.93)',
+        borderColor: 'red.70',
+        _disabled: {
+          bgGradient: 'linear(to-b, neutral.95, neutral.100)',
+          borderColor: 'neutral.90',
+          color: 'neutral.70',
+        },
+      },
+      _active: {
+        bgGradient: 'linear(to-b, red.30, red.30)',
+        color: 'neutral.100',
+      },
+      _disabled: {
+        color: 'neutral.70',
+      },
+    },
+    'tertiary--danger': {
+      background: 'transparent',
+      borderColor: 'transparent',
+      color: 'red.50',
+      _hover: {
+        background: 'red.93',
+        _disabled: {
+          background: 'transparent',
+          color: 'neutral.70',
+        },
+      },
+      _active: {
+        background: 'red.30',
+        color: 'neutral.100',
+      },
+      _disabled: {
+        color: 'neutral.70',
+      },
+    },
+  },
+  sizes: {
+    small: {
+      minWidth: '32',
+      height: '32',
+      fontSize: 2,
+      paddingX: '12',
+    },
+    medium: {
+      minWidth: '48',
+      height: '48',
+      fontSize: 3,
+      paddingX: '16',
+    },
+  },
+};
+
+export default ButtonTheme;

package/src/Components/Button/Button.tsx

@@ -0,0 +1,62 @@
+/* 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';
+
+export interface Props {
+  as?: 'a' | 'button';
+  children: string;
+  className?: string;
+  href?: string;
+  isDanger?: boolean;
+  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';
+}
+
+/**
+ * The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
+ *
+ * TODO:
+ * - Change to Chakra powered Icon component
+ * - ColorButtons
+ */
+const Button = forwardRef<HTMLButtonElement, Props>((props: Props, ref) => {
+  const { as, isDanger, leftIconName, rightIconName, size, variant, ...rest } = props;
+  const properties: ButtonProps = { as, size, ...rest };
+  properties.variant = isDanger ? `${variant}--danger` : variant;
+  if (leftIconName) {
+    properties.leftIcon = <Icon name={leftIconName} />;
+  }
+  if (rightIconName) {
+    properties.rightIcon = <Icon name={rightIconName} />;
+  }
+  if (leftIconName || rightIconName) {
+    properties.iconSpacing = size === 'medium' ? '0.625rem' : '0.375rem';
+  }
+  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/Components/Card/Card.stories.tsx

@@ -1,4 +1,5 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { sortObjectByKey } from '@/utils/storyUtils';
 import Card from './Card';
 
 export default {
@@ -10,8 +11,8 @@ const Template: ComponentStory<typeof Card> = (props) => <Card {...props} />;
 
 export const WithProps = Template.bind({});
 
-WithProps.args = {
+WithProps.args = sortObjectByKey({
   ...Card.defaultProps,
   children: 'The quick brown fox jumps over the lazy dog.',
   className: '',
-};
+});

package/src/Components/Card/Card.tsx

@@ -1,5 +1,5 @@
 import { Box, BoxProps } from '@chakra-ui/react';
-import { Radii } from '@/Foundations/Radii/Radii.theme';
+import { Radii } from '@/Foundations/Radii/Radii';
 import { Shadows } from '@/Foundations/Shadows/Shadows';
 import { Sizes } from '@/Foundations/Sizes/Sizes';
 
@@ -12,10 +12,13 @@ export interface Props {
   sx?: BoxProps['sx'];
 }
 
+/**
+ * Basic container element with default box shadow, border radius and padding.
+ */
 const Card = (props: Props) => {
   const { borderRadius, boxShadow, children, className, padding, sx } = props;
   const style = {
-    backgroundColor: 'neutral.0',
+    backgroundColor: 'neutral.100',
     borderRadius,
     boxShadow,
     padding,

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

@@ -0,0 +1,18 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Box } from '@chakra-ui/react';
+import { sortObjectByKey } from '@/utils/storyUtils';
+import Divider from './Divider';
+
+export default {
+  title: 'Components/Divider',
+  component: Divider,
+} as ComponentMeta<typeof Divider>;
+
+const Template: ComponentStory<typeof Divider> = ({ ...props }) => (
+  <Box sx={{ height: '64' }}>
+    <Divider {...props} />
+  </Box>
+);
+
+export const WithProps = Template.bind({});
+WithProps.args = sortObjectByKey(Divider.defaultProps);

package/src/Components/Divider/Divider.theme.ts

@@ -0,0 +1,19 @@
+const DividerTheme = {
+  baseStyle: {
+    borderColor: 'inherit',
+    color: 'separator.primary',
+  },
+  variants: {
+    dashed: {
+      borderStyle: 'dashed',
+    },
+    dotted: {
+      borderStyle: 'dotted',
+    },
+    solid: {
+      borderStyle: 'solid',
+    },
+  },
+};
+
+export default DividerTheme;

package/src/Components/Divider/Divider.tsx

@@ -0,0 +1,30 @@
+import { Divider as ChakraDivider, DividerProps } from '@chakra-ui/react';
+
+export interface Props {
+  orientation?: DividerProps['orientation'];
+  size?: '1' | '2';
+  sx?: DividerProps['sx'];
+  variant?: 'dashed' | 'dotted' | 'solid';
+}
+
+/**
+ * Dividers are used to visually separate content in a list or group.
+ */
+const Divider = (props: Props) => {
+  const { orientation, size, ...rest } = props;
+  const properties: DividerProps = { ...rest, orientation };
+  if (orientation === 'horizontal') {
+    properties.borderBottomWidth = `${size}px`;
+  } else {
+    properties.borderLeftWidth = `${size}px`;
+  }
+  return <ChakraDivider {...properties} />;
+};
+
+Divider.defaultProps = {
+  orientation: 'horizontal',
+  size: '1',
+  variant: 'solid',
+} as Props;
+
+export default Divider;

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

@@ -0,0 +1,18 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { sortObjectByKey } from '@/utils/storyUtils';
+// import { IconList } from '../../../Icon/tsx';
+import IconButton from './IconButton';
+
+export default {
+  title: 'Components/IconButton (WIP)',
+  component: IconButton,
+} 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/Components/IconButton/IconButton.tsx

@@ -0,0 +1,36 @@
+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';
+
+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' | 'tertiaryDanger';
+}
+
+/**
+ * IconButton composes the `Button` component except that it renders only an icon.
+ *
+ * TODO:
+ * - Change to Chakra powered Icon component
+ */
+const IconButton = 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/Components/Link/Link.stories.tsx

@@ -0,0 +1,18 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { sortObjectByKey } from '@/utils/storyUtils';
+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/Components/Link/Link.theme.ts

@@ -0,0 +1,10 @@
+const LinkTheme = {
+  baseStyle: {
+    color: 'text.link',
+    _hover: {
+      color: 'text.linkHover',
+    },
+  },
+};
+
+export default LinkTheme;

package/src/Components/Link/Link.tsx

@@ -0,0 +1,28 @@
+import { Link as ChakraLink, LinkProps } from '@chakra-ui/react';
+
+export interface Props {
+  children: LinkProps['children'];
+  href: string;
+  isUnderlined?: boolean;
+  sx?: LinkProps['sx'];
+  target?: '_blank' | '_parent' | '_self' | '_top';
+}
+
+/**
+ * Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink and semantically renders an `<a>`
+ */
+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 = {
+  isUnderlined: true,
+} as Props;
+
+export default Link;