@superdispatch/ui-lab 0.21.11 → 0.21.12

package/src/navbar/Navbar.tsx

@@ -0,0 +1,111 @@
+import { Drawer, useMediaQuery, useTheme } from '@material-ui/core';
+import { useResponsiveValue } from '@superdispatch/ui';
+import {
+  CSSProperties,
+  ReactElement,
+  ReactNode,
+  useMemo,
+  useState,
+} from 'react';
+import styled from 'styled-components';
+import { NavbarBottomBar, NavbarBottomBarItem } from './NavbarBottomBar';
+import { NavbarContext, NavbarContextType } from './NavbarContext';
+import { NavbarItemOptions, NavbarList } from './NavbarList';
+
+const Aside = styled.aside`
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+`;
+
+const Main = styled.main`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: scroll;
+`;
+
+interface NavbarProps {
+  containerStyle?: CSSProperties;
+  children: ReactNode;
+
+  header?: ReactNode;
+  items: NavbarItemOptions[];
+  bottomItems: NavbarBottomBarItem[];
+  footer?: ReactNode;
+
+  hasExtraBadge?: boolean;
+}
+
+export function Navbar({
+  footer,
+  items,
+  header,
+  bottomItems,
+  children,
+  containerStyle,
+  hasExtraBadge,
+}: NavbarProps): ReactElement {
+  const theme = useTheme();
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
+
+  const platform = useResponsiveValue('mobile', 'tablet', 'desktop');
+  const isMobile = platform === 'mobile';
+
+  const matches = useMediaQuery(theme.breakpoints.up('md'), { noSsr: true });
+  const [isMenuExpanded, setMenuExpanded] = useState(matches);
+
+  const hasBadge = hasExtraBadge || items.some((item) => item.badge);
+
+  const ctx = useMemo<NavbarContextType>(
+    () => ({
+      isDrawerOpen,
+      isMenuExpanded,
+      setDrawerOpen,
+      setMenuExpanded,
+      isNavbarExpanded: isMenuExpanded || isDrawerOpen,
+    }),
+    [isDrawerOpen, isMenuExpanded, setMenuExpanded, setDrawerOpen],
+  );
+
+  return (
+    <NavbarContext.Provider value={ctx}>
+      <div
+        style={{
+          display: 'flex',
+          height: '100%',
+          flexDirection: isMobile ? 'column' : 'row',
+          ...containerStyle,
+        }}
+      >
+        {!isMobile && (
+          <Aside>
+            <NavbarList header={header} items={items} footer={footer} />
+          </Aside>
+        )}
+
+        <Main>{children}</Main>
+
+        {isMobile && (
+          <NavbarBottomBar items={bottomItems} hasMenuBadge={hasBadge} />
+        )}
+
+        <Drawer
+          open={isDrawerOpen}
+          anchor="right"
+          onClose={() => {
+            setDrawerOpen(false);
+          }}
+          PaperProps={{
+            style: {
+              width: '280px',
+              minWidth: '280px',
+            },
+          }}
+        >
+          <NavbarList header={header} items={items} footer={footer} />
+        </Drawer>
+      </div>
+    </NavbarContext.Provider>
+  );
+}

package/src/navbar/NavbarAccordion.tsx

@@ -0,0 +1,171 @@
+import { Accordion, AccordionSummary } from '@material-ui/core';
+import { ExpandMore } from '@material-ui/icons';
+import { Color, useUID } from '@superdispatch/ui';
+import {
+  MouseEvent,
+  ReactElement,
+  ReactNode,
+  useEffect,
+  useState,
+} from 'react';
+import styled from 'styled-components';
+import { useNavbarContext } from './NavbarContext';
+import { NavbarItem } from './NavbarItem';
+import { NavbarItemOptions } from './NavbarList';
+
+export const NavbarAccordionLabel = styled.span`
+  flex-grow: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  &[data-expanded='false'] {
+    display: none;
+  }
+`;
+
+const NavbarAccordionRoot = styled(Accordion)`
+  width: 100%;
+  color: #c2c4c9;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  background-color: #1b2638;
+
+  &[aria-current] {
+    background-color: #2f394a;
+    color: ${Color.White};
+  }
+
+  &.MuiAccordion-root:before {
+    background-color: #1b2638;
+  }
+
+  &.MuiPaper-elevation0 {
+    border: 0px;
+  }
+
+  &[data-gutter] {
+    margin-top: 16px;
+  }
+
+  &[data-gutter].MuiAccordion-root.Mui-expanded {
+    margin-top: 16px;
+  }
+`;
+
+const NavbarAccordionSummary = styled(AccordionSummary)`
+  border-left: 4px solid transparent;
+  padding-left: 20px;
+
+  &.MuiAccordionSummary-root {
+    max-height: 40px;
+    min-height: 40px;
+  }
+
+  &.MuiAccordionSummary-content {
+    align-items: center;
+  }
+
+  &:hover,
+  &[aria-current],
+  &[data-active='true'] {
+    color: ${Color.White};
+    background-color: #2f394a;
+    border-left-color: ${Color.Blue300};
+  }
+
+  &[data-expanded='false'] {
+    .MuiAccordionSummary-expandIcon {
+      display: none;
+    }
+  }
+`;
+
+const IconWrapper = styled.div`
+  width: 24px;
+  margin-right: 8px;
+
+  & svg {
+    font-size: 24px;
+  }
+`;
+
+export interface NavbarAccordionProps {
+  label: ReactNode;
+  icon?: ReactNode;
+  gutter?: boolean;
+  items: Array<Omit<NavbarItemOptions, 'icon'>>;
+  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+}
+
+export function NavbarAccordion({
+  label,
+  icon,
+  gutter,
+  items,
+  onClick,
+}: NavbarAccordionProps): ReactElement {
+  const uid = useUID();
+  const { setDrawerOpen, isNavbarExpanded } = useNavbarContext();
+
+  const [isExpanded, setExpanded] = useState(true);
+
+  // sync accordion state with Desktop menu state
+  useEffect(() => {
+    setExpanded(isNavbarExpanded);
+  }, [isNavbarExpanded]);
+
+  return (
+    <NavbarAccordionRoot
+      square={true}
+      data-gutter={!gutter}
+      aria-labelledby={uid}
+      expanded={isExpanded}
+      onClick={(event) => {
+        onClick?.(event);
+
+        if (isNavbarExpanded) {
+          setExpanded(!isExpanded);
+        }
+      }}
+    >
+      <NavbarAccordionSummary
+        data-active={!isExpanded && items.some((item) => item.active)}
+        data-expanded={isNavbarExpanded}
+        expandIcon={<ExpandMore />}
+      >
+        <IconWrapper>{icon}</IconWrapper>
+        <NavbarAccordionLabel id={uid} data-expanded={isNavbarExpanded}>
+          {label}
+        </NavbarAccordionLabel>
+      </NavbarAccordionSummary>
+
+      {items.map((item) => {
+        const index = items.indexOf(item);
+        const prev = items[index - 1];
+        const { ident = 0 } = item;
+
+        return (
+          <NavbarItem
+            {...item}
+            key={item.key}
+            ident={ident}
+            active={item.active}
+            gutter={prev && prev.groupKey !== item.groupKey}
+            onClick={(event) => {
+              event.stopPropagation();
+              item.onClick?.(event);
+
+              if (!event.isDefaultPrevented()) {
+                setDrawerOpen(false);
+              }
+            }}
+          />
+        );
+      })}
+    </NavbarAccordionRoot>
+  );
+}

package/src/navbar/NavbarAvatar.tsx

@@ -0,0 +1,51 @@
+import { Avatar, AvatarProps, Typography } from '@material-ui/core';
+import { Color, Column, Columns, Stack } from '@superdispatch/ui';
+import { ReactElement, ReactNode } from 'react';
+import styled from 'styled-components';
+import { useNavbarContext } from './NavbarContext';
+
+const StyledTypography = styled(Typography)`
+  color: ${Color.Silver500};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+
+  &:hover {
+    color: ${Color.White};
+  }
+`;
+
+interface NavbarAvatarProps extends Omit<AvatarProps, 'title'> {
+  title: ReactNode;
+  subtitle: ReactNode;
+  children: ReactNode;
+}
+
+export function NavbarAvatar({
+  title,
+  subtitle,
+  children,
+  ...props
+}: NavbarAvatarProps): ReactElement {
+  const { isNavbarExpanded } = useNavbarContext();
+
+  if (!isNavbarExpanded) {
+    return <Avatar {...props}>{children}</Avatar>;
+  }
+
+  return (
+    <Columns space="xsmall" align="center">
+      <Column width="content">
+        <Avatar {...props}>{children}</Avatar>
+      </Column>
+
+      <Column>
+        <Stack space="none">
+          <StyledTypography variant="caption">{title}</StyledTypography>
+
+          <StyledTypography variant="caption">{subtitle}</StyledTypography>
+        </Stack>
+      </Column>
+    </Columns>
+  );
+}

package/src/navbar/NavbarBottomBar.tsx

@@ -0,0 +1,135 @@
+import { BottomNavigation, BottomNavigationAction } from '@material-ui/core';
+import { Menu } from '@material-ui/icons';
+import { Color } from '@superdispatch/ui';
+import {
+  ComponentType,
+  HTMLAttributes,
+  ReactElement,
+  ReactNode,
+  useMemo,
+} from 'react';
+import styled from 'styled-components';
+import { useNavbarContext } from './NavbarContext';
+
+const StyledBottomNavigation = styled(BottomNavigation)`
+  background: ${Color.Dark500};
+`;
+
+const StyledBottomNavigationAction = styled(BottomNavigationAction)`
+  && {
+    background: #1b2638;
+    color: ${Color.Silver500};
+    padding: 6px 0 8px;
+    line-height: 20px;
+  }
+
+  &:first-child {
+    padding-left: 12px;
+  }
+
+  &:last-child {
+    padding-right: 12px;
+  }
+
+  &.Mui-selected {
+    color: ${Color.White};
+
+    .MuiBottomNavigationAction-label {
+      font-size: 0.75rem;
+    }
+  }
+`;
+
+const IconWrapper = styled.div`
+  position: relative;
+`;
+
+const IconLabel = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 12px;
+  border-radius: 50%;
+  color: ${Color.White};
+  background: ${Color.Red300};
+
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  width: 8px;
+  height: 8px;
+`;
+
+export interface NavbarBottomBarItem {
+  active?: boolean;
+  hasBadge?: boolean;
+  value: string;
+  label: ReactNode;
+  icon: ReactNode;
+  onClick?: () => void;
+  component?: ComponentType<HTMLAttributes<HTMLElement>>;
+}
+
+interface NavbarBottomBarProps {
+  items: NavbarBottomBarItem[];
+  hasMenuBadge?: boolean;
+}
+
+export function NavbarBottomBar({
+  items,
+  hasMenuBadge,
+}: NavbarBottomBarProps): ReactElement {
+  const { isDrawerOpen, setDrawerOpen } = useNavbarContext();
+
+  const activeItem = useMemo(() => items.find((item) => item.active), [items]);
+
+  return (
+    <StyledBottomNavigation
+      value={activeItem?.value}
+      showLabels={true}
+      onChange={(_event, newValue) => {
+        if (newValue) {
+          if (newValue === 'menu') {
+            setDrawerOpen(!isDrawerOpen);
+          } else {
+            setDrawerOpen(false);
+          }
+        }
+      }}
+    >
+      {items.map(({ active, hasBadge, ...item }) => (
+        <StyledBottomNavigationAction
+          {...item}
+          key={item.value}
+          icon={
+            hasBadge ? (
+              <IconWrapper>
+                <IconLabel />
+                {item.icon}
+              </IconWrapper>
+            ) : (
+              item.icon
+            )
+          }
+        />
+      ))}
+
+      <StyledBottomNavigationAction
+        value="menu"
+        label="Menu"
+        icon={
+          hasMenuBadge ? (
+            <IconWrapper>
+              <IconLabel />
+              <Menu fontSize="small" />
+            </IconWrapper>
+          ) : (
+            <Menu fontSize="small" />
+          )
+        }
+      />
+    </StyledBottomNavigation>
+  );
+}

package/src/navbar/NavbarContext.tsx

@@ -0,0 +1,23 @@
+import { noop } from 'lodash';
+import { createContext, useContext } from 'react';
+
+export interface NavbarContextType {
+  isDrawerOpen: boolean;
+  isMenuExpanded: boolean;
+  isNavbarExpanded: boolean;
+
+  setDrawerOpen: (value: boolean) => void;
+  setMenuExpanded: (value: boolean) => void;
+}
+
+export const NavbarContext = createContext<NavbarContextType>({
+  isDrawerOpen: false,
+  isMenuExpanded: false,
+  isNavbarExpanded: false,
+  setMenuExpanded: noop,
+  setDrawerOpen: noop,
+});
+
+export function useNavbarContext(): NavbarContextType {
+  return useContext(NavbarContext);
+}

package/src/navbar/NavbarItem.tsx

@@ -0,0 +1,119 @@
+import { Color, useUID } from '@superdispatch/ui';
+import {
+  ComponentType,
+  HTMLAttributes,
+  MouseEvent,
+  ReactElement,
+  ReactNode,
+} from 'react';
+import styled from 'styled-components';
+
+export const NavbarBadge = styled.span`
+  flex-shrink: 0;
+  padding: 4px 6px;
+  min-width: 20px;
+  line-height: 12px;
+  font-size: 12px;
+  font-weight: 400;
+  border-radius: 10px;
+  text-align: center;
+  background: #131c2a;
+
+  &[data-variant='primary'] {
+    color: ${Color.White};
+    background: ${Color.Blue300};
+  }
+
+  &[data-variant='danger'] {
+    color: ${Color.White};
+    background: ${Color.Red500};
+  }
+`;
+
+export const NavbarLabel = styled.span`
+  flex-grow: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+const NavbarItemRoot = styled.div`
+  width: 100%;
+
+  display: flex;
+  align-items: center;
+  color: #c2c4c9;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  padding: 8px 16px;
+  border-left: 4px solid transparent;
+
+  &:hover,
+  &[aria-current],
+  &[data-active='true'] {
+    color: ${Color.White};
+    background-color: #2f394a;
+    border-left-color: ${Color.Blue300};
+  }
+`;
+
+const IconWrapper = styled.div`
+  width: 24px;
+  margin-right: 8px;
+
+  & svg {
+    font-size: 24px;
+  }
+`;
+
+export interface NavbarItemProps {
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  component?: ComponentType<HTMLAttributes<HTMLElement>>;
+
+  label: ReactNode;
+  icon?: ReactNode;
+  badge?: ReactNode;
+  ident?: number;
+  gutter?: boolean;
+  variant?: 'danger' | 'primary';
+  active?: boolean;
+}
+
+export function NavbarItem({
+  label,
+  gutter,
+  badge,
+  icon,
+  component,
+  onClick,
+  variant,
+  ident = 0,
+  active,
+}: NavbarItemProps): ReactElement {
+  const uid = useUID();
+
+  return (
+    <NavbarItemRoot
+      as={component}
+      onClick={onClick}
+      aria-labelledby={uid}
+      data-active={active}
+      style={{
+        marginTop: gutter ? '16px' : '0',
+        paddingLeft: (ident + 1) * 20,
+      }}
+    >
+      <IconWrapper>{icon}</IconWrapper>
+
+      <NavbarLabel id={uid}>{label}</NavbarLabel>
+
+      {badge != null && (
+        <NavbarBadge data-variant={variant}>{badge}</NavbarBadge>
+      )}
+    </NavbarItemRoot>
+  );
+}