@toptal/picasso-forms 66.3.2 → 67.0.0

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

@@ -0,0 +1,259 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form.Checkbox default render for checkboxes in a group 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class=""
+    >
+      <form
+        class=""
+      >
+        <div
+          class="PicassoFormField-root"
+          data-field-has-error="false"
+        >
+          <label
+            class="PicassoFormLabel-root"
+            for="checkbox-group"
+          >
+            <span
+              class="PicassoFormLabel-medium"
+            >
+              checkbox-group-label
+               (optional)
+            </span>
+          </label>
+          <div
+            class="MuiFormGroup-root PicassoCheckboxGroup-root PicassoCheckboxGroup-root"
+            name="checkbox-group"
+          >
+            <div
+              class="MuiGrid-root PicassoCheckboxGroup-grid MuiGrid-container PicassoGrid-container MuiGrid-direction-xs MuiGrid-align-items-xs-flex"
+            >
+              <div
+                class="MuiGrid-root PicassoCheckboxGroup-gridItem MuiGrid-item"
+              >
+                <label
+                  class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+                >
+                  <span
+                    class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiCheckbox-root PicassoCheckbox-root MuiCheckbox-colorSecondary PicassoCheckbox-withLabel MuiIconButton-colorSecondary"
+                    >
+                      <span
+                        class="MuiIconButton-label"
+                      >
+                        <input
+                          class="PrivateSwitchBase-input"
+                          data-indeterminate="false"
+                          name="checkbox-group"
+                          type="checkbox"
+                          value=""
+                        />
+                        <div
+                          class="PicassoCheckbox-uncheckedIcon"
+                        />
+                      </span>
+                    </span>
+                  </span>
+                  <span
+                    class="PicassoFormLabel-root PicassoFormLabel-inline PicassoFormControlLabel-label PicassoCheckbox-label"
+                  >
+                    <span
+                      class="PicassoFormLabel-medium"
+                    >
+                      checkbox-label-0
+                    </span>
+                  </span>
+                </label>
+              </div>
+              <div
+                class="MuiGrid-root PicassoCheckboxGroup-gridItem MuiGrid-item"
+              >
+                <label
+                  class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+                >
+                  <span
+                    class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiCheckbox-root PicassoCheckbox-root MuiCheckbox-colorSecondary PicassoCheckbox-withLabel MuiIconButton-colorSecondary"
+                    >
+                      <span
+                        class="MuiIconButton-label"
+                      >
+                        <input
+                          class="PrivateSwitchBase-input"
+                          data-indeterminate="false"
+                          name="checkbox-group"
+                          type="checkbox"
+                          value=""
+                        />
+                        <div
+                          class="PicassoCheckbox-uncheckedIcon"
+                        />
+                      </span>
+                    </span>
+                  </span>
+                  <span
+                    class="PicassoFormLabel-root PicassoFormLabel-inline PicassoFormControlLabel-label PicassoCheckbox-label"
+                  >
+                    <span
+                      class="PicassoFormLabel-medium"
+                    >
+                      checkbox-label-1
+                    </span>
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Form.Checkbox default render for single checkbox 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class=""
+    >
+      <form
+        class=""
+      >
+        <div
+          class="PicassoFormField-root"
+          data-field-has-error="false"
+          data-testid="single-checkbox"
+        >
+          <label
+            class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+          >
+            <span
+              class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
+            >
+              <span
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiCheckbox-root PicassoCheckbox-root MuiCheckbox-colorSecondary PicassoCheckbox-withLabel MuiIconButton-colorSecondary"
+              >
+                <span
+                  class="MuiIconButton-label"
+                >
+                  <input
+                    class="PrivateSwitchBase-input"
+                    data-indeterminate="false"
+                    id="single-checkbox"
+                    name="single-checkbox"
+                    type="checkbox"
+                    value=""
+                  />
+                  <div
+                    class="PicassoCheckbox-uncheckedIcon"
+                  />
+                </span>
+              </span>
+            </span>
+            <span
+              class="PicassoFormLabel-root PicassoFormLabel-inline PicassoFormControlLabel-label PicassoCheckbox-label"
+            >
+              <span
+                class="PicassoFormLabel-medium"
+              >
+                The checkbox label
+              </span>
+            </span>
+          </label>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Form.Checkbox required with asterisk single checkbox 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class=""
+    >
+      <form
+        class=""
+      >
+        <div
+          class="PicassoFormField-root"
+          data-field-has-error="false"
+          data-testid="single-checkbox"
+        >
+          <label
+            class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+          >
+            <span
+              class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
+            >
+              <span
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiCheckbox-root PicassoCheckbox-root MuiCheckbox-colorSecondary PicassoCheckbox-withLabel MuiIconButton-colorSecondary"
+              >
+                <span
+                  class="MuiIconButton-label"
+                >
+                  <input
+                    class="PrivateSwitchBase-input"
+                    data-indeterminate="false"
+                    id="single-checkbox"
+                    name="single-checkbox"
+                    type="checkbox"
+                    value=""
+                  />
+                  <div
+                    class="PicassoCheckbox-uncheckedIcon"
+                  />
+                </span>
+              </span>
+            </span>
+            <span
+              class="PicassoFormLabel-root PicassoFormLabel-inline PicassoFormControlLabel-label PicassoCheckbox-label"
+            >
+              <span
+                class="PicassoFormLabel-medium"
+              >
+                <span
+                  class="PicassoFormLabel-asterisk"
+                >
+                  *
+                </span>
+                The checkbox label
+              </span>
+            </span>
+          </label>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Form.Checkbox when required prop is passed does not set "required" attribute to input tag, to avoid Chrome tooltip 1`] = `
+<input
+  class="PrivateSwitchBase-input"
+  data-indeterminate="false"
+  id="single-checkbox"
+  name="single-checkbox"
+  type="checkbox"
+  value=""
+/>
+`;

package/src/Checkbox/index.ts

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

package/src/Checkbox/test.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import { render } from '@toptal/picasso-test-utils'
+
+import type { FormConfigProps } from '../FormConfig'
+import { FormCompound as Form } from '../FormCompound'
+import CheckboxGroup from '../CheckboxGroup'
+import type { Props } from './Checkbox'
+import { Checkbox } from './Checkbox'
+
+const renderCheckbox = (
+  { required, titleCase }: Props,
+  formConfig: FormConfigProps = {}
+) =>
+  render(
+    <Form.ConfigProvider value={formConfig}>
+      <Form onSubmit={() => {}}>
+        <Checkbox
+          name='single-checkbox'
+          label='The checkbox label'
+          value='checkbox-value'
+          data-testid='single-checkbox'
+          required={required}
+          titleCase={titleCase}
+        />
+      </Form>
+    </Form.ConfigProvider>
+  )
+
+const renderCheckboxInGroup = () =>
+  render(
+    <Form onSubmit={() => {}}>
+      <CheckboxGroup name='checkbox-group' label='checkbox-group-label'>
+        <Checkbox label='checkbox-label-0' value='checkbox-value-0' />
+        <Checkbox label='checkbox-label-1' value='checkbox-value-1' />
+      </CheckboxGroup>
+    </Form>
+  )
+
+describe('Form.Checkbox', () => {
+  it('default render for single checkbox', () => {
+    const { container } = renderCheckbox({})
+
+    expect(container).toMatchSnapshot()
+  })
+
+  describe('when required prop is passed', () => {
+    it('does not set "required" attribute to input tag, to avoid Chrome tooltip', () => {
+      const { container } = renderCheckbox({})
+
+      expect(
+        container.querySelector('[name="single-checkbox"]')
+      ).toMatchSnapshot()
+    })
+  })
+
+  it('default render for checkboxes in a group', () => {
+    const { container } = renderCheckboxInGroup()
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('required with asterisk single checkbox', () => {
+    const { container } = renderCheckbox(
+      {
+        required: true,
+      },
+      {
+        requiredVariant: 'asterisk',
+      }
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('never shows (optional) postfix for single checkbox', () => {
+    const { getByTestId } = renderCheckbox({})
+
+    expect(getByTestId('single-checkbox')).not.toHaveTextContent('(optional)')
+  })
+
+  it('shows the label in default case', () => {
+    const { getByLabelText } = renderCheckbox({})
+
+    expect(getByLabelText('The checkbox label')).toBeInTheDocument()
+  })
+
+  it('shows the label in title case', () => {
+    const { getByLabelText } = renderCheckbox({ titleCase: true })
+
+    expect(getByLabelText('The Checkbox Label')).toBeInTheDocument()
+  })
+})

package/src/CheckboxGroup/CheckboxGroup.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React, { Children } from 'react'
+import type { CheckboxGroupProps } from '@toptal/picasso'
+import { Checkbox as PicassoCheckbox } from '@toptal/picasso'
+
+import type { FieldProps } from '../Field'
+import PicassoField from '../Field'
+import FieldLabel from '../FieldLabel'
+import CheckboxGroupContext from './CheckboxGroupContext'
+
+type ValueType = string[] | undefined
+export type Props = CheckboxGroupProps & FieldProps<ValueType>
+
+export const CheckboxGroup = (props: Props) => {
+  const { children, titleCase, label, initialValue, ...rest } = props
+
+  const alignment = Children.count(children) > 2 ? 'top' : 'middle'
+
+  return (
+    <CheckboxGroupContext.Provider value={props.name}>
+      <PicassoField
+        {...rest}
+        initialValue={initialValue}
+        type='checkbox'
+        label={
+          label ? (
+            <FieldLabel
+              name={props.name}
+              required={props.required}
+              label={label}
+              titleCase={titleCase}
+              alignment={alignment}
+            />
+          ) : null
+        }
+      >
+        {() => (
+          <PicassoCheckbox.Group {...rest}>{children}</PicassoCheckbox.Group>
+        )}
+      </PicassoField>
+    </CheckboxGroupContext.Provider>
+  )
+}
+
+CheckboxGroup.displayName = 'CheckboxGroup'
+
+export default CheckboxGroup

package/src/CheckboxGroup/CheckboxGroupContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+
+export default createContext<string | undefined>(undefined)

package/src/CheckboxGroup/index.ts

@@ -0,0 +1,3 @@
+export { default } from './CheckboxGroup'
+export { default as CheckboxGroupContext } from './CheckboxGroupContext'
+export type { Props } from './CheckboxGroup'

package/src/CheckboxGroup/test.tsx

@@ -0,0 +1,36 @@
+import { render } from '@toptal/picasso-test-utils'
+import React from 'react'
+
+import Checkbox from '../Checkbox'
+import { Form } from '../Form'
+import type { Props } from './CheckboxGroup'
+import { CheckboxGroup } from './CheckboxGroup'
+
+const arrangeTest = ({ titleCase }: Partial<Props> = {}) =>
+  render(
+    <Form onSubmit={() => {}}>
+      <CheckboxGroup
+        required
+        name='checkbox-group'
+        label='Checkbox group label'
+        titleCase={titleCase}
+      >
+        <Checkbox label='checkbox-label-0' value='checkbox-value-0' />
+        <Checkbox label='checkbox-label-1' value='checkbox-value-1' />
+      </CheckboxGroup>
+    </Form>
+  )
+
+describe('CheckboxGroup', () => {
+  it('shows the label in default case', () => {
+    const { getByText } = arrangeTest()
+
+    expect(getByText('Checkbox group label')).toBeInTheDocument()
+  })
+
+  it('shows the label in title case', () => {
+    const { getByText } = arrangeTest({ titleCase: true })
+
+    expect(getByText('Checkbox Group Label')).toBeInTheDocument()
+  })
+})

package/src/DatePicker/DatePicker.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import type { DatePickerProps } from '@toptal/picasso'
+import { DatePicker as PicassoDatePicker } from '@toptal/picasso'
+
+import type { FieldProps } from '../Field'
+import InputField from '../InputField'
+import FieldLabel from '../FieldLabel'
+
+export type FormDatePickerProps = Omit<DatePickerProps, 'onChange'> & {
+  onChange?: DatePickerProps['onChange']
+}
+export type Props = FormDatePickerProps & FieldProps<DatePickerProps['value']>
+
+export const DatePicker = (props: Props) => {
+  const { label, titleCase, ...rest } = props
+
+  return (
+    <InputField<FormDatePickerProps>
+      {...rest}
+      label={
+        <FieldLabel
+          name={props.name}
+          required={props.required}
+          label={label}
+          titleCase={titleCase}
+        />
+      }
+    >
+      {(inputProps: DatePickerProps) => {
+        return <PicassoDatePicker {...inputProps} />
+      }}
+    </InputField>
+  )
+}
+
+DatePicker.defaultProps = {}
+
+DatePicker.displayName = 'DatePicker'
+
+export default DatePicker

package/src/DatePicker/index.ts

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

package/src/Dropzone/Dropzone.tsx

@@ -0,0 +1,102 @@
+import React from 'react'
+import type { DropzoneProps, FileUpload } from '@toptal/picasso'
+import { Dropzone as PicassoDropzone } 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'
+
+export type Props = DropzoneProps &
+  FieldProps<DropzoneProps['value']> & {
+    dropzoneHint?: string
+  }
+
+type FinalFormOnChangeType = FinalFieldInputProps<
+  DropzoneProps['value']
+>['onChange']
+
+const Dropzone = ({ dropzoneHint, ...props }: Props) => {
+  const handleDrop = ({
+    acceptedFiles,
+    value = [],
+    finalFormOnChange,
+  }: {
+    acceptedFiles: File[]
+    value?: FileUpload[]
+    finalFormOnChange: FinalFormOnChangeType
+  }) => {
+    if (!acceptedFiles.length) {
+      return
+    }
+
+    const newFiles = Array.from(acceptedFiles).map(file => ({
+      file,
+      uploading: false,
+    }))
+
+    finalFormOnChange([...value, ...newFiles])
+  }
+
+  const handleRemove = ({
+    fileIndex,
+    value = [],
+    finalFormOnChange,
+  }: {
+    fileIndex: number
+    value?: FileUpload[]
+    finalFormOnChange: FinalFormOnChangeType
+  }) => {
+    const updatedFiles = value.filter((_, index) => index !== fileIndex)
+
+    finalFormOnChange(updatedFiles)
+  }
+
+  return (
+    <PicassoField<DropzoneProps, FileUpload[] | undefined>
+      hideErrors
+      {...props}
+      label={
+        <FieldLabel
+          name={props.name}
+          required={props.required}
+          label={props.label}
+          titleCase={props.titleCase}
+          alignment='top'
+        />
+      }
+    >
+      {({
+        // omit 'highlight' as it is used only for classic inputs
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        highlight,
+        ...inputProps
+      }) => (
+        <PicassoDropzone
+          {...inputProps}
+          hint={dropzoneHint}
+          onDropAccepted={acceptedFiles => {
+            handleDrop({
+              acceptedFiles,
+              value: inputProps.value,
+              finalFormOnChange: inputProps.onChange,
+            })
+          }}
+          onRemove={(_fileName: string, index: number) => {
+            handleRemove({
+              fileIndex: index,
+              value: inputProps.value,
+              finalFormOnChange: inputProps.onChange,
+            })
+          }}
+        />
+      )}
+    </PicassoField>
+  )
+}
+
+Dropzone.defaultProps = {}
+
+Dropzone.displayName = 'Dropzone'
+
+export default Dropzone

package/src/Dropzone/index.ts

@@ -0,0 +1,6 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared'
+
+import type { Props } from './Dropzone'
+export { default } from './Dropzone'
+
+export type DropzoneProps = OmitInternalProps<Props>