@superdispatch/ui-lab 0.21.11 → 0.21.12

package/src/sidebar/Sidebar.tsx

@@ -0,0 +1,73 @@
+import { Color, Column, Columns, useUID } from '@superdispatch/ui';
+import { forwardRef, ReactNode } from 'react';
+import styled from 'styled-components';
+import { TextBox } from '../text-box/TextBox';
+
+const SidebarRoot = styled.aside`
+  top: 0;
+  position: sticky;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  height: 100vh;
+  background-color: ${Color.White};
+  border-right: 1px solid ${Color.Silver400};
+`;
+
+const SidebarHeader = styled.div`
+  top: 0;
+  z-index: 2;
+  position: sticky;
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-bottom: 8px;
+  background-color: ${Color.White};
+`;
+
+const SidebarTitle = styled.div`
+  height: 64px;
+  max-height: 64px;
+  display: flex;
+  align-items: center;
+`;
+
+export interface SidebarProps {
+  id?: string;
+  title?: ReactNode;
+  count?: null | number;
+  header?: ReactNode;
+  children?: ReactNode;
+}
+
+export const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
+  ({ title, count, header, children, id: idProp }, ref) => {
+    const id = useUID(idProp);
+    const titleID = `${id}-title`;
+
+    return (
+      <SidebarRoot id={id} ref={ref}>
+        <SidebarHeader>
+          <SidebarTitle>
+            <Columns space="xsmall" align="center">
+              <Column width="fluid">
+                <TextBox variant="heading-2" noWrap={true} id={titleID}>
+                  {title}
+                </TextBox>
+              </Column>
+
+              {!!count && (
+                <Column width="content">
+                  <TextBox color="secondary">{count}</TextBox>
+                </Column>
+              )}
+            </Columns>
+          </SidebarTitle>
+
+          {header}
+        </SidebarHeader>
+
+        <div aria-labelledby={titleID}>{children}</div>
+      </SidebarRoot>
+    );
+  },
+);

package/src/sidebar/SidebarBackButton.tsx

@@ -0,0 +1,33 @@
+import { IconButton, IconButtonProps } from '@material-ui/core';
+import { ArrowBack } from '@material-ui/icons';
+import { useCollapseBreakpoint } from '@superdispatch/ui';
+import { ReactElement } from 'react';
+import { useSidebarContext } from './SidebarContainer';
+
+export function SidebarBackButton({
+  onClick,
+  children = <ArrowBack fontSize="small" />,
+  ...props
+}: IconButtonProps): ReactElement | null {
+  const isCollapsed = useCollapseBreakpoint('sm');
+  const { openSidebar } = useSidebarContext();
+
+  if (!isCollapsed) {
+    return null;
+  }
+
+  return (
+    <IconButton
+      {...props}
+      size="small"
+      onClick={(event) => {
+        onClick?.(event);
+        if (!event.isDefaultPrevented()) {
+          openSidebar();
+        }
+      }}
+    >
+      {children}
+    </IconButton>
+  );
+}

package/src/sidebar/SidebarContainer.tsx

@@ -0,0 +1,114 @@
+import { useCollapseBreakpoint } from '@superdispatch/ui';
+import {
+  createContext,
+  forwardRef,
+  ReactChild,
+  ReactNode,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import styled from 'styled-components';
+
+interface SidebarContext {
+  openSidebar: () => void;
+  openSidebarContent: () => void;
+}
+
+const Context = createContext<SidebarContext | null>(null);
+
+export function useSidebarContext(): SidebarContext {
+  const context = useContext(Context);
+
+  if (!context) {
+    throw new Error('SidebarContext is used outside Provider');
+  }
+
+  return context;
+}
+
+const SidebarContainerSidebar = styled.div`
+  height: inherit;
+  max-height: inherit;
+  min-height: inherit;
+
+  width: 240px;
+`;
+
+const SidebarContainerContent = styled.div`
+  height: inherit;
+  max-height: inherit;
+  min-height: inherit;
+`;
+
+const SidebarContainerRoot = styled.div`
+  display: flex;
+
+  height: inherit;
+  max-height: inherit;
+  min-height: inherit;
+
+  & ${SidebarContainerContent} {
+    width: calc(100% - 240px);
+    min-width: calc(100% - 240px);
+    max-width: calc(100% - 240px);
+  }
+
+  &[data-visibility='sidebar'] ${SidebarContainerSidebar} {
+    width: 100%;
+  }
+
+  &[data-visibility='sidebar'] ${SidebarContainerContent} {
+    display: none;
+  }
+
+  &[data-visibility='content'] ${SidebarContainerSidebar} {
+    display: none;
+  }
+
+  &[data-visibility='content'] ${SidebarContainerContent} {
+    width: 100%;
+    max-width: unset;
+  }
+`;
+
+export interface SidebarContainerProps {
+  sidebar: ReactChild;
+  children?: ReactNode;
+}
+
+type SidebarContainerVisibility = 'both' | 'sidebar' | 'content';
+
+export const SidebarContainer = forwardRef<
+  HTMLDivElement,
+  SidebarContainerProps
+>(({ sidebar, children }, ref) => {
+  const isCollapsed = useCollapseBreakpoint('sm');
+  const [visibilityState, setVisibilityState] =
+    useState<SidebarContainerVisibility>('sidebar');
+
+  const visibility: SidebarContainerVisibility = isCollapsed
+    ? visibilityState
+    : 'both';
+
+  const context = useMemo<SidebarContext>(() => {
+    return {
+      openSidebar: () => {
+        setVisibilityState('sidebar');
+      },
+      openSidebarContent: () => {
+        setVisibilityState('content');
+      },
+    };
+  }, []);
+
+  return (
+    <Context.Provider value={context}>
+      <SidebarContainerRoot ref={ref} data-visibility={visibility}>
+        <SidebarContainerSidebar>{sidebar}</SidebarContainerSidebar>
+
+        <SidebarContainerContent>{children}</SidebarContainerContent>
+      </SidebarContainerRoot>
+    </Context.Provider>
+  );
+});

package/src/sidebar/SidebarContent.tsx

@@ -0,0 +1,119 @@
+import { AppBar, Toolbar } from '@material-ui/core';
+import { Column, Columns, Stack, SuperDispatchTheme } from '@superdispatch/ui';
+import {
+  MouseEvent,
+  ReactElement,
+  ReactNode,
+  useLayoutEffect,
+  useRef,
+} from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../box/Box';
+import { TextBox } from '../text-box/TextBox';
+import { SidebarBackButton } from './SidebarBackButton';
+import { useSidebarContext } from './SidebarContainer';
+
+const SidebarAppBar = styled(AppBar)(
+  ({ theme }: { theme: SuperDispatchTheme }) => {
+    return css`
+      ${theme.breakpoints.up('sm')} {
+        && {
+          border-left: transparent;
+        }
+      }
+    `;
+  },
+);
+
+const ToolbarContent = styled.div`
+  flex: 1;
+  padding: 16px;
+`;
+
+export interface SidebarContentProps {
+  dense?: boolean;
+  title: ReactNode;
+  children: ReactNode;
+  action?: ReactNode;
+  openOnMount?: boolean;
+  closeOnUnmount?: boolean;
+  onBack?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+
+export function SidebarContent({
+  dense,
+  action,
+  title,
+  children,
+  onBack,
+  openOnMount,
+  closeOnUnmount,
+}: SidebarContentProps): ReactElement {
+  const isOpenedOnMount = useRef<boolean>(false);
+  const isClosedOnMount = useRef<boolean>(false);
+
+  const { openSidebarContent, openSidebar } = useSidebarContext();
+
+  useLayoutEffect(() => {
+    if (openOnMount) {
+      if (isOpenedOnMount.current) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          '[SidebarContent]: "openOnMount" should not change during lifecycle of the component.',
+        );
+      } else {
+        isOpenedOnMount.current = true;
+        openSidebarContent();
+      }
+    }
+  }, [openOnMount, openSidebarContent]);
+
+  useLayoutEffect(() => {
+    return () => {
+      if (closeOnUnmount) {
+        if (isClosedOnMount.current) {
+          // eslint-disable-next-line no-console
+          console.warn(
+            '[SidebarContent]: "closeOnUnmount" should not change during lifecycle of the component.',
+          );
+        } else {
+          isClosedOnMount.current = true;
+          openSidebar();
+        }
+      }
+    };
+  }, [openSidebar, closeOnUnmount]);
+
+  return (
+    <Stack space="none">
+      <SidebarAppBar>
+        <Toolbar disableGutters={true}>
+          <ToolbarContent>
+            <Columns align={['top', 'center']} space="small">
+              <Column width="content">
+                <SidebarBackButton onClick={onBack} />
+              </Column>
+
+              <Column>
+                <Columns
+                  space="small"
+                  collapseBelow="tablet"
+                  reverse={[true, false]}
+                  align={['bottom', 'center']}
+                >
+                  <Column>
+                    <TextBox variant="heading-2">{title}</TextBox>
+                  </Column>
+
+                  {action && <Column width="content">{action}</Column>}
+                </Columns>
+              </Column>
+            </Columns>
+          </ToolbarContent>
+        </Toolbar>
+      </SidebarAppBar>
+
+      <Box padding={dense ? 'none' : ['small', 'medium']}>{children}</Box>
+    </Stack>
+  );
+}

package/src/sidebar/SidebarDivider.tsx

@@ -0,0 +1,15 @@
+import { Divider } from '@material-ui/core';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+
+const SidebarDividerRoot = styled.div`
+  padding: 20px 24px;
+`;
+
+export const SidebarDivider = forwardRef<HTMLDivElement>((_, ref) => {
+  return (
+    <SidebarDividerRoot ref={ref}>
+      <Divider />
+    </SidebarDividerRoot>
+  );
+});

package/src/sidebar/SidebarMenuItem.tsx

@@ -0,0 +1,211 @@
+import { ButtonBase } from '@material-ui/core';
+import { OpenInNew } from '@material-ui/icons';
+import { Color, Column, Columns, Inline, mergeRefs } from '@superdispatch/ui';
+import {
+  forwardRef,
+  MouseEvent,
+  ReactNode,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import styled, { css } from 'styled-components';
+import { TextBox } from '../text-box/TextBox';
+import { useSidebarContext } from './SidebarContainer';
+import { SidebarMenuItemContextProvider } from './SidebarMenuItemContext';
+
+interface SidebarMenuItemRootProps {
+  hasAvatar: boolean;
+}
+
+const SidebarMenuItemRoot = styled.div<SidebarMenuItemRootProps>(
+  ({ hasAvatar }) => {
+    const height = hasAvatar ? 48 : 40;
+
+    return css`
+      position: relative;
+
+      & > .MuiButtonBase-root {
+        width: 100%;
+        display: flex;
+        justify-content: flex-start;
+
+        padding-left: 24px;
+        padding-right: 24px;
+        height: ${height}px;
+        max-height: ${height}px;
+
+        &[aria-current='true'] {
+          background-color: ${Color.Silver200};
+          box-shadow: inset 4px 0 0 ${Color.Blue300};
+        }
+      }
+    `;
+  },
+);
+
+const SidebarMenuItemBadge = styled.div`
+  font-size: 12px;
+  line-height: 16px;
+  padding-left: 4px;
+  padding-right: 4px;
+  border-radius: 100px;
+
+  color: ${Color.Dark500};
+  background-color: ${Color.Silver300};
+
+  .MuiButtonBase-root[aria-current='true'] & {
+    color: ${Color.White};
+    background-color: ${Color.Dark450};
+  }
+`;
+
+const SidebarMenuItemSecondaryAction = styled.div`
+  top: 50%;
+  right: 24px;
+  position: absolute;
+  transform: translate3d(0, -50%, 0);
+`;
+
+export interface SidebarMenuItemProps {
+  selected?: boolean;
+  external?: boolean;
+  disabled?: boolean;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+
+  badge?: null | number;
+  action?: ReactNode;
+  avatar?: ReactNode;
+  children?: ReactNode;
+  openContentOnClick?: boolean;
+  secondaryActions?: ReactNode;
+}
+
+export const SidebarMenuItem = forwardRef<HTMLDivElement, SidebarMenuItemProps>(
+  (
+    {
+      action,
+      avatar,
+      onClick,
+      external,
+      children,
+      disabled,
+      selected,
+      secondaryActions,
+      badge: badgeProp,
+      openContentOnClick,
+    },
+    ref,
+  ) => {
+    const [hovered, setHovered] = useState(false);
+    const rootRef = useRef<HTMLDivElement>(null);
+    const actionsRef = useRef<HTMLDivElement>(null);
+    const actionsPlaceholderRef = useRef<HTMLDivElement>(null);
+    const { openSidebarContent } = useSidebarContext();
+    const { matches: isHoverSupported } = matchMedia('(hover: hover)');
+
+    useLayoutEffect(() => {
+      if (actionsRef.current && actionsPlaceholderRef.current) {
+        actionsPlaceholderRef.current.style.width = `${Math.max(
+          0,
+          actionsRef.current.offsetWidth - 8,
+        )}px`;
+      }
+    });
+
+    useLayoutEffect(() => {
+      const rootNode = rootRef.current;
+
+      if (rootNode) {
+        if (isHoverSupported) {
+          rootNode.addEventListener('mouseenter', () => {
+            setHovered(true);
+          });
+
+          rootNode.addEventListener('mouseleave', () => {
+            setHovered(false);
+          });
+        } else {
+          setHovered(true);
+        }
+      }
+    }, [isHoverSupported]);
+
+    const badge =
+      !badgeProp || !Number.isFinite(badgeProp)
+        ? null
+        : badgeProp > 999
+        ? '999+'
+        : badgeProp;
+
+    return (
+      <SidebarMenuItemRoot ref={mergeRefs(ref, rootRef)} hasAvatar={!!avatar}>
+        <ButtonBase
+          disabled={disabled}
+          aria-current={selected}
+          onClick={(event) => {
+            onClick?.(event);
+            if (!event.isDefaultPrevented() && openContentOnClick) {
+              openSidebarContent();
+            }
+          }}
+        >
+          <Columns align="center" space="xsmall">
+            <Column>
+              <Columns align="center" space="xsmall">
+                <Column width="fluid">
+                  <Columns align="center" space="xsmall">
+                    {!!avatar && (
+                      <SidebarMenuItemContextProvider
+                        hovered={hovered}
+                        disabled={disabled}
+                      >
+                        <Column width="content">{avatar}</Column>
+                      </SidebarMenuItemContextProvider>
+                    )}
+
+                    <Column width="adaptive">
+                      <TextBox
+                        variant={selected ? 'body-semibold' : 'body'}
+                        noWrap={true}
+                      >
+                        {children}
+                      </TextBox>
+                    </Column>
+
+                    {external && (
+                      <Column width="content">
+                        <OpenInNew color="action" fontSize="small" />
+                      </Column>
+                    )}
+                  </Columns>
+                </Column>
+              </Columns>
+            </Column>
+
+            {!!badge && (
+              <Column width="content">
+                <SidebarMenuItemBadge>{badge}</SidebarMenuItemBadge>
+              </Column>
+            )}
+
+            {(!!action || !!secondaryActions) && (
+              <Column width="content">
+                <div ref={actionsPlaceholderRef} />
+              </Column>
+            )}
+          </Columns>
+        </ButtonBase>
+
+        {(!!action || !!secondaryActions) && (
+          <SidebarMenuItemSecondaryAction ref={actionsRef}>
+            <Inline>
+              {hovered && secondaryActions}
+              {action}
+            </Inline>
+          </SidebarMenuItemSecondaryAction>
+        )}
+      </SidebarMenuItemRoot>
+    );
+  },
+);

package/src/sidebar/SidebarMenuItemAction.tsx

@@ -0,0 +1,27 @@
+import { IconButton, Tooltip, TooltipProps } from '@material-ui/core';
+import { forwardRef, ReactElement } from 'react';
+import styled from 'styled-components';
+
+const SidebarMenuItemActionRoot = styled(IconButton)`
+  & .MuiSvgIcon-root {
+    font-size: 16px;
+  }
+`;
+
+export interface SidebarMenuItemActionProps
+  extends Pick<TooltipProps, 'title' | 'placement'> {
+  children: ReactElement;
+}
+
+export const SidebarMenuItemAction = forwardRef<
+  HTMLButtonElement,
+  SidebarMenuItemActionProps
+>(({ title, placement, children }, ref) => {
+  return (
+    <Tooltip title={title} placement={placement}>
+      <SidebarMenuItemActionRoot ref={ref} size="small" edge="end">
+        {children}
+      </SidebarMenuItemActionRoot>
+    </Tooltip>
+  );
+});

package/src/sidebar/SidebarMenuItemAvatar.tsx

@@ -0,0 +1,59 @@
+import { Avatar, Checkbox } from '@material-ui/core';
+import { forwardRef, SyntheticEvent, useMemo } from 'react';
+import styled from 'styled-components';
+import { useSidebarMenuItemContext } from './SidebarMenuItemContext';
+
+function stopPropagation(event: SyntheticEvent): void {
+  event.stopPropagation();
+}
+
+const SidebarMenuItemAvatarCheckbox = styled.div`
+  margin: -5px;
+`;
+
+export interface SidebarMenuItemAvatarProps {
+  children: string;
+
+  value?: boolean;
+  onChange?: (checked: boolean) => void;
+}
+
+export const SidebarMenuItemAvatar = forwardRef<
+  HTMLDivElement,
+  SidebarMenuItemAvatarProps
+>(({ children, value, onChange }, ref) => {
+  const { hovered, disabled } = useSidebarMenuItemContext();
+
+  const initials = useMemo(() => {
+    const matches = children.match(/\b\w/g) || [];
+
+    const first = matches.shift() || '';
+    const last = matches.pop() || '';
+
+    return (first + last).toUpperCase();
+  }, [children]);
+
+  if (value === true || (hovered && value != null)) {
+    return (
+      <SidebarMenuItemAvatarCheckbox>
+        <Checkbox
+          color="primary"
+          checked={value}
+          disabled={disabled}
+          onClick={stopPropagation}
+          onMouseDown={stopPropagation}
+          onTouchStart={stopPropagation}
+          onChange={(_, checked) => {
+            onChange?.(checked);
+          }}
+        />
+      </SidebarMenuItemAvatarCheckbox>
+    );
+  }
+
+  return (
+    <Avatar ref={ref} aria-hidden={true}>
+      {initials}
+    </Avatar>
+  );
+});

package/src/sidebar/SidebarMenuItemContext.tsx

@@ -0,0 +1,33 @@
+import {
+  createContext,
+  ReactElement,
+  ReactNode,
+  useContext,
+  useMemo,
+} from 'react';
+
+export interface SidebarMenuItemContext {
+  hovered?: boolean;
+  disabled?: boolean;
+}
+
+const context = createContext<SidebarMenuItemContext>({});
+
+export function useSidebarMenuItemContext(): SidebarMenuItemContext {
+  return useContext(context);
+}
+
+export interface SidebarMenuItemContextProviderProps
+  extends SidebarMenuItemContext {
+  children?: ReactNode;
+}
+
+export function SidebarMenuItemContextProvider({
+  children,
+  hovered = false,
+  disabled = false,
+}: SidebarMenuItemContextProviderProps): ReactElement {
+  const ctx = useMemo(() => ({ hovered, disabled }), [hovered, disabled]);
+
+  return <context.Provider value={ctx}>{children}</context.Provider>;
+}