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

package/src/Old/Sidebar/SidebarSubMenu.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import Expand, { Props as ExpandProps } from '../Expand/Expand';
-import { SidebarMenuContext } from './SidebarMenuContext';
-
-const { useContext, useEffect } = React;
-
-export type Props = Omit<ExpandProps, 'expanded'>;
-
-/**
- * Child of the SidebarMenu component that is used to insert an
- * expandable submenu that is visible when the parent SidebarMenu
- * component is active.
- */
-const SidebarSubMenu: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, ...rest } = props;
-  const { active, setHasSubMenu } = useContext(SidebarMenuContext);
-
-  useEffect(() => {
-    setHasSubMenu(true);
-
-    return () => {
-      setHasSubMenu(false);
-    };
-  }, []);
-
-  return (
-    <Expand {...rest} className="Sidebar__sub-menu" expanded={active}>
-      {children}
-    </Expand>
-  );
-};
-
-export default SidebarSubMenu;

package/src/Old/Sidebar/SidebarSubMenuItem.tsx

@@ -1,59 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Icon from '../Icon/Icon';
-import { TypeIconName } from '../Icon/tsx';
-
-export interface Props extends FlexProps {
-  /**
-   * Active flag that sets the visual state.
-   */
-  active: boolean;
-  /**
-   * Name of an icon (from the Icon component) that should
-   * appear next to the text.
-   */
-  icon?: TypeIconName;
-  /** onClick event handler. */
-  onClick?: (event: React.SyntheticEvent) => void;
-}
-
-/**
- * Child of the SidebarSubMenu component that is used to handle the
- * navigation when interacted with.
- */
-const SidebarSubMenuItem: React.FunctionComponent<Props> = (props: Props) => {
-  const { active, children, icon, onClick, ...rest } = props;
-  const classes = classnames('Sidebar__sub-menu-item', {
-    'Sidebar__sub-menu-item--active': active,
-  });
-
-  const handleClick = (event: React.SyntheticEvent) => {
-    event.stopPropagation();
-
-    if (onClick) {
-      onClick(event);
-    }
-  };
-
-  return (
-    <Flex
-      {...rest}
-      alignChildrenVertical="middle"
-      className={classes}
-      direction="horizontal"
-      gap="x4"
-      onClick={handleClick}
-    >
-      {icon && (
-        <Flex>
-          <Icon name={icon} textColor="purple.70" />
-        </Flex>
-      )}
-
-      <Flex>{children}</Flex>
-    </Flex>
-  );
-};
-
-export default SidebarSubMenuItem;

package/src/Old/Tabs/Tab.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 {
-  /** Sets the styling to indicate that the tab is active. */
-  active?: boolean;
-}
-
-/**
- * Individual navigation item component that should be a direct
- * descendant of the Tabs component.
- */
-const Tab: React.FunctionComponent<Props> = (props: Props) => {
-  const { active, ...rest } = props;
-  const classes = classnames('Tabs__tab', {
-    'Tabs__tab--active': active,
-  });
-
-  return <Text {...rest} className={classes} letterSpacing="x2" uppercase weight="bold" />;
-};
-
-export default Tab;

package/src/Old/Tabs/Tabs.css

@@ -1,30 +0,0 @@
-.Tabs__tab {
-  position: relative;
-  padding-top: var(--size--x3);
-  padding-bottom: var(--size--x3);
-  color: var(--color-eggplant);
-  cursor: pointer;
-}
-
-.Tabs__tab::before {
-  content: '';
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: 0.1875rem;
-  border-top-left-radius: var(--size--x1);
-  border-top-right-radius: var(--size--x1);
-  background-color: transparent;
-  transition-property: background-color, color;
-  transition-duration: var(--transition-duration--fast);
-  transition-timing-function: var(--transition-timing-function);
-}
-
-.Tabs__tab--active {
-  color: var(--color-grape--5);
-}
-
-.Tabs__tab--active::before {
-  background-color: var(--color-aqua--3);
-}

package/src/Old/Tabs/Tabs.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import './Tabs.css';
-
-export type Props = FlexProps;
-
-/**
- * Tabular navigation component, that holds the Tab components.
- */
-const Tabs: React.FunctionComponent<Props> = (props: Props) => {
-  return <Flex {...props} direction="horizontal" />;
-};
-
-Tabs.defaultProps = {
-  gap: 'x16',
-};
-
-export default Tabs;

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;

package/src/Old/Text/TextSizes.css

@@ -1,39 +0,0 @@
-.Text--size-1 {
-  font-size: var(--fontSizes-1);
-  line-height: var(--lineHeights-1);
-}
-
-.Text--size-2 {
-  font-size: var(--fontSizes-2);
-  line-height: var(--lineHeights-2);
-}
-
-.Text--size-3 {
-  font-size: var(--fontSizes-3);
-  line-height: var(--lineHeights-3);
-}
-
-.Text--size-4 {
-  font-size: var(--fontSizes-4);
-  line-height: var(--lineHeights-4);
-}
-
-.Text--size-5 {
-  font-size: var(--fontSizes-5);
-  line-height: var(--lineHeights-5);
-}
-
-.Text--size-6 {
-  font-size: var(--fontSizes-6);
-  line-height: var(--lineHeights-6);
-}
-
-.Text--size-7 {
-  font-size: var(--fontSizes-7);
-  line-height: var(--lineHeights-7);
-}
-
-.Text--size-8 {
-  font-size: var(--fontSizes-8);
-  line-height: var(--lineHeights-8);
-}

package/src/Old/Tooltip/Tooltip.tsx

@@ -1,85 +0,0 @@
-import * as React from 'react';
-import { ReferenceChildrenProps } from 'react-popper';
-import { Placement as TypePlacement } from '@popperjs/core';
-import { Props as BaseProps } from '../Base/Base';
-import Placement from '../Placement/Placement';
-import PlacementArea from '../Placement/PlacementArea';
-import PlacementManager from '../Placement/PlacementManager';
-import PlacementReference from '../Placement/PlacementReference';
-import Text from '../Text/Text';
-import { transitionDurationFast } from '../variables';
-
-const { useState } = React;
-
-interface TooltipChildrenProps extends ReferenceChildrenProps {
-  onMouseEnter?: () => void;
-  onMouseLeave?: () => void;
-}
-
-export interface Props extends BaseProps {
-  /** Render callback that passes the ref and event handlers onto a target */
-  children: (props: TooltipChildrenProps) => React.ReactNode;
-  /** The content to be inserted into the tooltip. */
-  title: React.ReactNode;
-  /** Flag that controls the visibility of the tooltip */
-  visible?: boolean;
-  /** The desired animation speed on milliseconds. */
-  timeout?: number;
-  /** The desired placement direction */
-  placement?: TypePlacement;
-}
-
-/**
- * A simple tooltip component that shows textual content above
- * a target when the mouse is over it.
- */
-const Tooltip: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    backgroundColor = 'neutral.10',
-    borderRadius = 'x1',
-    children,
-    placement = 'top',
-    textColor = 'neutral.95',
-    title,
-    visible: controlledVisible,
-    timeout = transitionDurationFast,
-    ...rest
-  } = props;
-  const [uncontrolledVisible, setVisible] = useState(controlledVisible || false);
-  const isControlled = controlledVisible !== undefined;
-
-  const handleMouseEnter = () => setVisible(true);
-  const handleMouseLeave = () => setVisible(false);
-
-  return (
-    <PlacementManager>
-      <Placement
-        backgroundColor={backgroundColor}
-        borderRadius={borderRadius}
-        placement={placement}
-        textColor={textColor}
-        timeout={timeout}
-        {...rest}
-        visible={isControlled ? controlledVisible : uncontrolledVisible}
-      >
-        {() => (
-          <PlacementArea paddingHorizontal="x3" paddingVertical="x2" withArrow>
-            <Text size="2">{title}</Text>
-          </PlacementArea>
-        )}
-      </Placement>
-
-      <PlacementReference>
-        {(properties) =>
-          children({
-            ...properties,
-            onMouseEnter: isControlled ? undefined : handleMouseEnter,
-            onMouseLeave: isControlled ? undefined : handleMouseLeave,
-          })
-        }
-      </PlacementReference>
-    </PlacementManager>
-  );
-};
-
-export default Tooltip;

package/src/Old/hooks/useResizeObserver.ts

@@ -1,40 +0,0 @@
-import { useLayoutEffect, useState } from 'react';
-import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
-
-export type DOMRectReadOnlyWithoutToJSON = Omit<DOMRectReadOnly, 'toJSON'>;
-
-export default (): [DOMRectReadOnlyWithoutToJSON, (element: Element | null) => void] => {
-  const [node, setNode] = useState<Element | null>(null);
-  const [size, setSize] = useState<DOMRectReadOnlyWithoutToJSON>({
-    bottom: 0,
-    height: 0,
-    left: 0,
-    right: 0,
-    top: 0,
-    width: 0,
-    x: 0,
-    y: 0,
-  });
-
-  useLayoutEffect(() => {
-    const observer: ResizeObserver = new ResizeObserverPolyfill(([entry]) => {
-      if (entry) {
-        setSize(entry.contentRect);
-      }
-    });
-
-    if (node) {
-      observer.observe(node);
-    }
-
-    return () => {
-      if (node) {
-        observer.unobserve(node);
-      }
-
-      observer.disconnect();
-    };
-  }, [node]);
-
-  return [size, setNode];
-};