@superdispatch/ui-lab 0.50.5 → 0.50.7

package/src/navbar/NavbarBottomBar.tsx

@@ -1,135 +0,0 @@
-import { BottomNavigation, BottomNavigationAction } from '@material-ui/core';
-import { Menu } from '@material-ui/icons';
-import { ColorDynamic } 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: ${ColorDynamic.Dark500};
-`;
-
-const StyledBottomNavigationAction = styled(BottomNavigationAction)`
-  && {
-    background: #1b2638;
-    color: ${ColorDynamic.Silver500};
-    padding: 6px 0 8px;
-    line-height: 20px;
-  }
-
-  &:first-child {
-    padding-left: 12px;
-  }
-
-  &:last-child {
-    padding-right: 12px;
-  }
-
-  &.Mui-selected {
-    color: ${ColorDynamic.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: ${ColorDynamic.White};
-  background: ${ColorDynamic.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,22 +0,0 @@
-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: () => void 0,
-  setDrawerOpen: () => void 0,
-});
-
-export function useNavbarContext(): NavbarContextType {
-  return useContext(NavbarContext);
-}

package/src/navbar/NavbarItem.tsx

@@ -1,125 +0,0 @@
-import { alpha } from '@material-ui/core';
-import { Color, ColorDynamic, 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: ${alpha(Color.White, 0.05)};
-
-  &[data-variant='primary'] {
-    color: ${Color.White};
-    background: ${ColorDynamic.Blue300};
-  }
-
-  &[data-variant='danger'] {
-    color: ${Color.White};
-    background: ${ColorDynamic.Red300};
-  }
-`;
-
-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;
-
-  &[aria-current],
-  &[data-active='true'] {
-    color: ${Color.White};
-    background-color: ${Color.White10};
-    border-left-color: ${ColorDynamic.Blue300};
-  }
-
-  &:hover {
-    background-color: ${Color.White08};
-    color: ${Color.White};
-    border-left-color: ${ColorDynamic.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>
-  );
-}

package/src/navbar/NavbarList.tsx

@@ -1,247 +0,0 @@
-import { IconButton } from '@material-ui/core';
-import { Menu as MenuIcon, MenuOpen } from '@material-ui/icons';
-import {
-  Color,
-  ColorDark,
-  ColorDynamic,
-  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: ${({ theme }) =>
-    theme.palette.type === 'dark' ? ColorDark.White : Color.Dark500};
-  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: ${ColorDynamic.Dark100};
-
-  &&: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: ${ColorDynamic.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;
-    }
-  }
-
-  &::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: ${ColorDark.Silver500};
-    border-radius: 100vw;
-    margin-bottom: 100px;
-  }
-`;
-
-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

@@ -1,102 +0,0 @@
-import { Menu, MenuItem, Typography } from '@material-ui/core';
-import { Color, ColorDynamic, 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 ${ColorDynamic.Silver400};
-  margin: 8px -16px;
-`;
-
-const StyledMenuItem = styled(MenuItem)`
-  & svg {
-    font-size: 24px;
-    color: ${ColorDynamic.Dark100};
-  }
-`;
-
-const Wrapper = styled.div<{ active?: boolean }>`
-  width: 100%;
-  padding: 8px 16px;
-  cursor: pointer;
-  background: ${Color.White10};
-
-  border-left: 4px solid
-    ${({ active }) => (active ? ColorDynamic.Blue300 : 'transparent')};
-
-  &:hover {
-    border-left-color: ${ColorDynamic.Blue300};
-    background: ${Color.White08};
-  }
-`;
-
-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: ColorDynamic.Dark500 }}>
-                    {item.label}
-                  </Typography>
-                </Inline>
-              </StyledMenuItem>,
-
-              index !== arr.length - 1 && (
-                <Divider key={`${item.key}-divider`} />
-              ),
-            ];
-          })}
-      </Menu>
-    </>
-  );
-}