storybook: Does not show code sample unless it's also using

Describe the bug

When using <Preview /> to render a component in a mdx file, it doesn’t show the code sample unless the sample also defines a story using <Story /> in the child.

To Reproduce

Use the following in a stories.js file;

import BoxReadMe from './Box.mdx';

const stories = storiesOf('Atoms/Box', module);

stories.addParameters({
  docs: {
    page: BoxReadMe,
  },
});

And then put this in the mdx file.

<Preview>
  <Box
    label="Montezuma the Cat"
    description="Montezuma is honestly the best cat I've ever seen."
  />
</Preview>

You’ll get No Code Available.

Expected behavior

I expect it to show the code that is used to power whatever is placed within the Preview components.

Additional context I’m unsure if this is a bug or not, but I feel the name Preview is a little bit confusing.

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 32 (16 by maintainers)

Most upvoted comments

@shilman right, but not when it’s used in the context detailed in this issue? ie calling the docs page for my story Accordion.docs.mdx and consuming it via


Accordion.story = {
  parameters: {
    docs: { page: accordionMDX },
  },
}

I see No code available just like @JamesIves

sami616 on Feb 17, 2020

@shilman The recipe says “Your stories are defined in CSF, but because of includeStories: [], they are not actually added to Storybook.” But the stories are added to storybook.

Shouldn’t the recipe be updated to match Storybook 6? Or explicitly say that it’s for 5.2? As it is, a piece of code is referred to (includeStories: []), although it is not mentioned anywhere on the page.

I am new to SB 6, and I find it hard to find comprehensive documentation. Like a list of components @storybook/addon-docs/blocks gives us, and which props they have.

Also, it would be helpful to address the issues people will have with components using createPortal (obviously), and forwardRef (maybe less obvious). It can all be done, but it would be great to know how instead of spending hours of trial and failure.

Apart from that, upgrading from 5 to 6 feels like going from 5 to 10. Someone did an absolutely amazing job.

lars-bo-colourbox on Aug 25, 2020

@annidavenport that recipe never showed the source of the components. this is not explained very well in the documentation but there is a distinction between “foo.mdx” and “foo.stories.mdx”, and reflects a design we’ll probably revisit in the next major iteration of storybook docs. “foo.mdx” former is vanilla mdx that is similar to any random MDX you’d write in another site. the latter is “storybook mdx” which can render “doc blocks” like Source/Canvas/Story/etc. So when you use the “arbitrary mdx” recipe, you’re getting a markdown that can contain embedded JSX, but with none of the smarts of storybook behind it.

shilman on Aug 9, 2021

This should be fixed in #7966 and available in 5.3.0-alpha.x

shilman on Oct 22, 2019

@JamesIves Sorry this is ending up being such an ordeal for you. Hopefully we can get a clean recipe going for you that satisfies all your needs. A few things…

You can disable stories from displaying in MDX:

<Story name="foo" parameters={{ docs: { disable: true }}} />
  ...
</Story>

I could imagine a version of the MDX compiler which runs on all your MDX files and handles this preview case, and another pass that only applies to .stories.mdx which requires Meta and generates exports for Story elements.

shilman on Oct 24, 2019