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

package/src/Old/Sidebar/SidebarMenu.tsx

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

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

package/src/Old/Sidebar/SidebarMenuItem.tsx

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

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

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

@@ -2,7 +2,7 @@ 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 '../../Components/Text/Text';
+import Text from '../Text/Text';
 
 export type Props = FlexProps;
 
@@ -21,10 +21,10 @@ const Status404: React.FunctionComponent<Props> = (props: Props) => {
         gap={match('65rem') ? 'x8' : 'x4'}
         paddingHorizontal="x6"
       >
-        <Text align="center" size="7" fontWeight="bold">
+        <Text align="middle" size="7" weight="bold">
           404
         </Text>
-        <Text align="center" size="6" fontWeight="bold">
+        <Text align="middle" size="6" weight="bold">
           The coordinates you are looking for do not exist
         </Text>
       </Flex>

package/src/Old/Status/Status500.tsx

@@ -2,7 +2,7 @@ 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 '../../Components/Text/Text';
+import Text from '../Text/Text';
 
 export type Props = FlexProps;
 
@@ -20,15 +20,15 @@ const Status500: React.FunctionComponent<Props> = (props: Props) => {
         direction={match('65rem') ? 'horizontal' : 'vertical'}
         gap={match('65rem') ? 'x8' : 'x4'}
       >
-        <Text align="center" size="7" fontWeight="bold">
+        <Text align="middle" size="7" weight="bold">
           500
         </Text>
-        <Text align="center" size="2" textTransform="uppercase" fontWeight="bold">
+        <Text align="middle" size="2" uppercase weight="bold">
           Something went wrong
         </Text>
       </Flex>
 
-      <Text align="center" letterSpacing="8" marginY="20" size="4">
+      <Text align="middle" letterSpacing="x2" margin="x5" size="4">
         Everything is under control, we will be back soon. Until then keep refreshing your browser.
       </Text>
 

package/src/Old/Table/TableHeaderCell.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import Flex from '../Flex/Flex';
-import Icon from '../../Components/Icon/Icon';
+import Icon from '../Icon/Icon';
 import Text, { Props as TextProps } from '../Text/Text';
 import Visibility from '../Visibility/Visibility';
 import VisibilityContainer from '../Visibility/VisibilityContainer';

package/src/Old/Tabs/Tab.tsx

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

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

@@ -0,0 +1,18 @@
+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/TextSizes.css

@@ -0,0 +1,39 @@
+.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/Toggle/Toggle.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Icon from '../../Components/Icon/Icon';
+import Icon from '../Icon/Icon';
 import './Toggle.css';
 
 export interface Props extends FlexProps {

package/src/Old/Tooltip/Tooltip.tsx

@@ -0,0 +1,85 @@
+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/index.ts

@@ -1,4 +1,5 @@
 export { default as useCopyToClipboard } from './useCopyToClipboard';
 export { default as useEventListener } from './useEventListener';
 export { default as useMediaQuery } from './useMediaQuery';
+export { default as useResizeObserver } from './useResizeObserver';
 export { default as useSyncedStateAndProps } from './useSyncedStateAndProps';

package/src/Old/hooks/useResizeObserver.ts

@@ -0,0 +1,40 @@
+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];
+};

package/src/Old/variables.css

@@ -206,5 +206,6 @@
   --z-index-Header: 1;
   --z-index-Sidebar: 1;
   --z-index-Placement--below-modal: 2;
+  --z-index-Modal: 3;
   --z-index-Placement--above-modal: 4;
 }

package/src/Old/variables.ts

@@ -1,4 +1,5 @@
 import colors from '../Foundations/Colors/Colors';
+import { IconList } from './Icon/tsx';
 
 export const colorWhite = '#FFFFFF';
 export const colorBlack = '#222222';
@@ -291,6 +292,8 @@ export const sizeX10 = 40;
 export const sizeX12 = 48;
 export const sizeX16 = 64;
 
+export const icons = IconList;
+
 export const fontSize1Px = 11;
 export const fontSize2Px = 14;
 export const fontSize3Px = 16;

package/src/index.ts

@@ -98,6 +98,9 @@ export { default as DialogBody } from './Components/Dialog/DialogBody';
 export type { DialogFooterProps } from './Components/Dialog/DialogFooter';
 export { default as DialogFooter } from './Components/Dialog/DialogFooter';
 
+export type { FadeProps } from './Components/Transitions/Fade';
+export { default as Fade } from './Components/Transitions/Fade';
+
 export type { PopoverProps } from './Components/Popover/Popover';
 export { default as Popover } from './Components/Popover/Popover';
 
@@ -130,4 +133,10 @@ export { default as RadioGroup } from './Components/Form/Radio/RadioGroup';
 export type { ImageProps } from './Components/Image/Image';
 export { default as Image } from './Components/Image/Image';
 
+export type { BreadcrumbProps } from './Components/Breadcrumb/Breadcrumb';
+export { default as Breadcrumb } from './Components/Breadcrumb/Breadcrumb';
+
+export type { BreadcrumbLinkProps } from './Components/Breadcrumb/BreadcrumbLink';
+export { default as BreadcrumbLink } from './Components/Breadcrumb/BreadcrumbLink';
+
 export { BREAKPOINTS } from './Foundations/Breakpoints/Breakpoints';

package/src/old.ts

@@ -6,12 +6,39 @@ import * as hooks from './Old/hooks';
 export { variables };
 export { hooks };
 
+export type { Props as AddonBeamProps } from './Old/AddonBeam/AddonBeam';
+export { default as AddonBeam } from './Old/AddonBeam/AddonBeam';
+
+export type { Props as AddonBeamLinkProps } from './Old/AddonBeam/AddonBeamLink';
+export { default as AddonBeamLink } from './Old/AddonBeam/AddonBeamLink';
+
+export type { Props as AddonFooterProps } from './Old/AddonFooter/AddonFooter';
+export { default as AddonFooter } from './Old/AddonFooter/AddonFooter';
+
+export type { Props as AppLayoutProps } from './Old/AppLayout/AppLayout';
+export { default as AppLayout } from './Old/AppLayout/AppLayout';
+
+export type { Props as AppLayoutBodyProps } from './Old/AppLayout/AppLayoutBody';
+export { default as AppLayoutBody } from './Old/AppLayout/AppLayoutBody';
+
+export type { Props as AppLayoutHeaderProps } from './Old/AppLayout/AppLayoutHeader';
+export { default as AppLayoutHeader } from './Old/AppLayout/AppLayoutHeader';
+
+export type { Props as AppLayoutMainProps } from './Old/AppLayout/AppLayoutMain';
+export { default as AppLayoutMain } from './Old/AppLayout/AppLayoutMain';
+
+export type { Props as AppLayoutSidebarProps } from './Old/AppLayout/AppLayoutSidebar';
+export { default as AppLayoutSidebar } from './Old/AppLayout/AppLayoutSidebar';
+
 export type { Props as BaseProps } from './Old/Base/Base';
 export type { TypeBorderRadius } from './Old/Base/Base';
 export type { TypeColors } from './Old/Base/Base';
 export type { TypeSizes } from './Old/Base/Base';
 export { default as Base } from './Old/Base/Base';
 
+export type { Props as BoundsProps } from './Old/Bounds/Bounds';
+export { default as Bounds } from './Old/Bounds/Bounds';
+
 export type { Props as DatePickerProps } from './Old/DatePicker/DatePicker';
 export { default as DatePicker } from './Old/DatePicker/DatePicker';
 
@@ -36,6 +63,9 @@ export { default as DropdownMenuItemGroup } from './Old/Dropdown/DropdownMenuIte
 export type { Props as ExpandProps } from './Old/Expand/Expand';
 export { default as Expand } from './Old/Expand/Expand';
 
+export type { Props as ExternalLinkProps } from './Old/ExternalLink/ExternalLink';
+export { default as ExternalLink } from './Old/ExternalLink/ExternalLink';
+
 export type { Props as FlexProps } from './Old/Flex/Flex';
 export { default as Flex } from './Old/Flex/Flex';
 
@@ -63,6 +93,22 @@ export { default as InputLabel } from './Old/Input/InputLabel';
 export type { Props as LogoProps } from './Old/Logo/Logo';
 export { default as Logo } from './Old/Logo/Logo';
 
+export type { Props as ModalProps } from './Old/Modal/Modal';
+export { default as Modal } from './Old/Modal/Modal';
+
+export type { Props as ModalBodyProps } from './Old/Modal/ModalBody';
+export { default as ModalBody } from './Old/Modal/ModalBody';
+
+export type { Props as ModalHeaderProps } from './Old/Modal/ModalHeader';
+// eslint-disable-next-line import/no-cycle
+export { default as ModalHeader } from './Old/Modal/ModalHeader';
+
+export type { Props as ModalHeaderProgressProps } from './Old/Modal/ModalHeaderProgress';
+export { default as ModalHeaderProgress } from './Old/Modal/ModalHeaderProgress';
+
+export type { Props as ModalTitleProps } from './Old/Modal/ModalTitle';
+export { default as ModalTitle } from './Old/Modal/ModalTitle';
+
 export type { Props as NotificationProps } from './Old/Notification/Notification';
 export { default as Notification } from './Old/Notification/Notification';
 
@@ -99,6 +145,24 @@ export { default as RadioButton } from './Old/RadioButton/RadioButton';
 export type { Props as RibbonProps } from './Old/Ribbon/Ribbon';
 export { default as Ribbon } from './Old/Ribbon/Ribbon';
 
+export type { Props as SidebarProps } from './Old/Sidebar/Sidebar';
+export { default as Sidebar } from './Old/Sidebar/Sidebar';
+
+export type { Props as SidebarHeaderProps } from './Old/Sidebar/SidebarHeader';
+export { default as SidebarHeader } from './Old/Sidebar/SidebarHeader';
+
+export type { Props as SidebarMenuProps } from './Old/Sidebar/SidebarMenu';
+export { default as SidebarMenu } from './Old/Sidebar/SidebarMenu';
+
+export type { Props as SidebarMenuItemProps } from './Old/Sidebar/SidebarMenuItem';
+export { default as SidebarMenuItem } from './Old/Sidebar/SidebarMenuItem';
+
+export type { Props as SidebarSubMenuProps } from './Old/Sidebar/SidebarSubMenu';
+export { default as SidebarSubMenu } from './Old/Sidebar/SidebarSubMenu';
+
+export type { Props as SidebarSubMenuItemProps } from './Old/Sidebar/SidebarSubMenuItem';
+export { default as SidebarSubMenuItem } from './Old/Sidebar/SidebarSubMenuItem';
+
 export type { Props as SkeletonProps } from './Old/Skeleton/Skeleton';
 export { default as Skeleton } from './Old/Skeleton/Skeleton';