@toptal/picasso-forms 6.0.5 → 10.0.0

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

@@ -1,42 +0,0 @@
-import React from 'react'
-import { Container } from '@toptal/picasso'
-import { Form } from '@toptal/picasso-forms'
-import { FileUpload } from '@toptal/picasso/FileInput'
-
-type FormType = {
-  attachments: FileUpload[]
-}
-
-const Example = () => {
-  const MAX_SIZE = 2
-  const initialAttachments = [
-    { file: new File(['image.png'], 'image.png') },
-    { file: new File(['resume.pdf'], 'resume.pdf') }
-  ]
-
-  const handleSubmit = ({ attachments }: FormType) => {
-    window.alert(
-      `Uploading: ${attachments.map(({ file }) => file.name).join(', ')}`
-    )
-  }
-
-  return (
-    <Form<FormType>
-      autoComplete='off'
-      onSubmit={handleSubmit}
-      initialValues={{
-        attachments: initialAttachments
-      }}
-    >
-      <Form.FileInput
-        name='attachments'
-        hint={`Max file size: ${MAX_SIZE}MB.`}
-      />
-      <Container top='small'>
-        <Form.SubmitButton>Submit</Form.SubmitButton>
-      </Container>
-    </Form>
-  )
-}
-
-export default Example

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

@@ -1,28 +0,0 @@
-import React from 'react'
-import { Container, Typography } from '@toptal/picasso'
-import { Form } from '@toptal/picasso-forms'
-
-const ParseInputExample = () => (
-  <Form onSubmit={values => window.alert(values)}>
-    <Container bottom='small'>
-      <Typography size='medium'>
-        I want to trim my first name from the empty spaces:
-      </Typography>
-    </Container>
-    <Container flex alignItems='flex-end'>
-      <Form.Input
-        name='parseInput.firstName'
-        label='First name'
-        placeholder='e.g. Bruce'
-        parse={(value: string) => value.trim()}
-        limit={24}
-      />
-
-      <Container left='small'>
-        <Form.SubmitButton>Submit</Form.SubmitButton>
-      </Container>
-    </Container>
-  </Form>
-)
-
-export default ParseInputExample

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

@@ -1,167 +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
-        titleCase
-        enableReset
-        onResetClick={(set: (value: string) => void) => {
-          set('')
-        }}
-        required
-        name='firstName'
-        label='First name'
-        placeholder='e.g. Bruce'
-      />
-      <Form.NumberInput
-        titleCase
-        enableReset
-        required
-        name='age'
-        label="What's your age?"
-        placeholder='e.g. 25'
-      />
-      <Form.RadioGroup titleCase name='gender' label='Select gender'>
-        <Form.Radio label='Male' value='male' />
-        <Form.Radio label='Female' value='female' />
-      </Form.RadioGroup>
-      <Form.DatePicker titleCase name='dateOfBirth' label='Date of birth' />
-      <Form.TimePicker titleCase name='timeOfBirth' label='Time of birth' />
-      <Form.TagSelector
-        titleCase
-        name='skills'
-        label='Your skills'
-        inputValue={skillInputValue}
-        options={skillOptions}
-        onInputChange={setSkillInputValue}
-      />
-      <Form.CheckboxGroup titleCase name='hobbies' label='Your hobbies'>
-        <Form.Checkbox label='Skiing' value='skiing' />
-        <Form.Checkbox titleCase label='Free diving' value='freeDiving' />
-        <Form.Checkbox label='Dancing' value='dancing' />
-      </Form.CheckboxGroup>
-      <Form.Select
-        titleCase
-        enableReset
-        required
-        name='businessType'
-        label='Business type'
-        width='auto'
-        options={[
-          { value: 0, text: 'Company' },
-          { value: 1, text: 'Individual' }
-        ]}
-      />
-      <Form.Autocomplete
-        titleCase
-        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
-        titleCase
-        name='rating'
-        label='How much do you love Picasso?'
-        required
-      />
-      <Form.FileInput
-        titleCase
-        required
-        name='avatar'
-        label='Your avatar'
-        status='No file selected.'
-      />
-      <Form.Checkbox
-        titleCase
-        required
-        name='legal'
-        label='I confirm that I have legal permission from the client to feature this project.'
-      />
-      <Form.Switch
-        titleCase
-        name='publicProfile'
-        label='Public profile'
-        width='auto'
-      />
-
-      <Container top='small'>
-        <Form.SubmitButton>Submit</Form.SubmitButton>
-      </Container>
-    </Form>
-  )
-}
-
-export default Example

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

@@ -1,85 +0,0 @@
-import React, { useCallback } from 'react'
-import { useField } from 'react-final-form'
-import { Container } from '@toptal/picasso'
-import { Form } from '@toptal/picasso-forms'
-
-type FormType = {
-  hide: boolean
-  name: {
-    first: string
-    last: string
-  }
-  dob: string
-}
-
-const FormContent = () => {
-  const {
-    input: { value: hide }
-  } = useField('hide')
-
-  return (
-    <>
-      <Form.Checkbox name='hide' label='Check to hide fields below' />
-
-      {!hide && (
-        <>
-          <Form.Input
-            enableReset
-            required
-            name='name.first'
-            label='Your first name'
-            placeholder='e.g. Bruce'
-          />
-          <Form.Input
-            enableReset
-            required
-            name='name.last'
-            label='Your last name'
-            placeholder='e.g. Wayne'
-          />
-          <Form.DatePicker required name='dob' label='DOB' />
-        </>
-      )}
-    </>
-  )
-}
-
-const Example = () => {
-  const handleSubmit = useCallback((values: FormType) => api.submit(values), [])
-
-  return (
-    <Form.ConfigProvider value={{ validateOnSubmit: true }}>
-      <Form<FormType>
-        onSubmit={handleSubmit}
-        successSubmitMessage='Success!'
-        failedSubmitMessage='Failure!'
-      >
-        <FormContent />
-
-        <Container top='small'>
-          <Form.SubmitButton>Submit</Form.SubmitButton>
-        </Container>
-      </Form>
-    </Form.ConfigProvider>
-  )
-}
-
-// the emulation of the api call
-const responseWithDelay = async (response: any) =>
-  new Promise(resolve => setTimeout(() => resolve(response), 2000))
-
-const api = {
-  submit: async (values: FormType) => {
-    if (values.hide || values.name?.first.toLowerCase() === 'bruce') {
-      return responseWithDelay(undefined)
-    }
-
-    return responseWithDelay({
-      name: {
-        first: 'Unknown first name'
-      }
-    })
-  }
-}
-
-export default Example

package/src/Form/story/index.jsx

@@ -1,203 +0,0 @@
-import Form from '../Form'
-import formFieldStory from '../../FieldWrapper/story'
-import PicassoBook from '~/.storybook/components/PicassoBook'
-
-const page = PicassoBook.section('Picasso Forms').createPage('Form', 'Form')
-
-page
-  .createTabChapter('Props')
-  .addComponentDocs({
-    component: Form,
-    name: 'Form',
-    additionalDocs: {
-      autoComplete: {
-        name: 'autoComplete',
-        type: {
-          name: 'string',
-          enums: ['on', 'off']
-        },
-        description: `HTML Form autocomplete attribute.\n
-The autocomplete attribute specifies whether a form should have autocomplete 'on' or 'off'.
-When autocomplete is 'on', the browser automatically complete values based on values that the user has entered before.\n
-Tip: It is possible to have autocomplete 'on' for the form, and 'off' for specific input fields, or vice versa.`
-      },
-      debug: {
-        name: 'debug',
-        type: {
-          name: 'function',
-          description:
-            '(state: FormState, fieldStates: { [string]: FieldState }) => void'
-        },
-        description:
-          'A callback for debugging that receives the form state and the states of all the fields'
-      },
-      decorators: {
-        name: 'decorators',
-        type: 'Decorator[]',
-        description: 'An array of decorators to apply to the form'
-      },
-      initialValues: {
-        name: 'initialValues',
-        type: 'FormValues | Object',
-        description: 'The initial values of the form'
-      },
-      initialValuesEqual: {
-        name: 'initialValuesEqual',
-        type: {
-          name: 'function',
-          description: '(Object | undefined, Object | undefined) => boolean'
-        },
-        description:
-          'A predicate to determine whether or not the initialValues prop has changed'
-      },
-      keepDirtyOnReinitialize: {
-        name: 'keepDirtyOnReinitialize',
-        type: 'boolean',
-        description:
-          'If true, only pristine values will be overwritten when initialize(newValues) is called'
-      },
-      mutators: {
-        name: 'mutators',
-        type: {
-          name: 'object',
-          description: '{ [string]: Mutator }'
-        },
-        description: 'Named mutator functions'
-      },
-      onSubmit: {
-        name: 'onSubmit',
-        type: {
-          name: 'function',
-          description:
-            '(values: FormValues, form: FormApi, callback: ?(errors: ?Object) => void) => ?Object | Promise<?Object> | void'
-        },
-        description: 'Function to call when the form is submitted',
-        required: true
-      },
-      subscription: {
-        name: 'subscription',
-        type: {
-          name: 'object',
-          description: '{ [string]: boolean }'
-        },
-        description:
-          'An object of the parts of FormState (final-form) to subscribe to'
-      },
-      validate: {
-        name: 'validate',
-        type: {
-          name: 'function',
-          description: '(values: FormValues) => Object | Promise<Object>'
-        },
-        description:
-          'A whole-record validation function that takes all the values of the form and returns any validation errors'
-      },
-      validateOnBlur: {
-        name: 'validateOnBlur',
-        type: 'boolean',
-        description:
-          'If true, validation will happen on blur. If false, validation will happen on change',
-        defaultValue: false
-      },
-      successSubmitMessage: {
-        name: 'successSubmitMessage',
-        type: 'ReactNode',
-        description:
-          'Message to display in a tooltip when form submitted successfully'
-      },
-      failedSubmitMessage: {
-        name: 'failedSubmitMessage',
-        type: 'ReactNode',
-        description:
-          'Message to display in a tooltip when form submission failed'
-      },
-      scrollOffsetTop: {
-        name: 'scrollOffsetTop',
-        type: 'number',
-        description:
-          'Offset from the viewport for inputs to focus on, defaults to the center of the window (deprecated, will not have any effect)'
-      }
-    }
-  })
-  .addComponentDocs(formFieldStory.componentDocs)
-
-page
-  .createChapter()
-  .addTextSection(
-    `
-Form is a wrapper for 'react-final-form' Form component. It also
-provides inside all the necessary input components types.
-    `
-  )
-  .addExample(
-    'Form/story/Default.example.tsx',
-    {
-      title: 'Default',
-      description: `
-A general look of the form includes the examples of all the input
-types supported by picasso-forms.
-`
-    },
-    'picasso-form'
-  )
-  .addExample(
-    'Form/story/CustomValidator.example.tsx',
-    {
-      title: 'Custom validator',
-      description: `
-We have a 'required' validator included by default to each input type,
-however, you may need custom validators for more complex types of fields.
-`
-    },
-    'picasso-form'
-  ) // picasso-skip-visuals
-  .addExample(
-    'Form/story/ParseInput.example.tsx',
-    {
-      title: 'Change form input value',
-      description: `
-      When you use picasso-forms your form input components are no longer
-      completely controlled and they are controlled by final-form, which
-      gives you the opportunity to rely on it with displaying errors,
-      validations, etc.
-      
-      However, sometimes you may need to be able to modify the form input
-      value.
-      `
-    },
-    'picasso-form'
-  ) // picasso-skip-visuals
-  .addExample(
-    'Form/story/BackendCommunication.example.tsx',
-    {
-      title: 'Backend communication',
-      description: `
-        The form usually need to send data to backend, so we need to have
-        backend communication and display the process of submission and
-        the results. The form-level results are represented by notifications.
-        `
-    },
-    'picasso-form'
-  ) // picasso-skip-visuals
-  .addExample(
-    'Form/story/CustomFormLevelConfiguration.example.tsx',
-    'Form Level Configurations'
-  )
-  .addExample(
-    'Form/story/ValidateOnSubmit.example.tsx',
-    {
-      title: 'Validate only on submit',
-      description: `
-            All fields should not show any validation error messages until submission is made.
-            `
-    },
-    'picasso-form'
-  ) // picasso-skip-visuals
-  .addExample('Form/story/FileInput.example.tsx', {
-    title: 'File input on a Form',
-    description: 'Showcase how to upload files on the form submission'
-  }) // picasso-skip-visuals
-  .addExample('Form/story/TitleCase.example.tsx', {
-    title: 'Title case',
-    description: "Display the field's label in title case."
-  }) // picasso-skip-visuals

package/src/Form/test.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import { render } from '@toptal/picasso/test-utils'
-import { OmitInternalProps } from '@toptal/picasso-shared'
-import { Button } from '@toptal/picasso'
-
-import Form, { Props } from './Form'
-
-const renderForm = (props: OmitInternalProps<Props>) => {
-  const { onSubmit } = props
-
-  return render(
-    <Form onSubmit={onSubmit}>
-      <Form.Input name='test' placeholder='test input' />
-      <Button type='submit'>Submit</Button>
-    </Form>
-  )
-}
-
-describe('Form', () => {
-  it('renders', () => {
-    const { container } = renderForm({
-      onSubmit: () => {}
-    })
-
-    expect(container).toMatchSnapshot()
-  })
-})

package/src/FormConfig/FormConfig.ts

@@ -1,12 +0,0 @@
-import { createContext, useContext } from 'react'
-
-export type RequiredVariant = 'default' | 'asterisk'
-
-export interface FormConfigProps {
-  validateOnSubmit?: boolean
-  requiredVariant?: RequiredVariant
-}
-
-export const FormConfigContext = createContext<FormConfigProps>({})
-
-export const useFormConfig = () => useContext(FormConfigContext)

package/src/FormConfig/index.ts

@@ -1 +0,0 @@
-export * from './FormConfig'

package/src/FormConfig/test.tsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import { screen, render, fireEvent } from '@toptal/picasso/test-utils'
-
-import Form from '../Form'
-import { FormConfigProps } from './FormConfig'
-
-const TEXT_INPUT_LABEL = 'Test text field'
-
-const renderForm = (configProps: FormConfigProps) => {
-  return render(
-    <Form.ConfigProvider value={configProps}>
-      <Form onSubmit={() => {}}>
-        <Form.Input label={TEXT_INPUT_LABEL} required name='test' />
-        <Form.SubmitButton>Submit</Form.SubmitButton>
-      </Form>
-    </Form.ConfigProvider>
-  )
-}
-
-describe('Form.ConfigProvider', () => {
-  it('validate only on submit', async () => {
-    renderForm({ validateOnSubmit: true })
-
-    fireEvent.blur(screen.getByLabelText(TEXT_INPUT_LABEL))
-
-    expect(
-      screen.queryByText('Please complete this field.')
-    ).not.toBeInTheDocument()
-
-    fireEvent.click(screen.getByRole('button', { name: 'Submit' }))
-
-    expect(
-      await screen.findByText('Please complete this field.')
-    ).toBeInTheDocument()
-  })
-
-  it('validate normally on blur / change', async () => {
-    renderForm({ validateOnSubmit: false })
-
-    fireEvent.blur(screen.getByLabelText(TEXT_INPUT_LABEL))
-
-    expect(screen.getByText('Please complete this field.')).toBeInTheDocument()
-  })
-})

package/src/Input/Input.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import { Input as PicassoInput, InputProps } from '@toptal/picasso'
-
-import FieldWrapper, { FieldProps } from '../FieldWrapper'
-import getInputName from './utils/get-input-name'
-
-export type FormInputProps = Omit<InputProps, 'onResetClick'> & {
-  /** Callback invoked when reset button was clicked */
-  onResetClick?: (set: (value: string) => void) => void
-}
-export type Props = FormInputProps & FieldProps<InputProps['value']>
-
-export const Input = React.forwardRef<HTMLInputElement, Props>((props, ref) => (
-  <FieldWrapper<FormInputProps> {...props}>
-    {({ name, ...inputProps }: InputProps) => (
-      // TODO: remove getInputName completely when Chrome fixes autocomplete issue
-      // Link to the issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1255609
-      <PicassoInput name={getInputName(name)} {...inputProps} ref={ref} />
-    )}
-  </FieldWrapper>
-))
-
-Input.defaultProps = {}
-
-Input.displayName = 'Input'
-
-export default Input

package/src/Input/index.ts

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

package/src/Input/test.tsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '@toptal/picasso/test-utils'
-import { Button } from '@toptal/picasso'
-
-import Form, { Props as FormProps } from '../Form/Form'
-import { Props as InputProps } from './Input'
-
-type TestFormProps = Pick<FormProps, 'onSubmit'> & Pick<InputProps, 'onFocus'>
-
-const renderForm = (props: TestFormProps) => {
-  const { onFocus, onSubmit } = props
-
-  return render(
-    <Form onSubmit={onSubmit}>
-      <Form.Input onFocus={onFocus} name='test' placeholder='test input' />
-      <Button type='submit'>Submit</Button>
-    </Form>
-  )
-}
-
-describe('Input', () => {
-  it('fires the onFocus callback after focusing the input', () => {
-    const handleFocus = jest.fn()
-
-    const { getByPlaceholderText } = renderForm({
-      onSubmit: () => {},
-      onFocus: handleFocus
-    })
-
-    fireEvent.focus(getByPlaceholderText('test input'))
-
-    expect(handleFocus).toHaveBeenCalled()
-  })
-})