storybook: addon-knobs select should be able to have undefined options.

Supporting undefined options is very important when displaying React components which have been written in TypeScript.

In TypeScript it is common sense to use the question mark to declare optional parameters and properties. So an interface for a component’s properties can look like this:

interface Props {
  environment?: 'linux' | 'mac' | 'win';
}

Which is equivalent to:

interface Props {
  environment: 'linux' | 'mac' | 'win' | undefined;
}

But different from:

interface Props {
  environment: 'linux' | 'mac' | 'win' | null;
}

Unfortunately, it is not possible to use undefined values with select, so states with optional props cannot be shown with @storybook/addon-knobs. 😢

Hey, Just to add a little extra info to @bennyn comments, it’s not just TypeScript but ES6 (EcmaScript 2015) that uses optional parameters which only accepts undefined (not null).

In TypeScript it would be something like this:

interface Props {
  environment?: 'linux' | 'mac' | 'win';
}
const myComponent = ({ environment = 'win' }: props ) => { (...) }

but you can do the same in ES6 like this:

const myComponent = ({ environment = 'win' }) => { (...) }

if environment = null it will be null instead the method and not the default value 'win'

@shilman still an issue with args.

should have an option here to not have a value.

@ndelangen has a new version been shipped with this functionality yet? If not, is it possible to get a link somewhere this work is being tracked?

@lifeiscontent telejson states in the repo description that it supports undefined while in fact it doesn’t. So it’s not some specific requirement of knobs

JSON parse & stringify with support for cyclic objects, functions, dates, regex, infinity, undefined, null, NaN, Classes, Instances

@christophehurpeau note that it’s telejson library that needs a PR:

https://github.com/storybookjs/storybook/issues/4487#issuecomment-485805825 https://github.com/storybookjs/telejson/issues/7

Looks like the root of the issue is that telejson library that we use to transmit data between preview and manager frames uses JSON.parse(data, reviver()) which ignores undefined values:

If the reviver function returns undefined (or returns no value, for example, if execution falls off the end of the function), the property is deleted from the object.

@ndelangen you probably need to iterate on object fields manually instead of using reviver parameter of JSON.parse.

@lifeiscontent Are you still working on this? If not, I’ll start looking into it 🙂