Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Pass props to stories from decorators

See original GitHub issue

Hi, guys!

I have updated storybook from 1.17.0 to 1.41.0 today. I found that some of my components doesn’t work.

Early (in 1.17.0) one piece of code was https://github.com/kadirahq/react-storybook/blob/a6a6458385a58611984e8db8bd96ced7038661c5/src/client/client_api.js#L24

And it was beautiful, because I did something like this:

import React, { Component } from 'react';
import { storiesOf, action } from '@kadira/storybook';

class RadioWrapper extends Component {
    state = {
        value: '1',
    }

    onChange = ({currentTarget: {value}}) => {
        action('change radio')(value);
        this.setState({value});
    }

    render() {
        return (
            <div style={{width: '500px', padding: '20px'}}>
                {this.props.child({
                    value: this.state.value,
                    onChange: this.onChange,
                })}
            </div>
        );
    }
}

storiesOf('common.radio', module)
    .addDecorator(getRadio => (
        <RadioWrapper child={getRadio} />
    ))
    .add('Default', ({value, onChange}) => (
        <div>
            <div className="radio">
                <input
                    type="radio"
                    id="radio"
                    name="radio"
                    value="1"
                    checked={value === '1'}
                    className="radio__input"
                    onChange={onChange}
                />
                <label className="radio__label" htmlFor="radio">
                    Radio label 1
                </label>
            </div>
            <div className="radio">
                <input
                    type="radio"
                    id="radio_2"
                    name="radio"
                    value="2"
                    checked={value === '2'}
                    className="radio__input"
                    onChange={onChange}
                />
                <label className="radio__label" htmlFor="radio_2">
                    Radio label 2
                </label>
            </div>
        </div>
    ))
    .add('Disabled', ({value, onChange}) => (
        <div>
            <div className="radio">
                <input
                    type="radio"
                    id="radio"
                    value="1"
                    checked={value === '1'}
                    className="radio__input"
                    onChange={onChange}
                    disabled
                />
                <label className="radio__label" htmlFor="radio">
                    Radio label 1
                </label>
            </div>
            <div className="radio">
                <input
                    type="radio"
                    id="radio_2"
                    value="2"
                    checked={value === '2'}
                    className="radio__input"
                    onChange={onChange}
                    disabled
                />
                <label className="radio__label" htmlFor="radio_2">
                    Radio label 2
                </label>
            </div>
        </div>
    ));

Currently this piece of code was changed. https://github.com/kadirahq/react-storybook/blob/master/src/client/preview/client_api.js#L60 I can’t do this anymore. But I want to pull down props into examples from Decorators. How can I do that now?

Issue Analytics

State:
Created 7 years ago
Reactions:5
Comments:18 (7 by maintainers)

Top GitHub Comments

16reactions

mspoerercommented, Jun 12, 2018

common guys… I mean seriously… a simple question and no answer at all. Not even a hint.

12reactions

ndelangencommented, Jan 21, 2019

In V5 this is supported:

import React from 'react';
import { storiesOf } from '@storybook/react';

storiesOf('Core|Parameters/Decorator aguments', module)
  .addDecorator(fn => fn({ decoratorArgument: true }))
  .add('to Storybook', data => <pre>Parameters are {JSON.stringify(data, null, 2)}</pre>);

Here’s the full storyshot of this story:

``` exports[`Storyshots Core|Parameters/Decorator aguments to Storybook 1`] = `

  Parameters are {
  "kind": "Core|Parameters/Decorator aguments",
  "name": "to Storybook",
  "parameters": {
    "fileName": "/Users/dev/Projects/GitHub/storybook/core/examples/official-storybook/stories/core/decorator-agument.stories.js",
    "options": {
      "hierarchyRootSeparator": "|",
      "hierarchySeparator": {},
      "name": "Storybook"
    },
    "a11y": {},
    "viewports": {
      "iphone5": {
        "name": "iPhone 5",
        "styles": {
          "height": "568px",
          "width": "320px"
        },
        "type": "mobile"
      },
      "iphone6": {
        "name": "iPhone 6",
        "styles": {
          "height": "667px",
          "width": "375px"
        },
        "type": "mobile"
      },
      "iphone6p": {
        "name": "iPhone 6 Plus",
        "styles": {
          "height": "736px",
          "width": "414px"
        },
        "type": "mobile"
      },
      "iphone8p": {
        "name": "iPhone 8 Plus",
        "styles": {
          "height": "736px",
          "width": "414px"
        },
        "type": "mobile"
      },
      "iphonex": {
        "name": "iPhone X",
        "styles": {
          "height": "812px",
          "width": "375px"
        },
        "type": "mobile"
      },
      "iphonexr": {
        "name": "iPhone XR",
        "styles": {
          "height": "896px",
          "width": "414px"
        },
        "type": "mobile"
      },
      "iphonexsmax": {
        "name": "iPhone Xs Max",
        "styles": {
          "height": "896px",
          "width": "414px"
        },
        "type": "mobile"
      },
      "ipad": {
        "name": "iPad",
        "styles": {
          "height": "1024px",
          "width": "768px"
        },
        "type": "tablet"
      },
      "ipad10p": {
        "name": "iPad Pro 10.5-in",
        "styles": {
          "height": "1112px",
          "width": "834px"
        },
        "type": "tablet"
      },
      "ipad12p": {
        "name": "iPad Pro 12.9-in",
        "styles": {
          "height": "1366px",
          "width": "1024px"
        },
        "type": "tablet"
      },
      "galaxys5": {
        "name": "Galaxy S5",
        "styles": {
          "height": "640px",
          "width": "360px"
        },
        "type": "mobile"
      },
      "galaxys9": {
        "name": "Galaxy S9",
        "styles": {
          "height": "1480px",
          "width": "720px"
        },
        "type": "mobile"
      },
      "nexus5x": {
        "name": "Nexus 5X",
        "styles": {
          "height": "660px",
          "width": "412px"
        },
        "type": "mobile"
      },
      "nexus6p": {
        "name": "Nexus 6P",
        "styles": {
          "height": "732px",
          "width": "412px"
        },
        "type": "mobile"
      },
      "pixel": {
        "name": "Pixel",
        "styles": {
          "height": "960px",
          "width": "540px"
        },
        "type": "mobile"
      },
      "pixelxl": {
        "name": "Pixel XL",
        "styles": {
          "height": "1280px",
          "width": "720px"
        },
        "type": "mobile"
      },
      "kindleFire2": {
        "name": "Kindle Fire 2",
        "styles": {
          "width": "600px",
          "height": "963px"
        },
        "type": "tablet"
      },
      "kindleFireHD": {
        "name": "Kindle Fire HD",
        "styles": {
          "width": "533px",
          "height": "801px"
        },
        "type": "tablet"
      }
    }
  },
  "id": "core-parameters-decorator-aguments--to-storybook",
  "options": {},
  "decoratorArgument": true
}

`; ```

Here’s a somewhat realisting example:

import React from 'react';
import { storiesOf } from '@storybook/react';

storiesOf('Path|to/Component', module)
  .addDecorator(fn => fn({ myData: 42 }))
  .add('variant', ({ myData }) => <pre>{myData}</pre>);