로컬 개발에서의 스토리북
스토리북에 컴포넌트 추가하기
GitLab REST 및 GraphQL API 사용하기
- API 액세스 토큰 및 GitLab 인스턴스 URL 설정
- 스토리에서 API 액세스 설정하기
  - REST API 사용하기
  - GraphQL 사용하기
Vuex 스토어 사용하기

스토리북

gitlab-org/gitlab 프로젝트의 스토리북은 GitLab Pages 사이트에서 확인할 수 있습니다.

로컬 개발에서의 스토리북

스토리북의 의존성 및 구성은 storybook/ 디렉토리에 있습니다.

로컬에서 스토리북을 빌드하고 실행하려면, gitlab 프로젝트의 루트 디렉토리에서:

스토리북 의존성을 설치합니다:
```
yarn storybook:install
```
스토리북 사이트를 빌드합니다:
```
yarn storybook:start
```

스토리북에 컴포넌트 추가하기

스토리는 gitlab 리포지토리의 모든 Vue 컴포넌트에 추가할 수 있습니다.

스토리를 추가하려면:

Vue 컴포넌트와 같은 디렉토리에 새 .stories.js 파일을 생성합니다.
파일 이름은 Vue 컴포넌트와 같은 접두사를 가져야 합니다.
```
vue_shared/
├─ components/
│  ├─ sidebar
│  |  ├─ todo_toggle
│  |  |  ├─ todo_button.vue
│  │  |  ├─ todo_button.stories.js
```
스토리는 컴포넌트의 노출된 props와 이벤트와 관련된 각 주요한 UI 상태를 보여주어야 합니다.

스토리를 작성하는 방법에 대한 지침은 공식 스토리북 지침을 참조하세요.

주의: 스토리의 title 필드는 javascripts/ 디렉토리의 컴포넌트 파일 경로로 지정하되, /components 부분은 제외해야 합니다.
예를 들어, 컴포넌트가 app/assets/javascripts/vue_shared/components/sidebar/todo_toggle/todo_button.vue에 위치하는 경우,
스토리 title은 vue_shared/sidebar/todo_toggle/todo_button으로 지정해야 합니다.
컴포넌트가 ee/ 디렉토리에 있는 경우, 스토리의 제목을 ee/로 접두어를 붙여야 합니다.
이렇게 하면 스토리북 탐색이 우리의 내부 디렉토리 구조와 밀접하게 일치하도록 보장됩니다.

GitLab REST 및 GraphQL API 사용하기

GitLab REST 또는
GraphQL API를 사용하는 컴포넌트에 대한 스토리를 작성할 수 있습니다.

API 액세스 토큰 및 GitLab 인스턴스 URL 설정

API 액세스를 가진 스토리를 추가하려면:

GitLab 인스턴스에서 개인 액세스 토큰을 생성합니다.

주의: gitlab.com에서 테스트하는 경우 가능하면 read_api 권한이 있는 토큰을 사용하고 토큰의 유효 기간이 짧게 설정해야 합니다.
storybook 디렉토리에 .env 파일을 생성합니다. storybook/.env.template 파일을
시작점으로 사용하세요.
API_ACCESS_TOKEN 변수를 생성한 액세스 토큰으로 설정합니다.
GITLAB_URL 변수를 GitLab 인스턴스의 도메인 URL로 설정합니다. 예: http://gdk.test:3000.
스토리북을 시작하거나 재시작합니다.

스토리북 UI의 GitLab API 액세스 패널을 사용하여 GitLab 인스턴스 URL과 액세스 토큰을 설정할 수도 있습니다.

스토리에서 API 액세스 설정하기

GitLab API를 사용할 스토리에 withGitLabAPIAccess 데코레이터를 적용해야 합니다. 이 데코레이터는
API 액세스 매개변수를 제공하지 않으면 스토리가 작동하지 않음을 나타내는 배지를 표시합니다:

import { withGitLabAPIAccess } from 'storybook_addons/gitlab_api_access';
import Api from '~/api';
import { ContentEditor } from './index';

export default {
  component: ContentEditor,
  title: 'ce/content_editor/content_editor',
  decorators: [withGitLabAPIAccess],
};

REST API 사용하기

Storybook은 storybook/config/preview.js에서 ~/lib/utils/axios_utils를 설정합니다. REST API를 사용하는 구성 요소는 유효한 GitLab 인스턴스 URL과 액세스 토큰만 제공하면 즉시 작동해야 합니다.

GraphQL 사용하기

GraphQL API를 사용하는 구성 요소의 스토리를 작성하려면 Story 컨텍스트에서 제공된 createVueApollo 메서드를 사용하세요.

import Vue from 'vue';
import VueApollo from 'vue-apollo';
import { withGitLabAPIAccess } from 'storybook_addons/gitlab_api_access';
import WorkspacesList from './list.vue';

Vue.use(VueApollo);

const Template = (_, { argTypes, createVueApollo }) => {
  return {
    components: { WorkspacesList },
    apolloProvider: createVueApollo(),
    provide: {
      emptyStateSvgPath: '',
    },
    props: Object.keys(argTypes),
    template: '<workspaces-list />',
  };
};

export default {
  component: WorkspacesList,
  title: 'ee/workspaces/workspaces_list',
  decorators: [withGitLabAPIAccess],
};

export const Default = Template.bind({});

Default.args = {};

Vuex 스토어 사용하기

Vuex 스토어에 접근이 필요한 구성 요소의 스토리를 작성하려면 Story 컨텍스트에서 제공된 createVuexStore 메서드를 사용하세요.

import { withVuexStore } from 'storybook_addons/vuex_store';
import DurationChart from './duration-chart.vue';

const Template = (_, { argTypes, createVuexStore }) => {
  return {
    components: { DurationChart },
    store: createVuexStore({
      state: {},
      getters: {},
      modules: {},
    }),
    props: Object.keys(argTypes),
    template: '<duration-chart />',
  };
};

export default {
  component: DurationChart,
  title: 'ee/analytics/cycle_analytics/components/duration_chart',
  decorators: [withVuexStore],
};

export const Default = Template.bind({});

Default.args = {};