Storybook 애드온 (확장)

Storybook의 애드온(addons)은 Storybook을 확장합니다. Storybook 코어 팀에서 개발한 "공식" 애드온 뿐만 아니라 타사 애드온을 통한 확장도 가능합니다. 유용한 애드온을 설치해 Storybook에 다양한 기능을 추가할 수 있습니다.

addon-a11y

@storybook/addon-a11y 패키지를 프로젝트에 설치합니다.

패키지 설치

npm i -D @storybook/addon-a11y

애드온 목록에 설치한 @storybook/addon-a11y 패키지를 추가합니다.

.storybook/main.js

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

접근성 결과를 한국어로 출력하려면 axe-core/locales/ko.json을 불러와 a11y.config.locale 값으로 설정합니다.

.storybook/preview.js

// 한국어 설정
import ko from 'axe-core/locales/ko.json'

// 글로벌 파라미터 설정
// 참고: https://bit.ly/2NdEOJG
export const parameters = {
  a11y: { 
    config: { locale: ko } 
  },
  // ...
}

addon-knob

@storybook/addon-knob 패키지를 프로젝트에 설치합니다.

패키지 설치

npm i -D @storybook/addon-knobs

애드온 목록에 설치한 @storybook/addon-knob 패키지를 추가합니다.

.storybook/main.js

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

노드(knob)를 컴포넌트에서 사용하는 예시 코드입니다.

import React from 'react';
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';

export default {
  title: '노드 애드온 추가 예시',
  // 노브를 Story에 사용하려면 `withKnobs` 데코레이터를 추가합니다.
  decorators: [withKnobs],
};

// button 요소에 노드를 적용한 예
export const withAButton = () => (
  <button disabled={boolean('Disabled', false)}>
    {text('레이블', '안녕! Storybook')}
  </button>
);

// 노드를 동적 변수로 설정한 예
export const asDynamicVariables = () => {
  const name = text('이름', '김한나');
  const age = number('나이', 25);
  const content = `저 ${name}는 ${age}살 대한민국 여성입니다.`;

  return <div>{content}</div>;
}

사용가능한 knobs 유형은 Available Knobs 문서를 참고하세요.