@bitrise/bitkit 10.19.0 → 10.21.0

package/src/Old/Expand/Expand.css

@@ -1,26 +0,0 @@
-.Expand {
-  transition-property: margin, height, opacity;
-  transition-duration: var(--transition-duration--fast);
-  transition-timing-function: var(--transition-timing-function);
-}
-
-.Expand--peeked {
-  position: relative;
-}
-
-.Expand--peeked::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 4.75%, #FFFFFF 81.95%);
-  z-index: 1;
-  transition: opacity var(--transition-duration--fast) var(--transition-timing-function);
-}
-
-.Expand--expanded.Expand--peeked::after {
-  opacity: 0;
-  pointer-events: none;
-}

package/src/Old/Expand/Expand.test.tsx

@@ -1,52 +0,0 @@
-import { mount, shallow } from 'enzyme';
-import { mountToJson, shallowToJson } from 'enzyme-to-json';
-import { act } from 'react-dom/test-utils';
-import Expand from './Expand';
-
-describe('Expand', () => {
-  describe('removing children', () => {
-    test('does render children when initially expanded', () => {
-      expect(
-        shallowToJson(
-          shallow(
-            <Expand expanded removeChildren>
-              I should appear in the snapshot
-            </Expand>,
-          ),
-        ),
-      ).toMatchSnapshot();
-    });
-
-    test('does not render children when not initially expanded', () => {
-      expect(
-        shallowToJson(
-          shallow(
-            <Expand expanded={false} removeChildren>
-              I should not appear in the snapshot
-            </Expand>,
-          ),
-        ),
-      ).toMatchSnapshot();
-    });
-
-    test('does render children once expanded', () => {
-      const wrapper = mount(
-        <Expand expanded={false} removeChildren>
-          I should appear in the snapshot
-        </Expand>,
-      );
-
-      act(() => {
-        wrapper.setProps({ expanded: true });
-      });
-
-      expect(mountToJson(wrapper)).toMatchSnapshot();
-    });
-
-    test('always renders children when removeChildren is not set', () => {
-      expect(
-        shallowToJson(shallow(<Expand expanded={false}>I should appear in the snapshot</Expand>)),
-      ).toMatchSnapshot();
-    });
-  });
-});

package/src/Old/Expand/Expand.tsx

@@ -1,133 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import { useEventListener } from '../hooks';
-import Base, { TypeSizes } from '../Base/Base';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import './Expand.css';
-
-const { useEffect, useRef, useState } = React;
-
-export interface Props extends FlexProps {
-  /** @Ignore */
-  children?: React.ReactNode;
-  /** @Ignore */
-  className?: string;
-  /** Flag that controls the expanded state of the area. */
-  expanded: boolean;
-  /** @Ignore */
-  padding?: TypeSizes;
-  /** @Ignore */
-  paddingHorizontal?: TypeSizes;
-  /** @Ignore */
-  paddingVertical?: TypeSizes;
-  /** A CSS measurement of how much of the child content to always display when collapsed. */
-  peekHeight?: string;
-  /** Flag to control whether child content is rederend when collapsed. */
-  removeChildren?: boolean;
-}
-
-const Expand: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    children,
-    className,
-    padding,
-    paddingHorizontal,
-    paddingVertical,
-    removeChildren,
-    expanded,
-    peekHeight,
-    ...rest
-  } = props;
-
-  const refOuter = useRef<HTMLElement>(null);
-  const refInner = useRef<HTMLElement>(null);
-  const refIsExpanded = useRef(expanded);
-  const frameId = useRef<number | undefined>(undefined);
-
-  const [height, setHeight] = useState<number | undefined>(expanded ? undefined : 0);
-  const [isTransitioning, setIsTransitioning] = useState(false);
-  const [opacity, setOpacity] = useState<number | undefined>(expanded || peekHeight ? 1 : 0);
-  const [overflow, setOverflow] = useState<string | undefined>(expanded || peekHeight ? undefined : 'hidden');
-
-  useEventListener(
-    refOuter.current,
-    'transitionend',
-    () => {
-      setIsTransitioning(false);
-
-      if (expanded) {
-        setHeight(undefined);
-        setOpacity(undefined);
-        setOverflow(undefined);
-      }
-    },
-    [expanded],
-  );
-
-  useEffect(() => {
-    refIsExpanded.current = expanded;
-
-    if (frameId.current) {
-      window.cancelAnimationFrame(frameId.current);
-      frameId.current = undefined;
-    }
-
-    if (expanded) {
-      frameId.current = window.requestAnimationFrame(() => {
-        if (refInner.current && height === 0) {
-          setHeight(refInner.current.offsetHeight);
-          setOpacity(1);
-        }
-      });
-    } else {
-      setIsTransitioning(true);
-      setOverflow('hidden');
-      frameId.current = window.requestAnimationFrame(() => {
-        if (refInner.current && height === undefined) {
-          setHeight(refInner.current.offsetHeight);
-          frameId.current = window.requestAnimationFrame(() => {
-            setHeight(0);
-
-            if (!peekHeight) {
-              setOpacity(0);
-            }
-          });
-        }
-      });
-    }
-
-    return () => {
-      if (frameId.current) {
-        window.cancelAnimationFrame(frameId.current);
-        frameId.current = undefined;
-      }
-    };
-  }, [expanded]);
-
-  const renderChildren = isTransitioning || peekHeight || expanded || refIsExpanded.current || !removeChildren;
-  const style = { opacity, overflow };
-  const innerStyle = { overflow };
-  const classes = classnames('Expand', {
-    'Expand--expanded': expanded,
-    'Expand--peeked': peekHeight,
-  });
-
-  const classesInner = classnames(className, 'Expand__inner');
-
-  return (
-    <Flex {...rest} className={classes} height={height} innerRef={refOuter} minHeight={peekHeight} style={style}>
-      <Base
-        className={classesInner}
-        innerRef={refInner}
-        padding={padding}
-        paddingHorizontal={paddingHorizontal}
-        paddingVertical={paddingVertical}
-        style={innerStyle}
-      >
-        {renderChildren && children}
-      </Base>
-    </Flex>
-  );
-};
-
-export default Expand;

package/src/Old/Expand/__snapshots__/Expand.test.tsx.snap

@@ -1,211 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Expand removing children always renders children when removeChildren is not set 1`] = `
-<Flex
-  className="Expand"
-  height={0}
-  innerRef={
-    Object {
-      "current": null,
-    }
-  }
-  style={
-    Object {
-      "opacity": 0,
-      "overflow": "hidden",
-    }
-  }
->
-  <Base
-    className="Expand__inner"
-    innerRef={
-      Object {
-        "current": null,
-      }
-    }
-    style={
-      Object {
-        "overflow": "hidden",
-      }
-    }
-  >
-    I should appear in the snapshot
-  </Base>
-</Flex>
-`;
-
-exports[`Expand removing children does not render children when not initially expanded 1`] = `
-<Flex
-  className="Expand"
-  height={0}
-  innerRef={
-    Object {
-      "current": null,
-    }
-  }
-  style={
-    Object {
-      "opacity": 0,
-      "overflow": "hidden",
-    }
-  }
->
-  <Base
-    className="Expand__inner"
-    innerRef={
-      Object {
-        "current": null,
-      }
-    }
-    style={
-      Object {
-        "overflow": "hidden",
-      }
-    }
-  />
-</Flex>
-`;
-
-exports[`Expand removing children does render children once expanded 1`] = `
-<Expand
-  expanded={true}
-  removeChildren={true}
->
-  <Flex
-    className="Expand Expand--expanded"
-    height={0}
-    innerRef={
-      Object {
-        "current": <div
-          class="Base Flex Expand Expand--expanded"
-          style="opacity: 0; overflow: hidden; height: 0px;"
-        >
-          <div
-            class="Base Expand__inner"
-            style="overflow: hidden;"
-          >
-            I should appear in the snapshot
-          </div>
-        </div>,
-      }
-    }
-    style={
-      Object {
-        "opacity": 0,
-        "overflow": "hidden",
-      }
-    }
-  >
-    <Base
-      className="Flex Expand Expand--expanded"
-      height={0}
-      innerRef={
-        Object {
-          "current": <div
-            class="Base Flex Expand Expand--expanded"
-            style="opacity: 0; overflow: hidden; height: 0px;"
-          >
-            <div
-              class="Base Expand__inner"
-              style="overflow: hidden;"
-            >
-              I should appear in the snapshot
-            </div>
-          </div>,
-        }
-      }
-      style={
-        Object {
-          "opacity": 0,
-          "overflow": "hidden",
-        }
-      }
-    >
-      <div
-        className="Base Flex Expand Expand--expanded"
-        style={
-          Object {
-            "height": 0,
-            "maxHeight": undefined,
-            "maxWidth": undefined,
-            "minHeight": undefined,
-            "minWidth": undefined,
-            "opacity": 0,
-            "overflow": "hidden",
-            "width": undefined,
-          }
-        }
-      >
-        <Base
-          className="Expand__inner"
-          innerRef={
-            Object {
-              "current": <div
-                class="Base Expand__inner"
-                style="overflow: hidden;"
-              >
-                I should appear in the snapshot
-              </div>,
-            }
-          }
-          style={
-            Object {
-              "overflow": "hidden",
-            }
-          }
-        >
-          <div
-            className="Base Expand__inner"
-            style={
-              Object {
-                "height": undefined,
-                "maxHeight": undefined,
-                "maxWidth": undefined,
-                "minHeight": undefined,
-                "minWidth": undefined,
-                "overflow": "hidden",
-                "width": undefined,
-              }
-            }
-          >
-            I should appear in the snapshot
-          </div>
-        </Base>
-      </div>
-    </Base>
-  </Flex>
-</Expand>
-`;
-
-exports[`Expand removing children does render children when initially expanded 1`] = `
-<Flex
-  className="Expand Expand--expanded"
-  innerRef={
-    Object {
-      "current": null,
-    }
-  }
-  style={
-    Object {
-      "opacity": 1,
-      "overflow": undefined,
-    }
-  }
->
-  <Base
-    className="Expand__inner"
-    innerRef={
-      Object {
-        "current": null,
-      }
-    }
-    style={
-      Object {
-        "overflow": undefined,
-      }
-    }
-  >
-    I should appear in the snapshot
-  </Base>
-</Flex>
-`;

package/src/Old/Grid/Grid.css

@@ -1,40 +0,0 @@
-.Grid {
-  display: grid;
-}
-
-.Grid--gap-x1  { grid-gap: var(--size--x1); }
-.Grid--gap-x2  { grid-gap: var(--size--x2); }
-.Grid--gap-x3  { grid-gap: var(--size--x3); }
-.Grid--gap-x4  { grid-gap: var(--size--x4); }
-.Grid--gap-x5  { grid-gap: var(--size--x5); }
-.Grid--gap-x6  { grid-gap: var(--size--x6); }
-.Grid--gap-x8  { grid-gap: var(--size--x8); }
-.Grid--gap-x10 { grid-gap: var(--size--x10); }
-.Grid--gap-x12 { grid-gap: var(--size--x12); }
-.Grid--gap-x16 { grid-gap: var(--size--x16); }
-
-.Grid--gap-horizontal-x1  { grid-column-gap: var(--size--x1); }
-.Grid--gap-horizontal-x2  { grid-column-gap: var(--size--x2); }
-.Grid--gap-horizontal-x3  { grid-column-gap: var(--size--x3); }
-.Grid--gap-horizontal-x4  { grid-column-gap: var(--size--x4); }
-.Grid--gap-horizontal-x5  { grid-column-gap: var(--size--x5); }
-.Grid--gap-horizontal-x6  { grid-column-gap: var(--size--x6); }
-.Grid--gap-horizontal-x8  { grid-column-gap: var(--size--x8); }
-.Grid--gap-horizontal-x10 { grid-column-gap: var(--size--x10); }
-.Grid--gap-horizontal-x12 { grid-column-gap: var(--size--x12); }
-.Grid--gap-horizontal-x16 { grid-column-gap: var(--size--x16); }
-
-.Grid--gap-vertical-x1  { grid-row-gap: var(--size--x1); }
-.Grid--gap-vertical-x2  { grid-row-gap: var(--size--x2); }
-.Grid--gap-vertical-x3  { grid-row-gap: var(--size--x3); }
-.Grid--gap-vertical-x4  { grid-row-gap: var(--size--x4); }
-.Grid--gap-vertical-x5  { grid-row-gap: var(--size--x5); }
-.Grid--gap-vertical-x6  { grid-row-gap: var(--size--x6); }
-.Grid--gap-vertical-x8  { grid-row-gap: var(--size--x8); }
-.Grid--gap-vertical-x10 { grid-row-gap: var(--size--x10); }
-.Grid--gap-vertical-x12 { grid-row-gap: var(--size--x12); }
-.Grid--gap-vertical-x16 { grid-row-gap: var(--size--x16); }
-
-.Grid--align-start  { justify-content: start; }
-.Grid--align-middle { justify-content: center; }
-.Grid--align-end    { justify-content: end; }

package/src/Old/Grid/Grid.test.tsx

@@ -1,49 +0,0 @@
-import { shallow } from 'enzyme';
-import { shallowToJson } from 'enzyme-to-json';
-import Grid from './Grid';
-
-describe('Grid', () => {
-  test('alignChildren', () => {
-    expect(shallowToJson(shallow(<Grid alignChildren="start">*</Grid>))).toMatchSnapshot();
-  });
-
-  test('gap', () => {
-    expect(shallowToJson(shallow(<Grid gap="x1">*</Grid>))).toMatchSnapshot();
-  });
-
-  test('gapHorizontal', () => {
-    expect(shallowToJson(shallow(<Grid gapHorizontal="x1">*</Grid>))).toMatchSnapshot();
-  });
-
-  test('gapVertical', () => {
-    expect(shallowToJson(shallow(<Grid gapVertical="x1">*</Grid>))).toMatchSnapshot();
-  });
-
-  test('repeat', () => {
-    expect(shallowToJson(shallow(<Grid repeat="3">*</Grid>))).toMatchSnapshot();
-  });
-
-  test('repeatWidth', () => {
-    expect(shallowToJson(shallow(<Grid repeatWidth="1fr">*</Grid>))).toMatchSnapshot();
-  });
-
-  test('repeatWidthMin', () => {
-    expect(shallowToJson(shallow(<Grid repeatWidthMin="4rem">*</Grid>))).toMatchSnapshot();
-  });
-
-  test('repeatWidthMax', () => {
-    expect(
-      shallowToJson(
-        shallow(
-          <Grid repeatWidthMax="2fr" repeatWidthMin="4rem">
-            *
-          </Grid>,
-        ),
-      ),
-    ).toMatchSnapshot();
-  });
-
-  test('rowSize', () => {
-    expect(shallowToJson(shallow(<Grid rowSize="1fr">*</Grid>))).toMatchSnapshot();
-  });
-});

package/src/Old/Grid/Grid.tsx

@@ -1,76 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import { TypeSizes } from '../Base/Base';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import './Grid.css';
-
-export interface Props extends FlexProps {
-  /** Controls the horizontal alignment of the items */
-  alignChildren?: 'start' | 'middle' | 'end';
-  /** @Ignore */
-  className?: string;
-  /** Sets the distances between items to a multiple value. E.g. 'x1'. */
-  gap?: TypeSizes;
-  /** Sets the horizontal distances between items to a multiple value. E.g. 'x1'. */
-  gapHorizontal?: TypeSizes;
-  /** Sets the vertical distances between items to a multiple value. E.g. 'x1'. */
-  gapVertical?: TypeSizes;
-  /** Sets the primary repeat value */
-  repeat?: number | string | 'auto-fill' | 'auto-fit';
-  /** Sets the explicit width the repeated items will be resized */
-  repeatWidth?: string | 'max-content' | 'min-content';
-  /** Sets the maximum width the repeated items can be resized to */
-  repeatWidthMax?: string;
-  /** Sets the minimum width the repeated items can be resized to */
-  repeatWidthMin?: string;
-  /** Sets the implicit row size */
-  rowSize?: string | 'max-content' | 'min-content';
-  /** @Ignore */
-  style?: React.CSSProperties | { [key: string]: number | string };
-}
-
-const Grid: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    alignChildren,
-    className,
-    gap,
-    gapHorizontal,
-    gapVertical,
-    repeat,
-    repeatWidth,
-    repeatWidthMax,
-    repeatWidthMin,
-    rowSize,
-    ...rest
-  } = props;
-
-  const classes = classnames(
-    'Grid',
-    {
-      [`Grid--align-${alignChildren}`]: alignChildren,
-      [`Grid--gap-${gap}`]: gap,
-      [`Grid--gap-horizontal-${gapHorizontal}`]: gapHorizontal,
-      [`Grid--gap-vertical-${gapVertical}`]: gapVertical,
-    },
-    className,
-  );
-
-  const style = {
-    ...rest.style,
-    gridTemplateColumns: `repeat(${repeat}, ${
-      repeatWidthMin ? `minmax(${repeatWidthMin}, ${repeatWidthMax})` : repeatWidth
-    })`,
-    gridAutoRows: rowSize,
-  };
-
-  return <Flex {...rest} className={classes} style={style} />;
-};
-
-Grid.defaultProps = {
-  repeat: 'auto-fit',
-  repeatWidth: 'max-content',
-  repeatWidthMax: '1fr',
-  rowSize: 'max-content',
-};
-
-export default Grid;