1.0.1 • Published 4 months ago
@zeroheight/storybook-addon v1.0.1
zeroheight Storybook Addon
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:
ZH_CLIENT_ID="<your zeroheight Client ID>"
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;
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;
1.0.1
4 months ago
1.0.1--canary.c2390e7.0
4 months ago