You can integrate Storybook with your zeroheight account. With our integration, you can connect your Storybook instance to zeroheight once in the styleguide settings and can easily add your stories to your styleguide. 

Set up in Storybook

When using the storybook block, Storybook must be set up to expose stories.json and this must be available at the root of where your Storybook instance is hosted.

For example, if you access a story at https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-button--default then it should be accessible at https://gitlab-org.gitlab.io/gitlab-ui/stories.json

You can configure Storybook to build stories.json by adding the following setting to your main storybook config

module.exports = {
  // ...
  features: { buildStoriesJson: true }
};

VPN Mode

If using the VPN mode, there might be additional technical setup required. The header Access-Control-Allow-Origin must be set to allow the editors' browser to be able to access the stories when adding. The value of the header must either be a wildcard (*) or the specific domain for your team on zeroheight (https://the-team.zeroheight.com)

Set up in zeroheight

Once you complete the setup in Storybook, you can finish setting up the Storybook integration in zeroheight.

1) In the Styleguide settings under Code Resources, add a Name and paste your Storybook URL

👉 Tip: You can paste the URL for any of your Storybook stories here, and it will connect the entire Storybook instance

2) Click Add Storybook

3) Click Save

4) You’re ready to add Storybook into your styleguide!

Update Storybook

• If you update the version of Storybook that you want to reference, edit the Storybook URL in the Styleguide settings
• This will update all stories currently in your styleguide, as long as the story structure and story name remain the same across versions
• If you want to integrate multiple Storybook versions into your styleguide, click +Add another in the Styleguide settings to add these as separate integrations.