@superdispatch/ui-lab 0.50.4 → 0.50.5

package/src/sidebar/Sidebar.stories.tsx

@@ -0,0 +1,376 @@
+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 { Stack } from '@superdispatch/ui';
+import { Button } from '@superdispatch/ui-lab';
+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="primary" startIcon={<AddIcon />}>
+              Create New
+            </Button>
+
+            <TextField
+              fullWidth={true}
+              placeholder="Search for drivers…"
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <SearchIcon />
+                  </InputAdornment>
+                ),
+              }}
+            />
+          </Stack>
+        }
+      >
+        <SidebarMenuItem
+          badge={1}
+          selected={true}
+          openContentOnClick={true}
+          avatar={<SidebarMenuItemAvatar>Eirwen Minoo</SidebarMenuItemAvatar>}
+          secondaryActions={
+            <SidebarMenuItemAction title="Edit">
+              <EditIcon />
+            </SidebarMenuItemAction>
+          }
+        >
+          Eirwen Minoo
+        </SidebarMenuItem>
+        <SidebarMenuItem
+          badge={1}
+          openContentOnClick={true}
+          avatar={<SidebarMenuItemAvatar>Ole Kielo</SidebarMenuItemAvatar>}
+          secondaryActions={
+            <SidebarMenuItemAction title="Edit">
+              <EditIcon />
+            </SidebarMenuItemAction>
+          }
+        >
+          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="primary">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 color="action" />}
+            variant="neutral"
+          >
+            Create Load Alert
+          </Button>
+        </Box>
+      </Sidebar>
+    }
+  >
+    <Placeholder height="100%" width="100%" text="Content" />
+  </SidebarContainer>
+);

package/src/sidebar/Sidebar.tsx

@@ -0,0 +1,75 @@
+import { ColorDynamic, 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: ${ColorDynamic.White};
+  border-right: 1px solid ${ColorDynamic.Silver400};
+`;
+
+const SidebarHeader = styled.div`
+  top: 0;
+  z-index: 2;
+  position: sticky;
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-bottom: 8px;
+  background-color: ${ColorDynamic.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>
+          {title && (
+            <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>
+  );
+});