Storybook: Pass ints into select knob

Created on 13 Oct 2018  路  10Comments  路  Source: storybookjs/storybook

Bug or support request summary

I believe this is a bug... could possibly be a feature request.
I have an object i want to convert into a select options. That object is structed like so

const ELEVATIONS = {
  flush: 0,
  flat: 1,
  raised: 4
};

i'm converting it to what i believe is a correct object for the select knob doing this

const options = {};
Object.keys(ELEVATIONS).map((key) => {
  options[ELEVATIONS[key]] = key;
});

the resulting object is
{0: "flush", 1: "flat", 4: "raised"}

When i try to pass this into my component that is expecting a number prop i get this error
elevation={select('Elevation Level', options, ELEVATIONS.flat)}

Warning: Failed prop type: Invalid prop elevation of value 1 supplied to Card, expected one of [0,1,4]

I expected that I could have numbers be selected without having them converted into strings

Please specify which version of Storybook and optionally any affected addons that you're running

"@storybook/react": "^3.4.4",
"@storybook/addon-knobs": "^3.4.10",

It would be amazing if we could have a more thorough select option, maybe something structured like
~javascript
[
{
label: 'flush',
value: 0
},
{
label: 'flat',
value: 1
},
{
label: 'raised',
value: 4
}
]
~

edit: the error message got formatted so here is a screenshot
image

knobs question / support

Most helpful comment

Ah, will fix!

All 10 comments

when looking at the types for knobs i found
~javascript
SelectType.propTypes = {
knob: PropTypes.shape({
name: PropTypes.string,
value: PropTypes.string,
options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
}),
onChange: PropTypes.func,
};
~

is there a reason why value needs to be a string here?

Which version are you using?

I think this was fixed in the alpha.

Which should go release candidate monday.

I'm on v.3.4.10 Which version should i upgrade to? v4.0.0-alpha.25?

I'm on v4.0.0-rc.0 and it still doesn't work.

This works for me in 4.0.0:

const numbers = {
  one: 1,
  two: 2,
  four: 4,
};

const myNumber = select('Number', numbers, 1);

console.log(myNumber); // -> 1

What are you exactly trying @sapkra ?

I tried exactly your example and I'm getting the following error.

Warning: Failed prop type: Invalid prop `knob.value` of type `number` supplied to `SelectType`, expected `string`.

But when I change the default prop to a string the error is gone but the value is not an int anymore.

This is the line which only accepts a string value:
https://github.com/storybooks/storybook/blob/master/addons/knobs/src/components/types/Select.js#L39

Ah, will fix!

@ndelangen
After I updated to rc1 I still found a problem with it.

Warning: Failed prop type: Invalid prop `size` of value `4` supplied to `Headline`, expected one of [1,2,3,4,5,6].

I think that the problem is now the following line.
https://github.com/storybooks/storybook/blob/master/addons/knobs/src/components/types/Select.js#L24
The reason is that e.target.value is always a string so that my component is throwing a prop-type error.
image

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Jonovono picture Jonovono  路  3Comments

purplecones picture purplecones  路  3Comments

rpersaud picture rpersaud  路  3Comments

sakulstra picture sakulstra  路  3Comments

oriSomething picture oriSomething  路  3Comments