Table of Contents
Are you looking for an efficient way to create and manage a component library? If so, Storybook and Bit are two great tools that can help. Both of these powerful tools offer unique features that make them ideal for building reusable components.
With Storybook, you can develop your components in isolation, manage your library, and document their functionality. And with Bit, you can easily version control and share those components between projects. In this article, we'll explore how combining the power of both the Bit and Storybook design systems together makes it even easier to create a robust component library!
There's a storybook vs bit (or bit vs storybook, if you prefer) post available now. Check it out if you're looking for a deep dive and comparison of these two outstanding tools.
If you haven't already read my post about Storybook, then go ahead and read it if you aren't sure what Storybook is.
Ready? Great!
Storybook Recap
Since you've already read my other blog post, I'll be brief:
Storybook is an open-source tool, design system, testing platform, and development environment that lets you develop and manage components in an isolated environment. You'll write "stories" in "story files" representing your component. Those stories are then available to view and play with inside a dedicated environment (which you can host as a website if it pleases you).
Developers can collaborate on each component in tandem with designers and product managers. Storybook's suite of add-ons enhances the developers' experience with added functionality.
It's a great tool for building a library because it makes you start thinking about developing modular and descriptive components while providing a fantastic playground and documentation site.
What Storybook is Missing
While Storybook is very good at what it does, and it performs with distinction when you add it to a single project as a way to create that project's library of components if you want to share that library among multiple projects. You'll need to augment its capabilities where it falls short.
Versioning
If you are keeping a library of UI components completely separate from any other project, then you may want a way to keep track of the versions of each of your components. With Storybook, there's not really a way to do that out of the box. You have to manage package.json files manually, and it's very easy for package interdependencies to become complex and for things to slip.
Package Management
Hand in hand with versioning is package management. Obviously, if you're creating a library of UI components to share, then you'll need a way to package your components up and deliver them. Storybook does not do this for you.
Once you have many projects, each using shared components from your library, Storybook (as a design system) isn't enough.
Enter "Bit"
Bit is a system that allows you to create collections of UI components (libraries) and share components between teams. Think of it as a combination of git and the npm registry. It's a cool way to share code between your apps.
Bit Basics
Using Bit is pretty easy. You install a CLI and start adding components to your collection. You can do this inline with your project and essentially create npm packages out of your UI components that can then be shared between all your other projects.
Classically, you'd add your components from wherever they were originally created. This is fine, but at MachineServant, we have created a specialized bit workspace to house all our shared components to keep everything in one place.
The point is, Bit doesn't really care where you define your UI components; it will store your collection just fine if you keep the code in one place or distribute it across multiple targets.
Dependency Tracking
When you add a component to Bit and build it, Bit will automatically determine the dependencies of that component and manage them via a package.json file.
What's really nice is that if you have inter-dependencies between your own components in your bit workspace, those dependencies are tracked as well. Any change to a dependency you control will cascade down to any components that use it.
Versioning
Every time you make a change to a component tracked by Bit, you can automatically bump the version of that component. Bit keeps track of each version, and you can easily view the different versions through its UI.
Also, as mentioned above, if you bump the version of a component, then any other components that depend upon it will be bumped as well! There's no need to manually update the dependent packages.
Package Management
When you add a component, build it, tag it, and export it to your collection, you have just created a package tracked by and available from Bit.
You can then import that component into any project you like via npm.
For example, one of MachineServant's React components, timed-carousel, is available from Bit by installing it with an npm i @bit/machineservant.ms-components.timed-carousel command.
Bringing it All Together
If you read the previous post about Storybook, then you're familiar with MachineServant's component library project. Adding Bit to the mix is as simple as adding each component in that project to Bit via their CLI and then tracking and tagging any changes.
Essentially, with Storybook, you can develop your components in isolation, manage your library, and document their functionality. With Bit, you can manage versioning and distribute those components across projects. With Bit and Storybook, you can leverage the best of both worlds.
You can see MachineServant's Bit component collection here. It's a small collection of React components that we've used in a few projects.
Conclusion
By combining Storybook and Bit, developers can create a powerful library of UI components that are easy to manage, version control, and distribute across multiple projects. This makes it easier for teams to collaborate on shared components without having to manually update the dependencies each time something changes.
With tools like these available today, building complex user interfaces has never been simpler or more efficient. If you’re looking for an effective way to build out your component libraries quickly and collaboratively with minimal effort, then consider leveraging the power of both Storybook and Bit in your next project.
The new web development paradigm is to develop components that are small, descriptive, and easily portable. Check out any front-end framework you like: React…
Wondering what the difference is between Storybook and Bit? This article breaks it down for you, so you can choose the right tool for your project. Sometimes…