Storybook

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

로컬 개발에서의 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 지침에 따라 스토리 작성

    note
    스토리의 title 필드를 javascripts/ 디렉터리에서 컴포넌트의 파일 경로로 지정하되, /components 부분은 제외하세요. 예를 들어, 컴포넌트가 app/assets/javascripts/vue_shared/components/sidebar/todo_toggle/todo_button.vue에 위치한 경우, 스토리 titlevue_shared/sidebar/todo_toggle/todo_button로 지정하세요. 컴포넌트가 ee/ 디렉터리에 있는 경우, 스토리 제목에도 ee/를 접두어로 사용하세요. 이는 내부 디렉터리 구조에 Storybook 네비게이션이 잘 대응하도록 합니다.

GitLab REST 및 GraphQL API 사용

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

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

API 액세스를 추가하려면:

  1. GitLab 인스턴스에서 개인 액세스 토큰을 생성하세요.

    note
    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 액세스 패널을 사용하여 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 context에서 제공된 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/remote_development/workspaces_list',
  decorators: [withGitLabAPIAccess],
};

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

Default.args = {};

Vuex 스토어 사용

Vuex 스토어에 액세스가 필요한 컴포넌트에 대한 스토리를 작성하려면 Story context에서 제공된 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 = {};