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

package/src/Old/Link/Link.css

@@ -1,44 +0,0 @@
-.Link {
-  color: inherit;
-  transition-property: color;
-  transition-duration: var(--transition-duration--fast);
-  transition-timing-function: var(--transition-timing-function);
-}
-
-.Link--underline {
-  text-decoration: underline;
-}
-
-.Link--color-grape-3 {
-  color: var(--color-grape--3);
-}
-
-.Link--color-grape-3:hover { color: var(--color-grape--4); }
-
-.Link--color-grape-5 {
-  color: var(--color-grape--5);
-}
-
-.Link--color-grape-5:hover { color: var(--color-grape--3); }
-
-.Link--color-gray-1 {
-  color: var(--color-gray--1);
-}
-
-.Link--color-gray-1:hover { color: var(--color-gray--2); }
-
-.Link--color-gray-5 {
-  color: var(--color-gray--5);
-}
-
-.Link--color-gray-5:hover { color: var(--color-gray--6); }
-
-.Link--color-white {
-  color: var(--color-white);
-}
-
-.Link--color-white:hover { color: var(--color-gray--1); }
-
-.Link:focus-visible {
-  box-shadow: none;
-}

package/src/Old/Link/Link.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Base, { Props as BaseProps } from '../Base/Base';
-import './Link.css';
-
-export type TypeLinkColor = 'purple.50' | 'purple.10' | 'neutral.95' | 'neutral.70' | 'neutral.100';
-
-export interface Props extends BaseProps {
-  Component?: BaseProps['Component'];
-  /** A subset of the base level color that has interaction styling */
-  color?: TypeLinkColor;
-  /** Applies an underline styling to the link */
-  underline?: boolean;
-}
-
-/** Styled link component */
-const Link: React.FunctionComponent<Props> = (props: Props) => {
-  const { className, color, underline, ...rest } = props;
-  const classes = classnames(className, 'Link', `Link--color-${color}`, {
-    'Link--underline': underline,
-  });
-
-  return <Base {...rest} className={classes} />;
-};
-
-Link.defaultProps = {
-  Component: 'a',
-};
-
-export default Link;

package/src/Old/Modal/Modal.css

@@ -1,67 +0,0 @@
-
-@keyframes ModalFadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes ModalFadeOut {
-  from { opacity: 1; }
-  to { opacity: 0; }
-}
-
-.Body--modal-open { overflow: hidden; }
-
-.Modal {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: var(--color-overlay--black);
-  overflow: auto;
-  z-index: var(--z-index-Modal);
-  animation-name: ModalFadeOut;
-  animation-duration: var(--transition-duration--fast);
-  animation-fill-mode: forwards;
-  animation-timing-function: var(--transition-timing-function);
-}
-
-.Modal__content {
-  max-width: 100%;
-  animation-duration: var(--transition-duration--fast);
-  animation-fill-mode: forwards;
-  animation-timing-function: var(--transition-timing-function);
-}
-
-.Modal__content,
-.Modal__content:first-child,
-.Modal__content:last-child {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-.Modal--visible {
-  animation-name: ModalFadeIn;
-}
-
-.Modal--visible .Modal__content {
-  animation-duration: var(--transition-duration-base);
-}
-
-.ModalHeader {
-  position: relative;
-}
-
-.ModalHeader__progress,
-.ModalHeader--with-separator::before {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-}
-
-.ModalHeader--with-separator::before {
-  content: '';
-  height: var(--size--x1);
-  background: linear-gradient(90deg, var(--color-grape--1) -28.36%, var(--color-grape--2) 100%);
-}

package/src/Old/Modal/Modal.tsx

@@ -1,117 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import { useEventListener } from '../hooks';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Portal from '../Portal/Portal';
-import { TypeColors } from '../Base/Base';
-import { ModalContext } from './ModalContext';
-import './Modal.css';
-
-const { useEffect, useState } = React;
-
-const enableScroll = () => document.body.classList.remove('Body--modal-open');
-const disableScroll = () => document.body.classList.add('Body--modal-open');
-
-export interface Props extends FlexProps {
-  /**
-   * Background color of the dialog box
-   */
-  backgroundColor?: TypeColors;
-  /**
-   * Flag to set the initial height of the dialog box to
-   * the full height available.
-   */
-  fullHeight?: boolean;
-  /**
-   * Callback that is called when clicking on the overlay
-   * area, useful for dismissing the modal.
-   */
-  onClose?: () => void;
-  /**
-   * Flag that controls the rendering and visibility of the
-   * modal to the user.
-   */
-  visible: boolean;
-  /**
-   * Width of the dialog box.
-   */
-  width: string;
-}
-
-/**
- * Modal component with overlay for interupting a user with
- * an important message or question.
- */
-const Modal: React.FunctionComponent<Props> = (props: Props) => {
-  const { backgroundColor, children, fullHeight, onClose, visible, width, ...rest } = props;
-
-  const [modalElement, setModalElement] = useState<HTMLElement | null>(null);
-  const [render, setRender] = useState(visible);
-
-  const classes = classnames('Modal', {
-    'Modal--visible': visible,
-  });
-
-  const handleClick = (event: React.SyntheticEvent) => {
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-  };
-
-  useEffect(() => {
-    if (visible) {
-      setRender(true);
-      disableScroll();
-    } else {
-      enableScroll();
-    }
-  }, [visible]);
-
-  useEventListener(
-    modalElement,
-    'animationend',
-    () => {
-      if (!visible) {
-        setRender(false);
-        setModalElement(null);
-      }
-    },
-    [visible],
-  );
-
-  if (!render) {
-    return null;
-  }
-
-  return (
-    <Portal element={document.body}>
-      <Flex
-        alignChildrenHorizontal="middle"
-        className={classes}
-        direction="vertical"
-        innerRef={setModalElement}
-        onClick={onClose}
-        padding="x6"
-      >
-        <Flex
-          backgroundColor={backgroundColor}
-          borderRadius="x2"
-          className="Modal__content"
-          direction="vertical"
-          grow={fullHeight}
-          onClick={handleClick}
-          width={width}
-          {...rest}
-        >
-          {/* eslint-disable-next-line react/jsx-no-constructed-context-values */}
-          <ModalContext.Provider value={{ modalElement, onClose }}>{children}</ModalContext.Provider>
-        </Flex>
-      </Flex>
-    </Portal>
-  );
-};
-
-Modal.defaultProps = {
-  backgroundColor: 'neutral.100',
-};
-
-export default Modal;

package/src/Old/Modal/ModalBody.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-
-export type Props = FlexProps;
-
-/**
- * Modal body wrapper with preset padding.
- */
-const ModalBody: React.FunctionComponent<Props> = (props: Props) => {
-  return <Flex grow {...props} />;
-};
-
-ModalBody.defaultProps = {
-  padding: 'x10',
-};
-
-export default ModalBody;

package/src/Old/Modal/ModalHeader.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import { Icon } from '@bitrise/bitkit';
-import Link from '../Link/Link';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import { ModalContext } from './ModalContext';
-
-const { useContext } = React;
-
-export interface Props extends FlexProps {
-  gap?: FlexProps['gap'];
-  padding?: FlexProps['padding'];
-  /**
-   * Flag to toggle the gradient separator
-   */
-  withSeparator?: boolean;
-}
-
-/**
- * Modal header wrapper with optional gradient separator.
- */
-const ModalHeader: React.FunctionComponent<Props> = (props: Props) => {
-  const { withSeparator, children, padding, paddingHorizontal = padding, paddingVertical = padding, ...rest } = props;
-  const { onClose } = useContext(ModalContext);
-
-  const classes = classnames('ModalHeader', {
-    'ModalHeader--with-separator': withSeparator,
-  });
-
-  return (
-    <Flex {...rest} className={classes} direction="horizontal">
-      <Flex grow initial="none" paddingHorizontal={paddingHorizontal} paddingVertical={paddingVertical}>
-        {children}
-      </Flex>
-      <Flex padding="x4">
-        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-        <Link clickable color="purple.10" onClick={onClose}>
-          <Icon name="CloseSmall" />
-        </Link>
-      </Flex>
-    </Flex>
-  );
-};
-
-ModalHeader.defaultProps = {
-  gap: 'x2',
-  padding: 'x6',
-};
-
-export default ModalHeader;

package/src/Old/Modal/ModalHeaderProgress.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import ProgressBar from '../Progress/ProgressBar';
-
-export interface Props extends FlexProps {
-  /** A number between 0 and 1 that represents the progress to display */
-  progress: number;
-}
-
-/**
- * ModalHeader progress bar
- */
-const ModalHeaderProgress: React.FunctionComponent<Props> = (props: Props) => {
-  const { progress, ...rest } = props;
-
-  return (
-    <Flex {...rest} className="ModalHeader__progress">
-      <ProgressBar foregroundColor="purple.40" height="4px" progress={progress} />
-    </Flex>
-  );
-};
-
-export default ModalHeaderProgress;

package/src/Old/Modal/ModalTitle.tsx

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import Text, { Props as TextProps } from '../Text/Text';
-
-export type Props = TextProps;
-
-/**
- * Modal specific styled text to appear as a title.
- */
-const ModalTitle: React.FunctionComponent<Props> = (props: Props) => {
-  return <Text {...props} letterSpacing="x1" margin="x4" size="5" textColor="purple.10" weight="bold" />;
-};
-
-export default ModalTitle;

package/src/Old/Progress/ProgressButtonContent.tsx

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import Base from '../Base/Base';
-import Visibility from '../Visibility/Visibility';
-import ButtonSize from '../Button/ButtonSize';
-import ProgressSpinner from './ProgressSpinner';
-
-export interface Props {
-  progressing: boolean;
-  children: React.ReactNode;
-  size?: ButtonSize;
-}
-
-/**
- * A progress indicator action button that is useful
- * to provide inline feedback that after a user action,
- * something is happening.
- */
-const ProgressButtonContent: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, progressing, size } = props;
-  const gap = size === 'small' ? 'x1' : 'x2';
-
-  return (
-    <Base container>
-      <Visibility alignChildren="middle" direction="horizontal" gap={gap} visible={!progressing}>
-        {children}
-      </Visibility>
-
-      <Visibility absolute="center" visible={progressing}>
-        {progressing && <ProgressSpinner size="1.5rem" />}
-      </Visibility>
-    </Base>
-  );
-};
-
-export default ProgressButtonContent;

package/src/Old/Sidebar/Sidebar.css

@@ -1,125 +0,0 @@
-/* stylelint-disable no-descending-specificity */
-
-.Sidebar__header,
-.Sidebar__menu {
-  border-bottom-width: 0.0625rem;
-  border-bottom-style: solid;
-}
-
-.Sidebar__menu:first-child {
-  border-top-width: 0.0625rem;
-  border-top-style: solid;
-}
-
-.Sidebar__header {
-  padding: var(--size--x4) var(--size--x6);
-}
-
-.Sidebar__menu-item {
-  position: relative;
-  overflow: hidden;
-  z-index: 0;
-}
-
-.Sidebar__menu-item::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: var(--size--x1);
-  opacity: 0;
-  border-radius: 0 var(--size--x1) var(--size--x1) 0;
-  background-color: var(--color-aqua--3);
-  transition-property: opacity;
-  transition-duration: var(--transition-duration--slow);
-  transition-timing-function: var(--transition-timing-function);
-}
-
-.Sidebar__menu-item-link {
-  position: relative;
-  padding: var(--size--x4) var(--size--x6);
-  cursor: pointer;
-}
-
-.Sidebar__menu-item-link::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  border-radius: var(--size--x2);
-  z-index: -1;
-  transition-property: transform, border-radius, background-color;
-  transition-duration: var(--transition-duration--base);
-  transition-timing-function: var(--transition-timing-function);
-}
-
-.Sidebar__menu-item--active::before,
-.Sidebar__menu-item--active:hover::before {
-  opacity: 1;
-}
-
-.Sidebar__menu-item--active .Sidebar__menu-item-link::before,
-.Sidebar__menu-item--active:hover .Sidebar__menu-item-link::before {
-  transform: scale(1.2);
-  border-radius: 0;
-}
-
-.Sidebar__sub-menu-item {
-  padding: var(--size--x2) var(--size--x6);
-  border-top-width: 0.0625rem;
-  border-top-style: solid;
-  cursor: pointer;
-  transition-property: background-color;
-  transition-duration: var(--transition-duration--base);
-  transition-timing-function: var(--transition-timing-function);
-}
-
-.Sidebar--theme-dark {
-  background-color: var(--color-grape--5);
-  color: var(--color-gray--1);
-}
-
-.Sidebar--theme-dark .Sidebar__header,
-.Sidebar--theme-dark .Sidebar__menu {
-  border-bottom-color: var(--color-grape--4);
-}
-
-.Sidebar--theme-dark .Sidebar__menu:first-child {
-  border-top-color: var(--color-grape--4);
-}
-
-.Sidebar--theme-dark .Sidebar__sub-menu-item {
-  border-top-color: var(--color-grape--5);
-}
-
-.Sidebar--theme-light {
-  background-color: var(--color-white);
-  color: var(--color-grape-5);
-}
-
-.Sidebar--theme-light .Sidebar__header,
-.Sidebar--theme-light .Sidebar__menu {
-  border-bottom-color: var(--color-gray--2);
-}
-
-.Sidebar--theme-light .Sidebar__menu:first-child {
-  border-top-color: var(--color-gray--2);
-}
-
-.Sidebar--theme-light .Sidebar__sub-menu-item,
-.Sidebar--theme-light .Sidebar__menu-item--active .Sidebar__menu-item-link::before,
-.Sidebar--theme-light .Sidebar__menu-item:hover .Sidebar__menu-item-link::before {
-  background-color: var(--color-gray--1);
-}
-
-.Sidebar--theme-light .Sidebar__sub-menu-item {
-  border-top-color: var(--color-gray--2);
-}
-
-.Sidebar--theme-light .Sidebar__sub-menu-item--active,
-.Sidebar--theme-light .Sidebar__sub-menu-item:hover {
-  background-color: var(--color-gray--2);
-}

package/src/Old/Sidebar/Sidebar.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import './Sidebar.css';
-
-export interface Props extends FlexProps {
-  theme?: 'dark' | 'light';
-}
-
-/**
- * A full sidebar navigation component that can include a combination
- * of top level and sub menus.
- */
-const Sidebar: React.FunctionComponent<Props> = (props: Props) => {
-  const { theme, ...rest } = props;
-  const classes = classnames('Sidebar', `Sidebar--theme-${theme}`);
-
-  return <Flex className={classes} grow {...rest} />;
-};
-
-Sidebar.defaultProps = {
-  theme: 'dark',
-};
-
-export default Sidebar;

package/src/Old/Sidebar/SidebarHeader.tsx

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

package/src/Old/Sidebar/SidebarMenu.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import Base, { Props as BaseProps } from '../Base/Base';
-import { SidebarMenuContext } from './SidebarMenuContext';
-
-const { useState } = React;
-
-export interface Props extends BaseProps {
-  /** Active flag that sets the visual state of the SidebarMenuItem and
-   * also expands the SidebarSubMenu, if there is one included.
-   */
-  active: boolean;
-}
-
-/**
- * Child of the Sidebar component that should include exactly one SidebarMenuItem
- * and an optional SidebarSubMenu.
- */
-const SidebarMenu: React.FunctionComponent<Props> = (props: Props) => {
-  const { active, ...rest } = props;
-  const [hasSubMenu, setHasSubMenu] = useState(false);
-
-  return (
-    // eslint-disable-next-line react/jsx-no-constructed-context-values
-    <SidebarMenuContext.Provider value={{ active, hasSubMenu, setHasSubMenu }}>
-      <Base {...rest} className="Sidebar__menu" />
-    </SidebarMenuContext.Provider>
-  );
-};
-
-export default SidebarMenu;

package/src/Old/Sidebar/SidebarMenuContext.ts

@@ -1,7 +0,0 @@
-import { createContext } from 'react';
-
-export const SidebarMenuContext = createContext({
-  active: false,
-  hasSubMenu: false,
-  setHasSubMenu: (hasSubMenu: boolean) => { hasSubMenu; },
-});

package/src/Old/Sidebar/SidebarMenuItem.tsx

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import { TypeIconName } from '../Icon/tsx';
-import Base, { Props as BaseProps } from '../Base/Base';
-import Flex from '../Flex/Flex';
-import Icon from '../Icon/Icon';
-import Visibility from '../Visibility/Visibility';
-import VisibilityContainer from '../Visibility/VisibilityContainer';
-import { SidebarMenuContext } from './SidebarMenuContext';
-
-const { useContext } = React;
-
-export interface Props extends BaseProps {
-  Component?: BaseProps['Component'];
-  /**
-   * Name of an icon (from the Icon component) that should
-   * appear next to the text.
-   */
-  icon?: TypeIconName;
-}
-
-/**
- * Child of the SidebarMenu component that is used to handle the
- * navigation when interacted with.
- */
-const SidebarMenuItem: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, icon, ...rest } = props;
-  const { active, hasSubMenu } = useContext(SidebarMenuContext);
-  const classes = classnames('Sidebar__menu-item', {
-    'Sidebar__menu-item--active': active,
-  });
-
-  return (
-    <Base className={classes} padding="x1">
-      <VisibilityContainer
-        {...rest}
-        alignChildrenVertical="middle"
-        className="Sidebar__menu-item-link"
-        direction="horizontal"
-        enabled={!active}
-        gap="x4"
-      >
-        {icon && (
-          <Flex>
-            <Icon name={icon} />
-          </Flex>
-        )}
-
-        <Flex grow initial="none">
-          {children}
-        </Flex>
-
-        {hasSubMenu && (
-          <Visibility>
-            <Icon name="ChevronDown" />
-          </Visibility>
-        )}
-      </VisibilityContainer>
-    </Base>
-  );
-};
-
-SidebarMenuItem.defaultProps = {
-  Component: 'a',
-};
-
-export default SidebarMenuItem;