storybook-formik/dist/esm/index.js

A storybook addon that allows you to use components in your stories that rely on Formik context and see internal Formik state in a panel.

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import React, { useEffect } from 'react';
import { Formik, Form } from 'formik';
import addons, { makeDecorator, useArgs } from '@storybook/addons';
import { EVT_ON_SUBMIT, EVT_RENDER, EVT_SUBMIT } from './shared';
export var withFormik = makeDecorator({
    name: 'withFormik',
    parameterName: 'formik',
    skipIfNoParametersOrOptions: false,
    wrapper: function (getStory, context, _a) {
        var parameters = _a.parameters;
        var channel = addons.getChannel();
        var submitter;
        channel.on(EVT_SUBMIT, function () { return submitter && submitter(); });
        var formikConfig = parameters;
        var hasArgs = Object.keys(context.argTypes).length > 0;
        var initialValues = (formikConfig && formikConfig.initialValues) || context.args || {};
        if (formikConfig &&
            formikConfig.validationSchema &&
            parameters.castValues) {
            initialValues = formikConfig.validationSchema.cast(initialValues);
        }
        var _b = useArgs(), _ = _b[0], updateArgs = _b[1];
        return (React.createElement(Formik, __assign({ enableReinitialize: true, onSubmit: function (v, _a) {
                var setSubmitting = _a.setSubmitting;
                channel.emit(EVT_ON_SUBMIT, v);
                setSubmitting(false);
            } }, formikConfig, { initialValues: initialValues }), function FormWrap(props) {
            channel.emit(EVT_RENDER, props);
            if (!submitter) {
                submitter = props.submitForm;
            }
            useEffect(function () {
                if (!hasArgs) {
                    return;
                }
                updateArgs(props.values);
            }, [hasArgs, props.values]);
            return React.createElement(Form, null, getStory(context));
        }));
    }
});
export default withFormik;
//# sourceMappingURL=index.js.map