@toptal/picasso-forms 66.3.2 → 67.0.0

package/src/Field/Field.tsx

@@ -0,0 +1,196 @@
+import type { ChangeEvent, FocusEvent } from 'react'
+import React, { useMemo } from 'react'
+import type {
+  FieldProps as FinalFieldProps,
+  FieldRenderProps,
+} from 'react-final-form'
+import { useField } from 'react-final-form'
+import type { OutlinedInputStatus } from '@toptal/picasso'
+import { Form as PicassoForm } from '@toptal/picasso'
+import type { TextLabelProps } from '@toptal/picasso-shared'
+import { detect } from 'detect-browser'
+
+import { useFormConfig } from '../FormConfig'
+import { validators, useFieldValidation } from '../utils'
+import type { ValueType, IFormComponentProps } from '../FieldBase'
+
+const { composeValidators, required: requiredValidator } = validators
+
+export type FieldProps<TInputValue> = FinalFieldProps<
+  TInputValue,
+  FieldRenderProps<TInputValue, HTMLInputElement>,
+  HTMLInputElement
+> &
+  TextLabelProps
+
+export type Props<
+  TWrappedComponentProps extends IFormComponentProps,
+  TInputValue
+> = TWrappedComponentProps &
+  FieldProps<TInputValue> & {
+    name: string
+    type?: string
+    label?: React.ReactNode
+    status?: OutlinedInputStatus
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    children: (props: any) => React.ReactNode
+    renderFieldRequirements?: (props: {
+      value?: TInputValue
+      error?: boolean
+    }) => React.ReactNode
+  }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const getValidators = (required: boolean, validate?: any) => {
+  if (required && validate) {
+    return composeValidators([requiredValidator, validate])
+  }
+
+  if (required && !validate) {
+    return requiredValidator
+  }
+
+  return validate
+}
+
+const isFirefox = detect()?.name === 'firefox'
+
+const Field = <
+  TWrappedComponentProps extends IFormComponentProps,
+  TInputValue extends ValueType = TWrappedComponentProps['value']
+>(
+  props: Props<TWrappedComponentProps, TInputValue>
+) => {
+  const {
+    type,
+    hint,
+    label,
+    required,
+    'data-testid': dataTestId,
+    renderFieldRequirements,
+    status,
+    // 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,
+    autoSaveIndicator,
+    ...rest
+  } = props
+
+  const { validateOnSubmit: shouldValidateOnSubmit, highlightAutofill } =
+    useFormConfig()
+  const validators = useMemo(
+    () => getValidators(required, validate),
+    [required, validate]
+  )
+
+  const { meta, input } = useField<TInputValue>(name, {
+    validate: shouldValidateOnSubmit ? undefined : validators,
+    type,
+    afterSubmit,
+    allowNull,
+    beforeSubmit,
+    data,
+    defaultValue,
+    format,
+    formatOnBlur,
+    initialValue,
+    isEqual,
+    parse,
+    subscription,
+    validateFields,
+    value,
+  })
+
+  const error = useFieldValidation({
+    name,
+    meta,
+    validators,
+    shouldValidateOnSubmit,
+  })
+
+  const shouldHighlightAutofill =
+    highlightAutofill && !meta.visited && meta.pristine && input.value
+
+  const childProps: Record<string, unknown> = {
+    id,
+    status,
+    ...rest,
+    ...input,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onChange: (event: ChangeEvent<HTMLElement> | any) => {
+      if (isFirefox && event?.target) {
+        /**
+         * The fix for autofill in Firefox, it's taken from:
+         * https://github.com/facebook/react/issues/18986#issuecomment-636354428
+         * https://github.com/facebook/react/issues/15739
+         */
+        Object.defineProperty(event.target, 'defaultValue', {
+          configurable: true,
+          get() {
+            return defaultValue ?? ''
+          },
+          set() {},
+        })
+      }
+
+      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)
+      }
+    },
+    ...(shouldHighlightAutofill ? { highlight: 'autofill' } : {}),
+  }
+
+  return (
+    <PicassoForm.Field
+      error={error}
+      hint={hint}
+      data-testid={dataTestId}
+      fieldRequirements={renderFieldRequirements?.({
+        value: input.value,
+        error: status === 'error',
+      })}
+      autoSaveIndicator={autoSaveIndicator}
+      hasMultilineCounter={meta.data?.hasMultilineCounter}
+    >
+      {label}
+      {children(childProps)}
+    </PicassoForm.Field>
+  )
+}
+
+Field.defaultProps = {}
+
+Field.displayName = 'Field'
+
+export default Field

package/src/Field/index.ts

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

package/src/FieldBase/index.ts

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

package/src/FieldBase/types.ts

@@ -0,0 +1,23 @@
+import type {
+  DateOrDateRangeType,
+  FileUpload,
+  AvatarUploadFileUpload,
+  AutocompleteItem as Item,
+} from '@toptal/picasso'
+
+export type ValueType =
+  | string
+  | string[]
+  | number
+  | boolean
+  | null
+  | undefined
+  | AvatarUploadFileUpload
+  | FileUpload[]
+  | DateOrDateRangeType
+  | Item
+  | Item[]
+
+export interface IFormComponentProps {
+  value?: ValueType
+}

package/src/FieldLabel/FieldLabel.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import type { RequiredDecoration } from '@toptal/picasso'
+import { Form as PicassoForm } from '@toptal/picasso'
+import type { TextLabelProps } from '@toptal/picasso-shared'
+
+import type { RequiredVariant } from '../FormConfig'
+import { useFormConfig } from '../FormConfig'
+
+export type Props = {
+  name?: string
+  label?: React.ReactNode
+  required?: boolean
+  alignment?: 'top' | 'middle'
+} & TextLabelProps
+
+const getRequiredDecoration = (
+  required?: boolean,
+  requiredVariant?: RequiredVariant
+): RequiredDecoration | undefined => {
+  const showAsterisk = required && requiredVariant === 'asterisk'
+
+  if (showAsterisk) {
+    return 'asterisk'
+  }
+
+  const showOptional =
+    !required && (!requiredVariant || requiredVariant === 'default')
+
+  if (showOptional) {
+    return 'optional'
+  }
+}
+
+const FieldLabel = (props: Props) => {
+  const { label, required, titleCase, name, alignment } = props
+
+  const formConfig = useFormConfig()
+
+  if (!label) {
+    return null
+  }
+
+  const requiredDecoration = getRequiredDecoration(
+    required,
+    formConfig.requiredVariant
+  )
+
+  return (
+    <PicassoForm.Label
+      requiredDecoration={requiredDecoration}
+      htmlFor={name}
+      titleCase={titleCase}
+      alignment={alignment}
+    >
+      {label}
+    </PicassoForm.Label>
+  )
+}
+
+FieldLabel.defaultProps = {}
+
+FieldLabel.displayName = 'FieldLabel'
+
+export default FieldLabel

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FieldLabel renders default field label 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <label
+      class="PicassoFormLabel-root"
+      for="name"
+    >
+      <span
+        class="PicassoFormLabel-medium"
+      >
+        label
+         (optional)
+      </span>
+    </label>
+  </div>
+</div>
+`;

package/src/FieldLabel/index.ts

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

package/src/FieldLabel/test.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { render } from '@toptal/picasso-test-utils'
+
+import { FormCompound as Form } from '../FormCompound'
+import FieldLabel from './FieldLabel'
+
+describe('FieldLabel', () => {
+  it('renders default field label', () => {
+    const { container } = render(<FieldLabel name='name' label='label' />)
+
+    expect(container).toMatchSnapshot()
+  })
+
+  describe('optional required variant', () => {
+    it('renders label with optional mark', () => {
+      const { queryByText } = render(<FieldLabel name='name' label='label' />)
+
+      expect(queryByText('label (optional)')).toBeInTheDocument()
+    })
+
+    it('renders label without optional mark', () => {
+      const { queryByText } = render(
+        <FieldLabel name='name' label='label' required />
+      )
+
+      expect(queryByText('label (optional)')).not.toBeInTheDocument()
+      expect(queryByText('label')).toBeInTheDocument()
+    })
+  })
+
+  describe('asterisk required variant', () => {
+    it('renders label without asterisk', () => {
+      const { queryByText } = render(
+        <Form.ConfigProvider value={{ requiredVariant: 'asterisk' }}>
+          <FieldLabel name='name' label='label' />
+        </Form.ConfigProvider>
+      )
+
+      expect(queryByText('*')).not.toBeInTheDocument()
+    })
+
+    it('renders label with asterisk', () => {
+      const { queryByText } = render(
+        <Form.ConfigProvider value={{ requiredVariant: 'asterisk' }}>
+          <FieldLabel name='name' label='label' required />
+        </Form.ConfigProvider>
+      )
+
+      expect(queryByText('*')).toBeInTheDocument()
+    })
+  })
+})

package/src/FieldWrapper/FieldWrapper.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react'
+import React from 'react'
+
+import type { Props as FieldProps } from '../Field'
+import type { ValueType, IFormComponentProps } from '../FieldBase'
+import FieldLabel from '../FieldLabel'
+import InputField from '../InputField'
+
+export type Props<TWrappedComponentProps, TInputValue> = Omit<
+  FieldProps<TWrappedComponentProps, TInputValue>,
+  'label'
+> & {
+  label?: ReactNode
+}
+
+const FieldWrapper = <
+  TWrappedComponentProps extends IFormComponentProps,
+  TInputValue extends ValueType = TWrappedComponentProps['value']
+>(
+  props: Props<TWrappedComponentProps, TInputValue>
+) => {
+  const { label, name, titleCase, children, ...rest } = props
+
+  return (
+    <InputField<IFormComponentProps, TInputValue>
+      {...rest}
+      name={name}
+      label={
+        label ? (
+          <FieldLabel
+            name={props.name}
+            required={props.required}
+            label={label}
+            titleCase={titleCase}
+          />
+        ) : null
+      }
+    >
+      {children}
+    </InputField>
+  )
+}
+
+FieldWrapper.defaultProps = {}
+
+FieldWrapper.displayName = 'FieldWrapper'
+
+export default FieldWrapper

package/src/FieldWrapper/index.ts

@@ -0,0 +1,6 @@
+export { default } from './FieldWrapper'
+export * from './FieldWrapper'
+
+// this is done to keep backwards compatibility
+// when FieldWrapper was refactored and moved to Field component
+export type { FieldProps } from '../Field'

package/src/FieldWrapper/story/index.jsx

@@ -0,0 +1,153 @@
+import FieldWrapper from '../FieldWrapper'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const componentDocs = PicassoBook.createComponentDocs(
+  FieldWrapper,
+  'FieldWrapper',
+  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",
+    },
+    status: {
+      name: 'status',
+      type: {
+        name: 'OutlinedFieldStatus',
+        description: '"default" | "error" | "success"',
+      },
+      description:
+        'The status of the field to be used by the OutlinedInput component',
+    },
+    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',
+    },
+    autoSaveIndicator: {
+      name: 'autoSaveIndicator',
+      type: 'ReactNode',
+      description: 'instance of FormAutoSaveIndicator component',
+    },
+  }
+)
+
+export default {
+  componentDocs,
+}

package/src/FieldWrapper/test.tsx

@@ -0,0 +1,32 @@
+import { Input } from '@toptal/picasso'
+import { act, render, fireEvent } from '@toptal/picasso-test-utils'
+import { noop } from '@toptal/picasso-utils'
+import React from 'react'
+
+import { FormCompound as Form } from '../FormCompound'
+import FieldWrapper from './FieldWrapper'
+
+const renderFieldWrapper = () =>
+  render(
+    <Form onSubmit={noop}>
+      <FieldWrapper name='name' required>
+        {(inputProps: any) => <Input {...inputProps} />}
+      </FieldWrapper>
+
+      <Form.SubmitButton data-testid='submit'>Submit</Form.SubmitButton>
+    </Form>
+  )
+
+describe('FieldWrapper', () => {
+  describe('when there is a field error', () => {
+    it('passes status to its children', () => {
+      const { getByTestId, getByText } = renderFieldWrapper()
+
+      act(() => {
+        fireEvent.click(getByTestId('submit'))
+      })
+
+      expect(getByText('Please complete this field.')).toBeVisible()
+    })
+  })
+})

package/src/FileInput/FileInput.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import type { FileInputProps, FileUpload } from '@toptal/picasso'
+import { FileInput as PicassoFileInput } from '@toptal/picasso'
+import type { FieldInputProps as FinalFieldInputProps } from 'react-final-form'
+
+import type { FieldProps } from '../Field'
+import PicassoField from '../Field'
+import FieldLabel from '../FieldLabel'
+
+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 (
+    <PicassoField<FileInputProps, FileUpload[] | undefined>
+      {...props}
+      label={
+        props.label ? (
+          <FieldLabel
+            name={props.name}
+            required={props.required}
+            label={props.label}
+            titleCase={props.titleCase}
+          />
+        ) : null
+      }
+    >
+      {({
+        // omit 'highlight' as it is used only for classic inputs
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        highlight,
+        ...inputProps
+      }) => (
+        <PicassoFileInput
+          {...inputProps}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+            handleChange(event, inputProps.value, inputProps.onChange)
+          }}
+          onRemove={(_: string, index: number) => {
+            handleRemove(index, inputProps.value, inputProps.onChange)
+          }}
+        />
+      )}
+    </PicassoField>
+  )
+}
+
+FileInput.defaultProps = {}
+
+FileInput.displayName = 'FileInput'
+
+export default FileInput

package/src/FileInput/index.ts

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