> For the complete documentation index, see [llms.txt](https://simplereact.gitbook.io/simplereact/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://simplereact.gitbook.io/simplereact/storybook.md).

# Storybook

### Setup  

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

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

```javascript
// .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 을 추가해보겠습니다.

```javascript
// 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](/files/-LsfXTOK31z75FPCSgc4)

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

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

```
$ npm run docs
```

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

![](/files/-LsfXeCkM80nidN_RjJX)

### Component 추가해보기&#x20;

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

```
$ npm install --save styled-components
```

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

```javascript
// 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 에 추가합니다.

```javascript
// 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 />);
```

![](/files/-Lsffw_rNFQkX3UHF-4a)

### Addon

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

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

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

```javascript
// .storybook/addons.js

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

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

```javascript
// .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
```

![](/files/-LsfkP-DVdpZ1NjeXU8q)

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

```javascript
// 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 />);
```

![](/files/-LsflmCeQGuEWWqV9F4V)

### 배포

Storybook 을 배포할 Github Repo 를 만들어주세요&#x20;

![](/files/-LsfU0BbwlpiEeVDPvq8)

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](https://appear.github.io/example-storybook/?path=/story/button--with-text) 입니다.