@stack-spot/portal-components 2.26.0 → 2.27.0

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

@@ -1,101 +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} />
-}
-
+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

@@ -1,221 +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
+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

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