Create custom toolbar items using global types

With Storybook you can build custom DevTools in seconds. And they're immediately shared with your whole team!

▬ Chapters ▬▬▬▬▬▬▬▬▬▬

00:00 Why Storybook tools
00:33 Intro
01:14 Create a simple toolbar item
01:52 What are global types?
02:27 Customize toolbar details
03:02 Customize toolbar presentation
03:55 Customize toolbar options
04:49 That's all... almost
05:07 Connect locale tool with react-i18next
06:58 Gotchas
07:41 Conclusion

▬ Links and resources ▬▬▬▬▬▬▬▬▬▬

▬ Follow us! ▬▬▬▬▬▬▬▬▬▬

Follow @chantastic on:
- youtube: @chantastic

▬ Learn more ▬▬▬▬▬▬▬▬▬▬

▬ Free Storybook hosting ▬▬▬▬▬▬▬▬▬▬

Chromatic is made by Storybook maintainers and sets up in just 2 minutes.

[dominicnguyen]

Super helpful! I've been seeing custom theme and locale switchers on a lot of Storybooks lately. I always wondered how those folks made them.

[thany]

So you can only ever create dropdown menus in the toolbar? No regular buttons or toggle buttons?

[LordFunzo]

I just want to add a link to the toolbar.

[somewonderfulguy]

I assume there's no multiselect control and I need to develop multiselect addon by my own...

[codingchewie]

Nice video. Currently diving into Storybook for a monorepo and stuck trying to figure out how to exclude a directory in stories without implementing a glob approach.

[coofzilla]

can you make one of these for using mock service worker? specifically when you want to make stories for each outcome? success/loading/error

[tigrislaesus]

Hallo thanks for your efforts..Can you pls tell us on how to include "react-int" instead of "i18next" with storybook to switch langage between locale?

[VictoriaLagoda]

How come this tutorial has such few likes?

[dwfee]

Very nice, any chance this works with dynamicly adding scss and if how? It's really a pity that most of the plugins are not updated to work properly with 6.5. My problem is, that I want to choose fonts from a dropdown, this works with and webpack, but not with vite because of the loaders I guess. And I don't want to use a theme provider, because I use scss and not some css in jsx. And I would need the same thing to implement color themes, which are done with the'withCssResources' Plugin, but thown even more warnings and prevent React18 from being used. Any ideas are very, very welcome.