Course Introduction

Introduction

Let's understand what this tool is all about.

What is Storybook? Better React UI Component Development

Storybook and Component Driven, Atomic Design in React

Let's learn about the installation process of Storybook.

How to Install Storybook and Add Stories to React Components

Let's learn about the very basics of Storybook stories

Intro to Storybook Component Story Format and args

Let's understand what Storybook decorators are and how to create them.

How to use Storybook Decorators to Style Components

Let's dive into the addons that come with the default Storybook template.

The 9 Best Storybook Addons to Build Better Story Workflows

Let's customize Storybook theme to match our brand!

How to Customize the Storybook React Theme for Your Brand

We have finished the first module! Let's discuss what we learned.

Wrapping up

Storybook - How it works

Now that you've learned the basics, it's time to start working on MealDrop, the main project of this course.

Section overview

We will be looking at the template project that we will use in this course.

Accessing the project

Breaking down our use-case

How to Write an Atomic Component in Storybook

Adding styled components support in Storybook.

How to Add Styled Component Themes to Storybook

Making decorators smarter with the use of globals and parameters to allow for an interactive theme switching experience.

Set Storybook Themes With Decorator Global Values and Parameters

How to Connect Storybook to Figma

How to Compose Components in Storybook

Finalizing the feature and integrating it into the app.

How to Integrate Storybook Components Into a React App

We have finished the second module! Let's discuss what we learned.

Starting the main project

It is time to learn how to deal with components that do fetch requests.

Using a container pattern to deal with complex components.

Fetch Data for Storybook Components With Container Pattern

Using conditional logic to deal with fetch requests.

Add Conditional Logic to Storybook Compontent Data Fetching

How to Mock Storybook Data Fetching Requests With MSW

Conclusion on data fetching strategies in Storybook.

Dealing with fetch requests

Let's learn how to work with page components on Storybook.

Let's add the page templates to Storybook.

Adding PageTemplate and Redux support to Storybook

Let's analyze the HomePage component and add it to Storybook.

How to add Complex Components to Storybook

Let's analyze the restaurant detail page component and add it to Storybook, including deeplinking and React portals support.

How to Add Deeplinking and React Portals to Storybook

How to Mock Storybook App Loading Scenarios With MSW

Adding Pages to Storybook

It is time to learn testing strategies in Storybook.

Let's add the official Storybook ESLint plugin

How to Install the Storybook ESLint plugin

Let's write some interaction tests directly in Storybook!

How to Use React Testing Library and Interactions in Storybook

Let's use the Storybook test runner to automate our tests!

How to Automate Storybook Testing With Test Runner

How to Run Accessibility Testing in Storybook With Addon-a11y

We have finished the fifth module! Let's discuss what we learned.

Storybook and testing

Using Chromatic for automatic Storybook deployment.

Deploy Storybook on Chromatic for Integrated Development

Using Chromatic and Storybook for visual regression testing.

Visual Regression Testing with Storybook and Chromatic

We have finished the sixth module! Let's discuss what we learned.

Deploying our Storybook

Conclusion and extra resources

Final thoughts

Storybook is an open-source tool that helps you develop UI components in isolation. It runs in your codebase, but separately from your application. It's like a sandbox, allowing you to not get distracted by incomplete APIs, flaky data, and other external dependencies. It integrates with frameworks like React, Vue, Svelte, Angular, and many others!

With Storybook, you can ease the development of a design system and share a common language with designers. QA's can get an overview and test functionalities in isolation. Stakeholders can use it for demo purposes. Overall, Storybook helps connect all of these people, greatly improving collaboration!

In this course, we will unleash the full potential of Storybook for React apps. We start from the basics of Storybook and later switch to a real world application, learning how to develop features directly in Storybook, saving lots of development time and at the same time, creating a living documentation of components and features.

You will learn how to break down features into atomic and composite components using [Component Driven Development](https://www.componentdriven.org/)

![Showing a component breakdown process](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_02/lesson_02.03/public/assets/component-breakdown.png)

You will see the power of addons, and how they help improve the development experience and the end quality of components. We will connect design tools, test accessibility, and much more.

![Figma connected to Storybook](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_02/lesson_02.06/public/assets/figspec-view.png)

You will also learn how to mock fetch requests, add Redux, theming and routing support to Storybook, and add full pages to it. You're going to even add entire pages to Storybook, allowing you to simulate all use cases you want in isolation for easy access!

![Full page in Storybook](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_04/lesson_04.04/public/assets/modal-working.gif)

On top of that, you'll be using the latest features of Storybook such as interactions, combining the power of Storybook wrappers for Testing library and Jest that run in the browser to write stories with automated interactions!

![Storybook test runner](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_05/lesson_05.04/public/assets/click-to-debug.gif)

Finally, you'll be setting up Chromatic, a cloud based tool that improves your Storybook experience by bringing you Storybook hosting and visual regression tests, in a way that will help you catch regressions but also improve the collaboration between you and your colleagues while making pull requests.

![Chromatic dashboard](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_06/lesson_06.02/public/assets/first-build.gif)

By the end of this course, you will be able to use Storybook to develop and document components, features, and pages in your work.
You'll also learn how Storybook helps you collaborate with your colleagues, both technical and non-technical (like designers and stakeholders)!

This is a course which will show you how to unleash the full potential of Storybook in the context of React applications.

Storybook for React Apps

Unleash the full potential of Storybook, adding features and pages

Tools to improve designer-developer collaboration

, we created a decorator to add theme support to Storybook. Although it's working well, in order to switch the themes (e.g. from light to dark), we need to make code changes which aren't that great.

Storybook decorators not only have access to the story element, but also to the story context. The 

 is an object that contains a lot of useful information about a story, including globals and parameters. With that information, we can improve the 

 decorator we created, allowing users to change the theme directly in the Storybook interface.

Creating our custom toolbar with addon-toolbars

Storybook addon-essentials includes an addon called addon-toolbars, and that addon allows you to create a new item in Storybook's toolbar that defines global values which can be changed from there, so you have an experience similar to the other addons such as backgrounds and viewport. 

In order to create a toolbar item of our own, we can follow the documentation 

// .storybook/preview.tsx

// ... the rest of the code here

export const globalTypes = {
  theme: {
    name: 'Theme',
    description: 'Global theme for components',
    defaultValue: 'light',
    toolbar: {
      icon: 'circlehollow',
      // Array of plain string values or MenuItem shape (see below)
      items: ['light', 'dark'],
      // Property that specifies if the name of the item will be displayed
      showName: true,
    },
  },
}

Now when checking Storybook, we see that there is a new button in the toolbar:

As we interact with it, nothing really happens. That makes sense, as we didn't wire our decorator to use those global values! Let's do that.

// .storybook/decorators.tsx
import { ThemeProvider } from 'styled-components'
import { DecoratorFn } from '@storybook/react'
import { GlobalStyle } from '../src/styles/GlobalStyle'
import { lightTheme } from '../src/styles/theme'

const withTheme: DecoratorFn = (StoryFn) => (
  <ThemeProvider theme={lightTheme}>
    <GlobalStyle />
    <StoryFn />
  </ThemeProvider>
)

export const globalDecorators = [
  withTheme
]

---
title: Set Storybook Themes With Decorator Global Values and Parameters
slug: switching-themes-with-globals-and-parameters
description: Making decorators smarter with the use of globals and parameters to allow for an interactive theme switching experience.
privateVideoUrl: https://fullstack.wistia.com/medias/n0j0qqb3p4
isPublicLesson: false
---

In the [previous lesson](./decorators-theme-support/), we created a decorator to add theme support to Storybook. Although it's working well, in order to switch the themes (e.g. from light to dark), we need to make code changes which aren't that great.

Storybook decorators not only have access to the story element, but also to the story context. The [context](https://storybook.js.org/docs/react/writing-stories/decorators#context-for-mocking) is an object that contains a lot of useful information about a story, including globals and parameters. With that information, we can improve the `withTheme` decorator we created, allowing users to change the theme directly in the Storybook interface.

### Creating our custom toolbar with addon-toolbars

Storybook addon-essentials includes an addon called addon-toolbars, and that addon allows you to create a new item in Storybook's toolbar that defines global values which can be changed from there, so you have an experience similar to the other addons such as backgrounds and viewport. 

In order to create a toolbar item of our own, we can follow the documentation [here](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#global-types-and-the-toolbar-annotation) and export a `globalTypes` object in `.storybook/preview.tsx`:

```tsx
// .storybook/preview.tsx

// ... the rest of the code here

export const globalTypes = {
  theme: {
    name: 'Theme',
    description: 'Global theme for components',
    defaultValue: 'light',
    toolbar: {
      icon: 'circlehollow',
      // Array of plain string values or MenuItem shape (see below)
      items: ['light', 'dark'],
      // Property that specifies if the name of the item will be displayed
      showName: true,
    },
  },
}
```

Now when checking Storybook, we see that there is a new button in the toolbar:

![](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_02/lesson_02.06/public/assets/toolbar-not-working.gif)

As we interact with it, nothing really happens. That makes sense, as we didn't wire our decorator to use those global values! Let's do that.

### Setting themes via globals

Let's open `.storybook/decorators.tsx` and check our `withTheme` decorator:

Yann Braga

In the previous lesson, we created a decorator to add theme support to Story

Although it works well, in order to switch the themes, like from light to dark,

we actually need to make code changes, which isn't that great.

Storybook decorators not only have access to the story elements, but also to a

When we check the decorator's page in a documentation website for Storybook,

we see that the second argument to a decorator function is the Story context,

In particular, we could use Globals and Perimeter to our advantage.

We see that Globals are essentially global data that is persisted across

And you can use Globals in combination with Add-on Toolbars, which is part of

And that will allow you to have a very interesting experience, such as

when you see the Background's Add-on or the Viewport's Add-on,

you have options to choose in this toolbar, you could achieve the same for your

In the documentation, we see an example that explains you how to do that.

So let's just copy-paste this and see what happens.

We export a new property called Global Types that is an object containing a

We provide a name to it, a description, a default value,

and the toolbar, which is the most important part,

we say that there is an icon, which is a circle hollow.

It contains a list of items, and we want to show the name.

Storybook will pick this up, and it will essentially use that configuration to

If we click on it, we see we now have a light and dark options,

light being the default already selected, which is awesome.

If we select dark, though, nothing happens.

And the reason for that is because we only are defining what the Globals for

but we're not hocking that data up to our decorators.

and now we're going to receive a new attribute called context.

Let's turn this into a more complex function

Now, we create a theme variable, which is going to be used

based on what we're passing in the context, and context contains, once again,

and now in order to access the key that we provided here, it's just going to be

So we call this Globals.theme, and from there, we can decide whether we want to

So let's go here at the top and import the dark theme as well,

and let's create a new variable called StoryTheme,

which is going to be, is the theme equals dark, then we want to render the dark

Otherwise, we want to render the light theme, and then we get this theme and

So when we go back to Storybook, and we now select the theme, we see that

And in fact, because this is a global value, once we go to a different story,

If we switch back to Light, it also is affected here.

And the reason that worked is because whenever you change any global data,

the decorators will re-render, thus the Globals.theme value will change,

and we will be able to re-render the components with a new theme.

However, what if I don't want to necessarily have to click here to set the

but I want to create a new story of my component and hard-code it to a specific

If we go back to the decorators part, we know that the context also has access

Let's suppose this is going to be always in dark theme, so we're going to call

This is the moment where we can define a property called parameters.

And normally the key to parameters, they are used by storebook atoms.

However, we could use this for ourselves as well.

And over here, we can define any key that we want.

So let's just suppose the name of the key is called theme, and the value is

When going to the decorators, instead of just using global.theme,

we're going to first of all check whether context.parameters.theme exists.

And if they don't, we fall back into the global.

This way, our story will always be overruling the context.global,

and we will have the following experience on Storybook.

We now see the default theme element, and now we have the dark theme one.

And it's great because now we can set the themes for all of the stories we want

but we can also hard code specific themes in the stories we want.

I hope you enjoyed, and you can use this knowledge to basically create your own

Let's just say, for instance, you have translatable elements, and instead of

the theme you want a language picker, you're free to do so.

And sometimes, you know, it's even better than installing add-ons for specific