Addon-controls: Better handling of Typescript optional properties

Is your feature request related to a problem? Please describe. I am not sure if this is a bug or not, but I put it as a feature request, since I didn’t find any documentation on this use case…

The Controls Addon can infer controls from my React component prop types. For example, having the following Typescript props for a component works well:

export interface TextProps {
  text: string
  loading: boolean
}

This correctly renders a text control for the text property and a boolean control for the loading property.

However, let’s say I make the props optional (as is the case of most props of React Components):

export interface TextProps {
  text?: string
  loading?: boolean
}

Both controls for both properties are now rendered as a raw text input (which strangely is not a control of type text). They should be rendered as in the first example.

Describe the solution you’d like Solution could be to handle optional properties as if they were not optionals if the component defines a default value for it.

For example, consider the following component:

export interface TextProps {
  text?: string
  loading?: boolean
}

export const TextProps: React.FC<TextProps> = ({ text = '', loading = false }) => {
  //...
}

Since default values are defined (and are already shown in props table), the controls should act as if undefined was not an actual value and display text and boolean controls for text and loading properties repectively.

Describe alternatives you’ve considered The only solution for me right now is to declare the Story argTypes manually for each, which is really not cool, since most Props of all my components are optionals, therefore requiring tedious manual setup in each of my stories.

[milesj]

FWIW, on latest storybook (6.2 at time of writing), undefined is still coming through for optional props. Have done everything above.

The shouldRemoveUndefinedFromOptional option (https://github.com/styleguidist/react-docgen-typescript#shouldremoveundefinedfromoptional-boolean) fixes it for booleans, but not unions.

Related: https://github.com/styleguidist/react-docgen-typescript/issues/341

[inomdzhon]

I use storybook v6 version but problem still exist 😞

I create playground with my config here

Could you look it, please 🙏