Creating the Callout Component Story

[00:00:00]
>> And so now we can go ahead and say callout.stories.tsx, and then we'll aim for type Meta and story from react from the callout file and then we'll say const Meta. I'll say title is try not to cheat too much. Callout and we'll say the component is that call out component.

[00:00:34]
That's enough to get us started. We'll say that that satisfies that type, cool and then we'll export default that Meta. And then we will say the export type story is a story object from that type of a callout. And that's basically adding intellisense to that component store format, right?

[00:01:02]
And so now, yeah, so we can say, what's interesting is you notice if I didn't make the variant a default and so I'm pretty sure, it's not yelling at me too much, but we've got title primary. Let's go put that back in. So if I go back to my, look, there's a callout.

[00:01:25]
And because it's component slash callout, it's in that heading, you can argue that button input is a lower level. You could choose to call it like molecules versus whatever, right? Your base components on up. If you look at like when we looked at fluid and some of these other ones, you can see that there were like different ways to organize that.

[00:01:45]
That's a very personal or team decision to make, cool. So, there's some little things that we can do in here. So for instance, I'm thinking, ClassName is font-semibold, And I don't know. That seems good, those corners too roundy? I think those corners are too roundy. I'm both the designer and the implementers.

[00:02:21]
I get to decide if I don't like them. Cool. So we've got the primary in there, you could argue that should be a Flexbox. Then tailwind also has this class called space y and space x which is just everything thing but the last one a margin bottom or margin right.

[00:02:42]
So if you don't wanna go the full Flexbox route this will work. Let's go with it's eight, that should be about 32 pixels, that might be a bit much we'll say four. It's only I could look at my own design and figure this out. Let's go take a look at that.

[00:03:01]
Okay, like we're ready for the children in this case which we could put in the story as well. I'm gonna make that one of the defaults cuz I don't wanna put that in every story. Children can we get some free lormet. Yes. Cool. And then I'm gonna show you what makes me a 10x developer.

[00:03:29]
Are you ready? Multicursor, that's the only thing makes me 10x developer Danger. Why did I choose all these variants? I was trying to make some kinda point warning. And then what was success and I got success information. No, it didn't. How many did I have? There's only five cool.

[00:04:07]
>> Default.
>> I had a default one for bass one. I was like, what am I doing with my life? And I removed it from the design cuz if five is too much six was not no one learned an extra thing by making a six to one in this case.

[00:04:18]
All right, so we've got that in place and now it really becomes a game of making the various stories, I'm gonna hope that a certain amount of VS Code magic is gonna help me here. Got a little carried away there. Danger. GitHub Copilot not great for writing code for you really great for looking at the code you just wrote and figuring out what you're gonna do next.

[00:04:51]
So I don't trust the code of the generates. I do trust that if you've watched me type things I'm doing something repetitive is mostly figured out what I'm gonna do next. Cool. So there we have them. What we didn't add is any kinda support for dark mode, right?

[00:05:06]
And so that becomes a very easy game as well, one could watch me get real crazy with multicursors in order to do this. So we got the dark bg. What was it supposed to be? It was supposed to be 800 on the background dark Border or border was what?

[00:05:38]
900. 900? That seems a bit much. Who's the designer on this thing? It's me. 900. I think that my next workshop should be secrets of multicursor editing. And then we've got text is probably 50, cool. What did I hear, too much talking there not enough paying attention. Whereas I make a boo boo.

[00:06:14]
Extra. Cool and so we've got all those in place. And so now if I go to my storybook, I can light theme, I can dark theme. I've got kinda these initial ones kinda in place. I didn't do the thing where I have two panes open but again, seeing them change as you go to implement them is pretty great as well cuz that, yeah, hot model, especially staring at one component.

[00:06:41]
Do you need a larger page is like especially like with all the accoutrements of like, there's actually fetch the current user and all those things. It's like a really great workflow and experience here as well. Awesome. So we've got that. This variant being a string, don't care for that.

[00:07:00]
So let's go fix that real quick in our stories and let's say that we have an archetype and that variant is a select can make it a radio button if you want it Control is select and then options. Yeah. Cool. So, that's kinda like the initial kinda pulling it all together.

[00:07:38]
It seems like a lot of build up, but you start to get into the rhythm of this.