13 Project: Create a React UI library

 

This chapter covers

  • Creating UI components from a product brief
  • Composing a UI library by using Storybook
  • Testing UI components exhaustively
“Hi, and welcome. It’s great to see a new face in the office. Before we show you around, let’s get right to the task we hired you for. We need a common UI library across all our React projects to make our brand look great and uniform and make it a lot easier to prototype new features across all our products quickly. We’ve started a library with some tools we’d like you to use, but it’s all on you to expand it to all the components we need.
“Our design team has created some visualizations for you, with all the pixels and hex codes you desire, and the product team has written up some specifications for each component so you know exactly what they’re supposed to do and how they interface with the world and the user. Let me introduce you to the team. Come along!”

With this fictional intro, pretend that you’re a new hire at a company. Your job is to extend a budding new UI library using whatever tech stack this company happens to use.

13.1 The existing stack

13.1.1 Storybook: Visual testing

13.1.2 Istanbul: Code coverage reporting

13.2 Your new job: Extending the library

13.2.1 A Switch component

13.2.2 An accordion component

13.2.3 A toast component

13.2.4 My solution

13.3 Future work