@bitrise/bitkit 9.4.1-alpha.2 → 9.4.1-beta.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.4.1-alpha.2",
+  "version": "9.4.1-beta.3",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "lib/cjs/index.js",
   "esnext": "lib/esn/index.js",
@@ -27,28 +27,21 @@
     "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",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "test": "jest ./src"
   },
   "alias": {
-    "@bitrise/bitkit": "./src",
-    "framer-motion": "./node_modules/framer-motion/dist/cjs"
+    "@bitrise/bitkit": "./src"
   },
   "dependencies": {
-    "@chakra-ui/react": "^1.8.6",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
     "@juggle/resize-observer": "^3.3.1",
+    "@popperjs/core": "^2.11.4",
     "classnames": "^2.3.1",
     "clipboard": "^2.0.10",
-    "framer-motion": "^6",
     "luxon": "^2.3.1",
     "normalize.css": "^8.0.1",
-    "popper.js": "^1.14.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-popper": "^1.3.11",
+    "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.2"
   },
   "peerDependencies": {
@@ -56,21 +49,13 @@
     "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",
+    "@commitlint/cli": "^16.2.3",
+    "@commitlint/config-conventional": "^16.2.1",
+    "@gkz/ast-types": "^0.14.4",
     "@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",
@@ -86,28 +71,25 @@
     "@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.15.0",
-    "@typescript-eslint/parser": "^5.15.0",
+    "@typescript-eslint/eslint-plugin": "^5.16.0",
+    "@typescript-eslint/parser": "^5.16.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
-    "autoprefixer": "^9",
+    "autoprefixer": "^9.8.8",
     "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.2.3",
     "chokidar-cli": "^3.0.0",
-    "concurrently": "^4.1.2",
-    "csstype": "3.0.9",
+    "concurrently": "^7.0.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
     "eslint": "^8.11.0",
     "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jest": "^26.1.2",
+    "eslint-plugin-jest": "^26.1.3",
     "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",
+    "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
     "jsdom": "^19.0.0",
@@ -119,26 +101,20 @@
     "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",
+    "semantic-release": "^19.0.2",
     "stylelint": "^14.6.0",
     "stylelint-order": "^5.0.0",
     "superstatic": "^7.1.0",
     "ts-jest": "^27.1.3",
     "ts-node": "^10.7.0",
-    "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.6.2",
-    "webpack": "^5.70.0"
+    "typescript": "^4.6.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
-  },
   "jest": {
     "moduleNameMapper": {
       "^.+\\.css$": "identity-obj-proxy"
@@ -151,6 +127,6 @@
     }
   },
   "resolutions": {
-    "@types/react": "17.0.40"
+    "**/ast-types": "npm:@gkz/ast-types"
   }
 }

package/postcss.config.js

@@ -1,9 +1,13 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const autoprefixer = require('autoprefixer');
+const postcssPresetEnv = require('postcss-preset-env');
+
 module.exports = {
-  'plugins': [
-    require('autoprefixer'),
-    require('postcss-preset-env')({
-      'stage': 3,
-      'features': {
+  plugins: [
+    autoprefixer(),
+    postcssPresetEnv({
+      stage: 3,
+      features: {
         'custom-properties': false,
         'nesting-rules': true,
       },

package/release.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  branches: ['master', { name: 'alpha', prerelease: true }],
+  branches: ['master', { name: 'alpha', prerelease: true }, { name: 'beta', prerelease: true }],
   plugins: [
     [
       '@semantic-release/commit-analyzer',
@@ -11,6 +11,7 @@ module.exports = {
           { type: 'perf', release: 'patch' },
           { type: 'style', release: 'patch' },
           { type: 'chore', release: 'patch' },
+          { type: 'test', release: 'patch' },
         ],
       },
     ],

package/site/components/Documentation/Components/SectionButtons.tsx

@@ -376,22 +376,55 @@ const SectionButtons = () => {
           <ButtonWithDropdown
             items={[
               {
+                key: '1',
                 component: 'button',
                 icon: 'Percent',
-                text: 'Refer your friends',
+                content: 'Refer your friends',
               },
               {
+                key: '2',
                 component: 'a',
                 icon: 'Settings',
-                text: 'Account setings',
+                content: 'Account setings',
               },
               {
+                key: '3',
                 icon: 'ChangePlan',
-                text: 'Change plan',
+                content: 'Change plan',
               },
               {
+                key: '4',
                 icon: 'Logout',
-                text: 'Log out',
+                content: 'Log out',
+              },
+            ]}
+          >
+            <Icon name="Bitbot" />
+            <Text>Account</Text>
+          </ButtonWithDropdown>
+          <ButtonWithDropdown
+            items={[
+              {
+                key: '1',
+                component: 'button',
+                icon: 'Percent',
+                content: 'Refer your friends',
+              },
+              {
+                key: '2',
+                component: 'a',
+                icon: 'Settings',
+                content: 'Account setings',
+              },
+              {
+                key: '3',
+                icon: 'ChangePlan',
+                content: 'Change plan',
+              },
+              {
+                key: '4',
+                icon: 'Logout',
+                content: 'Log out',
               },
             ]}
           >

package/site/components/Documentation/Components/SectionDropdowns.tsx

@@ -4,7 +4,6 @@ import {
   DropdownMenu,
   DropdownMenus,
   DropdownMenuItem,
-  DropdownMenuItemGroup,
   Flex,
   Icon,
   Placement,
@@ -245,6 +244,7 @@ const SectionDropdown = () => {
                 setSelectedItem(undefined);
                 handleToggle3();
               }}
+              sameWidth
               visible={visible3}
             >
               {() => (

package/site/components/Documentation/Components/SectionPlacement.tsx

@@ -21,7 +21,9 @@ const SectionPlacement = () => {
   const [selectedTab, setSelectedTab] = useState(1);
   const [ref, setRef] = useState<SVGSVGElement>();
 
-  const handleToggle = () => setVisible(!visible);
+  const handleToggle = () => {
+    setVisible(!visible);
+  };
 
   return (
     <Section>
@@ -39,6 +41,7 @@ const SectionPlacement = () => {
         <>
           <PlacementManager>
             <PlacementReference>
+              {/* eslint-disable-next-line @typescript-eslint/no-shadow */}
               {({ ref }) => (
                 <Button innerRef={ref} level="primary" onClick={handleToggle}>
                   <Icon name="More" />

package/src/ButtonWithDropdown/ButtonWithDropdown.tsx

@@ -10,14 +10,18 @@ import {
   PlacementManager,
   PlacementProps,
   PlacementReference,
+  BaseProps,
 } from '@bitrise/bitkit';
 
 export interface ItemProps extends DropdownMenuItemProps {
+  key: string;
   component?: string;
   disabled?: boolean;
   href?: string;
+  onClick?: (e?: any) => void;
   target?: string;
-  text: string;
+  content: React.ReactNode;
+  textColor?: BaseProps['textColor'];
 }
 
 export interface Props {
@@ -28,46 +32,39 @@ export interface Props {
   placementProps?: PlacementProps;
 }
 
-const ButtonWithDropdown = ({
-  buttonProps = {},
-  children,
-  dropdownWidth,
-  items,
-  placementProps,
-}: Props): JSX.Element => {
+const ButtonWithDropdown = ({ buttonProps, children, dropdownWidth, items, placementProps }: Props): JSX.Element => {
   const [visible, setVisible] = React.useState(false);
 
+  const onButtonClick = () => {
+    setVisible(!visible);
+  };
+
   return (
     <PlacementManager>
       <PlacementReference>
         {({ ref }) => (
-          <Button innerRef={ref} onClick={() => setVisible(true)} {...buttonProps}>
+          <Button innerRef={ref} {...buttonProps} onClick={onButtonClick}>
             {children}
             <Icon name="ChevronDown" />
           </Button>
         )}
       </PlacementReference>
-      {!buttonProps.disabled && (
-        <Placement
-          disableMargin="left-right"
-          onClose={() => setVisible(false)}
-          placement="bottom-end"
-          visible={visible}
-          {...placementProps}
-        >
+      {!buttonProps?.disabled && (
+        <Placement onClose={() => setVisible(false)} placement="bottom-end" visible={visible} {...placementProps}>
           {() => (
             <DropdownMenu width={dropdownWidth} withArrow>
-              {items.map(({ component, disabled, href, icon, onClick, target, text }) => (
+              {items.map(({ key, component, disabled, href, icon, onClick, target, content, textColor }) => (
                 <DropdownMenuItem
-                  Component={component || 'div'}
+                  Component={component || 'button'}
                   disabled={disabled}
                   href={href}
                   icon={icon}
-                  key={text}
                   onClick={onClick}
+                  key={key}
                   target={target}
+                  textColor={textColor}
                 >
-                  {text}
+                  {content}
                 </DropdownMenuItem>
               ))}
             </DropdownMenu>

package/src/Dropdown/Dropdown.tsx

@@ -41,17 +41,15 @@ const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
   const { children, options, onChange, selected, maxHeight, ...rest } = props;
   const [visible, setVisible] = useState(false);
 
-  const handleToggleVisible = () => setVisible(!visible);
-
   const handleChange = (value: DropdownValue) => {
     if (onChange) {
       onChange(value);
     }
-    handleToggleVisible();
+    setVisible(false);
   };
 
   const renderOption = ({ text, value }: Option) => (
-    <DropdownMenuItem onClick={() => handleChange(value)} selected={selected === value}>
+    <DropdownMenuItem onClick={() => handleChange(value)} selected={selected === value} width="100%">
       {text}
     </DropdownMenuItem>
   );
@@ -60,15 +58,22 @@ const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
     <PlacementManager>
       <PlacementReference>
         {({ ref }) => (
-          <DropdownButton {...rest} alignChildrenHorizontal="start" innerRef={ref} onClick={handleToggleVisible}>
+          <DropdownButton
+            {...rest}
+            alignChildrenHorizontal="start"
+            innerRef={ref}
+            onClick={() => {
+              setVisible(!visible);
+            }}
+          >
             <Text ellipsis>{children}</Text>
           </DropdownButton>
         )}
       </PlacementReference>
 
-      <Placement onClose={handleToggleVisible} visible={visible}>
-        {({ width }) => (
-          <DropdownMenu maxHeight={maxHeight} width={width}>
+      <Placement onClose={() => setVisible(false)} sameWidth timeout={0} visible={visible}>
+        {() => (
+          <DropdownMenu maxHeight={maxHeight} width="100%">
             {options.map((option) => (
               <React.Fragment key={option.text}>
                 {'options' in option ? (

package/src/Placement/Placement.css

@@ -1,29 +1,10 @@
 
-:root {
-  --Placement-arrow-size: var(--size--x3);
-}
-
 .Placement {
   position: absolute;
-  margin: var(--Placement-arrow-size);
   z-index: var(--z-index-Placement--below-modal);
   pointer-events: none;
 }
 
-.Placement--disable-margin {
-  margin: 0;
-}
-
-.Placement--disable-margin-top-bottom {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.Placement--disable-margin-left-right {
-  margin-right: 0;
-  margin-left: 0;
-}
-
 .Placement--animate {
   transition-property: transform;
   transition-duration: var(--transition-duration--fast);
@@ -83,50 +64,51 @@
   border-top: 0.0625rem solid var(--color-gray--2);
 }
 
-.Placement__arrow {
+.Placement__arrow,
+.Placement__arrow::before {
   position: absolute;
-  width: var(--Placement-arrow-size);
-  height: var(--Placement-arrow-size);
+  width: var(--size--x3);
+  height: var(--size--x3);
 }
 
 .Placement__arrow,
 .Placement__arrow:first-child,
 .Placement__arrow:last-child {
-  margin: var(--Placement-arrow-size);
+  visibility: hidden;
+}
+
+.Placement__arrow::before {
+  content: '';
+  display: block;
+  transform: rotate(45deg);
+  background: inherit;
+  visibility: visible;
 }
 
 .Placement--top .Placement__arrow,
 .Placement--top-start .Placement__arrow,
 .Placement--top-end .Placement__arrow {
   top: 100%;
-  transform:
-    translateY(calc(-50% + var(--Placement-arrow-size) * -1))
-    rotate(45deg);
+  margin-top: -0.375rem;
 }
 
 .Placement--right .Placement__arrow,
 .Placement--right-start .Placement__arrow,
 .Placement--right-end .Placement__arrow {
   right: 100%;
-  transform:
-    translateX(calc(50% - var(--Placement-arrow-size) * -1))
-    rotate(45deg);
+  margin-right: -0.375rem;
 }
 
 .Placement--bottom .Placement__arrow,
 .Placement--bottom-start .Placement__arrow,
 .Placement--bottom-end .Placement__arrow {
   bottom: 100%;
-  transform:
-    translateY(calc(50% - var(--Placement-arrow-size) * -1))
-    rotate(45deg);
+  margin-bottom: -0.375rem;
 }
 
 .Placement--left .Placement__arrow,
 .Placement--left-start .Placement__arrow,
 .Placement--left-end .Placement__arrow {
   left: 100%;
-  transform:
-    translateX(calc(-50% + var(--Placement-arrow-size) * -1))
-    rotate(45deg);
+  margin-left: -0.375rem;
 }

package/src/Placement/Placement.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Placement as TypePlacement, ReferenceObject as TypeReferenceObject } from 'popper.js';
+import { Placement as TypePlacement } from '@popperjs/core';
 import { Props as BaseProps } from '../Base/Base';
 import { ModalContext } from '../Modal/ModalContext';
 import PlacementPopper from './PlacementPopper';
@@ -13,15 +13,11 @@ export interface Props extends BaseProps {
   animatePosition?: boolean;
   /**
    * A render callback function that provides a
-   * scheduleUpdate function to trigger a reposition,
+   * update function to trigger a reposition,
    * and the width of the target that is being positioned
    * around.
    */
-  children: (props: { scheduleUpdate: () => void; width?: number }) => React.ReactNode;
-  /**
-   * Flag that disables margin around the Placement.
-   */
-  disableMargin?: boolean | 'top-bottom' | 'left-right';
+  children: (props: { update: () => void; width?: number }) => React.ReactNode;
   /**
    * Flag that disables repositioning on scroll and resize events.
    */
@@ -45,7 +41,8 @@ export interface Props extends BaseProps {
   /**
    * An optional reference element to be used as the target.
    */
-  referenceElement?: TypeReferenceObject;
+  referenceElement?: any;
+  sameWidth?: boolean;
   /**
    * The visibilty of the positioned content.
    */