Adding Controls

[00:00:00]
>> So we have a problem, it's not really a problem, it's an opportunity, right? Did this team building and it was like, we don't call it a blindfold, we call it an opportunity fold. It's gonna live rent free in my head. Which is, I got my disruptive button, a secondary button, a primary button, I don't have a disabled button, right, and there are some ways that I can handle this.

[00:00:28]
I could theoretically, I could override, I could put like disabled in here. TypeScript is gonna get angry with you. Right, it's like, then you got to omit it from the one you inherited. This is not a type of course on I don't wanna have that conversation right now.

[00:00:43]
But I would love to have a toggle here, I'd love to be able to say like, hey, I want to toggle this thing enabled or disabled. Can you make an argument? We should make our own story for it. Sure, but like, again, buttons in particular, I might have one disabled button to make sure that like, I don't need to test native HTML, right?

[00:01:05]
I just wanna be able to toggle it at some point. So our problem right now is that, this was able to figure out these controls based on the props, but it doesn't go into the JXX types and figure out every single button property. So how do we deal with that?

[00:01:22]
So, it tried to acquiesce its own controls, we can actually have a little bit of a say in this as well, which is we have ARGs and then we have another one called ARG types. Thank you IntelliSense. And so ARG types lets you then, say like you can add extra detail to any of the types that it came up with or you can actually define additional controls that you wanna have here as well.

[00:01:45]
So we're gonna add one called disabled, we're going to say that it is a Boolean control. I spelled control wrong, that's why it didn't render. There we go. And so, we have this set Boolean, and if we hit that, then we get the toggle. You might be, your initial thought, if you're like me, is, why do I got to click Set Boolean and then set the Boolean to true or false?

[00:02:19]
That's annoying. So he's two options. When you think that that is annoying, you can just give it a default argument. A false and anyone that had false as an argument, it will go ahead and now by default it is a toggle set to false. And so now, the reason why Storybook defaults that, or at least my belief of the reason why storybook defaults that, is sometimes undefined is its own.

[00:02:49]
[LAUGH] Like, you don't want to assume false or falsy based on undefined, sometimes undefined means something different than false. So that gives you the ability to have undefined true or false. So in a lot of cases, but if I know I want it to be false or true, so now all of my stories have this disabled, so I can see the disabled version, the destructive button, the disabled version of the secondary button.

[00:03:13]
We can see that the cursor has a fun little not allowed, we can set the disabled here as well, right? And so, if you need to add additional controls, again, if you have it, if you're using TypeScript and React or View or the big frameworks, then it will try to acquiesce these as best as possible.

[00:03:32]
And if you pass it in as an ARG with any framework, it'll lag, if you're passing a string, it'll assume that it's a string. So we just felt like the tooling is not the same. So I do have to define almost all of my archetypes, React I don't.

[00:03:45]
It all kinda depends, and we'll see more ways to tweak these things as we go along as well. So, other things we can do is we can add a little bit of extra nuance here, right? Like this set of radio buttons, it's fine. It's good. But you can imagine like, what happens if we end up with a component that takes a union of 42 different types, right?

[00:04:11]
That could get out of hand, even if there are more buttons, right? And so, we can also kind of take existing ones here, and then also kind of like adds some extra nuanced as to what they should be as well. So let's go take a look at that.

[00:04:29]
So we can go ahead and say something like, we'll say that variant is a control, why can't I type that? Will say that it's a select, and now it becomes a drop down instead, right? And there are other nuances that we'll explore as we go along in here.

[00:04:57]
The other interesting part is that right now it is saying that that little star means that it is a required prop. I'm not exactly sure that that's true, it's probably true in the way that I wrote the story or the type. But I don't think that it's necessarily true because we default to, let's keep the defaults the primary theoretically, say variant is primary, and we'll make this an optional one.

[00:05:27]
And then we get some kind of implicit documentation