React: Add official cra-template

[kevin940726]

Issue: #9327

What I did

Create an official CRA template for Storybook: @storybook/cra-template. This template is targeting 6.0 with addon-docs by default.

The example story is sitting right inside the src directory called Welcome.stories.mdx. Since the <Welcome> component from @storybook/react/demo is outdated for this template, I move the introduction to mdx instead.

All the other files are copied from the official cra-template.

Once this is ready, I'll create another PR for @storybook/cra-template-typescript

How to test

Seems like bootstrapping with custom templates with file: schema will fail (maybe a bug from CRA?). I'm still figuring out how to properly test this without manually coping all the files.

npx create-react-app@latest --template file:./lib/cra-template cra-storybook

Once this is published to npm registry, we can bootstrap it with npx create-react-app --template @storybook my-app.

Screenshot

Questions

1. Any other things we want to include in this template? Like any unreleased 6.0 new features 😉?
2. How should we maintain the package versions in template.json? I guess we can just pin them to ^6.0 when they're released.
3. Is it possible to default to highlight docs panel by default?

c.c. @mrmckeb

[mrmckeb]

Looks great, only a few comments/suggestions - I think a lot of people will value this!

[kevin940726]

Pinging @mrmckeb again for another review 😉

[mrmckeb]

I'm not sure about the ignores for ESLint and Prettier - maybe long-term we can see if we can fix the root issus?

But definitely this is looking great, and I think we could get it out. What do you think @ndelangen and @shilman?

[mrmckeb]

This won't be required in the next minor, but needs to stay for now.

[kevin940726]

@mrmckeb I'm not so sure about eslint/prettier issue. I had to ignore it because I want to better align the coding style in the template with the official CRA template. What do you mean of fixing the root issue? I can't think of any alternatives for now 🤔.

[kevin940726]

@mrmckeb Pinging you again for another review :) (Take your time!)

[ndelangen]

I see 2 errors:

 FAIL  lib/cra-template/template/src/App.test.js
  ● renders learn react link

    TypeError: expect(...).toBeInTheDocument is not a function

       6 |   const { getByText } = render(<App />);
       7 |   const linkElement = getByText(/learn react/i);
    >  8 |   expect(linkElement).toBeInTheDocument();
         |                       ^
       9 | });
      10 |

      at Object.<anonymous>.test (lib/cra-template/template/src/App.test.js:8:23)

Summary of all failing tests
 FAIL  lib/cra-template/template/src/App.test.js
  ● renders learn react link

    TypeError: expect(...).toBeInTheDocument is not a function

       6 |   const { getByText } = render(<App />);
       7 |   const linkElement = getByText(/learn react/i);
    >  8 |   expect(linkElement).toBeInTheDocument();
         |                       ^
       9 | });
      10 |

      at Object.<anonymous>.test (lib/cra-template/template/src/App.test.js:8:23)


Test Suites: 1 failed, 119 passed, 120 total
Tests:       1 failed, 1390 passed, 1391 total
Snapshots:   408 passed, 408 total
Time:        32.276 s
Ran all test suites in 7 projects.

[kevin940726]

@ndelangen I just updated all the dependencies and template to the latest version. It should work now!

However, when running yarn storybook, there would be a warning as in #10822, not sure if it's related? Furthermore, when running in development mode, everything works fine, but when running in production mode (yarn build-storybook), the page will load infinitely with no stories available. I'm not sure what's the problem here?

[shilman]

Thanks for the contribution @kevin940726. During 6.0 we overhauled the sb init command to generate much better examples than before. Although the template would simplify the install process very slightly for users, it increases our maintenance burden substantially because the CRA install will change over time and our sb init template will change as well, and this seems like it should just contain the result of both of those. So I'm closing this PR. If you want to create a storybook repo for this outside the monorepo, I'd be open to that.