@toptal/picasso-forms 66.3.2 → 67.0.0

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

@@ -0,0 +1,235 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormRadio renders 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class=""
+    >
+      <form
+        class=""
+      >
+        <div
+          class="PicassoFormField-root"
+          data-field-has-error="false"
+        >
+          <label
+            class="PicassoFormLabel-root"
+            for="color"
+          >
+            <span
+              class="PicassoFormLabel-medium"
+            >
+              What's your favorite color?
+               (optional)
+            </span>
+          </label>
+          <div
+            class="MuiFormGroup-root"
+            id="color"
+            role="radiogroup"
+            type="radio"
+          >
+            <div
+              class="MuiGrid-root PicassoRadioGroup-grid MuiGrid-container PicassoGrid-container MuiGrid-direction-xs MuiGrid-align-items-xs-flex"
+            >
+              <div
+                class="MuiGrid-root PicassoRadioGroup-gridItem MuiGrid-item"
+              >
+                <label
+                  class="PicassoFormControlLabel-root Radio-root Radio-labelWithRightSpacing"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiRadio-root Radio-root Radio-withLabel"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input"
+                        name="color"
+                        type="radio"
+                        value="#ed143d"
+                      />
+                      <div
+                        class="Radio-uncheckedIcon"
+                      />
+                    </span>
+                  </span>
+                  <span
+                    class="PicassoFormLabel-root PicassoFormLabel-inline PicassoFormControlLabel-label Radio-label"
+                  >
+                    <span
+                      class="PicassoFormLabel-medium"
+                    >
+                      Crimson
+                    </span>
+                  </span>
+                </label>
+              </div>
+              <div
+                class="MuiGrid-root PicassoRadioGroup-gridItem MuiGrid-item"
+              >
+                <label
+                  class="PicassoFormControlLabel-root Radio-root Radio-labelWithRightSpacing"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiRadio-root Radio-root Radio-withLabel PrivateSwitchBase-checked Mui-checked"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        checked=""
+                        class="PrivateSwitchBase-input"
+                        name="color"
+                        type="radio"
+                        value="#ffe4b5"
+                      />
+                      <div
+                        class="Radio-checkedIcon"
+                      />
+                    </span>
+                  </span>
+                  <span
+                    class="PicassoFormLabel-root PicassoFormLabel-inline PicassoFormControlLabel-label Radio-label"
+                  >
+                    <span
+                      class="PicassoFormLabel-medium"
+                    >
+                      Moccasin
+                    </span>
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`FormRadio required with asterisk 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class=""
+    >
+      <form
+        class=""
+      >
+        <div
+          class="PicassoFormField-root"
+          data-field-has-error="false"
+        >
+          <label
+            class="PicassoFormLabel-root"
+            for="color"
+          >
+            <span
+              class="PicassoFormLabel-medium"
+            >
+              <span
+                class="PicassoFormLabel-asterisk"
+              >
+                *
+              </span>
+              What's your favorite color?
+            </span>
+          </label>
+          <div
+            class="MuiFormGroup-root"
+            id="color"
+            role="radiogroup"
+            type="radio"
+          >
+            <div
+              class="MuiGrid-root PicassoRadioGroup-grid MuiGrid-container PicassoGrid-container MuiGrid-direction-xs MuiGrid-align-items-xs-flex"
+            >
+              <div
+                class="MuiGrid-root PicassoRadioGroup-gridItem MuiGrid-item"
+              >
+                <label
+                  class="PicassoFormControlLabel-root Radio-root Radio-labelWithRightSpacing"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiRadio-root Radio-root Radio-withLabel"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input"
+                        name="color"
+                        type="radio"
+                        value="#ed143d"
+                      />
+                      <div
+                        class="Radio-uncheckedIcon"
+                      />
+                    </span>
+                  </span>
+                  <span
+                    class="PicassoFormLabel-root PicassoFormLabel-inline PicassoFormControlLabel-label Radio-label"
+                  >
+                    <span
+                      class="PicassoFormLabel-medium"
+                    >
+                      Crimson
+                    </span>
+                  </span>
+                </label>
+              </div>
+              <div
+                class="MuiGrid-root PicassoRadioGroup-gridItem MuiGrid-item"
+              >
+                <label
+                  class="PicassoFormControlLabel-root Radio-root Radio-labelWithRightSpacing"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiRadio-root Radio-root Radio-withLabel PrivateSwitchBase-checked Mui-checked"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        checked=""
+                        class="PrivateSwitchBase-input"
+                        name="color"
+                        type="radio"
+                        value="#ffe4b5"
+                      />
+                      <div
+                        class="Radio-checkedIcon"
+                      />
+                    </span>
+                  </span>
+                  <span
+                    class="PicassoFormLabel-root PicassoFormLabel-inline PicassoFormControlLabel-label Radio-label"
+                  >
+                    <span
+                      class="PicassoFormLabel-medium"
+                    >
+                      Moccasin
+                    </span>
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;

package/src/Radio/index.ts

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

package/src/Radio/test.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { render } from '@toptal/picasso-test-utils'
+
+import type { FormConfigProps } from '../FormConfig'
+import { FormCompound as Form } from '../FormCompound'
+import type { Props as RadioGroupProps } from '../RadioGroup'
+
+const renderFormRadio = (
+  { required, name }: RadioGroupProps,
+  formConfig: FormConfigProps = {}
+) =>
+  render(
+    <Form.ConfigProvider value={formConfig}>
+      <Form onSubmit={() => {}} initialValues={{ color: '#ffe4b5' }}>
+        <Form.RadioGroup
+          name={name}
+          label="What's your favorite color?"
+          required={required}
+        >
+          <Form.Radio label='Crimson' value='#ed143d' />
+          <Form.Radio label='Moccasin' value='#ffe4b5' />
+        </Form.RadioGroup>
+      </Form>
+    </Form.ConfigProvider>
+  )
+
+describe('FormRadio', () => {
+  it('renders', () => {
+    const { container } = renderFormRadio({
+      name: 'color',
+    })
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('required with asterisk', () => {
+    const { container } = renderFormRadio(
+      {
+        name: 'color',
+        required: true,
+      },
+      {
+        requiredVariant: 'asterisk',
+      }
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+})

package/src/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,53 @@
+import React, { Children } from 'react'
+import type { RadioProps, RadioGroupProps } from '@toptal/picasso'
+import { Radio as PicassoRadio } from '@toptal/picasso'
+
+import type { FieldProps } from '../Field'
+import PicassoField from '../Field'
+import FieldLabel from '../FieldLabel'
+import RadioGroupContext from './RadioGroupContext'
+
+export type Props = RadioGroupProps & FieldProps<RadioProps['value']>
+
+export const RadioGroup = (props: Props) => {
+  const { children, label, titleCase, ...rest } = props
+
+  const alignment = Children.count(children) > 2 ? 'top' : 'middle'
+
+  return (
+    <RadioGroupContext.Provider value={props.name}>
+      <PicassoField
+        {...rest}
+        type='radio'
+        label={
+          label ? (
+            <FieldLabel
+              name={props.name}
+              required={props.required}
+              label={label}
+              titleCase={titleCase}
+              alignment={alignment}
+            />
+          ) : null
+        }
+      >
+        {({
+          // omit 'highlight' as it is used only for classic inputs
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          highlight,
+          ...radioGroupProps
+        }) => (
+          <PicassoRadio.Group {...radioGroupProps}>
+            {children}
+          </PicassoRadio.Group>
+        )}
+      </PicassoField>
+    </RadioGroupContext.Provider>
+  )
+}
+
+RadioGroup.defaultProps = {}
+
+RadioGroup.displayName = 'RadioGroup'
+
+export default RadioGroup

package/src/RadioGroup/RadioGroupContext.ts

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

package/src/RadioGroup/index.ts

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

package/src/RadioGroup/test.tsx

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

package/src/Rating/Rating.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import type {
+  RatingStarsProps as PicassoRatingStarsProps,
+  RatingThumbsProps as PicassoRatingThumbsProps,
+} from '@toptal/picasso'
+import { Rating as PicassoRating } from '@toptal/picasso'
+
+import type { FieldProps } from '../Field'
+import PicassoField from '../Field'
+import FieldLabel from '../FieldLabel'
+import { validators } from '../utils'
+
+export type RatingStarsProps = PicassoRatingStarsProps &
+  FieldProps<PicassoRatingStarsProps['value']>
+
+const Stars = (props: RatingStarsProps) => {
+  const { label, titleCase, ...rest } = props
+
+  return (
+    <PicassoField<PicassoRatingStarsProps>
+      {...rest}
+      type='number'
+      label={
+        label ? (
+          <FieldLabel
+            name={props.name}
+            required={props.required}
+            label={label}
+            titleCase={titleCase}
+          />
+        ) : null
+      }
+    >
+      {({
+        // omit 'highlight' as it is used only for classic inputs
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        highlight,
+        ...inputProps
+      }) => <PicassoRating.Stars {...inputProps} />}
+    </PicassoField>
+  )
+}
+
+export type RatingThumbsProps = PicassoRatingThumbsProps &
+  FieldProps<PicassoRatingThumbsProps['value']> & { requirePositive?: boolean }
+
+/*
+ * The default required validator gives an error when the value is false, this
+ * makes sense for checkboxes and similar controls, with the Thumbs component
+ * however, it is expected to return false as the thumbs down option. We are
+ * overriding the default required validation to only give an error on
+ * null/undefined values.
+ *
+ * We still have an requiredPositive prop in case you need to have the default
+ * behavior and requires a thumbs up for whatever reason.
+ */
+const thumbsRequired = (value: boolean | undefined) =>
+  value == null ? validators.required(null) : undefined
+
+const Thumbs = (props: RatingThumbsProps) => {
+  const { required, validate, requirePositive, label, titleCase, ...rest } =
+    props
+
+  const validateOverride = validators.composeValidators([
+    required && !requirePositive ? thumbsRequired : undefined,
+    validate,
+  ])
+
+  return (
+    <PicassoField<PicassoRatingThumbsProps>
+      validate={validateOverride}
+      required={requirePositive}
+      {...rest}
+      label={
+        label ? (
+          <FieldLabel
+            name={props.name}
+            required={props.required}
+            label={label}
+            titleCase={titleCase}
+          />
+        ) : null
+      }
+    >
+      {inputProps => <PicassoRating.Thumbs {...inputProps} />}
+    </PicassoField>
+  )
+}
+
+export const Rating = {
+  Stars,
+  Thumbs,
+} as const
+
+export default Rating