@bitrise/bitkit 10.20.0 → 10.22.0

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;

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

@@ -1,127 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Grid alignChildren 1`] = `
-<Flex
-  className="Grid Grid--align-start"
-  style={
-    Object {
-      "gridAutoRows": "max-content",
-      "gridTemplateColumns": "repeat(auto-fit, max-content)",
-    }
-  }
->
-  *
-</Flex>
-`;
-
-exports[`Grid gap 1`] = `
-<Flex
-  className="Grid Grid--gap-x1"
-  style={
-    Object {
-      "gridAutoRows": "max-content",
-      "gridTemplateColumns": "repeat(auto-fit, max-content)",
-    }
-  }
->
-  *
-</Flex>
-`;
-
-exports[`Grid gapHorizontal 1`] = `
-<Flex
-  className="Grid Grid--gap-horizontal-x1"
-  style={
-    Object {
-      "gridAutoRows": "max-content",
-      "gridTemplateColumns": "repeat(auto-fit, max-content)",
-    }
-  }
->
-  *
-</Flex>
-`;
-
-exports[`Grid gapVertical 1`] = `
-<Flex
-  className="Grid Grid--gap-vertical-x1"
-  style={
-    Object {
-      "gridAutoRows": "max-content",
-      "gridTemplateColumns": "repeat(auto-fit, max-content)",
-    }
-  }
->
-  *
-</Flex>
-`;
-
-exports[`Grid repeat 1`] = `
-<Flex
-  className="Grid"
-  style={
-    Object {
-      "gridAutoRows": "max-content",
-      "gridTemplateColumns": "repeat(3, max-content)",
-    }
-  }
->
-  *
-</Flex>
-`;
-
-exports[`Grid repeatWidth 1`] = `
-<Flex
-  className="Grid"
-  style={
-    Object {
-      "gridAutoRows": "max-content",
-      "gridTemplateColumns": "repeat(auto-fit, 1fr)",
-    }
-  }
->
-  *
-</Flex>
-`;
-
-exports[`Grid repeatWidthMax 1`] = `
-<Flex
-  className="Grid"
-  style={
-    Object {
-      "gridAutoRows": "max-content",
-      "gridTemplateColumns": "repeat(auto-fit, minmax(4rem, 2fr))",
-    }
-  }
->
-  *
-</Flex>
-`;
-
-exports[`Grid repeatWidthMin 1`] = `
-<Flex
-  className="Grid"
-  style={
-    Object {
-      "gridAutoRows": "max-content",
-      "gridTemplateColumns": "repeat(auto-fit, minmax(4rem, 1fr))",
-    }
-  }
->
-  *
-</Flex>
-`;
-
-exports[`Grid rowSize 1`] = `
-<Flex
-  className="Grid"
-  style={
-    Object {
-      "gridAutoRows": "1fr",
-      "gridTemplateColumns": "repeat(auto-fit, max-content)",
-    }
-  }
->
-  *
-</Flex>
-`;

package/src/Old/Logo/Logo.css

@@ -1,3 +0,0 @@
-.Logo {
-  display: block;
-}

package/src/Old/Logo/Logo.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import Base, { Props as BaseProps } from '../Base/Base';
-import './Logo.css';
-
-export interface Props extends BaseProps {
-  /**
-   * Sets the height of the logo. Note to keep correct proportions
-   * correct, if height is supplied the width should be omitted and
-   * it will be derived from the height.
-   * */
-  height?: number;
-  /**
-   * Sets the width of the logo. Note to keep correct proportions
-   * correct, if width is supplied the height should be omitted and
-   * it will be derived from the width.
-   * */
-  width?: number;
-}
-
-const viewBoxHeight = 29;
-const viewBoxWidth = 35;
-const viewBox = `0 0 ${viewBoxWidth} ${viewBoxHeight}`;
-const viewBoxScale = viewBoxWidth / viewBoxHeight;
-
-/**
- * Bitrise Logo
- */
-const Logo: React.FunctionComponent<Props> = (props: Props) => {
-  const { height, width } = props;
-  const scaledHeight = width ? width / viewBoxScale : height;
-  const scaledWidth = height ? height * viewBoxScale : width;
-
-  return (
-    <Base
-      Component="svg"
-      className="Logo"
-      height={scaledHeight}
-      viewBox={viewBox}
-      width={scaledWidth}
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g fill="currentColor" fillRule="evenodd">
-        <path d="M17.103 22.771a3.804 3.804 0 0 1-3.803-3.804h7.607c0 2.101-1.703 3.804-3.804 3.804zM8.602 14.27a2.349 2.349 0 0 0-2.349 2.349h4.697a2.349 2.349 0 0 0-2.348-2.349M25.622 14.27a2.349 2.349 0 0 0-2.349 2.35h4.697a2.349 2.349 0 0 0-2.348-2.35M17.103 3.08a1.455 1.455 0 1 0 0-2.91 1.455 1.455 0 0 0 0 2.91" />
-        <path d="M31.19 24.734a2.615 2.615 0 0 1-1.84.876c-2.937.137-7.444.301-12.247.301-4.802 0-9.31-.164-12.245-.3a2.615 2.615 0 0 1-1.842-.877 2.607 2.607 0 0 1-.661-1.922c.154-2.349.364-4.428.622-6.18.383-2.6.959-5.24 1.374-6.997a2.611 2.611 0 0 1 2.393-2.017c2.129-.133 5.654-.29 10.36-.29 4.704 0 8.23.157 10.36.29a2.611 2.611 0 0 1 2.392 2.017c.416 1.757.991 4.398 1.374 6.997.258 1.752.467 3.831.622 6.18a2.608 2.608 0 0 1-.662 1.922m2.363-8.444c-.394-2.682-.985-5.393-1.412-7.196a4.947 4.947 0 0 0-4.532-3.82c-2.162-.135-5.74-.296-10.506-.296-4.765 0-8.343.161-10.505.296a4.947 4.947 0 0 0-4.532 3.82c-.427 1.802-1.018 4.513-1.413 7.196-.267 1.814-.483 3.956-.642 6.367A4.937 4.937 0 0 0 1.265 26.3a4.945 4.945 0 0 0 3.483 1.657c2.96.139 7.508.304 12.355.304 4.848 0 9.395-.165 12.356-.304a4.945 4.945 0 0 0 3.483-1.657 4.937 4.937 0 0 0 1.254-3.642c-.16-2.41-.375-4.553-.643-6.367" />
-      </g>
-    </Base>
-  );
-};
-
-export default Logo;

package/src/Old/Modal/ModalContext.ts

@@ -1,6 +0,0 @@
-import { createContext } from 'react';
-
-export const ModalContext = createContext<{
-  modalElement: HTMLElement | null;
-  onClose?: () => void;
-}>({ modalElement: null });

package/src/Old/Status/Status500.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import { useMediaQuery } from '../hooks';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Image from '../../Components/Image/Image';
-import Text from '../../Components/Text/Text';
-
-export type Props = FlexProps;
-
-/**
- * A composite component used as a placeholder page for when there
- * is a 500 server error.
- */
-const Status500: React.FunctionComponent<Props> = (props: Props) => {
-  const match = useMediaQuery(['65rem']);
-
-  return (
-    <Flex {...props} alignChildrenHorizontal="middle" direction="vertical" paddingHorizontal="x6">
-      <Flex
-        alignChildren="middle"
-        direction={match('65rem') ? 'horizontal' : 'vertical'}
-        gap={match('65rem') ? 'x8' : 'x4'}
-      >
-        <Text align="center" size="7" fontWeight="bold">
-          500
-        </Text>
-        <Text align="center" size="2" textTransform="uppercase" fontWeight="bold">
-          Something went wrong
-        </Text>
-      </Flex>
-
-      <Text align="center" letterSpacing="8" marginY="20" size="4">
-        Everything is under control, we will be back soon. Until then keep refreshing your browser.
-      </Text>
-
-      <Image marginY="64" src="https://bitrise-bitkit.s3.us-east-2.amazonaws.com/assets/Status500.svg" />
-    </Flex>
-  );
-};
-
-export default Status500;

package/src/Old/Table/Table.css

@@ -1,77 +0,0 @@
-/* stylelint-disable no-descending-specificity */
-
-.Table {
-  width: 100%;
-  border-spacing: 0;
-  text-align: left;
-}
-
-.Table__header-cell {
-  font-weight: var(--fontWeights-bold);
-  vertical-align: bottom;
-}
-
-.Table__header-cell--sortable:hover {
-  color: var(--color-grape--3);
-  cursor: pointer;
-}
-
-.Table__row:not(:last-child) .Table__cell {
-  border-bottom: 0.0625rem solid var(--color-gray--2);
-}
-
-.Table__cell {
-  background-color: var(--color-white);
-  transition-property: background-color, color;
-  transition-duration: var(--transition-duration--fast);
-  transition-timing-function: var(--transition-timing-function);
-}
-
-.Table__cell--shrink {
-  width: 0.0625rem;
-  white-space: nowrap;
-}
-
-.Table__row--clickable:hover .Table__cell {
-  color: var(--color-grape--3);
-  cursor: pointer;
-}
-
-.Table--type-card .Table__body {
-  border-radius: var(--size--x2);
-  box-shadow: var(--shadow-elevation--x2);
-}
-
-.Table--type-card .Table__row:first-child .Table__cell:first-child {
-  border-top-left-radius: var(--size--x2);
-}
-
-.Table--type-card .Table__row:first-child .Table__cell:last-child {
-  border-top-right-radius: var(--size--x2);
-}
-
-.Table--type-card .Table__row:last-child .Table__cell:first-child {
-  border-bottom-left-radius: var(--size--x2);
-}
-
-.Table--type-card .Table__row:last-child .Table__cell:last-child {
-  border-bottom-right-radius: var(--size--x2);
-}
-
-.Table--type-card .Table__header-cell,
-.Table--type-card .Table__cell {
-  padding: var(--size--x4);
-}
-
-.Table--type-flat .Table__header-cell,
-.Table--type-flat .Table__cell {
-  padding: var(--size--x3) var(--size--x4);
-}
-
-.Table--type-flat .Table__header-row .Table__header-cell {
-  border-bottom: 0.0625rem solid var(--color-gray--2);
-}
-
-.Table--type-flat .Table__header-row:last-child .Table__header-cell {
-  border-bottom-width: 0.125rem;
-}

package/src/Old/Table/Table.tsx

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Base, { Props as BaseProps } from '../Base/Base';
-import './Table.css';
-
-export interface Props extends BaseProps {
-  /**
-   * Controls the style of table which are applicable
-   * in different contexts within the UI.
-   */
-  type?: 'card' | 'flat';
-}
-
-/**
- * A styled, standard data table component.
- */
-const Table: React.FunctionComponent<Props> = (props: Props) => {
-  const { type, ...rest } = props;
-  const classes = classnames('Table', `Table--type-${type}`);
-
-  return <Base {...rest} Component="table" className={classes} />;
-};
-
-Table.defaultProps = {
-  type: 'card',
-};
-
-export default Table;

package/src/Old/Table/TableBody.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import Base, { Props as BaseProps } from '../Base/Base';
-
-export type Props = BaseProps;
-
-/**
- * The body of the table that holds the TableRow components. Should be
- * a direct descendant of the Table component.
- */
-const TableBody: React.FunctionComponent<Props> = (props: Props) => {
-  return <Base {...props} Component="tbody" className="Table__body" />;
-};
-
-export default TableBody;

package/src/Old/Table/TableCell.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Text, { Props as TextProps } from '../Text/Text';
-
-export interface Props extends TextProps {
-  /** Forces the width of the table cell to shrink to the content. */
-  shrink?: boolean;
-}
-
-/**
- * The table cell, that holds the data to be displayed. Should be a direct
- * descendant of the TableRow component.
- */
-const TableCell: React.FunctionComponent<Props> = (props: Props) => {
-  const { shrink, ...rest } = props;
-  const classes = classnames('Table__cell', {
-    'Table__cell--shrink': shrink,
-  });
-
-  return <Text {...rest} Component="td" className={classes} textColor="neutral.40" />;
-};
-
-export default TableCell;

package/src/Old/Table/TableHeader.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import Base, { Props as BaseProps } from '../Base/Base';
-
-export type Props = BaseProps;
-
-/**
- * The header of the table that holds the TableHeaderRow components. Should be
- * a direct descendant of the Table component.
- */
-const TableHeader: React.FunctionComponent<Props> = (props: Props) => {
-  return <Base {...props} Component="thead" className="Table__header" />;
-};
-
-export default TableHeader;

package/src/Old/Table/TableHeaderCell.tsx

@@ -1,62 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Flex from '../Flex/Flex';
-import Icon from '../../Components/Icon/Icon';
-import Text, { Props as TextProps } from '../Text/Text';
-import Visibility from '../Visibility/Visibility';
-import VisibilityContainer from '../Visibility/VisibilityContainer';
-
-export type TypeTableSort = 'asc' | 'desc';
-
-export interface Props extends TextProps {
-  /**
-   * Indicates that the cell is sortable, the provided value is what is
-   * indicated as the sort direction when clicked.
-   */
-  sortable?: TypeTableSort;
-  /**
-   * When provided, it indicates that this table is currently being
-   * sorted in the given direction.
-   */
-  sorted?: TypeTableSort;
-}
-
-/**
- * The header cell. Should be a direct descendant of the TableHeaderRow component.
- */
-const TableHeaderCell: React.FunctionComponent<Props> = (props: Props) => {
-  const { align, children, sortable, sorted } = props;
-  const classes = classnames('Table__header-cell', {
-    'Table__header-cell--sortable': sortable,
-  });
-
-  return (
-    <Text {...props} Component="th" className={classes}>
-      <VisibilityContainer
-        alignChildrenHorizontal={align}
-        alignChildrenVertical="middle"
-        direction="horizontal"
-        enabled={!!sortable}
-        gap="x2"
-      >
-        <Flex>{children}</Flex>
-
-        {sortable && (
-          <Visibility visible={sorted ? true : undefined}>
-            <Icon
-              name={
-                (sorted === 'asc' && 'ArrowUp') ||
-                (sorted === 'desc' && 'ArrowDown') ||
-                (sortable === 'asc' && 'ArrowUp') ||
-                (sortable === 'desc' && 'ArrowDown') ||
-                'ArrowDown'
-              }
-            />
-          </Visibility>
-        )}
-      </VisibilityContainer>
-    </Text>
-  );
-};
-
-export default TableHeaderCell;

package/src/Old/Table/TableHeaderRow.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import Base, { Props as BaseProps } from '../Base/Base';
-
-export type Props = BaseProps;
-
-/**
- * The header row that holds the TableHeaderCell components. Should be
- * a direct descendant of the TableHeader component.
- */
-const TableHeaderRow: React.FunctionComponent<Props> = (props: Props) => {
-  return <Base {...props} Component="tr" className="Table__header-row" />;
-};
-
-export default TableHeaderRow;

package/src/Old/Table/TableRow.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Base, { Props as BaseProps } from '../Base/Base';
-
-export interface Props extends BaseProps {
-  /** @Ignore */
-  onClick?: () => void;
-}
-
-/**
- * The row that holds the TableCell components. Should be
- * a direct descendant of the TableBody component.
- */
-const TableRow: React.FunctionComponent<Props> = (props: Props) => {
-  const { onClick, ...rest } = props;
-  const classes = classnames('Table__row', {
-    'Table__row--clickable': onClick,
-  });
-
-  return <Base {...rest} Component="tr" className={classes} onClick={onClick} />;
-};
-
-export default TableRow;