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

Created on 19 Oct 2018 · 22Comments · Source: storybookjs/storybook

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
    );

knobs bug good first issue

Source

lifeiscontent

👍17

Most helpful comment

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

bennycode on 24 Oct 2018

👍4

All 22 comments

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

bennycode on 24 Oct 2018

👍4

@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] notifications@github.com 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
https://github.com/storybooks/storybook/issues/4487#issuecomment-438610079,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AALC40dIqnUb7u05ObKmKqxCdVS1rhC1ks5uu-0ngaJpZM4XvW0A
.

lifeiscontent on 15 Nov 2018

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

igor-dv on 16 Nov 2018

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

kallaugher on 16 Dec 2018

🎉1

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.

Hypnosphi on 23 Apr 2019

❤1

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'

alfnielsen on 24 Apr 2019

👍3

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

christophehurpeau on 1 Jul 2019

Sure @christophehurpeau

Hypnosphi on 1 Jul 2019

@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

Hypnosphi on 1 Jul 2019

👍1

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

christophehurpeau on 5 Jul 2019

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?

lifeiscontent on 5 Jul 2019

@lifeiscontent what makes you think so?

Hypnosphi on 6 Jul 2019

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}

lifeiscontent on 8 Jul 2019

@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

Hypnosphi on 11 Jul 2019

👍1

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

lifeiscontent on 12 Jul 2019