Essential addons

Control

설치

npm i -D @storybook/addon-controls

.storybook/main.js 파일에 아래와 같이 설정한다.

module.exports = {
  addons: ['@storybook/addon-controls'],
};

사용

stories.js 파일의 기본내보내기 객체에 argTypes에 설정한다.

export default {
  title: 'Button',
  argTypes: {
    label: { control: 'text' },
    borderWidth: { control: { type: 'number', min: 0, max: 10 } },
  },
};

Control Type

color

argTypes: {
    backgroundColor: { control: 'color' },
},

selector

argTypes: {
  control: {
    type: 'select',
    options: ['Item One', 'Item Two', 'Item Three'],
  },
}

외부에서 객체를 할당한 변수를 가져와 객체를 순환하여 사용할 수 있다.

const iconMap = { IconA, IconB, IconC, IconD, IconE };

export default {
  component: YourComponent,
  title: 'My Story with Icons',
  argTypes: {
    icon: {
      control: {
        type: 'select',
        options: Object.keys(iconMap),
      },
    },
  },
}

이외의 유형은 공식문서 참고!

참고

• Storybook Controls Addon

• Control → 공식 문서

• Story Controle → 공식문서 한글 번역

Control and proptypes

프로젝트를 하던 중 스토리북에서 control의 역할과 propType이 구분이 안갔다. 둘 다 컴포넌트의 설정을 테스트하는 역할은 맞는데 어떤 항목은 control에 어떤 항목은 propTypes하는지 말이다.

붉은 박스는 propType 설정, 녹색 박스는 controle 설정

위의 이미지에서 붉은 박스는 propType 설정, 녹색 박스는 controle 설정이다. propType은 항목을 설정하고 그 항목의 control 유형을 따로 설정한다면 control을 설정한다.