@toptal/picasso-forms 6.0.4 → 6.0.5

package/src/TimePicker/TimePicker.tsx

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

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

package/src/index.ts

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

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

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

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

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

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

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

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

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

package/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,qBAAqB;AACrB,OAAO,EAAE,UAAU,EAA8E,KAAK,EAAE,MAAM,YAAY,CAAA;AAC1H,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAEnH,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAEnE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AAEzF,wBAAwB;AACxB,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAExD,qEAAqE"}