Intro to Storybook templates

[jonniebigodes]

Looking at the present state of the Intro to Storybook in its various forms (frameworks), there's a lot of work that the reader needs to do in order to get a minimal viable project setup with Storybook and its framework of choice. As the tutorial is an introductory one the reader should be able to get onboarded with a minimum effort on his part. What i'm thinking here is the following:

• Create a template for the various frameworks currently documented (React, Angular, Vue, Ember, React Native).
• Said template would streamline the overall experience and reduce the amount of steps that the reader has to go through to get onboarded.

With this i would love to hear from @dannyhw as you're "leading the charge" (pardon the bad pun) on the React Native version of Storybook and from @gossi as you're in the forefront of the ember experience with Storybook.

Let me know what you think.

Stay safe

[gossi]

Can say for ember, when you do ember install @storybook/ember-cli-storybook this will run the sb init. Not the real one, ember-cli has the concept of blueprints instead, which mimics what sb init is doing here. It creates the config and hooks into ember (or should do it). I think it would even be better if it would execute sb init (less mainteneance for sure, higher consistency)

This is what I see as an entry point for ember. What do you have in mind this template is doing?

[dannyhw]

Speaking from my experience with the react native project the part which benefits most from having a template is the setup of things like CSS, fonts, icons etc which depending on the framework can be kind of complicated. In the react native example the first section is/was a series of copy and paste for setting up things that aren't directly related to the content of the tutorial such as setting up the font as mentioned. Having this as part of a template is beneficial for reducing setup time and potential for error. The cost is one of maintaining the template so it does not become out of date. This could be as simple as a repo containing the project ready for the tutorial.

The other option would be to simplify the tutorial project so it doesn't include additional files or setup etc.

[jonniebigodes]

The way i'm thinking on putting this into effect is basically a 2 step approach. I want to start small and create the repo templates for the various frameworks so that when the reader lands on the get started section for it's framework of choice he/she would only need to run something like:

# clone repo
npx degit chromaui/intro-storybook-react-template taskbox

cd taskbox

# install dependencies
npm/yarn install

And he or she would be good to go and move onto the next section. I'm well aware of the cost associated with maintenance but it can be mitigated with some tooling already in place, for instance renovatebot.

If this "takes off" (pardon the bad pun) it could be made for instance into an ember blueprint that the reader can get by running one single command and he/she would be good to go.

Or for example for react native publish the template into npm and allow the reader to run:

expo init --template intro-storybook-react-native-template taskbox

And once again he/she would be good to go.

[jonniebigodes]

Pull request #435 is fast tracking this. For now the following frameworks are covered:

• Angular
• React
• Vue
• Svelte

Ember is suffering of some weird core.js error preventing the build from going through. Something broke and i've raised an issue in the Storybook repo. @gossi if you could take a look i would appreciate it. On that note @dannyhw sometime in the near future i want to coordinate with you and get a status update and see how we could address React Native and Storybook. Sounds good?

[gossi]

Could you link the issue from storybook so I can find it and can have a look?

[jonniebigodes]

@gossi here is the issue. Thanks in advance for looking into it

[dannyhw]

@jonniebigodes yeah im happy to coordinate with you and we can take another look at the react native stuff :).