Node's Pastoral Musicians

    storybook-addon-data

    1.2.1 • Public • Published

    storybook-addon-data

    npm version Build Status GitHub license PRs Welcome

    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:

    Example

    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

    Install

    npm i storybook-addon-data

    DownloadsWeekly Downloads

    346

    Version

    1.2.1

    License

    Apache-2.0

    Unpacked Size

    38 kB

    Total Files

    13

    Last publish

    Collaborators

    • natterstefan