@bitrise/bitkit 10.1.0-alpha-chakra.2 → 10.1.0-alpha-breadcrumb.1

package/src/Old/AppLayout/AppLayoutHeader.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Flex, { Props as FlexProps } from '../Flex/Flex';
+
+export type Props = FlexProps;
+
+const AppLayoutHeader: React.FunctionComponent<Props> = (props: Props) => {
+  return <Flex {...props} className="AppLayout__header" />;
+};
+
+export default AppLayoutHeader;

package/src/Old/AppLayout/AppLayoutMain.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Flex, { Props as FlexProps } from '../Flex/Flex';
+
+export type Props = FlexProps;
+
+const AppLayoutMain: React.FunctionComponent<Props> = (props: Props) => {
+  return <Flex {...props} direction="vertical" grow />;
+};
+
+export default AppLayoutMain;

package/src/Old/AppLayout/AppLayoutSidebar.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Flex, { Props as FlexProps } from '../Flex/Flex';
+
+export type Props = FlexProps;
+
+const AppLayoutSidebar: React.FunctionComponent<Props> = (props: Props) => {
+  return <Flex {...props} alignSelf="start" className="AppLayout__sidebar" />;
+};
+
+export default AppLayoutSidebar;

package/src/Old/Avatar/Avatar.css

@@ -0,0 +1,4 @@
+.Avatar {
+  background-repeat: no-repeat;
+  background-size: cover;
+}

package/src/Old/Avatar/Avatar.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import Flex, { Props as FlexProps } from '../Flex/Flex';
+import Text from '../Text/Text';
+import avatarColors from './avatarColors';
+import './Avatar.css';
+
+const { useMemo } = React;
+
+export interface Props extends FlexProps {
+  name: string;
+  url?: string;
+  size?: string;
+}
+
+const Avatar: React.FunctionComponent<Props> = (props: Props) => {
+  const { url, name, size = '2rem', ...rest } = props;
+
+  const memoizedValue = useMemo(() => {
+    if (!url) {
+      const str = name.toUpperCase();
+      const shortHand = `${str.charAt(0)}${str.charAt(str.length - 1)}`;
+      const seed = str.charCodeAt(0) + str.charCodeAt(str.length - 1);
+
+      return {
+        shortHand,
+        styles: {
+          backgroundColor: avatarColors[seed % avatarColors.length],
+        },
+      };
+    }
+
+    return {
+      shortHand: null,
+      styles: {
+        backgroundImage: `url(${url})`,
+      },
+    };
+  }, [name, url]);
+
+  return (
+    <Flex
+      borderRadius="rounded"
+      {...rest}
+      alignChildrenHorizontal="middle"
+      alignChildrenVertical="middle"
+      className="Avatar"
+      direction="horizontal"
+      height={size}
+      overflow="hidden"
+      style={{ ...memoizedValue.styles, ...rest.styles }}
+      width={size}
+    >
+      <Flex>
+        {memoizedValue.shortHand && (
+          <Text size="3" textColor="neutral.100">
+            {memoizedValue.shortHand}
+          </Text>
+        )}
+      </Flex>
+    </Flex>
+  );
+};
+
+export default Avatar;

package/src/Old/Avatar/avatarColors.ts

@@ -0,0 +1,26 @@
+export default [
+  '#68442c',
+  '#86d641',
+  '#a775db',
+  '#df5ac3',
+  '#46bee8',
+  '#63c99a',
+  '#19937c',
+  '#ed544c',
+  '#ff931e',
+  '#107ec1',
+  '#48e1ed',
+  '#743da5',
+  '#f9d128',
+  '#ff931e',
+  '#9e4b39',
+  '#b51c98',
+  '#b20202',
+  '#bf8a66',
+  '#2c3f50',
+  '#441f62',
+  '#0c5b4c',
+  '#391401',
+  '#27ae61',
+  '#ef7bef',
+];

package/src/Old/Bounds/Bounds.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Base, { Props as BaseProps } from '../Base/Base';
+import useResizeObserver, { DOMRectReadOnlyWithoutToJSON } from '../hooks/useResizeObserver';
+
+export interface Props extends BaseProps {
+  children: (size: DOMRectReadOnlyWithoutToJSON) => React.ReactNode;
+}
+
+const Bounds: React.FunctionComponent<Props> = (props: Props) => {
+  const { children, ...rest } = props;
+  const [size, ref] = useResizeObserver();
+
+  return (
+    <Base {...rest} innerRef={ref}>
+      {children(size)}
+    </Base>
+  );
+};
+
+export default Bounds;

package/src/Old/Button/Button.css

@@ -0,0 +1,249 @@
+:root {
+  --Button--border-small: 0.0625rem;
+  --Button--border-medium: 0.0625rem;
+  --Button--border-large: 0.125rem;
+  --Button--padding-small-vertical: calc(var(--size--x1) - var(--Button--border-small));
+  --Button--padding-small-horizontal: var(--size--x3);
+  --Button--padding-medium-vertical: calc(var(--size--x3) - var(--Button--border-medium));
+  --Button--padding-medium-horizontal: var(--size--x4);
+  --Button--padding-large-vertical: var(--size--x4);
+  --Button--padding-large-horizontal: var(--size--x6);
+  --Button--line-height: var(--size--x6);
+}
+
+.Button {
+  border: 0 solid transparent;
+  background-color: transparent;
+  line-height: var(--Button--line-height);
+  transition-property: border-color, background-color, color;
+  transition-duration: var(--transition-duration--base);
+  transition-timing-function: var(--transition-timing-function);
+}
+
+.Button:hover {
+  cursor: pointer;
+}
+
+.Button:disabled,
+.Button[disabled] {
+  cursor: not-allowed;
+}
+
+.Button--full-width {
+  width: 100%;
+}
+
+.Button--size-small {
+  padding: var(--Button--padding-small-vertical) var(--Button--padding-small-horizontal);
+  border-width: var(--Button--border-small);
+  border-radius: var(--size--x1);
+  font-size: var(--fontSizes-2);
+}
+
+.Button--size-medium {
+  padding: var(--Button--padding-medium-vertical) var(--Button--padding-medium-horizontal);
+  border-width: var(--Button--border-medium);
+  border-radius: var(--size--x1);
+  font-size: var(--fontSizes-3);
+}
+
+.Button--size-large {
+  padding: var(--Button--padding-large-vertical) var(--Button--padding-large-horizontal);
+  border-width: var(--Button--border-large);
+  border-radius: 0.375rem;
+  font-size: var(--fontSizes-4);
+}
+
+.Button--borderless {
+  border: none;
+  border-radius: 0;
+}
+
+/* stylelint-disable no-descending-specificity */
+.Button--level-primary,
+.Button--level-secondary {
+  position: relative;
+  overflow: hidden;
+  z-index: 0;
+}
+
+.Button--level-primary::before,
+.Button--level-primary::after,
+.Button--level-secondary::before,
+.Button--level-secondary::after {
+  content: '';
+  position: absolute;
+  top: -0.125rem;
+  right: -0.125rem;
+  bottom: -0.125rem;
+  left: -0.125rem;
+  z-index: -1;
+  transition-property: opacity;
+  transition-duration: var(--transition-duration--base);
+  transition-timing-function: var(--transition-timing-function);
+}
+
+.Button--level-primary:disabled::before,
+.Button--level-primary:hover:not(:disabled)::before,
+.Button--level-primary[disabled]::before,
+.Button--level-primary:hover:not([disabled])::before,
+.Button--level-secondary:disabled::before,
+.Button--level-secondary:hover:not(:disabled)::before,
+.Button--level-secondary[disabled]::before,
+.Button--level-secondary:hover:not([disabled])::before {
+  opacity: 0;
+}
+
+.Button--level-primary:hover:not(:disabled)::after,
+.Button--level-primary:hover:not([disabled])::after,
+.Button--level-secondary:hover:not(:disabled)::after,
+.Button--level-secondary:hover:not([disabled])::after {
+  opacity: 1;
+}
+
+.Button--level-primary:disabled::after,
+.Button--level-primary:active:not(:disabled)::after,
+.Button--level-primary[disabled]::after,
+.Button--level-primary:active:not([disabled])::after,
+.Button--level-secondary:disabled::after,
+.Button--level-secondary:active:not(:disabled)::after,
+.Button--level-secondary[disabled]::after,
+.Button--level-secondary:active:not([disabled])::after {
+  opacity: 0;
+}
+
+.Button--level-primary {
+  border-color: var(--color-eggplant);
+  background-color: var(--color-grape--5);
+  color: var(--color-gray--1);
+  font-weight: var(--font-weight--bold);
+}
+
+.Button--level-primary:disabled,
+.Button--level-primary[disabled] {
+  border-color: var(--color-gray--5);
+  background-image: linear-gradient(to bottom, var(--color-gray--4), var(--color-gray--5));
+}
+
+.Button--level-primary::before {
+  opacity: 1;
+  background-image: linear-gradient(to bottom, #6C0EB2, #450674);
+}
+
+.Button--level-primary::after {
+  opacity: 0;
+  background-image: linear-gradient(to bottom, #50167B, #3D125D);
+}
+
+.Button--level-secondary {
+  border-color: var(--color-gray--3);
+  background-color: var(--color-gray--2);
+  color: var(--color-grape--5);
+}
+
+.Button--level-secondary:disabled,
+.Button--level-secondary[disabled] {
+  border-color: var(--color-gray--3);
+  background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray--1));
+  color: var(--color-gray--5);
+}
+
+.Button--level-secondary:active:not(:disabled) {
+  border-color: var(--color-eggplant);
+  background-color: var(--color-grape--5);
+  color: var(--color-gray--1);
+}
+
+.Button--level-secondary::before {
+  opacity: 1;
+  background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray--1));
+}
+
+.Button--level-secondary::after {
+  content: none;
+  opacity: 0;
+}
+
+.Button--level-tertiary {
+  border-color: transparent;
+  background-color: transparent;
+  color: var(--color-grape--3);
+}
+
+.Button--level-tertiary:disabled,
+.Button--level-tertiary[disabled] {
+  color: var(--color-gray--5);
+}
+
+.Button--level-tertiary:hover:not(:disabled),
+.Button--level-tertiary:hover:not([disabled]) {
+  background-color: var(--color-grape--1);
+}
+
+.Button--level-tertiary:active:not(:disabled),
+.Button--level-tertiary:active:not([disabled]) {
+  background-color: var(--color-grape--5);
+  color: var(--color-gray--1);
+}
+
+.Button--variant-danger.Button--level-primary:not(:disabled),
+.Button--variant-danger.Button--level-primary:not([disabled]) {
+  border-color: #D4093C;
+  background-color: #C90032;
+}
+
+.Button--variant-danger.Button--level-primary:not(:disabled):active,
+.Button--variant-danger.Button--level-primary:not([disabled]):active {
+  border-color: #D4093C;
+  background-color: var(--color-red--5);
+}
+
+.Button--variant-danger.Button--level-primary:not(:disabled)::before,
+.Button--variant-danger.Button--level-primary:not([disabled])::before {
+  background-image: linear-gradient(to bottom, #FF2158, #E41447);
+}
+
+.Button--variant-danger.Button--level-primary:not(:disabled)::after,
+.Button--variant-danger.Button--level-primary:not([disabled])::after {
+  content: none;
+}
+
+.Button--variant-danger.Button--level-secondary:not(:disabled),
+.Button--variant-danger.Button--level-secondary:not([disabled]) {
+  border-color: var(--color-gray--3);
+  background-color: var(--color-red--1);
+  color: var(--color-red--3);
+}
+
+.Button--variant-danger.Button--level-secondary:not(:disabled):hover,
+.Button--variant-danger.Button--level-secondary:not([disabled]):hover {
+  border-color: var(--color-red--2);
+}
+
+.Button--variant-danger.Button--level-secondary:not(:disabled):active,
+.Button--variant-danger.Button--level-secondary:not([disabled]):active {
+  border-color: #D4093C;
+  background-color: var(--color-red--5);
+  color: var(--color-gray--1);
+}
+
+.Button--variant-danger.Button--level-secondary:not(:disabled)::before,
+.Button--variant-danger.Button--level-secondary:not([disabled])::before {
+  background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray--1));
+}
+
+.Button--variant-danger.Button--level-secondary:not(:disabled)::after,
+.Button--variant-danger.Button--level-secondary:not([disabled])::after {
+  content: none;
+}
+
+.Buttons--joined .Button:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.Buttons--joined .Button:not(:last-child) {
+  border-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}

package/src/Old/Button/Button.test.tsx

@@ -0,0 +1,29 @@
+import { shallow } from 'enzyme';
+import { shallowToJson } from 'enzyme-to-json';
+import Button from './Button';
+
+describe('Button', () => {
+  test('default template', () => {
+    expect(shallowToJson(shallow(<Button>Content</Button>))).toMatchSnapshot();
+  });
+
+  test('borderless', () => {
+    expect(shallowToJson(shallow(<Button borderless>Content</Button>))).toMatchSnapshot();
+  });
+
+  test('fullWidth', () => {
+    expect(shallowToJson(shallow(<Button fullWidth>Content</Button>))).toMatchSnapshot();
+  });
+
+  test('level', () => {
+    expect(shallowToJson(shallow(<Button level="primary">Content</Button>))).toMatchSnapshot();
+  });
+
+  test('size', () => {
+    expect(shallowToJson(shallow(<Button size="small">Content</Button>))).toMatchSnapshot();
+  });
+
+  test('variant', () => {
+    expect(shallowToJson(shallow(<Button variant="danger">Content</Button>))).toMatchSnapshot();
+  });
+});

package/src/Old/Button/Button.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import Flex, { Props as FlexProps } from '../Flex/Flex';
+import './Button.css';
+import ButtonSize from './ButtonSize';
+
+export interface Props extends FlexProps {
+  /**
+   * Removes the borders from the Button, useful for when used inside a w
+   * rapping container with custom borders
+   */
+  borderless?: boolean;
+  /**
+   * Allows the Button to fill the container space rather than shrinking
+   * down to the content
+   */
+  fullWidth?: boolean;
+  /** Sets the visual importance of the Button. */
+  level?: 'primary' | 'secondary' | 'tertiary';
+  /**
+   * Sets the size of the Button. Small allows the Button to fit
+   * into smaller spaces, while large will help the button stand
+   * out on a page with lots of space.
+   */
+  size?: ButtonSize;
+  /**
+   * Variant is another prop that changes the styles to indicate it's usage.
+   * For example "danger" is to let the user know this button performs a
+   * potentionally dangerous action.
+   */
+  variant?: 'danger';
+}
+
+/** Standard Button component */
+const Button: React.FunctionComponent<Props> = (props: Props) => {
+  const { borderless, className, fullWidth, level, size, variant, ...rest } = props;
+
+  const gap = size === 'small' ? 'x1' : 'x2';
+  const classes = classnames(className, 'Button', `Button--level-${level}`, `Button--size-${size}`, {
+    'Button--borderless': borderless,
+    'Button--full-width': fullWidth,
+    [`Button--variant-${variant}`]: variant,
+  });
+
+  return (
+    <Flex Component="button" {...rest} alignChildren="middle" className={classes} direction="horizontal" gap={gap} />
+  );
+};
+
+Button.defaultProps = {
+  level: 'secondary',
+  size: 'medium',
+};
+
+export default Button;

package/src/Old/Button/ButtonSize.ts

@@ -0,0 +1,3 @@
+type ButtonSize = 'small' | 'medium' | 'large';
+
+export default ButtonSize;

package/src/Old/Button/Buttons.test.tsx

@@ -0,0 +1,42 @@
+import { shallow } from 'enzyme';
+import { shallowToJson } from 'enzyme-to-json';
+import Button from './Button';
+import Buttons from './Buttons';
+
+describe('Buttons', () => {
+  test('default template', () => {
+    expect(
+      shallowToJson(
+        shallow(
+          <Buttons>
+            <Button>Content</Button>
+          </Buttons>,
+        ),
+      ),
+    ).toMatchSnapshot();
+  });
+
+  test('fullWidth', () => {
+    expect(
+      shallowToJson(
+        shallow(
+          <Buttons fullWidth>
+            <Button>Content</Button>
+          </Buttons>,
+        ),
+      ),
+    ).toMatchSnapshot();
+  });
+
+  test('joined', () => {
+    expect(
+      shallowToJson(
+        shallow(
+          <Buttons joined>
+            <Button>Content</Button>
+          </Buttons>,
+        ),
+      ),
+    ).toMatchSnapshot();
+  });
+});

package/src/Old/Button/Buttons.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import Flex, { Props as FlexProps } from '../Flex/Flex';
+
+export interface Props extends FlexProps {
+  /** */
+  fullWidth?: boolean;
+  gap?: FlexProps['gap'];
+  /** Connects any child components, when not provided they will be spaced out a little bit. */
+  joined?: boolean;
+}
+
+/** Parent component to any multiples of Buttons. */
+const Buttons: React.FunctionComponent<Props> = (props: Props) => {
+  const { fullWidth, gap, joined, ...rest } = props;
+  const classes = classnames('Buttons', {
+    'Buttons--joined': joined,
+  });
+
+  return (
+    <Flex
+      {...rest}
+      className={classes}
+      direction={fullWidth ? 'vertical' : 'horizontal'}
+      gap={joined && !fullWidth ? undefined : gap}
+    />
+  );
+};
+
+Buttons.defaultProps = {
+  gap: 'x2',
+};
+
+export default Buttons;

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

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button borderless 1`] = `
+<Flex
+  Component="button"
+  alignChildren="middle"
+  className="Button Button--level-secondary Button--size-medium Button--borderless"
+  direction="horizontal"
+  gap="x2"
+>
+  Content
+</Flex>
+`;
+
+exports[`Button default template 1`] = `
+<Flex
+  Component="button"
+  alignChildren="middle"
+  className="Button Button--level-secondary Button--size-medium"
+  direction="horizontal"
+  gap="x2"
+>
+  Content
+</Flex>
+`;
+
+exports[`Button fullWidth 1`] = `
+<Flex
+  Component="button"
+  alignChildren="middle"
+  className="Button Button--level-secondary Button--size-medium Button--full-width"
+  direction="horizontal"
+  gap="x2"
+>
+  Content
+</Flex>
+`;
+
+exports[`Button level 1`] = `
+<Flex
+  Component="button"
+  alignChildren="middle"
+  className="Button Button--level-primary Button--size-medium"
+  direction="horizontal"
+  gap="x2"
+>
+  Content
+</Flex>
+`;
+
+exports[`Button size 1`] = `
+<Flex
+  Component="button"
+  alignChildren="middle"
+  className="Button Button--level-secondary Button--size-small"
+  direction="horizontal"
+  gap="x1"
+>
+  Content
+</Flex>
+`;
+
+exports[`Button variant 1`] = `
+<Flex
+  Component="button"
+  alignChildren="middle"
+  className="Button Button--level-secondary Button--size-medium Button--variant-danger"
+  direction="horizontal"
+  gap="x2"
+>
+  Content
+</Flex>
+`;

package/src/Old/Button/__snapshots__/Buttons.test.tsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Buttons default template 1`] = `
+<Flex
+  className="Buttons"
+  direction="horizontal"
+  gap="x2"
+>
+  <Button
+    level="secondary"
+    size="medium"
+  >
+    Content
+  </Button>
+</Flex>
+`;
+
+exports[`Buttons fullWidth 1`] = `
+<Flex
+  className="Buttons"
+  direction="vertical"
+  gap="x2"
+>
+  <Button
+    level="secondary"
+    size="medium"
+  >
+    Content
+  </Button>
+</Flex>
+`;
+
+exports[`Buttons joined 1`] = `
+<Flex
+  className="Buttons Buttons--joined"
+  direction="horizontal"
+>
+  <Button
+    level="secondary"
+    size="medium"
+  >
+    Content
+  </Button>
+</Flex>
+`;