Docs default props aren't working with ES6 default values

[smithambera]

Describe the bug
I'm using ES6 default values as opposed to defaultProps because the React team is deprecating defaultProps in functional components (facebook/react#16210). The ES6 defaults are not showing up in the auto-generated Storybook docs.

This code:

const Tag = ({ title = 'Beta' }) => <TagWrapper>{title}</TagWrapper>;

results in these docs:

While this code:

const Tag = ({ title }) => <TagWrapper>{title}</TagWrapper>;

Tag.defaultProps = {
  title: 'Beta'
};

results in these docs:

To Reproduce
Create a functional component and use ES6 defaults to set default props. Look at the docs.

Expected behavior
See above.

Screenshots
See above.

Code snippets
See above.

System:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 12.9.1 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.10.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-a11y: ^5.2.8 => 5.2.8
    @storybook/addon-actions: ^5.3.2 => 5.3.2
    @storybook/addon-docs: ^5.3.0-rc.14 => 5.3.0-rc.14
    @storybook/addon-knobs: ^5.3.3 => 5.3.3
    @storybook/addon-links: ^5.3.2 => 5.3.2
    @storybook/addon-viewport: ^5.3.2 => 5.3.2
    @storybook/addons: ^5.3.2 => 5.3.2
    @storybook/preset-create-react-app: ^1.5.1 => 1.5.1
    @storybook/react: ^5.3.2 => 5.3.2

Additional context
That's all I've got!

[shilman]

Thanks @smithambera. We'll be doing an overhaul of the props handling code in 6.0 and hopefully can handle this case.

FYI, unrelated to this problem, but please upgrade your @storybook/* packages to be the same version, or you might see weird behaviors.

[smithambera]

Thanks for responding so quickly, @shilman! I'm looking forward to 6.0 😄 and thanks for the tip, too - upgraded the packages!

[shilman]

This appears to be working in an isolated test: 3cfe6e1

[budalen]

ES6 default values worked for me as well, but when I started using React.forwardRef the default props stopped working.

Using the same example as above - this does not work:

const Tag = React.forwardRef(({ title = 'Beta' }, ref) => <TagWrapper ref={ref}>{title}</TagWrapper>);

This works:

const Tag = React.forwardRef(({ title = 'Beta' }, ref) => <TagWrapper ref={ref}>{title}</TagWrapper>);

Tag.defaultProps = {
  title: 'Beta'
};

[shilman]

@Jaybud #8894 lots of different cases like this that we'll work through with react-docgen over the next couple months 🤕

[budalen]

@shilman Gotcha, thanks for the quick response!

[thany]

@shilman

This appears to be working in an isolated test: 3cfe6e1

What if you write it like this:

export const Tag = (props) => {
  const { title = 'Beta' } = props;
  return React.createElement("div", null, title);
};
export const component = Tag;

Or even:

export const Tag = (props) => {
  return <div {...props />;
};
export const component = Tag;

It might be neccesary to maintain access to the full props object, for example for passing it on to a child component. How will storybook know which are the default values?

[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]

@thany

Tag.defaultValues = {
  foo: 'bar',
  ...
}

[thany]

@shilman That will add runtime overhead, because at runtime, defaultValues is pointless.

[shilman]

@thany taking a very different approach in 6.0 that will address this issue

[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!

[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]

@thany new customization options documented here for 6.0. will get a few tweaks before final release, but hopefully nothing big: https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/props-tables.md#customizing-argtypes

[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!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[jpmarra]

@shilman Whats the solution here? I'm not seeing a way for Controls to register default props via es6 defaults.

[shilman]

@jpmarra starting in 6.0 the ArgsTable is completely configurable. If docgen doesn't successfully pick up your defaults, you can add them using args/argTypes. This was the big change I alluded to in my previous concept -- Args/ArgTypes didn't exist when the issue was filed. https://storybook.js.org/docs/react/essentials/controls