[vite+storybook] 스토리북 argTypes 명확하게 표기하기

 

storybook은 각 스토리에서 args로 넘기는 값으로 props를 자동으로 추론하여 표기하고 있다.

하지만 넘겨주는 값이 object인 경우 등 표기가 부정확해지는 경우가 있다.

 

뭘 넘겨준다고 말하고 있는거야...

 

 

이 때, argTypes를 설정해서 원하는대로 표기를 바꿀 수 있다.

import { Meta, StoryObj } from '@storybook/react';
import Chip from './Chip';

const meta: Meta<typeof Chip> = {
  component: Chip,
  argTypes: {
    icon: {
        table: { type: { summary: '하나요' } }, // HERE!!
        description: '둘이요', // HERE!!
        control: 'object',
    },
  },
  parameters: {
    docs: {
      description: {
        component: 'chip 컴포넌트입니다.',
      },
    },
  },
};

type Story = StoryObj<typeof Chip>;

export const Chips: Story = {
  args: { children: 'CHIP' },
};

export default meta;

 

 

결과물

 

 

 

 

여담 1.

아래와 같이 type 또는 interface에서 해당 props 위에 주석을 달아놓은 경우,

해당 주석 내용이 description 부분에 자동으로 들어간다.

export interface ChipProps extends DefaultChipType {
  children: React.ReactNode;
  size?: ChipSizeProps;

  /** 아이콘 컴포넌트와 위치를 함께 넣어줍니다 */
  icon?: { position: 'right' | 'left'; render: React.ReactElement<IconProps> };

  isRound?: boolean;
  ...
}

 

만약 argTypes: { icon : { description: "..." } } 에 들어간 내용이 있다면, 주석보다 여기에 작성된 내용으로 덮어씌워진다.

 

 

 

여담 2.

summary와 함께 detail도 넣어줄 수 있다.

  argTypes: {
    icon: {
      table: { type: { summary: '하나요', detail: '짜자잔' } }, // HERE!!
      control: 'object',
    },
  },

 

 

 

공식문서

https://storybook.js.org/docs/api/arg-types#description

 

참고 블로그

https://iyu88.github.io//storybook/2023/04/07/storybook-docs.html