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

[lifeiscontent]

If you are reporting a bug or requesting support, start here:

Bug or support request summary

    const pressed = select(
      'Pressed',
      { Undefined: undefined, False: false, True: true },
      undefined
    );

I'd expect there to be a value called Undefined which is selectable, but it is removed when rendered in the knobs panel.

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

• @storybook/react latest
• @storybook/addon-knobs latest (alpha)

Affected platforms

• If UI related, please indicate browser, OS, and version
• If dependency related, please include relevant version numbers
• If developer tooling related, please include the platform information

Screenshots / Screencast / Code Snippets (Optional)

    const pressed = select(
      'Pressed',
      { Undefined: undefined, False: false, True: true },
      undefined
    );

[bennycode]

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

[lifeiscontent]

@igor-dv do you know who I could talk to about how knobs work so I could implement this?

…

On Wed, Nov 14, 2018 at 2:15 AM stale[bot] ***@***.***> wrote: Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#4487 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AALC40dIqnUb7u05ObKmKqxCdVS1rhC1ks5uu-0ngaJpZM4XvW0A> .

[igor-dv]

@lifeiscontent , sorry for the delay =) you can chat with us on Discord:

[kallaugher]

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

[Hypnosphi]

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.

[alfnielsen]

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'

[christophehurpeau]

I can create an PR on friday if no one works on this yet ?

[Hypnosphi]

Sure @christophehurpeau

[Hypnosphi]

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

#4487 (comment)
storybookjs/telejson#7

[christophehurpeau]

I can't see how we could fix this in telejson, what about transorming undefined to 'undefined' before stringify ?

[lifeiscontent]

honestly, I don't think telejson is the right starting point for this work, what about a reviver and replacer for the parse/stringify for the knobs?

[Hypnosphi]

@lifeiscontent what makes you think so?

[lifeiscontent]

Well, I guess it would depend on if telejson is only being used for knobs. Considering this is a requirement of just knobs currently it makes sense that it should live there, unless telejson is purposely built for knobs. If we later find we want the same functionality across another part of the platform it should then be revisited.

_{Sent with GitHawk}

[Hypnosphi]

@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

[lifeiscontent]

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

@Hypnosphi okay, then I guess it makes sense to do there. Are you working on this? Or should I open a PR?

_{Sent with GitHawk}

[Hypnosphi]

Are you working on this?

No I'm not. Feel free to open a PR

[shilman]

We probably need to upgrade telejson?

[ndelangen]

Yeah I'll ship a new version soon.

[Steven-Gassert]

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

[ndelangen]

Released:
https://github.com/storybookjs/telejson/releases/tag/v3.2.0

[shilman]

Released in https://github.com/storybookjs/storybook/releases/tag/v5.3.0-beta.8

Closing this. Please holler if this didn't fix the problem

[lifeiscontent]

@shilman still an issue with args.

should have an option here to not have a value.