Useful or not, from you.
storybook Pass props to stories from decorators

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?

That's a useful answer
Without any help

The second parameter of a decorator is also the story's properties. I'm using this decorator so I would not be repeat adding labels to my buttons, etc.

export default {
  // ...
  decorators: [
    (story, props) => story({ args: { label: props.story, ...props.args } }),
  ],
}

export const ActiveButton = Wrapper.bind({}); // label will be it's export key (ActiveButton)

export const DisabledButton= Wrapper.bind({});
DisabledButton.args = {
  label: "[DISABLED]" // manually set the label.
};