Introduction to Storybook with React

Storybook: An interesting dev environment for frontend developers

Hey, today we are going to learn about a UI component development environment and playground.

Which generates components that are not dependent on the project. It’s separate from the main react application. This environment is called Storybook.

Storybook aids in the documentation of components for reuse as well as the automated visual testing of components to avoid issues.

Setup

To include a storybook in your current react project, follow these steps:

• Npx sb init

The following modifications will be made to your local environment as a result of the command above:

• Install all of the necessary dependencies.
• Set up the necessary scripts for Storybook to run and compile.
• Activate the default Storybook settings.
• To get you started, add some boilerplate stories.

To run storybook :

• Npm run storybook

After running this command you can see a screen like below :

This is an introduction page for a storybook.

• The storybook extension can be .stories.js or .stories.ts or .stories.mdx
• The stories are written in Component Story Format (CSF)–an ES6 modules-based standard–for writing component examples.

Example

Let’s write one story to understand it better.

• Create one folder named components in src.
• In the components, the folder creates another folder named Button.
• Under the Button, the folder creates a file named Button.js/.ts/.mdx.
• Write following code in Button.js/.ts/.mdx file.

import React from 'react'
		import './Button.css'

		function Button(props) {
		const { varient = 'primary', children, ...rest }=props;
		return (
			<button className={`button ${varient}`} {...rest}>
			{children}
			</button >
		)
		}
		export default Button

• You can give CSS if you want. It’s optional.
• Now create another file named Button.stories.js/.ts/.mdx
• Write the following code in this file

import React from "react";
		import Button from "./Button";

		export default {
		title: 'Form/Button',
		component: Button,
		argTypes:{
			varient:{control : 'text'},
			onClick:{action:'clicked'}
		},
		}

		export const Primary = () => <Buttonvarient='primary'>Primary</Button>

So now, we have successfully created our first storybook. You can see this in your browser.

Features

Storybook comes with some built-in time-saving tools.

The toolbar contains tools that allow you to adjust how the story renders in the Canvas:

• Zooming graphically scales the component, allowing you to see its details.
• Background modifies the rendered background behind your component so you may see how it looks in various visual environments.
• The component is rendered in several dimensions and orientations by Viewport. It’s perfect for testing component responsiveness.
• Plugins that extend Storybook’s fundamental capabilities are known as add-ons. You’ll find them in the addons panel, which is located below the Canvas in the Storybook UI. Each tab displays the metadata, logs, or static analysis created by the addon for the selected story.
  • Controls allow you to interact with a component’s args (inputs) dynamically.
    • Experiment with different component configurations to find edge cases.
  • Actions allow you to use callbacks to ensure that interactions generate the desired results.
    • For example, if you look at the Header component’s “Logged In” narrative, we can see that hitting the “Log out” button activates the onLogout callback, which is provided by the component that used the Header.
• To take advantage of Storybook’s “args” idea, the above story definition can be modified further.
  • Args is a machine-readable description of the arguments to Button.
  • It enables Storybook’s superpower of dynamically modifying and constructing arguments.
• Here is one example of a storybook using “args” :

import React from "react";
		import Button from "./Button";

		export default {
		title: 'Form/Button',
		component: Button,
		argTypes:{
			varient:{control : 'text'},
			onClick:{action:'clicked'}
		},
		}

		export const Primary = () => <Button varient='primary'>Primary</Button>
		export const Secondary = () => <Button varient='secondary'>Secondary</Button>
		export const Success = () => <Button varient='success'>Success</Button>
		export const Danger = () => <Button varient='danger'>Danger</Button>

		const Template = (args) => <Button {...args} />

		export const PrimaryA = Template.bind({});
		PrimaryA.args = {
		varient: 'primary',
		children: 'Primary Args'
		}

Advantages

• Working on one component in one state (called a story) at a time is simple with Storybook. When you make changes to the Button code or stories, Storybook will re-render in the browser right away. There’s no need to manually refresh.
• The “Docs” tab displays auto-generated component documentation (inferred from the source code). When sharing reusable components with your teams, such as in a design system or component library, use docs come in handy.
• The Storybook can be expanded. Our extensive ecosystem of addons aids in the testing, documentation, and optimization of your stories. To meet your workflow requirements, you can alternatively design an addon.
• The story file is for development-only, and it won’t be included in your production bundle.

In conclusion for further information go ahead and check the storybook official documentation.