@bitrise/bitkit 10.0.2 → 10.1.0-alpha-chakra.3

package/src/Components/Transitions/Fade.stories.tsx

@@ -1,26 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { useDisclosure } from '@chakra-ui/react';
-import Button from '../Button/Button';
-import Box from '../Box/Box';
-import Fade from './Fade';
-
-export default {
-  title: 'Components/Fade',
-  component: Fade,
-} as ComponentMeta<typeof Fade>;
-
-export const WithProps: ComponentStory<typeof Fade> = (props) => {
-  const { isOpen, onToggle } = useDisclosure();
-
-  return (
-    <Box height="200">
-      <Button onClick={onToggle}>Toggle fade transition</Button>
-
-      <Fade in={isOpen} {...props}>
-        <Box p="32" color="neutral.10" mt="4" bg="neutral.90">
-          Fade
-        </Box>
-      </Fade>
-    </Box>
-  );
-};

package/src/Components/Transitions/Fade.tsx

@@ -1,12 +0,0 @@
-import { Fade as ChakraFade, FadeProps, forwardRef } from '@chakra-ui/react';
-
-/**
- * Fade is a transition component
- */
-const Fade = forwardRef<FadeProps, 'div'>((props, ref) => {
-  return <ChakraFade {...props} ref={ref} />;
-});
-
-export type { FadeProps };
-
-export default Fade;

package/src/Old/AddonBeam/AddonBeam.css

@@ -1,16 +0,0 @@
-:root {
-  --AddonBeam--height: 3rem;
-}
-
-.AddonBeam {
-  min-height: var(--AddonBeam--height);
-  padding: 0.375rem 1.25rem;
-}
-
-.AddonBeam__link {
-  padding: 0.375rem var(--size--x2);
-  border-radius: var(--size--x2);
-  transition-property: background-color;
-  transition-duration: var(--transition-duration--base);
-  transition-timing-function: var(--transition-timing-function);
-}

package/src/Old/AddonBeam/AddonBeam.tsx

@@ -1,117 +0,0 @@
-import * as React from 'react';
-import { TypeIconName } from '../Icon/tsx';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Hamburger from '../Hamburger/Hamburger';
-import Icon from '../Icon/Icon';
-import Link from '../Link/Link';
-import Image from '../Image/Image';
-import Text from '../Text/Text';
-import AddonBeamLink from './AddonBeamLink';
-import './AddonBeam.css';
-
-export interface Props extends FlexProps {
-  /** The icon that appears to the very left of the beam that represents the add-on */
-  addonIcon: TypeIconName;
-  /** The name that appears next to the add-on icon */
-  addonName: string;
-  /** Image src for the Bitrise application */
-  appImage?: string;
-  /** Link back to the Bitrise application */
-  appLink?: string;
-  /** Name for the Bitrise application */
-  appName?: string;
-  /** Flag that indicates with a badge that the addon is in a Beta stage  */
-  isBeta?: boolean;
-  /** Flag for if the Hamburger menu icon should be in an active state */
-  isHamburgerIconActive?: boolean;
-  /** */
-  isInResponsiveView?: boolean;
-  /** Event handler for when the Hamburger menu item is clicked */
-  onHamburgerIconClick?: (event: React.SyntheticEvent) => void;
-}
-
-/** The common internal Add-on Beam for Bitrise made add-ons */
-const AddonBeam: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    addonIcon,
-    addonName,
-    appImage,
-    appLink,
-    appName,
-    children,
-    isBeta,
-    isHamburgerIconActive,
-    isInResponsiveView,
-    onHamburgerIconClick,
-    ...rest
-  } = props;
-
-  return (
-    <Flex
-      {...rest}
-      alignChildrenHorizontal="between"
-      alignChildrenVertical="middle"
-      className="AddonBeam"
-      container
-      direction="horizontal"
-    >
-      {isInResponsiveView && !!onHamburgerIconClick && (
-        <Flex>
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <Link color="neutral.100" onClick={onHamburgerIconClick}>
-            <Hamburger active={isHamburgerIconActive} />
-          </Link>
-        </Flex>
-      )}
-
-      <Flex
-        absolute={isInResponsiveView ? 'center' : undefined}
-        alignChildrenVertical="middle"
-        direction="horizontal"
-        gap="x2"
-      >
-        <Flex>
-          <Icon name={addonIcon} />
-        </Flex>
-
-        <Flex>
-          <Text size="3">
-            <Text inline weight="bold">
-              {addonName}
-            </Text>{' '}
-            by Bitrise
-          </Text>
-        </Flex>
-      </Flex>
-
-      {!isInResponsiveView && appName && (
-        <Flex absolute="center">
-          <AddonBeamLink href={appLink}>
-            <Flex alignChildrenVertical="middle" direction="horizontal" gap="x2">
-              {appImage && (
-                <Flex>
-                  <Image borderRadius="x1" height="1.5rem" src={appImage} width="1.5rem" />
-                </Flex>
-              )}
-
-              <Flex alignChildrenVertical="middle" direction="horizontal" gap="x1">
-                <Flex>{appName}</Flex>
-                <Flex>
-                  <Icon name="OpenInBrowser" />
-                </Flex>
-              </Flex>
-            </Flex>
-          </AddonBeamLink>
-        </Flex>
-      )}
-
-      {children && !isInResponsiveView && (
-        <Flex alignChildrenVertical="middle" direction="horizontal" gap="x6">
-          {children}
-        </Flex>
-      )}
-    </Flex>
-  );
-};
-
-export default AddonBeam;

package/src/Old/AddonBeam/AddonBeamLink.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { TypeIconName } from '../Icon/tsx';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Icon from '../Icon/Icon';
-
-export interface Props extends FlexProps {
-  Component?: FlexProps['Component'];
-  /** Name of the icon that appears next to the text of the link. */
-  icon?: TypeIconName;
-  /** @Ignore */
-  to?: string;
-}
-
-/**
- * Link that appears to the very right of the beam.
- */
-const AddonBeamLink: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, icon, ...rest } = props;
-
-  return (
-    <Flex {...rest} className="AddonBeam__link" direction="horizontal" gap="x1">
-      {icon && (
-        <Flex>
-          <Icon name={icon} />
-        </Flex>
-      )}
-
-      <Flex>{children}</Flex>
-    </Flex>
-  );
-};
-
-AddonBeamLink.defaultProps = {
-  Component: 'a',
-};
-
-export default AddonBeamLink;

package/src/Old/AddonFooter/AddonFooter.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Icon from '../Icon/Icon';
-import Text from '../Text/Text';
-
-export interface Props extends FlexProps {
-  /** Name of the add-on. */
-  addonName: string;
-}
-
-/** A common Bitrise footer component */
-const AddonFooter: React.FunctionComponent<Props> = ({ addonName, ...rest }: Props) => (
-  <Flex {...rest} alignChildren="middle" direction="vertical">
-    <Icon margin="x2" name="Bitbot" size="1.5rem" />
-    <Text align="middle" letterSpacing="x5" size="1" uppercase>
-      {addonName}
-    </Text>
-    <Text align="middle" letterSpacing="x5" size="1" uppercase>
-      An Official Bitrise Add-on
-    </Text>
-  </Flex>
-);
-
-export default AddonFooter;

package/src/Old/AppLayout/AppLayout.css

@@ -1,45 +0,0 @@
-.AppLayout__header,
-.AppLayout__sidebar {
-  position: sticky;
-}
-
-.AppLayout__header {
-  top: 0;
-  z-index: var(--z-index-Header);
-}
-
-.AppLayout__sidebar {
-  top: var(--AddonBeam--height);
-  width: 18.75rem;
-  height: calc(100vh - var(--AddonBeam--height));
-  background-color: var(--color-grape--5);
-  overflow: auto;
-  z-index: var(--z-index-Sidebar);
-}
-
-.AppLayout--responsive-view {
-  &.App--sidebar-visible {
-    max-height: 100vh;
-    overflow: hidden;
-  }
-
-  & .AppLayout__sidebar {
-    display: flex;
-    width: 100%;
-    margin-left: -100%;
-
-    /**
-     * "justify-contnet: flex-end" breaks the vertical scroll
-     *
-     * https://bugs.chromium.org/p/chromium/issues/detail?id=411624
-     * https://github.com/philipwalton/flexbugs/issues/53
-     */
-    & > :first-child {
-      margin-top: auto;
-    }
-  }
-
-  &.AppLayout--sidebar-visible .AppLayout__sidebar {
-    transform: translateX(100%);
-  }
-}

package/src/Old/AppLayout/AppLayout.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import './AppLayout.css';
-
-export interface Props extends FlexProps {
-  isInResponsiveView?: boolean;
-  isSidebarVisible?: boolean;
-}
-
-const AppLayout: React.FunctionComponent<Props> = (props: Props) => {
-  const { isInResponsiveView, isSidebarVisible, ...rest } = props;
-  const classes = classnames('AppLayout', {
-    'AppLayout--responsive-view': isInResponsiveView,
-    'AppLayout--sidebar-visible': isSidebarVisible,
-  });
-
-  return <Flex {...rest} className={classes} direction="vertical" grow />;
-};
-
-export default AppLayout;

package/src/Old/AppLayout/AppLayoutBody.tsx

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

package/src/Old/AppLayout/AppLayoutHeader.tsx

@@ -1,10 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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

package/src/Old/Avatar/Avatar.tsx

@@ -1,64 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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;