Present a component's properties in Storybook@5.
npm i storybook-addon-data --save
Then install the required peerDependency packages, which are listed by the command:
npm info "storybook-addon-data@latest" peerDependencies
If using npm 5+, use this shortcut:
npx install-peerdeps --dev storybook-addon-data# oryarn add storybook-addon-data -D --peer
data.json looks like this:
The result will look similar to:
Take a closer look at the example`s webpack.config.js for more details.
withData story decorator
accepts an object-array as the first and only argument. Each object must look
similar to like this:
// or any other supported language (required)type: 'json'// the code to show in the addon panel (required)data: dataJson// title above the code-block (optional)name: 'data.json'// will be rendered above the code block (optional, supports markdown)notes: README_JSON
withDataHOC (previously called
withDataWrapper accepts the same object-array
withData does. The only difference is, that each
data provided in any of
the objects can be made available to the rendered component of the story.
This will look similar to:
The following languages are supported: prism languages.
Available Syntax Highlighting Styles
As of now, the style is hard coded to
dracula. This might change in one of the
A list of available styles can be found here.
Development - Getting started
yarn instead of
npm, because we rely on
yarn # will invoke yarn bootstrap afterwards automaticallyyarn start # starts storybook ()yarn watch # builds the addon with every change, but a browser request is still required
This is how one can add new dependencies to one of the packages:
npx lerna add raw-loader --scope storybook-addon-data
git checkout master# prepare changelog, then push changes to mastergit commit -m "prepare release x.y.z"git push# now increase the versions with lerna and publish the packageyarn publish-lerna