@toptal/picasso-forms 66.3.2 → 67.0.0

package/src/Form/Form.tsx

@@ -0,0 +1,161 @@
+import type { ReactNode } from 'react'
+import React, { useMemo, useRef } from 'react'
+import type { FormProps as FinalFormProps } from 'react-final-form'
+import { Form as FinalForm } from 'react-final-form'
+import type { FormApi, SubmissionErrors, AnyObject } from 'final-form'
+import { getIn, setIn } from 'final-form'
+import { useNotifications } from '@toptal/picasso-notification'
+
+import { createScrollToErrorDecorator } from '../utils'
+import type { Validators, FormContextProps } from './FormContext'
+import { FormContext, createFormContext } from './FormContext'
+import type { Props as FormProps } from './FormRenderer'
+import FormRenderer from './FormRenderer'
+import { setActiveFieldTouched, setHasMultilineCounter } from './mutators'
+
+export type Props<T = AnyObject> = FinalFormProps<T> & {
+  disableScrollOnError?: boolean
+  autoComplete?: HTMLFormElement['autocomplete']
+  successSubmitMessage?: ReactNode
+  failedSubmitMessage?: ReactNode
+  scrollOffsetTop?: number
+  layout?: 'horizontal' | 'vertical'
+  labelWidth?: FormProps['labelWidth']
+  '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 AnyObject = AnyObject>(props: Props<T>) => {
+  const {
+    autoComplete,
+    children,
+    disableScrollOnError,
+    onSubmit,
+    successSubmitMessage,
+    failedSubmitMessage,
+    decorators = [],
+    mutators = {},
+    validateOnBlur,
+    'data-testid': dataTestId,
+    layout,
+    labelWidth,
+    ...rest
+  } = props
+  const { showSuccess, showError } = useNotifications()
+  const scrollToErrorDecorator = useMemo(
+    () =>
+      createScrollToErrorDecorator({
+        disableScrollOnError,
+      }),
+    [disableScrollOnError]
+  )
+
+  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={({ form, handleSubmit: handleFormRendererSubmit }) => (
+          <FormRenderer
+            autoComplete={autoComplete}
+            data-testid={dataTestId}
+            onSubmit={handleFormRendererSubmit}
+            validateOnBlur={validateOnBlur}
+            setActiveFieldTouched={form.mutators.setActiveFieldTouched}
+            labelWidth={labelWidth}
+            layout={layout}
+          >
+            {children}
+          </FormRenderer>
+        )}
+        onSubmit={handleSubmit}
+        decorators={[...decorators, scrollToErrorDecorator]}
+        mutators={{
+          ...mutators,
+          setActiveFieldTouched,
+          setHasMultilineCounter,
+        }}
+        validateOnBlur={validateOnBlur}
+        {...rest}
+      />
+    </FormContext.Provider>
+  )
+}
+
+Form.defaultProps = {}
+
+Form.displayName = 'Form'
+
+export default Form

package/src/Form/FormContext.ts

@@ -0,0 +1,38 @@
+import type { MutableRefObject } from 'react'
+import { createContext, useContext } from 'react'
+import type { FieldValidator } from 'final-form'
+
+export type Validators = Record<string, FieldValidator<any>>
+
+export type FormContextProps = {
+  getValidators: () => Validators
+  setValidators: (fieldName: string, validator: FieldValidator<any>) => 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
+}

package/src/Form/FormRenderer.tsx

@@ -0,0 +1,38 @@
+import React, { useCallback } from 'react'
+import type { FormProps } from '@toptal/picasso'
+import { Form, Container } from '@toptal/picasso'
+
+export interface Props extends FormProps {
+  setActiveFieldTouched: () => void
+  validateOnBlur?: boolean
+}
+export const FormRenderer = (props: Props) => {
+  const { onSubmit, setActiveFieldTouched, children, validateOnBlur, ...rest } =
+    props
+
+  const handleNativeSubmit = useCallback(
+    (event: React.SyntheticEvent<HTMLFormElement>) => {
+      if (validateOnBlur) {
+        // force validation for active field
+        setActiveFieldTouched()
+      }
+
+      onSubmit?.(event)
+    },
+    [onSubmit, setActiveFieldTouched, validateOnBlur]
+  )
+
+  return (
+    <Container>
+      <Form {...rest} onSubmit={handleNativeSubmit}>
+        {children}
+      </Form>
+    </Container>
+  )
+}
+
+FormRenderer.defaultProps = {}
+
+FormRenderer.displayName = 'FormRenderer'
+
+export default FormRenderer

package/src/Form/__snapshots__/test.tsx.snap

@@ -0,0 +1,140 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form renders 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class=""
+    >
+      <form
+        class=""
+        data-testid="form"
+      >
+        <div
+          class="PicassoFormField-root"
+          data-field-has-error="false"
+        >
+          <div
+            class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium MuiInputBase-adornedStart MuiOutlinedInput-adornedStart MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
+          >
+            <input
+              aria-invalid="false"
+              autocomplete="none"
+              class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoOutlinedInput-inputMedium MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
+              id="test"
+              name="test"
+              placeholder="test input"
+              type="text"
+              value=""
+            />
+            <fieldset
+              aria-hidden="true"
+              class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline PicassoOutlinedInput-notchedOutline"
+              style="padding-left: 8px;"
+            >
+              <legend
+                class="PrivateNotchedOutline-legend"
+                style="width: 0.01px;"
+              >
+                <span>
+                  ​
+                </span>
+              </legend>
+            </fieldset>
+          </div>
+        </div>
+        <button
+          class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root"
+          data-component-type="button"
+          tabindex="0"
+          type="submit"
+        >
+          <span
+            class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+          >
+            Submit
+          </span>
+        </button>
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Form renders with an error 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class=""
+    >
+      <form
+        class=""
+        data-testid="form"
+      >
+        <div
+          class="PicassoFormField-root"
+          data-field-has-error="true"
+        >
+          <div
+            class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium Mui-error Mui-error MuiInputBase-adornedStart MuiOutlinedInput-adornedStart MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
+          >
+            <input
+              aria-invalid="true"
+              autocomplete="none"
+              class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoOutlinedInput-inputMedium MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
+              id="test"
+              name="test"
+              placeholder="test input"
+              type="text"
+              value=""
+            />
+            <fieldset
+              aria-hidden="true"
+              class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline PicassoOutlinedInput-notchedOutline"
+              style="padding-left: 8px;"
+            >
+              <legend
+                class="PrivateNotchedOutline-legend"
+                style="width: 0.01px;"
+              >
+                <span>
+                  ​
+                </span>
+              </legend>
+            </fieldset>
+          </div>
+          <div
+            class=""
+          >
+            <div
+              class="PicassoFormError-root PicassoFormField-error"
+            >
+              <p
+                class="MuiTypography-root PicassoTypography-bodyXxsmall PicassoTypography-red PicassoFormError-error MuiTypography-body1"
+              >
+                Please complete this field.
+              </p>
+            </div>
+          </div>
+        </div>
+        <button
+          class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root"
+          data-component-type="button"
+          tabindex="0"
+          type="submit"
+        >
+          <span
+            class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+          >
+            Submit
+          </span>
+        </button>
+      </form>
+    </div>
+  </div>
+</div>
+`;

package/src/Form/index.ts

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

package/src/Form/mutators/index.ts

@@ -0,0 +1,2 @@
+export * from './set-active-field-touched'
+export * from './set-has-multiline-counter'

package/src/Form/mutators/set-active-field-touched.ts

@@ -0,0 +1,16 @@
+import type { MutableState } from 'final-form'
+
+export const setActiveFieldTouched = <
+  FormValues = object,
+  InitialFormValues = Partial<FormValues>
+>(
+  _: any[],
+  state: MutableState<FormValues, InitialFormValues>
+) => {
+  const activeFieldName = state.formState.active
+  const field = activeFieldName && state.fields[activeFieldName]
+
+  if (field) {
+    field.touched = true
+  }
+}

package/src/Form/mutators/set-has-multiline-counter.ts

@@ -0,0 +1,16 @@
+import type { MutableState } from 'final-form'
+
+export const setHasMultilineCounter = <
+  FormValues = object,
+  InitialFormValues = Partial<FormValues>
+>(
+  args: [name: string, hasCounter: boolean],
+  state: MutableState<FormValues, InitialFormValues>
+) => {
+  const [name, hasCounter] = args
+  const field = state.fields[name]
+
+  if (field) {
+    field.data = { ...field.data, hasMultilineCounter: hasCounter }
+  }
+}

package/src/Form/story/AutoSave.example.tsx

@@ -0,0 +1,120 @@
+import React, { useCallback, useState } from 'react'
+import { Container, FormAutoSaveIndicator, Typography } from '@toptal/picasso'
+import { SPACING_6, SPACING_4 } from '@toptal/picasso-utils'
+import type { ChangedFields } from '@toptal/picasso-forms'
+import {
+  FormNonCompound as Form,
+  useFormAutoSave,
+  Input,
+  RichTextEditor,
+  SubmitButton,
+} from '@toptal/picasso-forms'
+
+// the emulation of the api call
+const saveWithDelay = async () =>
+  new Promise(resolve => setTimeout(() => resolve('success'), 2000))
+
+interface FormData {
+  'autoSave-firstName'?: string
+  'autoSave-lastName'?: string
+  'autoSave-about'?: string
+  'autoSave-bio'?: string
+}
+
+const autoSaveSubscribedFields: (keyof FormData)[] = [
+  'autoSave-about',
+  'autoSave-bio',
+]
+
+const Example = () => {
+  const [autoSaveValues, setAutoSaveValues] = useState<FormData>({
+    'autoSave-firstName': undefined,
+    'autoSave-lastName': undefined,
+    'autoSave-about': undefined,
+    'autoSave-bio': undefined,
+  })
+
+  const handleFormValuesChange = useCallback(
+    async (changedFields: ChangedFields<FormData>, values: FormData) => {
+      await saveWithDelay()
+
+      setAutoSaveValues(values)
+    },
+    []
+  )
+
+  const { autoSaveDecorator, savingFields } = useFormAutoSave({
+    subscribedFields: autoSaveSubscribedFields,
+    onFormValuesChange: handleFormValuesChange,
+  })
+
+  return (
+    <Form<FormData>
+      onSubmit={values => window.alert(JSON.stringify(values, undefined, 2))}
+      decorators={[autoSaveDecorator]}
+    >
+      <Container flex direction='row' gap={SPACING_6}>
+        <Container>
+          <Input
+            required
+            name='autoSave-firstName'
+            label='First name'
+            placeholder='e.g. Bruce'
+          />
+          <Input
+            required
+            name='autoSave-lastName'
+            label='Last name'
+            placeholder='e.g. Wayne'
+          />
+          <Input
+            required
+            name='autoSave-about'
+            multiline
+            limit={100}
+            rows={5}
+            label='About'
+            hint='Tell us about yourself'
+            placeholder='Please tell us about yourself'
+            autoSaveIndicator={
+              <FormAutoSaveIndicator
+                saving={savingFields?.['autoSave-about']}
+              />
+            }
+          />
+          <RichTextEditor
+            id='autoSave-rich-text-editor'
+            label='Bio'
+            required
+            name='autoSave-bio'
+            hint='Write a short bio'
+            placeholder='Write a short bio'
+            minLength={5}
+            maxLength={25}
+            autoSaveIndicator={
+              <FormAutoSaveIndicator saving={savingFields?.['autoSave-bio']} />
+            }
+          />
+        </Container>
+        <Container variant='grey' padded={SPACING_6}>
+          <Typography size='small'>
+            Values should be updated only after subscribed fields changes.
+          </Typography>
+          <pre style={{ width: 500 }}>
+            Saved values: {JSON.stringify(autoSaveValues, undefined, 2)}
+          </pre>
+          {(savingFields?.['autoSave-bio'] ||
+            savingFields?.['autoSave-about']) && (
+            <Typography size='medium'>Saving...</Typography>
+          )}
+        </Container>
+      </Container>
+
+      <Container top={SPACING_4}>
+        <SubmitButton>Submit</SubmitButton>
+      </Container>
+    </Form>
+  )
+}
+
+export default Example

package/src/Form/story/AvatarUpload.example.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react'
+import type {
+  AvatarUploadFileUpload,
+  AvatarUploadFileRejection,
+} from '@toptal/picasso'
+import { SPACING_4 } from '@toptal/picasso-utils'
+import { Container } from '@toptal/picasso'
+import {
+  FormNonCompound as Form,
+  useForm,
+  AvatarUpload,
+  SubmitButton,
+} from '@toptal/picasso-forms'
+
+type FormType = {
+  avatarUpload: AvatarUploadFileUpload
+}
+
+const FormRenderer = () => {
+  const { change } = useForm()
+  const [uploading, setUploading] = useState<boolean>(false)
+
+  const handleDrop = (
+    acceptedFile: File | null,
+    fileRejection: AvatarUploadFileRejection | null
+  ) => {
+    if (acceptedFile) {
+      // simulate upload with external upload service
+      const reader = new FileReader()
+
+      reader.readAsDataURL(acceptedFile)
+
+      reader.onload = () => {
+        setUploading(true)
+
+        setTimeout(() => {
+          setUploading(false)
+
+          // set result of upload to form
+          change('avatarUpload', { src: reader.result as string })
+        }, 1000)
+      }
+
+      reader.onerror = error => {
+        console.log('Error: upload failed, ', error)
+      }
+    } else if (fileRejection) {
+      // file rejected
+      console.log(fileRejection.errors.join(', '))
+    }
+  }
+
+  return (
+    <>
+      <AvatarUpload
+        required
+        name='avatarUpload'
+        onDrop={handleDrop}
+        uploading={uploading}
+      />
+
+      <Container top={SPACING_4}>
+        <SubmitButton>Submit</SubmitButton>
+      </Container>
+    </>
+  )
+}
+
+const Example = () => {
+  const handleSubmit = ({ avatarUpload }: FormType) => {
+    window.alert(`src: ${avatarUpload.src}`)
+  }
+
+  return (
+    <Form<FormType> autoComplete='off' onSubmit={handleSubmit}>
+      <FormRenderer />
+    </Form>
+  )
+}
+
+export default Example