@smartbooks-ai/layout 0.0.3

package/src/components/PageWithMenuLayout/MenuSelect/index.tsx

@@ -0,0 +1,78 @@
+import { useState } from 'react';
+
+import { Fade } from '@mui/material';
+import useResizeObserver from 'use-resize-observer';
+
+import * as Styled from './styles';
+
+type Props = {
+  isExpanded: boolean;
+  renderMenuItems: (params: { closeMenu: () => void }) => React.ReactElement[];
+  startIcon?: React.ReactNode;
+  selectedOptionText?: string;
+  menuPosition?: 'top' | 'bottom';
+};
+
+export const MenuSelect: React.FC<Props> = ({
+  isExpanded,
+  renderMenuItems,
+  startIcon,
+  selectedOptionText,
+  menuPosition = 'bottom',
+}) => {
+  const openMenu: React.MouseEventHandler<HTMLElement> = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const closeMenu = () => {
+    setAnchorEl(undefined);
+  };
+  const [anchorEl, setAnchorEl] = useState<HTMLElement>();
+  const isMenuOpen = Boolean(anchorEl);
+
+  const menuItems = renderMenuItems({ closeMenu });
+
+  const { height: bodyHeight } = useResizeObserver({ ref: document.body });
+
+  return (
+    <>
+      <Styled.SelectorButton
+        isMenuExpanded={isExpanded}
+        variant="outlined"
+        aria-haspopup="true"
+        disableElevation={true}
+        onClick={openMenu}
+        endIcon={<Styled.UnfoldMoreIcon />}
+        fullWidth={true}
+        startIcon={startIcon}
+        disabled={!menuItems.length}
+      >
+        <Fade in={isExpanded}>
+          <Styled.SelectedOptionText>{selectedOptionText}</Styled.SelectedOptionText>
+        </Fade>
+      </Styled.SelectorButton>
+
+      <Styled.Menu
+        anchorEl={anchorEl}
+        open={isMenuOpen}
+        onClose={closeMenu}
+        sx={{ top: menuPosition === 'top' ? -4 : 4 }}
+        slotProps={{
+          paper: {
+            style: {
+              maxHeight:
+                anchorEl && bodyHeight ? bodyHeight - anchorEl?.getBoundingClientRect().bottom - 16 : undefined,
+            },
+          },
+        }}
+        anchorOrigin={
+          menuPosition === 'top' ? { horizontal: 'left', vertical: 'top' } : { horizontal: 'left', vertical: 'bottom' }
+        }
+        transformOrigin={
+          menuPosition === 'top' ? { horizontal: 'left', vertical: 'bottom' } : { horizontal: 'left', vertical: 'top' }
+        }
+      >
+        {menuItems}
+      </Styled.Menu>
+    </>
+  );
+};

package/src/components/PageWithMenuLayout/MenuSelect/styles.ts

@@ -0,0 +1,97 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import MuiUnfoldMoreIcon from '@mui/icons-material/UnfoldMoreRounded';
+import Button, { buttonClasses } from '@mui/material/Button';
+import MuiMenu, { menuClasses } from '@mui/material/Menu';
+
+import { shouldNotForwardPropsWithKeys } from '../../../utils/shouldNotForwardPropsWithKeys';
+
+type SelectorButtonProps = {
+  isMenuExpanded: boolean;
+};
+export const SelectorButton = styled(
+  Button,
+  shouldNotForwardPropsWithKeys<SelectorButtonProps>(['isMenuExpanded']),
+)<SelectorButtonProps>(
+  ({ theme, isMenuExpanded, disabled }) => css`
+    display: ${disabled && 'none'};
+
+    justify-content: flex-start;
+
+    min-width: 0;
+    height: 2.375rem;
+
+    padding-right: calc(${theme.my.spacing.xxxs} - 0.0625rem);
+    padding-left: calc(${theme.my.spacing.xxxs} - 0.0625rem);
+
+    text-overflow: ellipsis;
+
+    color: ${theme.my.colors.primitives.common.white};
+
+    white-space: nowrap;
+
+    border-radius: ${theme.my.radius.md};
+
+    transition:
+      height 0.3s,
+      padding 0.3s;
+
+    :hover {
+      &.${buttonClasses.outlined} {
+        border-color: ${theme.my.colors.primitives.common.white};
+      }
+    }
+
+    ${isMenuExpanded &&
+    css`
+      height: 3rem;
+
+      padding-right: ${theme.my.spacing.xxs};
+      padding-left: ${theme.my.spacing.xxs};
+    `}
+
+    .${buttonClasses.startIcon} {
+      width: 1.75rem;
+      height: 1.75rem;
+
+      margin-right: 0;
+      margin-left: 0;
+
+      transition: 0.3s;
+
+      ${isMenuExpanded &&
+      css`
+        width: 2rem;
+        height: 2rem;
+      `}
+    }
+
+    .${buttonClasses.endIcon} {
+      margin-right: ${theme.my.spacing.xxxs};
+    }
+  `,
+);
+
+export const SelectedOptionText = styled.span`
+  flex: 1;
+
+  padding-left: ${({ theme }) => theme.my.spacing.xxs};
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  font: ${({ theme }) => theme.my.font.highlight3};
+
+  text-align: left;
+`;
+
+export const Menu = styled(MuiMenu)`
+  .${menuClasses.root} {
+    padding: 0;
+  }
+`;
+
+export const UnfoldMoreIcon = styled(MuiUnfoldMoreIcon)`
+  width: 1rem;
+  height: 1rem;
+`;

package/src/components/PageWithMenuLayout/MultiSubscriptionsMenuItems/ConsolidationIcon.tsx

@@ -0,0 +1,6 @@
+const ConsolidationIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 36 36" {...props}>
+    <path d="M9.8 18.8h16.4v3.08h1.6V17.2h-9V14h-1.6v3.2h-9v4.68h1.6zM14 23H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2M4 31v-6h10v6ZM32 23H22a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2m-10 8v-6h10v6ZM13 13h10a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H13a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2m0-8h10v6H13Z" />
+  </svg>
+);
+export default ConsolidationIcon;

package/src/components/PageWithMenuLayout/MultiSubscriptionsMenuItems/MultiSubscriptionsMenuItems.tsx

@@ -0,0 +1,120 @@
+import { Fragment, useEffect, useState } from 'react';
+
+import {
+  Business as BusinessIcon,
+  ExpandLess as ExpandLessIcon,
+  ExpandMore as ExpandMoreIcon,
+} from '@mui/icons-material';
+import { Collapse, Divider, List, ListItemIcon, MenuItem, Tooltip } from '@mui/material';
+import { AvailableCompany, AvailableTenant } from '@smartbooks-ai/api-client';
+
+import ConsolidationIcon from './ConsolidationIcon';
+import * as Styled from './styles';
+
+import { assertNever } from '../../../utils/assertNever';
+
+type Props = {
+  selectedTenant?: AvailableTenant;
+  tenants: AvailableTenant[];
+  onCompanySelected: (company: AvailableCompany) => void;
+  selectedCompanyCode: string | undefined;
+};
+
+export const MultiSubscriptionsMenuItems: React.FC<Props> = ({
+  selectedTenant,
+  tenants,
+  onCompanySelected,
+  selectedCompanyCode,
+}) => {
+  const [openTenants, setOpenTenants] = useState<string[]>([]);
+
+  const toggleTenant = (tenantCode: string) => {
+    if (openTenants.includes(tenantCode)) {
+      setOpenTenants(openTenants.filter((a) => a !== tenantCode));
+    } else {
+      setOpenTenants([...openTenants, tenantCode]);
+    }
+  };
+
+  useEffect(() => {
+    if (selectedTenant) {
+      setOpenTenants([selectedTenant.code]);
+    }
+  }, [selectedTenant]);
+
+  const sortedTenants = tenants.toSorted((a, b) => (a.description || '').localeCompare(b.description || ''));
+
+  const [highlightedCompanyMenuItem, setHighlightedCompanyMenuItem] = useState<HTMLElement | null>(null);
+
+  return (
+    <>
+      {sortedTenants.map((tenant) => {
+        const sortedCompanies = tenant.companies.toSorted((a, b) =>
+          a.companyType === 'consolidation' && b.companyType !== 'consolidation'
+            ? -1
+            : a.companyType !== 'consolidation' && b.companyType === 'consolidation'
+              ? 1
+              : (a.description || '').localeCompare(b.description || ''),
+        );
+        const isOpen = tenants.length === 1 || openTenants.includes(tenant.code);
+
+        return (
+          <Fragment key={tenant.code}>
+            {tenants.length > 1 && (
+              <MenuItem onClick={() => toggleTenant(tenant.code)}>
+                {tenant.description}
+
+                <ListItemIcon sx={{ marginLeft: '1em' }}>
+                  {isOpen ? <ExpandLessIcon fontSize="small" /> : <ExpandMoreIcon fontSize="small" />}
+                </ListItemIcon>
+              </MenuItem>
+            )}
+            <Collapse
+              in={isOpen}
+              timeout="auto"
+              unmountOnExit={true}
+              onEntered={() => {
+                if (tenant.code === selectedTenant?.code)
+                  highlightedCompanyMenuItem?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+              }}
+            >
+              <List component="div" disablePadding={true}>
+                <Divider />
+
+                {sortedCompanies.map((company) => (
+                  <MenuItem
+                    key={company.code}
+                    onClick={() => onCompanySelected(company)}
+                    selected={company.code === selectedCompanyCode}
+                    autoFocus={company.code === selectedCompanyCode}
+                    ref={(el) => {
+                      if (company.code === selectedCompanyCode) setHighlightedCompanyMenuItem(el);
+                    }}
+                  >
+                    <ListItemIcon>
+                      {company.companyType === 'consolidation' ? (
+                        <Tooltip title="Consolidation" disableInteractive={true}>
+                          <Styled.IconContainer>
+                            <ConsolidationIcon fontSize="inherit" />
+                          </Styled.IconContainer>
+                        </Tooltip>
+                      ) : company.companyType === 'regular' ? (
+                        <Styled.IconContainer>
+                          <BusinessIcon fontSize="inherit" />
+                        </Styled.IconContainer>
+                      ) : (
+                        assertNever(company.companyType)
+                      )}
+                    </ListItemIcon>
+
+                    {company.description}
+                  </MenuItem>
+                ))}
+              </List>
+            </Collapse>
+          </Fragment>
+        );
+      })}
+    </>
+  );
+};

package/src/components/PageWithMenuLayout/MultiSubscriptionsMenuItems/consolidation.svg

@@ -0,0 +1,8 @@
+<svg fill="currentColor" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+  <polygon
+    points="9.8 18.8 26.2 18.8 26.2 21.88 27.8 21.88 27.8 17.2 18.8 17.2 18.8 14 17.2 14 17.2 17.2 8.2 17.2 8.2 21.88 9.8 21.88 9.8 18.8">
+  </polygon>
+  <path d="M14,23H4a2,2,0,0,0-2,2v6a2,2,0,0,0,2,2H14a2,2,0,0,0,2-2V25A2,2,0,0,0,14,23ZM4,31V25H14v6Z"></path>
+  <path d="M32,23H22a2,2,0,0,0-2,2v6a2,2,0,0,0,2,2H32a2,2,0,0,0,2-2V25A2,2,0,0,0,32,23ZM22,31V25H32v6Z"></path>
+  <path d="M13,13H23a2,2,0,0,0,2-2V5a2,2,0,0,0-2-2H13a2,2,0,0,0-2,2v6A2,2,0,0,0,13,13Zm0-8H23v6H13Z"></path>
+</svg>

package/src/components/PageWithMenuLayout/MultiSubscriptionsMenuItems/index.ts

@@ -0,0 +1 @@
+export { MultiSubscriptionsMenuItems } from './MultiSubscriptionsMenuItems';

package/src/components/PageWithMenuLayout/MultiSubscriptionsMenuItems/styles.ts

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+export const IconContainer = styled.div`
+  position: relative;
+
+  width: 1.25rem;
+  height: 1.25rem;
+
+  font-size: 1.25rem;
+`;

package/src/components/PageWithMenuLayout/PageWithMenuLayout.tsx

@@ -0,0 +1,106 @@
+import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
+import Fade from '@mui/material/Fade';
+import MenuList from '@mui/material/MenuList';
+import { AvailableCompany } from '@smartbooks-ai/api-client';
+import { createPortal } from 'react-dom';
+import { NavLink, Outlet } from 'react-router';
+
+import LogoHeaderImage from './LogoHeaderImage';
+import LogoHeaderText from './LogoHeaderText';
+import { AppSelect, MenuItemWithChildren, UserProfileSelect } from './index';
+import * as Styled from './styles';
+import { MenuStructure } from './types';
+
+import { UserProfile } from '../../security/UserProfile';
+
+export type PageWithMenuLayoutProps = {
+  isExpanded: boolean;
+  toggleIsExpanded: () => void;
+  resolvedCompanyCode?: string;
+  topMenu?: MenuStructure;
+  bottomMenu: MenuStructure;
+  profile: UserProfile | null;
+  tenantCode?: string;
+  switchToCompany: (company: AvailableCompany) => Promise<void>;
+  openMenu: () => void;
+  logout: () => void;
+  additionalOutletContent?: React.ReactNode;
+};
+
+export const PageWithMenuLayout: React.FC<PageWithMenuLayoutProps> = ({
+  isExpanded,
+  toggleIsExpanded,
+  resolvedCompanyCode,
+  topMenu,
+  bottomMenu,
+  profile,
+  tenantCode,
+  switchToCompany,
+  openMenu,
+  logout,
+  additionalOutletContent,
+}) => {
+  return (
+    <>
+      <Styled.LockMenuButton onClick={toggleIsExpanded} isExpanded={isExpanded}>
+        <KeyboardArrowLeftIcon fontSize="inherit" />
+      </Styled.LockMenuButton>
+
+      {createPortal(
+        <Styled.Drawer open={isExpanded} variant="permanent">
+          <Styled.Header>
+            <Styled.LogoContainer>
+              <NavLink to="/">
+                <LogoHeaderImage height={24} />
+              </NavLink>
+            </Styled.LogoContainer>
+
+            <Fade in={isExpanded}>
+              <NavLink to="/">
+                <LogoHeaderText height={12} />
+              </NavLink>
+            </Fade>
+          </Styled.Header>
+          <AppSelect
+            tenantCode={tenantCode}
+            companyCode={resolvedCompanyCode}
+            isExpanded={isExpanded}
+            profile={profile}
+            onCompanyClicked={switchToCompany}
+          />
+
+          <Styled.TopMenuList>
+            {topMenu?.map((firstLevelItem) => (
+              <MenuItemWithChildren
+                key={firstLevelItem.title}
+                menuItem={firstLevelItem}
+                isMenuOpen={isExpanded}
+                openMenu={openMenu}
+              />
+            ))}
+          </Styled.TopMenuList>
+
+          <MenuList disablePadding={true}>
+            {bottomMenu?.map((firstLevelItem) => (
+              <MenuItemWithChildren
+                key={firstLevelItem.title}
+                menuItem={firstLevelItem}
+                isMenuOpen={isExpanded}
+                openMenu={openMenu}
+              />
+            ))}
+          </MenuList>
+
+          <UserProfileSelect isTextVisible={isExpanded} profile={profile} logout={logout} />
+        </Styled.Drawer>,
+        document.body,
+      )}
+
+      <Styled.Main isLocked={isExpanded}>
+        <Outlet />
+
+        {additionalOutletContent}
+      </Styled.Main>
+    </>
+  );
+};

package/src/components/PageWithMenuLayout/UserProfileSelect/index.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+
+import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded';
+import { Fade } from '@mui/material';
+import MenuItem from '@mui/material/MenuItem';
+import { GlobalRole } from '@smartbooks-ai/api-client';
+
+import * as Styled from './styles';
+
+import { useIsAuthorized } from '../../../hooks/useIsAuthorized';
+import { useToggle } from '../../../hooks/useToggle';
+import { UserProfile } from '../../../security/ProfileContext';
+import * as MenuItemWithChildrenStyled from '../MenuItemWithChildren/styles';
+
+type Props = {
+  isTextVisible: boolean;
+  profile: UserProfile | null;
+  logout: () => void;
+};
+
+export const UserProfileSelect: React.FC<Props> = ({ isTextVisible, profile, logout }) => {
+  const { value: isMenuOpen, switchOn: openMenu, switchOff: closeMenu } = useToggle();
+  const getIsAuthorized = useIsAuthorized();
+
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  return (
+    <>
+      <MenuItemWithChildrenStyled.MenuItem
+        isTitle={false}
+        isMenuOpen={isTextVisible}
+        ref={setAnchorEl}
+        isHighlighted={false}
+        onClick={openMenu}
+      >
+        <MenuItemWithChildrenStyled.ListItemIcon>
+          <AccountCircleRoundedIcon fontSize="small" />
+        </MenuItemWithChildrenStyled.ListItemIcon>
+
+        <Fade in={isTextVisible}>
+          <MenuItemWithChildrenStyled.ListItemText elevation={0} isHighlighted={false} isTitle={false}>
+            {profile?.displayName ?? 'My account'}
+          </MenuItemWithChildrenStyled.ListItemText>
+        </Fade>
+
+        <MenuItemWithChildrenStyled.ArrowDownIcon isExpanded={isMenuOpen} isVisible={isTextVisible} />
+      </MenuItemWithChildrenStyled.MenuItem>
+
+      <Styled.Menu
+        anchorOrigin={{ horizontal: 'left', vertical: 'top' }}
+        transformOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+        anchorEl={anchorEl}
+        open={isMenuOpen}
+        onClose={closeMenu}
+      >
+        <MenuItem disabled={true}>{profile?.email}</MenuItem>
+        {getIsAuthorized({ globalRole: GlobalRole.GlobalAdmin }) && (
+          <MenuItem onClick={() => window.open('/ac/ga', '_blank')}>System admin</MenuItem>
+        )}
+        <MenuItem onClick={logout}>Logout</MenuItem>
+      </Styled.Menu>
+    </>
+  );
+};

package/src/components/PageWithMenuLayout/UserProfileSelect/styles.ts

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+import MuiMenu, { menuClasses } from '@mui/material/Menu';
+
+export const Menu = styled(MuiMenu)`
+  .${menuClasses.root} {
+    padding: 0;
+  }
+`;

package/src/components/PageWithMenuLayout/index.ts

@@ -0,0 +1,8 @@
+export { AppSelect } from './AppSelect';
+export { MenuSelect } from './MenuSelect';
+export { MultiSubscriptionsMenuItems } from './MultiSubscriptionsMenuItems';
+export { MenuItemWithChildren } from './MenuItemWithChildren/MenuItemWithChildren';
+export { UserProfileSelect } from './UserProfileSelect';
+export { PageWithMenuLayout } from './PageWithMenuLayout';
+export { default as LogoHeaderImage } from './LogoHeaderImage';
+export { default as LogoHeaderText } from './LogoHeaderText';

package/src/components/PageWithMenuLayout/styles.ts

@@ -0,0 +1,110 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import MuiDrawer, { drawerClasses } from '@mui/material/Drawer';
+import MuiIconButton from '@mui/material/IconButton';
+import MenuList from '@mui/material/MenuList';
+
+import { shouldNotForwardPropsWithKeys } from '../../utils/shouldNotForwardPropsWithKeys';
+
+const drawerOpenWidthRem = 15.625;
+const drawerClosedWidthRem = 3.75;
+
+export const Drawer = styled(MuiDrawer)`
+  flex-shrink: 0;
+
+  overflow-x: hidden;
+  .${drawerClasses.paper} {
+    width: ${({ open }) => (open ? drawerOpenWidthRem : drawerClosedWidthRem)}rem;
+
+    padding: ${({ theme }) => theme.my.spacing.xs};
+
+    overflow: hidden;
+
+    background-color: ${({ theme }) => theme.my.colors.primary.main};
+    border: unset;
+
+    transition: width 0.3s;
+  }
+`;
+
+export const Header = styled.div`
+  display: flex;
+
+  column-gap: ${({ theme }) => theme.my.spacing.xxs};
+  align-items: center;
+
+  width: max-content;
+  min-width: 100%;
+
+  padding-bottom: ${({ theme }) => theme.my.spacing.xs};
+
+  overflow: hidden;
+`;
+
+export const LogoContainer = styled.div`
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+
+  width: 2.25rem;
+  height: 2.25rem;
+`;
+
+type LockMenuButtonProps = {
+  isExpanded: boolean;
+};
+export const LockMenuButton = styled(
+  MuiIconButton,
+  shouldNotForwardPropsWithKeys<LockMenuButtonProps>(['isExpanded']),
+)<LockMenuButtonProps>(
+  ({ theme, isExpanded }) => css`
+    position: absolute;
+    top: ${theme.my.spacing.sm};
+    left: ${isExpanded ? drawerOpenWidthRem : drawerClosedWidthRem}rem;
+    z-index: ${(theme.zIndex?.drawer ?? 0) + 1};
+
+    padding: ${theme.my.spacing.xxxs};
+
+    font-size: 1rem;
+
+    color: ${theme.my.colors.text.white};
+
+    background-color: ${theme.my.colors.primitives.darkNavy[700]};
+    border-radius: ${theme.my.radius.xxl};
+
+    transform: translateX(-50%) rotate(${isExpanded ? 0 : 180}deg);
+
+    transition: 0.3s;
+
+    &:hover {
+      background-color: ${theme.my.colors.primitives.darkNavy[600]};
+    }
+  `,
+);
+
+export const TopMenuList = styled(MenuList)`
+  display: flex;
+
+  flex: 1;
+  flex-direction: column;
+
+  gap: ${({ theme }) => theme.my.spacing.xxxs};
+
+  overflow: hidden auto;
+`;
+
+type MainProps = {
+  isLocked: boolean;
+};
+export const Main = styled('div', shouldNotForwardPropsWithKeys<MainProps>(['isLocked']))<MainProps>`
+  position: relative;
+
+  flex-grow: 1;
+
+  margin-left: ${({ isLocked }) => (isLocked ? drawerOpenWidthRem : drawerClosedWidthRem)}rem;
+
+  overflow: auto;
+
+  transition: margin 0.3s;
+`;

package/src/components/PageWithMenuLayout/types.ts

@@ -0,0 +1,7 @@
+export type MenuItem = {
+  title: string;
+  icon?: React.ReactNode;
+  skipHeader?: boolean;
+} & ({ children: MenuItem[] } | { href: string } | { onClick: () => void });
+
+export type MenuStructure = MenuItem[];

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './PageWithMenuLayout';
+export * from './PageHeader';
+export * from './PageWithMenuLayout/types';