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. 스토리는 컴포넌트의 노출된 props 및 이벤트와 관련된 각각의 크게 다른 UI 상태를 보여주어야 합니다.

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

참고: 스토리의 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 인스턴스에서 개인 액세스 토큰을 생성합니다.

    참고: 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 컨텍스트에서 제공되는 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 = {};