storybook-addon-data

Present a component's properties in Storybook@5.

Getting started

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
 
# or 
yarn add storybook-addon-data -D --peer

Basic Usage

// .storybook/addons.js
import 'storybook-addon-data/register'

// index.stories.js
import React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import withData from 'storybook-addon-data'
 
import README from './README.md'
import README_JSON from './README_JSON.md'
 
import dataJs from './data'
import dataJson from './data.json'
import dataYaml from './data.yaml'
import dataGql from './data.gql'
 
import Card from '.'
 
storiesOf('Button', module)
  .addDecorator(
    withData([
      // list of available types: https://github.com/conorhastings/react-syntax-highlighter/blob/HEAD/AVAILABLE_LANGUAGES_PRISM.MD
      { name: 'data.json', type: 'json', data: dataJson, notes: README_JSON },
      { name: 'data.js', type: 'javascript', data: dataJs },
      // requires `graphql-tag/loader` or a similar webpack loader
      { name: 'data.gql', type: 'graphql', data: dataGql },
      // requires `raw-loader` or a similar webpack loader
      { name: 'data.yaml', type: 'yaml', data: dataYaml },
    ]),
  )
  .add(
    'with text',
    () => <Button {...dataJson} onClick={action('clicked')} />,
    {
      // storybook-addon-data supports markdown here as well
      notes: README,
      // or
      // notes: 'This is a very simple Button and you can click on it.',
    },
  )
  .add('without description', () => (
    <Button {...dataJson} onClick={action('clicked')} />
  ))

And the data.json looks like this:

{
  "title": "Click Me"
}

The result will look similar to:

Please note, that graphql-tag/loader (or another webpack loader) is required to make .gql files work in storybook. Also raw-loader is required for .yaml files.

Take a closer look at the example`s webpack.config.js for more details.

Available Methods

withData

The 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

withDataHOC (previously called withDataWrapper accepts the same object-array as 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:

storiesOf('Button', module).add(
  'with withData HoC',
  withDataWrapper(
    [
      // `prop` makes the `data` available on `props.json` in the story
      { name: 'data.json', type: 'json', data: dataJson, prop: 'json' },
      // also this `data` value is availabe as `props.js` in the story
      { name: 'data.js', type: 'javascript', data: dataJs, prop: 'js' },
      // no `prop` => not available on props
      { name: 'data.gql', type: 'graphql', data: dataGql },
    ],
    // props = { json: {...}, js: {...} }
    props => <Button {...props.json} js={props.js} onClick={onClick} />,
  ),
)

Supported Languages

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 future updates.

A list of available styles can be found here.

Development - Getting started

Use yarn instead of npm, because we rely on yarn's workspaces feature.

yarn # will invoke yarn bootstrap afterwards automatically 
yarn start # starts storybook (http://localhost:9001) 
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

Publish

git checkout master
# prepare changelog, then push changes to master 
git commit -m "prepare release x.y.z"
git push
# now increase the versions with lerna and publish the package 
yarn publish-lerna

Licence

Apache 2.0

Maintainers

Stefan Natter