Addon-docs: Decorators for MDX and DocsPage

Is your feature request related to a problem? Please describe. I would like to be able to add custom widgets at the top of all my MDX pages.

Ideally, I would define those widgets once in some kind of container that would wrap all my MDX pages.

Describe the solution you’d like It could be achieve by a decorator with the same behavior as the story decorator but for MDX and DocsPage.

addDocsDecorator((page, context) => <DocsContainer page={page} ... />)

Describe alternatives you’ve considered

• Manually add the widgets in all my MDX pages.
• Support tool addon in MDX pages

[shilman]

I think you can do this already, though with a slightly less flexible mechanism. Let’s suppose I want to wrap every docs page with a red border. It should be possible using something like this:

import { addParameters } from '@storybook/client-api';
import { DocsContainer } from '@storybook/addon-docs/blocks';

addParameters({
  docs: {
    container: ({ children, context }) => (
      <DocsContainer context={context}>
        <div style={{border: '5px solid red'}}>
          {children}
        <div>
      </DocsContainer>
    ),
  },
});

[atanasster]

Just for documentation completeness purposes, the following is also an equivalent:

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

addParameters({
    docs: {
      page: props => (
        <div style={{ border: '5px solid red'}}>
          <DocsPage {...props} />
        </div>
      ),
    },
});