Storybook
gitlab-org/gitlab
프로젝트의 Storybook은 GitLab Pages 사이트에서 사용할 수 있습니다.
로컬 개발에서의 Storybook
Storybook의 종속성 및 구성은 storybook/
디렉터리에 위치합니다.
로컬에서 Storybook을 빌드하고 시작하려면 gitlab
프로젝트의 루트 디렉터리에서 다음을 수행하세요:
-
Storybook 종속성 설치:
yarn storybook:install
-
Storybook 사이트 빌드:
yarn storybook:start
Storybook에 컴포넌트 추가
gitlab
리포지토리 내의 모든 Vue 컴포넌트에 대해 스토리를 추가할 수 있습니다.
스토리를 추가하려면:
-
Vue 컴포넌트와 동일한 디렉터리에 새로운
.stories.js
파일을 생성하세요. 파일명은 Vue 컴포넌트와 동일한 접두사를 가져야 합니다.vue_shared/ ├─ components/ │ ├─ sidebar │ | ├─ todo_toggle │ | | ├─ todo_button.vue │ │ | ├─ todo_button.stories.js
-
스토리는 컴포넌트의 노출된 props 및 이벤트와 관련된 각각의 크게 다른 UI 상태를 보여주어야 합니다.
스토리 작성 방법에 대한 지침은 공식 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 액세스를 사용하여 스토리를 추가하려면:
-
GitLab 인스턴스에서 개인 액세스 토큰을 생성합니다.
참고:
gitlab.com
에서 테스트하는 경우, 가능한 경우read_api
토큰을 사용하고 토큰이 단기간 유효한지 확인하세요. -
storybook
디렉터리에.env
파일을 생성합니다. 시작점으로storybook/.env.template
파일을 사용합니다. -
생성한 액세스 토큰을
API_ACCESS_TOKEN
변수로 설정합니다. -
GITLAB_URL
변수를 GitLab 인스턴스의 도메인 URL(예:http://gdk.test:3000
)로 설정합니다. -
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 = {};