Addon-docs: Exclude defaultProps from source

[Lueton]

It would be great if (if not already available) there was an option to exclude defaultProps from the source output.

Button.tsx

...
Button.defaultProps = {
  disabled: false,
  type: "button",
  block: false,
};
...

Button.stories.mdx

...
<Preview>
  <Story name="button-variant-secondary">
    <Button variant="secondary">Secondary</Button>
  </Story>
</Preview>
...

current behavior of addon-docs source code

<Button
  block={false}
  disabled={false}
  type="button"
  variant="secondary"
>
  Secondary
</Button>

desired behavior

<Button
  variant="secondary"
>
  Secondary
</Button>

[jauggy]

I'm also having the same issue.

Is there any workaround for this like hiding the prop?

[shilman]

No workaround yet AFAIK. Will try to take a look soon.

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

[zeckdude]

@shilman @Lueton This is actually possible in Storybook 6.0. As you can see in jsxDecorator.tsx, it is using the reactElementToString method from the react-element-to-jsx-string package. If you check their options, they accept a showDefaultProps property, which when set to false omits the default props in the JSX.

In my opinion, I feel like storybook should have the showDefaultProps option set to false by default and then let the individual components or stories change it when they want it to show. Thoughts on that @shilman?

For now though, you can just use the parameters.jsx object which gets passed to the reactElementToString method and therefore stops the default props from showing.

Note: This is the CSF style

export default {
  title: 'Example/Container',
  component: Container,
  parameters: {
    jsx: {
      showDefaultProps: false
    },
  }
};

[shilman]

Great catch @zeckdude! Want to create a PR for that? Will merge, esp if there are tests.

[zeckdude]

Thanks @shilman. There's actually no PR necessary. That parameters.jsx property is already accessible. Apparently it's been there for 4 months.

On another note though, the showDefaultProps method is simply looking for equality (I believe), so it won't catch a default prop that is just an empty function as is sometimes provided to a callback prop as a default value. In those cases, I don't want them to show in the code preview either, so I had to add some logic in the filterProps property to make that happen. @shilman If you have a better idea on how to implement that, please let me know.

jsx: {
  showDefaultProps: false, // Omit default props on code preview
  filterProps: value => {
    // Omit empty functions (they're likely from default props and `showDefaultProps` doesn't catch those)
    if (!isFunction(value)) {
      return true;
    }

    return value.toString() !== '() => {}';
  },
},

[shilman]

@zeckdude I meant a PR setting the default value so that no workaround is needed. seems like this should be the out of box behavior

[zeckdude]

@shilman Ah gotcha. I can make that happen. What's your take on my solution for the empty function callback default prop value?

[shilman]

I think we need a better way to deal with functions. Will chew on it.

[zeckdude]

@shilman Great. I've also left an issue at algolia/react-element-to-jsx-string#585 to see if they can build that into their package.

[shilman]

Awesome, thanks! I'm not sure whether it's maintained. If it is, there are probably a lot of workarounds from our side that would be more appropriate to fold into the underlying library 🙈

[zeckdude]

@shilman I have created the PR, but I'm having some issues with the test and figuring out where to add this in the documentation.

#13003

[zeckdude]

@shilman This can be closed.

[shilman]

Will close automatically when released @zeckdude . Thanks!

[shilman]

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-beta.2 containing PR #13003 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.