storybook formik decorator

stories-index.js

const initialValues = { comment: 'hello'; }

storiesOf('Form Controls: Select', module)
  .addDecorator(withFormValues(initialValues)
  .add('default', () => (
      <Select name="select" label="Country..." options={selectOptions} />
    </Formik>
  ))

withFormValues.js

import React from 'react';
import { Formik } from 'formik';

/**
 * Decorates a story with Formik
 * @param initialValues
 * @param validationSchema - yup schema (formik validationSchema)
 * @returns {function(*): *}
 */


export const withFormValues = (initialValues, validationSchema) => story => (
  <Formik
    initialValues={initialValues}
    validationSchema={validationSchema}
    onSubmit={values => console.log(values)}
  >
    {story()}
  </Formik>
);

@iamdanthedev Did you manage to make this work with the formik render function? Something like:

const withFormValues = (initialValues, validationSchema) => story => (
    <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        validateOnBlur={false}
        validateOnChange={false}
        onSubmit={values => console.log(values)}
        render={({ values, touched, errors }) => story(values, touched, errors)}
    />
);

You can use a storybook action for onSubmit

import { action } from "@storybook/addon-actions";

const formSubmit = action("form-submit");

...
    onSubmit={formSubmit}
...