Storybook

Setup

$ npx create-react-app example-story-book
$ cd example-story-book
$ npm install @storybook/react --save-dev

story book 설정을 위해 .storybook 폴더 아래에 config 파일을 추가합니다.

// .storybook/config.js

import { configure } from "@storybook/react";

configure(require.context("../docs", true, /\.stories\.js$/), module);

config 파일추가 후 story component 들을 놓을 docs 폴더를 추가해주세요 docs 폴더의 story component 들은 *.stories.js 이라는 패턴의 이름을 가집니다.

storybook 에서 제공해주는 demo button 을 추가해보겠습니다.

// docs/button.stories.js

import React from "react";

import { storiesOf } from "@storybook/react";
import { Button } from "@storybook/react/demo";

export default { title: "Button" };

storiesOf("Button Component", module)
  .add("withText", () => <Button>Hello Button</Button>)
  .add("withEmoji", () => (
    <Button>
      <span role="img" aria-label="so cool">
        😀 😎 👍 💯
      </span>
    </Button>
  ));

storiesOf 는 컴포넌트를 스토리 단위로 노출 할 수 있게 도와줍니다. 크게 Button Component 라는 스토리로 묶어 노출합니다.

Button Component Story

실행을 위해 package.json 의 scripts 에 storybook 명령어를 추가합니다.

// package.json
"scripts": {
  "docs": "start-storybook"
}

$ npm run docs

우리가 위쪽에서 story 에 추가했던 button 컴포넌트를 확인 할 수 있습니다. 이를 이용하면 상태에 따른 컴포넌트 변화 또는 디자인 적용여부를 미리 확인 할 수 있습니다.

Component 추가해보기

styled-components 를 이용하여 직접 구성해보겠습니다.

$ npm install --save styled-components

src 폴더 아래에 input.js 라는 component 를 만들어주세요

// src/input.js 

import styled, { css } from "styled-components";

const BaseInput = styled.input`
  width: 100%;
  padding: 14px;
  border-radius: 2px;
  border: solid 1px #efefef;
  background-color: #ffffff;
  font-size: 16px;
  outline: none;
  box-sizing: border-box;

  ${({ focus }) =>
    focus &&
    css`
      border: solid 1px #ff30ac;
    `}
`;

export default BaseInput;

input 은 focus props 에 따라 border style 이 변합니다. 해당 component 를 story book 에 추가합니다.

// docs/input.stories.js

import React from "react";
import { storiesOf } from "@storybook/react";
import Input from "../src/input";

export default { title: "Button" };

storiesOf("Input", module)
  .add("Base Input", () => <Input />)
  .add("Focus Input", () => <Input focus />);

Addon

addon 을 추가하면 기본동작 외 여러가지 작업을 할 수 있습니다.

$ npm install -D @storybook/addon-knobs @storybook/addon-knobs/register

.storybook 폴더에 addons.js 파일을 추가하여 addons 를 등록합니다.

// .storybook/addons.js

import "@storybook/addon-knobs/register";

config 파일에도 추가해야합니다.

// .storybook/config.js

import { configure, addDecorator } from "@storybook/react";
import { withKnobs } from "@storybook/addon-knobs";

addDecorator(withKnobs);

configure(require.context("../docs", true, /\.stories\.js$/), module);

$ npm run docs

addon 기능으로 input 의 focus 를 조절하도록 추가해보겠습니다.

// docs/input.stories.js

import React from "react";
import { storiesOf } from "@storybook/react";
import { boolean } from "@storybook/addon-knobs";
import Input from "../src/input";

storiesOf("Input", module)
  .add("Base Input", () => <Input focus={boolean("포커스", false)} />)
  .add("Focus Input", () => <Input focus />);

배포

Storybook 을 배포할 Github Repo 를 만들어주세요

Github page 에 간단하게 배포할 수 있게 도와주는 모듈을 설치해야합니다.

$ npm i @storybook/storybook-deployer --save-dev

설치후 배포 명령어를 등록합니다.

// package.json 

"scripts": {
  "docs": "start-storybook",
  "deploy": "storybook-to-ghpages"
}

$ npm run deploy 

아주 간단하게 배포가 가능합니다.

배포 결과물은 <github name>.github.io/<repo name>

저의 경우 https://appear.github.io/example-storybook 입니다.