Storybook + formik, controls not showing

user_8897307 0
Viewed 1745

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({});
storybook formik reactjs
1 Answers

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({});
user_54836040
Related