Vue Storybook6 - mdx

목차

• Introduction
• 설정
• 기본적인 mdx
• controls
• argTypes
• Advanced argTypes
• 전체적인 코드
• Conclusion
• Reference

📌 Introduction

안녕하세요! 오늘은 storybook을 mdx로 하는 법에 대해서 알아보겠습니다. mdx로 작성하는 이유는 docs를 만들기 위함입니다. 그럼 한번 떠나볼게요~

📌 설정

일단 Docs는 자동적으로 parsing해서 만들어주곤 합니다. 그러나 만들지 않은 것에 대해서 만드는 부분이 조금 그래서 저는 설정을 꺼주려고 합니다.

// preview.js
import { addParameters } from "@storybook/vue";

addParameters({ docs: { page: null } });

📌 기본적인 mdx

story를 만드는것과 크게 다른점은 없지만 형식을 조금 가져와야합니다.

import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs/blocks";

크게 사용하는 부분들은 Meta, Story, Canvas, ArgsTable정도 입니다.

• Meta는 기존 argTypes나 name 같은 것들을 정의할 수 있어요.
• Story에는 하나의 story가 들어갑니다.
• Canvas는 Story를 감싸주는 요소로 좀더 보기 쉽고 code를 보여줍니다.
• ArgsTable은 props에 대한 정의들을 보여줄 수 있어요.

또한 mdx 파일이기 때문에 md문법을 다 쓸수 있습니다. 또한 자바스크립트 문법도 사용이 가능해요. 그래서 이전 story를 만들때 template을 만들어 주던 것처럼 똑같이 이렇게 template을 만들어줄 수 있습니다.

export const Template = (args, { argTypes }) => ({
  components: { MyButton },
  props: Object.keys(argTypes),
  methods: {
    onClick() {
      console.log("HELLO");
    },
  },
  template: ` <div>
    <my-button :btn-type="btnType" @click="onClick">{{ title }}</my-button>
  </div>
  `,
});

📌 controls

controls는 마치 addons같은 기능을 합니다. 사용자가 수동으로 값을 변경을 할 수 있어요.

controls는 Meta 태그안에 argTypes에 정의를 해줄 수 있습니다. 그럼 argTypes를 한번 볼까요?

📌 argTypes

argTypes는 Meta 태그안에 정의가 됩니다. 해당 태그로 props들을 자유롭게 넘겨 줄수 있어요.

📌 전체적인 코드

import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs/blocks";
import MyButton from "../components/MyButton";

<Meta
  title="MyButton2"
  argTypes={{
    btnType: {
      name: "btnType",
      type: { name: "string", required: true },
      description: "btn type",
      control: { type: "select", options: ["blue", "red"] },
      defaultValue: "blue",
      table: {
        defaultValue: {
          summary: "blue",
        },
        type: {
          summary: "목록",
          detail: "blue | red",
        },
      },
    },
    title: {
      name: "title",
      type: { name: "string" },
      description: "title",
      control: { type: "text" },
      defaultValue: "hello",
    },
  }}
/>

# MyButton

Custom made Button

export const Template = (args, { argTypes }) => ({
  components: { MyButton },
  props: Object.keys(argTypes),
  methods: {
    onClick() {
      console.log("HELLO");
    },
  },
  template: ` <div>
    <my-button :btn-type="btnType" @click="onClick">{{ title }}</my-button>
  </div>
  `,
});

### 한번에 모아보기

<Canvas>
  <Story name="allColors">
    {{
      components: { MyButton },
      computed: {
        allColors() {
          return ["blue", "red"];
        },
      },
      template: `
    <div>
      <div v-for="(color, index) in allColors" :key="index">
        <my-button :btn-type="color">HELLO</my-button>
      </div>
    </div>
    `,
    }}
  </Story>
</Canvas>

<Canvas name="docs_btn">
  <Story name="Primary">{Template.bind({})}</Story>
</Canvas>

<ArgsTable story="Primary" />

이렇게 변환이 됩니다.

📌 Conclusion

이렇게 storybook을 mdx문서로 한번 변환을 해보았어요. 생각보다 스토리북이 많이 편해지고 간편해진거 같아서 너무 기분이 좋습니다. 그럼 다음 포스팅에서 만나요 안녕!

📌 Reference

• 스토리북 공식문서
• donghoon-song 깃