Defaults in props tables when using typescript

[thany]

Is your feature request related to a problem? Please describe.
The props tables have a column "Default" which is almost always empty. Since I'm using typescript, I have no need for propTypes and defaultProps in my components. But I don't see a way to expose a default value for a prop to storybook. Defaults are either implied by the implementation, or they are in a destructuring of the props argument in a React.FC<...> component. But in either case, no default is displayed, even when there absolutely is one. And that's understandable, because it would require deep code analysis which is very error-prone.

Describe the solution you'd like
Some way to tell Storybook default props values. Or maybe somehow get metadata from jsdoc (although there's no jsdoc-tag for a default value, afaik)

Describe alternatives you've considered
Moving back to javascript? And then use propTypes and defaultProps again? No really a viable alternative, tbh.

Are you able to assist bring the feature to reality?
Depends on how you feel this should work, really.

Additional context
Just try not to analyze source code using some typescript parser. We've seen that failing already. Maybe work with the authors of jsdoc to get something going from that angle?

If jsdoc provides a solution, I imagine something like this:

interface MyComponentProps {
  /**
   * Description for this prop.
   * @default true
   */
  enabled: boolean;
}

Or similar. Currently I wouldn't know how else exposing default props values to storybook would be the best way.

[jkillian]

@thany, defaults work for me most of the time with TypeScript. If I have code like this:

I get output like this:

As you can see, the default value for placement correctly shows up!

I'm using the 6.alpha releases in case it's relevant.

[thany]

I can't write all of my component with destructured props. Sometimes I need the individual props, as well as the whole props object, e.g. to pass it on to a child component/element. In this case, there seems to be no way for Storybook to figure out the default values.

Example:

const FormControl: React.FC<IFocusableFormControl> = props => {
  const {
    children,
    error = false,
    ...rest
  } = props;

I could add children and error in this case explicitly to a child component, but that's not DRY, and it's easy to forget about when adding an additional prop later down the line. It also feels wrong to change code for the sole purpose of Storybook being unable to analyze it. Technically you should be able to write code however you like.

The reason that this is a feature request and not a bug, is because there's no apparant way to explicitly manage default values for component props. The only way is for Storybook to figure out "implicit" defaults. There's no way to control the defaults it finds, other than by changing the meaning of the code that it analyzes.

[thany]

On top of this, some props that are passed on straight to, say, a styled-component that have a default value there, isn't picked up either. That's another good reason to have some feature to explicitly manage default values.

Example:

const Base = styled.div<MyComponentProps>`
  color: ${({color = 'red'}) => color};
`;

const MyComponent: React.FC<MyComponentProps> = ({
  enabled = true,
  ...rest
}) => {
  return <Base {...rest} />;
};

In the above example, the color is defaulted to red in the styled component. This is a sensible place to do this. I see no way to tell Storybook about defaults like this.

[shilman]

@thany should be coming in the next week or two as part of 6.0 props overhaul

[thany]

Very cool! 😎
Any idea on a timeframe for 6.0 stable? It'd be nice if we can (even if roughly) plan ahead on this.

[shilman]

Current estimate is May 4. I try to keep this issue updated: #9311

[stale]

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!

[shilman]

FYI the recommended 6.0 setup (should work in 5.3 too) is ready, and is the default in the most recent versions of both @storybook/preset-typescript and @storybook/preset-create-react-app:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-prop-tables-with-typescript

I am commenting on all props-related issues to request that you upgrade so we can get this right before release. Thanks!

[stale]

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!

[shilman]

Args-based props tables are available in 6.0 alpha

https://gist.github.com/shilman/69c1dd41a466bae137cc88bd2c6ef487

[stale]

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!

[thany]

@shilman I've never been able to get that working in 5.3, but I'm currently doing some research on upgrading to 6.0, and a cursory check reveals that it's most likely completely fixed for our use-cases 🎉

[totszwai]

What happened to this? lol

And what about, just let it take the JSDoc's @default? Example

  /**
   * Some documentation goes here y0
   * @param {boolean | Blah} mySpecialAttr    Some description to this attribute
   * @default false. // <===
   */

[kellyrmilligan]

@default seems to be working for me ATM.

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).