# 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) 입니다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://simplereact.gitbook.io/simplereact/storybook.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.