스토리북이란?

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free.

스토리북은 UI 구성 요소와 페이지를 개별적으로 빌드하기 위한 프론트엔드 워크샵입니다. 수천 개의 팀이 UI 개발, 테스트 및 문서화를 위해 사용하고 있습니다. 오픈 소스이며 무료입니다.

다른 기업들 스토리북 적용 예시

스토리북 쇼케이스 페이지에 접속하면 다른 기업들의 storybook 을 볼 수 있다.

해당 카테고리 내에는 여러가지 소분류 항목이 나열되어 있는데, Overview 에서는 인기있는 스토리북 등 사용자들이 접근하기 쉽게 보여주고, Projects 는 순수하게 스토리북 프로젝트를 목록화해서 보여주며, Glossary 는 각 기능별로 목록화해서 보여준다.

회사의 스토리북 시스템이 궁금하면 Projects 에서 조회하면 되고, 특정 기능이 어떤 방식으로 짜여져있는지 궁금하면 Glossary 에서 조회하면 된다.

주요 회사 목록

어도비 Adobe

스토리북 지원 기능

스토리북 버전 비교

스토리북 7 버전(베타)

AutoDocs 지원

단일 컴포넌트에 대해 자동으로 설명하는 템플릿을 포함한다.

기존 버전에서는 스토리마다 DOCS 탭이 존재하여 스토리를 보여줬지만, 7 버전부터는 사이드바에 별도의 Docs 문서가 존재해서 전체 스토리를 확인할 수 있다.

단, AutoDocs 의 활성화는 별도의 프로퍼티를 통해 사용여부를 결정한다.

export default {
  component: Button,
  tags: ['autodocs'], // Auto Docs 페이지 동작하도록 하는 프로퍼티
};

매개변수를 통한 AutoDocs 제어 가능

AutoDocs 템플릿을 통해 컴포넌트의 이름과 설명, 기본 스토리 및 제어 블록 등을 간단하게 제어할 수 있다.

export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
  parameters: {
    docs: {
      story: { inline: true }, // render the story in an iframe
      canvas: { sourceState: 'shown' }, // start with the source open
      source: { type: 'code' }, // forces the raw source code (rather than the rendered JSX).
    },
  },
};