Knobs

[00:00:00]
>> Let's talk about knobs, knobs are super cool. So I wanna be able to test the disabled state of our components. So the first thing we need to do is, install one more add-on. It's called storybook/addon-knobs, so, npm install storybook. Let me bring this up here so you all can see it.

[00:00:24]
Npm install @storybook/addon-knobs, okay. And, what do we need to do? Come on, Brent, I know you know the answer, what do we have to do when we install an add-on?
>> Add it to main.
>> Absolutely. Into the add-on array storybook/addon-knobs. I'm gonna harp on that, cuz I've forgotten that plenty of times, and then sat there wondering what the heck was going on.

[00:00:53]
So we add it to our array. This one's super easy, all we have to do now, we have included our add-on, but we need to tell Storybook we wanna use it. So, inside of our preview JS, we need to register that as a decorator. So addDecorator(withKnobs), which we have to import.

[00:01:12]
So, you install your add-on, you add it to the add-ons array, and then inside of preview JS you import it, and add as a decorator. So, import withKnobs from @storybook/addon-knobs. Well, prettier. Okay. So, you'll notice, if I just go refresh this, it's not gonna show up, you, actually every time you do an add-on, need to stop and restart, it's kind of a pain the butt.

[00:01:47]
But hopefully that doesn't take too long. And what this is going to do. Well, actually, this isn't working because I didn't actually do anything with it. So that might also be part of the problem. We actually need to tell the Knob what are we gonna be changing, what do you want this to be used for.

[00:02:04]
So back in buttons, let's import it. So let's import withKnobs, and I'm also gonna import boolean. So I wanna actually toggle the disabled state of my buttons and see if those are working, and those are gonna be true or false value. So, from storybook/addon-knobs. Once you've imported that, we can actually set that as a property.

[00:02:26]
So on my primary button, let's set a disabled attribute, right? This is gonna be boolean, that's why we imported boolean. And, what label do we want this to have? The first argument here is our label, so, this can be whatever you want. We're gonna toggle Disabled, and we'll initialize it to false, so that's the initial value.

[00:02:49]
This one actually did show up without having to restart, that's exciting, we're making progress. So, you should see down here our Knobs tab. And if I click Disabled, you can see our button is now disabled, it has all of our disabled states, okay? You can use Knobs for a bunch of different things.

[00:03:07]
Generally you wanna be explicit, and just create stories for different states. Like if you have a warning button, you wouldn't create a Knob that you can select different states, actually create stories for these things, it's a lot more explicit.
>> Do you sometimes make a kitchen sink style example?

[00:03:22]
Where you just turn all the Knobs on and let people fiddle however they want, or has that not turned out well?
>> I haven't, but when I was speaking with the Storybook, one of the core members, he suggested actually being very conservative with using Knobs. And actually just to be more explicit with your stories, so.

[00:03:39]
Having all these different examples, it's tedious, but he actually suggested that was better than having Knobs. Yeah, good question.