ストーリーブック
gitlab-org/gitlab プロジェクトのストーリーブックはGitLab Pages サイトでご覧いただけます。
ローカル開発におけるストーリーブック
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 -
公式の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/as を付けてください。こうすることで、Storybookのナビゲーションが内部ディレクトリ構造と密接に対応するようになります。
GitLab REST と GraphQL API を使う
GitLabRESTAPI またはGraphQLAPI を使用するコンポーネントのストーリーを書くことができます。
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 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/remote_development/workspaces_list',
decorators: [withGitLabAPIAccess],
};
export const Default = Template.bind({});
Default.args = {};