@superdispatch/ui-lab 0.21.11 → 0.21.12

package/src/navbar/NavbarList.tsx

@@ -0,0 +1,225 @@
+import { IconButton } from '@material-ui/core';
+import { Menu as MenuIcon, MenuOpen } from '@material-ui/icons';
+import { Color, Inline, useResponsiveValue } from '@superdispatch/ui';
+import {
+  ComponentType,
+  HTMLAttributes,
+  Key,
+  MouseEvent,
+  ReactElement,
+  ReactNode,
+  useMemo,
+} from 'react';
+import styled from 'styled-components';
+import { NavbarAccordion, NavbarAccordionProps } from './NavbarAccordion';
+import { useNavbarContext } from './NavbarContext';
+import {
+  NavbarBadge,
+  NavbarItem,
+  NavbarItemProps,
+  NavbarLabel,
+} from './NavbarItem';
+
+const Header = styled.div`
+  margin: 0 16px 8px;
+
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+`;
+
+const Wrapper = styled.div<{ isMobile: boolean }>`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
+  overflow: hidden;
+  padding-top: 16px;
+  background: #1b2638;
+  transition: width 0.3s linear;
+
+  height: 100%;
+  width: ${({ isMobile }) => (isMobile ? '280px' : 'initial')};
+
+  &[data-expanded='true'] {
+    width: ${({ isMobile }) => (isMobile ? '280px' : '240px')};
+  }
+
+  &[data-expanded='false'] {
+    width: ${({ isMobile }) => (isMobile ? '280px' : '72px')};
+
+    & > ${Header} {
+      justify-content: center;
+    }
+  }
+`;
+
+const ExpandIconButton = styled(IconButton)`
+  color: ${Color.Silver500};
+
+  &&:focus {
+    background-color: inherit;
+  }
+`;
+
+const Footer = styled.div`
+  flex-grow: 1;
+  display: flex;
+  align-items: flex-end;
+  margin: 16px 0 8px;
+  position: sticky;
+`;
+
+const Root = styled.div`
+  color: inherit;
+  background-color: unset;
+  border-left: unset;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  text-decoration: none;
+  padding: 8px 16px;
+
+  svg {
+    font-size: 24px;
+    color: ${Color.Dark100};
+  }
+`;
+
+interface NavbarMenuItemProps {
+  icon?: ReactNode;
+  label: ReactNode;
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  component?: ComponentType<HTMLAttributes<HTMLElement>>;
+}
+
+export function NavbarMenuItem({
+  label,
+  icon,
+  onClick,
+  component,
+}: NavbarMenuItemProps): ReactElement {
+  return (
+    <Root as={component} onClick={onClick}>
+      <Inline space="xsmall" verticalAlign="center">
+        {icon}
+
+        <NavbarLabel>{label}</NavbarLabel>
+      </Inline>
+    </Root>
+  );
+}
+
+const Content = styled.div`
+  height: 100%;
+  min-height: 50px;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  &[aria-expanded='false'] {
+    ${NavbarBadge}, ${NavbarLabel} {
+      display: none;
+    }
+  }
+`;
+
+export interface NavbarAccordionOptions extends NavbarAccordionProps {
+  key: Key;
+  groupKey?: Key;
+  hide?: boolean;
+}
+export interface NavbarItemOptions extends NavbarItemProps {
+  key: Key;
+  groupKey?: Key;
+  hide?: boolean;
+}
+
+interface NavbarListProps {
+  header: ReactNode;
+  items: Array<NavbarItemOptions | NavbarAccordionOptions>;
+  footer?: ReactNode;
+}
+
+export function NavbarList({
+  header,
+  items,
+  footer,
+}: NavbarListProps): ReactElement {
+  const platform = useResponsiveValue('mobile', 'tablet', 'desktop');
+  const isMobile = platform === 'mobile';
+
+  const { isMenuExpanded, isDrawerOpen, setDrawerOpen, setMenuExpanded } =
+    useNavbarContext();
+
+  const isSidebarOpened = isMobile ? isDrawerOpen : isMenuExpanded;
+
+  const filteredItems: Array<NavbarItemOptions | NavbarAccordionOptions> =
+    useMemo(
+      () =>
+        items
+          .filter((item) => {
+            return !item.hide && (isSidebarOpened || !!item.icon);
+          })
+          .map((item) => ({
+            ...item,
+            menuGroupKey: item.groupKey,
+          })),
+      [items, isSidebarOpened],
+    );
+
+  return (
+    <Wrapper isMobile={isMobile} data-expanded={isSidebarOpened}>
+      <Header>
+        {isSidebarOpened && header}
+
+        {!isMobile && (
+          <ExpandIconButton
+            disableRipple={true}
+            style={isMenuExpanded ? { paddingRight: 0 } : {}}
+            onClick={() => {
+              setMenuExpanded(!isMenuExpanded);
+            }}
+          >
+            {isMenuExpanded ? <MenuOpen /> : <MenuIcon />}
+          </ExpandIconButton>
+        )}
+      </Header>
+
+      <Content aria-expanded={isSidebarOpened}>
+        {filteredItems.map((item) => {
+          const index = filteredItems.indexOf(item);
+          const prev = filteredItems[index - 1];
+
+          if ('items' in item) {
+            return (
+              <NavbarAccordion
+                {...item}
+                key={item.key}
+                gutter={prev && prev.groupKey !== item.groupKey}
+                onClick={item.onClick}
+              />
+            );
+          }
+          return (
+            <NavbarItem
+              {...item}
+              key={item.key}
+              gutter={prev && prev.groupKey !== item.groupKey}
+              onClick={(event) => {
+                item.onClick?.(event);
+
+                if (!event.isDefaultPrevented()) {
+                  setDrawerOpen(false);
+                }
+              }}
+            />
+          );
+        })}
+      </Content>
+
+      <Footer>{footer}</Footer>
+    </Wrapper>
+  );
+}

package/src/navbar/NavbarMenu.tsx

@@ -0,0 +1,102 @@
+import { Menu, MenuItem, Typography } from '@material-ui/core';
+import { Color, Inline } from '@superdispatch/ui';
+import { Key, MouseEvent, ReactElement, ReactNode, useState } from 'react';
+import styled from 'styled-components';
+import { useNavbarContext } from './NavbarContext';
+
+const Divider = styled.div`
+  border-bottom: 1px solid ${Color.Silver400};
+  margin: 8px -16px;
+`;
+
+const StyledMenuItem = styled(MenuItem)`
+  & svg {
+    font-size: 24px;
+    color: ${Color.Dark100};
+  }
+`;
+
+const Wrapper = styled.div<{ active?: boolean }>`
+  width: 100%;
+  padding: 8px 16px;
+  cursor: pointer;
+  background: ${Color.Dark400};
+
+  border-left: 4px solid
+    ${({ active }) => (active ? Color.Blue300 : 'transparent')};
+
+  &:hover {
+    border-left-color: ${Color.Blue300};
+    background: ${Color.Dark400};
+  }
+`;
+
+export interface NavbarMenuItemOption {
+  key: Key;
+  icon: ReactNode;
+  label: ReactNode;
+  visible?: boolean;
+  onClick: () => void;
+}
+
+interface NavbarMenuProps {
+  children: ReactNode;
+  items: NavbarMenuItemOption[];
+}
+
+export function NavbarMenu({ items, children }: NavbarMenuProps): ReactElement {
+  const { setDrawerOpen } = useNavbarContext();
+  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
+
+  function showProfileMenu(event: MouseEvent<HTMLElement>): void {
+    setAnchor(event.currentTarget);
+  }
+
+  function hideProfileMenu(): void {
+    setAnchor(null);
+    setDrawerOpen(false);
+  }
+
+  return (
+    <>
+      <Wrapper onClick={showProfileMenu} active={!!anchor}>
+        {children}
+      </Wrapper>
+
+      <Menu
+        open={!!anchor}
+        anchorEl={anchor}
+        onClose={hideProfileMenu}
+        onClick={hideProfileMenu}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+      >
+        {items
+          .filter((item) => item.visible !== false)
+          .flatMap((item, index, arr) => {
+            return [
+              <StyledMenuItem key={item.key} onClick={item.onClick}>
+                <Inline space="small" verticalAlign="center">
+                  {item.icon}
+
+                  <Typography style={{ color: Color.Dark500 }}>
+                    {item.label}
+                  </Typography>
+                </Inline>
+              </StyledMenuItem>,
+
+              index !== arr.length - 1 && (
+                <Divider key={`${item.key}-divider`} />
+              ),
+            ];
+          })}
+      </Menu>
+    </>
+  );
+}

package/src/sidebar/Sidebar.stories.tsx

@@ -0,0 +1,363 @@
+import { InputAdornment, TextField } from '@material-ui/core';
+import AddIcon from '@material-ui/icons/Add';
+import DeleteIcon from '@material-ui/icons/Delete';
+import EditIcon from '@material-ui/icons/Edit';
+import NotificationsIcon from '@material-ui/icons/Notifications';
+import NotificationsOffIcon from '@material-ui/icons/NotificationsOff';
+import SearchIcon from '@material-ui/icons/Search';
+import SettingsIcon from '@material-ui/icons/Settings';
+import { Meta } from '@storybook/react';
+import { Button, Stack } from '@superdispatch/ui';
+import { Placeholder } from '../../../__docs__';
+import { Box } from '../box/Box';
+import { Sidebar } from './Sidebar';
+import { SidebarContainer } from './SidebarContainer';
+import { SidebarContent } from './SidebarContent';
+import { SidebarDivider } from './SidebarDivider';
+import { SidebarMenuItem } from './SidebarMenuItem';
+import { SidebarMenuItemAction } from './SidebarMenuItemAction';
+import { SidebarMenuItemAvatar } from './SidebarMenuItemAvatar';
+import { SidebarSubheader } from './SidebarSubheader';
+
+export default {
+  title: 'Lab/Sidebar',
+  component: Sidebar,
+  subcomponents: {
+    SidebarContainer,
+    SidebarDivider,
+    SidebarMenuItem,
+    SidebarMenuItemAction,
+    SidebarMenuItemAvatar,
+    SidebarSubheader,
+  },
+} as Meta;
+
+export const basic = () => (
+  <SidebarContainer
+    sidebar={
+      <Sidebar title="Settings">
+        <SidebarMenuItem selected={true}>General</SidebarMenuItem>
+        <SidebarMenuItem>Terminals</SidebarMenuItem>
+        <SidebarMenuItem>Driver App</SidebarMenuItem>
+        <SidebarMenuItem>Billing</SidebarMenuItem>
+        <SidebarMenuItem>Factoring</SidebarMenuItem>
+        <SidebarMenuItem external={true}>
+          Quickbooks Integration
+        </SidebarMenuItem>
+        <SidebarMenuItem>Subscription Details</SidebarMenuItem>
+        <SidebarMenuItem external={true}>Notification Emails</SidebarMenuItem>
+        <SidebarMenuItem external={true}>
+          Loadboard Notifications
+        </SidebarMenuItem>
+      </Sidebar>
+    }
+  >
+    <Placeholder height="100%" width="100%" text="Content" />
+  </SidebarContainer>
+);
+
+export const list = () => (
+  <SidebarContainer
+    sidebar={
+      <Sidebar
+        title="Drivers"
+        count={9}
+        header={
+          <Stack space="small">
+            <Button
+              fullWidth={true}
+              variant="contained"
+              startIcon={<AddIcon />}
+            >
+              Create New
+            </Button>
+
+            <TextField
+              fullWidth={true}
+              placeholder="Search for drivers…"
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <SearchIcon />
+                  </InputAdornment>
+                ),
+              }}
+            />
+          </Stack>
+        }
+      >
+        <SidebarMenuItem
+          selected={true}
+          openContentOnClick={true}
+          avatar={<SidebarMenuItemAvatar>Eirwen Minoo</SidebarMenuItemAvatar>}
+        >
+          Eirwen Minoo
+        </SidebarMenuItem>
+        <SidebarMenuItem
+          openContentOnClick={true}
+          avatar={<SidebarMenuItemAvatar>Ole Kielo</SidebarMenuItemAvatar>}
+        >
+          Ole Kielo
+        </SidebarMenuItem>
+        <SidebarMenuItem
+          openContentOnClick={true}
+          avatar={
+            <SidebarMenuItemAvatar>Virve Vivi Wangi</SidebarMenuItemAvatar>
+          }
+        >
+          Virve Vivi Wangi
+        </SidebarMenuItem>
+        <SidebarMenuItem
+          openContentOnClick={true}
+          avatar={
+            <SidebarMenuItemAvatar>
+              Radulf Čedomir Niĉjo Aparna
+            </SidebarMenuItemAvatar>
+          }
+        >
+          Radulf Čedomir Niĉjo Aparna
+        </SidebarMenuItem>
+        <SidebarMenuItem
+          openContentOnClick={true}
+          avatar={
+            <SidebarMenuItemAvatar>Léane Audovacar</SidebarMenuItemAvatar>
+          }
+        >
+          Léane Audovacar
+        </SidebarMenuItem>
+        <SidebarMenuItem
+          avatar={<SidebarMenuItemAvatar>Devon Vesta</SidebarMenuItemAvatar>}
+        >
+          Devon Vesta
+        </SidebarMenuItem>
+        <SidebarMenuItem
+          avatar={<SidebarMenuItemAvatar>Xenagoras Ares</SidebarMenuItemAvatar>}
+        >
+          Xenagoras Ares
+        </SidebarMenuItem>
+        <SidebarMenuItem
+          avatar={<SidebarMenuItemAvatar>Nithya Phebe</SidebarMenuItemAvatar>}
+        >
+          Nithya Phebe
+        </SidebarMenuItem>
+        <SidebarMenuItem
+          avatar={<SidebarMenuItemAvatar>Nitin Paulette</SidebarMenuItemAvatar>}
+        >
+          Nitin Paulette
+        </SidebarMenuItem>
+      </Sidebar>
+    }
+  >
+    <SidebarContent
+      title="List"
+      action={<Button variant="contained">Create</Button>}
+    >
+      <Placeholder height="100%" width="100%" text="Content" />
+    </SidebarContent>
+  </SidebarContainer>
+);
+
+export const checkbox = () => (
+  <SidebarContainer
+    sidebar={
+      <Sidebar title="Drivers">
+        <SidebarMenuItem
+          selected={true}
+          openContentOnClick={true}
+          avatar={
+            <SidebarMenuItemAvatar value={false}>
+              Eirwen Minoo
+            </SidebarMenuItemAvatar>
+          }
+        >
+          Eirwen Minoo
+        </SidebarMenuItem>
+        <SidebarMenuItem
+          openContentOnClick={true}
+          avatar={
+            <SidebarMenuItemAvatar value={true}>
+              Ole Kielo
+            </SidebarMenuItemAvatar>
+          }
+        >
+          Ole Kielo
+        </SidebarMenuItem>
+        <SidebarMenuItem
+          openContentOnClick={true}
+          avatar={
+            <SidebarMenuItemAvatar value={false}>
+              Virve Vivi Wangi
+            </SidebarMenuItemAvatar>
+          }
+        >
+          Virve Vivi Wangi
+        </SidebarMenuItem>
+        <SidebarMenuItem
+          avatar={
+            <SidebarMenuItemAvatar value={false}>
+              Radulf Čedomir Niĉjo Aparna
+            </SidebarMenuItemAvatar>
+          }
+        >
+          Radulf Čedomir Niĉjo Aparna
+        </SidebarMenuItem>
+      </Sidebar>
+    }
+  >
+    <SidebarContent title="">
+      <Placeholder height="100%" width="100%" text="Content" />
+    </SidebarContent>
+  </SidebarContainer>
+);
+
+export const checkboxMany = () => {
+  const items = Array(25)
+    .fill(null)
+    .map((_, index) => (
+      <SidebarMenuItem
+        key={index}
+        openContentOnClick={true}
+        avatar={
+          <SidebarMenuItemAvatar value={false}>
+            {`Eirwen Minoo (${index})`}
+          </SidebarMenuItemAvatar>
+        }
+      >
+        {`Eirwen Minoo (${index})`}
+      </SidebarMenuItem>
+    ));
+
+  return (
+    <SidebarContainer sidebar={<Sidebar title="Drivers List">{items}</Sidebar>}>
+      <SidebarContent title="">
+        <Placeholder height="100%" width="100%" text="Content" />
+      </SidebarContent>
+    </SidebarContainer>
+  );
+};
+
+export const complex = () => (
+  <SidebarContainer
+    sidebar={
+      <Sidebar title="Super Loadboard">
+        <SidebarMenuItem selected={true} badge={320}>
+          Available
+        </SidebarMenuItem>
+        <SidebarMenuItem badge={5}>Requested</SidebarMenuItem>
+        <SidebarMenuItem badge={12}>Booked</SidebarMenuItem>
+        <SidebarMenuItem badge={56}>Suggested</SidebarMenuItem>
+
+        <SidebarDivider />
+
+        <SidebarSubheader
+          action={
+            <SidebarMenuItemAction
+              placement="right"
+              title="Loadboard Notifications"
+            >
+              <SettingsIcon />
+            </SidebarMenuItemAction>
+          }
+        >
+          Load Alerts
+        </SidebarSubheader>
+
+        <SidebarMenuItem
+          action={
+            <SidebarMenuItemAction title="Mute">
+              <NotificationsIcon color="primary" />
+            </SidebarMenuItemAction>
+          }
+          secondaryActions={
+            <>
+              <SidebarMenuItemAction title="Edit">
+                <EditIcon />
+              </SidebarMenuItemAction>
+
+              <SidebarMenuItemAction title="Delete">
+                <DeleteIcon />
+              </SidebarMenuItemAction>
+            </>
+          }
+        >
+          New York, NY - Kansas City, MO
+        </SidebarMenuItem>
+
+        <SidebarMenuItem
+          action={
+            <SidebarMenuItemAction title="Unmute">
+              <NotificationsOffIcon />
+            </SidebarMenuItemAction>
+          }
+        >
+          Kansas City, MO - New York, NY
+        </SidebarMenuItem>
+
+        <SidebarMenuItem
+          action={
+            <SidebarMenuItemAction title="Unmute">
+              <NotificationsOffIcon />
+            </SidebarMenuItemAction>
+          }
+        >
+          New York, NY - Kansas City, KS
+        </SidebarMenuItem>
+
+        <SidebarMenuItem
+          action={
+            <SidebarMenuItemAction title="Unmute">
+              <NotificationsOffIcon />
+            </SidebarMenuItemAction>
+          }
+        >
+          Kansas City, MO - New York, NY
+        </SidebarMenuItem>
+
+        <SidebarMenuItem
+          action={
+            <SidebarMenuItemAction title="Unmute">
+              <NotificationsOffIcon />
+            </SidebarMenuItemAction>
+          }
+        >
+          New York, NY - Kansas City, KS
+        </SidebarMenuItem>
+
+        <SidebarMenuItem
+          action={
+            <SidebarMenuItemAction title="Unmute">
+              <NotificationsOffIcon />
+            </SidebarMenuItemAction>
+          }
+        >
+          Kansas City, MO - New York, NY
+        </SidebarMenuItem>
+
+        <SidebarMenuItem
+          action={
+            <SidebarMenuItemAction title="Unmute">
+              <NotificationsOffIcon />
+            </SidebarMenuItemAction>
+          }
+        >
+          New York, NY - Kansas City, KS
+        </SidebarMenuItem>
+
+        <Box
+          bottom={0}
+          position="sticky"
+          paddingTop="small"
+          paddingBottom="small"
+          paddingLeft="medium"
+          paddingRight="medium"
+        >
+          <Button fullWidth={true} startIcon={<NotificationsOffIcon />}>
+            Create Load Alert
+          </Button>
+        </Box>
+      </Sidebar>
+    }
+  >
+    <Placeholder height="100%" width="100%" text="Content" />
+  </SidebarContainer>
+);