Search

Storybook: Connect Storybook

Vinh
Vinh
  • Updated

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. If you need to update your Storybook version, you can do this just once in the Styleguide settings, and all stories already in your documentation will update automatically.

 

Set up in Storybook

 

You must ensure 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 (version 7 and below) or index.json (version 8 and above), 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. If you're using Storybook 8, there's nothing you need to add.

 

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

If you are using Storybook 7 you will also have to configure Storybook to load stories on demand to allow us to show controls for your story.

 

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

 

You can read more about these features in the Storybook documentation https://storybook.js.org/docs/react/configure/overview#feature-flags 

 

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 authentication/firewall

 

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.

 

 

  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
  2. Click Add
  3. You’re ready to add Storybook into your styleguide!

 

Updating Storybook version

 

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 within the styleguide settings.

 

Was this article helpful?