Storybook: Addons info and Typescript props docgen?

[pselden]

Is there a way to use Typescript to set up the props table instead of just using propTypes?

Either a hook which allows a parser (like react-styleguidist does with https://github.com/styleguidist/react-docgen-typescript) or a way to let you pass your own propTypes in so you can do it in user-land?

[danielduan]

@pselden You are more than welcome to open a PR to get that integrated. There is no current way of getting Typescript into the prop tables.

[andrespch]

@pselden did you ever solve this?

[pselden]

No I have not solved it, unfortunately.

[andrespch]

to have the props shown properly I'm just declaring them like so

 static propTypes = {
    text: PropTypes.string,
    onTap: PropTypes.func,
    disabled: PropTypes.bool
  };

inside my class, which is redundant with the interface declaration but I don't mind since it provides nicer documentation

[FDiskas]

Same issue for me. Any news about that? :mailbox_with_mail:

[elsangedy]

Any news about that?

[carllindiii]

This would be great to have

[tsiq-swyx]

we now use storybook and typescript at work. i would be interested in working on a PR for this, but i do need some help as I am completely new to this codebase. any pointers on where would I start and any prior art I can look at?

[strothj]

@tsiq-swyx
Storybook uses a Babel plugin babel-plugin-react-docgen with the plugin setting DOC_GEN_COLLECTION_NAME set to STORYBOOK_REACT_CLASSES. It extracts the prop type data and generates blocks of code with the docgen data. The docgen data is attached to each React component type as a static member __docgen.
It also attaches a code block to insert the component into the collection list. The addon Story component looks in this collection for a matching story and then retrieves the docgen info.

You can see how the data inserted by the plugin is used by reviewing the components here:
https://github.com/storybooks/storybook/tree/master/addons/info/src/components

Stylegusiest has a docgen for TypeScript. It makes use of the TypeScript compile or language service (not sure which) to extract the prop types.

I was able to make a Babel plugin to generate the docgen required by Storybook import { parse } from "react-docgen-typescript/lib/parser";.

For a non-Babel version, I think we'll need it written as a plugin for TypeScript. You should be able to pull what you need from Styleguidist's library.

[ainalain]

@strothj
Could you please explain how to use Typescript plugin instead of Babel plugin? We also write on typescript in our team and at the moment we're stuck with the lack of typescript support at info addon.

[strothj]

@ainalain I was proposing that a TypeScript plugin could be written to perform the code transform but after investigation it looks like that won’t be possible. TypeScript plugins don’t allow for code transforms. They only provide information to code editors for things like linting.

I think writing a Webpack plugin or loader would be the route to take.

[strothj]

So I hacked together a Webpack plugin for this:
https://github.com/strothj/react-docgen-typescript-webpack-plugin

It is very rough but it was done in a day. Will need testing.

[ainalain]

@strothj Thank you very much!
I tried your plugin and opened an issue in its repo. Maybe just need to read the REAMDE and the source on a fresh head.

[strothj]

@ainalain No problem. I've looked into the issue.

[tsiq-swyx]

I have tried it and it works! super nice job!

[danielduan]

I'm going to close this since this seems like a good enough workaround. If someone can volunteer to help document this, it'd be greatly appreciated.

New issue created for TS documentation linked. Thanks!

[heldr]

If you use Babel with Typescript, I also recommend using this https://www.npmjs.com/package/babel-plugin-typescript-to-proptypes

[tamihh]

You can also use a preset @storybook/addon-docs/react/preset

Here is an example of how to set up a project with CRA + Typescript + Storybook Docs
https://gist.github.com/shilman/bc9cbedb2a7efb5ec6710337cbd20c0c