@toptal/picasso-forms 66.3.2 → 67.0.0

package/src/SubmitButton/SubmitButton.tsx

@@ -0,0 +1,71 @@
+import type { ReactNode } from 'react'
+import React from 'react'
+import type { ButtonProps, ButtonCircularProps } from '@toptal/picasso'
+import { Button } from '@toptal/picasso'
+import { useFormState } from 'react-final-form'
+
+type ButtonTypeProps = {
+  buttonType: 'rectangular'
+  variant?: ButtonProps['variant']
+  children: ReactNode
+}
+
+type CircularButtonTypeProps = {
+  buttonType: 'circular'
+  variant?: ButtonCircularProps['variant']
+}
+
+type ActionButtonTypeProps = {
+  buttonType: 'action'
+  variant?: null
+  children?: ReactNode
+}
+
+// Intersection with the type { id?: string } is needed here because of
+// TS compiler issue https://github.com/microsoft/TypeScript/issues/34793
+export type Props = Omit<ButtonProps, 'type' | 'variant' | 'children'> & {
+  id?: string
+} & (CircularButtonTypeProps | ActionButtonTypeProps | ButtonTypeProps)
+
+export const SubmitButton = ({
+  buttonType,
+  variant,
+  ...restOfProps
+}: Props) => {
+  /* eslint-disable react/jsx-props-no-spreading */
+  const { submitting } = useFormState({ subscription: { submitting: true } })
+
+  const submitButtonProps = {
+    type: 'submit' as const,
+    loading: submitting,
+  }
+
+  const resultComponentProps = { ...submitButtonProps, ...restOfProps }
+
+  switch (buttonType) {
+    case 'circular':
+      return (
+        <Button.Circular
+          {...resultComponentProps}
+          variant={variant as ButtonCircularProps['variant']}
+        />
+      )
+    case 'action':
+      return <Button.Action {...resultComponentProps} />
+    default:
+      return (
+        <Button
+          {...resultComponentProps}
+          variant={variant as ButtonProps['variant']}
+        />
+      )
+  }
+}
+
+SubmitButton.defaultProps = {
+  buttonType: 'rectangular',
+}
+
+SubmitButton.displayName = 'SubmitButton'
+
+export default SubmitButton

package/src/SubmitButton/index.ts

@@ -0,0 +1,6 @@
+import type { Props } from './SubmitButton'
+
+export { default } from './SubmitButton'
+
+export type SubmitButtonProps = Props
+export * from './SubmitButton'

package/src/SubmitButton/story/ButtonTypes.example.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { Check16, Container, Typography } from '@toptal/picasso'
+import { SPACING_4, SPACING_8 } from '@toptal/picasso-utils'
+import { FormNonCompound, SubmitButton } from '@toptal/picasso-forms'
+
+const onSubmit = () => new Promise(resolve => setTimeout(resolve, 1000))
+
+const Example = () => (
+  <>
+    <Typography variant='heading' size='small'>
+      Rectangular (Default)
+    </Typography>
+    <Container top={SPACING_4} bottom={SPACING_8}>
+      <FormNonCompound onSubmit={onSubmit}>
+        <Container top={SPACING_4}>
+          <SubmitButton buttonType='rectangular'>Rectangular</SubmitButton>
+        </Container>
+      </FormNonCompound>
+    </Container>
+
+    <Typography variant='heading' size='small'>
+      Circular
+    </Typography>
+    <Container top={SPACING_4} bottom={SPACING_8}>
+      <FormNonCompound onSubmit={onSubmit}>
+        <Container top={SPACING_4}>
+          <SubmitButton buttonType='circular' icon={<Check16 />} />
+        </Container>
+      </FormNonCompound>
+    </Container>
+
+    <Typography variant='heading' size='small'>
+      Action
+    </Typography>
+    <Container top={SPACING_4} bottom={SPACING_8}>
+      <FormNonCompound onSubmit={onSubmit}>
+        <Container top={SPACING_4}>
+          <SubmitButton buttonType='action'>Action</SubmitButton>
+        </Container>
+      </FormNonCompound>
+    </Container>
+  </>
+)
+
+export default Example

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

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Container } from '@toptal/picasso'
+import { SPACING_4 } from '@toptal/picasso-utils'
+import { FormNonCompound, SubmitButton } from '@toptal/picasso-forms'
+
+const onSubmit = () => new Promise(resolve => setTimeout(resolve, 1000))
+
+const Example = () => (
+  <FormNonCompound onSubmit={onSubmit}>
+    <Container top={SPACING_4}>
+      <SubmitButton>Submit form</SubmitButton>
+    </Container>
+  </FormNonCompound>
+)
+
+export default Example

package/src/SubmitButton/story/index.jsx

@@ -0,0 +1,35 @@
+import SubmitButton from '../SubmitButton'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const page = PicassoBook.section('Picasso Forms').createPage(
+  'SubmitButton',
+  `SubmitButton reacts to the submission state of the form.
+  
+  ${PicassoBook.createSourceLink(__filename)}
+  `
+)
+
+page.createTabChapter('Props').addComponentDocs({
+  component: SubmitButton,
+  name: 'SubmitButton',
+  additionalDocs: {
+    buttonType: {
+      name: 'buttonType',
+      type: 'string',
+      description: 'The button type to use',
+      defaultValue: 'rectangular',
+      enums: ['rectangular', 'circular', 'action'],
+    },
+    variant: {
+      name: 'variant',
+      type: 'string',
+      description:
+        'The variant to use. Depending on the "buttonType" property value, the "variant" property accepts circular or action button "variant" property values.',
+    },
+  },
+})
+
+page
+  .createChapter()
+  .addExample('SubmitButton/story/Default.example.tsx', 'Default')
+  .addExample('SubmitButton/story/ButtonTypes.example.tsx', 'Button types')

package/src/Switch/Switch.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import type { SwitchProps } from '@toptal/picasso'
+import { Switch as PicassoSwitch, Form as PicassoForm } from '@toptal/picasso'
+
+import type { FieldProps } from '../Field'
+import PicassoField from '../Field'
+
+export type FormSwitchProps = Omit<SwitchProps, 'onChange'> & {
+  onChange?: SwitchProps['onChange']
+}
+export type Props = FormSwitchProps & FieldProps<SwitchProps['value']>
+
+export const Switch = (props: Props) => (
+  <PicassoField<FormSwitchProps>
+    {...props}
+    type='checkbox'
+    label={
+      props.label ? (
+        <PicassoForm.Label htmlFor={props.id} titleCase={props.titleCase}>
+          {props.label}
+        </PicassoForm.Label>
+      ) : null
+    }
+  >
+    {({
+      // omitting highlight from inputProps
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      highlight,
+      ...inputProps
+    }: SwitchProps & { highlight?: 'autofill' }) => {
+      return <PicassoSwitch {...inputProps} />
+    }}
+  </PicassoField>
+)
+
+Switch.defaultProps = {}
+
+Switch.displayName = 'Switch'
+
+export default Switch

package/src/Switch/index.ts

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

package/src/TagSelector/TagSelector.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import type { TagSelectorProps } from '@toptal/picasso'
+import { TagSelector as PicassoTagSelector } from '@toptal/picasso'
+
+import type { FieldProps } from '../Field'
+import FieldLabel from '../FieldLabel'
+import InputField from '../InputField'
+
+export type Props = TagSelectorProps & FieldProps<TagSelectorProps['value']>
+
+export const TagSelector = (props: Props) => {
+  const { label, titleCase, ...rest } = props
+
+  return (
+    <InputField<TagSelectorProps>
+      {...rest}
+      label={
+        label ? (
+          <FieldLabel
+            name={props.name}
+            required={props.required}
+            label={label}
+            titleCase={titleCase}
+          />
+        ) : null
+      }
+    >
+      {(inputProps: TagSelectorProps) => {
+        const { value, ...restOfInputProps } = inputProps
+        // avoid passing empty string to TagSelector
+        const valueAsArray = Array.isArray(value) ? value : []
+
+        return <PicassoTagSelector {...restOfInputProps} value={valueAsArray} />
+      }}
+    </InputField>
+  )
+}
+
+TagSelector.displayName = 'TagSelector'
+
+export default TagSelector

package/src/TagSelector/index.ts

@@ -0,0 +1,2 @@
+export { default } from './TagSelector'
+export type { Props } from './TagSelector'

package/src/TimePicker/TimePicker.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import type { TimePickerProps } from '@toptal/picasso'
+import { TimePicker as PicassoTimePicker } from '@toptal/picasso'
+
+import type { FieldProps } from '../Field'
+import InputField from '../InputField'
+import FieldLabel from '../FieldLabel'
+
+export type FormTimePickerProps = Omit<TimePickerProps, 'onChange'> & {
+  onChange?: TimePickerProps['onChange']
+}
+export type Props = FormTimePickerProps & FieldProps<TimePickerProps['value']>
+
+export const TimePicker = (props: Props) => {
+  const { label, titleCase, ...rest } = props
+
+  return (
+    <InputField<FormTimePickerProps>
+      {...rest}
+      label={
+        label ? (
+          <FieldLabel
+            name={props.name}
+            required={props.required}
+            label={label}
+            titleCase={titleCase}
+          />
+        ) : null
+      }
+    >
+      {(inputProps: TimePickerProps) => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { enableReset, onResetClick, ...rest } = inputProps
+
+        return <PicassoTimePicker {...rest} />
+      }}
+    </InputField>
+  )
+}
+
+TimePicker.displayName = 'TimePicker'
+
+export default TimePicker

package/src/TimePicker/index.ts

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

package/src/index.ts

@@ -0,0 +1,86 @@
+// Final Form exports
+export type {
+  FormApi,
+  FormState,
+  FieldState,
+  MutableState,
+  AnyObject,
+  FieldValidator,
+  SubmissionErrors,
+  Config,
+} from 'final-form'
+export { FORM_ERROR, setIn } from 'final-form'
+export {
+  useForm,
+  useField,
+  useFormState,
+  FormSpy,
+  Form as FinalForm,
+  Field as FinalField,
+} from 'react-final-form'
+export type {
+  FieldMetaState,
+  FieldRenderProps,
+  FormRenderProps,
+  FormSpyRenderProps,
+  FormProps,
+  FieldInputProps,
+} from 'react-final-form'
+export { default as arrayMutators } from 'final-form-arrays'
+export { useFieldArray, FieldArray } from 'react-final-form-arrays'
+export type {
+  FieldArrayProps,
+  FieldArrayRenderProps,
+} from 'react-final-form-arrays'
+export {
+  OnChange,
+  OnFocus,
+  ExternallyChanged,
+  OnBlur,
+} from 'react-final-form-listeners'
+export { FieldRequirements } from '@toptal/picasso'
+
+// Picasso Forms exports
+/** @deprecated [FX-4712] Use FormNonCompound instead for better tree-shaking */
+export { FormCompound as Form } from './FormCompound'
+
+export { Form as FormNonCompound } from './Form'
+export { default as FieldWrapper } from './FieldWrapper'
+export { default as Autocomplete } from './Autocomplete'
+export { default as Input } from './Input'
+export { default as Select } from './Select'
+export { default as Radio } from './Radio'
+export { default as ButtonRadio } from './ButtonRadio'
+export { default as RadioGroup } from './RadioGroup'
+export { default as Checkbox } from './Checkbox'
+export { default as ButtonCheckbox } from './ButtonCheckbox'
+export { default as CheckboxGroup } from './CheckboxGroup'
+export { default as NumberInput } from './NumberInput'
+export { default as FileInput } from './FileInput'
+export { default as DatePicker } from './DatePicker'
+export { default as TimePicker } from './TimePicker'
+export { default as TagSelector } from './TagSelector'
+export { default as SubmitButton } from './SubmitButton'
+export { FormConfigProvider as ConfigProvider } from './FormConfig'
+export { default as Switch } from './Switch'
+export { default as Rating } from './Rating'
+export { default as Dropzone } from './Dropzone'
+export { default as PasswordInput } from './PasswordInput'
+export { default as RichTextEditor } from './RichTextEditor'
+export { default as AvatarUpload } from './AvatarUpload'
+
+export { default as Field } from './Field'
+export type { FieldProps } from './Field'
+export type { FormConfigProps, RequiredVariant } from './FormConfig'
+export { default as createFormValuesChangeDecorator } from './utils/form-values-change-decorator'
+export type { ChangedFields } from './utils/form-values-change-decorator'
+export { default as useFormAutoSave } from './utils/use-form-auto-save/use-form-auto-save'
+export { useFormContext } from './Form/FormContext'
+export * from './utils'
+export type { Props as FormTagSelectorProps } from './TagSelector'
+export type { Props as FormFieldWrapperProps } from './FieldWrapper'
+export type { Props as FormInputProps } from './Input'
+export type { Props as FormNumberInputProps } from './NumberInput'
+export type { Props as FormSelectProps } from './Select'
+export type { Props as FormCheckboxProps } from './Checkbox'
+// hygen code generator inserts export statements above this comment.

package/src/story/Deserialization.example.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Container } from '@toptal/picasso'
+import { SPACING_4 } from '@toptal/picasso-utils'
+import {
+  FormNonCompound,
+  RadioGroup,
+  Radio,
+  SubmitButton,
+} from '@toptal/picasso-forms'
+
+const deserializeValue = (value: unknown) => {
+  if (value === 'true') {
+    return true
+  }
+  if (value === 'false') {
+    return false
+  }
+
+  return value
+}
+
+const Example = () => (
+  <FormNonCompound
+    onSubmit={values => {
+      console.log('Raw: ', { foo: values.foo })
+      console.log('Deserialized: ', { foo: deserializeValue(values.foo) })
+    }}
+    initialValues={{ foo: 'true' }}
+  >
+    <RadioGroup name='foo' label='Foo'>
+      <Radio label='yes' value='true' />
+      <Radio label='no' value='false' />
+    </RadioGroup>
+    <Container top={SPACING_4}>
+      <SubmitButton>Submit</SubmitButton>
+    </Container>
+  </FormNonCompound>
+)
+
+export default Example

package/src/story/FormSpy.example.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { Container } from '@toptal/picasso'
+import { SPACING_4 } from '@toptal/picasso-utils'
+import {
+  FormSpy,
+  FormNonCompound,
+  Input,
+  SubmitButton,
+} from '@toptal/picasso-forms'
+
+const Example = () => (
+  <FormNonCompound
+    onSubmit={values => window.alert(JSON.stringify(values, undefined, 2))}
+  >
+    <Input
+      required
+      name='firstName'
+      label='First name'
+      placeholder='e.g. Bruce'
+    />
+
+    <FormSpy>
+      {({ values }) => (
+        <Input
+          required
+          name='lastName'
+          disabled={!values?.firstName}
+          label='Last name'
+          placeholder='Disabled until first name is filled out'
+        />
+      )}
+    </FormSpy>
+
+    <Container top={SPACING_4}>
+      <FormSpy>
+        {({ pristine, values }) => {
+          const isDisabled = pristine || !values?.lastName
+
+          return (
+            <SubmitButton disabled={isDisabled}>
+              {isDisabled ? 'Fill out form to enable' : 'Submit'}
+            </SubmitButton>
+          )
+        }}
+      </FormSpy>
+    </Container>
+  </FormNonCompound>
+)
+
+export default Example

package/src/story/index.jsx

@@ -0,0 +1,39 @@
+import { doc } from 'storybook-readme'
+
+import PicassoBook from '~/.storybook/components/PicassoBook'
+import README from '../../README.md'
+import CHANGELOG from '../../CHANGELOG.md'
+
+const section = PicassoBook.section('Picasso Forms')
+
+section.createDocPage('README', doc(README), { alwaysOnTop: true })
+section.createDocPage('CHANGELOG', doc(CHANGELOG), { alwaysOnTop: true })
+
+const page = section.createPage('Final Form', 'Final Form')
+
+page
+  .createChapter()
+  .addExample(
+    'story/FormSpy.example.tsx',
+    {
+      title: 'Form Spy',
+      description: `
+            Sometimes you might want to perform a conditional action based on the value of another field in the form or its overall state.
+            For smaller forms, you can just directly work with values, but with a larger form you can avoid prop drilling with FormSpy.`,
+      takeScreenshot: false,
+    },
+    'picasso-form'
+  )
+  .addExample(
+    'story/Deserialization.example.tsx',
+    {
+      title: 'Deserialization',
+      description: `
+            By default final-form converts all values to strings.
+            If want to pass a boolean or a number value to a field, 
+            you should pass it serialized and deserialize it later.
+            `,
+      takeScreenshot: false,
+    },
+    'picasso-form'
+  )

package/src/utils/flat-map.ts

@@ -0,0 +1,4 @@
+export const flatMap = <T, K>(arr: T[], fn: (item: T) => K[]) =>
+  arr.reduce<K[]>((acc, item) => acc.concat(fn(item)), [])
+
+export default flatMap

package/src/utils/form-values-change-decorator/form-values-change-decorator.ts

@@ -0,0 +1,64 @@
+import type { AnyObject, FormApi } from 'final-form'
+
+export type ChangedFields<T extends AnyObject> = Partial<
+  Record<keyof T, boolean>
+>
+
+export const getChangedFields = <T extends AnyObject>(
+  newValues: T,
+  existingValues?: T,
+  subscribedFields?: (keyof T)[]
+): ChangedFields<T> => {
+  if (!existingValues) {
+    return {}
+  }
+
+  const keysArray = subscribedFields ?? (Object.keys(newValues) as (keyof T)[])
+
+  const result = keysArray.reduce<ChangedFields<T>>((changedFields, field) => {
+    if (newValues[field] !== existingValues[field]) {
+      changedFields[field] = true
+    }
+
+    return changedFields
+  }, {})
+
+  return result
+}
+
+interface Props<T extends AnyObject> {
+  onChange: (changedFields: ChangedFields<T>, values: T) => void
+  subscribedFields?: (keyof T)[]
+}
+
+let oldValues: AnyObject = {}
+
+const createFormValuesChangeDecorator = <T extends AnyObject>({
+  onChange,
+  subscribedFields,
+}: Props<T>) => {
+  return (form: FormApi<T>) => {
+    const unsubscribe = form.subscribe(
+      nextState => {
+        const changedFields = getChangedFields(
+          nextState.values,
+          oldValues as T,
+          subscribedFields
+        )
+
+        if (Object.keys(changedFields).length > 0) {
+          onChange(changedFields, nextState.values)
+
+          oldValues = nextState.values
+        }
+      },
+      { values: true }
+    )
+
+    return () => {
+      unsubscribe()
+    }
+  }
+}
+
+export default createFormValuesChangeDecorator

package/src/utils/form-values-change-decorator/index.ts

@@ -0,0 +1,3 @@
+export { default } from './form-values-change-decorator'
+
+export type { ChangedFields } from './form-values-change-decorator'

package/src/utils/form-values-change-decorator/test.tsx

@@ -0,0 +1,77 @@
+import { getChangedFields } from './form-values-change-decorator'
+
+describe('on-value-change-decorator', () => {
+  describe('getChangedFields', () => {
+    describe('when subscribed fields is provided', () => {
+      describe('when subscribed fields are changed', () => {
+        it('should return changed fields if values are not equal', () => {
+          expect(
+            getChangedFields(
+              { firstName: 'Bruce', lastName: 'Wayne' },
+              { firstName: 'Brook', lastName: 'Wayne' },
+              ['firstName']
+            )
+          ).toEqual({ firstName: true })
+        })
+      })
+
+      describe('when subscribed fields are not changed', () => {
+        it('should return empty object for fields', () => {
+          expect(
+            getChangedFields(
+              { firstName: 'Bruce', lastName: 'Wayne' },
+              { firstName: 'Bruce', lastName: 'Wayne' },
+              ['firstName']
+            )
+          ).toEqual({})
+
+          expect(
+            getChangedFields(
+              { firstName: 'Bruce', lastName: 'Wayne' },
+              { firstName: 'Bruce', lastName: 'Pain' },
+              ['firstName']
+            )
+          ).toEqual({})
+        })
+      })
+    })
+
+    describe('when subscribed fields is not provided', () => {
+      describe('when values are not equal', () => {
+        it('should check all fields and return changed fields', () => {
+          expect(
+            getChangedFields(
+              { firstName: 'Bruce', lastName: 'Wayne' },
+              { firstName: 'Brook', lastName: 'Wayne' }
+            )
+          ).toEqual({ firstName: true })
+
+          expect(
+            getChangedFields(
+              { firstName: 'Bruce', lastName: 'Wayne' },
+              { firstName: 'Brook', lastName: 'Pain' }
+            )
+          ).toEqual({ firstName: true, lastName: true })
+        })
+      })
+
+      it('should check all fields and return empty object if values are equal', () => {
+        expect(
+          getChangedFields(
+            { firstName: 'Bruce', lastName: 'Wayne' },
+            { firstName: 'Bruce', lastName: 'Wayne' }
+          )
+        ).toEqual({})
+      })
+    })
+
+    it('should do shallow comparison', () => {
+      expect(
+        getChangedFields(
+          { items: [{ id: 1 }, { id: 2 }] },
+          { items: [{ id: 1 }, { id: 2 }] }
+        )
+      ).toEqual({ items: true })
+    })
+  })
+})