@learningpool/ui 1.6.3 → 1.6.5

package/src/lib/components/landmarks/Header/HeaderActionButtons.tsx

@@ -1,117 +0,0 @@
-import { useState } from 'react'
-import Icon from '@mui/material/Icon'
-import Menu from '@mui/material/Menu'
-import MenuItem from '@mui/material/MenuItem'
-import IconButton from '@mui/material/IconButton'
-import Tooltip from '@mui/material/Tooltip'
-import MoreVertIcon from '@mui/icons-material/MoreVert'
-
-const MAX_ICONS = 0
-
-const HeaderActionButtons = (props: any) => {
-  const { options, styles, forceListView } = props
-  const [anchorEl, setAnchorEl] = useState(null)
-
-  const handleClick = (event: any) => {
-    event?.stopPropagation()
-    setAnchorEl(event.currentTarget)
-  }
-
-  const handleClose = (event: any) => {
-    event?.stopPropagation()
-    setAnchorEl(null)
-  }
-
-  const handleOptionClick = (event: any, option: any) => {
-    event?.stopPropagation()
-    option?.onClick()
-    handleClose(event)
-  }
-
-  if (!options) {
-    console.log('Did you mean to pass items using the `options` parameter?')
-    return null
-  }
-
-  // Show icon buttons if less than MAX_ICONS
-  if (options.length <= MAX_ICONS && !forceListView) {
-    return (
-      <div style={styles}>
-        {options.map((option: any) => {
-          const { label, icon, onClick } = option
-          const handleOptionClick = onClick
-
-          return (
-            <Tooltip
-              key={label}
-              title={label}
-              aria-label={label}
-              placement='bottom'
-              enterDelay={500}
-              enterNextDelay={50}
-              leaveDelay={50}
-              disableInteractive
-            >
-              <IconButton
-                size='small'
-                aria-label={label}
-                onClick={handleOptionClick}
-              >
-                <Icon>{icon}</Icon>
-              </IconButton>
-            </Tooltip>
-          )
-        })}
-      </div>
-    )
-  }
-
-  // Show menu and v-ellipsis if more than MAX_ICONS
-  return (
-    <div style={styles}>
-      <IconButton
-        aria-label='more'
-        aria-haspopup='true'
-        onClick={handleClick}
-      >
-        <MoreVertIcon />
-      </IconButton>
-      <Menu
-        id='actionButtonMenu'
-        anchorEl={anchorEl}
-        open={Boolean(anchorEl)}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'center'
-        }}
-        // getContentAnchorEl={null}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'center'
-        }}
-      >
-        {options.map((option: any) => {
-          const { label, isDisabled, actionKey, hide } = option
-
-          if (hide) {
-            return null
-          }
-
-          return (
-            <MenuItem
-              key={actionKey}
-              onClick={event => handleOptionClick(event, option)}
-              aria-label={label}
-              disabled={isDisabled}
-            >
-              {label}
-            </MenuItem>
-          )
-        })}
-      </Menu>
-    </div>
-  )
-}
-
-export default HeaderActionButtons

package/src/lib/components/landmarks/Header/HeaderStyles.tsx

@@ -1,62 +0,0 @@
-import { Box, Paper } from '../../../index'
-import { Breadcrumbs, styled } from '@mui/material'
-
-export const StyledPaper = styled(Paper)`
-  display: flex;
-  flex-direction: ${props => props.theme.direction === 'ltr' ? 'row' : 'row-reverse'};
-  position: relative;
-  width: 100%;
-
-  &.is-sticky {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-  }
-`
-
-export const StyledBreadcrumbs = styled(Breadcrumbs)`
-  font-size: ${props => props.theme.typography.subtitle2.fontSize};
-  margin-bottom: 0.5rem;
-
-  ol {
-    flex-direction: ${props => props.theme.direction === 'ltr' ? 'row' : 'row-reverse'};
-  }
-`
-
-export const StyledHeaderPrimary = styled(Box)`
-  align-items: ${props => props.theme.direction === 'ltr' ? 'flex-start' : 'flex-end'};
-  display: flex;
-  flex: 1 auto;
-  flex-direction: column;
-  padding: 1rem;
-  padding-inline-start: 2rem;
-
-  h1,
-  h4 {
-    font-size: clamp(1.125rem, 3.25vw, 2.75rem);
-    text-align: ${props => props.theme.direction === 'ltr' ? 'left' : 'right'};
-  }
-`
-
-export const StyledHeaderSecondary = styled(Box)`
-  align-items: center;
-  display: flex;
-  flex-direction: ${props => props.theme.direction === 'ltr' ? 'row' : 'row-reverse'};
-  justify-content: flex-end;
-  padding: 1rem;
-  padding-inline-end: 2rem;
-
-  button,
-  a {
-    white-space: nowrap;
-  }
-`
-
-export const StyledAdditionalButtonsContainer = styled(Box)`
-  margin-inline-start: ${props => props.theme.direction === 'ltr' ? '0.5rem' : '0'};
-  margin-inline-end: ${props => props.theme.direction === 'rtl' ? '0.5rem' : '0'};
-`
-
-export const StyledBox = styled(Box)`
-  background: ${props => props.theme.palette.background.default};
-`

package/src/lib/components/navigation/Drawer/Drawer.test.tsx

@@ -1,95 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import React from 'react'
-import { cleanup, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { Drawer } from '../../../../lib'
-
-// Note: running cleanup afterEach is done automatically for you in @testing-library/react@9.0.0 or higher
-// unmount and cleanup DOM after the test is finished.
-afterEach(cleanup)
-
-describe('Test -- Drawer component', () => {
-  it('renders a Drawer', () => {
-    render(
-      <Drawer open={true} data-testid="DrawerTest">
-        Test
-      </Drawer>
-    )
-
-    expect(screen.getByTestId('DrawerTest')).toMatchInlineSnapshot(`
-      <div
-        class="MuiDrawer-root MuiDrawer-modal MuiModal-root css-11wwa2f-MuiModal-root-MuiDrawer-root"
-        data-testid="DrawerTest"
-        role="presentation"
-      >
-        <div
-          aria-hidden="true"
-          class="MuiBackdrop-root css-i9fmh8-MuiBackdrop-root-MuiModal-backdrop"
-          style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-        />
-        <div
-          data-test="sentinelStart"
-          tabindex="0"
-        />
-        <div
-          class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation16 MuiDrawer-paper MuiDrawer-paperAnchorLeft css-4t3x6l-MuiPaper-root-MuiDrawer-paper"
-          tabindex="-1"
-        >
-          Test
-        </div>
-        <div
-          data-test="sentinelEnd"
-          tabindex="0"
-        />
-      </div>
-    `)
-  })
-
-  it('should be closed by default', () => {
-    render(
-      <div data-testid="parent">
-        <Drawer>Test</Drawer>
-      </div>
-    )
-
-    const parent = screen.getByTestId('parent')
-    expect(parent).toBeEmptyDOMElement()
-  })
-
-  it('renders a persistant drawer', () => {
-    render(
-      <Drawer variant="persistent" data-testid="test">
-        Test
-      </Drawer>
-    )
-
-    const drawer = screen.getByTestId('test')
-    expect(drawer).toBeInTheDocument()
-  })
-
-  it('responds to a onClick event', () => {
-    const mockCallBack = jest.fn()
-    render(
-      <Drawer open={true} onClick={mockCallBack} data-testid="DrawerTest">
-        Test
-      </Drawer>
-    )
-
-    userEvent.click(screen.getByTestId('DrawerTest'))
-    expect(mockCallBack.mock.calls.length).toEqual(1)
-  })
-
-  it('has the proper tabindex', () => {
-    render(
-      <Drawer open={true} data-testid="DrawerTest">
-        Test
-      </Drawer>
-    )
-
-    const drawer = screen.getByText('Test')
-    expect(drawer).toHaveAttribute('tabindex', '-1')
-  })
-})

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

@@ -1,21 +0,0 @@
-import React from 'react'
-import MUIDrawer, { DrawerProps } from '@mui/material/Drawer'
-import { styled } from '@mui/material/styles'
-
-interface IDrawerProps extends DrawerProps {
-  component?: string | JSX.Element
-}
-
-const StyledDrawer = styled(MUIDrawer)(({ theme }) => ({}))
-
-const Drawer = React.forwardRef((
-  { ...rest }: IDrawerProps,
-  ref: React.Ref<HTMLDivElement>
-): JSX.Element => (
-  <StyledDrawer
-    {...rest}
-    ref={ref}
-  />
-))
-
-export default Drawer

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

@@ -1,276 +0,0 @@
-import React, { useEffect } from 'react'
-import { Person } from '@mui/icons-material'
-import { IMobileNavigationItemProps } from './MobileNavigationItem/MobileNavigationItem'
-import {
-  StyledBottomNavigationAction, StyledPaper, StyledBottomNavigation
-} from './MobileNavigationStyles'
-import { StyledAvatar } from './MobileNavigationAvatarStyles'
-import SwipeableTemporaryDrawer from './MobileNavigationDrawer'
-import SwipeableTemporarySearch from './MobileNavigationSearch'
-import SwipeableTemporaryAvatar, { IAvatarMenuItemProps } from './MobileNavigationAvatar'
-import NotchIndicator from './MobileNavigationNotchIndicator'
-import ToggleX from './MobileNavigationToggleX'
-import ToggleSearchX from './MobileNavigationToggleSearchX'
-import { MOBILE_NAV_PANEL_TYPES } from '../../../utils/constants'
-import { handleAvatarInitials } from '../../../utils/helpers'
-import { useSpring, animated, useSpringRef, config } from '@react-spring/web'
-import { useCurrentWidth } from '../../../utils/hooks'
-
-interface MobileNavigationProps {
-  logo?: string
-  logoText?: string
-  logoOnClick?: any
-  items?: IMobileNavigationItemProps[]
-  secondaryItems?: IMobileNavigationItemProps[]
-  hasStreamHome?: boolean
-  streamHomeAccessToken?: string
-  streamHomeBaseUrl?: string
-  streamHomeApiKey?: string
-  avatarName?: string
-  isDrawerOpen?: boolean
-  isSearchOpen?: boolean
-  isAvatarOpen?: boolean
-  hideAvatarInitials?: boolean
-  showNotchIndicator?: boolean
-
-  // Search panel props
-  hasSearch?: boolean
-  searchPanelPlaceholder?: string
-  searchPanelDefaultValue?: string
-  searchPanelOnClickSearch?: any
-
-  // 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>
-}
-
-const MobileNavigation = (
-  props: MobileNavigationProps
-): React.ReactElement => {
-  const {
-    items, secondaryItems, hideAvatarInitials,
-    hasSearch, hasAvatar, showNotchIndicator, ...rest
-  } = props
-  const propIsDrawerOpen = typeof props?.isDrawerOpen === 'boolean' ? props.isDrawerOpen : undefined
-  const propIsSearchOpen = typeof props?.isSearchOpen === 'boolean' ? props.isSearchOpen : undefined
-  const propIsAvatarOpen = typeof props?.isAvatarOpen === 'boolean' ? props.isAvatarOpen : undefined
-  const avatarName = props?.avatarName ?? 'Avatar name'
-  const [isDrawerOpen, setIsDrawerOpen] = React.useState(propIsDrawerOpen ?? false)
-  const [isSearchOpen, setIsSearchOpen] = React.useState(propIsSearchOpen ?? false)
-  const [isAvatarOpen, setIsAvatarOpen] = React.useState(propIsAvatarOpen ?? false)
-  const [value, setValue] = React.useState(0)
-
-  const currentDirection = window.localStorage.getItem('@learningpool/ui/store/mobile-navigation-direction')
-  const [mobileNavDirection, setMobileNavDirection] = React.useState(currentDirection ?? 'ltr')
-
-  const [mobileNotchPosition, setMobileNotchPosition] = React.useState(0)
-  const windowWidth = useCurrentWidth()
-
-  useEffect(() => {
-    window.localStorage.setItem('@learningpool/ui/store/mobile-navigation-direction', mobileNavDirection)
-    positionMobileNotch()
-  }, [mobileNavDirection])
-
-  const NOTCH = {
-    Height: 50,
-    Width: 50
-  }
-
-  const BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS = document.querySelectorAll('.MuiBottomNavigationAction-root, .bottom-navigation-item')
-
-  const positionMobileNotch = () => {
-    const selectedDOMRect = BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS[value]?.getBoundingClientRect()
-    setMobileNotchPosition(selectedDOMRect ? selectedDOMRect.left + (selectedDOMRect.width / 2) - (NOTCH.Width / 2) : mobileNotchPosition)
-  }
-
-  useEffect(() => positionMobileNotch(), [
-    value,
-    windowWidth,
-    // Fix notch position if scrollbar is hidden/shown
-    BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS[value]?.getBoundingClientRect()
-  ])
-
-  useEffect(() => setIsDrawerOpen(propIsDrawerOpen ?? false), [propIsDrawerOpen])
-  useEffect(() => setIsSearchOpen(propIsSearchOpen ?? false), [propIsSearchOpen])
-  useEffect(() => setIsAvatarOpen(propIsAvatarOpen ?? false), [propIsAvatarOpen])
-  useEffect(() => setAvatarInitials(handleAvatarInitials(avatarName)), [avatarName])
-
-  useEffect(() => {
-    function hideNotch (): void {
-      const HIDE_NOTCH = -1
-
-      if (!isDrawerOpen && !isSearchOpen && !isAvatarOpen) {
-        setValue(HIDE_NOTCH)
-      }
-    }
-
-    hideNotch()
-  }, [isDrawerOpen, isSearchOpen, isAvatarOpen])
-
-  const [avatarInitials, setAvatarInitials] = React.useState(handleAvatarInitials(avatarName) ?? 'AN')
-
-  const toggleDrawer = (open: boolean, action: string) => (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
-      }
-    }
-
-    // Close any open drawers
-    setIsDrawerOpen(false)
-    setIsSearchOpen(false)
-    setIsAvatarOpen(false)
-
-    // Handle drawer toggling based on 'action' or default to 'drawer'
-    switch (action) {
-      case MOBILE_NAV_PANEL_TYPES.SEARCH: {
-        setIsSearchOpen(open ?? !isSearchOpen)
-        setValue(1)
-        break
-      }
-      case MOBILE_NAV_PANEL_TYPES.AVATAR: {
-        setIsAvatarOpen(open ?? !isAvatarOpen)
-        setValue(2)
-        break
-      }
-      default: {
-        setIsDrawerOpen(open ?? !isDrawerOpen)
-        setValue(0)
-        break
-      }
-    }
-  }
-
-  const api = useSpringRef()
-  const animationConfig: any = {
-    MobileNavigationPaper: {
-      from: { opacity: 0 },
-      to: { opacity: 1 }
-    },
-    MobileNavigation: {
-      from: { opacity: 0 },
-      to: { opacity: 1 }
-    },
-    MobileNavigationButton: {
-      from: { opacity: 0 },
-      to: { opacity: 1 }
-    },
-    MobileNavigationNotch: {
-      ref: api,
-      config: {
-        ...config.default,
-        mass: 1
-        // friction: 30,
-        // tension: 200
-      },
-      x: mobileNotchPosition,
-      y: value < 0 ? 100 : 0
-    }
-  }
-
-  const MobileNavigationPaperAnimation = useSpring(animationConfig.MobileNavigationPaper)
-  const MobileNavigationAnimation = useSpring(animationConfig.MobileNavigation)
-  const MobileNavigationButtonAnimation = useSpring(animationConfig.MobileNavigationButton)
-
-  return (
-    <>
-      <SwipeableTemporaryDrawer
-        isDrawerOpen={isDrawerOpen}
-        setIsDrawerOpen={setIsDrawerOpen}
-        items={items}
-        secondaryItems={secondaryItems}
-        label='Primary'
-        {...rest}
-      />
-      {hasSearch && (
-        <SwipeableTemporarySearch
-          isSearchOpen={isSearchOpen}
-          setIsSearchOpen={setIsSearchOpen}
-          {...rest}
-        />
-      )}
-      {hasAvatar && (
-        <SwipeableTemporaryAvatar
-          isAvatarOpen={isAvatarOpen}
-          setIsAvatarOpen={setIsAvatarOpen}
-          avatarName={avatarName}
-          mobileNavDirection={mobileNavDirection}
-          setMobileNavDirection={setMobileNavDirection}
-          {...rest}
-        />
-      )}
-      <StyledPaper
-        elevation={3}
-        // @ts-expect-error
-        component={animated.div}
-        style={MobileNavigationPaperAnimation}
-      >
-        {showNotchIndicator && <NotchIndicator {...animationConfig.MobileNavigationNotch} />}
-
-        <StyledBottomNavigation
-          value={value}
-          onChange={(event, newValue) => setValue(newValue)}
-          // @ts-expect-error
-          component={animated.div}
-          style={{
-            flexDirection: mobileNavDirection && mobileNavDirection === 'rtl' ? 'row-reverse' : 'row',
-            ...MobileNavigationAnimation
-          }}
-        >
-          <StyledBottomNavigationAction
-            icon={<ToggleX isOpen={isDrawerOpen} />}
-            onClick={toggleDrawer(!isDrawerOpen, MOBILE_NAV_PANEL_TYPES.DRAWER)}
-            // @ts-expect-error
-            component={animated.div}
-            aria-label={isDrawerOpen ? 'Close drawer panel' : 'Open drawer panel'}
-            aria-expanded={isDrawerOpen ? 'true' : 'false'}
-            aria-controls='mobile-nav-menu'
-            style={{
-              marginInlineStart: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'auto' : 'initial',
-              marginInlineEnd: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'initial' : 'auto',
-              ...MobileNavigationButtonAnimation
-            }}
-          />
-          {hasSearch && (
-            <StyledBottomNavigationAction
-              icon={<ToggleSearchX isOpen={isSearchOpen} />}
-              onClick={toggleDrawer(!isSearchOpen, MOBILE_NAV_PANEL_TYPES.SEARCH)}
-              // @ts-expect-error
-              component={animated.div}
-              aria-label={isSearchOpen ? 'Close search panel' : 'Open search panel'}
-              aria-expanded={isSearchOpen ? 'true' : 'false'}
-              aria-controls='mobile-nav-menu'
-              style={MobileNavigationButtonAnimation}
-            />
-          )}
-          {hasAvatar && (
-            <StyledBottomNavigationAction
-              onClick={toggleDrawer(!isAvatarOpen, MOBILE_NAV_PANEL_TYPES.AVATAR)}
-              icon={!hideAvatarInitials ? <StyledAvatar>{avatarInitials}</StyledAvatar> : <Person />}
-              // @ts-expect-error
-              component={animated.button}
-              aria-label={isAvatarOpen ? 'Close Profile Menu' : 'Open Profile Menu'}
-              aria-expanded={isAvatarOpen ? 'true' : 'false'}
-              aria-controls='mobile-nav-menu'
-              style={MobileNavigationButtonAnimation}
-            />
-          )}
-        </StyledBottomNavigation>
-      </StyledPaper>
-    </>
-  )
-}
-
-export default MobileNavigation