@toptal/picasso-forms 6.0.4 → 6.0.5

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

@@ -0,0 +1,231 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormRadio renders 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class=""
+    >
+      <form>
+        <div
+          class="PicassoFormField-root"
+          data-field-has-error="false"
+        >
+          <label
+            class="PicassoFormLabel-root"
+            for="color"
+          >
+            <span
+              class="PicassoFormLabel-text"
+            >
+              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-text"
+                    >
+                      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-text"
+                    >
+                      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>
+        <div
+          class="PicassoFormField-root"
+          data-field-has-error="false"
+        >
+          <label
+            class="PicassoFormLabel-root"
+            for="color"
+          >
+            <span
+              class="PicassoFormLabel-asterisk"
+            >
+              *
+            </span>
+            <span
+              class="PicassoFormLabel-text"
+            >
+              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-text"
+                    >
+                      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-text"
+                    >
+                      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 { FormConfigProps } from '../FormConfig'
+import Form from '../Form'
+import { 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,39 @@
+import React from 'react'
+import {
+  Radio as PicassoRadio,
+  RadioProps,
+  RadioGroupProps
+} from '@toptal/picasso'
+
+import FieldWrapper, { FieldProps } from '../FieldWrapper'
+import RadioGroupContext from './RadioGroupContext'
+
+export type Props = RadioGroupProps & FieldProps<RadioProps['value']>
+
+export const RadioGroup = (props: Props) => {
+  const { children, ...rest } = props
+
+  return (
+    <RadioGroupContext.Provider value={props.name}>
+      {}
+      <FieldWrapper {...rest} type='radio'>
+        {radioGroupProps => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { error, ...restRadioGroupProps } = radioGroupProps
+
+          return (
+            <PicassoRadio.Group {...restRadioGroupProps}>
+              {children}
+            </PicassoRadio.Group>
+          )
+        }}
+      </FieldWrapper>
+    </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,35 @@
+import { render } from '@toptal/picasso/test-utils'
+import React from 'react'
+
+import Radio from '../Radio'
+import Form from '../Form'
+import RadioGroup, { Props } 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,22 @@
+import React from 'react'
+import { Rating as PicassoRating, RatingProps } from '@toptal/picasso'
+
+import FieldWrapper, { FieldProps } from '../FieldWrapper'
+
+export type Props = RatingProps & FieldProps<RatingProps['value']>
+
+export const Rating = (props: Props) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  <FieldWrapper<RatingProps> {...props} type='number'>
+    {(inputProps: RatingProps) => {
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      return <PicassoRating {...inputProps} />
+    }}
+  </FieldWrapper>
+)
+
+Rating.defaultProps = {}
+
+Rating.displayName = 'Rating'
+
+export default Rating

package/src/Rating/index.ts

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

package/src/Select/Select.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import {
+  Select as PicassoSelect,
+  SelectProps,
+  SelectValueType
+} from '@toptal/picasso'
+import { generateRandomStringOrGetEmptyInTest } from '@toptal/picasso/utils'
+
+import FieldWrapper, { FieldProps } from '../FieldWrapper'
+
+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>({
+  name,
+  id = name,
+  ...rest
+}: Props<T, M>) => {
+  const randomizedId = id ? generateRandomStringOrGetEmptyInTest(id) : undefined
+
+  return (
+    <FieldWrapper<SelectProps<any, any>>
+      {...rest}
+      name={name}
+      id={randomizedId}
+    >
+      {(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'}
+          />
+        )
+      }}
+    </FieldWrapper>
+  )
+}
+
+Select.defaultProps = {}
+
+Select.displayName = 'Select'
+
+export default Select

package/src/Select/index.ts

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

package/src/SubmitButton/SubmitButton.tsx

@@ -0,0 +1,70 @@
+import React, { ReactNode } from 'react'
+import { Button, ButtonProps } from '@toptal/picasso'
+import { useFormState } from 'react-final-form'
+import { ButtonCircularProps } from '@toptal/picasso/ButtonCircular'
+
+type ButtonTypeProps = {
+  buttonType: 'rectangular'
+  variant?: ButtonProps['variant']
+  children: ReactNode
+}
+
+type CircularButtonTypeProps = {
+  buttonType: 'circular'
+  variant?: ButtonCircularProps['variant']
+}
+
+type ActionButtonTypeProps = {
+  buttonType: 'action'
+  variant?: null
+  children?: ReactNode
+}
+
+// Intersection with the type { id?: string } is needed here because of
+// TS compiler issue https://github.com/microsoft/TypeScript/issues/34793
+export type Props = Omit<ButtonProps, 'type' | 'variant' | 'children'> & {
+  id?: string
+} & (CircularButtonTypeProps | ActionButtonTypeProps | ButtonTypeProps)
+
+export const SubmitButton = ({
+  buttonType,
+  variant,
+  ...restOfProps
+}: Props) => {
+  /* eslint-disable react/jsx-props-no-spreading */
+  const { submitting } = useFormState({ subscription: { submitting: true } })
+
+  const submitButtonProps = {
+    type: 'submit' as const,
+    loading: submitting
+  }
+
+  const resultComponentProps = { ...submitButtonProps, ...restOfProps }
+
+  switch (buttonType) {
+    case 'circular':
+      return (
+        <Button.Circular
+          {...resultComponentProps}
+          variant={variant as ButtonCircularProps['variant']}
+        />
+      )
+    case 'action':
+      return <Button.Action {...resultComponentProps} />
+    default:
+      return (
+        <Button
+          {...resultComponentProps}
+          variant={variant as ButtonProps['variant']}
+        />
+      )
+  }
+}
+
+SubmitButton.defaultProps = {
+  buttonType: 'rectangular'
+}
+
+SubmitButton.displayName = 'SubmitButton'
+
+export default SubmitButton

package/src/SubmitButton/index.ts

@@ -0,0 +1,6 @@
+import { Props } from './SubmitButton'
+
+export { default } from './SubmitButton'
+
+export type SubmitButtonProps = Props
+export * from './SubmitButton'

package/src/SubmitButton/story/ButtonTypes.example.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Check16, Container, Typography } from '@toptal/picasso'
+import { Form } from '@toptal/picasso-forms'
+
+const onSubmit = () => new Promise(resolve => setTimeout(resolve, 1000))
+
+const Example = () => (
+  <>
+    <Typography variant='heading' size='small'>
+      Rectangular (Default)
+    </Typography>
+    <Container top='small' bottom='large'>
+      <Form onSubmit={onSubmit}>
+        <Container top='small'>
+          <Form.SubmitButton buttonType='rectangular'>
+            Rectangular
+          </Form.SubmitButton>
+        </Container>
+      </Form>
+    </Container>
+
+    <Typography variant='heading' size='small'>
+      Circular
+    </Typography>
+    <Container top='small' bottom='large'>
+      <Form onSubmit={onSubmit}>
+        <Container top='small'>
+          <Form.SubmitButton buttonType='circular' icon={<Check16 />} />
+        </Container>
+      </Form>
+    </Container>
+
+    <Typography variant='heading' size='small'>
+      Action
+    </Typography>
+    <Container top='small' bottom='large'>
+      <Form onSubmit={onSubmit}>
+        <Container top='small'>
+          <Form.SubmitButton buttonType='action'>Action</Form.SubmitButton>
+        </Container>
+      </Form>
+    </Container>
+  </>
+)
+
+export default Example

package/src/SubmitButton/story/Default.example.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Container } from '@toptal/picasso'
+import { Form } from '@toptal/picasso-forms'
+
+const onSubmit = () => new Promise(resolve => setTimeout(resolve, 1000))
+
+const Example = () => (
+  <Form onSubmit={onSubmit}>
+    <Container top='small'>
+      <Form.SubmitButton>Submit form</Form.SubmitButton>
+    </Container>
+  </Form>
+)
+
+export default Example

package/src/SubmitButton/story/index.jsx

@@ -0,0 +1,32 @@
+import SubmitButton from '../SubmitButton'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const page = PicassoBook.section('Picasso Forms').createPage(
+  'SubmitButton',
+  'SubmitButton reacts to the submission state of the form.'
+)
+
+page.createTabChapter('Props').addComponentDocs({
+  component: SubmitButton,
+  name: 'SubmitButton',
+  additionalDocs: {
+    buttonType: {
+      name: 'buttonType',
+      type: 'string',
+      description: 'The button type to use',
+      defaultValue: 'rectangular',
+      enums: ['rectangular', 'circular', 'action']
+    },
+    variant: {
+      name: 'variant',
+      type: 'string',
+      description:
+        'The variant to use. Depending on the "buttonType" property value, the "variant" property accepts circular or action button "variant" property values.'
+    }
+  }
+})
+
+page
+  .createChapter()
+  .addExample('SubmitButton/story/Default.example.tsx', 'Default')
+  .addExample('SubmitButton/story/ButtonTypes.example.tsx', 'Button types')

package/src/Switch/Switch.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Switch as PicassoSwitch, SwitchProps } from '@toptal/picasso'
+
+import FieldWrapper, { FieldProps } from '../FieldWrapper'
+
+export type FormSwitchProps = Omit<SwitchProps, 'onChange'> & {
+  onChange?: SwitchProps['onChange']
+}
+export type Props = FormSwitchProps & FieldProps<SwitchProps['value']>
+
+export const Switch = (props: Props) => (
+  <FieldWrapper<FormSwitchProps> hideLabelRequiredDecoration {...props}>
+    {(inputProps: SwitchProps) => {
+      return <PicassoSwitch {...inputProps} />
+    }}
+  </FieldWrapper>
+)
+
+Switch.defaultProps = {}
+
+Switch.displayName = 'Switch'
+
+export default Switch

package/src/Switch/index.ts

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

package/src/TagSelector/TagSelector.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import {
+  TagSelector as PicassoTagSelector,
+  TagSelectorProps
+} from '@toptal/picasso'
+
+import FieldWrapper, { FieldProps } from '../FieldWrapper'
+
+export type Props = TagSelectorProps & FieldProps<TagSelectorProps['value']>
+
+export const TagSelector = (props: Props) => (
+  <FieldWrapper<TagSelectorProps> {...props}>
+    {(inputProps: TagSelectorProps) => {
+      return <PicassoTagSelector {...inputProps} />
+    }}
+  </FieldWrapper>
+)
+
+TagSelector.defaultProps = {
+  initialValue: []
+}
+
+TagSelector.displayName = 'TagSelector'
+
+export default TagSelector

package/src/TagSelector/index.ts

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