You can already embed your Storybook components in your documentation. Now, using zeroheight's new API, you can put your zeroheight documentation into Storybook for quick referencing while your developers are building components!

Requirements:

• The Storybook addon leverages the Pages endpoint from zeroheight's API. Therefore, it is only available to teams on an Enterprise plan who have access to the API.

How do I install the Addon?

1. Install the NPM package into your repository using:

   npm i --save-dev @zeroheight/storybook-addon

2. Register the addon in your .storybook/main.js config, e.g.:

   const config: StorybookConfig = {
     // ...rest of config
     addons: [
       // ...other addons
       '@zeroheight/storybook-addon',
     ],
   };

3. In your .env file, you will need to add your authentication tokens from your zeroheight account

   ZH_CLIENT_ID=""
   ZH_ACCESS_TOKEN=""

4. You then need to add the URL of the zeroheight page you want to see as a parameter to your stories, e.g.:

   // Button.stories.ts
   
   // Replace your-framework with the name of your framework
   import type { Meta } from '@storybook/your-framework';
   
   import { Button } from './Button';
   
   const meta: Meta = {
     component: Button,
     parameters: {
       zeroheight: {
         pageUrl: '[page_url]', // e.g. https://developers.zeroheight.com/75fe5b2ed/p/8811ef-get
       }
     }
   };
   
   export default meta;

5. When you then visit your component in Storybook, you will see a "zeroheight" tab at the top which, when clicked, will load the content of the zeroheight page you linked

FAQ

Does this work for all plans?
You need to have access to the zeroheight API to use this feature and, therefore, need to be on an Enterprise plan.

References

• @zeroheight/storybook-addon - NPM package
• zeroheight API x Storybook addon - blog post