Building a Design System with Storybook and React

Introduction

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. It promotes consistency, scalability, and efficiency in UI development. In this post, we'll explore how to build a design system using Storybook and React.

Why Use a Design System?

1. Consistency: Ensures a uniform look and feel across different parts of an application.
2. Scalability: Makes it easier to maintain and scale large applications.
3. Efficiency: Speeds up development by providing reusable components and guidelines.

Setting Up Storybook with React

1. Create a React App:

   Start by creating a new React application if you don't already have one.

   npx create-react-app design-system
   cd design-system

2. Install Storybook:

   Install Storybook in your React project.

   npx sb init

3. Run Storybook:

   Start the Storybook development server to see the default setup.

   npm run storybook

Creating a Button Component

Let's start by creating a simple Button component and adding it to our design system.

Create the Button Component

Create a Button.jsx file in the src/components directory.

// src/components/Button.jsx
import React from 'react'
import PropTypes from 'prop-types'
import './Button.css'
 
const Button = ({ label, onClick, primary }) => {
  const className = primary ? 'btn btn-primary' : 'btn'
  return (
    <button className={className} onClick={onClick}>
      {label}
    </button>
  )
}
 
Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func,
  primary: PropTypes.bool,
}
 
Button.defaultProps = {
  primary: false,
  onClick: undefined,
}
 
export default Button

Add Button Styles

Create a Button.css file for the button styles.

/* src/components/Button.css */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}
 
.btn-primary {
  background-color: #007bff;
  color: white;
}
 
.btn-primary:hover {
  background-color: #0056b3;
}

Documenting the Button Component with Storybook

Create a Button.stories.jsx file to document and showcase the Button component.

// src/components/Button.stories.jsx
import React from 'react'
import Button from './Button'
 
export default {
  title: 'Components/Button',
  component: Button,
}
 
const Template = (args) => <Button {...args} />
 
export const Primary = Template.bind({})
Primary.args = {
  primary: true,
  label: 'Primary Button',
}
 
export const Secondary = Template.bind({})
Secondary.args = {
  label: 'Secondary Button',
}
 
export const Clickable = Template.bind({})
Clickable.args = {
  label: 'Clickable Button',
  onClick: () => alert('Button clicked!'),
}

Building More Components

Expand your design system by creating and documenting more components such as Input, Card, Modal, etc. Each component should have its own stories file to showcase different states and variations.

Example: Creating an Input Component

// src/components/Input.jsx
import React from 'react'
import PropTypes from 'prop-types'
import './Input.css'
 
const Input = ({ placeholder, value, onChange }) => {
  return (
    <input
      className="input"
      placeholder={placeholder}
      value={value}
      onChange={onChange}
    />
  )
}
 
Input.propTypes = {
  placeholder: PropTypes.string,
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
}
 
export default Input

/* src/components/Input.css */
.input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}

// src/components/Input.stories.jsx
import React from 'react'
import Input from './Input'
 
export default {
  title: 'Components/Input',
  component: Input,
}
 
const Template = (args) => <Input {...args} />
 
export const Default = Template.bind({})
Default.args = {
  placeholder: 'Enter text...',
  value: '',
}

Benefits of Using Storybook

1. Isolated Development: Develop and test components in isolation without worrying about app dependencies.
2. Interactive Documentation: Provides a living documentation for your components, making it easier for other developers to understand and use them.
3. Visual Testing: Allows you to visually test components and catch UI issues early in the development process.

Conclusion

Building a design system with Storybook and React streamlines your UI development process, ensuring consistency and scalability. By documenting your components in Storybook, you create a valuable resource for your development team, making it easier to maintain and expand your application. Start building your design system today to see the benefits in your workflow.

For more detailed information, visit the Storybook documentation.

Go back Home.