@toptal/picasso-forms 66.3.2 → 67.0.0

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

@@ -0,0 +1,226 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Rating Thumbs renders default Stars 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class=""
+    >
+      <form
+        class=""
+      >
+        <div
+          class="PicassoFormField-root"
+          data-field-has-error="false"
+        >
+          <div
+            class=""
+            id="stars"
+            type="number"
+          >
+            <label
+              class="PicassoRating-label PicassoRating-clickableLabel"
+              for="stars-1"
+            >
+              <span>
+                <svg
+                  class="PicassoSvgStar16-root PicassoRatingIcon-clickableIcon PicassoSvgStar16-yellow"
+                  style="min-width: 16px; min-height: 16px;"
+                  viewBox="0 0 16 16"
+                >
+                  <path
+                    d="m8 11.5-4.114 2.163.785-4.581-3.328-3.245 4.6-.669L8 1l2.057 4.168 4.6.669-3.328 3.245.785 4.581L8 11.5Zm0-1.13 2.786 1.465-.532-3.103 2.254-2.197-3.115-.453L8 3.26 6.607 6.082l-3.115.453 2.254 2.197-.532 3.103L8 10.37Z"
+                  />
+                </svg>
+              </span>
+              <input
+                class="PicassoRating-radio"
+                data-testid="stars-1"
+                id="stars-1"
+                name="stars"
+                type="radio"
+                value="1"
+              />
+            </label>
+            <label
+              class="PicassoRating-label PicassoRating-clickableLabel"
+              for="stars-2"
+            >
+              <span>
+                <svg
+                  class="PicassoSvgStar16-root PicassoRatingIcon-clickableIcon PicassoSvgStar16-yellow"
+                  style="min-width: 16px; min-height: 16px;"
+                  viewBox="0 0 16 16"
+                >
+                  <path
+                    d="m8 11.5-4.114 2.163.785-4.581-3.328-3.245 4.6-.669L8 1l2.057 4.168 4.6.669-3.328 3.245.785 4.581L8 11.5Zm0-1.13 2.786 1.465-.532-3.103 2.254-2.197-3.115-.453L8 3.26 6.607 6.082l-3.115.453 2.254 2.197-.532 3.103L8 10.37Z"
+                  />
+                </svg>
+              </span>
+              <input
+                class="PicassoRating-radio"
+                data-testid="stars-2"
+                id="stars-2"
+                name="stars"
+                type="radio"
+                value="2"
+              />
+            </label>
+            <label
+              class="PicassoRating-label PicassoRating-clickableLabel"
+              for="stars-3"
+            >
+              <span>
+                <svg
+                  class="PicassoSvgStar16-root PicassoRatingIcon-clickableIcon PicassoSvgStar16-yellow"
+                  style="min-width: 16px; min-height: 16px;"
+                  viewBox="0 0 16 16"
+                >
+                  <path
+                    d="m8 11.5-4.114 2.163.785-4.581-3.328-3.245 4.6-.669L8 1l2.057 4.168 4.6.669-3.328 3.245.785 4.581L8 11.5Zm0-1.13 2.786 1.465-.532-3.103 2.254-2.197-3.115-.453L8 3.26 6.607 6.082l-3.115.453 2.254 2.197-.532 3.103L8 10.37Z"
+                  />
+                </svg>
+              </span>
+              <input
+                class="PicassoRating-radio"
+                data-testid="stars-3"
+                id="stars-3"
+                name="stars"
+                type="radio"
+                value="3"
+              />
+            </label>
+            <label
+              class="PicassoRating-label PicassoRating-clickableLabel"
+              for="stars-4"
+            >
+              <span>
+                <svg
+                  class="PicassoSvgStar16-root PicassoRatingIcon-clickableIcon PicassoSvgStar16-yellow"
+                  style="min-width: 16px; min-height: 16px;"
+                  viewBox="0 0 16 16"
+                >
+                  <path
+                    d="m8 11.5-4.114 2.163.785-4.581-3.328-3.245 4.6-.669L8 1l2.057 4.168 4.6.669-3.328 3.245.785 4.581L8 11.5Zm0-1.13 2.786 1.465-.532-3.103 2.254-2.197-3.115-.453L8 3.26 6.607 6.082l-3.115.453 2.254 2.197-.532 3.103L8 10.37Z"
+                  />
+                </svg>
+              </span>
+              <input
+                class="PicassoRating-radio"
+                data-testid="stars-4"
+                id="stars-4"
+                name="stars"
+                type="radio"
+                value="4"
+              />
+            </label>
+            <label
+              class="PicassoRating-label PicassoRating-clickableLabel"
+              for="stars-5"
+            >
+              <span>
+                <svg
+                  class="PicassoSvgStar16-root PicassoRatingIcon-clickableIcon PicassoSvgStar16-yellow"
+                  style="min-width: 16px; min-height: 16px;"
+                  viewBox="0 0 16 16"
+                >
+                  <path
+                    d="m8 11.5-4.114 2.163.785-4.581-3.328-3.245 4.6-.669L8 1l2.057 4.168 4.6.669-3.328 3.245.785 4.581L8 11.5Zm0-1.13 2.786 1.465-.532-3.103 2.254-2.197-3.115-.453L8 3.26 6.607 6.082l-3.115.453 2.254 2.197-.532 3.103L8 10.37Z"
+                  />
+                </svg>
+              </span>
+              <input
+                class="PicassoRating-radio"
+                data-testid="stars-5"
+                id="stars-5"
+                name="stars"
+                type="radio"
+                value="5"
+              />
+            </label>
+            <input
+              class="PicassoRating-radio"
+              id="stars-reset"
+              name="stars"
+              type="radio"
+              value=""
+            />
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Rating Thumbs renders default Thumbs 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class=""
+    >
+      <form
+        class=""
+      >
+        <div
+          class="PicassoFormField-root"
+          data-field-has-error="false"
+        >
+          <div
+            class=""
+          >
+            <label
+              class="makeStyles-label"
+              for="0-posititve"
+            >
+              <svg
+                class="PicassoSvgThumbsUp16-root makeStyles-thumbs makeStyles-interactiveThumbs"
+                style="min-width: 16px; min-height: 16px;"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  d="M8.778.26 9.5.5a1.707 1.707 0 0 1 1.117 2.034l-.642 2.56 1.762-.319a3 3 0 0 1 3.488 3.488l-.628 3.453A4 4 0 0 1 10.662 15H9c-1.664 0-3.33-.333-5-1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h2.45L7.593.712A1 1 0 0 1 8.778.259Zm-.316.948-.01.015L5.02 7 5 6.999v6.307c1.341.464 2.673.695 4 .694h1.662a3 3 0 0 0 2.951-2.463l.628-3.452a2 2 0 0 0-2.326-2.326l-3.287.596.377-1.503.641-2.56a.707.707 0 0 0-.462-.843l-.722-.241ZM4 13V6.999L2 7v6h2Z"
+                />
+              </svg>
+              <input
+                class="makeStyles-radio"
+                data-testid="positive-thumb"
+                id="0-posititve"
+                name="thumbs"
+                type="radio"
+                value="positive"
+              />
+            </label>
+            <label
+              class="makeStyles-label"
+              for="0-negative"
+            >
+              <svg
+                class="PicassoSvgThumbsDown16-root makeStyles-thumbs makeStyles-interactiveThumbs"
+                style="min-width: 16px; min-height: 16px;"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  d="M7.003 1c1.664 0 3.33.333 5 1h2a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-2.45L8.41 15.288a1 1 0 0 1-1.185.453l-.722-.241a1.707 1.707 0 0 1-1.116-2.034l.641-2.56-1.761.319A3 3 0 0 1 .778 7.737l.628-3.453A4 4 0 0 1 5.342 1h1.661ZM12 9h2.003V3H12L12 9ZM7.003 2H5.342A3 3 0 0 0 2.39 4.463l-.628 3.452a2 2 0 0 0 2.326 2.326l3.287-.596-.377 1.503-.641 2.56a.707.707 0 0 0 .462.843l.723.241.008-.015L10.984 9H11V2.693A12.144 12.144 0 0 0 7.003 2Z"
+                />
+              </svg>
+              <input
+                class="makeStyles-radio"
+                data-testid="negative-thumb"
+                id="0-negative"
+                name="thumbs"
+                type="radio"
+                value="negative"
+              />
+            </label>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;

package/src/Rating/index.ts

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

package/src/Rating/test.tsx

@@ -0,0 +1,171 @@
+import React from 'react'
+import { render, fireEvent, waitFor, act } from '@toptal/picasso-test-utils'
+
+import type { RatingThumbsProps } from './Rating'
+import type { Props as FormProps } from '../Form'
+import { FormCompound as Form } from '../FormCompound'
+
+let defaultOnSubmit: jest.Mock = jest.fn()
+
+enum TestId {
+  SUBMIT_BUTTON = 'submit-button',
+  POSITIVE_THUMB = 'positive-thumb',
+  NEGATIVE_THUMB = 'negative-thumb',
+}
+
+const renderThumbsForm = (
+  props: {
+    form?: Partial<FormProps>
+    thumbs?: Partial<RatingThumbsProps>
+  } = {}
+) =>
+  render(
+    <Form onSubmit={defaultOnSubmit} {...props.form}>
+      <Form.Rating.Thumbs
+        name='thumbs'
+        testIds={{
+          positiveInput: TestId.POSITIVE_THUMB,
+          negativeInput: TestId.NEGATIVE_THUMB,
+        }}
+        {...props.thumbs}
+      />
+
+      <button type='submit' data-testid={TestId.SUBMIT_BUTTON}>
+        Submit
+      </button>
+    </Form>
+  )
+
+describe('Rating', () => {
+  beforeEach(() => {
+    defaultOnSubmit = jest.fn()
+  })
+
+  describe('Thumbs', () => {
+    it('renders default Thumbs', () => {
+      const { container } = render(
+        <Form onSubmit={defaultOnSubmit}>
+          <Form.Rating.Thumbs
+            name='thumbs'
+            testIds={{
+              positiveInput: TestId.POSITIVE_THUMB,
+              negativeInput: TestId.NEGATIVE_THUMB,
+            }}
+          />
+        </Form>
+      )
+
+      expect(container).toMatchSnapshot()
+    })
+
+    it('renders default Stars', () => {
+      const { container } = render(
+        <Form onSubmit={defaultOnSubmit}>
+          <Form.Rating.Stars name='stars' />
+        </Form>
+      )
+
+      expect(container).toMatchSnapshot()
+    })
+
+    describe('when submitting while required', () => {
+      it("don't show a validation error for negative values", async () => {
+        const { queryByText, getByTestId } = renderThumbsForm({
+          thumbs: { required: true },
+        })
+
+        fireEvent.click(getByTestId(TestId.NEGATIVE_THUMB))
+
+        await act(() => {
+          fireEvent.click(getByTestId(TestId.SUBMIT_BUTTON))
+        })
+
+        expect(
+          queryByText('Please complete this field.')
+        ).not.toBeInTheDocument()
+
+        expect(defaultOnSubmit).toHaveBeenCalledWith(
+          { thumbs: false },
+          expect.anything(),
+          expect.anything()
+        )
+        expect(defaultOnSubmit).toHaveBeenCalledTimes(1)
+      })
+    })
+
+    describe('when submitting with custom validation', () => {
+      it('validate both required when having a custom validation with preference', async () => {
+        const ERROR_MSG = 'Errata'
+        const { getByTestId, queryByText } = renderThumbsForm({
+          thumbs: { required: true, validate: () => ERROR_MSG },
+        })
+
+        await act(() => {
+          fireEvent.click(getByTestId(TestId.SUBMIT_BUTTON))
+        })
+
+        expect(queryByText('Please complete this field.')).toBeInTheDocument()
+
+        expect(defaultOnSubmit).toHaveBeenCalledTimes(0)
+      })
+
+      it('validate both required and having a custom validation', async () => {
+        const ERROR_MSG = 'Errata'
+        const { getByTestId, queryByText } = renderThumbsForm({
+          thumbs: { required: true, validate: () => ERROR_MSG },
+        })
+
+        fireEvent.click(getByTestId(TestId.NEGATIVE_THUMB))
+
+        await waitFor(() => {
+          fireEvent.click(getByTestId(TestId.SUBMIT_BUTTON))
+        })
+
+        expect(queryByText(ERROR_MSG)).toBeInTheDocument()
+
+        expect(defaultOnSubmit).toHaveBeenCalledTimes(0)
+      })
+
+      it('validate both required and having a custom validation, everythin ok', async () => {
+        const { getByTestId, queryByText } = renderThumbsForm({
+          thumbs: { required: true, validate: () => undefined },
+        })
+
+        fireEvent.click(getByTestId(TestId.NEGATIVE_THUMB))
+
+        await act(() => {
+          fireEvent.click(getByTestId(TestId.SUBMIT_BUTTON))
+        })
+
+        expect(
+          queryByText('Please complete this field.')
+        ).not.toBeInTheDocument()
+
+        expect(defaultOnSubmit).toHaveBeenCalledWith(
+          { thumbs: false },
+          expect.anything(),
+          expect.anything()
+        )
+        expect(defaultOnSubmit).toHaveBeenCalledTimes(1)
+      })
+    })
+
+    describe('when submitting with requiredPositive true', () => {
+      it("don't allow a negative value", async () => {
+        const { getByTestId, queryByText } = renderThumbsForm({
+          thumbs: { requirePositive: true },
+        })
+
+        fireEvent.click(getByTestId(TestId.NEGATIVE_THUMB))
+
+        await act(() => {
+          fireEvent.click(getByTestId(TestId.SUBMIT_BUTTON))
+        })
+
+        expect(queryByText('Please complete this field.')).toBeInTheDocument()
+
+        expect(defaultOnSubmit).toHaveBeenCalledTimes(0)
+      })
+    })
+  })
+})

package/src/RichTextEditor/RichTextEditor.tsx

@@ -0,0 +1,87 @@
+import type {
+  ASTType,
+  RichTextEditorProps,
+} from '@toptal/picasso-rich-text-editor'
+import { RichTextEditor as PicassoRichTextEditor } from '@toptal/picasso-rich-text-editor'
+import React, { useCallback, useState } from 'react'
+import type { Except } from 'type-fest/source/except'
+import { useForm } from 'react-final-form'
+
+import type { FieldProps } from '../FieldWrapper'
+import InputField from '../InputField'
+import FieldLabel from '../FieldLabel'
+import { useEnforceHighlightAutofill } from './hooks'
+
+type OverriddenProps = {
+  defaultValue?: ASTType
+  value?: never
+  initialValue?: never
+}
+
+export type Props = RichTextEditorProps &
+  Except<FieldProps<string>, keyof OverriddenProps> &
+  OverriddenProps
+
+type InternalProps = RichTextEditorProps & { value: string }
+
+export const RichTextEditor = (props: Props) => {
+  const { onChange, onFocus, defaultValue, label, titleCase, ...rest } = props
+
+  const { enforceHighlightAutofill, registerChangeOrFocus } =
+    useEnforceHighlightAutofill()
+  const [value, setValue] = useState('')
+  const {
+    mutators: { setHasMultilineCounter },
+  } = useForm()
+
+  // Because RichTextEditor doesn't have an value input we need to implement this
+  // as an compatibility layer between final-form
+  const handleOnChange = useCallback(
+    (newVal: string) => {
+      registerChangeOrFocus()
+      setValue(newVal)
+      onChange?.(newVal)
+    },
+    [onChange, setValue, registerChangeOrFocus]
+  )
+
+  const handleOnFocus = useCallback(() => {
+    registerChangeOrFocus()
+
+    onFocus?.()
+  }, [onFocus, registerChangeOrFocus])
+
+  const hiddenInputId = `${props.id}-hidden-input`
+
+  return (
+    <InputField<InternalProps>
+      value={value}
+      onChange={handleOnChange}
+      onFocus={handleOnFocus}
+      label={
+        label ? (
+          <FieldLabel
+            name={hiddenInputId}
+            required={props.required}
+            label={label}
+            titleCase={titleCase}
+            alignment='top'
+          />
+        ) : null
+      }
+      setHasMultilineCounter={setHasMultilineCounter}
+      {...rest}
+    >
+      {(inputProps: RichTextEditorProps) => (
+        <PicassoRichTextEditor
+          defaultValue={defaultValue}
+          hiddenInputId={hiddenInputId}
+          highlight={enforceHighlightAutofill ? 'autofill' : undefined}
+          {...inputProps}
+        />
+      )}
+    </InputField>
+  )
+}
+
+export default RichTextEditor

package/{RichTextEditor/hooks/index.d.ts → src/RichTextEditor/hooks/index.ts}

@@ -1 +1 @@
-export { useEnforceHighlightAutofill } from './use-enforce-highlight-autofill';
+export { useEnforceHighlightAutofill } from './use-enforce-highlight-autofill'

package/src/RichTextEditor/hooks/use-enforce-highlight-autofill.test.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { render, fireEvent } from '@toptal/picasso-test-utils'
+
+import { useEnforceHighlightAutofill } from './use-enforce-highlight-autofill'
+import { useFormConfig } from '../../FormConfig'
+
+jest.mock('../../FormConfig', () => ({
+  useFormConfig: jest.fn(),
+}))
+
+const mockedUseFormConfig = useFormConfig as jest.MockedFunction<
+  typeof useFormConfig
+>
+
+const TestComponent = () => {
+  const { enforceHighlightAutofill, registerChangeOrFocus } =
+    useEnforceHighlightAutofill()
+
+  return (
+    <>
+      <button onClick={registerChangeOrFocus}>trigger</button>
+      <div data-testid='enforce-highlight-autofill-status'>
+        {enforceHighlightAutofill ? 'true' : 'false'}
+      </div>
+    </>
+  )
+}
+
+describe('useEnforceHighlightAutofill', () => {
+  describe('when form does not highlight autofilled fields', () => {
+    it('does not enforce highlighting', () => {
+      mockedUseFormConfig.mockReturnValue({ highlightAutofill: false })
+      const { getByText, getByTestId } = render(<TestComponent />)
+      const button = getByText('trigger')
+      const autofillStatusContainer = getByTestId(
+        'enforce-highlight-autofill-status'
+      )
+
+      fireEvent.click(button)
+
+      // After first update
+      expect(autofillStatusContainer).toHaveTextContent('false')
+    })
+  })
+
+  describe('when form highlights autofilled fields', () => {
+    it('highlighting is enforced after first update and not enforced after following updates', async () => {
+      mockedUseFormConfig.mockReturnValue({ highlightAutofill: true })
+      const { getByText, getByTestId } = render(<TestComponent />)
+
+      const button = getByText('trigger')
+      const autofillStatusContainer = getByTestId(
+        'enforce-highlight-autofill-status'
+      )
+
+      fireEvent.click(button)
+
+      // After first update
+      expect(autofillStatusContainer).toHaveTextContent('true')
+
+      fireEvent.click(button)
+
+      // After second update
+      expect(autofillStatusContainer).toHaveTextContent('false')
+    })
+  })
+})

package/src/RichTextEditor/hooks/use-enforce-highlight-autofill.ts

@@ -0,0 +1,48 @@
+import { useCallback, useMemo, useState } from 'react'
+
+import { useFormConfig } from '../../FormConfig'
+
+/**
+ * This hook keeps the highlighted state for Rich Text Editor form fields after
+ * first `onChange` callback which is triggered by editor itself when initial value is
+ * provided. Starting from second `onChange` or first `onFocus` invocation (which are
+ * triggered by user) the field is no longer highlighted.
+ *
+ * Editor triggers the very first onChange callback by itself only when initial value
+ * is provided in order to propagate the value to wrapping form.
+ */
+
+/**
+ * After first two editor changes are tracked (the initial one and the one originated
+ * from user), hook stops responding due to performance reasons.
+ */
+const TRACKED_EVENTS_LIMIT = 2
+
+export const useEnforceHighlightAutofill = () => {
+  const { highlightAutofill } = useFormConfig()
+  const [timesChangeOrFocusTriggered, setTimesChangeOrFocusTriggered] =
+    useState(0)
+
+  const enforceHighlightAutofill = useMemo(() => {
+    if (!highlightAutofill) {
+      return false
+    }
+
+    return timesChangeOrFocusTriggered < 2
+  }, [highlightAutofill, timesChangeOrFocusTriggered])
+
+  const registerChangeOrFocus = useCallback(() => {
+    if (!highlightAutofill) {
+      return
+    }
+
+    if (timesChangeOrFocusTriggered <= TRACKED_EVENTS_LIMIT) {
+      setTimesChangeOrFocusTriggered(timesChangeOrFocusTriggered + 1)
+    }
+  }, [highlightAutofill, timesChangeOrFocusTriggered])
+
+  return {
+    enforceHighlightAutofill,
+    registerChangeOrFocus,
+  }
+}

package/src/RichTextEditor/index.ts

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

package/src/Select/Select.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import type { SelectProps, SelectValueType } from '@toptal/picasso'
+import { Select as PicassoSelect } from '@toptal/picasso'
+import { generateRandomStringOrGetEmptyInTest } from '@toptal/picasso-utils'
+
+import type { FieldProps } from '../Field'
+import InputField from '../InputField'
+import FieldLabel from '../FieldLabel'
+
+export type Props<
+  T extends SelectValueType,
+  M extends boolean = false
+> = SelectProps<T, M> & FieldProps<SelectProps<T, M>['value']>
+
+export const Select = <T extends SelectValueType, M extends boolean = false>(
+  props: Props<T, M>
+) => {
+  const { name, id = name, label, titleCase, ...rest } = props
+  const randomizedId = id ? generateRandomStringOrGetEmptyInTest(id) : undefined
+
+  return (
+    <InputField<SelectProps<any, any>>
+      {...rest}
+      name={name}
+      id={randomizedId}
+      label={
+        label ? (
+          <FieldLabel
+            name={randomizedId}
+            required={rest.required}
+            label={label}
+            titleCase={titleCase}
+          />
+        ) : null
+      }
+    >
+      {(selectProps: SelectProps) => {
+        return (
+          <PicassoSelect
+            {...selectProps}
+            id={randomizedId}
+            // if `id` is specified, we have to provide a not correct value for autoComplete, e.g. `none` to trick google chrome
+            autoComplete={id ? 'none' : rest.autoComplete || 'off'}
+          />
+        )
+      }}
+    </InputField>
+  )
+}
+
+Select.defaultProps = {}
+
+Select.displayName = 'Select'
+
+export default Select

package/src/Select/index.ts

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