Introduction

[00:00:00]
>> My name is Steve, I am the head of FrontEnd Engineering at Tempero, and we are gonna talk about building design systems in StoryBook. And Design Systems is like a little bit of a spectrum, right? I used to work at a company called Twilio, where, that's a big company, we had a full design systems team with designers and engineers dedicated to that and contributions from all over the organization, right?

[00:00:27]
And now we're at a much smaller startup and k one of the jokes we kid around or in stand up and our team was that whether or not you set out to build a design system. At one point or another, you almost end up with one, right? It starts out with like, what if we have a few shared components that we reuse, which is a reasonably good idea, right?

[00:00:49]
Then all of a sudden, like you get like, this other like repo over here or something along those lines, and you end up with more and more of a design system. So then you end up with the situation of like, a design system that you intentionally decided to build, or one that organically kind of just happened.

[00:01:06]
And there's a lot of reasons why you would build a design system, right? And a lot of ink has been spilled. Every, like, book that I've ever bought on a design system is predominantly about how do you pitch it to your boss to get them to let you build a design system.

[00:01:21]
And not a lot about actually how you go about thinking about it and building one, because there's also just having the shared components. I think the value prop is there. But then also, when we sit down and actually think about it, there's all a bunch of other pieces that benefit us in a wide variety of ways, right?

[00:01:41]
Like, StoryBook is a great way to showcase your components. So like for instance, we have one for our website and then one for our application, where we can have every given piece that we can kind of see and review with different kind of content. And manipulate outside the context of our application.

[00:01:57]
But the other really cool thing is with StoryBook you can hook up effectively component testing, accessibility testing, visual regression testing. A lot of stuff that in the larger context of your app and all of its API calls and the bootstrapping of everything could be relatively hard to do.

[00:02:14]
The ability to break stuff into all of the component pieces and be able to view them be able to kind of tweak all the different settings to see and every permutation makes it way easier for development. But what I'm gonna try to argue with you today is also it makes it way easier to maintain reliability of your application, right?

[00:02:32]
The ability to see each piece, to be able to put it in different contexts. You're able to run those visual regression tests and component tests and even we can like use playwriting to drive the browser to actually interact with the components to make sure they behave the way that they want.

[00:02:45]
Because all little demo apps are very simple, right? But at a certain point of time, your code base grows to such a point that you always get worried that touching one piece of code breaks something over on the other end, right? And so the same strategies that we use for thinking about building up those shared components, actually also add in a layer of maintainability and reliability to our application.

[00:03:07]
And make sure that we have consistency across everything. So when we need to do a refactor, when we need to change some of the amount of styling, it becomes a lot easier to do. So we're gonna build out a few components today in the context of a StoryBook.

[00:03:21]
We are gonna use React, but honestly, like, you don't even need to know React to be able to follow along. It's predominantly the styling and structure and the integration of all the tooling and stuff along those lines. We're gonna start out with just some regular CSS and CSS modules, later on, we will just use Tailwind.

[00:03:40]
Mostly so we can focus on the key parts of StoryBook and the design system without handwriting a whole bunch of CSS. So I'll make some references to like tailwind specific stuff, but in a lot of cases, if you have some other styling system that is easily as applicable as anything we're doing in tailwind.

[00:03:58]
It's just a little bit easier for us to focus on the main event here as well. So we do have a repository, we also have this course website where everything that I talked about at various points is also kind of written out with all the code samples. So you're like, hey, he switched to a different file, I really want to know what he typed there.

[00:04:17]
Like, you can also pretty much find out play by play of everything I'm gonna talk about. And even some of the jokes that I'm going to tell are all in there. I wrote up the notes might as well share them with you. So that's the here at the course website.

[00:04:30]
And then on that front page, we have a repository that has just some boilerplate. We will kind of just look at a like tabula rasa StoryBook implementation one point, and I'm kind of jumping to using this repo and just kind of adding some stuff. It's just basic got some of the setup so we don't have to work through all of that.

[00:04:50]
For a lot of this, I kind of ported over some concepts from our design system in kind of a smaller fashion here as well. So some of the stuff that we will implement are found here as well in this Figma file. But everything we do, we can follow along with the code as well.

[00:05:11]
So you guys kinda see that integration. So that's the high-level setup that we have here. And like I said, most of these things are things you can add, whether it's a brand new application, or in our case, like we started out with, like you build, like a lot of times like we would all love to Greenfield a design system.

[00:05:30]
I don't think I've ever been in a situation where that has happened. A lot of times you start building the app, you find the need for reusability, right? And then you kind of have to back yourself into having to design system and begin to refactor and stuff along those lines.

[00:05:44]
So kind of definitely pay respect to that more common situation at the same time as we jump through everything.