@zeroheight/storybook-addon

zeroheight Storybook Addon

⚠️ Breaking change in 3.x

The env variables must be prefixed with STORYBOOK_. If you are upgrading from version 2.x, please update your .env file accordingly.

Release notes

Installation

First, install the package.

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

You will need to add a .env to your project to add your zeroheight authentication credentials, which can be created using these instructions:

STORYBOOK_ZH_CLIENT_ID="<your zeroheight Client ID>"
STORYBOOK_ZH_ACCESS_TOKEN="<your zeroheight Access Token>"

Then, register it as an addon in .storybook/main.js.

// .storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';

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

export default config;

Release

• Before merging, update the version in package.json, run npm install to update the lockfile, and add an entry to CHANGELOG.md
• Changes are automatically published to npm on merges to main
  • If you don't want your changes to be published automatically, add [skip ci] to your merge commit message
  • If publishing fails for any reason, run the Release workflow manually

Usage

The primary way to use this addon is to define the zeroheight parameter, which will contain a pageUrl which points to the page you wish to display. You can do this the component level, as below, to affect all stories in the file, or you can do it for a single story.

// 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<typeof Button> = {
  component: Button,
  parameters: {
    zeroheight: {
      pageUrl: '[page_url]', // e.g. https://developers.zeroheight.com/75fe5b2ed/p/8811ef-get
    }
  }
};

export default meta;