Breaks Smart Knobs

[fabb]

I'm using storybook-addon-smart-knobs, but when I wrap my component with withState, the smart knobs don't appear anymore. Any idea why?

[dump247]

@fabb I can't think of anything off hand. Do you have any errors, in the console or otherwise? Do you have some example code?

[Richacinas]

+1. I guess Smart Knobs is not being able to see the component and its declared props anymore, because the state is wrapping it as a HOC.

[fabb]

That's what I suspected as well.

Here's a full example:

import React from 'react'
import PropTypes from 'prop-types'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { action, decorate } from '@storybook/addon-actions'
import { withKnobs } from '@storybook/addon-knobs/react'
import { withSmartKnobs } from 'storybook-addon-smart-knobs'
import { withState } from '@dump247/storybook-state'

const MyButton = ({ onClick, n }) => <button onClick={onClick}>Pressed {n} times</button>
MyButton.propTypes = {
    /** function that will be called when the button has been pressed */
    onClick: PropTypes.func.isRequired,
    /** number of times the button has been clicked */
    n: PropTypes.number.isRequired,
}
MyButton.defaultProps = {
    n: 0,
}

storiesOf('Button', module)
    .addDecorator(withSmartKnobs)
    .addDecorator(withKnobs)
    .add(
        'Button with working smart knobs', 
        withInfo()(() => <MyButton onClick={action('onClick')} />)
    )
    .add(
        'Button with broken smart knobs',
        withState({
            n: 0,
        })(
            withInfo()(({ store }) => (
                <MyButton
                    onClick={decorate([
                        changeEventArray => {
                            store.set({
                                n: store.state.n + 1,
                            })
                            return changeEventArray
                        },
                    ]).action('onClick')}
                    {...store.state}
                />
            ))
        )
    )

[regrettably]

It breaks pretty much any addon that examines the component. For example, addon-info is also broken.