## What is Storybook?

When building out your application, do you question if your components are as efficient and reusable as possible? Have you ever created a component, changed the structure for new requirements, and then were shocked at the result in your UI?

[Storybook](https://storybook.js.org/) is your answer! Storybook is an open-source tool made for viewing and interacting with your user interface components separate from your application. Storybook helps to make UI development faster and more efficient. It provides a user interface for browsing components, changing use states, and testing features.

Storybook isn’t the only tool available to isolate your UI components during development. Similar in function, [Lookbook](https://lookbook.build/guide) is an open-source user interface developing tool but typically incorporated in Ruby on Rails applications. In this blog, we’ll focus on Storybook, using examples from a RedwoodJS application.

## Why Use Storybook?

Here are three key reasons you should use Storybook in your applications.

### Reusable Components

Storybook allows you to automatically visualize changes in component styles, state, and functionality. Developers can easily interact with the component variations, navigating through the changes. A button component, for example, can have stories for different colors, sizes, styles, and text.

Storybook's component-driven development approach encourages component reusability, making it easier to share and consume UI components across your project. This scalability factor saves development time and effort.

### Efficient Code

By building out your component use cases with Storybook, you’re simultaneously documenting your components. This is similar to how tests serve as living documentation. In your Storybook file for all the variations your component can have, to view it you’ll need to setup that instance. This documentation helps you and your team be more efficient and knowledgable about the codebase.

With each component having its own corresponding Storybook file, you’ll be more adept to tracking bugs in your code base. If one aspect of your application isn’t working, your Storybook can help give clues as to which part of your code is not functioning correctly. Bugs can be caught early on in the development process. Each story can have its own properties that can be tested independently from the others.

### Developers and Designers

Storybook is made for developers *and* designers. When Storybook files are created, you can open a separate local browser to view all created and documented component files.

Here developers can check aspects of the components in the build process. Developers can maintain and check all components pieces are styled correctly and have the necessary functionality.

This separate local viewing browser is also great for designers. UI/UX designers are able to access the components in the build process and review components. If there are any changes that need to be made, it happens at a faster rate with including designers while the components are built out.

## Using Storybook in RedwoodJS

One great part of starting your next project in RedwoodJS is that, Storybook is already installed! Storybook is a view of the user interface, and therefore is front-end focused.

When creating a new component, RedwoodJS has a simple command to set up all the files you’ll need. Let’s try generating a `Button` component.

```markdown
yarn rw g component Button
```

This command will create three files:

```markdown
~/redwood-app$ yarn rw g component Button
 ✔ Generating cell files...
   ✔ Writing `./web/src/components/Button/Button.stories.tsx`...
   ✔ Writing `./web/src/components/Button/Button.test.tsx`...
   ✔ Writing `./web/src/components/Button/Button.tsx`...
```

Building out this `Button` component can be as simple or complex as needed. To add complexity, you can incorporate parameters so that your new `Button` component’s styles can change based on the parameters you pass in.

This is where Storybook lends a helping hand. After your component is setup, in your Storybook file you can create instances where the state or styling changes depending on those parameters we establish. This helps your whole team see the variations of the rendered component, work out any bugs that may result from the codebase, and test the individual component.

Now let’s give it a try! We will focus on creating a `Button` component that will change styling elements based on two parameters: `label` and `type`. The `label` parameter will be the text we want to display, and the `type` parameter will be the style change.

In this example, we are using TailwindCSS to style our component. If you’d like more information on TailwindCSS, we have a great blog that goes into more [detail here](https://www.codingzeal.com/post/tailwind-is-a-popular-library-here-is-how-to-add-it-to-redwoodjs).

```tsx
// File: Button.tsx

interface Props {
 label?: string
 type?: 'rounded' | 'square'
}

const Button = ({ label, type = 'rounded' }: Props) => {
 return (
   <div>
     <button
       className={`h-10 w-32
       ${type === 'rounded' &&
         'bg-blue-600 border text-xl text-white rounded-full'
       }
       ${type === 'square' &&
         'bg-green-700 border text-2xl text-white rounded-sm'
       }`}
     >
       {label}
     </button>
   </div>
 )
}

export { Button }
```

Now that we have our `Button` component set up, we want to see instances of the button change. In our `Button` stories file, we’ll set up the variables where we establish what the parameters, label and type will be. We will have a default variable, a rounded button variable, and a square button variable:

```tsx
// File: Button.stories.tsx

import type { ComponentMeta } from '@storybook/react'

import { Button } from './Button'

export default {
 title: 'Components/Button',
 component: Button,
} as ComponentMeta<typeof Button>

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

export const Rounded = Template.bind({})
Rounded.args = {
 type: 'rounded',
 label: 'Submit',
}

export const Square = Template.bind({})
Square.args = {
 type: 'square',
 label: 'Update',
}
```

Now we just need to start up Storybook to see the instances we just created. Running Storybook in RedwoodJS requires one command:

```markdown
yarn rw storybook
```

This command will open a new browser displaying all Storybook components within your RedwoodJS application. All storybook components will be available in the navigation sidebar.

Let’s check out what our buttons look like:

‍

We can now confirm that `Button` updates when our parameters are filled. We can also incorporate `Button` throughout the application and know exactly how it should look.

## Installing Storybook

If you’re considering Storybook, but aren’t working in RedwoodJS, you can still integrate it in your application. Storybook is compatible with React, Vue, Angular, and more. [Checkout more information here](https://storybook.js.org/docs/react/get-started/install) to learn about install Storybook in different environments.

```markdown
# Install Storybook
$ npx storybook@latest init

# Run Storybook
$ npm run storybook
```

## So Yeah, Storybook Really is the Answer

I hope your understanding of Storybook has improved and you see the appeal of integrating it in your next project. Better yet, start your next project with RedwoodJS and have Storybook out of the box. Easy peasy. Storybook will speed up your UI development process and set up your component for reusable, well-tested code all in an isolated space from the application.

Storybook is helpful not only for individual projects, but for an entire team working through numerous application’s UI components. Developers and designers alike can view and interact with the UI elements, and choose when to interact with code. I’m seeing wins on all sides! Give it a try and [let us know](https://www.codingzeal.com/contact) how you like it. Happy developing!

‍

Photo by Patrick Tomasso on Unsplash