@toptal/picasso-forms 6.0.4 → 6.0.5

package/src/ButtonRadio/index.ts

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

package/src/Checkbox/Checkbox.tsx

@@ -0,0 +1,73 @@
+import React, { useContext } from 'react'
+import { Checkbox as PicassoCheckbox, CheckboxProps } from '@toptal/picasso'
+import {
+  Field,
+  FieldRenderProps as FinalFormFieldProps
+} from 'react-final-form'
+
+import FieldWrapper, { FieldProps } from '../FieldWrapper'
+import { CheckboxGroupContext } from '../CheckboxGroup'
+import { useFormConfig } from '../FormConfig'
+
+type CheckboxValue = CheckboxProps['value'] | CheckboxProps['checked']
+
+type CheckboxFormProps = Omit<CheckboxProps, 'requiredDecoration'> & {
+  required?: boolean
+}
+type CheckboxWithoutGroup = CheckboxFormProps & FieldProps<CheckboxValue>
+type CheckboxInGroup = CheckboxFormProps & { name?: string }
+
+export type Props = CheckboxWithoutGroup | CheckboxInGroup
+
+export const Checkbox = ({
+  name,
+  value,
+  required,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  defaultValue,
+  ...restProps
+}: Props) => {
+  const formConfig = useFormConfig()
+  const groupName = useContext(CheckboxGroupContext)
+  const isCheckboxInGroup = Boolean(groupName)
+
+  if (isCheckboxInGroup) {
+    return (
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      <Field type='checkbox' name={name || groupName!} value={value}>
+        {({
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          input: { value: inputValue, type, ...restInput }
+        }: FinalFormFieldProps<CheckboxValue>) => {
+          return <PicassoCheckbox {...restProps} {...restInput} />
+        }}
+      </Field>
+    )
+  }
+
+  const showAsterisk = required && formConfig.requiredVariant === 'asterisk'
+  const requiredDecoration = showAsterisk ? 'asterisk' : undefined
+
+  return (
+    <FieldWrapper
+      type='checkbox'
+      hideFieldLabel
+      required={required}
+      {...restProps}
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      name={name!}
+    >
+      {(input: CheckboxProps) => (
+        <PicassoCheckbox
+          {...input}
+          titleCase={restProps.titleCase}
+          requiredDecoration={requiredDecoration}
+        />
+      )}
+    </FieldWrapper>
+  )
+}
+
+Checkbox.displayName = 'Checkbox'
+
+export default Checkbox

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

@@ -0,0 +1,254 @@
+// 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>
+        <div
+          class="PicassoFormField-root"
+          data-field-has-error="false"
+        >
+          <label
+            class="PicassoFormLabel-root"
+            for="checkbox-group"
+          >
+            <span
+              class="PicassoFormLabel-text"
+            >
+              checkbox-group-label
+               (optional)
+            </span>
+          </label>
+          <div
+            class="MuiFormGroup-root PicassoCheckboxGroup-root PicassoCheckboxGroup-root"
+            label="checkbox-group-label"
+            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-text"
+                    >
+                      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-text"
+                    >
+                      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>
+        <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-text"
+              >
+                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>
+        <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-asterisk"
+              >
+                *
+              </span>
+              <span
+                class="PicassoFormLabel-text"
+              >
+                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 @@
+export { default } from './Checkbox'

package/src/Checkbox/test.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+import { render } from '@toptal/picasso/test-utils'
+
+import { FormConfigProps } from '../FormConfig'
+import Form from '../Form'
+import CheckboxGroup from '../CheckboxGroup'
+import Checkbox, { Props } 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,30 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react'
+import {
+  Checkbox as PicassoCheckbox,
+  CheckboxProps,
+  CheckboxGroupProps
+} from '@toptal/picasso'
+
+import FieldWrapper, { FieldProps } from '../FieldWrapper'
+import CheckboxGroupContext from './CheckboxGroupContext'
+
+export type Props = CheckboxGroupProps & FieldProps<CheckboxProps['value']>
+
+export const CheckboxGroup = (props: Props) => {
+  const { children, titleCase, ...rest } = props
+
+  return (
+    <CheckboxGroupContext.Provider value={props.name}>
+      <FieldWrapper titleCase={titleCase} {...rest} type='checkbox'>
+        {() => (
+          <PicassoCheckbox.Group {...rest}>{children}</PicassoCheckbox.Group>
+        )}
+      </FieldWrapper>
+    </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,35 @@
+import { render } from '@toptal/picasso/test-utils'
+import React from 'react'
+
+import Checkbox from '../Checkbox'
+import Form from '../Form'
+import CheckboxGroup, { Props } 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,26 @@
+import React from 'react'
+import {
+  DatePicker as PicassoDatePicker,
+  DatePickerProps
+} from '@toptal/picasso-lab'
+
+import FieldWrapper, { FieldProps } from '../FieldWrapper'
+
+export type FormDatePickerProps = Omit<DatePickerProps, 'onChange'> & {
+  onChange?: DatePickerProps['onChange']
+}
+export type Props = FormDatePickerProps & FieldProps<DatePickerProps['value']>
+
+export const DatePicker = (props: Props) => (
+  <FieldWrapper<FormDatePickerProps> {...props}>
+    {(inputProps: DatePickerProps) => {
+      return <PicassoDatePicker {...inputProps} />
+    }}
+  </FieldWrapper>
+)
+
+DatePicker.defaultProps = {}
+
+DatePicker.displayName = 'DatePicker'
+
+export default DatePicker

package/src/DatePicker/index.ts

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