I am currently upgrading the project I am working on to @storybook/[email protected] (latest).
We are heavily using the addon-knobs addon, which now is behaving a little strange. I get many prop type warnings like this one:
Warning: Failed prop type: Invalid prop `knob.value` of type `boolean` supplied to `BooleanType`, expected `string`.
in BooleanType
I am currently running [email protected] with all @storybook projects with their latest version.
I also was able to reproduce this, when running the example given in ./addons/knobs against the master. It results in the same "Invalid propt ... expected string" warnings for DateType, BooleanType, ArrayType and ObjectType.
Additionally the boolean value becomes an array, when refreshing the page.
Given the following story:
const stories = storiesOf('Button', module);
stories.addDecorator(withKnobs);
stories.add('can be disabled', () => {
const disabled = boolean('disabled', false);
console.log(disabled);
return (
<Button
disabled={disabled}
>
I am disabled
</Button>
)
});
The console.log prints:
# after initial load:
false
# after clicking on "disabled" checkbox
true
# after page refresh
["true"]
..which of course also results in a prop type warning.
To make it easier to reproduce the issue, I created a minimal setup which you can simply clone:
https://github.com/jkempff/storybook-addon-knobs-proptypes-issue
just to add to this, it seems to get rendered a couple times, the first few times being as i'd expect (i.e. not an array, but a boolean).
The following output is with the following, which i would have expected to get called only once:
console.log(boolean('fastTrack', props.fastTrack), props.fastTrack)

Hey,
Looks like when one of contributors updated lint rules he accidentally added these issues.
Sorry about that one.
Here we go, this should fix it :)
Also thanks @jkempff for easy to reproduce case. 馃憤
@alexandrebodin reopening since we have not released this yet. thanks!
@jkempff @peter-mouland @alexandrebodin @Gongreg Fix for this has been released in 3.1.5. Please let me know if you're still having this problem.
Most helpful comment
Here we go, this should fix it :)
Also thanks @jkempff for easy to reproduce case. 馃憤