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

Storybook

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

로컬 개발에서의 Storybook

Storybook 의존성 및 구성은 storybook/ 디렉터리에 있습니다.

로컬에서 Storybook을 빌드하고 실행하려면 gitlab 프로젝트의 루트 디렉터리에서 다음을 수행하세요:

1. Storybook 의존성 설치:

   yarn storybook:install
   

2. Storybook 사이트 빌드:

   yarn storybook:start
   

Storybook에 컴포넌트 추가

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

스토리를 추가하려면:

1. Vue 컴포넌트와 동일한 디렉터리에 새 .stories.js 파일을 생성합니다. 파일 이름은 Vue 컴포넌트와 동일한 접두사를 가져야 합니다.

   vue_shared/
   ├─ components/
   │  ├─ sidebar
   │  |  ├─ todo_toggle
   │  |  |  ├─ todo_button.vue
   │  │  |  ├─ todo_button.stories.js

2. 공식 Storybook 지침에 따라 스토리를 작성합니다.

   스토리의 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/로 접두사를 붙여야 합니다. 이렇게 하면 Storybook 탐색이 내부 디렉터리 구조와 밀접하게 매핑되도록 할 수 있습니다.

GitLab REST 및 GraphQL API 사용

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

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

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

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

   gitlab.com에서 테스트하는 경우 가능한 경우 read_api 권한이 있는 토큰을 사용하고 토큰을 일시적으로 유효하게 만드십시오.

2. storybook 디렉터리에 .env 파일을 생성합니다. 시작점으로 storybook/.env.template 파일을 사용합니다.

3. 생성한 액세스 토큰을 API_ACCESS_TOKEN 변수로 설정합니다.

4. GitLab 인스턴스의 도메인 URL을 나타내는 GITLAB_URL 변수를 설정합니다. 예: http://gdk.test:3000.

5. Storybook을 시작하거나 다시 시작합니다.

또한 Storybook UI의 GitLab API Access 패널을 사용하여 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 Vue from 'vue';
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 = {};