@bitrise/bitkit 10.19.0 → 10.21.0

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;

package/src/Old/Text/Text.css

@@ -1,33 +0,0 @@
-.Text--align-start  { text-align: left; }
-.Text--align-middle { text-align: center; }
-.Text--align-end    { text-align: right; }
-
-.Text--break-all  { word-break: break-all; }
-.Text--break-none { white-space: nowrap; }
-.Text--break-word { word-wrap: break-word; }
-
-.Text--letter-spacing-x1 { letter-spacing: var(--letter-spacing--x1); }
-.Text--letter-spacing-x2 { letter-spacing: var(--letter-spacing--x2); }
-.Text--letter-spacing-x3 { letter-spacing: var(--letter-spacing--x3); }
-.Text--letter-spacing-x4 { letter-spacing: var(--letter-spacing--x4); }
-.Text--letter-spacing-x5 { letter-spacing: var(--letter-spacing--x5); }
-
-.Text--weight-bold { font-weight: var(--fontWeights-bold); }
-
-.Text--ellipsis {
-  max-width: 100%;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.Text--emphasis { font-style: italic; }
-
-.Text--titlecase { text-transform: capitalize; }
-.Text--uppercase { text-transform: uppercase; }
-
-.Text--monospace {
-  font-family: var(--font-family-monospace);
-}
-
-.Text--monospace.Text--weight-bold { font-weight: var(--font-weight-monospace--bold); }

package/src/Old/Text/Text.tsx

@@ -1,87 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Base, { Props as BaseProps } from '../Base/Base';
-import './TextSizes.css';
-import './Text.css';
-
-export type TypeTextLetterSpacing = 'x1' | 'x2' | 'x3' | 'x4' | 'x5';
-export type TypeTextSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
-export type TypeTextWeight = 'bold' | 'normal';
-
-export interface Props extends BaseProps {
-  /**
-   * Sets the type of component to be rendered. Can be a
-   * string for an HTML tag or a React component.
-   * */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  Component?: string | React.ComponentType<any>;
-  /* Horizontal alignment of the child text */
-  align?: 'start' | 'middle' | 'end';
-  /* Sets how the text should break across lines when reaching the container width */
-  breakOn?: 'all' | 'none' | 'word';
-  /** @ignore */
-  className?: string;
-  /** Clips overflowing text with an ellipsis */
-  ellipsis?: boolean;
-  /** Empahsises text with an italic style */
-  emphasis?: boolean;
-  /** Sets the text to you inline layout */
-  inline?: boolean;
-  /** Adjusts the texts letter spacing to one of the curated values */
-  letterSpacing?: TypeTextLetterSpacing;
-  /** Sets the text to use a monospaced font family */
-  monospace?: boolean;
-  /* Shortcut for setting the correct combination of props for valid typeography design */
-  size?: TypeTextSize;
-  /** Sets the text to use title casing (first letter of each word is uppercase) */
-  titlecase?: boolean;
-  /** Sets the text to use uppercasing (every letter of each word is uppercase) */
-  uppercase?: boolean;
-  /** Adjusts the text weighting */
-  weight?: TypeTextWeight;
-}
-
-const InlineComponentMap = (props: Props) =>
-  (props.weight === 'bold' && 'strong') || (props.emphasis && 'em') || 'span';
-
-/**
- * Generic text component that applies a wide variety of textual
- * styling.
- */
-const Text: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    Component,
-    align,
-    breakOn,
-    className,
-    ellipsis,
-    emphasis,
-    inline,
-    letterSpacing,
-    monospace,
-    size = '3',
-    titlecase,
-    uppercase,
-    weight,
-    ...rest
-  } = props;
-
-  const classes = classnames(className, 'Text', {
-    'Text--ellipsis': ellipsis,
-    'Text--emphasis': emphasis,
-    'Text--monospace': monospace,
-    'Text--titlecase': titlecase,
-    'Text--uppercase': uppercase,
-    [`Text--align-${align}`]: align,
-    [`Text--break-${breakOn}`]: breakOn,
-    [`Text--letter-spacing-${letterSpacing}`]: letterSpacing,
-    [`Text--size-${size}`]: size,
-    'Text--weight-bold': weight === 'bold',
-  });
-
-  const component = inline ? InlineComponentMap(props) : Component;
-
-  return <Base {...rest} Component={component} className={classes} />;
-};
-
-export default Text;