@toptal/picasso-forms 6.0.4 → 6.0.5

package/src/FieldWrapper/FieldWrapper.tsx

@@ -0,0 +1,287 @@
+import React, { ChangeEvent, FocusEvent, useCallback, useEffect } from 'react'
+import {
+  useField,
+  FieldProps as FinalFieldProps,
+  FieldMetaState,
+  FieldRenderProps
+} from 'react-final-form'
+import { Form as PicassoForm, RequiredDecoration } from '@toptal/picasso'
+import { Item } from '@toptal/picasso/Autocomplete'
+import { FileUpload } from '@toptal/picasso/FileInput'
+import { DateOrDateRangeType } from '@toptal/picasso-lab'
+import { TextLabelProps } from '@toptal/picasso-shared'
+
+import { useFormContext } from '../Form/FormContext'
+import { useFormConfig, FormConfigProps, RequiredVariant } from '../FormConfig'
+import { validators } from '../utils'
+
+const { composeValidators, required: requiredValidator } = validators
+
+type ValueType =
+  | string
+  | string[]
+  | number
+  | boolean
+  | null
+  | undefined
+  | FileUpload[]
+  | DateOrDateRangeType
+  | Item
+  | Item[]
+
+export type FieldProps<TInputValue> = FinalFieldProps<
+  TInputValue,
+  FieldRenderProps<TInputValue, HTMLInputElement>,
+  HTMLInputElement
+> &
+  TextLabelProps
+
+export type Props<
+  TInputValue,
+  TWrappedComponentProps
+> = TWrappedComponentProps &
+  FieldProps<TInputValue> &
+  TextLabelProps & {
+    name: string
+    type?: string
+    hideFieldLabel?: boolean
+    hideLabelRequiredDecoration?: boolean
+    fieldType?: string
+    children: (props: any) => React.ReactNode
+  }
+
+type FieldMeta<T> = FieldMetaState<T> & {
+  dirtyAfterBlur?: boolean
+}
+
+const getInputError = <T extends ValueType>(
+  meta: FieldMeta<T>,
+  formConfig: FormConfigProps
+) => {
+  if (formConfig.validateOnSubmit && meta.modifiedSinceLastSubmit) {
+    return null
+  }
+
+  if (!meta.error && !meta.submitError) {
+    return null
+  }
+
+  if (!meta.touched) {
+    return null
+  }
+
+  if (meta.error) {
+    return meta.error
+  }
+
+  if (meta.dirtySinceLastSubmit) {
+    return null
+  }
+
+  return meta.submitError
+}
+
+const getValidators = (required: boolean, validate?: any) => {
+  if (required && validate) {
+    return composeValidators([requiredValidator, validate])
+  }
+
+  if (required && !validate) {
+    return requiredValidator
+  }
+
+  return validate
+}
+
+const getProps = ({
+  hideFieldLabel,
+  error,
+  label
+}: {
+  hideFieldLabel?: boolean
+  error: string
+  label: string
+}) => {
+  if (hideFieldLabel) {
+    return {
+      label
+    }
+  }
+
+  return {
+    error: Boolean(error)
+  }
+}
+
+const getRequiredDecoration = (
+  hideLabelRequiredDecoration?: boolean,
+  required?: boolean,
+  requiredVariant?: RequiredVariant
+): RequiredDecoration | undefined => {
+  if (hideLabelRequiredDecoration) {
+    return
+  }
+
+  const showAsterisk = required && requiredVariant === 'asterisk'
+
+  if (showAsterisk) {
+    return 'asterisk'
+  }
+
+  const showOptional =
+    !required && (!requiredVariant || requiredVariant === 'default')
+
+  if (showOptional) {
+    return 'optional'
+  }
+}
+
+const FieldWrapper = <
+  TWrappedComponentProps extends { value?: ValueType },
+  TInputValue extends ValueType = TWrappedComponentProps['value']
+>(
+  props: Props<TInputValue, TWrappedComponentProps>
+) => {
+  const {
+    type,
+    hideFieldLabel,
+    hideLabelRequiredDecoration,
+    hint,
+    label,
+    required,
+    enableReset,
+    onResetClick,
+    'data-testid': dataTestId,
+    // FieldProps - https://final-form.org/docs/react-final-form/types/FieldProps
+    afterSubmit,
+    allowNull,
+    beforeSubmit,
+    children,
+    data,
+    defaultValue,
+    format,
+    formatOnBlur,
+    initialValue,
+    isEqual,
+    name,
+    id = name,
+    parse,
+    subscription,
+    validate,
+    validateFields,
+    value,
+    titleCase,
+    //
+    ...rest
+  } = props
+
+  const formConfig = useFormConfig()
+  const { setValidators, clearValidators } = useFormContext()
+  const validators = getValidators(required, validate)
+
+  if (formConfig.validateOnSubmit) {
+    setValidators(name, validators)
+  }
+
+  useEffect(() => {
+    return () => {
+      if (formConfig.validateOnSubmit) {
+        clearValidators(name)
+      }
+    }
+  }, [clearValidators, formConfig.validateOnSubmit, name])
+
+  const { meta, input } = useField<TInputValue>(name, {
+    validate: formConfig.validateOnSubmit ? undefined : validators,
+    type,
+    afterSubmit,
+    allowNull,
+    beforeSubmit,
+    data,
+    defaultValue,
+    format,
+    formatOnBlur,
+    initialValue,
+    isEqual,
+    parse,
+    subscription,
+    validateFields,
+    value
+  })
+
+  const defaultResetClickHandler = useCallback(() => {
+    input.onChange('')
+  }, [input])
+
+  const resetClickHandler = useCallback(() => {
+    onResetClick((resetValue: string) => {
+      input.onChange(resetValue)
+    })
+  }, [input, onResetClick])
+
+  const error = getInputError<TInputValue>(meta, formConfig)
+
+  const childProps: Record<string, unknown> = {
+    id,
+    ...rest,
+    ...input,
+    ...getProps({ hideFieldLabel, error, label }),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onChange: (event: ChangeEvent<HTMLElement> | any) => {
+      input.onChange(event)
+
+      if (rest.onChange) {
+        rest.onChange(event)
+      }
+    },
+    onBlur: (event: FocusEvent<HTMLElement>) => {
+      input.onBlur(event)
+
+      if (rest.onBlur) {
+        rest.onBlur(event)
+      }
+    },
+    onFocus: (event: FocusEvent<HTMLElement>) => {
+      input.onFocus(event)
+
+      if (rest.onFocus) {
+        rest.onFocus(event)
+      }
+    }
+  }
+
+  if (enableReset) {
+    childProps.onResetClick = onResetClick
+      ? resetClickHandler
+      : defaultResetClickHandler
+    childProps.enableReset = enableReset
+  }
+
+  const requiredDecoration = getRequiredDecoration(
+    hideLabelRequiredDecoration,
+    required,
+    formConfig.requiredVariant
+  )
+
+  return (
+    <PicassoForm.Field error={error} hint={hint} data-testid={dataTestId}>
+      {!hideFieldLabel && label && (
+        <PicassoForm.Label
+          requiredDecoration={requiredDecoration}
+          htmlFor={id}
+          disabled={rest.disabled}
+          titleCase={titleCase}
+        >
+          {label}
+        </PicassoForm.Label>
+      )}
+      {children(childProps)}
+    </PicassoForm.Field>
+  )
+}
+
+FieldWrapper.defaultProps = {}
+
+FieldWrapper.displayName = 'FieldWrapper'
+
+export default FieldWrapper

package/src/FieldWrapper/index.ts

@@ -0,0 +1,2 @@
+export { default } from './FieldWrapper'
+export * from './FieldWrapper'

package/src/FieldWrapper/story/index.jsx

@@ -0,0 +1,137 @@
+import FieldWrapper from '../FieldWrapper'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const componentDocs = PicassoBook.createComponentDocs(
+  FieldWrapper,
+  'Form.Field',
+  undefined,
+  {
+    name: {
+      name: 'name',
+      type: 'string',
+      description: 'The field name',
+      required: true
+    },
+    label: {
+      name: 'label',
+      type: 'string',
+      description: 'The field label text'
+    },
+    hint: {
+      name: 'hint',
+      type: 'string',
+      description: 'The hint of the field with some additional information'
+    },
+    required: {
+      name: 'required',
+      type: 'boolean',
+      description: 'Makes field to be required in the form'
+    },
+    // FieldProps - https://final-form.org/docs/react-final-form/types/FieldProps
+    afterSubmit: {
+      name: 'afterSubmit',
+      type: {
+        name: 'function',
+        description: '() => void'
+      },
+      description:
+        'A callback to notify fields after submission has completed successfully'
+    },
+    allowNull: {
+      name: 'allowNull',
+      type: 'boolean',
+      description: 'By default null value is converted to empty string',
+      defaultValue: false
+    },
+    beforeSubmit: {
+      name: 'beforeSubmit',
+      type: {
+        name: 'function',
+        description: '() => void | false'
+      },
+      description: 'A function to call just before calling onSubmit'
+    },
+    data: {
+      name: 'data',
+      type: 'object',
+      description: 'Initial state for arbitrary values to be placed by mutators'
+    },
+    defaultValue: {
+      name: 'defaultValue',
+      type: 'any',
+      description: 'Default value of the field upon creation'
+    },
+    format: {
+      name: 'format',
+      type: {
+        name: 'function',
+        description: '(value: any, name: string) => any'
+      },
+      description:
+        'A function that takes the value from the form values and the name of the field and formats the value to give to the input'
+    },
+    formatOnBlur: {
+      name: 'formatOnBlur',
+      type: 'boolean',
+      description:
+        'If true, the format function will only be called when the field is blurred. If false, format will be called on every render'
+    },
+    initialValue: {
+      name: 'initialValue',
+      type: 'any',
+      description: 'The initial value for the field'
+    },
+    isEqual: {
+      name: 'isEqual',
+      type: {
+        name: 'function',
+        description: '(a: any, b: any) => boolean'
+      },
+      description: 'A function to determine if two values are equal'
+    },
+    parse: {
+      name: 'parse',
+      type: {
+        name: 'function',
+        description: '(value: any, name: string) => any'
+      },
+      description:
+        "A function that takes the value from the input and name of the field and converts the value into the value you want stored as this field's value in the form"
+    },
+    subscription: {
+      name: 'subscription',
+      type: {
+        name: 'object',
+        description: '{ [string]: boolean }'
+      },
+      description:
+        'An object of the parts of FieldState (final-form) to subscribe to'
+    },
+    validate: {
+      name: 'validate',
+      type: {
+        name: 'function',
+        description:
+          '(value: ?any, allValues: Object, meta: ?FieldState) => ?any'
+      },
+      description:
+        'A function that takes the field value, all the values of the form and the meta data about the field and returns an error if the value is invalid, or undefined if the value is valid'
+    },
+    validateFields: {
+      name: 'validateFields',
+      type: 'string[]',
+      description: 'An array of field names to validate when this field changes'
+    },
+    // //
+    allFieldProps: {
+      name: '<all field props>',
+      type: 'any',
+      description:
+        'This component also accepts all the native props from the corresponding form component, ex. Form.Input accepts all the Picasso Input props'
+    }
+  }
+)
+
+export default {
+  componentDocs
+}

package/src/FileInput/FileInput.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { FileInput as PicassoFileInput, FileInputProps } from '@toptal/picasso'
+import { FieldInputProps as FinalFieldInputProps } from 'react-final-form'
+import { FileUpload } from '@toptal/picasso/FileInput'
+
+import FieldWrapper, { FieldProps } from '../FieldWrapper'
+
+type FinalFormOnChangeType = FinalFieldInputProps<
+  FileInputProps['value']
+>['onChange']
+
+export type Props = FileInputProps & FieldProps<FileInputProps['value']>
+
+export const FileInput = (props: Props) => {
+  const handleChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+    value: FileUpload[] | undefined = [],
+    finalFormOnChange: FinalFormOnChangeType
+  ) => {
+    if (!event.target || !event.target.files || !event.target.files.length) {
+      return null
+    }
+
+    const newFiles = Array.from(event.target.files).map(file => ({
+      file,
+      uploading: false
+    }))
+
+    finalFormOnChange([...value, ...newFiles])
+
+    // reset input
+    event.target.value = ''
+  }
+
+  const handleRemove = (
+    fileIndex: number,
+    value: FileUpload[] | undefined = [],
+    finalFormOnChange: FinalFormOnChangeType
+  ) => {
+    const updatedFiles = value.filter((_, index) => index !== fileIndex)
+
+    finalFormOnChange(updatedFiles)
+  }
+
+  return (
+    <FieldWrapper<FileInputProps, FileUpload[] | undefined> {...props}>
+      {inputProps => (
+        <PicassoFileInput
+          {...inputProps}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+            handleChange(event, inputProps.value, inputProps.onChange)
+          }}
+          onRemove={(fileName: string, index: number) => {
+            handleRemove(index, inputProps.value, inputProps.onChange)
+          }}
+        />
+      )}
+    </FieldWrapper>
+  )
+}
+
+FileInput.defaultProps = {}
+
+FileInput.displayName = 'FileInput'
+
+export default FileInput

package/src/FileInput/index.ts

@@ -0,0 +1 @@
+export { default } from './FileInput'

package/src/Form/Form.tsx

@@ -0,0 +1,181 @@
+import React, { useMemo, ReactNode, useRef } from 'react'
+import {
+  Form as FinalForm,
+  FormProps as FinalFormProps
+} from 'react-final-form'
+import { FormApi, SubmissionErrors, getIn, setIn, AnyObject } from 'final-form'
+import { Form as PicassoForm, Container } from '@toptal/picasso'
+import { useNotifications } from '@toptal/picasso/utils'
+
+import Autocomplete from '../Autocomplete'
+import Input from '../Input'
+import Select from '../Select'
+import Radio from '../Radio'
+import ButtonRadio from '../ButtonRadio'
+import RadioGroup from '../RadioGroup'
+import Checkbox from '../Checkbox'
+import ButtonCheckbox from '../ButtonCheckbox'
+import CheckboxGroup from '../CheckboxGroup'
+import NumberInput from '../NumberInput'
+import FileInput from '../FileInput'
+import DatePicker from '../DatePicker'
+import TimePicker from '../TimePicker'
+import TagSelector from '../TagSelector'
+import SubmitButton from '../SubmitButton'
+import Switch from '../Switch'
+import Rating from '../Rating'
+import { FormConfigContext } from '../FormConfig'
+import { createScrollToErrorDecorator } from '../utils'
+import {
+  FormContext,
+  Validators,
+  FormContextProps,
+  createFormContext
+} from './FormContext'
+
+export type Props<T = AnyObject> = FinalFormProps<T> & {
+  autoComplete?: HTMLFormElement['autocomplete']
+  successSubmitMessage?: ReactNode
+  failedSubmitMessage?: ReactNode
+  scrollOffsetTop?: number
+  'data-testid'?: string
+}
+
+const getValidationErrors = (
+  validators: Validators,
+  formValues: any,
+  form: FormApi<any>
+): SubmissionErrors | void => {
+  let errors: SubmissionErrors
+
+  Object.entries(validators).forEach(([key, validator]) => {
+    const fieldValue = getIn(formValues, key)
+    const fieldMetaState = form.getFieldState(key)
+
+    if (!validator) {
+      return
+    }
+
+    const error = validator(fieldValue, formValues, fieldMetaState)
+
+    if (error) {
+      errors = setIn(errors || {}, key, error)
+    }
+  })
+
+  return errors
+}
+
+export const Form = <T extends any = AnyObject>(props: Props<T>) => {
+  const {
+    children,
+    autoComplete,
+    onSubmit,
+    successSubmitMessage,
+    failedSubmitMessage,
+    decorators = [],
+    'data-testid': dataTestId,
+    ...rest
+  } = props
+  const { showSuccess, showError } = useNotifications()
+  const scrollToErrorDecorator = useMemo(
+    () => createScrollToErrorDecorator(),
+    []
+  )
+
+  const validationObject = useRef<FormContextProps>(createFormContext())
+
+  const showSuccessNotification = () => {
+    if (!successSubmitMessage) {
+      return
+    }
+
+    showSuccess(successSubmitMessage)
+  }
+
+  const showErrorNotification = (errors: SubmissionErrors) => {
+    if (typeof errors === 'string') {
+      showError(errors, undefined, { persist: true })
+
+      return
+    }
+
+    if (!failedSubmitMessage) {
+      return
+    }
+
+    showError(failedSubmitMessage, undefined, { persist: true })
+  }
+
+  const handleSubmit = async (
+    values: T,
+    form: FormApi<T>,
+    callback?: (errors?: SubmissionErrors) => void
+  ) => {
+    const validationErrors = getValidationErrors(
+      validationObject.current.getValidators(),
+      values,
+      form
+    )
+
+    if (validationErrors) {
+      return validationErrors
+    }
+
+    const submissionErrors = await onSubmit(values, form, callback)
+
+    if (!submissionErrors) {
+      showSuccessNotification()
+    } else {
+      showErrorNotification(submissionErrors)
+    }
+
+    return submissionErrors
+  }
+
+  return (
+    <FormContext.Provider value={validationObject}>
+      <FinalForm
+        render={({ handleSubmit }) => (
+          <Container>
+            <PicassoForm
+              autoComplete={autoComplete}
+              onSubmit={handleSubmit}
+              data-testid={dataTestId}
+            >
+              {children}
+            </PicassoForm>
+          </Container>
+        )}
+        onSubmit={handleSubmit}
+        decorators={[...decorators, scrollToErrorDecorator]}
+        {...rest}
+      />
+    </FormContext.Provider>
+  )
+}
+
+Form.defaultProps = {}
+
+Form.displayName = 'Form'
+
+Form.Autocomplete = Autocomplete
+Form.Input = Input
+Form.Select = Select
+Form.Radio = Radio
+Form.ButtonRadio = ButtonRadio
+Form.RadioGroup = RadioGroup
+Form.Checkbox = Checkbox
+Form.ButtonCheckbox = ButtonCheckbox
+Form.CheckboxGroup = CheckboxGroup
+Form.NumberInput = NumberInput
+Form.FileInput = FileInput
+Form.DatePicker = DatePicker
+Form.TimePicker = TimePicker
+Form.TagSelector = TagSelector
+Form.SubmitButton = SubmitButton
+Form.ConfigProvider = FormConfigContext.Provider
+Form.Switch = Switch
+Form.Rating = Rating
+
+export default Form

package/src/Form/FormContext.ts

@@ -0,0 +1,38 @@
+import { createContext, useContext, MutableRefObject } from 'react'
+import { FieldValidator } from 'final-form'
+
+export type Validators = Record<string, FieldValidator<unknown>>
+
+export type FormContextProps = {
+  getValidators: () => Validators
+  setValidators: (fieldName: string, validator: FieldValidator<unknown>) => void
+  clearValidators: (fieldName: string) => void
+}
+
+export const createFormContext = (): FormContextProps => {
+  const validators: Validators = {}
+
+  return {
+    getValidators: () => validators,
+    setValidators: (fieldName, validator) => {
+      validators[fieldName] = validator
+    },
+    clearValidators: fieldName => {
+      delete validators[fieldName]
+    }
+  }
+}
+
+export const FormContext = createContext<MutableRefObject<
+  FormContextProps
+> | null>(null)
+
+export const useFormContext = () => {
+  const context = useContext(FormContext)
+
+  if (!context) {
+    throw new Error('Form Field cannot be rendered outside Form component')
+  }
+
+  return context.current
+}