@bitrise/bitkit 9.3.0-alpha.3 → 9.3.1

package/src/Notification/Notification.tsx

@@ -7,12 +7,7 @@ import Link from '../Link/Link';
 import ProgressSpinner from '../Progress/ProgressSpinner';
 import './Notification.css';
 
-type TypeNotificationType =
-  'alert' |
-  'inform' |
-  'progress' |
-  'success' |
-  'warning';
+type TypeNotificationType = 'alert' | 'inform' | 'progress' | 'success' | 'warning';
 
 export interface Props extends FlexProps {
   /**
@@ -45,44 +40,29 @@ const defaultIcons: {
  * Notification component used to inform the user of something important.
  */
 const Notification: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    children,
-    onRemove,
-    type,
-    icon,
-    className,
-    ...rest
-  } = props;
+  const { children, onRemove, type, icon, className, ...rest } = props;
 
   const classes = classnames('Notification', `Notification--type-${type}`, className);
   const defaultIcon = defaultIcons[type];
 
   return (
-    <Flex { ...rest }
-        alignChildrenVertical="middle"
-        className={ classes }
-        direction="horizontal"
-        gap="x2"
-        padding="x3">
-      { (icon || defaultIcon || type === 'progress') && (
-        <Flex>
-          { type === 'progress'
-            ? <ProgressSpinner />
-            : <Icon name={ icon || defaultIcon } /> }
-        </Flex>
-      ) }
+    <Flex {...rest} alignChildrenVertical="middle" className={classes} direction="horizontal" gap="x2" padding="x3">
+      {(icon || defaultIcon || type === 'progress') && (
+        <Flex>{type === 'progress' ? <ProgressSpinner /> : <Icon name={icon || defaultIcon} />}</Flex>
+      )}
 
       <Flex grow shrink>
-        { children }
+        {children}
       </Flex>
 
-      { onRemove && (
+      {onRemove && (
         <Flex>
-          <Link clickable onClick={ onRemove }>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <Link clickable onClick={onRemove}>
             <Icon name="CloseSmall" />
           </Link>
         </Flex>
-      ) }
+      )}
     </Flex>
   );
 };

package/src/Placement/Placement.css

@@ -76,11 +76,11 @@
 }
 
 .Placement__area--horizontal .Placement__area:not(:last-child) {
-  border-right: 0.0625rem solid var(--bitkit-colors-gray-2);
+  border-right: 0.0625rem solid var(--color-gray--2);
 }
 
 .Placement__area--vertical .Placement__area:not(:last-child) {
-  border-top: 0.0625rem solid var(--bitkit-colors-gray-2);
+  border-top: 0.0625rem solid var(--color-gray--2);
 }
 
 .Placement__arrow {

package/src/Placement/Placement.tsx

@@ -1,8 +1,5 @@
 import * as React from 'react';
-import {
-  Placement as TypePlacement,
-  ReferenceObject as TypeReferenceObject,
-} from 'popper.js';
+import { Placement as TypePlacement, ReferenceObject as TypeReferenceObject } from 'popper.js';
 import { Props as BaseProps } from '../Base/Base';
 import { ModalContext } from '../Modal/ModalContext';
 import PlacementPopper from './PlacementPopper';
@@ -20,15 +17,12 @@ export interface Props extends BaseProps {
    * and the width of the target that is being positioned
    * around.
    */
-  children: (props: {
-    scheduleUpdate: () => void;
-    width?: number;
-  }) => React.ReactNode;
+  children: (props: { scheduleUpdate: () => void; width?: number }) => React.ReactNode;
   /**
    * Flag that disables margin around the Placement.
    */
-   disableMargin?: boolean | 'top-bottom' | 'left-right';
-   /**
+  disableMargin?: boolean | 'top-bottom' | 'left-right';
+  /**
    * Flag that disables repositioning on scroll and resize events.
    */
   disableReposition?: boolean;
@@ -75,11 +69,7 @@ export interface Props extends BaseProps {
 const Placement: React.FunctionComponent<Props> = (props: Props) => {
   return (
     <ModalContext.Consumer>
-      { ({ modalElement }) => (
-        <PlacementPopper { ...props }
-            closeElement={ modalElement }
-            isInsideModal={ !!modalElement } />
-      ) }
+      {({ modalElement }) => <PlacementPopper {...props} closeElement={modalElement} isInsideModal={!!modalElement} />}
     </ModalContext.Consumer>
   );
 };

package/src/Placement/PlacementArea.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
-import PlacementArrow from '../Placement/PlacementArrow';
+import PlacementArrow from './PlacementArrow';
 
 export interface Props extends FlexProps {
   /**
@@ -23,31 +23,24 @@ export interface Props extends FlexProps {
  * when the content should be divided (see direction prop).
  */
 const PlacementArea: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    children,
-    direction,
-    padding,
-    paddingHorizontal,
-    paddingVertical,
-    withArrow,
-    ...rest
-  } = props;
+  const { children, direction, padding, paddingHorizontal, paddingVertical, withArrow, ...rest } = props;
 
   const classes = classnames('Placement__area', {
     [`Placement__area--${direction}`]: direction,
   });
 
   return (
-    <Flex { ...rest } className={ classes }>
-      { withArrow && <PlacementArrow /> }
+    <Flex {...rest} className={classes}>
+      {withArrow && <PlacementArrow />}
 
       <Flex
-          className="Placement__area-content"
-          direction={ direction }
-          padding={ padding }
-          paddingHorizontal={ paddingHorizontal }
-          paddingVertical={ paddingVertical }>
-        { children }
+        className="Placement__area-content"
+        direction={direction}
+        padding={padding}
+        paddingHorizontal={paddingHorizontal}
+        paddingVertical={paddingVertical}
+      >
+        {children}
       </Flex>
     </Flex>
   );

package/src/Placement/PlacementArrow.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Base, { Props as BaseProps } from '../Base/Base';
 import { PlacementArrowPropsContext } from './PlacementArrowPropsContext';
 
-export interface Props extends BaseProps {}
+export type Props = BaseProps;
 
 /**
  * The dynamically positioned arrow/tip.
@@ -10,13 +10,9 @@ export interface Props extends BaseProps {}
 const PlacementArrow: React.FunctionComponent<Props> = (props: Props) => {
   return (
     <PlacementArrowPropsContext.Consumer>
-      { ({ backgroundColor, ref, style }) => (
-        <Base { ...props }
-            backgroundColor={ backgroundColor }
-            className="Placement__arrow"
-            innerRef={ ref }
-            style={ style } />
-      ) }
+      {({ backgroundColor, ref, style }) => (
+        <Base {...props} backgroundColor={backgroundColor} className="Placement__arrow" innerRef={ref} style={style} />
+      )}
     </PlacementArrowPropsContext.Consumer>
   );
 };

package/src/Placement/PlacementManager.tsx

@@ -4,7 +4,7 @@ import { PlacementManagerContext } from './PlacementManagerContext';
 
 const { useState } = React;
 
-export interface Props extends ManagerProps {}
+export type Props = ManagerProps;
 
 /**
  * The manager component handles the ref communication between
@@ -14,12 +14,11 @@ const PlacementManager: React.FunctionComponent<Props> = (props: Props) => {
   const [referenceNode, setReferenceNode] = useState<null | HTMLElement>(null);
 
   return (
-    <PlacementManagerContext.Provider value={ { referenceNode, setReferenceNode } }>
-      <Manager { ...props } />
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    <PlacementManagerContext.Provider value={{ referenceNode, setReferenceNode }}>
+      <Manager {...props} />
     </PlacementManagerContext.Provider>
   );
 };
 
 export default PlacementManager;
-
-

package/src/Placement/PlacementPopper.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import {
-  Placement as TypePlacement,
-  ReferenceObject as TypeReferenceObject,
-} from 'popper.js';
+import { Placement as TypePlacement, ReferenceObject as TypeReferenceObject } from 'popper.js';
 import { Popper, PopperProps } from 'react-popper';
 import { CSSTransition } from 'react-transition-group';
 import classnames from 'classnames';
@@ -30,10 +27,7 @@ const transitionClasses = {
 
 export interface Props extends BaseProps {
   animatePosition?: boolean;
-  children: (props: {
-    scheduleUpdate: () => void;
-    width?: number;
-  }) => React.ReactNode;
+  children: (props: { scheduleUpdate: () => void; width?: number }) => React.ReactNode;
   closeElement?: null | HTMLElement;
   disableMargin?: boolean | 'top-bottom' | 'left-right';
   disableReposition?: boolean;
@@ -73,17 +67,27 @@ const PlacementPopper: React.FunctionComponent<Props> = (props: Props) => {
     }
   }, [visible]);
 
-  useEventListener(closeElement || document, 'click', (event) => {
-    if (onClose && ref.current && !ref.current.contains(event.target as Node)) {
-      onClose(event as MouseEvent);
-    }
-  }, [onClose]);
+  useEventListener(
+    closeElement || document,
+    'click',
+    (event) => {
+      if (onClose && ref.current && !ref.current.contains(event.target as Node)) {
+        onClose(event as MouseEvent);
+      }
+    },
+    [onClose],
+  );
 
-  useEventListener(ref.current || null, 'transitionend', () => {
-    if (!visible) {
-      setRender(false);
-    }
-  }, [visible]);
+  useEventListener(
+    ref.current || null,
+    'transitionend',
+    () => {
+      if (!visible) {
+        setRender(false);
+      }
+    },
+    [visible],
+  );
 
   if (!render) {
     return null;
@@ -109,33 +113,31 @@ const PlacementPopper: React.FunctionComponent<Props> = (props: Props) => {
   }
 
   return createPortal(
-    <Popper { ...popperProps } innerRef={ (el) => ref.current = el || null }>
-      { ({ arrowProps, placement, ref, scheduleUpdate, style }) =>
-        <PlacementArrowPropsContext.Provider value={ { ...arrowProps, backgroundColor } }>
+    // eslint-disable-next-line no-return-assign
+    <Popper {...popperProps} innerRef={(el) => (ref.current = el || null)}>
+      {/* eslint-disable-next-line @typescript-eslint/no-shadow */}
+      {({ arrowProps, placement, ref, scheduleUpdate, style }) => (
+        // eslint-disable-next-line react/jsx-no-constructed-context-values
+        <PlacementArrowPropsContext.Provider value={{ ...arrowProps, backgroundColor }}>
           <div
-              className={ classnames('Placement', `Placement--${placement}`, {
-                'Placement--above-modal': isInsideModal,
-                'Placement--animate': animatePosition,
-                'Placement--disable-margin': disableMargin === true,
-                'Placement--disable-margin-top-bottom': disableMargin === 'top-bottom',
-                'Placement--disable-margin-left-right': disableMargin === 'left-right',
-              }) }
-              ref={ ref }
-              style={ style }>
-            <CSSTransition
-                appear={ visible }
-                classNames={ transitionClasses }
-                in={ visible }
-                timeout={ timeout }>
+            className={classnames('Placement', `Placement--${placement}`, {
+              'Placement--above-modal': isInsideModal,
+              'Placement--animate': animatePosition,
+              'Placement--disable-margin': disableMargin === true,
+              'Placement--disable-margin-top-bottom': disableMargin === 'top-bottom',
+              'Placement--disable-margin-left-right': disableMargin === 'left-right',
+            })}
+            ref={ref}
+            style={style}
+          >
+            <CSSTransition appear={visible} classNames={transitionClasses} in={visible} timeout={timeout}>
               <div className="Placement__content">
-                <Base { ...rest }
-                    backgroundColor={ backgroundColor }
-                    className="Placement__shadow">
+                <Base {...rest} backgroundColor={backgroundColor} className="Placement__shadow">
                   <PlacementManagerContext.Consumer>
-                    { ({ referenceNode }) =>
+                    {({ referenceNode }) =>
                       children({
-                        scheduleUpdate: scheduleUpdate,
-                        width: referenceNode && referenceNode.clientWidth || undefined,
+                        scheduleUpdate,
+                        width: (referenceNode && referenceNode.clientWidth) || undefined,
                       })
                     }
                   </PlacementManagerContext.Consumer>
@@ -144,9 +146,9 @@ const PlacementPopper: React.FunctionComponent<Props> = (props: Props) => {
             </CSSTransition>
           </div>
         </PlacementArrowPropsContext.Provider>
-      }
+      )}
     </Popper>,
-    document.body
+    document.body,
   );
 };
 

package/src/Placement/PlacementReference.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Reference, ReferenceProps } from 'react-popper';
 import { PlacementManagerContext } from './PlacementManagerContext';
 
-export interface Props extends ReferenceProps {}
+export type Props = ReferenceProps;
 
 /**
  * The reference component handles setting the target element ref with the
@@ -11,9 +11,7 @@ export interface Props extends ReferenceProps {}
 const PlacementReference: React.FunctionComponent<Props> = (props: Props) => {
   return (
     <PlacementManagerContext.Consumer>
-      { ({ setReferenceNode }) => (
-        <Reference { ...props } innerRef={ setReferenceNode } />
-      ) }
+      {({ setReferenceNode }) => <Reference {...props} innerRef={setReferenceNode} />}
     </PlacementManagerContext.Consumer>
   );
 };

package/src/Progress/ProgressBar.tsx

@@ -21,37 +21,31 @@ export interface Props extends BaseProps {
  * A determinate progress indicatior
  */
 const ProgressBar: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    borderRadius,
-    foregroundColor,
-    height,
-    progress,
-    stripeColor,
-    ...rest
-  } = props;
+  const { borderRadius, foregroundColor, height, progress, stripeColor, ...rest } = props;
 
   const classes = classnames('ProgressBar', {
     'ProgressBar--striped': stripeColor,
   });
 
-  const progressClamped = React.useMemo(() =>
-    Math.max(0, Math.min(progress * 100, 100))
-  , [progress]);
+  const progressClamped = React.useMemo(() => Math.max(0, Math.min(progress * 100, 100)), [progress]);
 
   return (
-    <Base { ...rest }
-        borderRadius={ borderRadius }
-        className={ classes }
-        height={ height }
-        style={ {
-          '--ProgressBar--height': height,
-          '--ProgressBar--stripe-color': stripeColor ? colorMap[stripeColor] : '',
-        } }>
+    <Base
+      {...rest}
+      borderRadius={borderRadius}
+      className={classes}
+      height={height}
+      style={{
+        '--ProgressBar--height': height,
+        '--ProgressBar--stripe-color': stripeColor ? colorMap[stripeColor] : '',
+      }}
+    >
       <Base
-          backgroundColor={ foregroundColor }
-          borderRadius={ borderRadius }
-          className="ProgressBar__progress"
-          width={ `${progressClamped}%` }/>
+        backgroundColor={foregroundColor}
+        borderRadius={borderRadius}
+        className="ProgressBar__progress"
+        width={`${progressClamped}%`}
+      />
     </Base>
   );
 };