MDX Props table doesn't display props of external library component

[dvh91]

I have a use-case where I want to document in my storybook a material-ui component and get all of it's props to be displayed in the table.

As a naive approach, here was my mdx doc file:

import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import { Button } from "@material-ui/core";

<Meta title="Button" component={Button} />

### Basic

<Preview>
  <Story name="Basic">
    <Button>
        Storybook
    </Button>
  </Story>
</Preview>

### Props

<Props of={Button} />

Unfortunately, I couldn't see any props in the table.

I'm consuming the compiled version material-ui component which includes a separated d.ts types file with all the relevant props and descriptions but I can't seem to load them properly.

[shilman]

We're updating the recommended configuration to use babel-plugin-react-docgen instead of react-docgen-typescript-loader, and they are tracking this issue here: reactjs/react-docgen#416 please upvote!

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

[amilaI]

Any update on a fix for this?

[shilman]

@amilaI no, and it's not on the roadmap. we've got our hands full correctly showing props for your own component library. showing props for external libraries is not a priority use case. should it be?

[dvh91]

@shilman IMHO, it should be. Material UI exposes theme customization that can generate most of the standard design system.
In addition to that, you add composition components and custom components.
At the same time, you want to encapsulate everything in one storybook.

[shilman]

point taken. to some extend we're at the mercy of the underlying docgen packages we're using (react-docgen / react-docgen-typescript) but i'll see what we can do

[nextglabs]

Having same issue, hope to get a fix soon

[enrique-ramirez]

Just want to revive this issue since I believe there's a strong use case for this. We're building a complete design system and we're using MUI for our component library. It's GREAT to be able to add our own custom props to the props table, but it kinda sucks that we have to point our developers to MUIs documentation page to see the available props. It's either that, or having to manually add all the component's props to document them all in Storybook.

I want this to be auto-generated so my consumers don't need to jump through different documentation pages to be able to understand a component's API.

It's been a year, so I'm not sure if there's been any updates regarding this. I tried @shilman 's suggestion of using babel-plugin-react-docgen and babel-plugin-react-docgen-typescript to no avail. I may be doing something wrong, though.

[shilman]

@enrique-ramirez the recommended approach for your use case is composition. There should be an official storybook for MUI and then you should be able to compose that into your Storybook. I know there has been some work on this in the MUI world, and @oliviertassinari @tooppaaa and I discussed at some point earlier this year, but I'm not sure about the current state of that.

Fixing this issue about displaying props of external components is ALSO something that needs to be fixed, but like you said there hasn't been any updates on this in a year.

[oliviertassinari]

@shilman The progress on the storybook demos is tracked in mui/material-ui#21111. There were no updates since your last message. I assume that nobody from the community worked on it because it tends to be an upfront pain with a possible smooth path: copy & paste demos along the way. Once they set up the storybook, they forget about it, or they link directly back to our documentation to make sure it's always up to date. I have upvoted reactjs/react-docgen#416.