storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.61k stars 9.31k forks source link

[Documentation]: Introduce the CLI's "add" option as the default way to install addons. #21752

Open jonniebigodes opened 1 year ago

jonniebigodes commented 1 year ago

Describe the problem

Currently, the documentation only features how to install Storybook addons via the known package managers (i.e., yarn, npm, pnpm), and sometimes, when a user tries to add an addon, he forgets to suffix the package with next tag, and with that it inadvertedly the stable version is added instead and leads to the addon not being able to work as it should with the alpha/beta/rc versions of Storybook. To address this, we should instead reference installing addons with our CLI using the add option as a first option (e.g., npx sb@next add @storybook/addon-a11y) and relegate using the package managers as alternatives.

For context, see this discussion where the issue presented itself.

@shilman let me know when we're in the clear so I can make this change.

Additional context

N/A

shilman commented 1 year ago

I believe that sb@next add is stable. However, you should know that there is no magic going on with the command. If the user requests to add @storybook/addon-a11y it will add the latest version to the user's package.json and main.js. If they want the next version they should npx sb@next add @storybook/addon-a11y@next. The command currently saves you from having to edit your main.js by hand.

We should probably come up with some kind of version consistency checking as well, but I'm not sure what's the best way to do this in general, since we have 500+ addons and only a small subset of them are listed in the monorepo cc @yannbf who is looking at version consistency checks.

jonniebigodes commented 1 year ago

Thanks for the clarification @shilman. We can take this incrementally and start documenting it for our addons and expand from there. In the meantime, I'll continue experimenting with it and see if there are no issues.

@yannbf would you be ok with this as well so that we can move this forward and make the required changes and once we have a path moving forward for consistency we'll make the necessary changes. Sounds good?

yannbf commented 1 year ago

@jonniebigodes I think this need further testing, would you be OK with trying it out? Not all addons are registrable in main.js e.g. msw-storybook-addon only provides a decorator that you should import. Therefore the sb add command would behave weirdly for that scenario.

jonniebigodes commented 1 year ago

@yannbf I'm aware of it. I've been testing this out against our documentation and came to that exact conclusion, and we'll need to be judicious on how we document it and also add some mechanism in the CLI for this situation. Also, one other thing I've noticed is that the CLI will not accept adding more than one addon at a time, as a hypothetical scenario, if a user tries to add @storybook/addon-interactions and @storybook/addon-a11y in one go, only the interactions addon will be added.