Core: Update index generation to use tags to detect MDX stories

[tmeasday]

Issue: N/A

What I did

Use storybookjs/mdx2-csf#22 to set mdx tag, and use it to determine which files need a docs page (rather than matching on filename).

[tmeasday]

@shilman there doesn't appear to be a new next version of @storybook/mdx2-csf just yet.

[tmeasday]

OK! This PR works, just need to figure out the test for the indexer.

[tmeasday]

Nice job @shilman! Will mark this ready for review once storybookjs/mdx2-csf#23 is merged and we can switch back to next

[shilman]

Merged. I suspect there are bugs in this PR. If you browse the sandbox "csf in mdx" docs page it's blank @tmeasday

[tmeasday]

@shilman it turned out to be a simple missing import, not sure how/if it was working before but an easy fix!

[shilman]

LGTM with one q

[shilman]

Just confirming that the mdx tag here means that the story was generated from MDX. Do we want that? It could be confusing

[tmeasday]

That was intentional on my part anyway. Happy to change the tag from mdx if it is confusing that a story can be "mdx". To me it makes sense.

[shilman]

WFM after letting it settle in

[tmeasday]

@shilman for some reason the stories.json.test.ts file has started crashing. When I run the test locally I see this a lot:

WARN 🚨 Extraction error on src/nested/Page.stories.mdx: SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (5:0)

When I change Page.stories.mdx to:

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

<>
<Meta component={{}} />

<Story name="StoryOne" />
 </>

The problem goes away. But I don't think that's right is it?