@superdispatch/ui-lab 0.50.3 → 0.50.5

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,196 @@
+import { alpha, ButtonBase } from '@material-ui/core';
+import { OpenInNew } from '@material-ui/icons';
+import {
+  Color,
+  ColorDynamic,
+  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, theme }) => {
+    const height = hasAvatar ? 48 : 40;
+    const mode = theme.palette.type;
+    const color =
+      mode === 'dark' ? alpha(Color.White, 0.08) : ColorDynamic.Silver200;
+    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};
+          box-shadow: inset 4px 0 0 ${ColorDynamic.Blue300};
+        }
+
+        &:hover {
+          background-color: ${color};
+        }
+      }
+    `;
+  },
+);
+
+const SidebarMenuItemBadge = styled.div`
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  padding-left: 4px;
+  padding-right: 4px;
+  border-radius: 100px;
+
+  color: ${ColorDynamic.Dark500};
+  background-color: ${ColorDynamic.Silver400};
+`;
+
+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 { openSidebarContent } = useSidebarContext();
+    const { matches: isHoverSupported } = matchMedia('(hover: hover)');
+
+    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>
+
+            {(!!action || !!secondaryActions) && (
+              <Column width="content">
+                <Inline>
+                  {(selected || hovered) && secondaryActions}
+                  {action}
+                </Inline>
+              </Column>
+            )}
+
+            {!!badge && (
+              <Column width="content">
+                <SidebarMenuItemBadge>{badge}</SidebarMenuItemBadge>
+              </Column>
+            )}
+          </Columns>
+        </ButtonBase>
+      </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>;
+}

package/src/sidebar/SidebarSubheader.tsx

@@ -0,0 +1,38 @@
+import { Column, Columns } from '@superdispatch/ui';
+import { forwardRef, ReactNode } from 'react';
+import styled from 'styled-components';
+import { TextBox } from '../text-box/TextBox';
+
+const SidebarSubheaderRoot = styled.div`
+  display: flex;
+  align-items: center;
+
+  height: 40px;
+  max-height: 40px;
+  padding-left: 24px;
+  padding-right: 24px;
+`;
+
+export interface SidebarSubheaderProps {
+  id?: string;
+  action?: ReactNode;
+  children?: ReactNode;
+}
+
+export const SidebarSubheader = forwardRef<
+  HTMLDivElement,
+  SidebarSubheaderProps
+>(({ id, action, children }, ref) => {
+  return (
+    <SidebarSubheaderRoot ref={ref}>
+      <Columns space="xsmall" align="center">
+        <Column>
+          <TextBox id={id} variant="heading-6" color="secondary" noWrap={true}>
+            {children}
+          </TextBox>
+        </Column>
+        {!!action && <Column width="content">{action}</Column>}
+      </Columns>
+    </SidebarSubheaderRoot>
+  );
+});

package/src/styled.d.ts

@@ -0,0 +1,12 @@
+import { SuperDispatchTheme } from '@superdispatch/ui';
+import 'styled-components';
+
+declare module 'styled-components' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends SuperDispatchTheme {}
+
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  export interface StyledConfig<O extends object = {}> {
+    displayName?: string;
+  }
+}

package/src/text-box/TextBox.stories.tsx

@@ -0,0 +1,114 @@
+import { Meta } from '@storybook/react';
+import { Column, Columns, Inline, Stack } from '@superdispatch/ui';
+import { Box } from '../box/Box';
+import { TextBox } from './TextBox';
+
+export default { title: 'Lab/TextBox', component: TextBox } as Meta;
+
+export const basic = () => (
+  <TextBox>
+    Hello{' '}
+    <span role="img" aria-label="waving hand">
+      👋
+    </span>
+  </TextBox>
+);
+
+export const alignment = () => (
+  <Columns space="xsmall">
+    <Column>
+      <Box backgroundColor="Silver400" padding="xsmall" borderRadius="small">
+        <TextBox align="right">Align Right</TextBox>
+      </Box>
+    </Column>
+
+    <Column>
+      <Box backgroundColor="Silver400" padding="xsmall" borderRadius="small">
+        <TextBox align="center">Align Center</TextBox>
+      </Box>
+    </Column>
+
+    <Column>
+      <Box backgroundColor="Silver400" padding="xsmall" borderRadius="small">
+        <TextBox align="left">Align Left</TextBox>
+      </Box>
+    </Column>
+  </Columns>
+);
+
+export const responsiveAlignment = () => (
+  <Box backgroundColor="Silver400" padding="xsmall" borderRadius="small">
+    <TextBox align={['center', 'right']}>Text</TextBox>
+  </Box>
+);
+
+export const colors = () => (
+  <Box backgroundColor="Silver400" borderRadius="small" padding="xsmall">
+    <Inline>
+      <TextBox color="primary">Primary</TextBox>
+      <TextBox color="secondary">Secondary</TextBox>
+      <TextBox color="disabled">Disabled</TextBox>
+      <TextBox color="white">White</TextBox>
+      <TextBox color="blue">Blue</TextBox>
+      <TextBox color="green">Green</TextBox>
+      <TextBox color="purple">Purple</TextBox>
+      <TextBox color="red">Red</TextBox>
+      <TextBox color="teal">Teal</TextBox>
+      <TextBox color="yellow">Yellow</TextBox>
+    </Inline>
+  </Box>
+);
+
+export const variants = () => (
+  <Stack>
+    <TextBox variant="heading-1">h1. Heading</TextBox>
+    <TextBox variant="heading-2">h2. Heading</TextBox>
+    <TextBox variant="heading-3">h3. Heading</TextBox>
+    <TextBox variant="heading-4">h4. Heading</TextBox>
+    <TextBox variant="heading-5">h5. Heading</TextBox>
+    <TextBox variant="heading-6">h6. Heading</TextBox>
+    <TextBox variant="body">
+      body. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
+      blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
+      neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti?
+    </TextBox>
+    <TextBox variant="body-block">
+      body-block. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
+      blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
+      neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti?
+    </TextBox>
+    <TextBox variant="body-semibold">
+      body-semibold. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore
+      consectetur, neque doloribus, cupiditate numquam dignissimos laborum
+      fugiat deleniti?
+    </TextBox>
+    <TextBox variant="caption">
+      caption. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
+      blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
+      neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti?
+    </TextBox>
+    <TextBox variant="hint">
+      hint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
+      blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
+      neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti?
+    </TextBox>
+  </Stack>
+);
+
+export const noWrap = () => (
+  <Box width="128px">
+    <TextBox noWrap={true}>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+    </TextBox>
+  </Box>
+);
+
+export const wrapOverflow = () => (
+  <Box width="128px">
+    <TextBox wrapOverflow={true}>
+      Most words are short and don‘t need to break. But
+      Antidisestablishmentarianism is long.
+    </TextBox>
+  </Box>
+);