@toptal/picasso-forms 6.0.5 → 7.1.0

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

@@ -1,15 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

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

package/src/TagSelector/TagSelector.tsx

@@ -1,25 +0,0 @@
-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

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

package/src/TimePicker/TimePicker.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import {
-  TimePicker as PicassoTimePicker,
-  TimePickerProps
-} from '@toptal/picasso'
-
-import FieldWrapper, { FieldProps } from '../FieldWrapper'
-
-export type FormTimePickerProps = Omit<TimePickerProps, 'onChange'> & {
-  onChange?: TimePickerProps['onChange']
-}
-export type Props = FormTimePickerProps & FieldProps<TimePickerProps['value']>
-
-export const TimePicker = (props: Props) => (
-  <FieldWrapper<FormTimePickerProps> {...props}>
-    {(inputProps: TimePickerProps) => {
-      return <PicassoTimePicker {...inputProps} />
-    }}
-  </FieldWrapper>
-)
-
-TimePicker.displayName = 'TimePicker'
-
-export default TimePicker

package/src/TimePicker/index.ts

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

package/src/index.ts

@@ -1,16 +0,0 @@
-
-// Final Form exports
-export type { FormApi, MutableState, AnyObject, FieldValidator, SubmissionErrors, Config } from 'final-form'
-export { FORM_ERROR, setIn } from 'final-form'
-export { useForm, useField, useFormState, FormSpy, Form as FinalForm, Field as FinalField } from 'react-final-form'
-export type { FieldMetaState, FieldRenderProps, FormRenderProps, FieldProps, FormProps, FieldInputProps } from 'react-final-form'
-export { default as arrayMutators } from 'final-form-arrays'
-export { useFieldArray, FieldArray } from 'react-final-form-arrays'
-export type { FieldArrayProps, FieldArrayRenderProps } from 'react-final-form-arrays'
-export { OnChange, OnFocus, ExternallyChanged, OnBlur } from 'react-final-form-listeners'
-
-// Picasso Forms exports
-export { default as Form } from './Form'
-export { default as FieldWrapper } from './FieldWrapper'
-export type { FormConfigProps, RequiredVariant } from './FormConfig'
-// hygen code generator inserts export statements above this comment.

package/src/story/Deserialization.example.tsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import { Container } from '@toptal/picasso'
-import { Form } from '@toptal/picasso-forms'
-
-const deserializeValue = <T extends unknown>(value: T) => {
-  if (value === 'true') {
-    return true
-  }
-  if (value === 'false') {
-    return false
-  }
-
-  return value
-}
-
-const Example = () => (
-  <Form
-    onSubmit={values => {
-      console.log('Raw: ', { foo: values.foo })
-      console.log('Deserialized: ', { foo: deserializeValue(values.foo) })
-    }}
-    initialValues={{ foo: 'true' }}
-  >
-    <Form.RadioGroup name='foo' label='Foo'>
-      <Form.Radio label='yes' value='true' />
-      <Form.Radio label='no' value='false' />
-    </Form.RadioGroup>
-    <Container top='small'>
-      <Form.SubmitButton>Submit</Form.SubmitButton>
-    </Container>
-  </Form>
-)
-
-export default Example

package/src/story/FormSpy.example.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import { Container } from '@toptal/picasso'
-import { Form, FormSpy } from '@toptal/picasso-forms'
-
-const Example = () => (
-  <Form onSubmit={values => window.alert(values)}>
-    <Form.Input
-      required
-      name='firstName'
-      label='First name'
-      placeholder='e.g. Bruce'
-    />
-
-    <FormSpy>
-      {({ values }) => (
-        <Form.Input
-          required
-          name='lastName'
-          disabled={!values?.firstName}
-          label='Last name'
-          placeholder='Disabled until first name is filled out'
-        />
-      )}
-    </FormSpy>
-
-    <Container top='small'>
-      <FormSpy>
-        {({ pristine, values }) => {
-          const isDisabled = pristine || !values?.lastName
-
-          return (
-            <Form.SubmitButton disabled={isDisabled}>
-              {isDisabled ? 'Fill out form to enable' : 'Submit'}
-            </Form.SubmitButton>
-          )
-        }}
-      </FormSpy>
-    </Container>
-  </Form>
-)
-
-export default Example

package/src/story/index.jsx

@@ -1,37 +0,0 @@
-import { doc } from 'storybook-readme'
-
-import PicassoBook from '~/.storybook/components/PicassoBook'
-import README from '../../README.md'
-import CHANGELOG from '../../CHANGELOG.md'
-
-const section = PicassoBook.section('Picasso Forms')
-
-section.createDocPage('README', doc(README), { alwaysOnTop: true })
-section.createDocPage('CHANGELOG', doc(CHANGELOG), { alwaysOnTop: true })
-
-const page = section.createPage('Final Form', 'Final Form')
-
-page
-  .createChapter()
-  .addExample(
-    'story/FormSpy.example.tsx',
-    {
-      title: 'Form Spy',
-      description: `
-            Sometimes you might want to perform a conditional action based on the value of another field in the form or its overall state.
-            For smaller forms, you can just directly work with values, but with a larger form you can avoid prop drilling with FormSpy.`
-    },
-    'picasso-form'
-  ) // picasso-skip-visuals
-  .addExample(
-    'story/Deserialization.example.tsx',
-    {
-      title: 'Deserialization',
-      description: `
-            By default final-form converts all values to strings.
-            If want to pass a boolean or a number value to a field, 
-            you should pass it serialized and deserialize it later.
-            `
-    },
-    'picasso-form'
-  ) // picasso-skip-visuals

package/src/utils/flat-map.ts

@@ -1,4 +0,0 @@
-export const flatMap = <T, K>(arr: T[], fn: (item: T) => K[]) =>
-  arr.reduce<K[]>((acc, item) => acc.concat(fn(item)), [])
-
-export default flatMap

package/src/utils/index.ts

@@ -1,3 +0,0 @@
-export { default as validators } from './validators'
-export { default as createScrollToErrorDecorator } from './scroll-to-error-decorator'
-export { default as flatMap } from './flat-map'

package/src/utils/scroll-to-error-decorator.ts

@@ -1,78 +0,0 @@
-import { FormApi } from 'final-form'
-
-const UNHIDDEN_INPUT_SELECTOR = 'input:not([type=hidden])'
-
-const getErrorField = () =>
-  document.querySelector<HTMLElement>('[data-field-has-error="true"]')
-
-const getErrorFieldAfterNextPaint = () =>
-  new Promise<HTMLElement | null>(resolve => {
-    const resolveField = () => resolve(getErrorField())
-
-    if (typeof requestAnimationFrame === 'undefined') {
-      setTimeout(resolveField, 16)
-    } else {
-      requestAnimationFrame(resolveField)
-    }
-  })
-
-const getErrorFieldWithRetries = async () => {
-  for (let index = 0; index < 3; index++) {
-    const field = await getErrorFieldAfterNextPaint()
-
-    if (field) {
-      return field
-    }
-  }
-}
-
-const scrollTo = (field: HTMLElement) => {
-  field.scrollIntoView({ block: 'center', behavior: 'smooth' })
-  field
-    .querySelector<HTMLInputElement>(UNHIDDEN_INPUT_SELECTOR)
-    ?.focus({ preventScroll: true })
-}
-
-let state: { errors?: object; submitErrors?: object } = {}
-
-export default () => <T>(form: FormApi<T>) => {
-  const originalSubmit = form.submit
-
-  const unsubscribe = form.subscribe(
-    nextState => {
-      state = nextState
-    },
-    { errors: true, submitErrors: true }
-  )
-
-  const scrollOnErrors = async () => {
-    const { errors = {}, submitErrors = {} } = state
-
-    if (Object.keys(errors).length || Object.keys(submitErrors).length) {
-      const field = await getErrorFieldWithRetries()
-
-      if (field) {
-        scrollTo(field)
-      }
-    }
-  }
-
-  // Rewrite submit function
-  form.submit = () => {
-    const result = originalSubmit.call(form)
-
-    if (result && typeof result.then === 'function') {
-      result.then(scrollOnErrors).catch(() => {})
-    } else {
-      scrollOnErrors()
-    }
-
-    return result
-  }
-
-  return () => {
-    state = {}
-    unsubscribe()
-    form.submit = originalSubmit
-  }
-}

package/src/utils/validators.ts

@@ -1,18 +0,0 @@
-const composeValidators = (validators: any[]) => (value: any, allValues: any) =>
-  validators
-    .filter(Boolean)
-    .reduce(
-      (error, validator) => error || validator(value, allValues),
-      undefined
-    )
-
-const required = (value: unknown) =>
-  value === undefined ||
-  value === false ||
-  value === '' ||
-  value === null ||
-  (Array.isArray(value) && value.length === 0)
-    ? 'Please complete this field.'
-    : undefined
-
-export default { composeValidators, required }

package/tsconfig.build.json

@@ -1,7 +0,0 @@
-{
-  "extends": "../../tsconfig.build.json",
-  "compilerOptions": {
-    "outDir": "dist-package"
-  },
-  "include": ["src"]
-}