PropTypes documentation in ZeroHeight

Create a Storybook page with PropTypes table

For every component, create a separate page in Storybook where you output only the component properties. You can use MDX syntax for stories. So, Components.stories.mdx (or another name, depending on your Storybook configuration) should contain the following code.

import { Meta, Props } from "@storybook/addon-docs/blocks";
import Badge from "./Badge.js";

<Meta title="Components/Badge/JsDocs" component={Badge} />

<Props of={Badge} />

This renders you the page like in the screenshot below.

Embed the PropTypes page into ZeroHeight

1. On the component page in ZeroHeight, insert a new block of code.
2. Select the "Storybook" option.
3. Turn on "Show add-ons" and insert the URL of the PropTypes page from your Storybook.

Once the page is loaded, you get a result similar to this:

Result

In the view mode, you can see cleaner output without the URL of the page.

Unfortunately, there is no way to make PropTypes shown automatically for all the documented components. Even though, you can automate creating separate PropTypes pages in your Storybook, brining the resultant URLs into ZeroHeight still will be manual work. Also, the page is rendered in an iframe that does not detect the height of the content. Mostly, while JsDoc updates and the amount of properties changes, you will have an either too long iframe with an extra space or too short iframe with a scroll.

Nevertheless, the need to keep documentation for designers and developers in the same place, makes me put up with these obstacles and inaccuracies. In my current project, I will continue using this solution until and if better integration options appear.