Storybook Addon StoryOut adds a tab panel that lets you visualize and copy the output of a story.
Storybook Addon StoryOut
Storybook Addon StoryOut adds a tab panel that lets you visualize and copy the output of a story.
This addon con be configured to be used in every framework supported by Storybook.
Installation
npm i -D storybook-addon-storyout
Configuration
Storybook 5.3 and newer
- Edit or create a file called
main.js
in the Storybook config directory (by default, it’s.storybook
). - Add the addon to the
addons
array:
module.exports = {
// ...other configs here
addons: ['storybook-addon-storyout/register'],
};
Storybook <=5.2
Edit or create a file called addons.js
in the Storybook config directory (by default, it’s .storybook
).
Add following content to it:
import 'storybook-addon-storyout/register';
Usage
With @storybook/html
Write your stories like this (uses CSF):
import { withSource, html } from 'storybook-addon-storyout';
const render = html(); // <-- initialize the html renderer
export default {
title: 'Button',
decorators: [withSource],
parameters: {
source: { render },
},
};
export const DefaultButton = () => '<button>Click me</button>';
Or, with the storiesOf API:
import { storiesOf } from '@storybook/react';
import { withSource, html } from 'storybook-addon-storyout';
const render = html(); // <-- initialize the html renderer
storiesOf('Button', module)
.addDecorator(withSource)
.addParameters({
source: { render },
})
.add('default button', () => '<button>Click me</button>');
This will show a new panel tab with the highlighted HTML output.
With another framework
With frameworks like React or Vue.js you can leverage the custom renderer and provide a custom render function returning an HTML string.
For example, with React write your stories like this:
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { withSource, custom } from 'storybook-addon-storyout';
const render = custom({
stringify: (node) => ReactDOMServer.renderToStaticMarkup(node),
});
export default {
title: 'Button',
decorators: [withSource],
parameters: {
source: { render },
},
};
export const WithText = () => <button>Click me</button>;
Global configuration
If your want to show the source panel on every story you can configure it globally in .storybook/preview.js
(.storybook/config.js
for Storybook <= 5.2):
import { addParameters, addDecorator } from '@storybook/html'; // <- or your storybook framework
import { withSource, html } from 'storybook-addon-storyout';
addParameters({
source: {
render: html(),
},
});
addDecorator(withSource);
To disable the source panel in a specific story set its source.render
parameter to false
.
export const WithoutSource = () => '<button>Click me</button>';
WithSource.story = {
parameters: { source: { render: false } },
};
source
Parameter configuration
The source
parameter accepts the following properties:
name | type | default | description |
---|---|---|---|
language | string | 'html' |
The highlight language in use |
render | function | Outputs the HTML to display (see below) | |
stringify | function | (1) | Receives the story output (in @storybook/html it might be a string or a DOM element) and returning its source as string. |
transform | function | (2) | Receives the story output and returning it after an arbitrary transformation. |
- This function is already defined in the
html
renderer but can be overridden if needed.
The render
function
The render function has the following signature:
render(storyOutput: unknown, parameters: object): string
It receives the story output and a parameters object. Parameter object contains the transform
and stringify
functions and the language
string.
Default configuration
Both the custom
and the html
renderer accept the same source
parameters. Passed-in values will be used as defaults.
Contributing
- Fork it or clone the repo
- Install dependencies
yarn install
- Ensure everything is fine by running
yarn release
- Push it or submit a pull request :D