@toptal/picasso-forms 6.0.5 → 7.1.0

package/src/Form/Form.tsx

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

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

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

@@ -1,61 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Form renders 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <div
-      class=""
-    >
-      <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>
-`;

package/src/Form/index.ts

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

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

@@ -1,139 +0,0 @@
-import React, { useCallback } from 'react'
-import { Container } from '@toptal/picasso'
-import { Form } from '@toptal/picasso-forms'
-
-const BackendCommunicationExample = () => {
-  const handleSuccessSubmit = useCallback(
-    (values: any) => api.successSubmit(values),
-    []
-  )
-  const handleSubmitWithInlineError = useCallback(
-    (values: any) => api.submitWithInlineError(values),
-    []
-  )
-  const handleSubmitWithCustomNotificationError = useCallback(
-    (values: any) => api.submitWithCustomNotificationError(values),
-    []
-  )
-
-  return (
-    <Container
-      style={{
-        display: 'grid',
-        gap: '2rem',
-        gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))'
-      }}
-    >
-      <Form
-        onSubmit={handleSuccessSubmit}
-        successSubmitMessage='Login successful!'
-      >
-        <Form.Input
-          required
-          name='successName'
-          label='First name'
-          placeholder='e.g. Bruce'
-          width='full'
-        />
-        <Form.Input
-          required
-          name='successSurname'
-          label='Last name'
-          placeholder='e.g. Wayne'
-          width='full'
-        />
-
-        <Container top='small'>
-          <Form.SubmitButton
-            variant='positive'
-            data-testid='success-submit-button'
-          >
-            Login Success
-          </Form.SubmitButton>
-        </Container>
-      </Form>
-
-      <Form
-        onSubmit={handleSubmitWithInlineError}
-        failedSubmitMessage='Login failed! Please try another combination of first and last names.'
-      >
-        <Form.Input
-          required
-          name='inlineErrorName'
-          label='First name'
-          placeholder='e.g. Bruce'
-          width='full'
-        />
-        <Form.Input
-          required
-          name='inlineErrorSurname'
-          label='Last name'
-          placeholder='e.g. Wayne'
-          width='full'
-        />
-
-        <Container top='small'>
-          <Form.SubmitButton
-            variant='negative'
-            data-testid='submit-with-inline-error-button'
-          >
-            Login with Inline Error
-          </Form.SubmitButton>
-        </Container>
-      </Form>
-
-      <Form onSubmit={handleSubmitWithCustomNotificationError}>
-        <Form.Input
-          required
-          name='customNotificationErrorName'
-          label='First name'
-          placeholder='e.g. Bruce'
-          width='full'
-        />
-        <Form.Input
-          required
-          name='customNotificationErrorSurname'
-          label='Last name'
-          placeholder='e.g. Wayne'
-          width='full'
-        />
-
-        <Container top='small'>
-          <Form.SubmitButton
-            variant='negative'
-            data-testid='submit-with-custom-notification-button'
-          >
-            Login with Custom Notification Error
-          </Form.SubmitButton>
-        </Container>
-      </Form>
-    </Container>
-  )
-}
-
-// the emulation of the api call
-const responseWithDelay = async (response: any) =>
-  new Promise(resolve => setTimeout(() => resolve(response), 2000))
-
-const api = {
-  successSubmit: (values: any) => {
-    // do something with received values
-    console.log('Success submit. Form values:', values)
-
-    return responseWithDelay(undefined)
-  },
-  submitWithInlineError: (values: any) => {
-    console.log('Submit with Inline Errors. Form values:', values)
-
-    return responseWithDelay({
-      inlineErrorName: 'Unknown first name'
-    })
-  },
-  submitWithCustomNotificationError: (values: any) => {
-    console.log('Submit with Custom Notification Errors. Form values:', values)
-
-    return responseWithDelay('Custom Notification Message!')
-  }
-}
-
-export default BackendCommunicationExample

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

@@ -1,26 +0,0 @@
-import React from 'react'
-import { Container } from '@toptal/picasso'
-import { Form, FormConfigProps } from '@toptal/picasso-forms'
-
-const formConfig: FormConfigProps = {
-  requiredVariant: 'asterisk'
-}
-
-const Example = () => (
-  <Form.ConfigProvider value={formConfig}>
-    <Form onSubmit={() => {}}>
-      <Form.Input
-        required
-        name='formConfig.firstName'
-        label='First name'
-        placeholder='e.g. Bruce'
-      />
-
-      <Container top='small'>
-        <Form.SubmitButton>Submit</Form.SubmitButton>
-      </Container>
-    </Form>
-  </Form.ConfigProvider>
-)
-
-export default Example

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

@@ -1,45 +0,0 @@
-import React from 'react'
-import { Container } from '@toptal/picasso'
-import { Form } from '@toptal/picasso-forms'
-
-const minMaxValidator = (value?: string | number) => {
-  if (value === undefined) {
-    return undefined
-  }
-
-  const number = Number(value)
-
-  if (number < 0) {
-    return "Age can't be negative"
-  }
-
-  if (number > 120) {
-    return "Age can't have value more than 120 years"
-  }
-
-  return undefined
-}
-
-const CustomValidatorExample = () => (
-  <Form onSubmit={values => window.alert(values)}>
-    <Form.Input
-      required
-      name='userName'
-      label='First name'
-      placeholder='e.g. Bruce'
-    />
-    <Form.NumberInput
-      required
-      validate={minMaxValidator}
-      name='userAge'
-      label="What's your age?"
-      placeholder='e.g. 25'
-    />
-
-    <Container top='small'>
-      <Form.SubmitButton>Submit</Form.SubmitButton>
-    </Container>
-  </Form>
-)
-
-export default CustomValidatorExample

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

@@ -1,177 +0,0 @@
-import React, { useState } from 'react'
-import { Container } from '@toptal/picasso'
-import { Item } from '@toptal/picasso/Autocomplete'
-import { isSubstring } from '@toptal/picasso/utils'
-import { Form } from '@toptal/picasso-forms'
-
-const countries = [
-  { value: 'Afghanistan', text: 'Afghanistan' },
-  { value: 'Albania', text: 'Albania' },
-  { value: 'Algeria', text: 'Algeria' },
-  { value: 'Belarus', text: 'Belarus' },
-  { value: 'Croatia', text: 'Croatia' },
-  { value: 'Lithuania', text: 'Lithuania' },
-  { value: 'Slovakia', text: 'Slovakia' },
-  { value: 'Spain', text: 'Spain' },
-  { value: 'Ukraine', text: 'Ukraine' }
-]
-
-const skills = [
-  { value: 0, text: 'HTML' },
-  { value: 1, text: 'CSS' },
-  { value: 2, text: 'Javascript' }
-]
-
-const EMPTY_INPUT_VALUE = ''
-const getAutocompleteDisplayValue = (item: Item | null) =>
-  item?.text || EMPTY_INPUT_VALUE
-
-const filterOptions = (str = '', options: Item[] = []): Item[] | null => {
-  if (!str) {
-    return options
-  }
-  const result = options.filter(option =>
-    option?.text ? isSubstring(str, option.text) : false
-  )
-
-  return result.length > 0 ? result : null
-}
-
-const Example = () => {
-  const [skillInputValue, setSkillInputValue] = useState<string>(
-    EMPTY_INPUT_VALUE
-  )
-  const skillOptions = filterOptions(skillInputValue, skills)
-
-  const [autocompleteValue, setAutocompleteValue] = useState<string>(
-    EMPTY_INPUT_VALUE
-  )
-  const [autocompleteOptions, setAutocompleteOptions] = useState<Item[] | null>(
-    countries
-  )
-
-  return (
-    <Form
-      autoComplete='off'
-      onSubmit={values => window.alert(values)}
-      initialValues={{ gender: 'female' }}
-    >
-      <Form.Input
-        enableReset
-        onResetClick={(set: (value: string) => void) => {
-          set('')
-        }}
-        required
-        name='firstName'
-        label='First name'
-        placeholder='e.g. Bruce'
-      />
-      <Form.Input
-        required
-        name='lastName'
-        label='Last name'
-        placeholder='e.g. Wayne'
-      />
-      <Form.NumberInput
-        enableReset
-        required
-        name='age'
-        label="What's your age?"
-        placeholder='e.g. 25'
-      />
-      <Form.RadioGroup name='gender' label='Gender'>
-        <Form.Radio label='Male' value='male' />
-        <Form.Radio label='Female' value='female' />
-      </Form.RadioGroup>
-      <Form.RadioGroup name='gender' label='Gender' horizontal spacing={8}>
-        <Form.ButtonRadio value='male'>Male</Form.ButtonRadio>
-        <Form.ButtonRadio value='female'>Female</Form.ButtonRadio>
-      </Form.RadioGroup>
-      <Form.DatePicker name='dateOfBirth' label='Date of birth' />
-      <Form.TimePicker name='timeOfBirth' label='Time of birth' />
-      <Form.TagSelector
-        name='skills'
-        label='Skills'
-        inputValue={skillInputValue}
-        options={skillOptions}
-        onInputChange={setSkillInputValue}
-      />
-      <Form.CheckboxGroup name='hobbies' label='Hobbies'>
-        <Form.Checkbox label='Skiing' value='skiing' />
-        <Form.Checkbox label='Free diving' value='freeDiving' />
-        <Form.Checkbox label='Dancing' value='dancing' />
-      </Form.CheckboxGroup>
-      <Form.CheckboxGroup name='hobbies' label='Hobbies' horizontal spacing={8}>
-        <Form.ButtonCheckbox value='skiing'>Skiing</Form.ButtonCheckbox>
-        <Form.ButtonCheckbox value='freeDiving'>
-          Free diving
-        </Form.ButtonCheckbox>
-        <Form.ButtonCheckbox value='dancing'>Dancing</Form.ButtonCheckbox>
-      </Form.CheckboxGroup>
-      <Form.Select
-        enableReset
-        required
-        name='businessType'
-        label='Business type'
-        width='auto'
-        options={[
-          { value: 0, text: 'Company' },
-          { value: 1, text: 'Individual' }
-        ]}
-      />
-      <Form.Select
-        name='origin_country'
-        label='Origin country'
-        width='auto'
-        options={countries}
-      />
-      <Form.Autocomplete
-        name='current_country'
-        label='Current country'
-        placeholder='Start typing country...'
-        width='auto'
-        value={autocompleteValue}
-        options={autocompleteOptions}
-        onSelect={(item: Item) => {
-          console.log('onSelect returns item object:', item)
-
-          const itemValue = getAutocompleteDisplayValue(item)
-
-          if (autocompleteValue !== itemValue) {
-            setAutocompleteValue(itemValue)
-          }
-        }}
-        onChange={(newValue: string) => {
-          console.log('onChange returns just item value:', newValue)
-
-          setAutocompleteOptions(filterOptions(newValue, countries))
-          setAutocompleteValue(newValue)
-        }}
-        getDisplayValue={getAutocompleteDisplayValue}
-      />
-      <Form.Rating
-        name='rating'
-        label='How much do you love Picasso?'
-        required
-      />
-      <Form.FileInput
-        required
-        name='avatar'
-        label='Avatar'
-        status='No file selected.'
-      />
-      <Form.Checkbox
-        required
-        name='legal'
-        label='I confirm that I have legal permission from the client to feature this project.'
-      />
-      <Form.Switch name='publicProfile' label='Public Profile' width='auto' />
-
-      <Container top='small'>
-        <Form.SubmitButton>Submit</Form.SubmitButton>
-      </Container>
-    </Form>
-  )
-}
-
-export default Example