Pass ints into select knob

[jnhooper]

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

[
 {
    label: 'flush',
    value: 0
  },
  {
    label: 'flat',
    value: 1
  },
 {
    label: 'raised',
    value: 4
  }
]

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

[jnhooper]

when looking at the types for knobs i found

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?

[ndelangen]

Which version are you using?

I think this was fixed in the alpha.

[ndelangen]

Which should go release candidate monday.

[jnhooper]

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

[sapkra]

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

[ndelangen]

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

[ndelangen]

What are you exactly trying @sapkra ?

[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

[ndelangen]

Ah, will fix!

[sapkra]

@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.