Importing Variants

[00:00:00]
>> So we got a question before, which is, we made a select for the various call out variants, and there was a question of, I use an array of the ones that are in there, but I'm already getting my types for free. Couldn't I get those values for free?

[00:00:15]
And this is a trick that I use not just in design system, e-storybook key things but a trick that I use all throughout my code base. I use it a lot with types you know we're gonna get the types from CVA but I'll show you the general trick.

[00:00:30]
And we can kind of all these fun little extra components you can look at and play with at some various points. Sue, yeah, it was call out variants, the big, yeah, what I could do is write this, I don't have access to this object because it's just passed in directly.

[00:00:49]
But one could if one needed like types, the types I can use, but I don't have a way to like, get my hands on the actual keys, right? And so a trick that I will do is you can just grab this, Right, and you can say, Let's just call it variant.

[00:01:11]
Again, naming stuff is hard. And we could export that wholesale, And then we can just basically instead of typing it in there and having a kind of hard code is not the right word, it's now a value that we're passing in. Same code. But now, we can get our hands on this, so we could say something like, I'm not thinking about naming things, I will do this, but I'm not gonna think about the naming portion of the show.

[00:01:48]
Object keys. You can't use an oncon on something you didn't type directly. So this is now a list of strings, but it is our variations, now various variations, you like that one? So now we could pass that into the select options. Let's say I had something where the type was something like this and this is designed since otherwise like, this is cool, but I can't access this, I couldn't pass this type in.

[00:02:21]
I can't derive a JavaScript object from a type, because that's not the value prop of type script, it's a superset over JavaScript, right, and I can't do magical things like that. So what I will do a lot of times if I both want to use it as a set of values, and then also need as a type, I will handle this in the opposite way.

[00:02:40]
So what I'll do is I'll say, I didn't use that somewhere else, did I? Did I call something else variations, whatever. And what I would do is I'll turn this to an array instead, And Now just like this, it is, I can't read the correct blocks, where's the other one?

[00:03:10]
Goodbye. Problem solved. If I look at it right now it is technically an array of strings. Gross as const now makes it an array of primary information, success, danger, and warning. And so what I'll do then is I'll say type variations is based on that, and so now I can derive my union type from the array.

[00:03:39]
So now I can issue iterate over it as values, right, and do all sorts of stuff with the actual values of the type, but still get it as a type at the same time. I do this all throughout my code base, cuz a lot of times I need both.

[00:03:51]
Right, and so this will give me a union type based on an array so I can do all my JavaScript stuff, and interpolation and stuff along those lines. The reason that I did not do it here for us is because tailwind tries to basically cut out any CSS class that it doesn't detect you using.

[00:04:10]
The way that it detects you whether or not you're using CSS class is it just regexes your entire code base. So if you start getting fancy with string interpolation, it will not find the class. They'll say, they're never using BG primary 200, rip that out of the style sheet, and then you'll wonder why you don't have a ring of danger 500 on a text area or something like that.

[00:04:28]
So being really fancy with metaprogramming and stuff. In the case of tailwind classes, bad news bears, but for lots of other very useful things, I'll both have a type and be able to iterate it over simultaneously.