@superdispatch/ui-lab 0.21.13 → 0.21.15

package/src/navbar/Navbar.tsx

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

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

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

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

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

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