Storybook Markdown Docs

Storybook Addon for Auto Markdown Import

This article is part of a series , feel free to look at the others below 👇👇.

• Addon-Kit is a developer’s dream come true
• Storybook Markdown Docs (not mdx)
• Storybook Markdown Docs (not mdx) Part 2
• Storybook Addon for Auto Markdown Import
• Support .html files in Storybook

Putting all these together, I’ve done the following:

• I created an addon by simply clicking a Button
• I understood the different ways of importing Markdown docs into MDX
• I implemented a Story Indexer to convert Markdown to MDX then compile it to CSF
• I created a nice PR on the official Storybook Repo to help with processing Markdown files as DocsOnly stories instead of CSF stories.
• Now it is time for the addon to see the light.

All the bells and whistles included in the Addon-Kit helps by using auto alongside github workflows to publish libraries/packages in the easiest way possible. All I did is actually move the code I implemented in the last article from main.js to preset.js and I included that preset.js as an addon in my main.js like so:

module.exports = {
  framework: {
    name: "@storybook/react-webpack5",
    options: {}
  },
  stories: ['../*.md'],
  addons: ["../preset.js", "@storybook/addon-essentials", {
    name: "@storybook/addon-docs",
    options: {
      transcludeMarkdown: true
    }
  }],
  docs: {
    autodocs: true
  }
};

Oh, I guess I forgot to mention, we have to enable transcludeMarkdown because as simple as turning it on, Storybook will introduce a special loader to load the .md files and process them as docs components. That way when you switch to specific Markdown file in your Storybook, webpack will use that loader to process the .md file.

Feel free to look at the addon code in the repo listed below 👇👇

GitHub - sheriffMoose/storybook-md: Storybook addon for auto importing markdown docs.

If you want to use this addon, simply install it

npm i -D @sheriffmoose/storybook-md

Enable transcludeMarkdown and add the addon into your main.js like so:

module.exports = {
  stories: [
    '../*.md',
  ],
  addons: {
    '@sheriffmoose/storybook-md',
    {
      name: '@storybook/addon-docs',
      options: {
        transcludeMarkdown: true
      }
    }
  }
}

and voila

I hope I helped you with something useful with this series. See you soon.