@superdispatch/ui-lab 0.50.5 → 0.50.7

package/src/sidebar/SidebarContent.tsx

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

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

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

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

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

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

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

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

@@ -1,114 +0,0 @@
-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>
-);