@learningpool/ui 1.6.0 → 1.6.1

package/src/lib/components/stream/AppSwitcher/AppSwitcherStyles.tsx

@@ -0,0 +1,325 @@
+import { styled } from '@mui/material/styles'
+
+export const AppSwitcherPanel = styled('div')`
+  background-color: ${props => props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.dark
+    : '#E6EAF0'};
+  border-radius: 0 4px 4px 0;
+  bottom: 0;
+  box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);
+  box-sizing: border-box;
+  font-family: 'Roboto';
+  height: 450px;
+  left: 57px;
+  overflow: auto;
+  overflow-x: hidden;
+  padding: 1rem 1.5rem;
+  position: fixed;
+  width: 360px;
+  z-index: 1;
+
+  & > div {
+    padding-bottom: 3rem;
+  }
+`
+
+export const List = styled('ul')`
+`
+
+export const MenuContent = styled('div')`
+  align-items: flex-start;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-top: 1rem;
+`
+
+export const SearchContent = styled('div')`
+  align-items: flex-start;
+  box-sizing: border-box;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding: 1rem 1rem 2rem;
+`
+
+export const AppListHeader = styled('div')`
+  align-items: center;
+  color: ${props => props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : '#555'};
+  display: flex;
+  font-size: 1.2rem;
+  font-weight: normal;
+  justify-content: flex-start;
+  padding: 1rem 1.25rem 0;
+
+  & svg {
+    height: 24px;
+    margin-right: 0.5rem;
+    width: 24px;
+  }
+`
+export const AppListItem = styled('div')`
+  align-items: center;
+  align-self: stretch;
+  box-sizing: border-box;
+  flex-direction: column;
+  flex: 0 0 ${100 / 3}%;
+  height: 104px;
+  overflow: visible;
+  padding: 0.25rem;
+  position: relative;
+
+  &:hover {
+    background-color: transparent;
+  }
+`
+
+export const AppLink = styled('a')`
+  align-items: center;
+  border-radius: 4px;
+  box-shadow: none;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  font-size: 0.85rem;
+  justify-content: center;
+  overflow: hidden;
+  padding: 1rem 0 0.5rem;
+  position: absolute;
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+
+  & .MuiTouchRipple-rippleVisible {
+    color: #004071;
+    opacity: 0.25;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: ${props => props.theme.palette.mode === 'dark'
+    ? 'rgba(22, 92, 141, 1)'
+    : '#ebf2fc'};
+    text-decoration: none;
+    z-index: 2;
+  }
+
+  &:active {
+    background-color: #f1f1f1;
+    z-index: 2;
+  }
+
+  & svg {
+    height: 60px;
+    width: 60px;
+  }
+
+  &:hover + span,
+  &:focus + span {
+    opacity: 1;
+  }
+
+  &:hover svg,
+  &:focus svg {
+    background-color: ${props => props.theme.palette.mode === 'dark'
+    ? 'rgba(22, 92, 141, 1)'
+    : '#ebf2fc'};
+    border-color: ${props => props.theme.palette.mode === 'dark'
+    ? 'rgba(22, 92, 141, 1)'
+    : '#ebf2fc'};
+  }
+
+  // Show full app name on hover
+  &:hover div,
+  &:focus div {
+    white-space: normal;
+    word-wrap: break-word;
+  }
+`
+
+export const AppName = styled('div')`
+  color: ${props => props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : '#555'};
+  font-weight: normal;
+  margin: 0.5rem 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 90px;
+`
+
+export const BackButton = styled('button')`
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: ${props => props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : '#555'};
+  cursor: pointer;
+  display: flex;
+  padding: 0.25rem 0;
+  text-align: left;
+  width: 100%;
+
+  &:focus,
+  &:hover {
+    background-color: ${props => props.theme.palette.mode === 'dark'
+    ? 'rgba(255, 255, 255, 0.1)'
+    : 'rgba(0, 0, 0, 0.1)'};
+  }
+`
+
+export const SearchBox = styled('input')`
+  background: #f4f4f4;
+  border: thin solid #888;
+  box-sizing: border-box;
+  color: #777;
+  padding: 0.5rem;
+  width: 100%;
+
+  &:hover .MuiOutlinedInput-notchedOutline {
+    border-color: #888;
+  }
+
+  & .MuiOutlinedInput-root {
+    border-radius: 0;
+    color: #777;
+    padding: 0;
+  }
+
+  & .MuiOutlinedInput-input {
+    padding: 0.5rem;
+  }
+
+  & ::placeholder {
+    opacity: 0.75;
+  }
+`
+
+export const AppOrganisationCount = styled('span')`
+  background: #00497D;
+  border-color: #616161;
+  border-radius: 4px;
+  border: none;
+  color: white;
+  font-size: 1rem;
+  font-weight: bold;
+  height: 48%;
+  left: 54%;
+  line-height: 50px;
+  margin-top: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  text-align: center;
+  top: 49%;
+  transform: translate(-50%, -50%);
+  width: 50%;
+  z-index: 3;
+`
+
+export const SelectedOrganisation = styled('div')`
+  align-items: center;
+  color: ${props => props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : '#555'};
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  padding: 1.5rem 0;
+  width: 100%;
+
+  & svg,
+  & svg image {
+    height: 24px;
+    width: 24px;
+  }
+
+  & span {
+    font-size: 1.2rem;
+    font-weight: normal;
+    margin: 0 0 0 .5rem;
+  }
+`
+
+export const StyledSVG = styled('svg')`
+  box-sizing: content-box;
+  display: inline-block;
+  fill: currentcolor;
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  height: 1em;
+  margin: 4px;
+  padding: 0;
+  user-select: none;
+  width: 1em;
+`
+
+export const OrganisationList = styled('div')`
+  height: 300px;
+  overflow: auto;
+  padding-top: 0.5rem;
+  width: 100%;
+`
+
+export const OrganisationLink = styled('a')`
+  align-items: center;
+  border-radius: 4px;
+  box-shadow: none;
+  color: ${props => props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : '#555'};
+  display: flex;
+  font-size: 1rem;
+  justify-content: space-between;
+  margin: 0 0.125rem;
+  padding: 0.5rem;
+  text-decoration: none;
+  transition: all 200ms ease;
+
+  & .MuiTouchRipple-rippleVisible {
+    color: #004071;
+    opacity: 0.25;
+  }
+
+  &:focus,
+  &:hover {
+    background-color: ${props => props.theme.palette.mode === 'dark'
+    ? 'rgba(255, 255, 255, 0.1)'
+    : 'rgba(0, 0, 0, 0.1)'};
+
+    & svg {
+      visibility: visible;
+    }
+  }
+
+  &:active {
+    background-color: #f1f1f1;
+  }
+
+  & .MuiLink-root {
+    align-items: center;
+    color: #555;
+    display: flex;
+    justify-content: space-between;
+    text-decoration: none;
+    width: 100%;
+  }
+
+  & svg {
+    visibility: hidden;
+  }
+`
+
+export const StyledLogoSVG = styled('svg')`
+  background-color: ${props => props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.dark
+    : '#E6EAF0'};
+  border: thin solid ${props => props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.dark
+    : '#E6EAF0'};
+  position: relative;
+  z-index: 1;
+`

package/src/lib/components/stream/AppSwitcher/constants.tsx

@@ -0,0 +1,28 @@
+export const Constants = Object.freeze({
+  LocalStorageKey: {
+    Token: 'lp-home-access-token',
+    Applications: 'lp-home-applications'
+  },
+  HomeAttributes: {
+    UserId: 'lp-home-user-id'
+  },
+  BaseUrl: 'https://api.home.learningpool.com/',
+  AssetsUrl: 'https://uuicdn.learningpool.com/',
+  Layout: {
+    Vertical: 'vertical',
+    Horizontal: 'horizontal'
+  },
+  Tabs: {
+    ListApplications: 1,
+    ListOrgs: 2
+  }
+})
+
+export const applications = [
+  { applicationId: 1, applicationName: 'Stream LXP', shortName: 'LXP', internalName: 'stream', url: 'https://learningpool.com' },
+  { applicationId: 2, applicationName: 'Stream Analytics', shortName: 'Long Wrapping Test Stream Analytics', internalName: 'analytics', url: 'https://learningpool.com' },
+  { applicationId: 3, applicationName: 'Stream Automation', shortName: 'Event Management', internalName: 'automation', customName: 'Waves 1', url: 'https://learningpool.com' },
+  { applicationId: 3, applicationName: 'Stream Automation', shortName: 'Automation', internalName: 'automation', customName: 'Waves 2', url: 'https://learningpool.com' },
+  { applicationId: 7, applicationName: 'Stream LMS', shortName: 'LMS', internalName: 'lms', customName: '', url: 'https://learningpool.com' },
+  { applicationId: 4, applicationName: 'Stream Authoring', shortName: 'Authoring', internalName: 'authoring', customName: '', url: 'https://learningpool.com' }
+]

package/src/lib/index.tsx

@@ -0,0 +1,148 @@
+// Straight from @mui/material
+export { default as Accordion } from '@mui/material/Accordion'
+export { default as AccordionActions } from '@mui/material/AccordionActions'
+export { default as AccordionDetails } from '@mui/material/AccordionDetails'
+export { default as AccordionSummary } from '@mui/material/AccordionSummary'
+export { default as Alert } from '@mui/material/Alert'
+export { default as AlertTitle } from '@mui/material/AlertTitle'
+export { default as AppBar } from '@mui/material/AppBar'
+export { default as Autocomplete } from '@mui/material/Autocomplete'
+// export { default as Avatar } from '@mui/material/Avatar'
+export { default as AvatarGroup } from '@mui/material/AvatarGroup'
+export { default as Backdrop } from '@mui/material/Backdrop'
+export { default as Badge } from '@mui/material/Badge'
+export { default as BottomNavigation } from '@mui/material/BottomNavigation'
+export { default as BottomNavigationAction } from '@mui/material/BottomNavigationAction'
+export { default as Box } from '@mui/material/Box'
+export { default as Breadcrumbs } from '@mui/material/Breadcrumbs'
+// export { default as Button } from '@mui/material/Button'
+export { default as ButtonBase } from '@mui/material/ButtonBase'
+export { default as ButtonGroup } from '@mui/material/ButtonGroup'
+export { default as Card } from '@mui/material/Card'
+export { default as CardActionArea } from '@mui/material/CardActionArea'
+export { default as CardActions } from '@mui/material/CardActions'
+export { default as CardContent } from '@mui/material/CardContent'
+export { default as CardHeader } from '@mui/material/CardHeader'
+export { default as CardMedia } from '@mui/material/CardMedia'
+// export { default as Checkbox } from '@mui/material/Checkbox'
+export { default as Chip } from '@mui/material/Chip'
+export { default as CircularProgress } from '@mui/material/CircularProgress'
+export { default as ClickAwayListener } from '@mui/material/ClickAwayListener'
+export { default as Collapse } from '@mui/material/Collapse'
+export { default as Container } from '@mui/material/Container'
+export { default as CssBaseline } from '@mui/material/CssBaseline'
+export { default as darkScrollbar } from '@mui/material/darkScrollbar'
+export { default as Dialog } from '@mui/material/Dialog'
+export { default as DialogActions } from '@mui/material/DialogActions'
+export { default as DialogContent } from '@mui/material/DialogContent'
+export { default as DialogContentText } from '@mui/material/DialogContentText'
+export { default as DialogTitle } from '@mui/material/DialogTitle'
+export { default as Divider } from '@mui/material/Divider'
+// export { default as Drawer } from '@mui/material/Drawer'
+export { default as Fab } from '@mui/material/Fab'
+export { default as Fade } from '@mui/material/Fade'
+export { default as FilledInput } from '@mui/material/FilledInput'
+export { default as FormControl } from '@mui/material/FormControl'
+export { default as FormControlLabel } from '@mui/material/FormControlLabel'
+export { default as FormGroup } from '@mui/material/FormGroup'
+export { default as FormHelperText } from '@mui/material/FormHelperText'
+export { default as FormLabel } from '@mui/material/FormLabel'
+export { default as Grid } from '@mui/material/Grid'
+export { default as Grow } from '@mui/material/Grow'
+export { default as Hidden } from '@mui/material/Hidden'
+export { default as Icon } from '@mui/material/Icon'
+// export { default as IconButton } from '@mui/material/IconButton'
+export { default as ImageList } from '@mui/material/ImageList'
+export { default as ImageListItem } from '@mui/material/ImageListItem'
+export { default as ImageListItemBar } from '@mui/material/ImageListItemBar'
+export { default as Input } from '@mui/material/Input'
+export { default as InputAdornment } from '@mui/material/InputAdornment'
+export { default as InputBase } from '@mui/material/InputBase'
+export { default as InputLabel } from '@mui/material/InputLabel'
+export { default as LinearProgress } from '@mui/material/LinearProgress'
+export { default as Link } from '@mui/material/Link'
+// export { default as List } from '@mui/material/List'
+export { default as ListItem } from '@mui/material/ListItem'
+export { default as ListItemAvatar } from '@mui/material/ListItemAvatar'
+export { default as ListItemButton } from '@mui/material/ListItemButton'
+export { default as ListItemIcon } from '@mui/material/ListItemIcon'
+export { default as ListItemSecondaryAction } from '@mui/material/ListItemSecondaryAction'
+export { default as ListItemText } from '@mui/material/ListItemText'
+export { default as ListSubheader } from '@mui/material/ListSubheader'
+export { default as Menu } from '@mui/material/Menu'
+export { default as MenuItem } from '@mui/material/MenuItem'
+export { default as MenuList } from '@mui/material/MenuList'
+export { default as MobileStepper } from '@mui/material/MobileStepper'
+export { default as Modal } from '@mui/material/Modal'
+export { default as NativeSelect } from '@mui/material/NativeSelect'
+export { default as NoSsr } from '@mui/material/NoSsr'
+export { default as OutlinedInput } from '@mui/material/OutlinedInput'
+export { default as Pagination } from '@mui/material/Pagination'
+export { default as PaginationItem } from '@mui/material/PaginationItem'
+export { default as Paper } from '@mui/material/Paper'
+export { default as Popover } from '@mui/material/Popover'
+export { default as Popper } from '@mui/material/Popper'
+export { default as Portal } from '@mui/material/Portal'
+export { default as Radio } from '@mui/material/Radio'
+export { default as RadioGroup } from '@mui/material/RadioGroup'
+export { default as Rating } from '@mui/material/Rating'
+export { default as ScopedCssBaseline } from '@mui/material/ScopedCssBaseline'
+export { default as Select } from '@mui/material/Select'
+export { default as Skeleton } from '@mui/material/Skeleton'
+export { default as Slide } from '@mui/material/Slide'
+export { default as Slider } from '@mui/material/Slider'
+export { default as Snackbar } from '@mui/material/Snackbar'
+export { default as SnackbarContent } from '@mui/material/SnackbarContent'
+export { default as SpeedDial } from '@mui/material/SpeedDial'
+export { default as SpeedDialAction } from '@mui/material/SpeedDialAction'
+export { default as SpeedDialIcon } from '@mui/material/SpeedDialIcon'
+export { default as Stack } from '@mui/material/Stack'
+export { default as Step } from '@mui/material/Step'
+export { default as StepButton } from '@mui/material/StepButton'
+export { default as StepConnector } from '@mui/material/StepConnector'
+export { default as StepContent } from '@mui/material/StepContent'
+export { default as StepIcon } from '@mui/material/StepIcon'
+export { default as StepLabel } from '@mui/material/StepLabel'
+export { default as Stepper } from '@mui/material/Stepper'
+export { default as SvgIcon } from '@mui/material/SvgIcon'
+export { default as SwipeableDrawer } from '@mui/material/SwipeableDrawer'
+export { default as Switch } from '@mui/material/Switch'
+export { default as Tab } from '@mui/material/Tab'
+export { default as Table } from '@mui/material/Table'
+export { default as TableBody } from '@mui/material/TableBody'
+export { default as TableCell } from '@mui/material/TableCell'
+export { default as TableContainer } from '@mui/material/TableContainer'
+export { default as TableFooter } from '@mui/material/TableFooter'
+export { default as TableHead } from '@mui/material/TableHead'
+export { default as TablePagination } from '@mui/material/TablePagination'
+export { default as TableRow } from '@mui/material/TableRow'
+export { default as TableSortLabel } from '@mui/material/TableSortLabel'
+export { default as Tabs } from '@mui/material/Tabs'
+export { default as TabScrollButton } from '@mui/material/TabScrollButton'
+// export { default as TextField } from '@mui/material/TextField'
+export { default as TextareaAutosize } from '@mui/material/TextareaAutosize'
+export { default as ToggleButton } from '@mui/material/ToggleButton'
+export { default as ToggleButtonGroup } from '@mui/material/ToggleButtonGroup'
+export { default as Toolbar } from '@mui/material/Toolbar'
+// export { default as Tooltip } from '@mui/material/Tooltip'
+export { default as Typography } from '@mui/material/Typography'
+
+// Straight from @mui/x-data-grid
+export * from '@mui/x-data-grid'
+
+// Learning Pool intercepted
+export { default as Avatar } from './components/datadisplay/Avatar/Avatar'
+export { default as Button } from './components/atoms/Button/Button'
+export { default as IconButton } from './components/atoms/IconButton/IconButton'
+export { default as Checkbox } from './components/atoms/Checkbox/Checkbox'
+export { default as TextField } from './components/atoms/TextField/TextField'
+export { default as Drawer } from './components/navigation/Drawer/Drawer'
+export { default as List } from './components/datadisplay/List/List'
+export { default as Tooltip } from './components/datadisplay/Tooltip/Tooltip'
+export { default as SideInSide } from './components/pages/SideInSide/SideInSide'
+export { default as ErrorPage } from './components/pages/ErrorPage/ErrorPage'
+
+// Stream Suite components
+export { default as Header } from './components/landmarks/Header/Header'
+export { default as MobileNavigation } from './components/navigation/MobileNavigation/MobileNavigation'
+export { default as VerticalNavigation } from './components/navigation/VerticalNavigation/VerticalNavigation'

package/src/lib/lang/en-us.js

@@ -0,0 +1,6 @@
+export const defaultMessages = {
+  'your-apps': 'Your Stream suite apps',
+  'back-to': 'Back',
+  'select-an-organisation': 'Select an organisation',
+  search: 'Search'
+}

package/src/lib/types/components/navigation/VerticalNavigation.ts

@@ -0,0 +1,52 @@
+import { IApplication } from '../stream/AppSwitcher'
+import { IAvatarMenuItemProps } from './VerticalNavigationAvatar'
+
+export interface IVerticalNavigationItemProps {
+  label: string
+  icon?: JSX.Element
+  onClick?: any
+  isActive?: boolean
+  children?: IVerticalNavigationItemProps[]
+  isDrawerOpen?: boolean
+  index?: number
+  isSecondary?: boolean
+  hasFlyout?: boolean
+  fullHeightFlyout?: boolean
+  content?: JSX.Element
+  style?: any
+  open?: boolean
+  hasCustomContent?: boolean
+}
+
+export interface IVerticalNavigationProps {
+  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
+}

package/src/lib/types/components/navigation/VerticalNavigationAvatar.ts

@@ -0,0 +1,26 @@
+
+export interface IAvatarMenuItemProps {
+  label: string
+  icon: any
+  onClick: any
+}
+
+export interface IAvatarPanelProps {
+  avatarName: string
+  editProfileText?: string
+  isAvatarOpen: 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>
+  avatarPanelInvertNavString?: string
+  avatarPanelFootnote?: any
+}

package/src/lib/types/components/stream/AppSwitcher.ts

@@ -0,0 +1,10 @@
+
+export interface IApplication {
+  applicationId: number
+  applicationName: string
+  shortName: string
+  internalName: string
+  customName?: string
+  url: string
+  children?: object[]
+}

package/src/lib/types/index.ts

@@ -0,0 +1,9 @@
+// https://www.typescriptlang.org/play#example/types-vs-interfaces
+// https://stackoverflow.com/questions/56018167/typescript-does-not-copy-d-ts-files-to-build
+
+// components
+// -- navigation
+export type { IVerticalNavigationItemProps, IVerticalNavigationProps } from './components/navigation/VerticalNavigation'
+export type { IAvatarMenuItemProps, IAvatarPanelProps } from './components/navigation/VerticalNavigationAvatar'
+// -- stream
+export type { IApplication } from './components/stream/AppSwitcher'

package/src/lib/utils/constants.tsx

@@ -0,0 +1,11 @@
+export const DEFAULT_REACT_APP_ID = 'root'
+
+export const MOBILE_NAV_PANEL_TYPES = {
+  DRAWER: 'drawer',
+  SEARCH: 'search',
+  AVATAR: 'avatar'
+}
+
+// 50 seems a reasonable default limit
+// https://m2.material.io/design/typography/understanding-typography.html#readability
+export const DEFAULT_MAX_CHARACTERS_PER_LINE = 50