@toptal/picasso-forms 6.0.4 → 6.0.5

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

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

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

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

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

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

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

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

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

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

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

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