@stack-spot/portal-layout 0.0.1

package/src/components/Menu/PageSelector.tsx

@@ -0,0 +1,108 @@
+import { IconBox, Text } from '@citric/core'
+import { ArrowRight, Select } from '@citric/icons'
+import { theme } from '@stack-spot/portal-theme'
+import { useMemo, useState } from 'react'
+import { styled } from 'styled-components'
+import { ListAction, SelectionList } from '../SelectionList'
+import { MENU_CONTENT_PADDING as PADDING } from './constants'
+import { Selector } from './types'
+
+const SelectorBox = styled.div`
+  position: relative;
+  margin: ${PADDING}px;
+  margin-bottom: 28px;
+
+  > a {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    border-radius: 0.25rem;
+    border: 1px solid ${theme.color.light['500']};
+    padding: 8px;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: ${theme.color.light['500']};
+    }
+
+    .label {
+      flex: 1;
+    }
+  }
+
+  .selection-list {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    box-shadow: none;
+    border-radius: 0.25rem;
+
+    .selection-list-content {
+      padding: 8px;
+      border-radius: 0.25rem;
+      border: none;
+      ul {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+    }
+
+    li > a {
+      border: 1px solid ${theme.color.light['500']};
+      background-color: ${theme.color.light['400']};
+
+      &:hover {
+        background-color: ${theme.color.light['500']};
+      }
+    }
+
+    .view-all {
+      background: ${theme.color.light['500']};
+      border-radius: 0.25rem;
+      outline: none;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 8px;
+    }
+  }
+`
+
+export const PageSelector = ({ options, value, button }: Selector) => {
+  const [visible, setVisible] = useState(false)
+  const { optionsWithIcon, selected } = useMemo(
+    () => {
+      let selected = options[0]
+      const optionsWithIcon = options.map<ListAction>((option) => {
+        if (option.key === value) {
+          selected = option
+          return { ...option, active: true }
+        }
+        return { ...option, iconRight: <ArrowRight /> }
+      })
+      return { optionsWithIcon, selected }
+    },
+    [options, value, button],
+  )
+  
+
+  return (
+    <SelectorBox>
+      <a onClick={() => setVisible(true)} aria-label={value}>
+        {selected?.icon && <IconBox>{selected?.icon}</IconBox>}
+        <Text appearance="body2" className="label">{selected?.label ?? button?.label ?? value}</Text>
+        <IconBox size="xs"><Select /></IconBox>
+      </a>
+
+      <SelectionList
+        visible={visible}
+        items={optionsWithIcon}
+        onHide={() => setVisible(false)}
+        after={button ? <a className="view-all" href={button.href} onClick={button.onClick}>{button.label}</a> : undefined}
+      />
+    </SelectorBox>
+  )
+}

package/src/components/Menu/constants.ts

@@ -0,0 +1,2 @@
+export const MENU_CONTENT_PADDING = 20
+export const MENU_CONTENT_ITEM_PADDING = 12

package/src/components/Menu/types.ts

@@ -0,0 +1,53 @@
+import { ReactElement } from 'react'
+import { Action } from '../types'
+
+export interface ItemGroup {
+  label: string,
+  children: MenuItem[],
+  open?: boolean,
+  hidden?: boolean,
+}
+
+export interface MenuAction extends Action {
+  active?: boolean,
+  hidden?: boolean,
+}
+
+export type MenuItem = ItemGroup | MenuAction
+
+export interface MenuButton extends Action {
+  icon?: ReactElement,
+}
+
+export interface SelectorItem extends Action {
+  key: string,
+  icon?: ReactElement,
+}
+
+export interface Selector {
+  value?: string,
+  options: SelectorItem[],
+  button?: Action,
+  title?: string,
+  subtitle?: string,
+}
+
+export interface MenuSectionContent {
+  goBack?: Action,
+  title?: string,
+  subtitle?: string,
+  pageSelector?: Selector,
+  options?: MenuItem[],
+}
+
+export interface MenuSection extends Action {
+  icon: ReactElement,
+  content?: MenuSectionContent,
+  active?: boolean,
+}
+
+export interface MenuProps {
+  sections: MenuSection[],
+  content?: MenuSectionContent,
+  compact?: boolean,
+}

package/src/components/OverlayContent.tsx

@@ -0,0 +1,50 @@
+import { Flex, Text } from '@citric/core'
+import { TimesMini } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { WithStyle, listToClass, theme } from '@stack-spot/portal-theme'
+import { ReactNode } from 'react'
+import { styled } from 'styled-components'
+
+export interface OverlayContentProps extends WithStyle {
+  title: string,
+  subtitle?: string,
+  children: ReactNode,
+  onClose?: () => void,
+}
+
+interface Props extends OverlayContentProps {
+  onClose: () => void,
+  type: 'modal' | 'panel',
+}
+
+const ContentBox = styled.section`
+  display: flex;
+  flex-direction: column;
+  border-radius: 1rem;
+  background-color: ${theme.color.light['400']};
+  &.modal {
+    padding: 32px;
+  }
+  &.panel {
+    padding: 20px;
+  }
+  header {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    margin-bottom: 1.25rem;
+  }
+`
+
+export const OverlayContent = ({ children, title, subtitle, className, style, onClose, type }: Props) => (
+  <ContentBox style={style} className={listToClass([className, type])}>
+    <header>
+      <Flex flexDirection="column" flex={1}>
+        <Text appearance={type === 'modal' ? 'h3' : 'h4'}>{title}</Text>
+        {subtitle && <Text appearance="body2" colorScheme="light.700">{subtitle}</Text>}
+      </Flex>
+      <IconButton onClick={onClose} title="close" aria-label="close"><TimesMini /></IconButton>
+    </header>
+    {children}
+  </ContentBox>
+)

package/src/components/SelectionList.tsx

@@ -0,0 +1,200 @@
+import { Flex, IconBox, Text } from '@citric/core'
+import { ArrowLeft, Check, ChevronRight } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { WithStyle, listToClass, theme } from '@stack-spot/portal-theme'
+import { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { styled } from 'styled-components'
+import { Action } from './types'
+
+interface ItemWithIcon {
+  icon?: React.ReactElement,
+  iconRight?: React.ReactElement,
+}
+
+export interface ListAction extends ItemWithIcon, Action {
+  active?: boolean,
+}
+
+interface ListGroup {
+  type?: 'section' | 'collapsible',
+  children: ListItem[],
+}
+
+interface ListSection extends ListGroup {
+  type: 'section',
+  label?: string,
+}
+
+interface ListCollapsible extends ListGroup, ItemWithIcon {
+  type?: 'collapsible',
+  label: string,
+}
+
+type ListItem = ListSection | ListCollapsible | ListAction
+
+interface CurrentItemList {
+  items: ListItem[],
+  label?: string,
+  parent?: CurrentItemList,
+}
+
+const ANIMATION_DURATION_MS = 300
+
+export interface SelectionListProps extends WithStyle {
+  visible?: boolean,
+  items: ListItem[],
+  onHide?: () => void,
+  maxHeight?: string,
+  before?: ReactElement,
+  after?: ReactElement,
+}
+
+const SelectionBox = styled.div<{ $maxHeight: string }>`
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height ease-in ${ANIMATION_DURATION_MS / 1000}s;
+  z-index: 1;
+  box-shadow: 4px 4px 48px #000;
+  border-radius: 0.5rem;
+
+  .selection-list-content {
+    display: flex;
+    flex-direction: column;
+    border-radius: 0.5rem;
+    background: ${theme.color.light['500']};
+    border-radius: 0.5rem;
+    border: 1px solid ${theme.color.light['600']};
+    background-color: ${theme.color.light['300']};
+  }
+
+  .section-title, li > a {
+    height: 40px;
+    padding: 0 8px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  li > a {
+    gap: 4px;
+    transition: background-color 0.2s;
+    &:hover {
+      background: ${theme.color.light['400']};
+    }
+    .label {
+      flex: 1;
+    }
+  }
+
+  li.section {
+    border-bottom: 2px solid ${theme.color.light['600']};
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &.visible {
+    max-height: ${({ $maxHeight }) => $maxHeight};
+  }
+`
+
+function renderAction({ label, href, onClick, icon, iconRight, active }: ListAction) {
+  return (
+    <li key={label} className="action">
+      <a href={href} onClick={onClick}>
+        {icon && <IconBox>{icon}</IconBox>}
+        <Text appearance="body2" className="label">{label}</Text>
+        {iconRight && <IconBox>{iconRight}</IconBox>}
+        {active && <IconBox><Check /></IconBox>}
+      </a>
+    </li>
+  )
+}
+
+function renderCollapsible({ label, icon, iconRight, children }: ListCollapsible, setCurrent: (current: CurrentItemList) => void) {
+  return (
+    <li key={label} className="collapsible">
+      <a onClick={() => setCurrent({ items: children, label })}>
+        {icon && <IconBox>{icon}</IconBox>}
+        <Text appearance="body2" className="label">{label}</Text>
+        {iconRight && <IconBox>{iconRight}</IconBox>}
+        <IconBox><ChevronRight /></IconBox>
+      </a>
+    </li>
+  )
+}
+
+function renderSection({ label, children }: ListSection, setCurrent: (current: CurrentItemList) => void) {
+  return (
+    <li key={label ?? children.map(c => c.label).join('-')} className="section">
+      {label && <Text appearance="overheader2" colorScheme="primary" className="section-title">{label}</Text>}
+      <ul>{children.map(i => renderItem(i, setCurrent))}</ul>
+    </li>
+  )
+}
+
+function renderItem(item: ListItem, setCurrent: (current: CurrentItemList) => void) {
+  if ('children' in item) {
+    return item.type === 'section' ? renderSection(item, setCurrent) : renderCollapsible(item, setCurrent)
+  }
+  return renderAction(item)
+}
+
+export const SelectionList = ({
+  items, className, style, visible = true, maxHeight = '300px', onHide, before, after,
+}: SelectionListProps) => {
+  const wrapper = useRef<HTMLDivElement>(null)
+  const itemsRef = useRef(items)
+  const [current, setCurrent] = useState<CurrentItemList>({ items })
+  const listItems = useMemo(
+    () => current.items.map(i => renderItem(i, (next: CurrentItemList) => setCurrent({ ...next, parent: current }))),
+    [current],
+  )
+  const hide = useCallback((event: MouseEvent) => {
+    const target = (event.target as HTMLElement | null)
+    // if the element is not in the DOM anymore, we'll consider the click was inside the selection list
+    const isClickInsideSelectionList = !target?.isConnected || wrapper.current?.contains(target)
+    const isAction = target?.classList?.contains('action') || !!target?.closest('.action')
+    if (!isClickInsideSelectionList || isAction) {
+      if (onHide) onHide()
+      setTimeout(() => setCurrent({ items: itemsRef.current }), ANIMATION_DURATION_MS)
+      document.removeEventListener('click', hide)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!onHide) return
+    if (visible) setTimeout(() => document.addEventListener('click', hide), 50)
+  }, [visible])
+
+  useEffect(() => {
+    itemsRef.current = items
+    if (!wrapper.current?.classList.contains('visible')) setCurrent({ items })
+  }, [items])
+
+  return (
+    <SelectionBox
+      ref={wrapper}
+      $maxHeight={maxHeight}
+      style={style}
+      className={listToClass(['selection-list', visible ? 'visible' : undefined, className])}
+    >
+      <div className="selection-list-content">
+        {before}
+        {current.parent
+          ? (
+            <Flex mt={5} mb={1} alignItems="center">
+              <IconButton onClick={() => setCurrent(current.parent ?? { items })} sx={{ mr: 3 }}>
+                <ArrowLeft />
+              </IconButton>
+              <Text appearance="microtext1">{current.label}</Text>
+            </Flex>
+          )
+          : undefined
+        }
+        <ul>{listItems}</ul>
+        {after}
+      </div>
+    </SelectionBox>
+  )
+}

package/src/components/Toaster.tsx

@@ -0,0 +1,12 @@
+import { TimesMini } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { CloseButtonProps, ToastContainer } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+
+const CloseButton = ({ closeToast }: CloseButtonProps) => (
+  <IconButton onClick={() => closeToast(null as any)} title="Dismiss">
+    <TimesMini />
+  </IconButton>
+)
+
+export const Toaster = () => <ToastContainer closeButton={CloseButton} />

package/src/components/UserMenu.tsx

@@ -0,0 +1,91 @@
+import { Flex, IconBox, LinkBox, Text } from '@citric/core'
+import { ChevronDown } from '@citric/icons'
+import { Avatar } from '@citric/ui'
+import { theme } from '@stack-spot/portal-theme'
+import { useState } from 'react'
+import { styled } from 'styled-components'
+import { SelectionList, SelectionListProps } from './SelectionList'
+
+interface Props {
+  userName: string,
+  email?: string,
+  options?: SelectionListProps['items'],
+}
+
+const UserMenuBox = styled.div`
+  .user-menu-header {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 12px;
+    border-bottom: 2px solid ${theme.color.light['600']};
+  }
+
+  .selection-list {
+    position: absolute;
+    top: var(--header-height);
+    right: 20px;
+    width: 266px;
+
+    .selection-list-content {
+      border: none;
+      padding: 16px 16px 8px;
+      background-color: ${theme.color.light['400']};
+    }
+
+    li {
+      margin: 8px 0;
+      & > a {
+        border-radius: 6px;
+        &:hover {
+          background: ${theme.color.light['500']};
+        }
+      }
+    }
+  }
+
+  .username {
+    margin: 5px 0 2px 0;
+  }
+
+  .chevron {
+    transition: transform ease-out 0.3s;
+  }
+`
+
+const UserMenuHeader = ({ userName, email }: Omit<Props, 'options'>) => (
+  <div className="user-menu-header">
+    <Avatar size="xs">{userName}</Avatar>
+    <Text appearance="body1" className="username">{userName}</Text>
+    {email && <Text appearance="microtext1" className="email" colorScheme="light.700">{email}</Text>}
+  </div>
+)
+
+export const UserMenu = ({ userName, email, options }: Props) => {
+  const [visible, setVisible] = useState(false)
+
+  return (
+    <UserMenuBox>
+      <LinkBox as="button" onClick={() => setVisible(true)}>
+        <Flex alignItems="center">
+          <Avatar size="xs">{userName}</Avatar>
+          <IconBox colorScheme="inverse" className="chevron" style={visible ? { transform: 'rotate(180deg)' } : undefined}>
+            <ChevronDown />
+          </IconBox>
+        </Flex>
+      </LinkBox>
+
+      {options?.length
+        ? <SelectionList
+          visible={visible}
+          before={<UserMenuHeader userName={userName} email={email} />}
+          items={options!}
+          onHide={() => setVisible(false)}
+          maxHeight="600px"
+        />
+        : null
+      }
+    </UserMenuBox>
+  )
+}

package/src/components/types.ts

@@ -0,0 +1,5 @@
+export interface Action {
+  label: string,
+  onClick?: () => void,
+  href?: string,
+}

package/src/errors.ts

@@ -0,0 +1,11 @@
+export class LayoutError extends Error {
+  constructor(message: string) {
+    super(`Layout error: ${message}`)
+  } 
+}
+
+export class ElementNotFound extends LayoutError {
+  constructor(elementName: string, elementId: string) {
+    super(`unable to create ${elementName} because no element with id "${elementId}" was found in the view.`)
+  }
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export { Layout } from './Layout'
+export { overlay } from './LayoutOverlayManager'
+export { Header, HeaderProps } from './components/Header'
+export { StackspotLogo } from './components/Logo'
+export { MenuContent } from './components/Menu/MenuContent'
+export { MenuSections } from './components/Menu/MenuSections'
+export * from './components/Menu/types'
+export { ListAction, SelectionList, SelectionListProps } from './components/SelectionList'
+export * from './components/types'
+export * from './errors'