Storybook: Import .md (and not .mdx file) as Docs Only page?

[smurrayatwork]

Bug or support request summary

Is it possible to directly import a normal .md file (such as a README.md file) into a story for display? Or, is it possible to import a .md file as a Docs Only page? If so, how would I go about doing that?

So far, I've only been able to get that working by copying the contents of a .md file into a.stories.mdxfile, while also using` for the docs only approach.

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react 6.0.4
• @storybook/addon-docs 6.0.4

[shilman]

Yes, it's possible but not well documented yet. See this PR for details: https://github.com/storybookjs/storybook/pull/11334

[smurrayatwork]

@shilman ,

I was able to get it working for .mdx files by setting transcludeMarkdown: true for the docs addon's options. Thanks!

Just posting for others' reference:

// markdown.stories.mdx
import { Meta } from '@storybook/addon-docs/blocks';
import Readme from './README.md';

<Meta title="about/Markdown Test" />

<Readme />

I wasn't able to import the .md file in a .stories.js file and maintain the same styling as the .mdx file though.

[smurrayatwork]

@shilman Is there a way to disable the Canvas tab when using transclude?

[shilman]

I think you can run yarn storybook --docs to disable canvas

[psychobolt]

I think you can run yarn storybook --docs to disable canvas

Is there a way to disable canvas for a MDX/MD story or any specific story?

[smurrayatwork]

@psychobolt I discovered this myself from a storybook example

<Meta
  title="my meta title here" 
  parameters={{ previewTabs: { canvas: { hidden: true } } }} 
/>

[smurrayatwork]

@shilman ,

With transcludeMarkdown: true, is there a way to then pass the imported .md file to a DocsPage component somehow? I have a lot of stories that have external .md files, and I'd like to be able to pass the component created by having transclude on to either a custom DocsPage component or the existing one. The only way I've been able to get that part working is by using raw-loader inline:

import readme from '!raw-loader!./README.md';

export default {
  parameters: {
    docs: {
      description: { component: readme }
    }
  }
}

[shilman]

Hmm not really. You could do the raw-loader hack that you're doing.

You could also do a custom DocsPage: https://storybook.js.org/docs/react/writing-docs/docs-page#remixing-docspage-using-doc-blocks

import Readme from './README.md'

export default {
  parameters: {
    docs: {
      page: () => (
        <>
          <Title />
          <Subtitle />
          <Readme />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
          <Stories />
       </>
      )
    }
  }
};

Not very satisfying I know...

[psychobolt]

import { Meta, Description } from '@storybook/addon-docs/blocks';

import Readme from '!raw-loader!../../README.md';

<Meta title="Documentation/Readme" />

<Description markdown={Readme} />

Seems like the raw-loader also works for my case.

[stale[bot]]

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!