@toptal/picasso-forms 6.0.5 → 7.1.0

package/src/Checkbox/test.tsx

@@ -1,91 +0,0 @@
-import React from 'react'
-import { render } from '@toptal/picasso/test-utils'
-
-import { FormConfigProps } from '../FormConfig'
-import Form from '../Form'
-import CheckboxGroup from '../CheckboxGroup'
-import Checkbox, { Props } from './Checkbox'
-
-const renderCheckbox = (
-  { required, titleCase }: Props,
-  formConfig: FormConfigProps = {}
-) =>
-  render(
-    <Form.ConfigProvider value={formConfig}>
-      <Form onSubmit={() => {}}>
-        <Checkbox
-          name='single-checkbox'
-          label='The checkbox label'
-          value='checkbox-value'
-          data-testid='single-checkbox'
-          required={required}
-          titleCase={titleCase}
-        />
-      </Form>
-    </Form.ConfigProvider>
-  )
-
-const renderCheckboxInGroup = () =>
-  render(
-    <Form onSubmit={() => {}}>
-      <CheckboxGroup name='checkbox-group' label='checkbox-group-label'>
-        <Checkbox label='checkbox-label-0' value='checkbox-value-0' />
-        <Checkbox label='checkbox-label-1' value='checkbox-value-1' />
-      </CheckboxGroup>
-    </Form>
-  )
-
-describe('Form.Checkbox', () => {
-  it('default render for single checkbox', () => {
-    const { container } = renderCheckbox({})
-
-    expect(container).toMatchSnapshot()
-  })
-
-  describe('when required prop is passed', () => {
-    it('does not set "required" attribute to input tag, to avoid Chrome tooltip', () => {
-      const { container } = renderCheckbox({})
-
-      expect(
-        container.querySelector('[name="single-checkbox"]')
-      ).toMatchSnapshot()
-    })
-  })
-
-  it('default render for checkboxes in a group', () => {
-    const { container } = renderCheckboxInGroup()
-
-    expect(container).toMatchSnapshot()
-  })
-
-  it('required with asterisk single checkbox', () => {
-    const { container } = renderCheckbox(
-      {
-        required: true
-      },
-      {
-        requiredVariant: 'asterisk'
-      }
-    )
-
-    expect(container).toMatchSnapshot()
-  })
-
-  it('never shows (optional) postfix for single checkbox', () => {
-    const { getByTestId } = renderCheckbox({})
-
-    expect(getByTestId('single-checkbox')).not.toHaveTextContent('(optional)')
-  })
-
-  it('shows the label in default case', () => {
-    const { getByLabelText } = renderCheckbox({})
-
-    expect(getByLabelText('The checkbox label')).toBeInTheDocument()
-  })
-
-  it('shows the label in title case', () => {
-    const { getByLabelText } = renderCheckbox({ titleCase: true })
-
-    expect(getByLabelText('The Checkbox Label')).toBeInTheDocument()
-  })
-})

package/src/CheckboxGroup/CheckboxGroup.tsx

@@ -1,30 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import React from 'react'
-import {
-  Checkbox as PicassoCheckbox,
-  CheckboxProps,
-  CheckboxGroupProps
-} from '@toptal/picasso'
-
-import FieldWrapper, { FieldProps } from '../FieldWrapper'
-import CheckboxGroupContext from './CheckboxGroupContext'
-
-export type Props = CheckboxGroupProps & FieldProps<CheckboxProps['value']>
-
-export const CheckboxGroup = (props: Props) => {
-  const { children, titleCase, ...rest } = props
-
-  return (
-    <CheckboxGroupContext.Provider value={props.name}>
-      <FieldWrapper titleCase={titleCase} {...rest} type='checkbox'>
-        {() => (
-          <PicassoCheckbox.Group {...rest}>{children}</PicassoCheckbox.Group>
-        )}
-      </FieldWrapper>
-    </CheckboxGroupContext.Provider>
-  )
-}
-
-CheckboxGroup.displayName = 'CheckboxGroup'
-
-export default CheckboxGroup

package/src/CheckboxGroup/CheckboxGroupContext.ts

@@ -1,3 +0,0 @@
-import { createContext } from 'react'
-
-export default createContext<string | undefined>(undefined)

package/src/CheckboxGroup/index.ts

@@ -1,3 +0,0 @@
-export { default } from './CheckboxGroup'
-export { default as CheckboxGroupContext } from './CheckboxGroupContext'
-export type { Props } from './CheckboxGroup'

package/src/CheckboxGroup/test.tsx

@@ -1,35 +0,0 @@
-import { render } from '@toptal/picasso/test-utils'
-import React from 'react'
-
-import Checkbox from '../Checkbox'
-import Form from '../Form'
-import CheckboxGroup, { Props } from './CheckboxGroup'
-
-const arrangeTest = ({ titleCase }: Partial<Props> = {}) =>
-  render(
-    <Form onSubmit={() => {}}>
-      <CheckboxGroup
-        required
-        name='checkbox-group'
-        label='Checkbox group label'
-        titleCase={titleCase}
-      >
-        <Checkbox label='checkbox-label-0' value='checkbox-value-0' />
-        <Checkbox label='checkbox-label-1' value='checkbox-value-1' />
-      </CheckboxGroup>
-    </Form>
-  )
-
-describe('CheckboxGroup', () => {
-  it('shows the label in default case', () => {
-    const { getByText } = arrangeTest()
-
-    expect(getByText('Checkbox group label')).toBeInTheDocument()
-  })
-
-  it('shows the label in title case', () => {
-    const { getByText } = arrangeTest({ titleCase: true })
-
-    expect(getByText('Checkbox Group Label')).toBeInTheDocument()
-  })
-})

package/src/DatePicker/DatePicker.tsx

@@ -1,26 +0,0 @@
-import React from 'react'
-import {
-  DatePicker as PicassoDatePicker,
-  DatePickerProps
-} from '@toptal/picasso-lab'
-
-import FieldWrapper, { FieldProps } from '../FieldWrapper'
-
-export type FormDatePickerProps = Omit<DatePickerProps, 'onChange'> & {
-  onChange?: DatePickerProps['onChange']
-}
-export type Props = FormDatePickerProps & FieldProps<DatePickerProps['value']>
-
-export const DatePicker = (props: Props) => (
-  <FieldWrapper<FormDatePickerProps> {...props}>
-    {(inputProps: DatePickerProps) => {
-      return <PicassoDatePicker {...inputProps} />
-    }}
-  </FieldWrapper>
-)
-
-DatePicker.defaultProps = {}
-
-DatePicker.displayName = 'DatePicker'
-
-export default DatePicker

package/src/DatePicker/index.ts

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

package/src/FieldWrapper/FieldWrapper.tsx

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

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

package/src/FieldWrapper/story/index.jsx

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

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

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