Storybook + formik，控件不显示

Question

我一直在使用 storybook 和 tailwind 来构建我的应用程序，我在为我的故事配置控件时遇到了一个问题，但我在 aGH issue 中找到了一个解决方法。现在我将使用Formik plugin 为一本书编写一个故事，但我遇到的同样错误似乎仍然存在于这个插件中。

这是迄今为止我创建故事的方式，这确实向我展示了所有控件

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

以下代码几乎基于 Formik 插件指​​南，这将显示 This story is not configured to handle controls. Learn how to add controls » 应显示控件的位置。

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

如何在工作回合中为 Formik 插件移植代码？

我尝试了以下，但插件提供的控件没有显示：

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

Answer 1

我就是这样做的。

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