Skip to content

Commit

Permalink
update mdx docs
Browse files Browse the repository at this point in the history
  • Loading branch information
shilman committed Nov 30, 2019
1 parent f92139e commit bdf6de4
Showing 1 changed file with 50 additions and 0 deletions.
50 changes: 50 additions & 0 deletions addons/docs/docs/recipes.md
Expand Up @@ -6,6 +6,7 @@
- [Pure MDX Stories](#pure-mdx-stories)
- [Mixed CSF / MDX Stories](#mixed-csf--mdx-stories)
- [CSF Stories with MDX Docs](#csf-stories-with-mdx-docs)
- [CSF Stories with arbitrary MDX](#csf-stories-with-arbitrary-mdx)
- [Mixing storiesOf with CSF/MDX](#mixing-storiesof-with-csfmdx)
- [Migrating from notes/info addons](#migrating-from-notesinfo-addons)
- [Exporting documentation](#exporting-documentation)
Expand All @@ -31,6 +32,55 @@ The only limitation is that your exported titles (CSF: `default.title`, MDX `Met

Perhaps you want to write your stories in CSF, but document them in MDX? Here's how to do that:

**Button.stories.js**

```js
import React from 'react';
import { Button } from './Button';

export default {
title: 'Demo/Button',
component: Button,
includeStories: [], // or don't load this file at all
};

export const basic = () => <Button>Basic</Button>;
basic.story = {
parameters: { foo: 'bar' },
};
```

**Button.stories.mdx**

```md
import { Meta, Story } from '@storybook/addon-docs/blocks';
import \* as stories from './Button.stories.js';
import { SomeComponent } from 'path/to/SomeComponent';

<Meta title="Demo/Button" component={Button} />

# Button

I can define a story with the function imported from CSF:

<Story name="basic">{stories.basic()}</Story>

And I can also embed arbitrary markdown & JSX in this file.

<SomeComponent prop1="val1" />
```

What's happening here:

- Your stories are defined in CSF, but because of `includeStories: []`, they are not actually added to Storybook.
- The MDX file is adding the stories to Storybook, and using the story function defined in CSF.
- The MDX loader is using story metadata from CSF, such as name, decorators, parameters, but will give giving preference to anything defined in the MDX file.
- The MDX file is using the Meta `default` defined in the CSF.

## CSF Stories with arbitrary MDX

We recommend [MDX Docs](#csf-stories-with-mdx-docs) as the most ergonomic way to annotate CSF stories with MDX. There's also a second option if you want to annotate your CSF with arbitrary markdown:

**Button.mdx**

```md
Expand Down

0 comments on commit bdf6de4

Please sign in to comment.