Storybook: Storybook is adding displayName and __docgenInfo to my exported TS enum

[lgraziani2712]

Describe the bug

I have an enum in some file. When I imported it to the story, it adds extra props to it, making it impossible to use with Object.values() because it will have those extra props too.

To Reproduce
Steps to reproduce the behavior:

1. Export an enum with some props.
2. Try to render a story where you use the values of that enum.
3. See error

Expected behavior
To not have extra props when using the enum.

Screenshots
.

Code snippets

// someSiblingFile.ts
export enum EnumWithExtraProps {
  key1 = 'key1',
  key2 = 'key2',
}

// a.story.tsx
import { EnumWithExtraProps } from './someSiblingFile.ts';

const mapWithText: { [key in EnumWithExtraProps ]: string } = {
  key1: ['Title for key1', 'Description for key1'],
  key2: ['Title for key2', 'Description for key2'],
};

export function Story() {
  return (
    <>
      {Object.values(EnumWithExtraProps).map(type => {
        const a = mapWithText[type];

        // It will throw an error for "displayName" and "__docgenInfo" keys
        return <p>{a.join(' ')}</p>;
      })}
    </>
  );
}

System:

  System:
    OS: Linux 4.15 Ubuntu 18.04.4 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i7-4510U CPU @ 2.00GHz
  Binaries:
    Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
    Yarn: 1.21.1 - /usr/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.14.1/bin/npm
  Browsers:
    Chrome: 80.0.3987.100
    Firefox: 74.0b2
  npmPackages:
    @storybook/addon-actions: 5.3.12 => 5.3.12 
    @storybook/addon-docs: 5.3.12 => 5.3.12 
    @storybook/addon-knobs: 5.3.12 => 5.3.12 
    @storybook/preset-typescript: 1.2.0 => 1.2.0 
    @storybook/react: 5.3.12 => 5.3.12

[shilman]

I'm updating all of that in 6.0; let's see how the new flow works.

[shilman]

Repro: https://github.com/storybookjs/storybook/commit/3e90384ca63c75a9c8c1367db484c656dd11e164

This seems to be fixed when we switch to react-docgen as part of #9837

[stale[bot]]

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]

@lgraziani2712 can you try the recommended 6.0 setup (should work in 5.3 too) and based on the repro linked above I expect the problem to be fixed:

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

[stale[bot]]

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

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!

[joshcummingsdesign]

This still issue still exists with a clean installation of 5.3.19

"@storybook/addon-actions": "^5.3.19",
"@storybook/addon-knobs": "^5.3.19",
"@storybook/addon-links": "^5.3.19",
"@storybook/addons": "^5.3.19",
"@storybook/preset-create-react-app": "^3.0.0",
"@storybook/react": "^5.3.19",

[shilman]

@joshcummingsdesign is it fixed in 6.0-beta?

[lgraziani2712]

Now I'm working to update our SB to v6 because an update of a dependency made SB v5.3 crash because core-js. (v6 fixed it), so I'm going to check it and report it!

[lgraziani2712]

I can confirm that it is fixed in the v6-beta ^_^

[jldmn]

I'm having the same Error again in v6.0.7 :(

[shilman]

Here's what I said above:

This seems to be fixed when we switch to react-docgen as part of #9837

Well, it turns out that we switched back to react-docgen-typescript for a variety of reasons, chief of which is support for imported types. If you can live without imported types you can try setting module.exports = { typescript: { reactDocgen: 'react-docgen' }}; in your .storybook/main.js file. See https://storybook.js.org/docs/react/configure/typescript

Reopening this issue. @hipstersmoothie any idea what's going on here?

[hipstersmoothie]

Could I get a reproduction repo?

[hipstersmoothie]

Currently not able to reproduce via tests for react-docgen-typescript

[stale[bot]]

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

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!

[hipstersmoothie]

@shilman what do I need to do to make the test you referenced above to use react-docgen-typescript

[hipstersmoothie]

I'm not sure this is an issue anymore. I put @lgraziani2712's code into my storybook and it doesn't add the docgen information to the exported enum