Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.

Storybook helps you document components for reuse and automatically visually test your components to prevent bugs. Extend Storybook with an ecosystem of addons that help you do things like fine-tune responsive layouts or verify accessibility.

Storybook integrates with most popular JavaScript UI frameworks and (experimentally) supports server-rendered component frameworks such as Ruby on Rails.

storybook

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Beginner’s Guide to Storybook 7 with React

Discover Storybook 7's revolutionary approach to UI design and development in collaborative environments. Discover why it's the top choice for teams crafting high-quality user interfaces.

Get Started with Storybook 7 — Course Introduction

> **NOTE: There is a bug in the sandbox command that may result in Storybook@8 (beta) to be installed.**
>
>To bypass this issue, use this command instead: `npx storybook@latest sandbox --branch=main`
>
>This version of the command uses the main branch, which is currently the latest v7. My hope is that the versioned sandbox command is fixed by the time v8 goes out. Once resolved, the command in the video is preferred.

Launch into Storybook with a one-command setup using npx storybook sandbox. Instantly create a Storybook environment tailored to your preferred framework and language, perfect for immersive learning and exploration.

Create a Storybook Sandbox (Starter project)

Navigate your component library with ease using Storybook's intuitive sidebar. Understand its hierarchical organization of categories, folders, and components. And filter components quickly with global search.

Navigate Storybook Sidebar

The Storybook Addons Toolbar provides one-click access to essential visual debugging tools. Discover how Essential Addons — zoom, background color, measure, outline, and viewport — help you debug and refine components.

Manipulate the Storybook Canvas with the Addon Toolbar

Uncover the power of Storybook Controls for interactively stress-testing component interfaces. Deepen your understanding of component behavior with real-time, interactive updates, enabling a thorough exploration of component capabilities.

Explore Component Interfaces with Storybook Controls

Gain unparalleled insight into component behavior with the Storybook Actions Addon. Learn to log every click, hover, and focus event, providing a clear window into real-time component responses.

Observe Component Behavior with Actions Addon

Replay fixed behavior with precision using the Storybook Interactions Addon. Discover how it provides a detailed playback of testing library events, allowing you to thoroughly understand and analyze how your components react to predetermined scenarios.

Analyze How Components Respond to Fixed Events with the Interactions Addon

Easily capture discrete UI states using Component Story Format (CSF). Discover this straightforward approach to writing stories that are portable, composable, and easily testable. Revolutionizing your UI development workflow.

Understand Component Story Format (CSF)

Create dynamic and engaging component playgrounds in Storybook with Args and Controls. Learn how these powerful tools create an engaging and interactive documentation experience.

Create Engaging Component Playgrounds with Args and Controls

Seamlessly capture and analyze user interactions with the Actions Addon. Learn to log events — like click, hover, focus, and more — to elevate manual testing and debugging.

Capture Interactions with Actions Addon

Bring your UI narrative to life with Storybook Play functions. Use Testing Library to create stories from user events — perfectly simulating real-world usage.

Manipulate Story State with Play Functions and Testing Library Events

Take control of story presentation with Storybook Parameters. Expertly adjust the layout to ensure ideal rendering for viewers.

Specify Layout with Storybook Parameters

Storybook boasts a vibrant ecosystem of ready-made addons. Learn how to install and register the Accessibility Addon and promote UI inclusivity.

Extend Storybook's Capabilities with Addons

Effortlessly generate interactive and detailed documentation for your components with the `autodocs` tag. Learn how to turn comments and prop definitions into rich, readable docs.

Generate Documentation Effortlessly with Autodocs

Ensure your Storybook environment mirrors your production setup. Learn to add global stylesheets and fonts, creating a consistent look and feel across your project and component library.

Configure Storybook with Global Stylesheets and Fonts

Storybook seamlessly integrates with popular frameworks like Next.js, Nuxt, Angular, SvelteKit, and more. Discover how to incorporate Storybook into your existing project, enhancing your UI development process.

Integrate Storybook into Your Development Environment

Chromatic offers free hosting for Storybook component libraries and design systems. Share your components with others on the premiere platform for Visual Testing and Review.

Host Storybook For Free with Chromatic

Storybook has thorough documentation and an incredible Discord community to help you. Learn how to efficiently find solutions and tips, ensuring you always have the support you need.

- [Documentation](https://storybook.js.org/docs)
- [Showcase](https://storybook.js.org/showcase)
- [Integrations](https://storybook.js.org/integrations/)
- [Github Discussions](https://github.com/storybookjs/storybook/discussions)
- [Discord](https://discord.com/invite/storybook)

Leverage Storybook Documentation and Community Support — course conclusion

In this course, Michael Chan will teach you how to integrate Storybook 6.3 with Next.js 11 so that you can flawlessly build UIs. 

Integrate Storybook in a Next.js Application

Master React Testing Library: Render components, enhance UI querying, optimize testing flow, handle events, & eliminate 'not wrapped in act' warnings.

An Introduction to the React Testing Library

Learn React Server components and Server Actions as you build a Twitter clone from scratch using a Supabase backend.

Build a Twitter Clone with the Next.js App Router and Supabase

A Beginner’s Guide to Storybook 7 with React

https://app.egghead.io/api/v1/lessons/storybook-get-started-with-storybook-7-course-introduction/subtitles

[00:00] Hey. Welcome to this crash course on Storybook 7. Today, we're going to learn how to use Storybook to build, test, and share UI. This is a super awesome project. I've loved working with it over the past couple years to document component libraries and design systems. If you follow along through the entire
[00:19] course, you will have built a story book, learned all of the requisite parts to build a story book of your own, and actually hosted a project on Chromatic. I'm Chantastic and I'll be teaching this course. I've been teaching React for over 10 years on YouTube, Egghead, and talks across the
[00:39] globe. I've had a podcast called React Podcast where I talked with some of the best and greatest React developers of all time. This is the course that I wish that I had 7 years ago when I was starting Storybook to learn all of the concepts before kind of diving in and beating my head against the wall. Now, I wanna make sure that this is the right course for you. So when
[00:59] I say beginner, I expect that you have a strong understanding of JavaScript that will be a prerequisite for this course. A working knowledge of HTML and CSS, but absolutely no experience with Storybook. You don't have to know anything about Storybook coming into this. The course itself is designed in 2 phases. The first
[01:19] half of the course is gonna show you the UI of Storybook and where those UI elements end up in code. In the second half, we will take everything that we learned and reimplemented the features from the sample stories that we got by default all by hand. So we're gonna rebuild everything ourselves. So anything
[01:39] that you see, you will be able to build by yourself by the end of the course. And that's it. I think that's everything you need to know. Let's get started. I am thrilled that you're taking this course. I'm so excited that you're gonna be able to use Storybook to build more robust, comprehensive, user focused UIs. I can't wait to see what you build with
[01:58] it. Let's dive in.

https://app.egghead.io/api/v1/lessons/storybook-get-started-with-storybook-7-course-introduction/transcript

https://app.egghead.io/api/v1/lessons/storybook-create-a-storybook-sandbox-starter-project/subtitles

[00:00] To start, we wanna create a sandbox for ourselves. Now, sandboxes are typically used for error reproduction, but they're also the fastest way to initialize a project that already has a UI framework and builder set up. So let's copy this command and paste it in a terminal. We will make one change. Now typically, we want to get the latest and greatest
[00:19] version, but because this course is based on Storybook 7, I wanna make sure that you are looking at the same code that I'm looking at. So we're going to npx storybook at 7 sandbox. We can scroll through all of the available sandboxes. I'm going to use React, Vite, and JavaScript for this tutorial. Well, you could
[00:39] follow along in TypeScript and use a different framework. This is React specific. For the new project directory, I'll use my storybook and hit enter. Now we just need to follow the commands. We'll cd into the my storybook project directory. Run yarn install. This
[00:59] may take a minute. Okay. Once that's done, we run yarn storybook to kick off a storybook server. Start storybook automatically, but you can also visit this URL that's printed right in the console every time you kick off the storybook server. And here we see the whole storybook environment that was set up for us with all of
[01:19] these sample stories that we can kinda poke around and learn from without having to jump around in the docs right away. Now, where can we find these sample stories? That's a great question. Let's open our project in an editor. I'll use Versus Code which I have open right over here. Now in this storybook, we can look in the source directory, in the
[01:39] stories directory, and find everything that storybook created for us by default. This includes a button component, button CSS, that config doc that you saw right at the start, and a few other components that we'll explore soon. For right now, let's just make one change to the button component, find the primary story, this named export
[01:59] here, and change the text to fun times with storybook. Now back over in our storybook, we navigate to the primary story, we'll see our updated button. And that's it. With a few simple steps, you now have a storybook sandbox using React.

https://app.egghead.io/api/v1/lessons/storybook-create-a-storybook-sandbox-starter-project/transcript

https://app.egghead.io/api/v1/lessons/storybook-navigate-storybook-sidebar/subtitles

[00:00] To do anything in Storybook, you need to understand the Storybook sidebar. It is the navigation center of Storybook. This is where you select the component that you want to see represented in the canvas. Let's expand everything with this disclosure button that opens and closes all the stories, and talk icons. We have docs, both
[00:19] written docs and generated component docs. Components, which are the components in your system. Stories, individual states of component props or interactions, and categories. Any logical grouping in your system, this could be atomic design with
[00:39] atomic components and pages, etcetera. Now let's look at how they map over to the file system. Docs like this are going to be MDX files or MD files. In this MDX example, we're importing a bunch of components and then just writing prose like we would on a standard JSX or HTML
[00:59] page. Docs can also be auto generated for components. So in this button, we have docs right here at the top, and that's generated by this component story using the auto docs tag. So if I turn this off, that page goes away, which brings us to components. Components in the
[01:19] sidebar correlate to stories files in the file system. Typically, a stories file will share the name of the component with the previous suffix of stories. Next, we have categories. Categories are interesting because they're actually dynamically created from the title field of a story
[01:39] using this slash delimiter. We can move this component to the root level simply by removing that prefix, or we can put it into a another category called components simply by adding it with a slash. On the topic of titles, we can actually nest even further if we want with folders.
[02:00] This moves the story deeper into this components category with the folder Adams. We can take this as far as we want, but it's really up to you. Now where a component is provided, this title field is actually optional. And when we opt out of it, Storybook will auto title these based
[02:20] on the file system, which is my preference. So now we have a stories category to mirror the stories directory. Now last but not least are the individual stories inside of Storybook. These stories map to the named exports inside of any given
[02:39] module. So button has the stories primary, secondary, and large and small. Header stories has logged in and logged out. These named exports get formatted to title case for legibility in the sidebar. Now you should have a strong grasp of
[02:59] the storybook sidebar with its docs, components, categories, and stories.

https://app.egghead.io/api/v1/lessons/storybook-navigate-storybook-sidebar/transcript

https://app.egghead.io/api/v1/lessons/storybook-manipulate-the-storybook-canvas-with-the-addon-toolbar/subtitles

[00:00] The Storybook add on toolbar provides one click access to a number of essential component debugging tools. Let's open the button primary story to see how it works. First, ensure that it's enabled by clicking the shortcut cog and toggling on Show Toolbar if it's off. When it
[00:20] is enabled you'll see this handy toolbar above your component in the canvas. Let's cover them from left to right. We have a refresh to remount the component in the document. Zoom buttons to zoom in or out to see those finer details, a background control to test the versatility of your component on
[00:39] light and dark backgrounds, a grid component that underlays a fixed grid. I don't find these personally useful but it's there if you need it. Something that I do use all the time is this view ports add on. With view ports, we can see how our component responds in various situations, even forcing some unflattering ones to make
[00:59] sure that it doesn't break. The measure tool is everything that you would come to expect from the Chrome Dev Tools measure tool. But it has the benefit of working on a number of components so we can scan over the individual pieces of any component to see what layout's being applied. This works really nicely with the outline tool which
[01:19] shows you any invisible space that a component may be taking up in the layout. Sort of like essential add ons and the add ons toolbar make it easy for developers and non developers alike to quickly inspect and debug robust user interfaces.

https://app.egghead.io/api/v1/lessons/storybook-manipulate-the-storybook-canvas-with-the-addon-toolbar/transcript

https://app.egghead.io/api/v1/lessons/storybook-explore-component-interfaces-with-storybook-controls/subtitles

[00:00] In Storybook, we can interactively explore and stress test components with controls. Controls turns every story into a component playground. To use controls, click the shortcut cog and make sure that show add ons is enabled. Then just make sure that controls is focused in the add ons panel. Storybook provides controls for every component
[00:19] arg. So we have a primary arg which can be boolean true or false. A label arg which accepts a string. Background color, which takes a color. We can use this cool color picker for that. And size, which is innumerable represented by this radio button. Storybook automatically generates controls
[00:39] for any component that uses the c s f three object syntax as you see here. ARGs are defined on a story and applied it to the component that's defined in component meta which we'll learn about later on. Unlike just rendering a component with the props applied, this arc system
[00:59] involves storybook allowing it to know what types of controls it should use for these interfaces. With controls, more teammates can get involved in the component driven development process, helping do a QA, stress test, and communicate about designs together.

https://app.egghead.io/api/v1/lessons/storybook-explore-component-interfaces-with-storybook-controls/transcript

https://app.egghead.io/api/v1/lessons/storybook-observe-component-behavior-with-actions-addon/subtitles

[00:00] We've all added console dot log statements to validate our component interfaces. With Storybook actions, that's a thing of the past. To see these actions, make sure that your add ons panel is enabled, then click on the actions tab. In these sample stories, you can just click this button and everything will get logged. Now this doesn't just work for on
[00:20] click common events. Jump to header and you'll see it work with custom events as well logging on log out for this logged in story and on log in for this logged out story as well as on create account. So what's making all of this work? It's a file inside of the hidden dot
[00:39] storybook directory under the name preview. Preview is a module that controls all of these stories in storybook. In here, we have configuration to look for any on prefixed event using a regex and log out the event that happened. If we disable this high level observer and click on our
[00:59] buttons again, we'll see that they no longer log anything. Now this is a fairly advanced setup. I'll show you a way to do this closer to the component, but I wanna show you how to disable this in case you don't wanna see some on prefixed events. In general, this is a great way to prevent extraneous logging statements that
[01:18] somehow always find their way into production code.

https://app.egghead.io/api/v1/lessons/storybook-observe-component-behavior-with-actions-addon/transcript

https://app.egghead.io/api/v1/lessons/storybook-analyze-how-components-respond-to-fixed-events-with-the-interactions-addon/subtitles

[00:00] The Storybook interactions add on can reliably replay user events atop your components, putting them into states that props alone couldn't. Let's jump to the page logged out story. Make sure that we see the add ons panel by clicking on the show add ons panel in the settings cog
[00:20] and click the interactions pane. Here we have no interactions, just the base story for this entire page. When we click on logged in, we see a totally different story. We see 4 interactions that were played on top of this component. If we jump back to the beginning using
[00:40] the debugger, we see that it starts in the same state as the logged out component with the login and sign up options. We can then play individual steps interacting with the document to generate changes. You may have even noticed that not all of these are events, but some of them are just expectations.
[01:00] Let's open an editor to peep this code. Find the page stories where you'll find the logged out and logged in stories respectively. The logged out story for this page renders without any additional ARGs or interactions. However, the logged in story includes an asynchronous play function. This
[01:20] function takes a canvas element and sets it up using testing library, finding the login button with a testing library query. Our first interaction is the expectation that this login button is in the document, followed by clicking that button and expecting that it is no longer in the document. We then query for a logged out button
[01:40] and assert that it is in the document. Here we use Testing Library to create a queryable canvas. Once we have our elements, we can make assertions and interact with the document using Testing Library. So here we just assert that the login button is in the document. Next, we click that
[02:00] button, putting it into a logged in state and assert that the login button is no longer there. Finally, querying for the logged out button and ensuring that it too is in the document now. Plate functions can include very complex sequences of events, making
[02:19] them perfect for testing simple atomic components like text inputs and forms or validating user flows like login. They make it possible to create discrete component states even for components that don't have prop interfaces.

https://app.egghead.io/api/v1/lessons/storybook-analyze-how-components-respond-to-fixed-events-with-the-interactions-addon/transcript

https://app.egghead.io/api/v1/lessons/storybook-understand-component-story-format-csf/subtitles

[00:00] Now that we've covered the bulk of Storybooks UI features and how they intersect with code, let's learn how to define stories of our own. We do this using a file format called component story format or c s f for short. Let's be bold and delete all of our existing stories and start from
[00:19] scratch. And while we're in here, let's change this directory from stories to components to be a little bit more real world. Create a new file titled button.stories.js. Import the button that we want to write stories for. Close our sidebar
[00:39] for more space. Import button from we use a relative path here. Button.jsx. Next, we need to export a default with our component meta. The simplest version where we've imported a component is simply to define that component field using
[00:59] our component button. And this is technically it. We have a valid storybook component even though there's nothing showing up in the sidebar over here. We just need to add stories. In CSF, we define stories by exporting named exports. So I'll create a story called My Story and we want to use the object
[01:19] syntax here. When I save this we'll see it appear in the sidebar. We're getting this automatic category here based on the containing folder components. And when we click into our component, we see our first story. It is looking a little bit meager though. There's a button
[01:39] here, but there's no text. Remember, Storybook uses args to provide UI controls in Storybook. So on this Storybook object, we wanna add an args property with the label button. Notice that we're not using a templating syntax. We're just defining the args that make up this unique story.
[01:59] Storybook automatically applies these args to this button component using a behind the scenes template, giving us a number of benefits inside of Storybook while remaining as terse as possible.

https://app.egghead.io/api/v1/lessons/storybook-understand-component-story-format-csf/transcript

https://app.egghead.io/api/v1/lessons/storybook-create-engaging-component-playgrounds-with-args-and-controls/subtitles

[00:00] When we define stories with CSF object syntax, we get controls for free. Remember just go into our settings cog and enable show add ons anytime you have a story selected. From there, we just click on the controls tab to see all of the interactive controls we have for this button. This happens because we provided our button
[00:20] component via component meta to Storybook and it knows how to map the args of our story as props to that button for all of these stories. With storybook involved we get all of these controls for free. So let's create another instance of this story. We'll make a Luke Skywalker
[00:40] button. The moment that he finds out that Darth Vader is his father. Sorry, spoilers. Now, once we have an expression of this component that we like, we can actually create a new story for it. We simply export a new constant, the name will become the name of the story, and we provide
[01:00] the args that we want. So label is gonna be no, primary true, background color red, and size large. Save. And now we have a dedicated I am your father story with this unique configuration of args. Now, anytime
[01:19] we wanna reset a story there's a handy little refresh button here which will take us back to the default state of that story.

https://app.egghead.io/api/v1/lessons/storybook-create-engaging-component-playgrounds-with-args-and-controls/transcript

https://app.egghead.io/api/v1/lessons/storybook-capture-interactions-with-actions-addon/subtitles

[00:00] We all do our fair share of console dot log debugging. We're just to make sure that the interface works, we'll log some kind of data, fiddle with our components, and check to make sure that something logged. This is great until you accidentally or inadvertently commit these to your code base, but they're not terribly
[00:19] inclusive of the rest of your team because you have to open them in the Chrome Dev Tools. Let's use storybook actions to persist some spies on top of these components. In component meta, add an arg types option. This takes an object where we'll define on click as a property of interest, defining an object
[00:39] for when that action happens logging some type of message. So we'll use on click fired. Now as I click this button we see these actions logged to the actions panel in Storybook and they don't require opening the dev tools. And because they're defined on stories instead of our code, our
[00:59] codebase is nicely insulated from this demo code. Let's add actions to our header component. We don't have a stories file yet so let's add that. Header.stories.js. We have to do three things to make this work. First we need to import our header from our relative path
[01:19] header component. Export default component meta. Copilot's given us a hand here and the event that we wanna check is actually on login. Now we have a valid component, but we need to add stories. Export a new story, we'll call this on logged out is our default state
[01:39] and use a default object with no args. With our arg types set up we should see on login fired every time we click this button, which we do. Now what happens if we hit the sign up button? Well, we see this on create account event. We didn't set anything up for that here
[01:58] specifically on our component, but by default Storybook has a configuration that captures any on prefixed events. This exists in the dot storybook/preview module. Here you'll find actions with a regex type that looks for any on prefixed property interfaces
[02:18] and logs those as events. If we want to turn this off we can comment it out or delete it, refresh and we will see that that event no longer logs. Well our component level action does log. With that in mind, we can explicitly handle this by observing the on create arc.
[02:38] On create account fired. On login fired.

https://app.egghead.io/api/v1/lessons/storybook-capture-interactions-with-actions-addon/transcript

https://app.egghead.io/api/v1/lessons/storybook-manipulate-story-state-with-play-functions-and-testing-library-events/subtitles

[00:00] Let's build stories for the page component that utilize user events. Start by creating a new component story file. And this page dot stories dot js. Start by importing the page component, then export default, and supply that page component
[00:20] as the component in component meta. And finally, write a story. Export const. We'll call this story logged out because that's the default state of our page component. Save and refresh and we should see this in the tree. Here we go. We can interact with this page component by clicking the buttons. When we
[00:39] click log in, we we get this logged in state. We can log out again, etcetera. But when we open the add ons panel, we see that there aren't any controls for manipulating this state. So anytime we navigate away and come back, we'll see this logged out state. Now if you've been testing UI as long as I have,
[00:59] you know that getting your page into a state to verify it or test it is a recipe for bugs. Fortunately, Storybook has a way to simulate user events. So let's say that we want to create a logged in story. We don't have props, but we can use user events by providing a play function. It's a lot of code, so I'm gonna
[01:19] paste it in and we'll talk about it. Play functions give us a way to interact with the stories that we render. They all start with an async function, they take context from Storybook, and inside of the body we can use testing library functions like within, get by role, and user event click to set up our
[01:39] story. Storybook makes these all available through the at storybook test package. Now everything's set up to use a play function to create a story from a login button press. Let's save it and check it out. Visit the logged in story and here we are in our logged in state. In the add ons panel, we'll
[01:59] see one interaction which is our user event click. We can use the step through controls to go back to the beginning where we have not interacted with components and play through each event. Storybook test also includes an expect function, which we can use to make assertions about the new state of the DOM. Here, I'm looking for a resulting
[02:20] log out button and ensuring that that is inside the document. Hit save and we see this inside of our interactions panel. Storybook Play functions make it really easy to test simple interactions like this or complex user workflows. It's an incredible way to bring your UI narratives to life and protect real world user
[02:39] experiences.

https://app.egghead.io/api/v1/lessons/storybook-manipulate-story-state-with-play-functions-and-testing-library-events/transcript

https://app.egghead.io/api/v1/lessons/storybook-specify-layout-with-storybook-parameters/subtitles

[00:00] Storybook uses parameters to configure the environment around a story. Layouts use a common parameter named layout. Simply define a parameters object with a layout property and the layout we'd like to use. Here, I'll change from the default to full screen. Full screen as a layout makes a lot
[00:20] of sense for pages like this where you wanna see the whole page and no additional padding. Storybook's default is padded which we saw before. Let's change that back to full screen and jump over to button. In addition to full screen and padded, there's a third option called centered. Now this
[00:40] time I'm gonna apply this just to one story so you can see how these compose. We'll add our parameters object to the story with the property layout centered. This centered layout looks great for atomic components. But because I applied this layout just to
[01:00] a single story, any other stories are not going to have that layout. Now you may want to do this intentionally, but if you want all stories inside of a component to share the same layout, simply move those parameters up into the component meta. This ensures that all of these stories inherit this default
[01:19] value. This is just one of the ways that you can use parameters inside of Storybook, but all the patterns shown here will apply to most add ons in Storybook config that you encounter.

https://app.egghead.io/api/v1/lessons/storybook-specify-layout-with-storybook-parameters/transcript

https://app.egghead.io/api/v1/lessons/storybook-extend-storybook-s-capabilities-with-addons/subtitles

[00:00] Storybook and all of its default features are just the beginning. On the Storybook website, you'll find tons of integrations built by the community and Storybook team. Most popular by a landslide is the accessibility add on and for good reason. It's awesome. Let's install it so I can show you how to extend
[00:19] Storybook. First things first, we need to kill our Storybook server and add the package to our package JSON. This command is using npm so I wanna adapt it to use yarn. Yarn add dev. Once it's installed open the dot storybook mainjs
[00:40] module. This module holds all of the config for our storybook. This add ons array registers all of the add ons that we're using here and we can add new add ons of our own. So let's register the at storybook add on Ali add on. Save that and restart our dev
[01:00] server. With that, let's see what we got. Click the shortcut cog and open the show add ons panel. Refresh if you don't see any changes and see that we now have an accessibility add on. With just one line of config, we actually get a lot for free. So let's see what's going on here. This
[01:20] add on has 3 tabs of its own showing identified issues. So inline text spacing must be adjusted with custom styles. This one is passing along with these other 2, but we do have one violation. Elements must meet minimum color contrast, and this one doesn't. If we want, we can focus these results showing where the offending
[01:40] element is. This becomes really handy for multi element components or pages, saving you a lot of time digging around to find the element that's problematic. The beauty of having these inside of Storybook is that anyone on your team can contribute to ensuring that your components are inclusive and accessible to all users without
[02:00] having to maintain a specific dev tools environment of their own.

https://app.egghead.io/api/v1/lessons/storybook-extend-storybook-s-capabilities-with-addons/transcript

https://app.egghead.io/api/v1/lessons/storybook-generate-documentation-effortlessly-with-autodocs/subtitles

[00:00] Documenting components is no one's favorite task, so allow me to show you how Storybook lets us do it in one line of configuration code. Open the button stories that we made, locate the component meta, and add a new property called tags. This option takes an array. We want to include the value
[00:20] auto docs. Hit save and immediately we'll see this new docs page. This is just bewildering even after I've done it a 1000 times. We have a title, a description, a small component playground that includes copy pastable sample code, a table of all of the component
[00:40] interface details. And this table is interactive so as we set values, we see those respond in real time. Additionally, we can see all of these story states that we've included in our CSF file, each with their individual copy and pastable code snippets. This right
[00:59] here is the power of Storybook that with one line, you can generate all of this documentation. It's wild.

https://app.egghead.io/api/v1/lessons/storybook-generate-documentation-effortlessly-with-autodocs/transcript

https://app.egghead.io/api/v1/lessons/storybook-configure-storybook-with-global-stylesheets-and-fonts/subtitles

[00:00] Most apps component libraries and design systems will have some type of global CSS even if it's just a reset like this. To add that reset to Storybook, open the Storybook preview module where we can simply import this. Import source assets
[00:20] reset dot CSS. The import syntax that you use here is dependent on your module bundler. In this case, I'm using Vite, but webpack is also supported. We can ensure that this worked by adding something, egregious. Background color blue violet? It's ugly
[00:40] but at least we know that our reset is getting loaded. Okay. Let's talk about fonts. Oftentimes if we load a font from a CDM like a Google Fonts, we get this HTML. So how can we add that into our storybook? Back to storybook, locate the storybook preview
[01:00] module and add a preview dash head dot HTML. In this file, we can insert any HTML tags that we want into our document. Let's save that and restart our Storybook dev server. Now in any of our
[01:20] CSS files we can use that font. Font family, enter. Now I know that these components have this defined in the CSS. This will vary depending on your components. However, I'm gonna change this font to enter so we can see the change.

https://app.egghead.io/api/v1/lessons/storybook-configure-storybook-with-global-stylesheets-and-fonts/transcript

https://app.egghead.io/api/v1/lessons/storybook-integrate-storybook-into-your-development-environment/subtitles

[00:00] Now let's learn how to get storybook installed into a project of your own. Here I have a Next JS app that I just set up. We can add storybook by opening a new terminal and running the command npx storybook at latest in it. Because we use latest, the storybook in it script will verify that we want to
[00:19] install the latest version, which we do. Storybook then detects that we're using a next app and configures all of the correct packages. In addition to that, we can optionally install the ES lint rules, adding them to the ES lint rules inside of our Next JS app. And just like that, everything is installed. We can run yarn
[00:39] storybook ourselves, but it gets run by default after running this init command. I still have the other storybook running, so I'm gonna hit yes saying port 6,007 is totally okay with me. Then simple as that we can just go to local host port 6,007 this time. And here we are, our storybook. Now let me show you a couple things real quick before we move
[00:59] on. This project was initialized with typescript. So all of the modules inside of this storybook are typescript. This includes all the stories as well. So if we open up the buttons stories, we'll see that all of these have typescript notations, which is very very cool. That means that if you're a typescript user, you'll
[01:19] be able to see examples for everything that we covered utilizing typescript. Now that's not all. There's an incredible blog post by my coworker Kyle Gatch that describes all of the configuration that you get for free from this Next integration. Help with routing, image optimization, absolute imports, styling,
[01:39] all kinds of things just right out of the box with next steps. And it's not just next steps, there are a ton of modern frameworks that Storybook offers built in support for.

https://app.egghead.io/api/v1/lessons/storybook-integrate-storybook-into-your-development-environment/transcript

https://app.egghead.io/api/v1/lessons/storybook-host-storybook-for-free-with-chromatic/subtitles

[00:00] Chromatic is a visual testing and review tool that scans every possible UI state across browsers to catch visual and functional bugs. Today, we're just gonna use it to host our storybook. Let's sign in. We can use GitHub, Bitbucket, GitLab or an email address. The benefit of using your git provider, like I'll do
[00:20] here, is that you'll have access to all of your projects. Here, I'll go to Chantastic. To host my storybook, I first need to put it on GitHub. So let's open up our terminal. I'll use hub to create a new repo using the project that I'm in. It's called this testing chromatic. Push it to Chantastic and public is fine. That was successfully pushed to GitHub, which means that we should
[00:39] be able to find it in Chromatic. Let's hit add a project, choose from GitHub. On this account, I should be able to see it. I don't, so I can hit refresh the list in case it hasn't been updated yet. And in a worst case scenario, I can just input the name manually. With our project connected, we can now install the Chromatic package. I'm using yarn, specifically
[01:00] 3 or later. So I'll copy this yarn version, run it in my project, and Chromatic has been added. Next, we need to build and publish our story book to Chromatic. We do that by running this command. However, instead of npx, I'll use yarn run for this. We can then add a chromatic script, if we wanna make this easier next time.
[01:19] But I generally recommend making this a private variable inside of a CI pipeline, so I'm gonna hit no for that. One nice thing is that this CLI will spit this out, so you can easily add it to your package JSON and privatize that key. Now let's see what happened in the UI. We published 3 components with 8 stories and it only took 30 seconds.
[01:39] We're just here for the hosting right now. However, you can run through this tutorial to learn how the visual regression testing works. But we can just go to our project with this link at the bottom, find instructions for how to add this to our CI pipeline in the future, and our app build. One thing that I think is fun to point out here is that our logged in page
[01:59] has both visual tests and interaction tests. So the visual snapshot that it automatically takes is showing that logged in state that we created through react testing library. That's pretty cool. Let's go to manage to get a URL for this. On the collaborate page we can find all of the URL's relevant to this project, which includes branched URL's
[02:19] to our storybook. We're gonna paste this using the main branch and see our main deploy.

https://app.egghead.io/api/v1/lessons/storybook-host-storybook-for-free-with-chromatic/transcript

https://app.egghead.io/api/v1/lessons/storybook-leverage-storybook-documentation-and-community-support-course-conclusion/subtitles

[00:00] Hey. Congratulations. You have officially made it to the end of this course and with that, know pretty much everything that you need to know to get started with Storybook 7. However, there are gonna be moments where you have questions about features that we didn't cover in this course or maybe integrations or libraries that we don't have videos
[00:20] for yet. In that case, I wanna make sure that you know how to get help and where to get the best help you can possibly find. First, let's start with the storybook docs. Visit storybook.js.org and click on Docs. Once here, you'll find everything you need to continue your learning in Storybook with versioned documentation,
[00:40] the APIs that we covered, and some APIs that we didn't cover. Surrounding docs you may see the showcase button which shows you what other teams and companies are using Storybook for, and gives you an opportunity to look at how they're building different components. To the right, you'll find all of our integrations. This includes
[01:00] popular add ons as well as recipes for popular libraries. Now if you'd like to take it further, you can sign up for the newsletter or blog or you can join our discord server by visiting the footer on any page and clicking the discord icon. Here you can join our community of over 20,000
[01:20] members all with an incredible amount of experience in Storybook and their relative frameworks. Finally, if you have technical questions, you can find us on GitHub. The Storybook repository has a discussions page with a lively bunch of questions and answers from the Storybook team and contributors.
[01:40] And finally, if you'd like to find me, you can find me at chan.dev, and all of my socials are linked in the bottom. Okay. So that's it. That's the end of this course. Thank you so much for following all the way through to the end. I'm really excited to see what you build with Storybook 7. Keep building great UIs. I'll see you in the next one.
[02:00] Bye.

https://app.egghead.io/api/v1/lessons/storybook-leverage-storybook-documentation-and-community-support-course-conclusion/transcript

A Beginner’s Guide to Storybook 7 with React

Michael Chan

Free Community Resource

You might also like these resources:

Integrate Storybook in a Next.js Application

An Introduction to the React Testing Library

Build a Twitter Clone with the Next.js App Router and Supabase

Free Community Resource

Course Content

You might also like these resources:

Integrate Storybook in a Next.js Application

An Introduction to the React Testing Library

Build a Twitter Clone with the Next.js App Router and Supabase