@bitrise/bitkit 10.36.0 → 10.36.2

package/src/Old/Flex/Flex.tsx

@@ -1,92 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Base, { Props as BaseProps, TypeSizes } from '../Base/Base';
-import './Flex.css';
-
-export interface Props extends BaseProps {
-  /**
-   * Used on a parent, sets both the horizontal and vertical alignment of flex children.
-   * Must be used in conjuction with the 'direction' prop.
-   * */
-  alignChildren?: 'start' | 'middle' | 'end';
-  /**
-   * Used on a parent, sets both the horizontal alignment of flex children.
-   * Must be used in conjuction with the 'direction' prop.
-   * */
-  alignChildrenHorizontal?: 'start' | 'middle' | 'end' | 'around' | 'between';
-  /**
-   * Used on a parent, sets both the vertical alignment of flex children.
-   * Must be used in conjuction with the 'direction' prop.
-   * */
-  alignChildrenVertical?: 'start' | 'middle' | 'end' | 'around' | 'between' | 'baseline';
-  /**
-   * Set the alignment of a flex child. Must be used inside a parent
-   * using the 'direction' prop.
-   */
-  alignSelf?: 'start' | 'middle' | 'end';
-  /** @ignore */
-  className?: string;
-  /** Used on a parent, activates flex behaviour for children. */
-  direction?: 'horizontal' | 'vertical';
-  /** Used on a parent, reverses the layout direction  */
-  reverse?: boolean;
-  /**
-   * Used on a parent, sets the distances between flex children to
-   * a multiple value. E.g. 'x1'.
-   */
-  gap?: TypeSizes;
-  /** Sets a child to grow from it's initial width. (flex-grow: 1;) */
-  grow?: boolean | 'x1' | 'x2' | 'x3' | 'x4';
-  /** Sets a childs initial width before flex calculations. (flex-basis)  */
-  initial?: 'content' | 'container' | 'none';
-  /** Sets a child to shrink from it's initial width. (flex-shrink: 1;) */
-  shrink?: boolean | 'x1' | 'x2' | 'x3' | 'x4';
-  /** Used on a parent, allows it's children to wrap onto new rows.. */
-  wrap?: boolean;
-}
-
-/**
- * A useful and quick Flex component for handling
- * frequent and common layouts of all sizes.
- */
-const Flex: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    alignChildren,
-    alignChildrenHorizontal = alignChildren,
-    alignChildrenVertical = alignChildren,
-    alignSelf,
-    className,
-    direction,
-    reverse,
-    grow,
-    gap,
-    initial,
-    shrink,
-    wrap,
-    ...rest
-  } = props;
-
-  const classes = classnames(
-    'Flex',
-    {
-      [`Flex--align-horz-${alignChildrenHorizontal}`]: alignChildrenHorizontal,
-      [`Flex--align-self-${alignSelf}`]: alignSelf,
-      [`Flex--align-vert-${alignChildrenVertical}`]: alignChildrenVertical,
-      [`Flex--${direction}`]: direction,
-      [`Flex--initial-${initial}`]: initial,
-      'Flex--gapped': gap,
-      [`Flex--gap-${gap}`]: gap,
-      'Flex--reverse': reverse,
-      'Flex--grow': grow === true,
-      [`Flex--grow-${grow}`]: typeof grow === 'string',
-      'Flex--shrink': shrink === true,
-      [`Flex--shrink-${shrink}`]: typeof shrink === 'string',
-      'Flex--wrap': wrap,
-    },
-    className,
-  );
-
-  return <Base {...rest} className={classes} />;
-};
-
-export default Flex;

package/src/Old/Placement/Placement.css

@@ -1,100 +0,0 @@
-
-.Placement {
-  position: absolute;
-  z-index: var(--z-index-Placement--below-modal);
-}
-
-.Placement--above-modal {
-  z-index: var(--z-index-Placement--above-modal);
-}
-
-.Placement--top .Placement__content { transform: translateY(calc(var(--size--x4) * -1)); }
-.Placement--bottom .Placement__content { transform: translateY(var(--size--x4)); }
-
-.Placement .Placement__content-appear-active,
-.Placement .Placement__content-appear-done,
-.Placement .Placement__content-enter-active,
-.Placement .Placement__content-enter-done,
-.Placement .Placement__content-exit {
-  transform: translateY(0);
-  opacity: 1;
-  pointer-events: all;
-}
-
-.Placement--top .Placement__content-appear,
-.Placement--top .Placement__content-enter,
-.Placement--top .Placement__content-exit-active,
-.Placement--top .Placement__content-exit-done {
-  transform: translateY(calc(var(--size--x4) * -1));
-  opacity: 0;
-}
-
-.Placement--bottom .Placement__content-appear,
-.Placement--bottom .Placement__content-enter,
-.Placement--bottom .Placement__content-exit-active,
-.Placement--bottom .Placement__content-exit-done {
-  transform: translateY(var(--size--x4));
-  opacity: 0;
-}
-
-.Placement__shadow {
-  border-radius: var(--size--x2);
-  filter: drop-shadow(0 0.125rem 0.3125rem rgba(199, 205, 207, 0.7));
-}
-
-.Placement__area--horizontal .Placement__area:not(:last-child) {
-  border-right: 0.0625rem solid var(--color-gray--2);
-}
-
-.Placement__area--vertical .Placement__area:not(:last-child) {
-  border-top: 0.0625rem solid var(--color-gray--2);
-}
-
-.Placement__arrow,
-.Placement__arrow::before {
-  position: absolute;
-  width: var(--size--x3);
-  height: var(--size--x3);
-}
-
-.Placement__arrow,
-.Placement__arrow:first-child,
-.Placement__arrow:last-child {
-  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%;
-  margin-top: -0.375rem;
-}
-
-.Placement--right .Placement__arrow,
-.Placement--right-start .Placement__arrow,
-.Placement--right-end .Placement__arrow {
-  right: 100%;
-  margin-right: -0.375rem;
-}
-
-.Placement--bottom .Placement__arrow,
-.Placement--bottom-start .Placement__arrow,
-.Placement--bottom-end .Placement__arrow {
-  bottom: 100%;
-  margin-bottom: -0.375rem;
-}
-
-.Placement--left .Placement__arrow,
-.Placement--left-start .Placement__arrow,
-.Placement--left-end .Placement__arrow {
-  left: 100%;
-  margin-left: -0.375rem;
-}

package/src/Old/Placement/Placement.tsx

@@ -1,74 +0,0 @@
-import * as React from 'react';
-import { Placement as TypePlacement } from '@popperjs/core';
-import { Props as BaseProps } from '../Base/Base';
-import PlacementPopper from './PlacementPopper';
-import './Placement.css';
-
-export interface Props extends BaseProps {
-  /**
-   * Flag that enables CSS animations ont he top level
-   * transform positioning.
-   */
-  animatePosition?: boolean;
-  /**
-   * A render callback function that provides a
-   * update function to trigger a reposition,
-   * and the width of the target that is being positioned
-   * around.
-   */
-  children: (props: { update: () => void; width?: number }) => React.ReactNode;
-  /**
-   * Flag that disables repositioning on scroll and resize events.
-   */
-  disableReposition?: boolean;
-  /**
-   * Flag that enables flipping the positioned content to the
-   * other side when there is not enough room on the screen.
-   */
-  flip?: boolean;
-  /**
-   * A callback that is called when the component is
-   * in a visible state and the area around it has been clicked on.
-   */
-  onClose?: (event: MouseEvent) => void;
-  /**
-   * The desired placement of the positioned content, note that if there
-   * is not sufficient room and an a better alternative is available it
-   * might not be used.
-   */
-  placement?: TypePlacement;
-  /**
-   * An optional reference element to be used as the target.
-   */
-  referenceElement?: any;
-  sameWidth?: boolean;
-  /**
-   * The visibilty of the positioned content.
-   */
-  visible?: boolean;
-  /**
-   * The desired animation speed on milliseconds.
-   */
-  timeout?: number;
-}
-
-/**
- * The Placement component is used to absolutely position content on the
- * screen around another target. Under the hood it uses the positioning
- * engine library called Popper.js.
- *
- * When the positioning target is another DOM element on the screen the
- * Placement component should be used in conjunction with PlacementManager
- * and PlacementReference. If the target is an existing reference element
- * it can be used by iteself by using the referenceElement prop.
- */
-const Placement: React.FunctionComponent<Props> = (props: Props) => (
-  <PlacementPopper {...props} closeElement={null} isInsideModal={false} />
-);
-
-Placement.defaultProps = {
-  flip: true,
-  visible: true,
-};
-
-export default Placement;

package/src/Old/Placement/PlacementArea.tsx

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import PlacementArrow from './PlacementArrow';
-
-export interface Props extends FlexProps {
-  /**
-   * When used as a container for multiple PlacementAreas
-   * the direction can be set to split with a dividing line
-   * either horizontally or vertically.
-   */
-  direction?: 'horizontal' | 'vertical';
-  /**
-   * Inserts the dynamically positioned arrow/tip.
-   */
-  withArrow?: boolean;
-}
-
-/**
- * The content area(s) of the placed element. This acts as the main
- * container for the content as well as the optional arrow that is dynamically
- * positioned. This component can also act as a parent to other PlacementAreas
- * 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 classes = classnames('Placement__area', {
-    [`Placement__area--${direction}`]: direction,
-  });
-
-  return (
-    <Flex {...rest} className={classes}>
-      {withArrow && <PlacementArrow />}
-
-      <Flex
-        className="Placement__area-content"
-        direction={direction}
-        padding={padding}
-        paddingHorizontal={paddingHorizontal}
-        paddingVertical={paddingVertical}
-      >
-        {children}
-      </Flex>
-    </Flex>
-  );
-};
-
-export default PlacementArea;

package/src/Old/Placement/PlacementArrow.tsx

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

package/src/Old/Placement/PlacementArrowPropsContext.ts

@@ -1,9 +0,0 @@
-import { createContext } from 'react';
-import { PopperArrowProps } from 'react-popper';
-import { TypeColors } from '../Base/Base';
-
-export const PlacementArrowPropsContext = createContext<PopperArrowProps & { backgroundColor?: TypeColors }>({
-  backgroundColor: 'neutral.95',
-  ref: () => {},
-  style: {},
-});

package/src/Old/Placement/PlacementManager.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import { Manager, ManagerProps } from 'react-popper';
-import { PlacementManagerContext } from './PlacementManagerContext';
-
-const { useState } = React;
-
-export type Props = ManagerProps;
-
-/**
- * The manager component handles the ref communication between
- * the Placement and PlacementReference components.
- */
-const PlacementManager: React.FunctionComponent<Props> = (props: Props) => {
-  const [referenceNode, setReferenceNode] = useState<null | HTMLElement>(null);
-
-  return (
-    // eslint-disable-next-line react/jsx-no-constructed-context-values
-    <PlacementManagerContext.Provider value={{ referenceNode, setReferenceNode }}>
-      <Manager {...props} />
-    </PlacementManagerContext.Provider>
-  );
-};
-
-export default PlacementManager;

package/src/Old/Placement/PlacementManagerContext.ts

@@ -1,9 +0,0 @@
-import { createContext } from 'react';
-
-export const PlacementManagerContext = createContext<{
-  referenceNode: HTMLElement | null;
-  setReferenceNode(referenceNode: HTMLElement | null): void;
-}>({
-  referenceNode: null,
-  setReferenceNode: () => {},
-});

package/src/Old/Placement/PlacementPopper.tsx

@@ -1,173 +0,0 @@
-/* eslint-disable react/default-props-match-prop-types */
-import * as React from 'react';
-import { createPortal } from 'react-dom';
-import { Placement as TypePlacement, VirtualElement } from '@popperjs/core';
-import { Popper, PopperProps } from 'react-popper';
-import classnames from 'classnames';
-import { useEventListener } from '../hooks';
-import Base, { Props as BaseProps } from '../Base/Base';
-import { PlacementArrowPropsContext } from './PlacementArrowPropsContext';
-import { PlacementManagerContext } from './PlacementManagerContext';
-import './Placement.css';
-
-const { useEffect, useRef, useState } = React;
-
-export interface Props extends BaseProps {
-  animatePosition?: boolean;
-  children: (props: { update: () => void; width?: number }) => React.ReactNode;
-  closeElement?: null | HTMLElement;
-  disableReposition?: boolean;
-  flip?: boolean;
-  isInsideModal?: boolean;
-  onClose?: (event: MouseEvent) => void;
-  placement?: TypePlacement;
-  referenceElement?: any;
-  visible?: boolean;
-  timeout?: number;
-}
-
-const PlacementPopper: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    animatePosition,
-    backgroundColor,
-    children,
-    closeElement,
-    disableReposition,
-    flip,
-    isInsideModal,
-    onClose,
-    placement: desiredPlacement,
-    referenceElement,
-    sameWidth,
-    visible,
-    ...rest
-  } = props;
-
-  const ref = useRef<HTMLElement | null>();
-  const [render, setRender] = useState(visible);
-
-  const [reference, setReference] = useState<Element | VirtualElement | undefined>(undefined);
-
-  useEffect(() => {
-    if (visible) {
-      setRender(true);
-    }
-  }, [visible]);
-
-  useEventListener(
-    closeElement || document,
-    'click',
-    (event) => {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      /* @ts-ignore */
-      const isReferenceInPath = [...event.composedPath()].includes(reference);
-      if (onClose && ref.current && !ref.current.contains(event.target as Node) && !isReferenceInPath) {
-        onClose(event as MouseEvent);
-      }
-    },
-    [onClose, reference],
-  );
-
-  useEventListener(
-    ref.current || null,
-    'transitionend',
-    () => {
-      if (!visible) {
-        setRender(false);
-      }
-    },
-    [visible],
-  );
-
-  if (!render) {
-    return null;
-  }
-
-  const modifiers: any[] = [
-    {
-      name: 'offset',
-      options: {
-        offset: [0, 12],
-      },
-    },
-  ];
-
-  if (sameWidth) {
-    modifiers.push({
-      enabled: true,
-      name: 'sameWidth',
-      phase: 'beforeWrite',
-      requires: ['computeStyles'],
-      fn: ({ state }: any) => {
-        // eslint-disable-next-line no-param-reassign
-        state.styles.popper.width = `${state.rects.reference.width}px`;
-      },
-      effect: ({ state }: any) => {
-        // eslint-disable-next-line no-param-reassign
-        state.elements.popper.style.width = `${state.elements.reference.getBoundingClientRect().width || 0}px`;
-      },
-    });
-  }
-
-  const popperProps: PopperProps<any> = {
-    children: () => null,
-    placement: desiredPlacement,
-    modifiers,
-  };
-
-  if (referenceElement) {
-    popperProps.referenceElement = referenceElement;
-  }
-
-  return createPortal(
-    // eslint-disable-next-line no-return-assign
-    <Popper
-      {...popperProps}
-      // eslint-disable-next-line no-return-assign
-      innerRef={(el) => (ref.current = el || null)}
-      onFirstUpdate={(state) => {
-        setReference(state.elements?.reference);
-      }}
-    >
-      {/* eslint-disable-next-line @typescript-eslint/no-shadow */}
-      {({ arrowProps, placement, ref, update, style }) => {
-        return (
-          // 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,
-              })}
-              ref={ref}
-              style={style}
-            >
-              {visible && (
-                <div className="Placement__content">
-                  <Base {...rest} backgroundColor={backgroundColor} className="Placement__shadow">
-                    <PlacementManagerContext.Consumer>
-                      {({ referenceNode }) =>
-                        children({
-                          update,
-                          width: (referenceNode && referenceNode.clientWidth) || undefined,
-                        })
-                      }
-                    </PlacementManagerContext.Consumer>
-                  </Base>
-                </div>
-              )}
-            </div>
-          </PlacementArrowPropsContext.Provider>
-        );
-      }}
-    </Popper>,
-    document.body,
-  );
-};
-
-PlacementPopper.defaultProps = {
-  backgroundColor: 'neutral.100',
-  borderRadius: 'x2',
-};
-
-export default PlacementPopper;

package/src/Old/Placement/PlacementReference.tsx

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

package/src/Old/hooks/index.ts

@@ -1,2 +0,0 @@
-export { default as useEventListener } from './useEventListener';
-export { default as useSyncedStateAndProps } from './useSyncedStateAndProps';

package/src/Old/hooks/useEventListener.ts

@@ -1,45 +0,0 @@
-import { useEffect } from 'react';
-
-type HTMLElementOrDocumentOrWindow = HTMLElement | Document | Window;
-interface HTMLElementOrDocumentOrWindowEventMap extends HTMLElementEventMap, DocumentEventMap, WindowEventMap {}
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-function useEventListener<E extends Window, K extends keyof WindowEventMap>(
-  el: E | null | undefined,
-  type: K,
-  handler: (evnt: WindowEventMap[K]) => void,
-  watch?: any[],
-): void;
-function useEventListener<E extends Document, K extends keyof DocumentEventMap>(
-  el: E | null | undefined,
-  type: K,
-  handler: (evt: DocumentEventMap[K]) => void,
-  watch?: any[],
-): void;
-function useEventListener<E extends HTMLElement, K extends keyof HTMLElementEventMap>(
-  el: E | null | undefined,
-  type: K,
-  handler: (evt: HTMLElementEventMap[K]) => void,
-  watch?: any[],
-): void;
-function useEventListener<K extends keyof HTMLElementOrDocumentOrWindowEventMap>(
-  el: HTMLElementOrDocumentOrWindow,
-  type: string,
-  handler: (evt: HTMLElementOrDocumentOrWindowEventMap[K]) => void,
-  watch?: any[],
-): void;
-function useEventListener(el: any, type: string, handler: any, watch?: any[]) {
-  useEffect(() => {
-    if (el) {
-      el.addEventListener(type, handler);
-    }
-
-    return () => {
-      if (el) {
-        el.removeEventListener(type, handler);
-      }
-    };
-  }, watch || []);
-}
-
-export default useEventListener;

package/src/Old/hooks/useSyncedStateAndProps.ts

@@ -1,14 +0,0 @@
-import { useEffect, useState } from 'react';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default (prop: any) => {
-  const [state, setState] = useState(prop);
-
-  useEffect(() => {
-    if (state !== prop) {
-      setState(prop);
-    }
-  }, [prop]);
-
-  return [state, setState];
-};