The Storybook for the
gitlab-org/gitlab project is available on our GitLab Pages site.
Storybook in local development
Storybook dependencies and configuration are located under the
To build and launch Storybook locally, in the root directory of the
Install Storybook dependencies:
Build the Storybook site:
Adding components to Storybook
Stories can be added for any Vue component in the
To add a story:
Create a new
.stories.jsfile in the same directory as the Vue component. The filename should have the same prefix as the Vue component.
vue_shared/ ├─ components/ │ ├─ sidebar │ | ├─ todo_toggle │ | | ├─ todo_button.vue │ │ | ├─ todo_button.stories.js
Write the story as per the official Storybook instructionsSpecify the
titlefield of the story as the component’s file path from the
/componentspart. For example, if the component is located at
vue_shared/sidebar/todo_toggle/todo_button. If the component is located in the
ee/directory, make sure to prefix the story’s title with
ee/as well. This will ensure the Storybook navigation maps closely to our internal directory structure.
Mock backend APIs
The GitLab Storybook uses MirajeJS to mock REST and GraphQL APIs. Storybook shares the MirajeJS server
with the frontend integration tests. You can find the MirajeJS
configuration files in