@stack-spot/portal-layout 1.0.2 → 1.1.1

package/src/components/UserMenu.tsx

@@ -1,124 +1,127 @@
-import { Flex, IconBox, LinkBox, Text } from '@citric/core'
-import { ChevronDown } from '@citric/icons'
-import { Avatar } from '@citric/ui'
-import { SelectionList, SelectionListProps } from '@stack-spot/portal-components/SelectionList'
-import { theme } from '@stack-spot/portal-theme'
-import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
-import { useState } from 'react'
-import { styled } from 'styled-components'
-
-interface Props {
-  /**
-   * The user name.
-   */
-  userName: string,
-  /**
-   * The user email.
-   */
-  email?: string,
-  /**
-   * The menu options.
-   */
-  options?: SelectionListProps['items'],
-}
-
-const USER_MENU_ID = 'userMenu'
-
-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, &:focus {
-          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>
-)
-
-/**
- * Renders the user menu.
- * @param props the component's props {@link Props}.
- */
-export const UserMenu = ({ userName, email, options }: Props) => {
-  const t = useTranslate(dictionary)
-  const [visible, setVisible] = useState(false)
-
-  return (
-    <UserMenuBox>
-      <LinkBox
-        as="button"
-        onClick={() => setVisible(v => !v)}
-        aria-controls={USER_MENU_ID}
-        aria-expanded={visible}
-        aria-label={interpolate(t.accountMenu, [userName])}
-      >
-        <Flex alignItems="center">
-          <Avatar size="xs" aria-label={interpolate(t.accountMenu, [userName])}>{userName}</Avatar>
-          <IconBox colorIcon="inverse.500" className="chevron" style={visible ? { transform: 'rotate(180deg)' } : undefined}>
-            <ChevronDown />
-          </IconBox>
-        </Flex>
-      </LinkBox>
-
-      {options?.length
-        ? <SelectionList
-          id={USER_MENU_ID}
-          visible={visible}
-          before={<UserMenuHeader userName={userName} email={email} />}
-          items={options!}
-          onHide={() => setVisible(false)}
-          maxHeight="600px"
-        />
-        : null
-      }
-    </UserMenuBox>
-  )
-}
-
-const dictionary = {
-  en: {
-    accountMenu: 'Profile menu of $0',
-  },
-  pt: {
-    accountMenu: 'Menu do perfil $0',
-  },
-} satisfies Dictionary
+import { Flex, IconBox, LinkBox, Text } from '@citric/core'
+import { ChevronDown } from '@citric/icons'
+import { Avatar } from '@citric/ui'
+import { SelectionList, SelectionListProps } from '@stack-spot/portal-components/SelectionList'
+import { theme } from '@stack-spot/portal-theme'
+import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
+import { useEffect, useState } from 'react'
+import { styled } from 'styled-components'
+import { userMenuManager } from './user-menu-manager'
+
+interface Props {
+  /**
+   * The user name.
+   */
+  userName: string,
+  /**
+   * The user email.
+   */
+  email?: string,
+  /**
+   * The menu options.
+   */
+  options?: SelectionListProps['items'],
+}
+
+const USER_MENU_ID = 'userMenu'
+
+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, &:focus {
+          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>
+)
+
+/**
+ * Renders the user menu.
+ * @param props the component's props {@link Props}.
+ */
+export const UserMenu = ({ userName, email, options }: Props) => {
+  const t = useTranslate(dictionary)
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => userMenuManager.subscribe(setVisible), [])
+
+  return (
+    <UserMenuBox>
+      <LinkBox
+        as="button"
+        onClick={() => setVisible(v => !v)}
+        aria-controls={USER_MENU_ID}
+        aria-expanded={visible}
+        aria-label={interpolate(t.accountMenu, [userName])}
+      >
+        <Flex alignItems="center">
+          <Avatar size="xs" aria-label={interpolate(t.accountMenu, [userName])}>{userName}</Avatar>
+          <IconBox colorIcon="inverse.500" className="chevron" style={visible ? { transform: 'rotate(180deg)' } : undefined}>
+            <ChevronDown />
+          </IconBox>
+        </Flex>
+      </LinkBox>
+
+      {options?.length
+        ? <SelectionList
+          id={USER_MENU_ID}
+          visible={visible}
+          before={<UserMenuHeader userName={userName} email={email} />}
+          items={options!}
+          onHide={() => setVisible(false)}
+          maxHeight="600px"
+        />
+        : null
+      }
+    </UserMenuBox>
+  )
+}
+
+const dictionary = {
+  en: {
+    accountMenu: 'Profile menu of $0',
+  },
+  pt: {
+    accountMenu: 'Menu do perfil $0',
+  },
+} satisfies Dictionary

package/src/components/error/ErrorBoundary.tsx

@@ -1,47 +1,47 @@
-import { ErrorDescription, ErrorFeedback } from '@stack-spot/portal-components/ErrorFeedback'
-import { Component } from 'react'
-import { ErrorManager } from './ErrorManager'
-
-interface State extends ErrorDescription {
-  hasError: boolean,
-}
-
-interface Props {
-  children: React.ReactNode,
-}
-
-/**
- * An Error Boundary that renders an ErrorFeedback instead of its content if any of its children throws.
- * 
- * To customize what properties are passed to the ErrorFeedback component, setup an error descriptor for the ErrorManager class. If you're
- * using the component `Layout` or `RawLayout`, you can use the property `errorDescriptor`.
- * 
- * To run an error handler every time an error is catch by this boundary, setup an error handler for the ErrorManager class. If you're
- * using the component `Layout` or `RawLayout`, you can use the property `onError`.
- */
-export class ErrorBoundary extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props)
-    this.state = { hasError: false }
-  }
-
-  static getDerivedStateFromError(error: any) {
-    return { hasError: true, ...ErrorManager.describe(error) }
-  }
-
-  componentDidCatch(error: any, errorInfo: any) {
-    // eslint-disable-next-line no-console
-    console.error(error, errorInfo)
-    ErrorManager.runErrorHandler(error)
-  }
-
-  componentDidUpdate(prevProps: Readonly<Props>) {
-    if (this.props.children !== prevProps.children) this.setState({ hasError: false })
-  }
-
-  render() {
-    return this.state.hasError
-      ? <ErrorFeedback code={this.state.code} message={this.state.message} debug={this.state.debug} />
-      : this.props.children
-  }
-}
+import { ErrorDescription, ErrorFeedback } from '@stack-spot/portal-components/ErrorFeedback'
+import { Component } from 'react'
+import { ErrorManager } from './ErrorManager'
+
+interface State extends ErrorDescription {
+  hasError: boolean,
+}
+
+interface Props {
+  children: React.ReactNode,
+}
+
+/**
+ * An Error Boundary that renders an ErrorFeedback instead of its content if any of its children throws.
+ * 
+ * To customize what properties are passed to the ErrorFeedback component, setup an error descriptor for the ErrorManager class. If you're
+ * using the component `Layout` or `RawLayout`, you can use the property `errorDescriptor`.
+ * 
+ * To run an error handler every time an error is catch by this boundary, setup an error handler for the ErrorManager class. If you're
+ * using the component `Layout` or `RawLayout`, you can use the property `onError`.
+ */
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(error: any) {
+    return { hasError: true, ...ErrorManager.describe(error) }
+  }
+
+  componentDidCatch(error: any, errorInfo: any) {
+    // eslint-disable-next-line no-console
+    console.error(error, errorInfo)
+    ErrorManager.runErrorHandler(error)
+  }
+
+  componentDidUpdate(prevProps: Readonly<Props>) {
+    if (this.props.children !== prevProps.children) this.setState({ hasError: false })
+  }
+
+  render() {
+    return this.state.hasError
+      ? <ErrorFeedback code={this.state.code} message={this.state.message} debug={this.state.debug} />
+      : this.props.children
+  }
+}

package/src/components/error/ErrorManager.ts

@@ -1,47 +1,47 @@
-import { ErrorDescription } from '@stack-spot/portal-components/ErrorFeedback'
-
-export type DescriptionFn = (error: any) => ErrorDescription
-export type ErrorHandler = (error: any) => void
-
-/**
- * Setup how the Error Boundaries deal with errors.
- */
-export class ErrorManager {
-  private static descriptionFunction: DescriptionFn = error => ({
-    message: error.message || `${error}`,
-  })
-  private static errorHandler: ErrorHandler | undefined
-
-  /**
-   * Sets a custom logic for generating error messages and codes. Also setups the environment (debug or not).
-   * @param fn a function that, given an error, generates its description.
-   */
-  static setDescriptionFunction(fn: DescriptionFn) {
-    this.descriptionFunction = fn
-  }
-
-  /**
-   * Sets a custom error handler, i.e. a function to run every time an error is catch by an ErrorBoundary.
-   * @param fn a function that receives the error.
-   */
-  static setErrorHandler(handler: ErrorHandler) {
-    this.errorHandler = handler
-  }
-
-  /**
-   * Uses the error descriptor to describe an error.
-   * @param error the error
-   * @returns the error description
-   */
-  static describe(error: any) {
-    return this.descriptionFunction(error)
-  }
-
-  /**
-   * Runs the error handler, if any has been setup.
-   * @param error the error
-   */
-  static runErrorHandler(error: any) {
-    this.errorHandler?.(error)
-  }
-}
+import { ErrorDescription } from '@stack-spot/portal-components/ErrorFeedback'
+
+export type DescriptionFn = (error: any) => ErrorDescription
+export type ErrorHandler = (error: any) => void
+
+/**
+ * Setup how the Error Boundaries deal with errors.
+ */
+export class ErrorManager {
+  private static descriptionFunction: DescriptionFn = error => ({
+    message: error.message || `${error}`,
+  })
+  private static errorHandler: ErrorHandler | undefined
+
+  /**
+   * Sets a custom logic for generating error messages and codes. Also setups the environment (debug or not).
+   * @param fn a function that, given an error, generates its description.
+   */
+  static setDescriptionFunction(fn: DescriptionFn) {
+    this.descriptionFunction = fn
+  }
+
+  /**
+   * Sets a custom error handler, i.e. a function to run every time an error is catch by an ErrorBoundary.
+   * @param fn a function that receives the error.
+   */
+  static setErrorHandler(handler: ErrorHandler) {
+    this.errorHandler = handler
+  }
+
+  /**
+   * Uses the error descriptor to describe an error.
+   * @param error the error
+   * @returns the error description
+   */
+  static describe(error: any) {
+    return this.descriptionFunction(error)
+  }
+
+  /**
+   * Runs the error handler, if any has been setup.
+   * @param error the error
+   */
+  static runErrorHandler(error: any) {
+    this.errorHandler?.(error)
+  }
+}

package/src/components/error/SilentErrorBoundary.tsx

@@ -1,64 +1,64 @@
-import { ErrorDescription } from '@stack-spot/portal-components/ErrorFeedback'
-import { theme } from '@stack-spot/portal-theme'
-import { Component } from 'react'
-import { ErrorManager } from './ErrorManager'
-
-interface State extends ErrorDescription {
-  hasError: boolean,
-}
-
-interface Props {
-  children: React.ReactNode,
-}
-
-/**
- * An Error Boundary that doesn't render anything if any of its children throws. If the environment is not production, a small error icon
- * is rendered instead of nothing.
- * 
- * To customize how the error is logged, setup an error descriptor for the ErrorManager class. If you're using the component `Layout` or
- * `RawLayout`, you can use the property `errorDescriptor`.
- * 
- * To run an error handler every time an error is catch by this boundary, setup an error handler for the ErrorManager class. If you're
- * using the component `Layout` or `RawLayout`, you can use the property `onError`.
- */
-export class SilentErrorBoundary extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props)
-    this.state = { hasError: false }
-  }
-
-  static getDerivedStateFromError(error: any) {
-    return { hasError: true, ...ErrorManager.describe(error) }
-  }
-
-  componentDidCatch(error: any, errorInfo: any) {
-    // eslint-disable-next-line no-console
-    console.error(error, errorInfo)
-    ErrorManager.runErrorHandler(error)
-  }
-
-  componentDidUpdate(prevProps: Readonly<Props>) {
-    if (this.props.children !== prevProps.children) this.setState({ hasError: false })
-  }
-
-  render() {
-    return this.state.hasError
-      ? <div
-        title={this.state.message ? `Error: ${this.state.message}` : undefined}
-        style={{
-          width: '16px',
-          height: '16px',
-          margin: '16px',
-          background: theme.color.danger[500],
-          color: theme.color.danger.contrastText,
-          display: this.state.debug ? 'flex' : 'none',
-          justifyContent: 'center',
-          alignItems: 'center',
-          fontWeight: 'bold',
-          fontSize: '10px',
-          borderRadius: '50%',
-        }}
-      >!</div>
-      : this.props.children
-  }
-}
+import { ErrorDescription } from '@stack-spot/portal-components/ErrorFeedback'
+import { theme } from '@stack-spot/portal-theme'
+import { Component } from 'react'
+import { ErrorManager } from './ErrorManager'
+
+interface State extends ErrorDescription {
+  hasError: boolean,
+}
+
+interface Props {
+  children: React.ReactNode,
+}
+
+/**
+ * An Error Boundary that doesn't render anything if any of its children throws. If the environment is not production, a small error icon
+ * is rendered instead of nothing.
+ * 
+ * To customize how the error is logged, setup an error descriptor for the ErrorManager class. If you're using the component `Layout` or
+ * `RawLayout`, you can use the property `errorDescriptor`.
+ * 
+ * To run an error handler every time an error is catch by this boundary, setup an error handler for the ErrorManager class. If you're
+ * using the component `Layout` or `RawLayout`, you can use the property `onError`.
+ */
+export class SilentErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(error: any) {
+    return { hasError: true, ...ErrorManager.describe(error) }
+  }
+
+  componentDidCatch(error: any, errorInfo: any) {
+    // eslint-disable-next-line no-console
+    console.error(error, errorInfo)
+    ErrorManager.runErrorHandler(error)
+  }
+
+  componentDidUpdate(prevProps: Readonly<Props>) {
+    if (this.props.children !== prevProps.children) this.setState({ hasError: false })
+  }
+
+  render() {
+    return this.state.hasError
+      ? <div
+        title={this.state.message ? `Error: ${this.state.message}` : undefined}
+        style={{
+          width: '16px',
+          height: '16px',
+          margin: '16px',
+          background: theme.color.danger[500],
+          color: theme.color.danger.contrastText,
+          display: this.state.debug ? 'flex' : 'none',
+          justifyContent: 'center',
+          alignItems: 'center',
+          fontWeight: 'bold',
+          fontSize: '10px',
+          borderRadius: '50%',
+        }}
+      >!</div>
+      : this.props.children
+  }
+}