@stack-spot/portal-layout 0.0.53 → 0.0.54

package/src/components/UserMenu.tsx

@@ -1,111 +1,111 @@
-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 { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
-import { useState } from 'react'
-import { styled } from 'styled-components'
-import { SelectionList, SelectionListProps } from './SelectionList'
-
-interface Props {
-  userName: string,
-  email?: string,
-  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>
-)
-
-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 { theme } from '@stack-spot/portal-theme'
+import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
+import { useState } from 'react'
+import { styled } from 'styled-components'
+import { SelectionList, SelectionListProps } from './SelectionList'
+
+interface Props {
+  userName: string,
+  email?: string,
+  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>
+)
+
+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

package/src/components/error/ErrorBoundary.tsx

@@ -1,38 +1,38 @@
-import { Component } from 'react'
-import { ErrorFeedback } from './ErrorFeedback'
-import { ErrorDescription, ErrorManager } from './ErrorManager'
-
-interface State extends ErrorDescription {
-  hasError: boolean,
-}
-
-interface Props {
-  children: React.ReactNode,
-}
-
-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 { Component } from 'react'
+import { ErrorFeedback } from './ErrorFeedback'
+import { ErrorDescription, ErrorManager } from './ErrorManager'
+
+interface State extends ErrorDescription {
+  hasError: boolean,
+}
+
+interface Props {
+  children: React.ReactNode,
+}
+
+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/ErrorFeedback.tsx

@@ -1,114 +1,114 @@
-import { Box, Button, Container, Flex, LinkBox, Text } from '@citric/core'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { useState } from 'react'
-import { Forbidden } from '../../svg/Forbidden'
-import { Logo } from '../../svg/Logo'
-import { NotFound } from '../../svg/NotFound'
-import { ServerError } from '../../svg/ServerError'
-import { Unauthenticated } from '../../svg/Unauthenticated'
-import { ErrorDescription } from './ErrorManager'
-
-const imageStyle: React.CSSProperties = {
-  width: '200px',
-  height: '200px',
-}
-
-const imageMap: Record<number, React.ReactElement> = {
-  401: <Unauthenticated style={imageStyle} />,
-  403: <Forbidden style={imageStyle} />,
-  404: <NotFound style={imageStyle} />,
-}
-
-export const ErrorFeedback = ({ code = 0, message, debug }: ErrorDescription) => {
-  const t = useTranslate(dictionary) as Record<string, string>
-  const [showDetails, setShowDetails] = useState(false)
-
-  return (
-    <Box bg="light.400">
-      <Container>
-        <Flex alignItems="center" sx={{ padding: 12 }}>
-          <Box width={5} sx={{ display: ['block', 'none'] }}>
-            <Flex justifyContent="flex-end" pr={20}>
-              {imageMap[code] ?? <ServerError style={imageStyle} />}
-            </Flex>
-          </Box>
-          <Box width={[7, 12]}> 
-            <LinkBox href="/">
-              <Logo style={{ width: '130px', height: '30px' }} />
-            </LinkBox>
-            <Box w={[7, 12]}>
-              <Text appearance="h4" mt={5} colorScheme="inverse">
-                {code ? `${code}. ` : ''}
-                <Text appearance="h4" as="span" colorScheme="light.700">
-                  {t[`${code}.title`]}
-                </Text>
-              </Text>
-
-              <Text appearance="body1" mt={5} colorScheme="inverse">
-                {t[`${code}.description`]}
-              </Text>
-
-              <Text appearance="body1" colorScheme="light.700" mt={1}>
-                {t[`${code}.help`]}
-              </Text>
-              {debug && message && (
-                <Button appearance="outlined" colorScheme="inverse" onClick={() => setShowDetails(v => !v)}>
-                  {showDetails ? t.hideDetails : t.showDetails}
-                </Button>
-              )}
-              {showDetails && (
-                <Box bg="danger" mt={8} p={4} sx={{ borderRadius: '5px' }}>
-                  <Text appearance="microtext1" colorScheme="danger.contrastText">{message}</Text>
-                </Box>
-              )}
-            </Box>
-          </Box>
-        </Flex>
-      </Container>
-    </Box>
-  )
-}
-
-const dictionary = {
-  en: {
-    altLogo: 'Logo Stackspot',
-    '0.title': 'Unknown client error',
-    '0.description': 'An unknown error happened while trying to load the resource.',
-    '0.help': 'Reload the page and, if it still doesn\'t work, report the error the Stackspot team.',
-    '401.title': 'Not authorized',
-    '401.description': 'There was a failure loading credentials for this page.',
-    '401.help': 'Check if the URL is correct or clear your cache and cookies from your browser and try again.',
-    '403.title': 'Private access',
-    '403.description': 'The page you have tried to visit is private.',
-    '403.help': 'Log in with another account or request access from the person who manages your organization.',
-    '404.title': 'Resource not found',
-    '404.description': 'This resource no longer exists.',
-    '404.help': 'Please try again or request a new URL from the person who manages your organization.',
-    '500.title': 'Server error',
-    '500.description':
-      "We have identified a problem with the server, but don't worry. We are already investigating what happened.",
-    '500.help': 'Please try again after a few minutes.',
-    showDetails: 'Show Details',
-    hideDetails: 'Hide Details',
-  },
-  pt: {
-    altLogo: 'Logo Stackspot',
-    '0.title': 'Erro desconhecido (cliente)',
-    '0.description': 'Um erro desconhecido aconteceu ao carregar o recurso',
-    '0.help': 'Recarregue a página e, se ainda não funcionar, reporte o problema para o time da Stackspot.',
-    '401.title': 'Não autorizado',
-    '401.description': 'Houve uma falha no carregamento de credenciais dessa página.',
-    '401.help': 'Verifique se a URL está correta ou limpe o cache e os cookies de seu navegador e tente novamente.',
-    '403.title': 'Acesso privado',
-    '403.description': '"A página que você tentou visualizar é particular."',
-    '403.help': 'Solicite acesso com o administrador da sua organização.',
-    '404.title': 'Recurso não encontrado',
-    '404.description': 'Este recurso não existe mais.',
-    '404.help': 'Tente novamente ou fale com o administrador da sua organização.',
-    '500.title': 'Erro ao exibir o recurso',
-    '500.description': 'Mas não se preocupe, já estamos investigando o que aconteceu.',
-    '500.help': 'Tente novamente após alguns minutos.',
-    showDetails: 'Ver Detalhes',
-    hideDetails: 'Esconder Detalhes',
-  },
-} satisfies Dictionary
+import { Box, Button, Container, Flex, LinkBox, Text } from '@citric/core'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useState } from 'react'
+import { Forbidden } from '../../svg/Forbidden'
+import { Logo } from '../../svg/Logo'
+import { NotFound } from '../../svg/NotFound'
+import { ServerError } from '../../svg/ServerError'
+import { Unauthenticated } from '../../svg/Unauthenticated'
+import { ErrorDescription } from './ErrorManager'
+
+const imageStyle: React.CSSProperties = {
+  width: '200px',
+  height: '200px',
+}
+
+const imageMap: Record<number, React.ReactElement> = {
+  401: <Unauthenticated style={imageStyle} />,
+  403: <Forbidden style={imageStyle} />,
+  404: <NotFound style={imageStyle} />,
+}
+
+export const ErrorFeedback = ({ code = 0, message, debug }: ErrorDescription) => {
+  const t = useTranslate(dictionary) as Record<string, string>
+  const [showDetails, setShowDetails] = useState(false)
+
+  return (
+    <Box bg="light.400">
+      <Container>
+        <Flex alignItems="center" sx={{ padding: 12 }}>
+          <Box width={5} sx={{ display: ['block', 'none'] }}>
+            <Flex justifyContent="flex-end" pr={20}>
+              {imageMap[code] ?? <ServerError style={imageStyle} />}
+            </Flex>
+          </Box>
+          <Box width={[7, 12]}> 
+            <LinkBox href="/">
+              <Logo style={{ width: '130px', height: '30px' }} />
+            </LinkBox>
+            <Box w={[7, 12]}>
+              <Text appearance="h4" mt={5} colorScheme="inverse">
+                {code ? `${code}. ` : ''}
+                <Text appearance="h4" as="span" colorScheme="light.700">
+                  {t[`${code}.title`]}
+                </Text>
+              </Text>
+
+              <Text appearance="body1" mt={5} colorScheme="inverse">
+                {t[`${code}.description`]}
+              </Text>
+
+              <Text appearance="body1" colorScheme="light.700" mt={1}>
+                {t[`${code}.help`]}
+              </Text>
+              {debug && message && (
+                <Button appearance="outlined" colorScheme="inverse" onClick={() => setShowDetails(v => !v)}>
+                  {showDetails ? t.hideDetails : t.showDetails}
+                </Button>
+              )}
+              {showDetails && (
+                <Box bg="danger" mt={8} p={4} sx={{ borderRadius: '5px' }}>
+                  <Text appearance="microtext1" colorScheme="danger.contrastText">{message}</Text>
+                </Box>
+              )}
+            </Box>
+          </Box>
+        </Flex>
+      </Container>
+    </Box>
+  )
+}
+
+const dictionary = {
+  en: {
+    altLogo: 'Logo Stackspot',
+    '0.title': 'Unknown client error',
+    '0.description': 'An unknown error happened while trying to load the resource.',
+    '0.help': 'Reload the page and, if it still doesn\'t work, report the error the Stackspot team.',
+    '401.title': 'Not authorized',
+    '401.description': 'There was a failure loading credentials for this page.',
+    '401.help': 'Check if the URL is correct or clear your cache and cookies from your browser and try again.',
+    '403.title': 'Private access',
+    '403.description': 'The page you have tried to visit is private.',
+    '403.help': 'Log in with another account or request access from the person who manages your organization.',
+    '404.title': 'Resource not found',
+    '404.description': 'This resource no longer exists.',
+    '404.help': 'Please try again or request a new URL from the person who manages your organization.',
+    '500.title': 'Server error',
+    '500.description':
+      "We have identified a problem with the server, but don't worry. We are already investigating what happened.",
+    '500.help': 'Please try again after a few minutes.',
+    showDetails: 'Show Details',
+    hideDetails: 'Hide Details',
+  },
+  pt: {
+    altLogo: 'Logo Stackspot',
+    '0.title': 'Erro desconhecido (cliente)',
+    '0.description': 'Um erro desconhecido aconteceu ao carregar o recurso',
+    '0.help': 'Recarregue a página e, se ainda não funcionar, reporte o problema para o time da Stackspot.',
+    '401.title': 'Não autorizado',
+    '401.description': 'Houve uma falha no carregamento de credenciais dessa página.',
+    '401.help': 'Verifique se a URL está correta ou limpe o cache e os cookies de seu navegador e tente novamente.',
+    '403.title': 'Acesso privado',
+    '403.description': '"A página que você tentou visualizar é particular."',
+    '403.help': 'Solicite acesso com o administrador da sua organização.',
+    '404.title': 'Recurso não encontrado',
+    '404.description': 'Este recurso não existe mais.',
+    '404.help': 'Tente novamente ou fale com o administrador da sua organização.',
+    '500.title': 'Erro ao exibir o recurso',
+    '500.description': 'Mas não se preocupe, já estamos investigando o que aconteceu.',
+    '500.help': 'Tente novamente após alguns minutos.',
+    showDetails: 'Ver Detalhes',
+    hideDetails: 'Esconder Detalhes',
+  },
+} satisfies Dictionary

package/src/components/error/ErrorManager.ts

@@ -1,31 +1,31 @@
-export interface ErrorDescription {
-  code?: number,
-  message?: string,
-  debug?: boolean,
-}
-
-export type DescriptionFn = (error: any) => ErrorDescription
-export type ErrorHandler = (error: any) => void
-
-export class ErrorManager {
-  private static descriptionFunction: DescriptionFn = error => ({
-    message: error.message || `${error}`,
-  })
-  private static errorHandler: ErrorHandler | undefined
-
-  static setDescriptionFunction(fn: DescriptionFn) {
-    this.descriptionFunction = fn
-  }
-
-  static setErrorHandler(handler: ErrorHandler) {
-    this.errorHandler = handler
-  }
-
-  static describe(error: any) {
-    return this.descriptionFunction(error)
-  }
-
-  static runErrorHandler(error: any) {
-    return this.errorHandler?.(error)
-  }
-}
+export interface ErrorDescription {
+  code?: number,
+  message?: string,
+  debug?: boolean,
+}
+
+export type DescriptionFn = (error: any) => ErrorDescription
+export type ErrorHandler = (error: any) => void
+
+export class ErrorManager {
+  private static descriptionFunction: DescriptionFn = error => ({
+    message: error.message || `${error}`,
+  })
+  private static errorHandler: ErrorHandler | undefined
+
+  static setDescriptionFunction(fn: DescriptionFn) {
+    this.descriptionFunction = fn
+  }
+
+  static setErrorHandler(handler: ErrorHandler) {
+    this.errorHandler = handler
+  }
+
+  static describe(error: any) {
+    return this.descriptionFunction(error)
+  }
+
+  static runErrorHandler(error: any) {
+    return this.errorHandler?.(error)
+  }
+}