TurboHire Storybook
A Storybook provides a playground for your components by providing an isolated development environment for user interfaces.
In your component, a story defines how it will look when it is rendered. It is possible to use a common component with props in a variety of ways. For each of those states, we can write a story.
Let’s say we have a THButton component.
There are different states in which buttons can exist, such as disabled, loading, primary default, secondary default, small, large, medium, etc.., listing all the states would make the tutorial very difficult to follow. I think you understand what I’m saying.
You will get to know about it more when you start working with the storybook.
This is the landing page of the TurboHire Storybook.
Here, is an example of our THButton component.
Here we have 3 main props for the button.
First is the variant prop. We can select which variant we want to use. The main advantage here is we can explore and know which variant we have to pass to achieve the desired look. Below is the visual representation of our primary default variant of the button.
Next, is the secondary default variant of our button.
Below, is the size prop of our button component. Here we can control the size of the button. We can choose among small, medium and large.
You can check out our different custom-made components for our platform here.
So, what’s the agenda of using a storybook?
Let’s say we are working in a team of 10 members. And we need to check common components that everyone has written for the current working project.
How can we do that?
We have to go to every common component to check them. But, it’s time-consuming and not a preferred way for us. Here comes our new guest storybook.
How to utilize it to overcome our problem?
We can write stories for the common components (any UI components) using the storybook. And whenever your teammate wants to check the common components of others, then they simply run the storybook server and will see all the UI components there as we have seen above.
