How can I pass an MDX or React component as a parameter of an addon in MDX Stories?

[wagedomain]

Long story short, I want to build an addon for my org that takes in one (or more) components as params to render. These components can be React components or MDX references.

I can pass in components, but they are not renderable in the addon. Here's a basic rundown of what I want to do in code:

import { Button } from 'component-library';
import { ButtonDocs } from 'mdx-file.mdx';

<Meta
  title='Components/Button'
  component={Button}
  parameters={{
    additionalDocs: ButtonDocs
  }}
/>

However, when using useParameter inside of register.js, it gives me a set of errors, the first and most significant being:

Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

I've tried using parameters, and channels to do this, and the same thing each time. Direct importing in the register.js file works, but it is not dynamic and thus a dealbreaker. We want users to be able to pass MDX files into the addon.

How can I accomplish this? I have tried serializing the files before and deserializing internally, with no luck (MDX is surprisingly tough to work with) and we've found the documentation for useParameter and useChannel to be severely lacking as well.

Thanks!

[shilman]

You can't serialize this complex functions/data across the channel, so there are a few ways to go.

A) Find a format that you can serialize and use that (e.g. a markdown string that then gets interpreted on the manager side)

B) Update your requirements/design so that you are rendering it in addon-docs, instead of in its own addon panel. Addon-docs renders in the preview not the manager.

C) Register the data in .storybook/manager.js using addons.setConfig:

addons.setConfig({
  additionalDocs: {
    button: ButtonDocs,
    ...
  }
});

and then set the keys as parameters:

<Meta
  title='Components/Button'
  component={Button}
  parameters={{
    additionalDocs: 'button'
  }}
/>

And then your addon can use the parameter to fetch the right renderer from the registry.

[wagedomain]

Interesting! I had not considered that. I will put together a quick POC to see if this meets our needs, thanks a lot!

One consideration I have is that our stories are being distributed to other storybook instances, and if possible we wanted to keep the additionalDocs linked to the stories that are distributed. In this setup, it would be, but only if they updated their storybook's manager.js to include the new docs as well (unless I am misunderstanding?)

This might be fine for our current use case, but ideally it would all be bundled up in an exported story.

We tried the serialization route ourselves, and BOY does it seem like MDX is hard to serialize/deserialize 😆