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 file name should have the same prefix as the Vue component.

     vue_shared/
     ├─ components/
     │  ├─ sidebar
     │  │  ├─ 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, e.g. if the component is located at app/assets/javascripts/vue_shared/components/sidebar/todo_toggle/todo_button.vue, specify the title as vue_shared/components/To-do Button. This will ensure the Storybook navigation maps closely to our internal directory structure.