Search code examples
javascriptvuejs2storybook

Replacing Storybook's DocsPage with my .mdx file

I want to change my stories' Docs page, so when I click on Canvas, it shows the component and props from the story.js file, and when I click on Docs it shows me my self-made MDX file instead of the autogenerated one.

This is what the documentation says:

enter image description here

The page parameter looks like this:

parameters: {
  docs: {
    page: null
  }
}

I set it to null, so now it shows nothing. Does anyone know what value I should give the page to use my x.stories.mdx named file?

Solution

  • Original Answer

    I'm not sure how it works by changing things in the parameters.

    But what I do is, this in main.js:

    module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  // ...
};

    And then just add the x.stories.mdx in that location:

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

<Meta title="Info/Toolbox"/> <!-- This notation creates a subtitle -->

Your documentation here ...

    This is what my docs looks like in parameters:

    docs: { inlineStories: true }

    Update

    I found that you can use the docs object in parameters to change for example component & story descriptions. e.g.:

    docs: {
  description: {
    component: 'Some component description',
    story: 'Some story description'
  }
}

    You can actually link files to these, if you want the description to be in some text file. But it is not meant to set an mdx file replacing the documentation.

    The mdx file is supposed to be picked up like I described in the original answer.

    I think the confusion is that you can't create documentation for just the docs tab. You actually create documentation for both Canvas and Docs using MDX.

    I recently made an MDX version approximating the autogenerated documentation of a simple component in a project of mine, maybe it can help you out with yours.

    You can find the MDX code here, and the storybook server here.

    You will find there is a HOME PAGE and a HOME PAGE (MDX) section.