@superdispatch/ui-lab 0.50.5 → 0.50.7

package/src/sidebar/Sidebar.stories.tsx

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

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

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

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