react-hook-form의 FormProvider와 storybook을 함께 사용하는 preview 샘플코드

• 기존에 preview.ts를 사용하고 있었다면, preview.tsx 로 rename.
  

• preview.tsx

import type { Preview } from "@storybook/react";
import React from "react";
import { FormProvider, useForm } from "react-hook-form";
import "../src/index.css";

/**
 * 각 컴포넌트에 react-hook-form 이 결합되어 있어서
 * storybook 화면에서 에러를 방지하기 위해 global FormProvider wrapping을 수행.
 */
const formDecorator = (Story) => {
  const methods = useForm();
  return (
      <FormProvider {...methods}>
        <Story />
      </FormProvider>
  );
};

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
  decorators: [formDecorator],
};

export default preview;