@superdispatch/ui-lab 0.50.3 → 0.50.5

package/src/navbar/NavbarBottomBar.tsx

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

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

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

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

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