Create your own design system! with Storybook React and TypeScript | Storybook 6 Crash Course

Have you ever though about creating your own design system or component library? This is the video for you. You mostly really need two things. First, a development environment which allows you create and design components in isolation. Second, the proper tooling to bundle and package your code!

In this video we are going to utilize Storybook JS to develop React JS component libraries or design systems. We're also going to use TSDX as our typescript tooling, it will help us get started quickly with zero configuration!

00:00 - Intro
02:18 - Installation and setup
05:27 - Creating a new component
08:00 - Creating our first story
13:47 - Templates for stories
16:17 - Controls
16:57 - Intro to addons
17:56 - Actions
19:44 - Docs page
22:43 - Overview of the rest of essential addons
24:42 - Installing a new addon (accesibility addon)
28:40 - Using MDX for Docs
37:27 - The idea behind storybook
38:58 - TSDX overview
39:28 - Building our code as a package to publish to npm
42:36 - Building a deployable static version of our storybook docs
44:30 - Wrap up summary
45:44 - Outro