@stack-spot/portal-components 0.0.18 → 1.0.0-dev.1770393008395

package/src/components/error/ErrorFeedback.tsx

@@ -0,0 +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

package/src/components/error/NotFound.tsx

@@ -0,0 +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

package/src/components/error/UnderMaintenance.tsx

@@ -0,0 +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

package/src/components/error/index.ts

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

package/src/components/form/Form/Form.tsx

@@ -0,0 +1,101 @@
+import { get } from 'lodash'
+import { FormEvent, ReactNode } from 'react'
+import { FieldValues, FormProvider, UseFormReturn, useForm, useFormContext } from 'react-hook-form'
+
+export interface FormProps {
+  id?: string,
+  name: string,
+  defaultValues?: FieldValues,
+  autoComplete?: HTMLInputElement['autocomplete'],
+  children?: ReactNode,
+  onSubmit?: (params: FieldValues) => unknown,
+  form?: UseFormReturn<any, any>,
+  style?: React.CSSProperties,
+  className?: string,
+}
+
+
+function handleGraphqlErrors(error: unknown, methods: UseFormReturn<FieldValues>) {
+  const errors: any = get(error, 'cause.extensions.fields')
+
+  if (errors) {
+    Object.keys(errors).forEach((key) => {
+      if (Object.keys(methods.control._fields).includes(key)) {
+        methods.setError(key, { type: 'server', message: errors[`${key}`] })
+      }
+    })
+  }
+}
+
+const handleFormSubmit = async (
+  data: FormEvent<HTMLFormElement>,
+  methods: UseFormReturn,
+  onSubmit?: (params: Record<string, any>) => Promise<unknown> | unknown,
+) => {
+
+  if (!onSubmit) {
+    return
+  }
+
+  const result = methods.handleSubmit(onSubmit)(data)
+  const isPromise = result instanceof Promise
+
+  if (!isPromise) {
+    return result
+  }
+
+  try {
+    return await result
+  } catch (error: any) {
+    const isGraphqlError = error.message === 'GraphqlError'
+    if (!isGraphqlError) {
+      throw error
+    }
+    handleGraphqlErrors(error, methods)
+  }
+}
+
+const BasicForm = ({
+  onSubmit,
+  id,
+  name,
+  children,
+  methods,
+  autoComplete,
+  ...props
+}: FormProps & { methods: UseFormReturn<FieldValues> }) => (
+  <form
+    id={id}
+    autoComplete={autoComplete}
+    name={name}
+    onSubmit={(data: FormEvent<HTMLFormElement>) => handleFormSubmit(data, methods, onSubmit)}
+    noValidate
+    style={props.style}
+    className={props.className}
+  >
+    {children}
+  </form>
+)
+
+const FormWithProvider = (props: FormProps) => {
+  const methods = useForm({ defaultValues: props.defaultValues })
+  const form = props.form || methods
+
+  return (
+    <FormProvider {...form}>
+      <BasicForm {...props} methods={form} />
+    </FormProvider>
+  )
+}
+
+export const Form = (props: FormProps) => {
+  const useFormMethods = useFormContext()
+  const hasFormProvider = !!useFormMethods
+
+  if (hasFormProvider) {
+    return <BasicForm {...props} methods={useFormMethods} />
+  }
+
+  return <FormWithProvider {...props} />
+}
+

package/src/components/form/Form/FormGroup.tsx

@@ -0,0 +1,221 @@
+import { Box, Flex, IconBox, Input, Label } from '@citric/core'
+import { SxProperties } from '@citric/core/dist/sx'
+import { InfoCircle, TimesCircle } from '@citric/icons'
+import { FieldAddon, FieldGroup, FormHelper, FormItem, Tooltip } from '@citric/ui'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { debounce, get } from 'lodash'
+import { ChangeEvent, ComponentProps, ComponentPropsWithoutRef, ElementType, ReactElement, ReactNode, useEffect } from 'react'
+import { FieldPath, FieldValues, RegisterOptions, useFormContext, UseFormRegister, UseFormRegisterReturn, UseFormTrigger } from 'react-hook-form'
+
+const registerFieldWithDebounceChangeValidation = <T extends FieldValues>(
+  name: FieldPath<T>,
+  delay: number,
+  trigger: UseFormTrigger<T>,
+  register: UseFormRegister<T>,
+  options?: RegisterOptions<T, FieldPath<T>>,
+) => {
+  const useFormRegisterReturn: UseFormRegisterReturn = register(name, options)
+  const { onChange } = useFormRegisterReturn
+  const debouncedValidate = debounce(() => {
+    trigger(name)
+  }, delay)
+
+  const debouncedChange = debounce((event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>) => {
+    onChange?.(event)
+  }, delay)
+  return {
+    ...useFormRegisterReturn,
+    onChange: (e: any) => {
+      debouncedChange(e)
+      debouncedValidate()
+    },
+  }
+}
+
+interface FormGroupProps<T extends ElementType> {
+  fieldAddonAfter?: ReactNode,
+  fieldAddonBefore?: ReactNode,
+  formHelper?: ReactNode,
+  name: string,
+  id?: string,
+  component?: T,
+  label?: string | ReactElement,
+  registerOptions?: RegisterOptions,
+  formItemSx?: SxProperties,
+  formGroupSx?: SxProperties,
+  componentSx?: SxProperties,
+  fieldAddonBeforeSx?: SxProperties,
+  fieldAddonAfterSx?: SxProperties,
+  $formName?: string,
+  required?: boolean,
+  onChange?: (event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>) => void,
+  tooltipProps?: Omit<ComponentProps<typeof Tooltip>, 'children'>,
+  readOnly?: boolean,
+  disabled?: boolean,
+  // When true, input will not be registered on form
+  standalone?: boolean,
+  delay?: number,
+  // prop for tests of usability
+  hideRequiredSymbol?: boolean,
+  shouldUnregister?: boolean,
+}
+
+type Props<T extends ElementType> = FormGroupProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof FormGroupProps<T>>
+
+export const FormGroup = <T extends ElementType>({
+  fieldAddonAfter,
+  fieldAddonBefore,
+  formHelper,
+  id,
+  name,
+  component,
+  label,
+  registerOptions = {},
+  formGroupSx = {},
+  formItemSx = {},
+  componentSx = {},
+  disabled,
+  readOnly,
+  onChange,
+  tooltipProps,
+  required,
+  colorScheme: propColorScheme,
+  fieldAddonBeforeSx,
+  fieldAddonAfterSx,
+  standalone,
+  delay,
+  hideRequiredSymbol,
+  shouldUnregister = false,
+  ...props
+}: Props<T>) => {
+  const t = useTranslate(dictionary)
+  const { register, getFieldState, trigger, unregister } = useFormContext()
+  const Component = component || Input
+  const colorScheme = propColorScheme
+
+  let formRegistry = {}
+
+  if (!standalone) {
+    const options = {
+      onChange,
+      required: { message: hideRequiredSymbol ? t.requiredTest : t.required, value: !!required }, validate: (value: string) => {
+        if (required && typeof value === 'string') {
+          return !!value?.trim()
+        }
+      },
+      ...registerOptions,
+    }
+
+    formRegistry = delay ? registerFieldWithDebounceChangeValidation(name, delay, trigger, register, options) : register(name, options)
+  }
+
+  useEffect(() => () => {
+    shouldUnregister && unregister(name)
+  }, [name, unregister])
+
+  return (
+    <FormItem sx={formItemSx}>
+      {label && (
+        <Flex>
+          <Label appearance="body2" htmlFor={id || name} sx={{ pointerEvents: disabled || readOnly ? 'none' : undefined }}>
+            {label}
+            &nbsp;
+            {required && !hideRequiredSymbol && '*'}
+          </Label>
+          {tooltipProps?.text && (
+            <Tooltip {...(tooltipProps as typeof tooltipProps & { text: string })}>
+              <IconBox>
+                <InfoCircle />
+              </IconBox>
+            </Tooltip>
+          )}
+        </Flex>
+      )}
+
+      {!fieldAddonBefore && !fieldAddonAfter ? (
+        <Component
+          id={id || name}
+          disabled={disabled}
+          readOnly={readOnly}
+          {...props}
+          {...{ colorScheme }}
+          {...formRegistry}
+          required={required}
+          sx={componentSx}
+          aria-errormessage={`err${(id || name)}`}
+          aria-invalid={getFieldState(name).invalid}
+        />
+      ) : (
+        <FieldGroup sx={formGroupSx}>
+          {fieldAddonBefore && (
+            <FieldAddon sx={{ borderColor: colorScheme ? colorScheme : 'light.600', ...fieldAddonBeforeSx }}>
+              {fieldAddonBefore}
+            </FieldAddon>
+          )}
+
+          <Component
+            disabled={disabled}
+            readOnly={readOnly}
+            id={id || name}
+            {...props}
+            {...{ colorScheme }}
+            {...formRegistry}
+            required={required}
+            sx={componentSx}
+            aria-errormessage={`err${(id || name)}`}
+            aria-invalid={getFieldState(name).invalid}
+          />
+
+          {fieldAddonAfter && (
+            <FieldAddon sx={{ borderColor: colorScheme ? colorScheme : 'light.600', ...fieldAddonAfterSx }}>
+              {fieldAddonAfter}
+            </FieldAddon>
+          )}
+        </FieldGroup>
+      )}
+      <FormItemError name={name} id={id || name} />
+      {formHelper && (
+        <Box mt="2">
+          <FormHelper>{formHelper}</FormHelper>
+        </Box>
+      )}
+    </FormItem>
+  )
+}
+
+export const FormItemError = ({ name, id }: { name: string, id: string }) => {
+  const t = useTranslate(dictionary)
+  const { formState } = useFormContext()
+  const formItemError = get(formState.errors, name)
+
+  if (formItemError) {
+    return (
+      <Flex alignItems="center" flexWrap="nowrap">
+        <IconBox size="xs" appearance="circle" colorIcon="danger" colorBg="danger.500">
+          <TimesCircle />
+        </IconBox>
+        <Box ml="3">
+          <FormHelper colorScheme="danger" aria-live="assertive" id={`err${id}`}>
+            {formItemError.message?.toString() || formItemError?.root?.message?.toString() || t.invalidGenericError}
+          </FormHelper>
+        </Box>
+      </Flex>
+    )
+  }
+  return null
+}
+
+const dictionary = {
+  en: {
+    invalidGenericError: 'Invalid field',
+    required: 'Required field',
+    // text for tests of usability
+    requiredTest: 'Fill in the required field to continue.',
+  },
+  pt: {
+    invalidGenericError: 'Campo inválido',
+    required: 'Campo obrigatório',
+    // text for tests of usability
+    requiredTest: 'Preencha este campo obrigatório para continuar.',
+  },
+} satisfies Dictionary

package/src/components/form/Form/index.ts

@@ -0,0 +1,2 @@
+export { FormGroup } from './FormGroup'
+export { Form } from './Form'

package/src/components/form/SearchInput.tsx

@@ -0,0 +1,72 @@
+import { Box, IconBox } from '@citric/core'
+import { Input } from '@stack-spot/citric-react'
+import { Filter, Times } from '@citric/icons'
+import { FieldAddon, FieldGroup, IconButton } from '@citric/ui'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { debounce } from 'lodash'
+import { useCallback, useState } from 'react'
+
+export const SearchInput = ({
+  searchText,
+  defaultValue,
+  disabled = false,
+  onChange,
+  style,
+  className,
+}: {
+  searchText: string,
+  defaultValue?: string,
+  disabled?: boolean,
+  onChange: (value?: string) => void,
+  style?: React.CSSProperties,
+  className?: string,
+}) => {
+  const [value, setValue] = useState(defaultValue)
+  const t = useTranslate(dictionary)
+  const debouncedOnChange = useCallback(
+    debounce((nextValue?: string) => onChange(nextValue), 800),
+    [onChange],
+  )
+  const handleInputOnChange = (nextValue: string) => {
+    setValue(nextValue)
+    debouncedOnChange(nextValue)
+  }
+
+  return (
+    <Box sx={{ position: 'relative' }} style={style} className={className}>
+      <FieldGroup>
+        <FieldAddon>
+          <IconBox size="xs" colorIcon="light.700">
+            <Filter />
+          </IconBox>
+        </FieldAddon>
+        <Input
+          style={{ width: '100%' }}
+          value={value}
+          placeholder={searchText}
+          onChange={handleInputOnChange}
+          disabled={disabled}
+          maxLength={255}
+        />
+      </FieldGroup>
+      {!!value && (
+        <IconButton
+          sx={{ position: 'absolute', right: '20px', top: '50%', transform: 'translate(50%, -50%)' }}
+          onClick={() => handleInputOnChange('')}
+          aria-label={t.ariaClearField}
+        >
+          <Times />
+        </IconButton>
+      )}
+    </Box>
+  )
+}
+
+const dictionary = {
+  en: {
+    ariaClearField: 'Clear field',
+  },
+  pt: {
+    ariaClearField: 'Limpar campo',
+  },
+} satisfies Dictionary