@toptal/picasso-forms 66.3.2 → 67.0.0

package/src/FormConfig/test.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { screen, render, fireEvent } from '@toptal/picasso-test-utils'
+
+import { FormCompound as Form } from '../FormCompound'
+import type { 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

@@ -0,0 +1,80 @@
+import React, { useEffect, useMemo } from 'react'
+import type { InputProps } from '@toptal/picasso'
+import { Input as PicassoInput } from '@toptal/picasso'
+import { useForm } from 'react-final-form'
+
+import type { FieldProps } from '../Field'
+import FieldLabel from '../FieldLabel'
+import InputField from '../InputField'
+
+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']>
+
+const warnAutocompleteDisabledInput = (name?: string) => {
+  const autocompleteDisabled =
+    name && /^(((field|input)(_|-)?\d+)|tan|otp|title|captcha)$/.test(name)
+
+  if (autocompleteDisabled) {
+    console.warn(`
+In Chromium-based browsers, autocomplete might be disabled for input[name="${name}"].
+Known bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1255609
+    `)
+  }
+}
+
+export const Input = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
+  useEffect(() => {
+    // TODO: remove this console.warn completely when Chrome fixes autocomplete issue
+    // Regex is taken from https://source.chromium.org/chromium/chromium/src/+/main:components/autofill/core/browser/autocomplete_history_manager.cc;l=53;drc=1d2260f9ed19c755db1631b7fb9b1ba216b323dc
+    // according to https://bugs.chromium.org/p/chromium/issues/detail?id=1255609
+    warnAutocompleteDisabledInput(props.name)
+  }, [props.name])
+
+  const {
+    mutators: { setHasMultilineCounter },
+  } = useForm()
+
+  const { label, titleCase, ...rest } = props
+  const { multiline, rows, rowsMax } = props
+
+  const alignment = useMemo(() => {
+    if (!multiline) {
+      return 'middle'
+    }
+
+    if (Number(rows ?? 1) >= 2 || Number(rowsMax ?? 1) >= 2) {
+      return 'top'
+    }
+
+    return 'middle'
+  }, [multiline, rows, rowsMax])
+
+  return (
+    <InputField<FormInputProps>
+      {...rest}
+      setHasMultilineCounter={setHasMultilineCounter}
+      label={
+        label ? (
+          <FieldLabel
+            name={props.name}
+            required={props.required}
+            label={label}
+            titleCase={titleCase}
+            alignment={alignment}
+          />
+        ) : null
+      }
+    >
+      {(inputProps: InputProps) => <PicassoInput {...inputProps} ref={ref} />}
+    </InputField>
+  )
+})
+
+Input.defaultProps = {}
+
+Input.displayName = 'Input'
+
+export default Input

package/src/Input/index.ts

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

package/src/Input/test.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { render, fireEvent } from '@toptal/picasso-test-utils'
+import { Button } from '@toptal/picasso'
+
+import type { Props as FormProps } from '../Form'
+import { FormCompound as Form } from '../FormCompound'
+import type { 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()
+  })
+})

package/src/InputField/InputField.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import type { OutlinedInputStatus } from '@toptal/picasso'
+import type { FieldMetaState } from 'react-final-form'
+import { useField } from 'react-final-form'
+
+import type { Props as FieldProps } from '../Field'
+import Field from '../Field'
+import type { ValueType, IFormComponentProps } from '../FieldBase'
+import type { FormConfigProps } from '../FormConfig'
+import { useFormConfig } from '../FormConfig'
+import useFormInputReset from '../utils/use-form-input-reset'
+
+export const getInputStatus = <T extends ValueType>(
+  meta: FieldMetaState<T>,
+  formConfig: FormConfigProps
+): OutlinedInputStatus => {
+  if (formConfig.validateOnSubmit && meta.modifiedSinceLastSubmit) {
+    return 'default'
+  }
+
+  if (!meta.touched) {
+    return 'default'
+  }
+
+  if (meta.error) {
+    return 'error'
+  }
+
+  if (!meta.dirtySinceLastSubmit && meta.submitError) {
+    return 'error'
+  }
+
+  return formConfig.showValidState ? 'success' : 'default'
+}
+
+const InputField = <
+  TWrappedComponentProps extends IFormComponentProps,
+  TInputValue extends ValueType = TWrappedComponentProps['value']
+>(
+  props: FieldProps<TWrappedComponentProps, TInputValue>
+) => {
+  const { name, children, enableReset, onResetClick, ...rest } = props
+
+  const { meta, input } = useField<TInputValue, HTMLInputElement>(name)
+  const formConfig = useFormConfig()
+
+  const status = getInputStatus<TInputValue>(meta, formConfig)
+  const onFormInputResetClick = useFormInputReset<TInputValue>({
+    input,
+    enableReset,
+    onResetClick,
+  })
+
+  return (
+    <Field<IFormComponentProps, TInputValue>
+      status={status}
+      name={name}
+      onResetClick={onFormInputResetClick}
+      enableReset={enableReset}
+      {...rest}
+    >
+      {children}
+    </Field>
+  )
+}
+
+InputField.defaultProps = {}
+
+InputField.displayName = 'InputField'
+
+export default InputField

package/src/InputField/index.ts

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

package/src/InputField/test.ts

@@ -0,0 +1,105 @@
+import type { FieldMetaState } from 'react-final-form'
+
+import { getInputStatus } from './InputField'
+
+describe('getInputStatus', () => {
+  describe('when field has an error', () => {
+    it('returns "error"', () => {
+      const meta: FieldMetaState<string> = {
+        error: 'Some error message',
+        touched: true,
+      }
+
+      expect(getInputStatus(meta, { showValidState: false })).toBe('error')
+    })
+  })
+
+  it('returns "default" when field has not been touched', () => {
+    const meta: FieldMetaState<string> = {
+      touched: false,
+    }
+
+    expect(getInputStatus(meta, { showValidState: true })).toBe('default')
+  })
+
+  describe('when field has a submit error', () => {
+    it('returns "error" if the field is not dirty since last submit', () => {
+      const meta: FieldMetaState<string> = {
+        touched: true,
+        submitError: 'Some error message',
+        dirtySinceLastSubmit: false,
+      }
+
+      expect(getInputStatus(meta, { showValidState: false })).toBe('error')
+    })
+
+    describe('when field has been dirty since last submit', () => {
+      it('returns "success" if show valid state is enabled', () => {
+        const meta: FieldMetaState<string> = {
+          touched: true,
+          submitError: 'Some error message',
+          dirtySinceLastSubmit: true,
+        }
+
+        expect(getInputStatus(meta, { showValidState: true })).toBe('success')
+      })
+
+      it('returns "default" if show valid state is not enabled for the form', () => {
+        const meta: FieldMetaState<string> = {
+          touched: true,
+          submitError: 'Some error message',
+          dirtySinceLastSubmit: true,
+        }
+
+        expect(getInputStatus(meta, { showValidState: false })).toBe('default')
+      })
+    })
+  })
+
+  describe('when field has not been touched', () => {
+    it('returns "default"', () => {
+      const meta: FieldMetaState<string> = {
+        touched: false,
+      }
+
+      expect(getInputStatus(meta, { showValidState: false })).toBe('default')
+    })
+  })
+
+  describe('when field has no error and no submit error and touched', () => {
+    it('returns "success" if show valid state is enabled for the form', () => {
+      const meta: FieldMetaState<string> = {
+        error: undefined,
+        touched: true,
+        submitError: undefined,
+        dirtySinceLastSubmit: false,
+        modifiedSinceLastSubmit: false,
+      }
+
+      expect(getInputStatus(meta, { showValidState: true })).toBe('success')
+    })
+
+    it('returns "default" if show valid state is not enabled for the form', () => {
+      const meta: FieldMetaState<string> = {
+        error: undefined,
+        touched: true,
+        submitError: undefined,
+        dirtySinceLastSubmit: false,
+        modifiedSinceLastSubmit: false,
+      }
+
+      expect(getInputStatus(meta, { showValidState: false })).toBe('default')
+    })
+  })
+
+  describe('when validate on submit enabled and modified since last submit', () => {
+    it('returns "default"', () => {
+      const meta: FieldMetaState<string> = {
+        modifiedSinceLastSubmit: true,
+        submitError: 'Some error message',
+      }
+
+      expect(getInputStatus(meta, { validateOnSubmit: true })).toBe('default')
+    })
+  })
+})

package/src/NumberInput/NumberInput.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import type { NumberInputProps } from '@toptal/picasso'
+import { NumberInput as PicassoNumberInput } from '@toptal/picasso'
+import type { FieldValidator } from 'final-form'
+
+import { validators } from '../utils'
+import type { FieldProps } from '../Field'
+import FieldLabel from '../FieldLabel'
+import InputField from '../InputField'
+
+export type Props = NumberInputProps & FieldProps<NumberInputProps['value']>
+
+const MIN = -2147483648
+const MAX = 2147483647
+
+const { composeValidators } = validators
+
+export const NumberInput = (props: Props) => {
+  const { min = MIN, max = MAX, validate, label, titleCase, ...rest } = props
+
+  const validateNumberLimits: FieldValidator<
+    NumberInputProps['value']
+  > = value => {
+    if (Number(value) > max) {
+      return `Must be less than or equal to ${max}.`
+    }
+    if (Number(value) < min) {
+      return `Must be greater than or equal to ${min}.`
+    }
+  }
+
+  return (
+    <InputField<NumberInputProps>
+      {...rest}
+      validate={composeValidators([validateNumberLimits, validate])}
+      label={
+        label ? (
+          <FieldLabel
+            name={props.name}
+            required={props.required}
+            label={label}
+            titleCase={titleCase}
+          />
+        ) : null
+      }
+    >
+      {(inputProps: NumberInputProps) => {
+        return <PicassoNumberInput {...inputProps} />
+      }}
+    </InputField>
+  )
+}
+
+NumberInput.defaultProps = {}
+
+NumberInput.displayName = 'NumberInput'
+
+export default NumberInput

package/src/NumberInput/index.ts

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

package/src/PasswordInput/FieldRenderer.tsx

@@ -0,0 +1,36 @@
+import type { FocusEvent } from 'react'
+import React, { useCallback } from 'react'
+import type { PasswordInputProps } from '@toptal/picasso'
+import { PasswordInput as PicassoPasswordInput } from '@toptal/picasso'
+
+interface FieldRendererProps extends PasswordInputProps {
+  onShowContent: () => void
+  onHideContent: () => void
+}
+const FieldRenderer = (props: FieldRendererProps) => {
+  const { onFocus, onBlur, onShowContent, onHideContent, ...rest } = props
+
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      onFocus?.(event)
+
+      onShowContent()
+    },
+    [onFocus, onShowContent]
+  )
+
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      onBlur?.(event)
+
+      onHideContent()
+    },
+    [onBlur, onHideContent]
+  )
+
+  return (
+    <PicassoPasswordInput {...rest} onFocus={handleFocus} onBlur={handleBlur} />
+  )
+}
+
+export default FieldRenderer

package/src/PasswordInput/PasswordInput.tsx

@@ -0,0 +1,144 @@
+import type { ReactNode } from 'react'
+import React, { useEffect, useState, useCallback } from 'react'
+import type { PasswordInputProps } from '@toptal/picasso'
+import { FieldRequirements } from '@toptal/picasso'
+import type { FieldValidator } from 'final-form'
+
+import { validators } from '../utils'
+import type { FieldProps } from '../Field'
+import FieldLabel from '../FieldLabel'
+import passwordValidators from './validators'
+import InputField from '../InputField'
+import FieldRenderer from './FieldRenderer'
+
+export type Props = PasswordInputProps &
+  FieldProps<PasswordInputProps['value']> & { hideRequirements?: boolean }
+
+const { composeValidators } = validators
+
+const ANIMATION_TIMEOUT = 500 // same as in Picasso/FieldRequirements
+
+const validatePassword: FieldValidator<PasswordInputProps['value']> = (
+  value?: string
+) => {
+  if (!value) {
+    return undefined
+  }
+
+  const isValidPassword =
+    passwordValidators.atLeastEightCharacters(value) &&
+    passwordValidators.atLeastOneNumber(value) &&
+    passwordValidators.atLeastOneUpperCaseCharacter(value) &&
+    passwordValidators.atLeastOneLowerCaseCharacter(value) &&
+    passwordValidators.atLeastOneSpecialCharacter(value)
+
+  return isValidPassword ? undefined : 'Please enter a valid password.'
+}
+
+export const PasswordInput = ({
+  validate,
+  hideRequirements,
+  ...rest
+}: Props) => {
+  const [focused, setFocused] = useState(false)
+  const [showRequirements, setShowRequirements] = useState(false)
+
+  useEffect(() => {
+    if (!focused) {
+      // Hide the requirements after a short delay
+      const timeout = setTimeout(() => {
+        setShowRequirements(false)
+      }, ANIMATION_TIMEOUT)
+
+      return () => {
+        clearTimeout(timeout)
+      }
+    }
+
+    setShowRequirements(true)
+  }, [focused])
+
+  const validationsObject = hideRequirements
+    ? validate
+    : composeValidators([validatePassword, validate])
+
+  const renderFieldRequirements: ({
+    value,
+    error,
+  }: {
+    value?: string
+    error?: boolean
+  }) => ReactNode = ({ value, error }) => (
+    <FieldRequirements<string>
+      value={value}
+      open={showRequirements}
+      error={error}
+      description='Please make sure that your password contains:'
+      timeout={ANIMATION_TIMEOUT}
+      requirements={[
+        {
+          message: 'At least 8 characters',
+          validator: passwordValidators.atLeastEightCharacters,
+        },
+        {
+          message: '1 number',
+          validator: passwordValidators.atLeastOneNumber,
+        },
+        {
+          message: '1 uppercase character',
+          validator: passwordValidators.atLeastOneUpperCaseCharacter,
+        },
+        {
+          message: '1 special character',
+          validator: passwordValidators.atLeastOneSpecialCharacter,
+        },
+        {
+          message: '1 lowercase character',
+          validator: passwordValidators.atLeastOneLowerCaseCharacter,
+        },
+      ]}
+    />
+  )
+
+  const handleShowContent = useCallback(() => {
+    setFocused(true)
+  }, [])
+
+  const handleHideContent = useCallback(() => {
+    setFocused(false)
+  }, [])
+
+  return (
+    <InputField<PasswordInputProps>
+      {...rest}
+      validate={validationsObject}
+      renderFieldRequirements={
+        !hideRequirements ? renderFieldRequirements : undefined
+      }
+      label={
+        rest.label ? (
+          <FieldLabel
+            name={rest.name}
+            required={rest.required}
+            label={rest.label}
+            titleCase={rest.titleCase}
+          />
+        ) : null
+      }
+    >
+      {(inputProps: PasswordInputProps) => {
+        return (
+          <FieldRenderer
+            {...inputProps}
+            onHideContent={handleHideContent}
+            onShowContent={handleShowContent}
+          />
+        )
+      }}
+    </InputField>
+  )
+}
+
+PasswordInput.displayName = 'PasswordInput'
+
+export default PasswordInput

package/src/PasswordInput/index.ts

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

package/src/PasswordInput/test.ts

@@ -0,0 +1,45 @@
+import passwordValidators from './validators'
+
+const {
+  atLeastEightCharacters,
+  atLeastOneUpperCaseCharacter,
+  atLeastOneLowerCaseCharacter,
+  atLeastOneNumber,
+  atLeastOneSpecialCharacter,
+} = passwordValidators
+
+describe('PasswordInput field requirements', () => {
+  describe('atLeastEightCharacters', () => {
+    it('test string to have at least eight characters', () => {
+      expect(atLeastEightCharacters('1234567')).toBe(false)
+      expect(atLeastEightCharacters('12345678')).toBe(true)
+    })
+  })
+
+  describe('atLeastOneUpperCaseCharacter', () => {
+    it('test string to have at least one uppercase character', () => {
+      expect(atLeastOneUpperCaseCharacter('asdfgh')).toBe(false)
+      expect(atLeastOneUpperCaseCharacter('asDfgh')).toBe(true)
+    })
+  })
+
+  describe('atLeastOneLowerCaseCharacter', () => {
+    it('test string to have at least one lowercase character', () => {
+      expect(atLeastOneLowerCaseCharacter('ASDFGH')).toBe(false)
+      expect(atLeastOneLowerCaseCharacter('ASdFGH')).toBe(true)
+    })
+  })
+
+  describe('atLeastOneNumber', () => {
+    it('test string to have at least one number', () => {
+      expect(atLeastOneNumber('asdfgh')).toBe(false)
+      expect(atLeastOneNumber('asdfgh1')).toBe(true)
+    })
+  })
+  describe('atLeastOneSpecialCharacter', () => {
+    it('test string to have at least one special character', () => {
+      expect(atLeastOneSpecialCharacter('asdfgh')).toBe(false)
+      expect(atLeastOneSpecialCharacter('asd*fgh')).toBe(true)
+    })
+  })
+})

package/src/PasswordInput/validators.ts

@@ -0,0 +1,28 @@
+const atLeastEightCharacters = (value: string) => {
+  return value.length >= 8
+}
+
+const atLeastOneUpperCaseCharacter = (value: string) => {
+  return /[A-Z]/.test(value)
+}
+
+const atLeastOneLowerCaseCharacter = (value: string) => {
+  return /[a-z]/.test(value)
+}
+
+const atLeastOneNumber = (value: string) => {
+  return /[0-9]/.test(value)
+}
+
+const atLeastOneSpecialCharacter = (value: string) => {
+  // eslint-disable-next-line no-useless-escape
+  return /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(value)
+}
+
+export default {
+  atLeastEightCharacters,
+  atLeastOneUpperCaseCharacter,
+  atLeastOneLowerCaseCharacter,
+  atLeastOneNumber,
+  atLeastOneSpecialCharacter,
+}

package/src/Radio/Radio.tsx

@@ -0,0 +1,25 @@
+import React, { useContext } from 'react'
+import type { RadioProps } from '@toptal/picasso'
+import { Radio as PicassoRadio } from '@toptal/picasso'
+import { Field } from 'react-final-form'
+
+import { RadioGroupContext } from '../RadioGroup'
+
+// Intersection with the type { name?: string } is needed here because of
+// TS compiler issue https://github.com/microsoft/TypeScript/issues/34793
+export type Props = RadioProps & {
+  name?: string
+}
+
+const Radio = ({ name, ...rest }: Props) => {
+  const groupName = useContext(RadioGroupContext)
+
+  return (
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    <Field name={name || groupName!} type='radio' value={rest.value}>
+      {({ input }) => <PicassoRadio checked={input.checked} {...rest} />}
+    </Field>
+  )
+}
+
+export default Radio