Create an official template for CRA

Is your feature request related to a problem? Please describe. Since CRA now supports custom template, I think it makes sense for us to create official template for CRA. It would make new comers easier to get started with storybook and CRA.

Describe the solution you’d like We can create a new package cra-template-storybook and maintain it in this mono. We just have to follow the guide here, and the official template in cra-template and cra-template-typescript.

Describe alternatives you’ve considered npx -p @storybook/cli sb init works just fine, and we can continue support that for existing projects and for non-CRA projects. For new projects though, we can recommend users to just use cra-template-storybook to get started.

Are you able to assist bring the feature to reality? Absolutely! I think it’s fairly straight-forward. There are only some minor issues, like where should we put this project? A new directory templates? Inside examples (but it’s not an example)? Or maybe just in lib?

Also since we can control the template now, we could create example component directly inside the template rather than using @storybook/react/demo. Would love to hear some ideas about this 🙂.

Additional context In short for what it would look like when landed. Users can simply run this command and get an CRA with storybook.

npx create-react-app --template storybook

[kevin940726]

@mrmckeb Agree!

I would say both, @storybook/cra-template and @storybook/cra-template-typescript.

[kevin940726]

@mrmckeb You mean putting Button.js and Button.stories.js in the same directory? I’d love that, personally I’ve never used an universal stories folder ever. Either putting them inside the same directory, or following the convention in Jest and put stories inside a nearest __stories__ folder along side the component. It could be too complicated for a template to do the latter though, in practice, I’d expect to put stories at the same place as tests.