import storybook

[manuramber]

Hello, I cant get to see Formik panel in storybook.

After installing by: npm install --save-dev storybook-formik

I can see that the package is created in node.modules. But after trying several options of importing it in main.js I cant get to work with it:

module.exports = { "stories": [ "../src/*/.stories.mdx", "../src/*/.stories.@(js|jsx|ts|tsx)" ], "addons": [ "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/preset-create-react-app", "storybook-formik/register" // storybook-formik/dist/register also doesnt work. ] }

I just want to display the example provided:

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

Component: const FormikExample = () => (

);

Story:

import React from 'react'; import { storiesOf } from '@storybook/react'; import withFormik from 'storybook-formik'; import FormikExample from './index.js';

storiesOf('Company', module) .addDecorator(withFormik) .add('FormikExample', () => , { formik: { initialValues: { forename: 'John', surname: 'Johnerson', }, }, });

export default FormikExample;

Please help

[bhishp]

Does the Formik tab show in the addons panel at all?

Is the above a complete code snippet? Because the code where you actually add the story is missing the rendering of the component.

storiesOf('Company', module)
.addDecorator(withFormik)
.add('FormikExample', () => , {
  formik: {
    initialValues: {
      forename: 'John',
      surname: 'Johnerson',
    },
  },
});

But this include the imported component in the .add line

.add('FormikExample', () => <FormikExample />, {
  formik: {
    initialValues: {
      forename: 'John',
      surname: 'Johnerson',
    },
  },
});

Additionally your story seems to be exporting the example component, you probably don't want to do this.

[bhishp]

Closing due to inactivity