Brief Description of the Project
MusicBrainz is aiming for a user experience overhaul. To keep development and design in sync, we are building a UI component library. The components are written in react.js, and documented using react-storybook.
Selecting a UI Component Library
I compared various open source libraries out there to select one suitable for our purposes. We finally decided to go with react-bootstrap because of three main reasons:
- All basic components required for development are available.
- The community support for developers is amazing.
- Our other project, BookBrainz already utilizes react-bootstrap.
I created a new repository for the MetaBrainz Design System. The initial set up required
- Adding react-bootstrap and react-storybook.
- Adding a custom webpack config for storybook.
- Adding yarn for package management. You can find all the work to set this up in this PR.
Adding UI components
I then started importing UI components required for our design system from react-bootstrap and modified their styling to match our UI mockups. The completed components can be found here and the ongoing components here.
We are using the add-info addon by react-storybook to document our components. The pull request is under review and can be found here.
Here is a list of all the commits merged.
- Add the remaining UI components to the design system
- Develop the design principles, contributing guidelines for usage and creation of components.