debian-mirror-gitlab/doc/development/fe_guide/storybook.md

stage	group	info
none	unassigned	To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/engineering/ux/technical-writing/#assignments

Storybook

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 storybook/ directory.

To build and launch Storybook locally, in the root directory of the gitlab project:

1. Install Storybook dependencies:

   yarn storybook:install
   

2. Build the Storybook site:

   yarn storybook:start
   

Adding components to Storybook

Stories can be added for any Vue component in the gitlab repository.

To add a story:

1. Create a new .stories.js file 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
   

2. Write the story as per the official Storybook instructions

   Notes:

   • Specify the title field of the story as the component's file path from the javascripts/ directory.

     For example, if the component is located at app/assets/javascripts/vue_shared/components/sidebar/todo_toggle/todo_button.vue, specify the story title as vue_shared/components/sidebar/todo_toggle/todo_button. 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 spec/frontend_integration/mock_server.