@toptal/picasso-forms 66.3.2 → 67.0.0

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

@@ -0,0 +1,137 @@
+import React, { useCallback } from 'react'
+import { Container } from '@toptal/picasso'
+import { SPACING_4 } from '@toptal/picasso-utils'
+import { FormNonCompound, Input, SubmitButton } 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))',
+      }}
+    >
+      <FormNonCompound
+        onSubmit={handleSuccessSubmit}
+        successSubmitMessage='Login successful!'
+      >
+        <Input
+          required
+          name='backendCommunication-successName'
+          label='First name'
+          placeholder='e.g. Bruce'
+          width='full'
+        />
+        <Input
+          required
+          name='backendCommunication-successSurname'
+          label='Last name'
+          placeholder='e.g. Wayne'
+          width='full'
+        />
+
+        <Container top={SPACING_4}>
+          <SubmitButton variant='positive' data-testid='success-submit-button'>
+            Login Success
+          </SubmitButton>
+        </Container>
+      </FormNonCompound>
+
+      <FormNonCompound
+        onSubmit={handleSubmitWithInlineError}
+        failedSubmitMessage='Login failed! Please try another combination of first and last names.'
+      >
+        <Input
+          required
+          name='backendCommunication-inlineErrorName'
+          label='First name'
+          placeholder='e.g. Bruce'
+          width='full'
+        />
+        <Input
+          required
+          name='backendCommunication-inlineErrorSurname'
+          label='Last name'
+          placeholder='e.g. Wayne'
+          width='full'
+        />
+
+        <Container top={SPACING_4}>
+          <SubmitButton
+            variant='negative'
+            data-testid='submit-with-inline-error-button'
+          >
+            Login with Inline Error
+          </SubmitButton>
+        </Container>
+      </FormNonCompound>
+
+      <FormNonCompound onSubmit={handleSubmitWithCustomNotificationError}>
+        <Input
+          required
+          name='backendCommunication-customNotificationErrorName'
+          label='First name'
+          placeholder='e.g. Bruce'
+          width='full'
+        />
+        <Input
+          required
+          name='backendCommunication-customNotificationErrorSurname'
+          label='Last name'
+          placeholder='e.g. Wayne'
+          width='full'
+        />
+
+        <Container top={SPACING_4}>
+          <SubmitButton
+            variant='negative'
+            data-testid='submit-with-custom-notification-button'
+          >
+            Login with Custom Notification Error
+          </SubmitButton>
+        </Container>
+      </FormNonCompound>
+    </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({
+      'backendCommunication-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,35 @@
+import React from 'react'
+import { Container } from '@toptal/picasso'
+import { SPACING_4 } from '@toptal/picasso-utils'
+import type { FormConfigProps } from '@toptal/picasso-forms'
+import {
+  FormNonCompound,
+  ConfigProvider,
+  Input,
+  SubmitButton,
+} from '@toptal/picasso-forms'
+
+const formConfig: FormConfigProps = {
+  requiredVariant: 'asterisk',
+}
+
+const Example = () => (
+  <ConfigProvider value={formConfig}>
+    <FormNonCompound
+      onSubmit={values => window.alert(JSON.stringify(values, undefined, 2))}
+    >
+      <Input
+        required
+        name='formConfig-firstName'
+        label='First name'
+        placeholder='e.g. Bruce'
+      />
+
+      <Container top={SPACING_4}>
+        <SubmitButton>Submit</SubmitButton>
+      </Container>
+    </FormNonCompound>
+  </ConfigProvider>
+)
+
+export default Example

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

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Container } from '@toptal/picasso'
+import { SPACING_4 } from '@toptal/picasso-utils'
+import {
+  FormNonCompound,
+  Input,
+  NumberInput,
+  SubmitButton,
+} 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 = () => (
+  <FormNonCompound
+    onSubmit={values => window.alert(JSON.stringify(values, undefined, 2))}
+  >
+    <Input
+      required
+      name='customValidator-userName'
+      label='First name'
+      placeholder='e.g. Bruce'
+    />
+    <NumberInput
+      required
+      validate={minMaxValidator}
+      name='customValidator-userAge'
+      label="What's your age?"
+      placeholder='e.g. 25'
+    />
+
+    <Container top={SPACING_4}>
+      <SubmitButton>Submit</SubmitButton>
+    </Container>
+  </FormNonCompound>
+)
+
+export default CustomValidatorExample

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

@@ -0,0 +1,218 @@
+import React, { useState } from 'react'
+import { FormActionsContainer } from '@toptal/picasso'
+import { SPACING_4, isSubstring } from '@toptal/picasso-utils'
+import type { Item } from '@toptal/picasso/Autocomplete'
+import {
+  FormNonCompound as Form,
+  NumberInput,
+  Input,
+  RadioGroup,
+  Radio,
+  SubmitButton,
+  ButtonRadio,
+  CheckboxGroup,
+  Checkbox,
+  DatePicker,
+  TimePicker,
+  ButtonCheckbox,
+  Autocomplete,
+  FileInput,
+  Dropzone,
+  AvatarUpload,
+  Rating,
+  TagSelector,
+  Select,
+  Switch,
+} 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 initialValues = {
+  'default-gender': 'female',
+}
+
+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(JSON.stringify(values, undefined, 2))}
+      initialValues={initialValues}
+    >
+      <Input
+        enableReset
+        onResetClick={(set: (value: string) => void) => {
+          set('')
+        }}
+        required
+        name='default-firstName'
+        label='First name'
+        placeholder='e.g. Bruce'
+      />
+      <Input
+        required
+        name='default-lastName'
+        label='Last name'
+        placeholder='e.g. Wayne'
+      />
+      <NumberInput
+        enableReset
+        required
+        name='default-age'
+        label="What's your age?"
+        placeholder='e.g. 25'
+      />
+      <RadioGroup name='default-gender' label='Gender'>
+        <Radio label='Male' value='male' />
+        <Radio label='Female' value='female' />
+      </RadioGroup>
+      <RadioGroup name='default-gender' label='Gender' horizontal spacing={8}>
+        <ButtonRadio value='male'>Male</ButtonRadio>
+        <ButtonRadio value='female'>Female</ButtonRadio>
+      </RadioGroup>
+      <DatePicker name='default-dateOfBirth' label='Date of birth' />
+      <TimePicker name='default-timeOfBirth' label='Time of birth' />
+      <TagSelector
+        name='default-skills'
+        label='Skills'
+        inputValue={skillInputValue}
+        options={skillOptions}
+        onInputChange={setSkillInputValue}
+      />
+      <CheckboxGroup name='default-hobbies' label='Hobbies'>
+        <Checkbox label='Skiing' value='skiing' />
+        <Checkbox label='Free diving' value='freeDiving' />
+        <Checkbox label='Dancing' value='dancing' />
+      </CheckboxGroup>
+      <CheckboxGroup
+        name='default-hobbies'
+        label='Hobbies'
+        horizontal
+        spacing={8}
+      >
+        <ButtonCheckbox value='skiing'>Skiing</ButtonCheckbox>
+        <ButtonCheckbox value='freeDiving'>Free diving</ButtonCheckbox>
+        <ButtonCheckbox value='dancing'>Dancing</ButtonCheckbox>
+      </CheckboxGroup>
+      <Select
+        enableReset
+        required
+        name='default-businessType'
+        label='Business type'
+        width='auto'
+        options={[
+          { value: 0, text: 'Company' },
+          { value: 1, text: 'Individual' },
+        ]}
+      />
+      <Select
+        name='default-origin_country'
+        label='Origin country'
+        width='auto'
+        options={countries}
+      />
+      <Autocomplete
+        name='default-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}
+      />
+      <Rating.Stars
+        name='default-rating'
+        label='How much do you love Picasso?'
+        required
+      />
+      <Rating.Thumbs
+        name='default-thumbs'
+        label='Would you recommend picasso?'
+        required
+      />
+      <FileInput
+        required
+        name='default-resume'
+        label='Resume'
+        status='No file selected.'
+      />
+      <Dropzone label='Attachments' required name='default-attachments' />
+      <AvatarUpload
+        label='Profile photo'
+        required
+        name='default-avatarUpload'
+      />
+      <Checkbox
+        required
+        name='default-legal'
+        label='I confirm that I have legal permission from the client to feature this project.'
+      />
+      <Switch
+        name='default-publicProfile'
+        label='Public Profile'
+        width='auto'
+      />
+
+      <FormActionsContainer top={SPACING_4}>
+        <SubmitButton>Submit</SubmitButton>
+      </FormActionsContainer>
+    </Form>
+  )
+}
+
+export default Example

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

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Container } from '@toptal/picasso'
+import { SPACING_4 } from '@toptal/picasso-utils'
+import { FormNonCompound, Dropzone, SubmitButton } from '@toptal/picasso-forms'
+import type { FileUpload } from '@toptal/picasso/FileInput'
+
+type FormType = {
+  'dropzone-attachments': FileUpload[]
+}
+
+const Example = () => {
+  const MAX_SIZE = 2
+  const initialAttachments = [{ file: new File(['resume.pdf'], 'resume.pdf') }]
+
+  const handleSubmit = ({ 'dropzone-attachments': attachments }: FormType) => {
+    window.alert(
+      `Uploading: ${attachments.map(({ file }) => file.name).join(', ')}`
+    )
+  }
+
+  return (
+    <FormNonCompound<FormType>
+      autoComplete='off'
+      onSubmit={handleSubmit}
+      initialValues={{
+        'dropzone-attachments': initialAttachments,
+      }}
+    >
+      <Dropzone
+        required
+        name='dropzone-attachments'
+        dropzoneHint={`Max file size: ${MAX_SIZE}MB.`}
+        hint='These documents will be used to analyze and identify your potential.'
+      />
+      <Container top={SPACING_4}>
+        <SubmitButton>Submit</SubmitButton>
+      </Container>
+    </FormNonCompound>
+  )
+}
+
+export default Example

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

@@ -0,0 +1,58 @@
+import React from 'react'
+import { Container } from '@toptal/picasso'
+import { SPACING_4 } from '@toptal/picasso-utils'
+import {
+  FormNonCompound,
+  PasswordInput,
+  SubmitButton,
+} from '@toptal/picasso-forms'
+
+type FormType = {
+  'fieldRequirements-password': string
+  'fieldRequirements-confirmPassword': string
+}
+
+const Example = () => {
+  const handleSubmit = ({
+    'fieldRequirements-password': password,
+    'fieldRequirements-confirmPassword': confirmPassword,
+  }: FormType) => {
+    window.alert(`Password: ${password}, Confirm Password: ${confirmPassword}`)
+  }
+
+  return (
+    <FormNonCompound<FormType>
+      autoComplete='off'
+      onSubmit={handleSubmit}
+      initialValues={{
+        'fieldRequirements-password': '',
+        'fieldRequirements-confirmPassword': '',
+      }}
+    >
+      <PasswordInput
+        label='Password'
+        name='fieldRequirements-password'
+        required
+      />
+      <PasswordInput
+        label='Confirm password'
+        name='fieldRequirements-confirmPassword'
+        hideRequirements
+        required
+        validate={(confirmPassword, allValues) => {
+          if (
+            (allValues as FormType)['fieldRequirements-password'] !==
+            confirmPassword
+          ) {
+            return 'Passwords do not match'
+          }
+        }}
+      />
+      <Container top={SPACING_4}>
+        <SubmitButton>Submit</SubmitButton>
+      </Container>
+    </FormNonCompound>
+  )
+}
+
+export default Example

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

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Container } from '@toptal/picasso'
+import { SPACING_4 } from '@toptal/picasso-utils'
+import { FormNonCompound, FileInput, SubmitButton } from '@toptal/picasso-forms'
+import type { FileUpload } from '@toptal/picasso/FileInput'
+
+type FormType = {
+  'fileInput-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 = ({ 'fileInput-attachments': attachments }: FormType) => {
+    window.alert(
+      `Uploading: ${attachments.map(({ file }) => file.name).join(', ')}`
+    )
+  }
+
+  return (
+    <FormNonCompound<FormType>
+      autoComplete='off'
+      onSubmit={handleSubmit}
+      initialValues={{
+        'fileInput-attachments': initialAttachments,
+      }}
+    >
+      <FileInput
+        name='fileInput-attachments'
+        hint={`Max file size: ${MAX_SIZE}MB.`}
+      />
+      <Container top={SPACING_4}>
+        <SubmitButton>Submit</SubmitButton>
+      </Container>
+    </FormNonCompound>
+  )
+}
+
+export default Example

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

@@ -0,0 +1,96 @@
+import React from 'react'
+import { Container } from '@toptal/picasso'
+import { SPACING_4 } from '@toptal/picasso-utils'
+import type { FormConfigProps } from '@toptal/picasso-forms'
+import {
+  FormNonCompound,
+  ConfigProvider,
+  SubmitButton,
+  Autocomplete,
+  DatePicker,
+  Input,
+  NumberInput,
+  PasswordInput,
+  RichTextEditor,
+  Select,
+  TagSelector,
+  TimePicker,
+} from '@toptal/picasso-forms'
+import { htmlToHast } from '@toptal/picasso-rich-text-editor/utils'
+
+const formConfig: FormConfigProps = {
+  highlightAutofill: true,
+}
+
+const april2nd = new Date(2023, 3, 2)
+
+const INITIAL_RTE_VALUE = '<p>Rich Text Editor</p>'
+
+const Example = () => (
+  <ConfigProvider value={formConfig}>
+    <FormNonCompound
+      onSubmit={values => window.alert(JSON.stringify(values, undefined, 2))}
+      initialValues={{
+        'highlight-firstName': 'Bruce',
+        'highlight-autocomplete': 'foo',
+        'highlight-datepicker': april2nd,
+        'highlight-numberinput': 1,
+        'highlight-passwordinput': 'password',
+        'highlight-rte': INITIAL_RTE_VALUE,
+        'highlight-select': 'foo',
+        'highlight-tagselector': 'foo',
+        'highlight-timepicker': april2nd,
+      }}
+    >
+      <Input
+        required
+        name='highlight-firstName'
+        label='textinput'
+        placeholder='e.g. Bruce'
+      />
+
+      <Input
+        required
+        name='highlight-noDefaultValue'
+        label='textinput'
+        placeholder='e.g. Bruce'
+      />
+
+      <Autocomplete
+        label='autocomplete'
+        value='foo'
+        name='highlight-autocomplete'
+      />
+
+      <DatePicker label='datepicker' name='highlight-datepicker' />
+      <NumberInput label='numberinput' name='highlight-numberinput' />
+      <PasswordInput label='passwordinput' name='highlight-passwordinput' />
+      <RichTextEditor
+        id='highlight-rte'
+        label='rte'
+        name='highlight-rte'
+        defaultValue={htmlToHast(INITIAL_RTE_VALUE)} // we expect HAST from BE
+      />
+      <Select
+        options={[{ value: 'foo', text: 'first option ' }]}
+        label='select'
+        name='highlight-select'
+      />
+      <TagSelector
+        options={[{ value: 'foo', text: 'first option ' }]}
+        label='tagselector'
+        name='highlight-tagselector'
+        inputValue='foo'
+      />
+      <TimePicker label='timepicker' name='highlight-timepicker' />
+
+      <Container top={SPACING_4}>
+        <SubmitButton id='highlight-autofill-submit-button'>
+          Submit
+        </SubmitButton>
+      </Container>
+    </FormNonCompound>
+  </ConfigProvider>
+)
+
+export default Example