Storybook: Optional values get appended undefined in Addon-docs prop table when using typescript

Created on 12 Jan 2020  路  11Comments  路  Source: storybookjs/storybook

Describe the bug
When using addon:docs prop table for React tsx components optional props marked with ? in typescript get appended undefined in the table.

To Reproduce

  1. Follow this guide
  2. Run yarn storybook and see the result.

image

Expected behavior
Props marked as optional don't need the undefined.

System:
System:
OS: Linux 5.0 Ubuntu 18.04.3 LTS (Bionic Beaver)
CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Binaries:
Node: 10.18.0 - /usr/bin/node
Yarn: 1.21.1 - /usr/bin/yarn
npm: 6.13.4 - /usr/bin/npm
Browsers:
Chrome: 79.0.3945.88
Firefox: 71.0
npmPackages:
@storybook/cli: ^5.3.0 => 5.3.0

docs props question / support

All 11 comments

Hi @papeloto, I feel this is probably expected behaviour.

Optional means it can be undefined - I don't think Docs has any other way to show optional. Is that correct @shilman?

Required props have a red star next to them. Optional props don't. In that sense the | undefined is redundant. However, I'm not sure it's a bad thing? I welcome a hard argument one way or the other :) cc @patricklafrance

Yes, it's definitely _correct_ that it can be undefined...

I think is both correct and redundant. Maybe more redundant than correct since when you add more props you get something like this.

image

Besides looking buggy is pretty useless because you don't need to know that undefined is an option since you will never pass it to a prop. I mean, you will never do something like this:

<Button color={undefined} />

That being said, a way to filter the props would be nice however, both the rows that are being displayed and the contents.

@papeloto that's not strictly true. Users may opt to do something like this:

<Button color={() => someThing ? 'red' : undefined} />

But I also agree that we could get rid of undefined. Again, we'd definitely welcome a PR here if you're interested? If not, I can take a look this week. I'm not sure if this work would be better as a part of Docs or the docgen loader (@shilman - what do you think)?

Oops, I didn't consider that case.
First, I will try to solve #9394, so if you can take a look at this :smile:

NP, I'll talk to @shilman about it.

I agree that "undefined" is redundant. I planned to remove it, some of the code is already in SB https://github.com/storybookjs/storybook/blob/next/addons/docs/src/lib/docgen/typeScript/createType.ts

Haven't had the time yet to plug in in the transformation pipeline.

(when we switch to react-docgen 5.* to handle TypeScript it will be plugged automatically)

Cool let's plan to just deal with it in the react-docgen@5 upgrade then. 馃檹

@patricklafrance check your discord messages 馃槝

This has been solved so far, so thank you so much and great work! :heart:

Was this page helpful?
0 / 5 - 0 ratings

Related issues

arunoda picture arunoda  路  3Comments

rpersaud picture rpersaud  路  3Comments

tirli picture tirli  路  3Comments

levithomason picture levithomason  路  3Comments

shilman picture shilman  路  3Comments