Storybook: Generic 'union' shown in prop table instead of Union<X | Y> [CRA + TS]

[taze-fullstack]

Describe the bug
Prop table shows generic union on props with declared union types. [This might be the intended behavior (?) so this might be a feature request instead of a bug]

To Reproduce
Steps to reproduce the behavior:

1. Setup CRA + TS
2. define a component prop with a union type

Expected behavior
Prop table should say something like Union<X | Y>

Screenshots

Code snippets

export interface HelloProps {
  title?: string | string[];
}

export const Hello = ({title}: HelloProps) => {
  return (
    <div className="hello">
      {typeof title === 'string'
        ? title
        : title?.map((line) => {
            return (
              <span key={line} style={{display: 'block'}}>
                {line}
              </span>
            );
          })}
    </div>
  );
};

Hello.defaultProps = {
  title: 'this is the default :)',
};

export default Hello;

System:

  System:
    OS: Windows 10 10.0.18363
    CPU: (4) x64 Intel(R) Core(TM) i3-4170 CPU @ 3.70GHz   
  Binaries:
    Node: 12.14.1 - C:\Program Files\nodejs\node.EXE       
    Yarn: 1.21.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0

[shilman]

I'm overhauling the props rendering and will try to get this working

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

[bradennapier]

Any update with this? Latest install - any types that use a union are rendered as union not the actual union values. For the most part this kind of makes this useless... it doesn't really even give us an idea of what the props can be "union" is literally the same as "any" to the viewer

[derek-k-watson]

Having the same issue. It is pretty frustrating to work around. I'm having to put the union/options in the description, which makes for a cluttered and incosistent experience for the devs consuming our component library.

[bradennapier]

You can fix this but it takes a decent amount of work. You basically need to add custom webpack config and add in the typescript info loader I forget exact name and not at computer right now

[bradennapier]

https://github.com/strothj/react-docgen-typescript-loader

I think that is it - if you look in issues I posted how I fixed it

[bradennapier]

https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues/46

Never mind the info is here — even though this is a different add on - once I added the loader as I show in the issue the unions showed up for this add on as well

[RuneKR]

This is used for docgen now right? https://www.npmjs.com/package/babel-plugin-react-docgen-typescript

[hipstersmoothie]

@taze-fullstack @bradennapier @Rune-KR @derek-k-watson Has this issue persisted with storybook 6.0? The configuration for typescript docgen is a bit smarter now. If this issue has persisted could you post a reproduction repo?

[derek-k-watson]

    Going to 6.0 fixed it for me!



    Get Outlook for iOS

On Fri, Oct 23, 2020 at 1:38 PM -0500, "Andrew Lisowski" [e-mail] wrote:

@taze-fullstack @bradennapier @Rune-KR @derek-k-watson Has this issue persisted with storybook 6.0? The configuration for typescript docgen is a bit smarter now. If this issue has persisted could you post a reproduction repo?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[hipstersmoothie]

Awesome! I'm going to close this issue. If the issue persists for the rest feel free to open another issue with a reproduction repo and tag me in it.