text: /* eslint-disable no-console */
  import React from 'react';
  import { Form as FinalForm, FormSpy } from 'react-final-form';
  import { Button } from '../../components';
  import * as validators from '../../util/validators';
  import FieldTextInput from './FieldTextInput';
  import css from './FieldTextInputExample.css';
  
  
  const FormComponent = props => (
    <FinalForm
      {...props}
      render={fieldRenderProps => {
        const { handleSubmit, onChange, invalid, pristine, submitting, formName } = fieldRenderProps;
        const required = validators.required('This field is required');
        const submitDisabled = invalid || pristine || submitting;
        return (
          <form
            onSubmit={e => {
              e.preventDefault();
              handleSubmit(e);
            }}
          >
            <FormSpy onChange={onChange} />
            <FieldTextInput
              className={css.field}
              type="text"
              id={`${formName}.input1`}
              name="input1"
              label="Input that requires a value:"
              validate={required}
            />
            <FieldTextInput
              className={css.field}
              type="text"
              id={`${formName}.input2`}
              name="input2"
              label="Input that does not require a value:"
            />
            <FieldTextInput
              className={css.field}
              type="text"
              name="input3"
              placeholder="Input without label..."
            />
            <FieldTextInput
              className={css.field}
              type="textarea"
              id={`${formName}.textarea1`}
              name="textarea1"
              label="Textarea that requires a value:"
              validate={required}
            />
            <FieldTextInput
              className={css.field}
              type="textarea"
              id={`${formName}.textarea2`}
              name="textarea2"
              label="Textarea that does not require a value:"
            />
            <FieldTextInput
              className={css.field}
              type="textarea"
              name="textarea3"
              placeholder="Textarea without label..."
            />
            <Button className={css.submit} type="submit" disabled={submitDisabled}>
              Submit
            </Button>
          </form>
        );
      }}
    />
  );
  
  export const Inputs = {
    component: FormComponent,
    props: {
      formName: 'Inputs',
      onChange: formState => {
        if (Object.keys(formState.values).length > 0) {
          console.log('form values changed to:', formState.values);
        }
      },
      onSubmit: values => {
        console.log('submit values:', values);
      },
    },
    group: 'inputs',
  };
  