@learningpool/ui 1.6.3 → 1.6.6

package/src/lib/components/navigation/MobileNavigation/MobileNavigationAvatar.tsx

@@ -1,334 +0,0 @@
-import React, { useEffect } from 'react'
-import {
-  Box, ButtonGroup, Button, Link,
-  List, ListItem, ListItemIcon,
-  ListItemText
-} from '../../../index'
-import {
-  StyledSwipeableAvatar, StyledBox, StyledBoxProfile,
-  StyledAvatarName, StyledAvatar, StyledOutlineButton,
-  StyledBoxProfileEdit, StyledListItemButton
-} from './MobileNavigationAvatarStyles'
-import { useTheme } from '@mui/material/styles'
-import EditIcon from '@mui/icons-material/Edit'
-import LogoutIcon from '@mui/icons-material/Logout'
-import ToggleOffIcon from '@mui/icons-material/ToggleOff'
-import ToggleOnIcon from '@mui/icons-material/ToggleOn'
-import { handleAvatarInitials, useStaggerAnimation } from '../../../utils/helpers'
-import { animated } from '@react-spring/web'
-
-export interface IAvatarMenuItemProps {
-  label: string
-  icon: any
-  onClick: any
-}
-
-export interface ISwipeableTemporaryAvatarProps {
-  avatarName: string
-  editProfileText?: string
-  isAvatarOpen: boolean
-  setIsAvatarOpen?: any
-  mobileNavDirection?: string
-  setMobileNavDirection?: any
-
-  avatarPanelLogoutString?: string
-  avatarPanelOnClickSwitchDirection?: any
-  avatarPanelOnClickLogout?: any
-  avatarPanelOnClickViewProfile?: any
-  avatarPanelViewProfileString?: string
-  avatarPanelOnClickEditProfile?: any
-  avatarPanelEditProfileString?: string
-  avatarPanelMenuItems?: Array<IAvatarMenuItemProps>
-  avatarPanelOnClickMainAction?: any
-  avatarPanelMainActionString?: string
-  avatarPanelSettingItems?: Array<IAvatarMenuItemProps>
-  avatarPanelInvertNavString?: string
-}
-
-const SwipeableTemporaryAvatar = (
-  props: ISwipeableTemporaryAvatarProps
-): React.ReactElement => {
-  const theme = useTheme()
-  const {
-    avatarName, mobileNavDirection, avatarPanelLogoutString,
-    isAvatarOpen, setIsAvatarOpen, setMobileNavDirection,
-    avatarPanelOnClickSwitchDirection, avatarPanelOnClickLogout,
-    avatarPanelOnClickViewProfile, avatarPanelViewProfileString,
-    avatarPanelOnClickEditProfile, avatarPanelEditProfileString,
-    avatarPanelMenuItems, avatarPanelOnClickMainAction,
-    avatarPanelMainActionString, avatarPanelSettingItems,
-    avatarPanelInvertNavString
-  } = props
-
-  const [isOpen, setIsOpen] = React.useState(isAvatarOpen ?? false)
-
-  React.useEffect(() => handleOpenState(isAvatarOpen), [isAvatarOpen])
-
-  const handleOpenState = (open: boolean): void => {
-    setIsOpen(open)
-    setIsAvatarOpen(open)
-  }
-
-  const toggleAvatar =
-    (open: boolean) =>
-      (event: React.KeyboardEvent | React.MouseEvent) => {
-        if (event && event.type === 'keydown' &&
-          ((event as React.KeyboardEvent).key === 'Tab' ||
-          (event as React.KeyboardEvent).key === 'Shift')
-        ) {
-          return
-        }
-
-        handleOpenState(open)
-      }
-
-  const [avatarInitials, setAvatarInitials] = React.useState(handleAvatarInitials(avatarName) ?? 'AN')
-  useEffect(() => setAvatarInitials(handleAvatarInitials(avatarName)), [avatarName])
-
-  const handleOnClickSwitchDirection = () => {
-    setMobileNavDirection(mobileNavDirection === 'rtl' ? 'ltr' : 'rtl')
-    avatarPanelOnClickSwitchDirection && avatarPanelOnClickSwitchDirection()
-  }
-
-  // First item starts at 70ms
-  // see STAGGER_ITEMS_DELAY in helpers.js
-  let animationCount = 1
-  const incrementAnimationCount = () => animationCount++
-
-  return (
-    <StyledSwipeableAvatar
-      anchor='bottom'
-      open={isOpen}
-      onClose={toggleAvatar(false)}
-      hideBackdrop
-      ModalProps={{
-        keepMounted: true
-      }}
-    >
-      <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(isOpen, animationCount, incrementAnimationCount)
-            }}
-            onClick={() => {
-              handleOpenState(false)
-              avatarPanelOnClickLogout()
-            }}
-            startIcon={<LogoutIcon />}
-            variant='text'
-            color='inherit'
-          >
-            {avatarPanelLogoutString ?? 'Logout'}
-          </Button>
-        )}
-
-        <Box
-          style={{
-            alignItems: 'center',
-            display: 'flex',
-            flexDirection: 'column'
-          }}
-        >
-          <StyledBoxProfile
-            style={useStaggerAnimation(isOpen, 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(1),
-                ...useStaggerAnimation(isOpen, animationCount, incrementAnimationCount)
-              }}>
-              <ButtonGroup variant="contained" aria-label="split button">
-                <Button
-                  variant='contained'
-                  color='primary'
-                  size='medium'
-                  onClick={() => {
-                    handleOpenState(false)
-                    avatarPanelOnClickViewProfile()
-                  }}
-                >{avatarPanelViewProfileString ?? 'View Profile'}</Button>
-                {avatarPanelOnClickEditProfile && (
-                  <Button
-                    size='medium'
-                    aria-label={avatarPanelEditProfileString ?? 'Edit Profile'}
-                    onClick={() => {
-                      handleOpenState(false)
-                      avatarPanelOnClickEditProfile()
-                    }}
-                  >
-                    <EditIcon />
-                  </Button>
-                )}
-              </ButtonGroup>
-            </StyledBoxProfileEdit>
-          )}
-        </Box>
-
-        <Box
-          style={{
-            alignItems: 'center',
-            display: 'flex',
-            flexDirection: 'column'
-          }}
-        >
-          {avatarPanelMenuItems && avatarPanelMenuItems.length > 0 && (
-            <List style={{
-              marginInlineStart: '3rem',
-              marginBottom: theme.spacing(2),
-              maxWidth: '18rem'
-            }}>
-              {avatarPanelMenuItems.map((avatarMenuItem: IAvatarMenuItemProps) => (
-                <ListItem
-                  component={animated.div}
-                  style={useStaggerAnimation(isOpen, 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={() => {
-                      handleOpenState(false)
-                      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(isOpen, animationCount, incrementAnimationCount)}
-            disablePadding
-            variant='outlined'
-            color='primary'
-            size='medium'
-            onClick={() => {
-              handleOpenState(false)
-              avatarPanelOnClickMainAction()
-            }}
-          >{avatarPanelMainActionString}</StyledOutlineButton>}
-
-          <List style={{ marginBottom: theme.spacing(2) }}>
-            {avatarPanelSettingItems &&
-            avatarPanelSettingItems.length > 0 &&
-            avatarPanelSettingItems.map((avatarMenuItem: IAvatarMenuItemProps) => (
-              <ListItem
-                component={animated.div}
-                style={useStaggerAnimation(isOpen, 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={() => {
-                    handleOpenState(false)
-                    avatarMenuItem.onClick()
-                  }}
-                >
-                  <ListItemIcon
-                    aria-hidden={true}
-                    style={{
-                      minWidth: theme.spacing(5)
-                    }}
-                  >
-                    {avatarMenuItem.icon}
-                  </ListItemIcon>
-                  <ListItemText primary={avatarMenuItem.label} />
-                </StyledListItemButton>
-              </ListItem>
-            ))}
-
-            {avatarPanelOnClickSwitchDirection && (
-              <ListItem
-                component={animated.div}
-                style={useStaggerAnimation(isOpen, 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={handleOnClickSwitchDirection}
-                >
-                  <ListItemText primary={avatarPanelInvertNavString ?? 'Invert navigation bar'} />
-                  <ListItemIcon
-                    aria-hidden={true}
-                    style={{
-                      minWidth: theme.spacing(5),
-                      marginInlineStart: '0.5rem'
-                    }}
-                  >
-                    {mobileNavDirection === 'ltr'
-                      ? (
-                        <ToggleOffIcon
-                          style={{
-                            boxSizing: 'border-box',
-                            height: '2em',
-                            padding: '0.15em',
-                            width: '2em'
-                          }}
-                        />)
-                      : (
-                        <ToggleOnIcon
-                          style={{
-                            boxSizing: 'border-box',
-                            color: 'green',
-                            height: '2em',
-                            padding: '0.15em',
-                            width: '2em'
-                          }}
-                        />)}
-                  </ListItemIcon>
-                </StyledListItemButton>
-              </ListItem>
-            )}
-          </List>
-        </Box>
-      </StyledBox>
-    </StyledSwipeableAvatar>
-  )
-}
-
-export default SwipeableTemporaryAvatar

package/src/lib/components/navigation/MobileNavigation/MobileNavigationAvatarStyles.tsx

@@ -1,77 +0,0 @@
-import {
-  Avatar, Button,
-  ListItemButton, Typography
-} from '../../../index'
-import { Drawer } from '@mui/material'
-import { styled } from '@mui/material/styles'
-import { animated } from '@react-spring/web'
-
-export const StyledSwipeableAvatar = styled(Drawer)`
-  .MuiPaper-root {
-    color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.text.primary};
-    height: 100vh;
-    border: none;
-    z-index: 1;
-  }
-`
-
-export const StyledBox = styled(animated.div)`
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? '#003366'
-    : props.theme.palette.background.paper};
-  background-image: ${props => props.theme.palette.mode === 'dark'
-    ? 'none'
-    : 'radial-gradient( circle farthest-corner at 10% 20%, #fdfbfb 0.1%, #ebedee 99.8% )'};
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  height: 100%;
-  overflow: auto;
-  padding: 15vh ${props => props.theme.spacing(2)};
-  position: relative;
-`
-
-export const StyledBoxProfile = styled(animated.div)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: 2rem
-`
-
-export const StyledBoxProfileEdit = styled(animated.div)`
-  display: flex;
-`
-
-export const StyledAvatarName = styled(Typography)`
-  color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.text.primary};
-  font-size: 1.75rem;
-`
-
-export const StyledOutlineButton = styled(Button)`
-  border-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.primary.main};
-  color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.primary.main};
-`
-
-export const StyledAvatar = styled(Avatar)`
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.primary.main};
-  color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.primary.contrastText};
-  font-size: 0.85rem;
-`
-
-export const StyledListItemButton = styled(ListItemButton)`
-  border-radius: 50px;
-  margin-inline-end: 2rem;
-`

package/src/lib/components/navigation/MobileNavigation/MobileNavigationDrawer.tsx

@@ -1,197 +0,0 @@
-import * as React from 'react'
-import { useTheme } from '@mui/material/styles'
-import { List, ListItemText } from '../../../index'
-import {
-  StyledSwipeableDrawer, StyledBox, StyledListItem, StyledDivider,
-  StyledListSecondaryItem, StyledDrawerLogo, StyledDrawerLogoText,
-  StyledListSecondaryList, StyledListItemText, StyledListSecondaryButton,
-  StyledChildList, StyledChildListItem, StyledChildListItemText,
-  StyledListItemButton, StyledChildListItemButton
-} from './MobileNavigationDrawerStyles'
-import { StreamSuiteLogo } from '../../../assets/Images'
-import { animated } from '@react-spring/web'
-import { useStaggerAnimation } from '../../../utils/helpers'
-
-export interface IMobileNavigationItemProps {
-  label: string
-  onClick?: any
-  isActive?: boolean
-  children?: IMobileNavigationItemProps[]
-  isDrawerOpen?: boolean
-  index?: number
-  content?: React.ReactElement
-  style?: any
-  open?: boolean
-}
-
-export interface ISwipeableTemporaryDrawerProps {
-  isDrawerOpen: boolean
-  setIsDrawerOpen?: any
-  items?: IMobileNavigationItemProps[]
-  secondaryItems?: IMobileNavigationItemProps[]
-  logo?: string
-  logoText?: string
-  logoOnClick?: any
-  label: string
-  children?: ISwipeableTemporaryDrawerProps[]
-}
-
-export default function SwipeableTemporaryDrawer (props: ISwipeableTemporaryDrawerProps) {
-  const {
-    isDrawerOpen, setIsDrawerOpen, items, secondaryItems,
-    logo, logoText, logoOnClick
-  } = props
-  const theme = useTheme()
-  const [isOpen, setIsOpen] = React.useState(isDrawerOpen ?? false)
-
-  React.useEffect(() => handleOpenState(isDrawerOpen), [isDrawerOpen])
-
-  const handleOpenState = (open: boolean): void => {
-    setIsOpen(open)
-    setIsDrawerOpen(open)
-  }
-
-  const toggleDrawer =
-    (open: boolean) =>
-      (event: React.KeyboardEvent | React.MouseEvent) => {
-        if (event && event.type === 'keydown' &&
-          ((event as React.KeyboardEvent).key === 'Tab' ||
-          (event as React.KeyboardEvent).key === 'Shift')
-        ) {
-          return
-        }
-
-        handleOpenState(open)
-      }
-
-  // First item starts at 70ms
-  // see STAGGER_ITEMS_DELAY in helpers.js
-  let animationCount = 1
-  const incrementAnimationCount = () => animationCount++
-
-  const list = () => (
-    <StyledBox
-      onClick={toggleDrawer(false)}
-      onKeyDown={toggleDrawer(false)}
-    >
-      <StyledDrawerLogo
-        onClick={logoOnClick ?? null}
-        style={useStaggerAnimation(isDrawerOpen, animationCount, incrementAnimationCount)}
-        // whileHover={{ scale: 1.02 }}
-        // whileTap={{ scale: 0.95 }}
-      >
-        {logo
-          ? typeof logo === 'string'
-            ? (
-              <img
-                height={38}
-                width={38}
-                src={logo}
-                alt={logoText ?? 'Site Logo'}
-              />)
-            : logo
-          : (
-            <StreamSuiteLogo style={{
-              fill: theme.palette.mode === 'dark'
-                ? theme.palette.primary.main
-                : theme.palette.primary.main
-            }} />)}
-        <StyledDrawerLogoText variant='body1'>
-          {logoText ?? 'Site Logo'}
-        </StyledDrawerLogoText>
-      </StyledDrawerLogo>
-      <List>
-        {items && items.length > 0 && items.map((item, index) => {
-          const { label, children } = item
-
-          return (
-            <StyledListItem
-              key={label}
-              disablePadding
-              // @ts-expect-error
-              component={animated.li}
-              style={useStaggerAnimation(isDrawerOpen, animationCount, incrementAnimationCount)}
-            >
-              <StyledListItemButton
-                // whileHover={{ scale: 1.02 }}
-                // whileTap={{ scale: 0.95 }}
-                {...item}
-                // component={animated.button}
-                // onMouseEnter={() => set({ y: 0, color: '#000' })}
-                // onMouseLeave={() => set({ y: 100, color: '#fff' })}
-                // style={{
-                //   y,
-                //   color
-                // }}
-              >
-                <StyledListItemText primary={label} />
-              </StyledListItemButton>
-
-              {children && children.length > 0 && (
-                <StyledChildList aria-label={label}>
-                  {children.map(childItem => (
-                    <StyledChildListItem
-                      key={childItem.label}
-                      // whileHover={{ scale: 1.02 }}
-                      // whileTap={{ scale: 0.95 }}
-                    >
-                      <StyledChildListItemButton
-                        // whileHover={{ scale: 1.02 }}
-                        // whileTap={{ scale: 0.95 }}
-                        {...childItem}
-                      >
-                        <StyledChildListItemText key={childItem.label} primary={childItem.label} />
-                      </StyledChildListItemButton>
-                    </StyledChildListItem>
-                  ))}
-                </StyledChildList>
-              )}
-            </StyledListItem>
-          )
-        })}
-      </List>
-      {secondaryItems && secondaryItems.length > 0 && (
-        <>
-          <animated.div style={useStaggerAnimation(isDrawerOpen, animationCount, incrementAnimationCount)}>
-            <StyledDivider/>
-          </animated.div>
-          <StyledListSecondaryList>
-            {secondaryItems && secondaryItems.length > 0 && secondaryItems.map((item, index) => (
-              <StyledListSecondaryItem
-                key={item.label}
-                disablePadding
-                // @ts-expect-error
-                component={animated.li}
-                style={useStaggerAnimation(isDrawerOpen, animationCount, incrementAnimationCount)}
-              >
-                <StyledListSecondaryButton
-                  // whileHover={{ scale: 1.02 }}
-                  // whileTap={{ scale: 0.95, boxShadow: '0 6px 15px rgb(36 37 38 / 0%);' }}
-                  {...item}
-                >
-                  <ListItemText primary={item.label} />
-                </StyledListSecondaryButton>
-              </StyledListSecondaryItem>
-            ))}
-          </StyledListSecondaryList>
-        </>
-      )}
-    </StyledBox>
-  )
-
-  return (
-    <aside>
-      <StyledSwipeableDrawer
-        anchor='bottom'
-        open={isOpen}
-        onClose={toggleDrawer(false)}
-        hideBackdrop
-        ModalProps={{
-          keepMounted: true
-        }}
-      >
-        {list()}
-      </StyledSwipeableDrawer>
-    </aside>
-  )
-}