@stack-spot/portal-components 2.27.0 → 2.27.2

package/src/components/error/ErrorFeedback.tsx

@@ -1,217 +1,217 @@
-import { Button, LinkBox, Text } from '@citric/core'
-import { listToClass, theme } from '@stack-spot/portal-theme'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { useState } from 'react'
-import { styled } from 'styled-components'
-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'
-
-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 interface ErrorDescription {
-  /**
-   * The HTTP Error code if this is a network error.
-   */
-  code?: number,
-  /**
-   * The error message. This is only visible if debug is true.
-   */
-  message?: string,
-  /**
-   * Whether or not the application is in debug mode.
-   */
-  debug?: boolean,
-  /**
-   * The title for this error. Overwrites anything preset by "code".
-   */
-  title?: string,
-  /**
-   * The error description. Overwrites anything preset by "code".
-   */
-  description?: string,
-  /**
-   * A help text to aid the user. Overwrites anything preset by "code".
-   */
-  help?: string,
-  /**
-   * A button so the user can take some action.
-   */
-  action?: { label: string, onClick: () => void },
-  /**
-   * The content for this error. Overwrites anything preset by "code", "description", "help" or "button".
-   */
-  body?: React.ReactNode,
-  /**
-   * The image for the error. Overwrites anything preset by "code".
-   */
-  image?: React.ReactElement,
-  /**
-   * Whether to show the feedback horizontally (row) or vertically (column).
-   * 
-   * @default 'row'
-   */
-  direction?: 'row' | 'column',
-  style?: React.CSSProperties,
-  className?: string,
-}
-
-const FeedbackBox = styled.div`
-  background-color: ${theme.color.light[400]};
-  padding: 24px;
-  .content {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    &.row {
-      flex-direction: row;
-      gap: 40px;
-    }
-    &.column {
-      flex-direction: column;
-      .text-content {
-        align-items: center;
-      }
-    }
-    .text-content {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-    .buttons {
-      display: flex;
-      flex-direction: row;
-      gap: '10px';
-    }
-    .details {
-      background-color: ${theme.color.danger[500]};
-      color: ${theme.color.danger.contrastText};
-      padding: 12px;
-      border-radius: 5px;
-    }
-  }
-`
-
-/**
- * A box with an icon and an error message. This is used for giving error feedbacks to the user.
- * 
- * If the application is in debug mode, a button is rendered to show the error message.
- * 
- * @param options the error code, the error message and whether or not the application is in debug mode.
- */
-export const ErrorFeedback = (
-  { code = 0, message, debug, title, body, image, action, description, help, direction = 'row', style, className }: ErrorDescription,
-) => {
-  const t = useTranslate(dictionary) as Record<string, string>
-  const [showDetails, setShowDetails] = useState(false)
-  const shouldShowButtons = !!(action || (debug && message))
-
-  function renderBody() {
-    return typeof body === 'string' ? <Text appearance="body1" colorScheme="inverse" className="description">{body}</Text> : body
-  }
-
-  return (
-    <FeedbackBox style={style} className={className}>
-      <div className={listToClass(['content', direction])}>
-        <div className="image">{image ?? imageMap[code] ?? <ServerError style={imageStyle} />}</div>
-        <div className="text-content">
-          <LinkBox href="/" className="logo">
-            <Logo style={{ width: '130px', height: '30px' }} />
-          </LinkBox>
-          <Text appearance="h4" mt={5} colorScheme="inverse" className="title">
-            {(code && !title) ? `${t.errorLabel} ${code}. ` : ''}
-            <Text appearance="h4" as="span" colorScheme="light.700">
-              {title ?? t[`${code}.title`]}
-            </Text>
-          </Text>
-          {body ? renderBody() : (
-            <>
-              <Text appearance="body1" mt={5} colorScheme="inverse" className="description"
-                sx={{
-                  maxWidth: '70ch',       
-                  whiteSpace: 'normal',    
-                  wordBreak: 'break-word', 
-                }}
-              >
-                {description ?? t[`${code}.description`]}
-              </Text>
-
-              <Text appearance="body1" colorScheme="light.700" className="help">
-                {help ?? t[`${code}.help`]}
-              </Text>
-            </>
-          )}
-          {shouldShowButtons && (
-            <div className="buttons">
-              {action && (
-                <Button colorScheme="inverse" onClick={action.onClick}>
-                  {action.label}
-                </Button>
-              )}
-              {debug && message && (
-                <Button appearance="outlined" colorScheme="inverse" onClick={() => setShowDetails(v => !v)}>
-                  {showDetails ? t.hideDetails : t.showDetails}
-                </Button>
-              )}
-            </div>
-          )}
-          {showDetails && (
-            <div className="details">
-              <Text appearance="microtext1">{message}</Text>
-            </div>
-          )}
-        </div>
-      </div>
-    </FeedbackBox>
-  )
-}
-
-const dictionary = {
-  en: {
-    altLogo: 'Logo Stackspot',
-    '0.title': 'Something didn’t go as expected',
-    '0.description': 'This can happen from time to time. Try refreshing the page. If it still doesn’t work, reach out. We’re here to help.',
-    '401.title': 'You need a valid credential',
-    '401.description': 'We couldn’t verify your credentials. Check the link or log in with a different account to continue.',
-    '403.title': 'Access restricted to your organization',
-    '403.help': 'Log in with an account from your organization or request access from your Account Holder.',
-    '404.title': 'This resource is no longer available',
-    '404.description': 'It may have been moved or removed. You can try again or ask your organization’s Account Holder for a new link.',
-    '500.title': 'We\'re making some adjustments',
-    '500.description':
-    'Something unexpected happened on our side. It might just be a momentary glitch. Try refreshing later to pick up where you left off.',
-    showDetails: 'Show Details',
-    hideDetails: 'Hide Details',
-    errorLabel: 'Error',
-  },
-  pt: {
-    altLogo: 'Logo Stackspot',
-    '0.title': 'Algo saiu diferente do esperado',
-    '0.description': 
-    'Isso pode acontecer de vez em quando. Tente recarregar a página. Se ainda não funcionar, chama a gente. Estamos por aqui para ajudar.',
-    '401.title': 'Você precisa de uma credencial válida',
-    '401.description': 'Não conseguimos confirmar suas credenciais. Verifique o link ou faça login com outra conta para continuar.',
-    '403.title': 'Acesso exclusivo da sua organização',
-    '403.help': 'Faça login com uma conta da sua organização ou peça acesso ao Account Holder.',
-    '404.title': 'Este recurso não está mais disponível',
-    '404.description': 
-    'Ele pode ter sido movido ou removido. Você pode tentar de novo ou pedir um novo link ao Account Holder da sua organização.',
-    '500.title': 'Estamos ajustando o sistema',
-    '500.description': 
-    'Algo inesperado aconteceu do nosso lado. Pode ser só por alguns instantes. Tente recarregar mais tarde para continuar de onde parou.',
-    showDetails: 'Ver Detalhes',
-    hideDetails: 'Esconder Detalhes',
-    errorLabel: 'Erro',
-  },
-} satisfies Dictionary
+import { Button, LinkBox, Text } from '@citric/core'
+import { listToClass, theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useState } from 'react'
+import { styled } from 'styled-components'
+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'
+
+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 interface ErrorDescription {
+  /**
+   * The HTTP Error code if this is a network error.
+   */
+  code?: number,
+  /**
+   * The error message. This is only visible if debug is true.
+   */
+  message?: string,
+  /**
+   * Whether or not the application is in debug mode.
+   */
+  debug?: boolean,
+  /**
+   * The title for this error. Overwrites anything preset by "code".
+   */
+  title?: string,
+  /**
+   * The error description. Overwrites anything preset by "code".
+   */
+  description?: string,
+  /**
+   * A help text to aid the user. Overwrites anything preset by "code".
+   */
+  help?: string,
+  /**
+   * A button so the user can take some action.
+   */
+  action?: { label: string, onClick: () => void },
+  /**
+   * The content for this error. Overwrites anything preset by "code", "description", "help" or "button".
+   */
+  body?: React.ReactNode,
+  /**
+   * The image for the error. Overwrites anything preset by "code".
+   */
+  image?: React.ReactElement,
+  /**
+   * Whether to show the feedback horizontally (row) or vertically (column).
+   * 
+   * @default 'row'
+   */
+  direction?: 'row' | 'column',
+  style?: React.CSSProperties,
+  className?: string,
+}
+
+const FeedbackBox = styled.div`
+  background-color: ${theme.color.light[400]};
+  padding: 24px;
+  .content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &.row {
+      flex-direction: row;
+      gap: 40px;
+    }
+    &.column {
+      flex-direction: column;
+      .text-content {
+        align-items: center;
+      }
+    }
+    .text-content {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .buttons {
+      display: flex;
+      flex-direction: row;
+      gap: '10px';
+    }
+    .details {
+      background-color: ${theme.color.danger[500]};
+      color: ${theme.color.danger.contrastText};
+      padding: 12px;
+      border-radius: 5px;
+    }
+  }
+`
+
+/**
+ * A box with an icon and an error message. This is used for giving error feedbacks to the user.
+ * 
+ * If the application is in debug mode, a button is rendered to show the error message.
+ * 
+ * @param options the error code, the error message and whether or not the application is in debug mode.
+ */
+export const ErrorFeedback = (
+  { code = 0, message, debug, title, body, image, action, description, help, direction = 'row', style, className }: ErrorDescription,
+) => {
+  const t = useTranslate(dictionary) as Record<string, string>
+  const [showDetails, setShowDetails] = useState(false)
+  const shouldShowButtons = !!(action || (debug && message))
+
+  function renderBody() {
+    return typeof body === 'string' ? <Text appearance="body1" colorScheme="inverse" className="description">{body}</Text> : body
+  }
+
+  return (
+    <FeedbackBox style={style} className={className}>
+      <div className={listToClass(['content', direction])}>
+        <div className="image">{image ?? imageMap[code] ?? <ServerError style={imageStyle} />}</div>
+        <div className="text-content">
+          <LinkBox href="/" className="logo">
+            <Logo style={{ width: '130px', height: '30px' }} />
+          </LinkBox>
+          <Text appearance="h4" mt={5} colorScheme="inverse" className="title">
+            {(code && !title) ? `${t.errorLabel} ${code}. ` : ''}
+            <Text appearance="h4" as="span" colorScheme="light.700">
+              {title ?? t[`${code}.title`]}
+            </Text>
+          </Text>
+          {body ? renderBody() : (
+            <>
+              <Text appearance="body1" mt={5} colorScheme="inverse" className="description"
+                sx={{
+                  maxWidth: '70ch',       
+                  whiteSpace: 'normal',    
+                  wordBreak: 'break-word', 
+                }}
+              >
+                {description ?? t[`${code}.description`]}
+              </Text>
+
+              <Text appearance="body1" colorScheme="light.700" className="help">
+                {help ?? t[`${code}.help`]}
+              </Text>
+            </>
+          )}
+          {shouldShowButtons && (
+            <div className="buttons">
+              {action && (
+                <Button colorScheme="inverse" onClick={action.onClick}>
+                  {action.label}
+                </Button>
+              )}
+              {debug && message && (
+                <Button appearance="outlined" colorScheme="inverse" onClick={() => setShowDetails(v => !v)}>
+                  {showDetails ? t.hideDetails : t.showDetails}
+                </Button>
+              )}
+            </div>
+          )}
+          {showDetails && (
+            <div className="details">
+              <Text appearance="microtext1">{message}</Text>
+            </div>
+          )}
+        </div>
+      </div>
+    </FeedbackBox>
+  )
+}
+
+const dictionary = {
+  en: {
+    altLogo: 'Logo Stackspot',
+    '0.title': 'Something didn’t go as expected',
+    '0.description': 'This can happen from time to time. Try refreshing the page. If it still doesn’t work, reach out. We’re here to help.',
+    '401.title': 'You need a valid credential',
+    '401.description': 'We couldn’t verify your credentials. Check the link or log in with a different account to continue.',
+    '403.title': 'Access restricted to your organization',
+    '403.help': 'Log in with an account from your organization or request access from your Account Holder.',
+    '404.title': 'This resource is no longer available',
+    '404.description': 'It may have been moved or removed. You can try again or ask your organization’s Account Holder for a new link.',
+    '500.title': 'We\'re making some adjustments',
+    '500.description':
+    'Something unexpected happened on our side. It might just be a momentary glitch. Try refreshing later to pick up where you left off.',
+    showDetails: 'Show Details',
+    hideDetails: 'Hide Details',
+    errorLabel: 'Error',
+  },
+  pt: {
+    altLogo: 'Logo Stackspot',
+    '0.title': 'Algo saiu diferente do esperado',
+    '0.description': 
+    'Isso pode acontecer de vez em quando. Tente recarregar a página. Se ainda não funcionar, chama a gente. Estamos por aqui para ajudar.',
+    '401.title': 'Você precisa de uma credencial válida',
+    '401.description': 'Não conseguimos confirmar suas credenciais. Verifique o link ou faça login com outra conta para continuar.',
+    '403.title': 'Acesso exclusivo da sua organização',
+    '403.help': 'Faça login com uma conta da sua organização ou peça acesso ao Account Holder.',
+    '404.title': 'Este recurso não está mais disponível',
+    '404.description': 
+    'Ele pode ter sido movido ou removido. Você pode tentar de novo ou pedir um novo link ao Account Holder da sua organização.',
+    '500.title': 'Estamos ajustando o sistema',
+    '500.description': 
+    'Algo inesperado aconteceu do nosso lado. Pode ser só por alguns instantes. Tente recarregar mais tarde para continuar de onde parou.',
+    showDetails: 'Ver Detalhes',
+    hideDetails: 'Esconder Detalhes',
+    errorLabel: 'Erro',
+  },
+} satisfies Dictionary

package/src/components/error/NotFound.tsx

@@ -1,24 +1,24 @@
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { ErrorFeedback } from './ErrorFeedback'
-
-export const PageNotFound = ({ goHome }: { goHome?: () => void }) => {
-  const t = useTranslate(dictionary)
-  return (
-    <ErrorFeedback
-      code={404}
-      action={goHome ? {
-        label: t.homePage,
-        onClick: goHome,
-      } : undefined}
-    />
-  )
-}
-
-const dictionary = {
-  en: {
-    homePage: 'Home Page',
-  },
-  pt: {
-    homePage: 'Página Inicial',
-  },
-} satisfies Dictionary
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { ErrorFeedback } from './ErrorFeedback'
+
+export const PageNotFound = ({ goHome }: { goHome?: () => void }) => {
+  const t = useTranslate(dictionary)
+  return (
+    <ErrorFeedback
+      code={404}
+      action={goHome ? {
+        label: t.homePage,
+        onClick: goHome,
+      } : undefined}
+    />
+  )
+}
+
+const dictionary = {
+  en: {
+    homePage: 'Home Page',
+  },
+  pt: {
+    homePage: 'Página Inicial',
+  },
+} satisfies Dictionary

package/src/components/error/UnderMaintenance.tsx

@@ -1,30 +1,30 @@
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { ErrorFeedback } from './ErrorFeedback'
-
-export const UnderMaintenance = ({ refresh }: { refresh?: () => void }) => {
-  const t = useTranslate(dictionary)
-  return <ErrorFeedback
-    title={t.underMaintenance}
-    description={t.underMaintenanceDescription}
-    help={t.underMaintenanceHelp}
-    action={refresh ? {
-      label: t.refresh,
-      onClick: refresh,
-    } : undefined}
-  />
-}
-
-const dictionary = {
-  en: {
-    underMaintenance: 'Under maintenance',
-    underMaintenanceDescription: 'The site is currently undergoing maintenance.',
-    underMaintenanceHelp: 'Please, try again in a few minutes.',
-    refresh: 'Refresh page',
-  },
-  pt: {
-    underMaintenance: 'Em manutenção',
-    underMaintenanceDescription: 'O site está em manutenção.',
-    underMaintenanceHelp: 'Por favor, tente novamente em alguns minutos.',
-    refresh: 'Atualizar página',
-  },
-} satisfies Dictionary
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { ErrorFeedback } from './ErrorFeedback'
+
+export const UnderMaintenance = ({ refresh }: { refresh?: () => void }) => {
+  const t = useTranslate(dictionary)
+  return <ErrorFeedback
+    title={t.underMaintenance}
+    description={t.underMaintenanceDescription}
+    help={t.underMaintenanceHelp}
+    action={refresh ? {
+      label: t.refresh,
+      onClick: refresh,
+    } : undefined}
+  />
+}
+
+const dictionary = {
+  en: {
+    underMaintenance: 'Under maintenance',
+    underMaintenanceDescription: 'The site is currently undergoing maintenance.',
+    underMaintenanceHelp: 'Please, try again in a few minutes.',
+    refresh: 'Refresh page',
+  },
+  pt: {
+    underMaintenance: 'Em manutenção',
+    underMaintenanceDescription: 'O site está em manutenção.',
+    underMaintenanceHelp: 'Por favor, tente novamente em alguns minutos.',
+    refresh: 'Atualizar página',
+  },
+} satisfies Dictionary

package/src/components/error/index.ts

@@ -1,4 +1,4 @@
-export { ErrorDescription, ErrorFeedback } from './ErrorFeedback'
-export { PageNotFound } from './NotFound'
-export { UnderMaintenance } from './UnderMaintenance'
-
+export { ErrorDescription, ErrorFeedback } from './ErrorFeedback'
+export { PageNotFound } from './NotFound'
+export { UnderMaintenance } from './UnderMaintenance'
+