Connect Storybook

This feature is available for all plans. This is not available for legacy plans.

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

You'll need to make sure Storybook is properly configured to connect it to zeroheight. If you need help, talk to your Storybook administrator.

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)

Configuring Storybook when using Cloudflare

When we are fetching the stories.json file to display the list of stories we will use the user agent zeroheight-storybook/1.0 (+https://zeroheight.com) which can be used to allow the request through firewalls such as Cloudflare (note we don’t use this user agent if the storybook link uses VPN mode).

See the Cloudflare docs for how to allow the user agent: Create, edit, and delete rules · Cloudflare Firewall Rules docs

Set up in zeroheight

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

Set up in the Styleguide settings

1) In the Styleguide settings under Storybook, 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

Storybook resources area in the Storybook section of the Styleguide settings

2) Click Add Storybook

3) Click Save

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

Storybook is added in your zeroheight account

Set up in your styleguide

You can also add it directly to your styleguide page.

1) In the toolbar, select Storybook

2) Click Native embed

3) Add a Name and paste your Storybook URL

4) Select Add Storybook

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

You can still embed your Storybook using the Storybook block

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

FAQs

Can I add multiple Storybook accounts to my styleguide?

Yes, you can add multiple Storybook accounts.You can add multiple Storybook versions to your styleguide by clicking +Add another in the Styleguide settings to add these as separate integrations.
Click Add another to add another Storybook to your account

Connect Storybook