Storybook understanding and ways writing of Stories for React

Storybook is an open-source UI development tool. It helps developers to create reusable, organized UI components with proper documentation independently. The component we create is called the story in Storybook.

In this article, we will understand the following topics:

• How to write a basic story
• How to group stories together in a folder
• How to embed a story within a story

Prerequisites:

• Storybook Introduction and Installation

Creating React Application and adding Storybook in your project:

Step 1: Create the react project folder, open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t then install create-react-app globally by using the command.

npm create-react-app projectstorybook

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd projectstorybook

Step 3: To add storybook in your project, in your terminal write the command

npm sb init

Project Structure: It will look like this. We have deleted the default story folder in the src folder. We have created a Components folder where we have created another two folders for our components Button and WelcomeText each having its own Javascript, CSS, and Stories file. We have also created another folder Page that basically embeds the other two components i.e, the Button and the WelcomeText.

👁 Image

Example 1: In this example, we will see how to write a  basic story. Let's see the step-by-step implementation.

Step 1: Here, we are creating Component i,e a story Button. In the src folder, we will create a folder named Components within the folder we will create another folder named as Button in the folder again create three files naming Button.js,Button.css, and Button.stories.js and we will write the respective codes. In this file, we are simply creating a button component that takes variants, children as props,

Step 2: Adding a few styling to our component. We have created class btn which adds style to the button element. We also have two other classes sign-in and login with different stylings.

Step 3: In this file, we write the story. We import the Button Component. We are creating two sub-stories for our button component that takes variant login and sign-in respectively. We create put a unique title to the export default and also mention the component's name here it is Button;

Step to Run Application: Run the application using the following command from the root directory of the project.

npm run storybook

Output:

👁 Image

Example 2: In this example, we will see how to group stories together. Let's see the step-by-step implementation.

Step 1: Storybook gives us the feasibility to group stories together according to our convenience. To understand better, let's create another folder as welcomeText and make files like WelcomeText.js, WelcomeText.css, WelcomeText.stories.js and write the below-mentioned code respectively. In the file, we are creating a component that shows a text. We are using a variant, children as props for this component.

Step 2: Adding classes primary and secondary along with class welcome-text.

Step 3: Like previously, we are creating a story for the component, where we create other sub-stories Primary that lakes the primary and Secondary that take secondary as a variant.

Output:

👁 Image

Example 3: In this example, we will see how to do stories within the story. Let's see the step-by-step implementation.

Step 1: Now to group the stories all together in a folder, we need to just write in the title section of the stories the name of the folder before "/ComponentName".

Here, both the stories are in the HOME folder.

Step 2: As in React, we can embed one component within another, we can similarly do it in the case of stories. Let's create a story named Page, for that create a folder named Page and add a file naming Page.stories.js and write the below code where we are adding two of our stories that we created earlier one is the Login from Button.stories.js and another one Primary from WelcomeText.stories.js. Here we are embedding two of our stories Login and Primary within the new story Page.

Output:

👁 Image