CLI: Add common welcome MDX and cleanup

[tooppaaa]

Issue: #10794

What I did

Use @domyen welcome story in all frameworks template with a single implementation
Remove old welcome stories
Update e2e

Relates to #9103
I updated angular CLI to use this setup out of the box: https://github.com/storybookjs/storybook/blob/next/addons/docs/angular/README.md#props-tables

How to test

• E2E

[tmeasday]

Awesome awesome. Can't speak to the CLI changes but LGTM

[tmeasday]

Do you think we should maybe import this style too?

[tooppaaa]

I think we should if it's easy. I tried to import a css file in mdx but it doesn't work. Is that supposed to be supported ?

If it's not, maybe we should log a ticket and see if it gets community support ?

Either it's wanted or not, I think we can ship this and improve later.

[yannbf]

Awesome stuff! I'll check it out and give my feedback soon

[yannbf]

The following links don't exist:
https://storybook.js.org/docs/presets
https://storybook.js.org/docs/webpack
https://storybook.js.org/docs/styling
https://storybook.js.org/docs/data

I assume we only want to have this deployed once the links are working?

[yannbf]

Here it says src/storybook-examples/welcome.mdx although the generated file is stories/0.Introduction.stories.mdx

[domyen]

That was my mistake! @tmeasday why is the file called 0.Introduction? Is it so Storybook shows it as the first story without having extra configuration in main.js?

[yannbf]

Yes, I believe so. However, in the example it's not being shown first 🤔

[tmeasday]

@tmeasday why is the file called 0.Introduction? Is it so Storybook shows it as the first story without having extra configuration in main.js?

That was originally why, yeah. Can we just change the stories field to import mdx first? Or is that too complex?

[domyen]

@tmeasday I think it looks weird to have 0.name when I first install. I'd rather the default story import be something reasonable like showing MDX files first.

[yannbf]

I have experienced quite some colleagues keeping this nomenclature in order to have properly ordered stories, and of course it all starts because the template does it.
For the ones that want to have a simpler way of organizing the stories (per category is something I see a lot), notice people creating a custom sorting mechanism like this one: https://github.com/ing-bank/lion/blob/master/.storybook/preview.js#L30

Sorting stories should be something simple by default and if people want to do something more complex they should be free to do so, IMO.

[tooppaaa]

There's an issue which I reproduced while updating @babel/core from 7.10.2 to 7.10.4

WARN ./src/stories/0.Introduction.stories.mdx
WARN Module build failed (from ./node_modules/babel-loader/lib/index.js):
WARN SyntaxError: /tmp/storybook-e2e-testing/cra-vlatest/src/stories/0.Introduction.stories.mdx: Support for the experimental syntax 'jsx' isn't currently enabled (20:10):
 

WARN   18 | const makeShortcode = name => function MDXDefaultShortcode(props) { 
WARN   19 |   console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
 
WARN > 20 |   return <div {...props}/>
WARN        |          ^
WARN   21 | };
WARN   22 | 

WARN   23 | const layoutProps = {
 
WARN Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
 
WARN If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

[gaetanmaisse]

💪

[shilman]

Looking good! Going to merge this and resolve some of the issues in a followup PR. Great work @tooppaaa 🔥