reactjsformikstorybook

Storybook + formik, controls not showing


I've been using storybook to build out my application along with tailwind, I faced a problem when configuring controls for my stories, but I found a workaround documented in aGH issue. Now I'll be working on a story for a book by using the Formik plugin, but it seems like the same error I faced still persists with this plugin.

Here's how I've created stories so far, this indeed shows me all the controls

export default {
  title: "Button",
  component: Button,
  argTypes: {
    loading: {
      control: { type: "boolean" },
      name: "Is Loading",
      description: "Loading state for button, this will display a spinner",
    },
    // More controls....
  },
} as Meta;

const Template = (args: ButtonProps) => <Button {...args} />;
export const Default = Template.bind({});

The following code is pretty much based on the Formik plugin guide, this displays This story is not configured to handle controls. Learn how to add controls » where the controls should be displayed.

storiesOf("Sign Form", module)
  .addDecorator(withFormik)
  .add("Default", () => <SignInForm />, {
    Formik: {
      initialValues: {
        username: "",
        password: "",
      },
    },
  });

How could I port the code with for the Formik plugin in the work round?

I tried the following but the controls provided by the plugin are not shown:

import React from "react";
import { Meta } from "@storybook/react";
import SignInForm from "./SigninForm";
import withFormik from "storybook-formik";

export default {
  title: "Signin form",
  component: SignInForm,
  decorators: [withFormik],
  parameters: {
    formik: {
      initialValues: {
        username: "",
        password: "",
      },
    },
  },
} as Meta;

const Template = (args: any) => <SignInForm {...args} />;
export const Default = Template.bind({});

Solution

  • This is how I did this.

    import React from "react";
    import withFormik from "storybook-formik";
    import * as Yup from "yup";
    import { useField } from "formik";
    import { TextInput } from "../components/TextInput";
    
    const FormSchema = Yup.object().shape({
      firstName: Yup.string()
        .min(2)
        .max(128)
        .required(
          "Field may not be less than 2 letters or include numeric values/symbols."
        ),
      email: Yup.string()
        .required('Must include the "@" symbol and valid domain (e.g. .com, .net).')
        .email('Must include the "@" symbol and valid domain (e.g. .com, .net).'),
    });
    
    const PersonalInfoSubform = () => {
      const [firstNameField, firstNameMeta] = useField("firstName");
      const [emailField, emailMeta] = useField("email");
      return (
        <>
          <TextInput
            name={firstNameField.name}
            type={"text"}
            touched={firstNameMeta.touched}
            error={firstNameMeta.error}
            isDisabled={false}
            labelText={"Enter your name"}
            required={true}
          />
          <TextInput
            name={emailField.name}
            type={"email"}
            touched={emailMeta.touched}
            error={emailMeta.error}
            isDisabled={false}
            labelText={"Enter your name"}
            required={true}
          />
        </>
      );
    };
    export default {
      title: "Form/TextInputs",
      component: PersonalInfoSubform,
      decorators: [withFormik],
      parameters: {
        formik: {
          initialValues: {
            firstName: "",
            email: "",
          },
          validationSchema: FormSchema,
          onSubmit: (v) => console.log("I want to log these... ", v),
        },
      },
    };
    
    const Template = (args) => <PersonalInfoSubform {...args} />;
    export const Default = Template.bind({});