@learningpool/ui 1.6.0 → 1.6.1

package/src/lib/components/navigation/VerticalNavigation/VerticalNavigation.tsx

@@ -0,0 +1,467 @@
+import React, { useEffect } from 'react'
+import { useTheme } from '@mui/material/styles'
+import {
+  Avatar, List, Tooltip
+} from '../../../index'
+import { Box, Modal } from '@mui/material'
+import { StreamSuiteLogo, NotchSVG, NotchExtendSVG } from '../../../assets/Images'
+import AppSwitcher from '../../stream/AppSwitcher/AppSwitcher'
+import { Apps, ChevronLeft, ChevronRight, PushPin } from '@mui/icons-material'
+import VerticalNavigationItem from './VerticalNavigationItem/VerticalNavigationItem'
+import {
+  DRAWER_WIDTH, DrawerHeader, DrawerToggle, DrawerToggleHitboxContent,
+  StyledDivider, StyledNav, StyledNavSecondary, DrawerShadow, StyledAside,
+  NotchContainer, NotchBackground, NotchBackgroundClip, NotchSeemMask,
+  StyledDrawer
+} from './VerticalNavigationStyles'
+import { ListItemText } from './VerticalNavigationItem/VerticalNavigationItemStyles'
+import AvatarPanel from './VerticalNavigationAvatar'
+import { motion } from '../../../utils/theme'
+import { handleAvatarInitials, useFadeIn } from '../../../utils/helpers'
+import { DEFAULT_REACT_APP_ID } from '../../../utils/constants'
+import { IApplication, IAvatarMenuItemProps, IVerticalNavigationItemProps } from '../../../types'
+import { animated } from '@react-spring/web'
+
+interface VerticalNavigationProps {
+  logo?: string
+  logoText?: string
+  logoOnClick?: any
+  items?: IVerticalNavigationItemProps[]
+  secondaryItems?: IVerticalNavigationItemProps[]
+  hasStreamHome?: boolean
+  streamHomeAccessToken?: string
+  streamHomeBaseUrl?: string
+  streamHomeApiKey?: string
+  streamHomeApplications?: IApplication[]
+  avatarName?: string
+  isDrawerOpen?: boolean
+  isPersistent?: boolean
+  setIsPersistent?: any
+  appRootID?: string
+
+  // Avatar panel props
+  hasAvatar?: boolean
+  avatarPanelLogoutString?: string
+  avatarPanelOnClickSwitchDirection?: any
+  avatarPanelOnClickLogout?: any
+  avatarPanelOnClickViewProfile?: any
+  avatarPanelViewProfileString?: string
+  avatarPanelOnClickEditProfile?: any
+  avatarPanelEditProfileString?: string
+  avatarPanelMenuItems?: Array<IAvatarMenuItemProps>
+  avatarPanelOnClickMainAction?: any
+  avatarPanelMainActionString?: string
+  avatarPanelSettingItems?: Array<IAvatarMenuItemProps>
+  avatarPanelFootnote?: any
+}
+
+const VerticalNavigation = (
+  props: VerticalNavigationProps
+): React.ReactElement => {
+  const theme = useTheme()
+  const {
+    items, secondaryItems, logo, logoText, logoOnClick, appRootID,
+    hasStreamHome, streamHomeApiKey, streamHomeBaseUrl,
+    streamHomeAccessToken, streamHomeApplications, ...rest
+  } = props
+  const propIsDrawerOpen = typeof props?.isDrawerOpen === 'boolean' ? props.isDrawerOpen : undefined
+  const propIsPersistent = typeof props?.isPersistent === 'boolean' ? props.isPersistent : undefined
+  const avatarName = props?.avatarName ?? 'Avatar name'
+
+  const [isDrawerOpen, setIsDrawerOpen] = React.useState(propIsDrawerOpen ?? false)
+  const [isAvatarOpen, setIsAvatarOpen] = React.useState(false)
+  const [isPersistent, setIsPersistent] = React.useState(propIsPersistent ?? false)
+
+  // Controls whether the application panel is open or not.
+  const [isAppSwitcherOpen, setIsAppSwitcherOpen] = React.useState(false)
+
+  /**
+   * Toggles display of the Stream suite application dialog.
+   */
+  const handleToggleAppsClick = (): void => {
+    setIsAppSwitcherOpen(!isAppSwitcherOpen)
+  }
+
+  const logoHeight = 38
+  const logoWidth = 38
+
+  useEffect(() => setIsDrawerOpen(propIsDrawerOpen ?? false), [propIsDrawerOpen])
+  useEffect(() => setIsDrawerOpen(propIsPersistent ?? false), [propIsPersistent])
+  useEffect(() => setAvatarInitials(handleAvatarInitials(avatarName)), [avatarName])
+
+  // This fixes an issue with how MUI handles the modal and aria-hidden.
+  // When open, the Modal adds aria-hidden="true" to a top-level element,
+  // which causes some screen readers to annouce the elements as "blank".
+  // This fix just overrides the default aria-hidden attribute.
+  //
+  // https://github.com/mui/material-ui/issues/19450
+  useEffect(() => {
+    if (isDrawerOpen) {
+      const root = window.document.getElementById(appRootID ?? DEFAULT_REACT_APP_ID)
+      root?.removeAttribute('aria-hidden')
+    }
+  }, [isDrawerOpen])
+
+  const handleIsPersistent = (): void => {
+    if (props?.setIsPersistent) {
+      props.setIsPersistent(!propIsPersistent ?? false)
+      setIsPersistent(!propIsPersistent ?? false)
+      return
+    }
+
+    setIsPersistent(propIsPersistent ?? false)
+  }
+
+  const [avatarInitials, setAvatarInitials] = React.useState(handleAvatarInitials(avatarName) ?? 'AN')
+
+  const toggleDrawer = (open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
+    event?.stopPropagation()
+
+    if (event.type === 'keydown') {
+      if ((event as React.KeyboardEvent).key === 'Tab' || (event as React.KeyboardEvent).key === 'Shift') {
+        return
+      }
+    }
+
+    setIsAppSwitcherOpen(false)
+    setIsDrawerOpen(open ?? !isDrawerOpen)
+  }
+
+  // First item starts at 70ms
+  // see STAGGER_ITEMS_DELAY in helpers.js
+  let animationCount = 1
+  const incrementAnimationCount = () => animationCount++
+
+  const listContent = (): React.ReactElement => (
+    <Box
+      sx={{
+        display: 'flex',
+        flex: '1 auto',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        '.wrapper': {
+          display: 'flex',
+          position: 'relative'
+        },
+        '.wrapper > :not(:first-child)': {
+          position: 'absolute',
+          right: 0,
+          background: 'transparent',
+          fontSize: 0
+        }
+      }}
+      className='grid-container'
+    >
+      <div
+        className='wrapper'
+        style={{
+          backgroundColor: theme.palette.mode === 'dark'
+            ? theme.palette.primary.main
+            : theme.palette.background.paper
+        }}
+      >
+        <DrawerHeader
+          onClick={logoOnClick ?? null}
+          isDrawerOpen={isDrawerOpen || isPersistent}
+          style={useFadeIn(animationCount, incrementAnimationCount)}
+        >
+          <Tooltip
+            disableHoverListener={isDrawerOpen || isPersistent}
+            disableFocusListener={isDrawerOpen || isPersistent}
+            disableTouchListener={isDrawerOpen || isPersistent}
+            title={logoText ?? ''}
+            placement={theme.direction === 'rtl' ? 'left' : 'right'}
+          >
+            {logo
+              ? typeof logo === 'string'
+                ? (
+                  <img
+                    src={logo}
+                    height={`${logoHeight}px`}
+                    width={`${logoWidth}px`}
+                    style={{
+                      marginRight: '16px'
+                    }}
+                    alt="Site Logo"
+                  />)
+                : logo
+              : (
+                <StreamSuiteLogo style={{
+                  height: `${logoHeight}px`,
+                  width: `${logoWidth}px`,
+                  marginRight: '16px',
+                  fill: theme.palette.mode === 'dark'
+                    ? theme.palette.primary.contrastText
+                    : theme.palette.primary.main
+                }} />)}
+          </Tooltip>
+          <ListItemText primary={logoText ?? ''} isDrawerOpen={isDrawerOpen || isPersistent} />
+        </DrawerHeader>
+      </div>
+
+      <div className='wrapper'>
+        <NotchContainer sx={{ height: '85px', position: 'relative !important' }}>
+          <NotchBackground />
+          {!isPersistent && <NotchBackgroundClip />}
+          <NotchSeemMask />
+        </NotchContainer>
+        {!isPersistent && <DrawerToggle
+          onClick={toggleDrawer(!isDrawerOpen)}
+          aria-label={isDrawerOpen ? 'Close Navigation' : 'Open Navigation'}
+          aria-expanded={isDrawerOpen ? 'true' : 'false'}
+          aria-controls="vertical-navigation"
+          // @ts-expect-error
+          component={animated.button}
+          style={{
+            ...useFadeIn(animationCount, incrementAnimationCount),
+            transform: 'translate(22px, calc(50% - 5.5px))'
+          }}
+        >
+          <DrawerToggleHitboxContent>
+            {isDrawerOpen
+              ? (
+                <ChevronLeft style={{
+                  fontSize: '1.75rem',
+                  height: '1.75rem',
+                  width: '1.75rem'
+                }} />)
+              : (
+                <ChevronRight style={{
+                  fontSize: '1.75rem',
+                  height: '1.75rem',
+                  width: '1.75rem'
+                }} />)}
+          </DrawerToggleHitboxContent>
+        </DrawerToggle>}
+
+        <Box style={{
+          borderRadius: '50%',
+          boxShadow: '5px 0 15px 0 rgb(0 0 0 / 10%)',
+          display: 'none',
+          height: '50px',
+          left: '12px',
+          position: 'fixed',
+          right: 'auto !important',
+          top: '50%',
+          transform: 'translate(50%, -50%)',
+          width: '50px'
+        }} />
+        <DrawerToggle
+          onClick={handleIsPersistent}
+          aria-label={isDrawerOpen ? 'Close Navigation' : 'Open Navigation'}
+          aria-expanded={isDrawerOpen ? 'true' : 'false'}
+          aria-controls="vertical-navigation"
+          style={{
+            display: 'none',
+            position: 'fixed',
+            top: '50%',
+            transform: 'translate(50%, -50%)',
+            zIndex: 10
+          }}
+        >
+          <NotchExtendSVG style={{
+            display: 'block',
+            fill: theme.palette.mode === 'dark'
+              ? theme.palette.primary.main
+              : theme.palette.background.paper,
+            height: '165px',
+            left: '-12px',
+            padding: '0',
+            position: 'absolute',
+            top: '-61px',
+            transition: 'none',
+            width: '90px',
+            zIndex: '-1'
+          }} />
+          <DrawerToggleHitboxContent style={{
+            background: 'transparent',
+            boxShadow: 'none',
+            fontSize: '1.3rem',
+            height: '1.3rem',
+            padding: theme.spacing(1),
+            width: '1.3rem'
+          }}>
+            {isPersistent
+              ? (
+                <PushPin style={{
+                  fontSize: '1.3rem',
+                  height: '1.3rem',
+                  width: '1.3rem'
+                }} />)
+              : (
+                <PushPin style={{
+                  fontSize: '1.3rem',
+                  height: '1.3rem',
+                  width: '1.3rem'
+                }} />)}
+          </DrawerToggleHitboxContent>
+        </DrawerToggle>
+      </div>
+
+      <NotchSVG style={{ height: '0', position: 'absolute', width: '0' }} />
+
+      <div
+        className='wrapper'
+        style={{
+          backgroundColor: theme.palette.mode === 'dark'
+            ? theme.palette.primary.main
+            : theme.palette.background.paper,
+          flex: '1 1px',
+          overflow: 'auto',
+          position: 'relative'
+        }}
+      >
+        <StyledNav tabIndex={-1} aria-label='Primary'>
+          <List
+            style={{
+              height: '100%',
+              width: DRAWER_WIDTH.Expanded,
+              marginTop: `-${theme.spacing(0.5)} !important`
+            }}
+          >
+            {items && items.length > 0 && items.map((item, index) => (
+              <VerticalNavigationItem
+                {...item}
+                index={index}
+                isDrawerOpen={isDrawerOpen || isPersistent}
+                style={useFadeIn(animationCount, incrementAnimationCount)}
+              />
+            ))}
+          </List>
+        </StyledNav>
+      </div>
+
+      <div
+        className='wrapper'
+        style={{
+          backgroundColor: theme.palette.mode === 'dark'
+            ? theme.palette.primary.main
+            : theme.palette.background.paper
+        }}
+      >
+        <StyledNavSecondary
+          aria-label='Secondary'
+          // style={{ height: secondaryItems && secondaryItems.length > 0 ? `${logoHeight * (secondaryItems.length + 1)}px` : logoHeight }}
+        >
+          <StyledDivider isDrawerOpen={isDrawerOpen || isPersistent}/>
+          <List
+            style={{
+              width: DRAWER_WIDTH.Expanded,
+              backgroundColor: theme.palette.mode === 'dark'
+                ? theme.palette.primary.main
+                : theme.palette.background.paper
+            }}
+          >
+            {hasStreamHome
+              ? (
+                <VerticalNavigationItem
+                  label='App Switcher'
+                  icon={<Apps />}
+                  onClick={handleToggleAppsClick}
+                  content={(
+                    <AppSwitcher
+                      isAppSwitcherOpen={isAppSwitcherOpen}
+                      setIsAppSwitcherOpen={setIsAppSwitcherOpen}
+                      applications={streamHomeApplications}
+                      apiKey={streamHomeApiKey ?? ''}
+                      baseUrl={streamHomeBaseUrl ?? ''}
+                      token={streamHomeAccessToken ?? ''}
+                      isDrawerOpen={isDrawerOpen}
+                    />
+                  )}
+                  isDrawerOpen={isDrawerOpen || isPersistent}
+                  isSecondary
+                  hasCustomContent
+                  style={useFadeIn(animationCount, incrementAnimationCount)}
+                />
+              )
+              : null}
+
+            {secondaryItems && secondaryItems.length > 0 && secondaryItems.map((item, index) => (
+              <VerticalNavigationItem
+                {...item}
+                index={index}
+                isDrawerOpen={isDrawerOpen || isPersistent}
+                isSecondary
+                style={useFadeIn(animationCount, incrementAnimationCount)}
+              />
+            ))}
+
+            {avatarName
+              ? (
+                <VerticalNavigationItem
+                  label={avatarName}
+                  aria-controls='avatar-panel'
+                  icon={<Avatar
+                    style={{
+                      // backgroundColor: mainTheme.colorButtonText,
+                      // color: mainTheme.colorButton,
+                      fontSize: '0.75rem',
+                      height: 32,
+                      width: 32
+                    }}
+                  >
+                    {avatarInitials}
+                  </Avatar>}
+                  style={{
+                    maxHeight: isDrawerOpen ? '200px' : '48px',
+                    overflow: 'hidden',
+                    padding: 0,
+                    minHeight: 52,
+                    transition: `max-height 225ms ${motion.easeInOut} 0ms !important`,
+                    ...useFadeIn(animationCount, incrementAnimationCount)
+                  }}
+                  onClick={() => setIsAvatarOpen(!isAvatarOpen)}
+                  hasFlyout
+                  fullHeightFlyout
+                  content={<AvatarPanel
+                    avatarName={avatarName}
+                    isAvatarOpen={isAvatarOpen}
+                    {...rest}
+                  />}
+                  isDrawerOpen={isDrawerOpen}
+                />)
+              : null}
+          </List>
+        </StyledNavSecondary>
+      </div>
+      {/* <NotchBackgroundSVG style={{ height: '0', position: 'absolute', width: '0' }} />
+
+      <svg id='notch-background-svg' viewBox="0 0 25 865" xmlns="http://www.w3.org/2000/svg" style={{ height: '0', position: 'absolute', width: '0' }}>
+        <path fill={theme.palette.mode === 'dark' ? theme.palette.primary.main : theme.palette.background.paper} fill-rule="evenodd" clip-rule="evenodd" d="M25 0H0V865H25V468.5V466.451C24.6432 460.704 21.3624 455.984 18.6792 453.948C9.58731 451.059 3 442.549 3 432.5C3 422.927 8.97844 414.75 17.4054 411.5H17C19.7393 410.587 24.563 405.088 25 398.049V396V0Z" />
+      </svg> */}
+    </Box>
+  )
+
+  return (
+    <StyledAside aria-label="Site navigation">
+      <DrawerShadow
+        className='drawerShadow'
+        aria-hidden='true'
+        isDrawerOpen={isDrawerOpen || isPersistent}
+        style={{
+          display: isPersistent ? 'none' : 'block'
+        }}
+      />
+      <Modal
+        aria-hidden={false}
+        keepMounted={true}
+        disablePortal={true}
+        open={isDrawerOpen}
+        onClose={toggleDrawer(false)}
+      >
+        <StyledDrawer
+          id='vertical-navigation'
+          anchor='left'
+          open={isDrawerOpen || isPersistent}
+          onClose={toggleDrawer(false)}
+          variant='permanent'
+        >
+          {listContent()}
+        </StyledDrawer>
+      </Modal>
+    </StyledAside>
+  )
+}
+
+export default VerticalNavigation

package/src/lib/components/navigation/VerticalNavigation/VerticalNavigationAvatar.tsx

@@ -0,0 +1,208 @@
+import React, { useEffect } from 'react'
+import {
+  Box, ButtonGroup, Button, Link,
+  List, ListItem, ListItemIcon, ListItemText
+} from '../../../index'
+import {
+  StyledBox, StyledBoxProfile,
+  StyledAvatarName, StyledAvatar, StyledOutlineButton,
+  StyledBoxProfileEdit, StyledListItemButton
+} from './VerticalNavigationAvatarStyles'
+import { useTheme } from '@mui/material/styles'
+import EditIcon from '@mui/icons-material/Edit'
+import LogoutIcon from '@mui/icons-material/Logout'
+import { handleAvatarInitials, useStaggerAnimation } from '../../../utils/helpers'
+import { Person, Settings } from '@mui/icons-material'
+import { IAvatarMenuItemProps, IAvatarPanelProps } from '../../../types'
+import { animated } from '@react-spring/web'
+
+const AvatarPanel = (
+  props: IAvatarPanelProps
+): React.ReactElement => {
+  const theme = useTheme()
+  const {
+    avatarName, avatarPanelOnClickLogout, avatarPanelLogoutString,
+    avatarPanelOnClickViewProfile, avatarPanelViewProfileString,
+    avatarPanelOnClickEditProfile, avatarPanelEditProfileString,
+    avatarPanelMenuItems, avatarPanelOnClickMainAction,
+    avatarPanelMainActionString, avatarPanelSettingItems,
+    avatarPanelFootnote, isAvatarOpen
+  } = props
+
+  useEffect(() => setAvatarInitials(handleAvatarInitials(avatarName)), [
+    avatarName
+  ])
+
+  const [avatarInitials, setAvatarInitials] = React.useState(
+    handleAvatarInitials(avatarName) ?? 'AN'
+  )
+
+  // First item starts at 70ms
+  // see STAGGER_ITEMS_DELAY in helpers.js
+  let animationCount = 1
+  const incrementAnimationCount = () => animationCount++
+
+  return (
+    <StyledBox>
+      {avatarPanelOnClickLogout && (
+        <Button
+          // @ts-expect-error
+          component={animated.button}
+          style={{
+            left: theme.direction === 'rtl' ? theme.spacing(1) : 'auto',
+            position: 'absolute',
+            right: theme.direction === 'rtl' ? 'auto' : theme.spacing(1),
+            top: theme.spacing(1),
+            ...useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount)
+          }}
+          onClick={avatarPanelOnClickLogout}
+          startIcon={<LogoutIcon />}
+          variant='text'
+          color='inherit'
+        >
+          {avatarPanelLogoutString ?? 'Logout'}
+        </Button>
+      )}
+
+      <Box
+        style={{
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'column'
+        }}
+      >
+        <StyledBoxProfile style={useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount)}>
+          <StyledAvatar style={{ marginRight: '0.5rem' }}>
+            {avatarInitials}
+          </StyledAvatar>
+          <StyledAvatarName>
+            <span style={{ fontWeight: 300 }}>
+                Hi,</span> <strong>{avatarName.split(' ')[0]}
+            </strong>
+          </StyledAvatarName>
+        </StyledBoxProfile>
+
+        {avatarPanelOnClickViewProfile && (
+          <StyledBoxProfileEdit
+            style={{
+              flexDirection: 'row',
+              marginBottom: theme.spacing(2),
+              ...useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount)
+            }}>
+            <ButtonGroup variant="contained" aria-label="split button">
+              <Button
+                variant='contained'
+                color='primary'
+                size='medium'
+                onClick={avatarPanelOnClickViewProfile}
+                startIcon={<Person />}
+              >{avatarPanelViewProfileString ?? 'View Profile'}</Button>
+              {avatarPanelOnClickEditProfile && (
+                <Button
+                  size='medium'
+                  aria-label={avatarPanelEditProfileString ?? 'Edit Profile'}
+                  onClick={avatarPanelOnClickEditProfile}
+                >
+                  <EditIcon />
+                </Button>
+              )}
+            </ButtonGroup>
+          </StyledBoxProfileEdit>
+        )}
+      </Box>
+
+      <Box
+        style={{
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'column'
+        }}
+      >
+        {avatarPanelMenuItems && avatarPanelMenuItems.length > 0 && (
+          <List style={{
+            marginBottom: theme.spacing(2),
+            maxWidth: '14rem'
+          }}>
+            {avatarPanelMenuItems.map((avatarMenuItem: IAvatarMenuItemProps) => (
+              <ListItem
+                component={animated.div}
+                style={useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount)}
+                // whileHover={motionWhileHover}
+                // whileTap={motionWhileTap}
+                disablePadding
+              >
+                <StyledListItemButton
+                  // TODO: figure out if these are links or buttons
+                  // @ts-expect-error
+                  component={Link}
+                  role='link'
+                  onClick={avatarMenuItem.onClick}
+                >
+                  <ListItemIcon
+                    aria-hidden={true}
+                    style={{
+                      minWidth: theme.spacing(5)
+                    }}
+                  >
+                    {avatarMenuItem.icon}
+                  </ListItemIcon>
+                  <ListItemText primary={avatarMenuItem.label} />
+                </StyledListItemButton>
+              </ListItem>
+            ))}
+          </List>
+        )}
+
+        {avatarPanelOnClickMainAction && <StyledOutlineButton
+          // @ts-expect-error
+          component={animated.button}
+          style={useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount)}
+          disablePadding
+          variant='outlined'
+          color='primary'
+          size='medium'
+          onClick={avatarPanelOnClickMainAction}
+          startIcon={<Settings />}
+        >{avatarPanelMainActionString}</StyledOutlineButton>}
+
+        <List style={{ marginBottom: theme.spacing(2) }}>
+          {avatarPanelSettingItems &&
+            avatarPanelSettingItems.length > 0 &&
+            avatarPanelSettingItems.map((avatarMenuItem: IAvatarMenuItemProps) => (
+              <ListItem
+                component={animated.div}
+                style={useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount)}
+                // whileHover={motionWhileHover}
+                // whileTap={motionWhileTap}
+                disablePadding
+              >
+                <StyledListItemButton
+                  // TODO: figure out if these are links or buttons
+                  // @ts-expect-error
+                  component={Link}
+                  role='link'
+                  onClick={avatarMenuItem.onClick}
+                >
+                  <ListItemIcon
+                    aria-hidden={true}
+                    style={{
+                      minWidth: theme.spacing(5)
+                    }}
+                  >
+                    {avatarMenuItem.icon}
+                  </ListItemIcon>
+                  <ListItemText primary={avatarMenuItem.label} />
+                </StyledListItemButton>
+              </ListItem>
+            ))}
+        </List>
+      </Box>
+
+      <Box className='avatar-panel-footnote'>
+        {avatarPanelFootnote && avatarPanelFootnote}
+      </Box>
+    </StyledBox>
+  )
+}
+
+export default AvatarPanel