@stack-spot/portal-layout 1.0.2 → 1.1.0

package/src/Layout.tsx

@@ -1,171 +1,171 @@
-import { TourProps, TourProvider, defaultTourConfig, isNewTourStep } from '@stack-spot/portal-components/Tour'
-import { CSSToCitricAdapter, WithStyle, listToClass } from '@stack-spot/portal-theme'
-import '@stack-spot/portal-theme/dist/theme.css'
-import { ReactElement, ReactNode, useEffect } from 'react'
-import { overlay } from './LayoutOverlayManager'
-import { Header, HeaderProps } from './components/Header'
-import { Toaster } from './components/Toaster'
-import { ErrorBoundary } from './components/error/ErrorBoundary'
-import { DescriptionFn, ErrorHandler, ErrorManager } from './components/error/ErrorManager'
-import { SilentErrorBoundary } from './components/error/SilentErrorBoundary'
-import { MenuContent } from './components/menu/MenuContent'
-import { MenuSections } from './components/menu/MenuSections'
-import { MenuProps } from './components/menu/types'
-import { usePortalSwitcherStep } from './components/tour/PortalSwitcherStep'
-import { elementIds, getLayoutElements } from './elements'
-import './layout.css'
-
-interface Props extends WithStyle {
-  /**
-   * The config for the menu.
-   */
-  menu: MenuProps,
-  /**
-   * The config for the header.
-   */
-  header: HeaderProps,
-  /**
-   * The React node to go in the page content.
-   */
-  children: ReactNode,
-  /**
-   * A React node to place right after the page.
-   */
-  extra?: ReactNode,
-  /**
-   * A function to convert errors into a readable format so they're properly rendered and logged.
-   */
-  errorDescriptor?: DescriptionFn,
-  /**
-   * A function to run whenever an error is catch by an error boundary.
-   */
-  onError?: ErrorHandler,
-  /**
-   * The options for the React Tour's tutorial.
-   */
-  tourProps?: TourProps,
-}
-
-interface RawProps extends WithStyle {
-  /**
-   * The React element to go in the menu sections.
-   */
-  menuSections?: ReactElement,
-  /**
-   * The React element to go in the menu content.
-   */
-  menuContent?: ReactElement,
-  /**
-   * The React element to go in the header.
-   */
-  header?: ReactElement,
-  /**
-   * The React node to go in the page content.
-   */
-  children?: ReactNode,
-  /**
-   * A React node to place right after the page.
-   */
-  extra?: ReactNode,
-  /**
-   * A function to convert errors into a readable format so they're properly rendered and logged.
-   */
-  errorDescriptor?: DescriptionFn,
-  /**
-   * A function to run whenever an error is catch by an error boundary.
-   */
-  onError?: ErrorHandler,
-  /**
-   * The options for the React Tour's tutorial.
-   */
-  tourProps?: TourProps,
-}
-
-/**
- * Renders the layout with the React elements passed in the props.
- * @param props the component's props {@link RawProps}.
- */
-export const RawLayout = (
-  { menuSections, menuContent, header, children, tourProps,
-    extra, errorDescriptor, onError, className, style }:
-    RawProps,
-) => {
-  // @ts-ignore
-  const { bottomDialog, modal, rightPanel } = overlay.useOverlays()
-  const { layout } = getLayoutElements()
-  const isCompactedOnlyIcons = layout?.classList.contains('menu-compact')
-  const portalSwitcherStep = usePortalSwitcherStep()
-
-  const classes = [
-    menuContent && !isCompactedOnlyIcons ? 'menu-content-visible' : undefined,
-    menuSections ? undefined : 'no-menu-sections',
-    className,
-    isCompactedOnlyIcons ? 'menu-compact' : undefined,
-  ]
-
-  const tourPropsWithDefaults = { ...defaultTourConfig, ...(tourProps || {}) }
-  tourPropsWithDefaults.steps = [
-    portalSwitcherStep,
-    ...tourPropsWithDefaults.steps,
-  ].filter(isNewTourStep)
-
-  useEffect(() => {
-    if (errorDescriptor) ErrorManager.setDescriptionFunction(errorDescriptor)
-    if (onError) ErrorManager.setErrorHandler(onError)
-  }, [])
-
-  return (
-    <CSSToCitricAdapter>
-      <TourProvider config={tourPropsWithDefaults} >
-        <div id={elementIds.layout} className={listToClass(classes)} style={style}>
-          {children && <div id={elementIds.page}>
-            <article id={elementIds.content}><ErrorBoundary>{children}</ErrorBoundary></article>
-          </div>}
-          {extra && <SilentErrorBoundary>{extra}</SilentErrorBoundary>}
-          <aside id={elementIds.menu}>
-            <nav role="menu" id={elementIds.menuContent}><SilentErrorBoundary>{menuContent}</SilentErrorBoundary></nav>
-            {menuSections &&
-              <nav role="menu" id={elementIds.menuSections}><SilentErrorBoundary>{menuSections}</SilentErrorBoundary></nav>}
-          </aside>
-          {header && <header id={elementIds.header}><SilentErrorBoundary>{header}</SilentErrorBoundary></header>}
-          <div id={elementIds.bottomDialog} role="dialog"><ErrorBoundary>{bottomDialog}</ErrorBoundary></div>
-          <div id={elementIds.backdrop}>
-            <div id={elementIds.rightPanel} aria-modal role="dialog"><ErrorBoundary>{rightPanel}</ErrorBoundary></div>
-            <div id={elementIds.modal} aria-modal role="dialog"><ErrorBoundary>{modal}</ErrorBoundary></div>
-          </div>
-          <Toaster />
-          <div id={elementIds.accessibilityAnnouncer} aria-atomic aria-live="assertive">
-          </div>
-        </div>
-      </TourProvider>
-    </CSSToCitricAdapter>
-  )
-}
-
-const MenuContentRenderer = ({ content }: Required<Pick<Props['menu'], 'content'>>) => {
-  const menuContent = typeof content === 'function' ? content() : content
-  return <MenuContent {...menuContent} />
-}
-
-/**
- * Renders the layout with a menu and header that follow the config objects passed as parameter.
- * @param props the component's props {@link Props}.
- */
-export const Layout = ({ menu, header, children, extra, errorDescriptor, onError, className, style, tourProps }: Props) => (
-  <RawLayout
-    header={<Header {...header} />}
-    menuSections={menu.sections ? <MenuSections {...menu} /> : undefined}
-    menuContent={menu.content
-      ? <MenuContentRenderer key={'contentKey' in menu ? menu.contentKey : undefined} content={menu.content} />
-      : undefined
-    }
-    errorDescriptor={errorDescriptor}
-    onError={onError}
-    extra={extra}
-    className={className}
-    style={style}
-    tourProps={tourProps}
-  >
-    {children}
-  </RawLayout>
-)
+import { TourProps, TourProvider, defaultTourConfig, isNewTourStep } from '@stack-spot/portal-components/Tour'
+import { CSSToCitricAdapter, WithStyle, listToClass } from '@stack-spot/portal-theme'
+import '@stack-spot/portal-theme/dist/theme.css'
+import { ReactElement, ReactNode, useEffect } from 'react'
+import { overlay } from './LayoutOverlayManager'
+import { Header, HeaderProps } from './components/Header'
+import { Toaster } from './components/Toaster'
+import { ErrorBoundary } from './components/error/ErrorBoundary'
+import { DescriptionFn, ErrorHandler, ErrorManager } from './components/error/ErrorManager'
+import { SilentErrorBoundary } from './components/error/SilentErrorBoundary'
+import { MenuContent } from './components/menu/MenuContent'
+import { MenuSections } from './components/menu/MenuSections'
+import { MenuProps } from './components/menu/types'
+import { usePortalSwitcherStep } from './components/tour/PortalSwitcherStep'
+import { elementIds, getLayoutElements } from './elements'
+import './layout.css'
+
+interface Props extends WithStyle {
+  /**
+   * The config for the menu.
+   */
+  menu: MenuProps,
+  /**
+   * The config for the header.
+   */
+  header: HeaderProps,
+  /**
+   * The React node to go in the page content.
+   */
+  children: ReactNode,
+  /**
+   * A React node to place right after the page.
+   */
+  extra?: ReactNode,
+  /**
+   * A function to convert errors into a readable format so they're properly rendered and logged.
+   */
+  errorDescriptor?: DescriptionFn,
+  /**
+   * A function to run whenever an error is catch by an error boundary.
+   */
+  onError?: ErrorHandler,
+  /**
+   * The options for the React Tour's tutorial.
+   */
+  tourProps?: TourProps,
+}
+
+interface RawProps extends WithStyle {
+  /**
+   * The React element to go in the menu sections.
+   */
+  menuSections?: ReactElement,
+  /**
+   * The React element to go in the menu content.
+   */
+  menuContent?: ReactElement,
+  /**
+   * The React element to go in the header.
+   */
+  header?: ReactElement,
+  /**
+   * The React node to go in the page content.
+   */
+  children?: ReactNode,
+  /**
+   * A React node to place right after the page.
+   */
+  extra?: ReactNode,
+  /**
+   * A function to convert errors into a readable format so they're properly rendered and logged.
+   */
+  errorDescriptor?: DescriptionFn,
+  /**
+   * A function to run whenever an error is catch by an error boundary.
+   */
+  onError?: ErrorHandler,
+  /**
+   * The options for the React Tour's tutorial.
+   */
+  tourProps?: TourProps,
+}
+
+/**
+ * Renders the layout with the React elements passed in the props.
+ * @param props the component's props {@link RawProps}.
+ */
+export const RawLayout = (
+  { menuSections, menuContent, header, children, tourProps,
+    extra, errorDescriptor, onError, className, style }:
+    RawProps,
+) => {
+  // @ts-ignore
+  const { bottomDialog, modal, rightPanel } = overlay.useOverlays()
+  const { layout } = getLayoutElements()
+  const isCompactedOnlyIcons = layout?.classList.contains('menu-compact')
+  const portalSwitcherStep = usePortalSwitcherStep()
+
+  const classes = [
+    menuContent && !isCompactedOnlyIcons ? 'menu-content-visible' : undefined,
+    menuSections ? undefined : 'no-menu-sections',
+    className,
+    isCompactedOnlyIcons ? 'menu-compact' : undefined,
+  ]
+
+  const tourPropsWithDefaults = { ...defaultTourConfig, ...(tourProps || {}) }
+  tourPropsWithDefaults.steps = [
+    portalSwitcherStep,
+    ...tourPropsWithDefaults.steps,
+  ].filter(isNewTourStep)
+
+  useEffect(() => {
+    if (errorDescriptor) ErrorManager.setDescriptionFunction(errorDescriptor)
+    if (onError) ErrorManager.setErrorHandler(onError)
+  }, [])
+
+  return (
+    <CSSToCitricAdapter>
+      <TourProvider config={tourPropsWithDefaults} >
+        <div id={elementIds.layout} className={listToClass(classes)} style={style}>
+          {children && <div id={elementIds.page}>
+            <article id={elementIds.content}><ErrorBoundary>{children}</ErrorBoundary></article>
+          </div>}
+          {extra && <SilentErrorBoundary>{extra}</SilentErrorBoundary>}
+          <aside id={elementIds.menu}>
+            <nav role="menu" id={elementIds.menuContent}><SilentErrorBoundary>{menuContent}</SilentErrorBoundary></nav>
+            {menuSections &&
+              <nav role="menu" id={elementIds.menuSections}><SilentErrorBoundary>{menuSections}</SilentErrorBoundary></nav>}
+          </aside>
+          {header && <header id={elementIds.header}><SilentErrorBoundary>{header}</SilentErrorBoundary></header>}
+          <div id={elementIds.bottomDialog} role="dialog"><ErrorBoundary>{bottomDialog}</ErrorBoundary></div>
+          <div id={elementIds.backdrop}>
+            <div id={elementIds.rightPanel} aria-modal role="dialog"><ErrorBoundary>{rightPanel}</ErrorBoundary></div>
+            <div id={elementIds.modal} aria-modal role="dialog"><ErrorBoundary>{modal}</ErrorBoundary></div>
+          </div>
+          <Toaster />
+          <div id={elementIds.accessibilityAnnouncer} aria-atomic aria-live="assertive">
+          </div>
+        </div>
+      </TourProvider>
+    </CSSToCitricAdapter>
+  )
+}
+
+const MenuContentRenderer = ({ content }: Required<Pick<Props['menu'], 'content'>>) => {
+  const menuContent = typeof content === 'function' ? content() : content
+  return <MenuContent {...menuContent} />
+}
+
+/**
+ * Renders the layout with a menu and header that follow the config objects passed as parameter.
+ * @param props the component's props {@link Props}.
+ */
+export const Layout = ({ menu, header, children, extra, errorDescriptor, onError, className, style, tourProps }: Props) => (
+  <RawLayout
+    header={<Header {...header} />}
+    menuSections={menu.sections ? <MenuSections {...menu} /> : undefined}
+    menuContent={menu.content
+      ? <MenuContentRenderer key={'contentKey' in menu ? menu.contentKey : undefined} content={menu.content} />
+      : undefined
+    }
+    errorDescriptor={errorDescriptor}
+    onError={onError}
+    extra={extra}
+    className={className}
+    style={style}
+    tourProps={tourProps}
+  >
+    {children}
+  </RawLayout>
+)