@bitrise/bitkit 10.2.0 → 10.2.3-alpha-chakra.1

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;

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/Status/Status404.tsx

@@ -1,43 +0,0 @@
-import * as React from 'react';
-import { useMediaQuery } from '../hooks';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Image from '../Image/Image';
-import Text from '../Text/Text';
-
-export type Props = FlexProps;
-
-/**
- * A composite component used as a placeholder page for when there
- * is a 404 page cannot be found error.
- */
-const Status404: React.FunctionComponent<Props> = (props: Props) => {
-  const match = useMediaQuery(['65rem']);
-
-  return (
-    <Flex {...props}>
-      <Flex
-        alignChildren="middle"
-        direction={match('65rem') ? 'horizontal' : 'vertical'}
-        gap={match('65rem') ? 'x8' : 'x4'}
-        paddingHorizontal="x6"
-      >
-        <Text align="middle" size="7" weight="bold">
-          404
-        </Text>
-        <Text align="middle" size="6" weight="bold">
-          The coordinates you are looking for do not exist
-        </Text>
-      </Flex>
-
-      <Flex container grow height="33.125rem" overflow="hidden">
-        <Image
-          absolute="center"
-          height="530px"
-          src="https://bitrise-bitkit.s3.us-east-2.amazonaws.com/assets/Status404.svg"
-        />
-      </Flex>
-    </Flex>
-  );
-};
-
-export default Status404;

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/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];
-};