Unpack the stack with Sybren Willemot & Jonathan Bakebwa

[Music] thank you [Music] [Music] [Music] I always think maybe I should make the intro longer so we can rock out a bit longer but then people probably don't want to wait for like more than 30 seconds at least right it's a good intro I like it another 30 seconds is good yeah exactly so welcome everybody and for everybody watching but also we have two guests today and so this is unpack the stack which is a live stream in which we literally unpack stacks and learn together and go deep and geek out and stuff and so today we have two guests and we're talking about chakra UI and especially the few variants so who wants to introduce themselves first well let's get started so um um I'm a front-end developer from Belgium currently working for uricom and well um I am a core member of the chakra yfu team so that's why I'm here I think yeah and he did an amazing talk Enthusiast Amsterdam that's why I invited you yeah that's how we got talking right um no I I also really have to say that I had a blast at your Amsterdam um that was super cool um yeah I don't know if there is anything else um well I think you know everything about chakra UI so that's why you're gonna talk to us about that stuff right know everything that's that's a big word that's why I brought Jonathan you know exactly it's a nice Bridge talk to us Jonathan I think I think Super knows a good a good a good chunk a good chunk I would say oh he knows most of what's going on but yeah hey hey everyone my name is Jonas Jonathan most people call me Jonas um I'm uh one of the co-maintainers at Chakra UI um I view I opened the first version and currently you're working on V1 and I'm very excited to be here I've been on stream before with team so this is really nice to be back again and I'm excited today we're going to do some awesome stuff yeah I'm actually excited to see because the stream we did previously was a long time ago like years and it was also about chakra UI and I kind of want to see the difference between where we were then and where you are now and so maybe with that in mind cibrin um let's talk a little bit about the basics and stuff and so I think you have prepared something right if not I'll just dive in and ask you a thousand questions well what what have I prepared well let's see if it works let's see if it works that's always good yeah yeah um no but let's let's drag to my other screen that's the thing that's not working yeah and then you have to click share and then I'll put it on the stream yes so um Jonathan while Sebring figures this out tell us about what Checker UI actually is so uh chakra UI is um a is a component library that um I I like to think of as a UI engine as opposed to just like you know components they are components the deliverable is components but it it's an engine that allows you to express your design system and the the language so to speak is the other components and the tokens so chakra UI is fully fully accessible with uh and it's compliant with the Wai area component standard for who for authored UI elements and we also have a very powerful theming engine inside of chakra UI so um if you want to build components that are fully styled you can do that or if you just want to if you also want to unstyle them you can strip out all the styles from Checker UI it's also possible to do so it's very very flexible extremely flexible theming I think Sebring has it on the screen now and so what exactly did you put on the screen serum uh well what I pulled up is uh a starter for track provide you so um what we have is just a little Showcase of what chakra kind of can do um and I really like it because we have like multiple colors Jonathan additives um and we have also the feature of dark dark modes um in there so yeah [Music] um this thing just I would like to pull up the code for this a little bit yeah sure like show what we have because like Jonathan said we have a lot of in here we have components like um our here's my code um we have a bunch of components like um for example here it is um I wanted to show the the bot let's let's start with something very simple right um so we have a button there we go here we go so if you look at this it's just import the C button uh from the Checker UI package um the nice thing that here in this start happened is that we don't need to do that uh as you can see here because we have a Auto Import fault components in here oh cool it's a little bit like what Max does right so it just Auto finds it and you kind of just inject it yeah which is super cool super easy so we can just add all more components in there any button or any component that you know you will just be able to import and run yeah so quick question before we dive into this so there's multiple approaches to like Design Systems and and component libraries right and what I'm seeing here are relatively low level ones like I see an icon button and a button group and a stack and a diff even um so am I right in assuming that this is kind of like the atoms and the molecules of what makes up a bigger system and so you take these small ones put them together and bigger stuff happens so it's not like Tailwind UI that would give you like a whole hero component with five different Renditions of image left image right stuff like that no no in the uh that's absolutely correct what you say I okay we have like components that will allow you to build all that crazy component stuff that you're talking about like the hero the carousel um it's all it's in there it's I will provide it um and you can use them to build that um and so if we look at those components we also have the thing that um the theming of our components it's not really opinionated yes we have a starter styling because of course you got to start somewhere right so we got the theme uh that ships with chakra um to get you started but you can override it and you can style all your components like everything the way you want um so that's super cool um just by extending the theme uh just using the theme API for this um but let's first look at if we want to for example style our button so I don't know um we got this started button uh getting started button here um and you can see we have a property in here the style prop size um so and it has a value LG so to style chakra components you have to use style props um just really easy just a property that is just for styling right um and then the values you give it to well they come from the theme objects and I know for example we have a value large into there for sizes and that one will be translated into I don't know how many pixels um something you can Define yourself later on in your theme I imagine also yeah yeah okay cool but I imagine you're out of the box ones are kind of they probably just work yeah yeah um and and other things which we have are like um let's say uh what I'm looking at here right right now is the right icon you can see this is Dynamic Property so you can also um like put in JavaScript stuff in there okay uh link icon so is that a component itself or how does that work what is external link icon so here we go that was easy enough uh so it is a let's say component yeah um which is just a SVG version if I'm correct of a um I don't know icon uh external link icon oh yeah yes one of those link out ones yeah real quick like this is this one is this one so that's the button we're talking about so can you go back to the code because what I see there is it's like composition API but a bit extra fancy here yeah well not exactly sure maybe Jonathan can pick in here um because this is a typescript file right yeah it's defined component which comes out of view yeah but then what is happening here yeah yeah so this is a it's a it's a it's a so this is a component file uh created using the TSX using typescript uh uh the jsx for those of us who are probably watching and use react a lot you can also use TSX in view in case you think about migrating over yeah and you're right you're right uh Team about this being uh uh typescript and you know this being a component so we're using the composition API as well so you can see the setup function exactly under the defined component property um and uh you can return a render function so this is using both the um the composition API but also the render function API and the the Beautiful the beauty with like render functions if you're familiar with TSX you're using render functions already the video with render functions it allows you to drop down a little lower but if you if you don't want to write your components using render functions you could totally use a template check our uip will still work as well um I just prefer to write like the lower level components as using the render function in case I need like render level control but application Level like more more higher level components uh kind of like the ones you see like the app.view um it's just probably better to write that as a template and you can mix and match them in your you up which is one of the thing my favorite things about Vue um yeah yeah and so this kind of to me looks like this return is actually a function and because it's jsx that return just writes a rendering right because I remember back in the day when we had like options API we had to use the age function to render stuff is this the same but due to the fact that it's TSX this just works yeah it's it's the same thing so it actually will so video is doing some magic so typically um you have whenever you compile a typescript file uh when typescript transpiles it it has to you have to import the the H function which is the which is the random function at the top and um what it does is that it will it will inject it if it if it recognize the TSX file it will inject the H it will also inject the fragment as well oh that's very nice yeah but you don't need to do it here right and uh Vita has also installed the uh vit plugin jsx um okay that was my next question there we go yeah so it's doing the transformation on the Fly and like it it really is actually compile down it will actually eventually compile to uh render function and if you if you if you inspect the browser one time during development and just check the because usually you'll see that where the file is being imported from you can if you look at the file it's actually already transformed from this to render function API oh nice all right sorry for that um external question but I'm learning as I see new things I'm just going to ask so okay and this this external link DSX file this is something you build yourself in this demo so this is not something that comes out of chakra itself right yeah um and the reason why we I built it this way just to also kind of showcase that some of the Primitives that check our UI ship so if you notice there's this little like Factory called chakra at the top which you import exactly yeah so yeah so this this is uh is we called it the chakra Factory so if you if you if Sebring say for example what to you know type you could actually change the tag from like SVG just to kind of break it um and you can you know change it to something else it could be a PF it could be and leave right right it could be um a button oh it wants to do those failure because yeah [Laughter] I don't know why you know my followers my follower is like messing with me oh this is full art yeah [Laughter] yeah before yeah exactly yeah everybody it's so basically the you can you can add any element in front of the chakra and it will it will render that tag right in the in the door okay so you you have chakra actually render tags and if you do it that way obviously it will probably do whatever accessibility if you need it like an image I imagine it it puts an outlet by default or some stuff like that oh so so okay so I think in this case since it's a primitive why why we made a factory is so we can you can style it using style props right so uh as you can you can see for example there's this line height property on this SVG exactly that's interesting for me how does that work yeah so line height is not actually an HTML attribute no it's CSS style Pro so what we're doing is um we actually extract these the style props and that's what generates the styles for all the class names so if you if you open the browser for example maybe it's even could look at this right and just inspect the element yeah thank you for that yeah okay here we go all right so you can see the line height on the fourth line of the the cell exploration right line height one em right so what what what why we created this Factory is so I can still write a div but if I want to like write attributes as like Styles we can still do that right so you just do it in one place and it made it very simple so you can move very fast yeah it's it's almost like the the Tailwind approach but then feels more native somehow yeah it's like a mix of both yeah and so um Stephen do you know how this this class named the chakra and then whatever else random thing that comes behind it how is that created um well that's like generated thanks to um emotion that we are using under the hood okay okay so we have this prefix chakra prefix so you know that's these classes are all yeah linked to chakra uh and then the the other stuff behind there is just from uh emotion if I'm correct okay so these style properties that you use emotion kind of understands those yeah and then so how will you do cascading stuff like this you cannot right it's all inline Styles based okay guys tonight sorry yeah no absolutely it's absolutely absolutely right so if if you wanted to say Target say a child element we actually have a there's a we have a special proc for that as well um yeah so so especially like a fancy thing because I usually get this question a lot about chakra oh there's so many props like how do you do you declare them on the component um well actually they're they're not they're not all props they look like props but they're actually attributes so what we're doing is we we we are we're playing around with the attributes property that's being passed in and so you when you declare a component you can still declare it with its own props and chakra UI will handle the attributes so that's that's what oh that's cool so I could make like a few components that's actually check where UI custom thing I can add my own Props Plus the style tags and all the other stuff exactly exactly nice that's that's essentially what this is this this uh this um external link is um Simon was going to show you how to do the uh the uh the yeah yeah I'm correct that's that's oh yeah there's a little typo there so I think on usually in jsx you don't need to do the colon for dynamic Pro oh yeah exactly because we're in jsx now yeah you have to get used to this man I like it though yeah so we're happy to use it in this way you have to correct me also because I'm also not that used to using it is yeah but I'm sure for you yeah there we go and so now one girly braces combination and then inside there it's just JavaScript now right yeah so now you can write any style object in here so oh and now you would write a style object like how you would do it at react exactly so like yeah if you've got any ideas because I don't know oh so we could for example in here let's let's create another object yeah you can do fill red or something for the path below it yeah so you could say um you could type pass as a key and then uh another object open another object and then give it a feel of red oh so this is how you would oh wow not the ref yeah so you could do red if this could be actually any it could yeah it could be red like the actual CSS red or any red in your theme as well oh yeah exactly yeah yeah yeah yeah yeah I don't know why it's okay so we also you mean like 500 right 500. yeah totally totally and this would work as a string Yep this would what black magic is happening here guys going on for sure yeah yeah chakra is doing a lot of like um a lot of uh um you know interesting things under the hood so what we do is this we could we could go into we could go into this like into the theme it's really interesting so when you when you have a theme object inside of chapter UI uh when you start up your when you when you set up your project what chakra is going to do is going to transform your entire theme into CSS variables so yeah much as you are doing let's say Red Dot 500 that's already been flattened so it would still be an operation of one so we'll we'll just apply that CSS variable to this element so yeah you just put the two dashes in front and it's almost already there yeah exactly that makes sense cool yeah it's a bit like how Tailwind also prepares that stuff to be able to be added yeah yeah there you go yeah that's cool though yeah my old school feeling of how I used to work is very uneasy right now but if I just let that go and look at how easy this is and like useful I had to say when I started doing react and and jsx related things where I I felt like hey why is this so awkward but actually it's not this is just JavaScript like this yeah related to just getting jobs it's actually like more low level basically it's cool yeah I I I had a I think I did also have it I mean it's funny because I was like building this thing but I was like ah I can feel everyone's eyes looking at me like what is this strange this strange thing but like the speed at which I was able to build my applications was like I could not I couldn't fight with that you know it kind of stuff you can't you can't debate it um so it also did make me kind of appreciate the different paradigms for building applications Some people prefer templates right um apologies my my camera yeah your camera very good now so so Some people prefer templates right uh that and that's also fine you can still do the same actually you can actually do the same thing inside a template right um You can still do the same thing in jsx we prefer render functions you can do the you can do the same render function you know API the whole idea is like check rewind doesn't we don't want to get into the way of how you want to build your components exactly but you can still think right so there are some constraints but the constraints are more on the theming side as opposed to the actual how I choose the scene consume them right so if you want to you could even style your whole app you could Define your theme and then and then just use CSS variables the rest of the yeah potentially that could work yeah Sebring can you show me some stuff where well I'm not sure if we just destroyed your demo or not but let's leave that Red in there so it's not just um HTML and CSS that comes out because I see you hovering the colors and suddenly backgrounds change right so yeah how can you how do you define how you kind of how that works for example um well the color change stuff um I have to also say that Jonathan looked into this this part I can I can go over let's let's start with maybe just the color mode like yeah sure that's a good start also it's a statement all right yeah there's a different state here so I kind of tell me how that works and then we can find our way yeah more complex stuff so if you if you can see maybe in here you will also see that there is stuff changing in there so there are a few a few things in there that will change uh and one of the most important things will be here in the dark yeah okay yeah and that and that will like help uh chakra out to yeah to know in which um color mode we are um and and it's cool because if I don't know what's going to change let's say um this the text in here and also have a data team at work yeah I just have a little thing to add here like sorry sorry so so actually so what changes is like like sabrin mentioned like you can see the data theme attribute this only applies to chakra UI components right but okay um at the very top of the application if you could scroll to the top there's this HTML data theme right at the very top so yeah the content of this of the style of the style sheets will not change what we just change is that one variable and that so within the within the CSS it's already been pre-generated there is already JavaScript there's already dark mode and light mode Styles so we're just playing with the CSS Cascade at this point yeah so it's literally just a different CSS selector for the one group or the other group exactly and so it's like like a square bracket open data theme dark square bracket closed and then the rest of the CSS sits in there essentially exactly right and so does this also listen to like native um OS dark or light stuff yeah yeah we you can you can do that using the uh so when you when you create the application maybe it's even could open the main.ts as well uh yeah yeah so when when you create a new Checker UI instance um there is an option to when you extend the theme on the inside the extended theme uh yeah you mean in here right I've seen the theme oh yeah here we go it's in the team folder yeah oh yeah yeah I see it yeah cool exactly yeah so there is there is an option to uh to Define the initial color mode I think it's in the if my memory sounds right it should be in the under Styles maybe if you put a no no these are these are there's an option called config config s it's in here right in the minutes yes I know it might be it should be in the extent theme now yeah it should be an extent theme but I don't see it maybe in the global styles to file above it yeah so so no no it's it's actually using the property when you when you call extend theme there's a you can add an extra property so if you just add a comma here just type config see if it if intelligent intellisense will uh no the typescript is not helping you today yeah yeah this is why we need that we need to publish a documentary yeah you could what about the under Styles if you go to Styles and the sales property and try to get conflict uh it does not like it I'm gonna cheat a little bit I know where it is I will look at the source code Yeah Yeah well yeah if you've written the source code you can find it right yes usually usually it should be that that straightforward yeah but go ahead and and talk a little bit about this extent team function yeah that's cool let's go because because so what we have we Chuck Roi comes with AC with some styling to get you started like I said uh and you have the option to extend uh and what this thing will do is it's a function that will like merge the um es for you um so this overwrites the default like an object extend style thing in JavaScript yeah so it will overwrite stuff that's already in there so um let's say if you want to under colors you have probably a bunch of green Shades and you want to say like I don't know somehow you want to change them to Red in there yeah it will overwrite but also a new um things that you will add here will be added there like for example this velvet color I'm pretty sure it's not in the default theme it will be added okay in there for you and so quick question on this one so let's say I add fell fat but I don't use green at all now I render my app it goes through the build steps it's green then removed from the original styles okay so by default I'll answer this one sorry annoying question time no no it's good it's good I like this I like this so like by default if you use the base like the default like this default theme um chakra will inject the the same Styles as well the same object for for that uh but the good thing is that these are these are usually typically CSS variables it's not compared to tail and what Taylor will do is it will generate CSS for all the properties related exactly exactly yeah chakrai does not do this we only use the keys you define so even if we include it it's a lot less a lot smaller um however if you want to strip down to the bare minimum we can try that and maybe uh you could you could import a function called extend Baseline so that's from this will just we're now going to in the belly of the Beast now exactly not I don't know it's just like a feature that the the chakra is yeah cool yeah I like it so it will be instead of xnc yeah then extend best thing okay so if you so you could guess this has like stripped down everything all the defaults have been removed and it's it's basically like installing a component Library without the Styles now right so you could go ahead and maybe open in the browser now actually your business is literally just these things that you added yeah CSS for the buttons uh it looks it's the only thing it these are these are items I defined I wanted this font size and that's why they are here obviously exactly exactly and so if you look at the HTML tag now there's there's an inline Style on the HTML are those your root CSS variables oh no I think these are coming from uh Arc looks like Arc browser oh it could be the browser that injects yeah probably oh I can see that oh yeah this is art stuff chakra stuff will be like prefixed with oh okay okay just like Arc basically okay there you go browsers are cool with our brains all right so so like talk to us about a few more Basics and after that I actually want to give this a go and you guys should guide me somehow yeah sure so another thing that I wanted to because now we're flying from one thing to another yeah I'm sorry about that that's my fault but that's okay so I wanna skip this and and take a look a little bit into the search code of chakra um so I got it open here um and what what we have we for example we have a bunch of components um probably way too small for this yeah you can just do yeah plus and go yeah that's cool um so as you can see we have a bunch of components um I'm pretty sure we still need to add a few more um but to build those well we are going to use yeah something from the chakra first so the thing is that chakra UI view well it's not the only package in the chakraverse you also have chakra Y which is uh for yeah react it's mostly the same thing but they're a little bit more advanced than us for now um but then we also like tackled other issues let's say okay you can you can already see uh See an issue here that we have chakra Y for the react and chakra live view for View and most of the things um most the ID is the same so the like yeah the idea is the same um and most of the components the logic behind it it's also the same so for example I got a Pinot put open here you know benefits um I got it in here so it's this thing that just where you can put it in um that numbers or whatever so the fact that you actually type something and then it blurs and focuses the next field that's from Chakra JavaScript um well yes and no so here comes like one of the issues we had was um in the beginning when we started um we had now two code bases to like um yeah goat in and like um fix boxing and stuff because when we for example use the pin inputs well the logic behind it is the same as it opinion put in Chakra y react going to call it react but uh just to make it clear um and so when they had an issue or we had an issue it was like very possible that we both had the issue so I had to fix it on two places at once yeah so it was like multiple work etc um also when they came out with a new feature we had to implement it too and the way to run so for the components with the logic and that stuff well um the chakra team came with an ID of building these components framework agnostic so all the logic of these components uh are built with State machines um and this is built into a package called zag.js that's also why I'm showing this documentation yeah exactly this is the sec.js oh yeah here we go here we go so it is um the logic of the UI components that we have it with State machines um so it's machines for all the yeah let's say the logic and all that stuff and it also has all or like a lot of the accessibility um attributes in there like the blurring and that stuff well that all happens in Zach thanks to jack.js um because here it all happens and the nice thing is that we um in the chakra y fuel repo we can just use these components the components from techjs and I'm built on top of them okay so sex.js is basically it's it's part of chakra but you just it's actually external but yeah but do you always use them together or you can choose without um well we have them for the logic of the components are under the houting chakra so they will chip with chakra if you use chakra but you can use Zac js on your own so if you're like for example I don't know just want the component logic um because they're all um headless they're like style there's no styling on zgs components okay so they're just input fields and buttons that have listeners attached somehow yeah yeah uh and what you can do is I'm not right now for example react I don't know speed input um as you can see the you can style them uh thanks to some data bars in there which just um vanilla CSS for example or you can add Tailwind if you really want um for on top of there uh yeah it's a cool thing about Zac JS it's stylus and um it will help you write the logic of components like way faster because you don't have to they are not the components themselves or they somehow are also components plus State and then with chakra you just grab these and basically enrich them to become chakra UI components yeah that's that's that's it that's it so and so is every component in Sac JS matched in jakra UI I don't know exactly if we have them all yes so so yeah I'll just add a little bit of uh you know context yeah so for for the um so with that JS uh they're like Simon mentioned why we built it was there's a lot of like behavioral logic that we repeat you know across multiple Frameworks uh what I just wanted to do is just expose this this state as some you know um I don't use this functions or some some variables some as machines yes as you as state machines all this logic just exposing classes State machines error state or like this kind of stuff right yeah they could be error States they could also be component like interactive interaction States so for example if I have a pin input of say x length how do I know when to focus the next input for example because it's a series of multiple small inputs right so all this stuff we were replicating and duplicating so what Doug just does is that it gives us this they ask the ability to create our own custom components arrange them how we want because all they're like like super mission that that just on its own is headless it's just hooks it's just hooks with stake for multiple for for the components that you're trying to build and then you can Define your own custom components and spread the state onto them you know using the the attribute so uh zap.js will handle that so uh what what we do what we did inside the Checker UI is we looked and we saw okay so we have all these multiple components that we have inside the chakra UI API um how could we create them a state machine so we could share that logic across multiple Frameworks um and so we created for example a few a few like say pin input and some of them extended Beyond just the component scope of Checker UI for example there are some State machines for com for components like pressable right but you could use pressable inside a button you could use pressable inside anything that that requires pressable steps right so the it's a lot more granulite so a lot more lower level but it's also good because now if I want to build my own dialogue I don't have to now create my own you know backdrop and then like do the accessibility stuff it's actually very complicated to do this to build like there I've I've driven the developers in my team to Tears by doing a close loop like you open the pop-up and then you hit tab yeah everybody is upset yeah so how do you close that loop it's oh my God I wish he had this too like then but we didn't we did everything custom like not it was it is typical I think it was all Native JavaScript we didn't even use jQuery or anything oh man I'm old anyways and now the thing and the fact that this actually um works now that's super cool so um this is actually a TS file so I imagine this TS file has mainly the types and the state of this pin input right yeah so what I wanted to show here um what we do here in this DS file in the USB input CS file uh we're building the the um yeah the state of the pin input thanks to um zag Jazz as you can see yeah just we import those okay okay okay and the Machine itself and stuff that's all um framework agnostic the only thing that we need are a few things like a few um a few things like um normalized props and use machine function um to make it work with vue.js this is the little wrapper when I'm looking at line 20 you can call it a composable all you want but it's just a react hook right look at Line 20. This is just react hooks come on what's Happening vgs has become reactive yeah you know what it works well let's not complain yeah no but this is cool so this machine has a state for the change for the complete for the invalid stuff like that but you receive that that's already received so you only just have to say these are the properties that I want and to add to the machine somehow yeah so you can you can add new properties in there like like all these things and if you don't add the on change will it still emit something or do you actually have to do that you're like this it's good so it was it it will still like so the machine will always be true to itself like this is what because we Define this is what will say this is what a pin input should do right okay and these are the events we will emit but you can choose to expose some events to the user right so let's say for example you see the on change here is just an event listener saying emit this change event to the you know parent context to the parent component right so that way um if you're building your if you import the opinion component you can also listen to the change event right so this image is yeah so it's it's it's the same image that the the setup context provides to um to any component in vue.js so if the machine will always do the same thing so this is the exact same machine that the react library is going to use oh that's the same machine that the solid yeah it's exact same across all the Frameworks yeah exactly exactly because you don't have to do the one complete hook unless you you really use it in your component which is the TSX file and so one quick question on these image you're not namespacing these at all so what if you have 15 other components that also send a change image oh so this this image will will just go to the com to the it is going to be emitted by the component that you that that initiates the state machine so in this case for example if you call using input inside your PIN input component because if the way the way it works is you have a pin input then you call use pin input um that will import that that will create the machine and expose the state only within the pin input this specifically okay so it's not bubbling up to more Global levels like like native events would because you initiated in one point and inside that scope that's where it emits yeah this is the same as views this dot emit literally exactly exactly yeah yeah yeah okay cool good I think sibron was saying something uh yeah sorry do it go for it no no it was it was trying to explain that same thing but you already did it so yeah there you go um so what then I wanted to dive into DCP input.tsx file so yeah we're using TSX here too yeah um and and one of the let's let's oh it's big for my for me so um let's see where what we're doing with this um so we're going to import that one machine that we just created um but I don't see exactly why the oh it's on line 24 9 24. yeah oh yeah that's the problem from that same file yeah okay cool yeah and also the um USB input machine uh function there um and then we can use that um in here where is it um it's way too big for me to okay here it is yeah it's always the the moment you zoom in you lose overview yeah and and the coolest the cool thing about this is that we get an API from there um I call it we called it an API um where we can create uh get everything out the uh pin input machine so all all the values States uh that it is in and then we just like um how do you want to say this um just put it inside the template um in the inside the HTML and then with the structure everything in there all the props and then we get the machine working thanks inside here um here um another thing that I have is the PIN inputs provider which is a little bit more like uh um I'm thinking of name provide inject uh yeah like like it's also I think very similar in react right yes so that it will also like um be applied or available for child child all the children will be able to actually inject it yeah so looking at this it's not really for the faint of hearted but then again people tend to use this it's already done so people just use it on the front end somehow and yeah it's much easier right yeah sorry to enter if I wanted to make my own component that's I don't know a pin Pro a pin input with six digits and a number or so whatever something else would I I would do it like this right um I think I think it would be a little bit different so in our case like the reason why we have to make it like this is because other people are going to use our library for different we don't know the use cases like exactly anything should work basically exactly yeah so so we this is kind of like the extreme usage of zag.js um but if you if you want to just build a simple pin input like you can just just put in the machine the whole thing is like literally there and just yeah I would personally grab this machine and get the state from there and just attach something to HTML and it somehow Works more easier like that yeah I like this what did this show um what what you should if you're not losing like taking a wave we we use it in Chakra like really deep dives into it this is the easy easy way to do it um I'm not completely sure this is I think this is pretty cool because like the fact that this works like this with this Sac State machine this this on its own is really cool already yeah so yeah if you want six inputs you just add yeah you add more like I just got it closer to the source that's cool um so time is flying yeah and I think so what should we do should we learn a little bit more about all the basics or you want me to try and code something relatively simple that Jonathan prepared so we can see this stuff in action what do you guys feel like I'm happy with that I don't know I was enjoying the the learning with you like uh it's also I'm learning a lot as I see this I you know what actually sibrin I would like to try like when I click a button and pop it appears and I've seen the demo yeah and I I kind of just want to shall I try and build it absolutely I think that's a cool thing yeah because now you know a little bit about by chakra so let's see exactly so I'm just going to share my entire screen so um well now you see Inception but so this is the final result that and Jonathan you you send this to us this morning or this afternoon for you it was this afternoon for us it was doesn't matter so there's there's a few different buttons primary secondary there's actually this switch here and then when I click this I actually get a state change and I see the pop-up over happen you see there's an X and I can like so when I focus you see when I open this and I focus it's actually correct that's really cool yeah so it goes into the same flow that's very cool and so yeah um we have so this is the base State like this is your main branch that has nothing and here's the final state so how about I do a check out of this the main branch and then we just have a look yeah absolutely let's let's do it let's do it let's do it so what we'll we'll try not to make it as like complicated as how we would end up doing it in Chakra UI um so it's just going to be one component right um but there's there's many there's many different paradigms but today let's just let's just make a nice okay let me just do we have the patch or not nah we need more space no pants okay so I'm just looking at okay so there's pnpm okay cool yeah do you know the um with the pack what is what is it called the package um the knee and I from Anthony I don't think so oh then you don't have to worry about if it's pmpm or yarn or whatever oh really type in yeah go run do it yeah you just type in an eye for like yarn install or pmpm install PM PMP install or enter NR it's like oh that is very cool run def that's yeah all right so it seems like the main brand actually has everything already I might have made the other one the default branch oh yeah it's just like you're on the final result oh yeah yeah hey no worries no worries at all no worries at all there we go yeah I think the final result is the default one oh now here's the one yeah yeah cool yeah so I guess the first thing we can maybe try to do oh you know the color mode [Laughter] one cool thing maybe we could showcase here is that if you if you toggle it to dark mode and then refresh the page um it will it will or it will it will actually reload in you know in the same color mode and it also works for server side rendering as well so um it makes it so that you don't need to like you don't see that flash you know like oh it's dark then it becomes like exactly like that so that's what we need I like this yeah yeah let's let's let's let's build a nice a nice pop-up right so yes um let's go into the up.view of the view file already yeah you don't have to go into details of the extent team or something but just no this actually kind of makes sense right this is you just use chakra essentially you have a create chakra function it's cool and then the option and a few options um for the plugin yeah I imagine there's a few more yeah here yeah yeah you can you can you can you can we we can add more properties there as well in the future so for now we decided to use a function because it's just easier to create the instance and you get better exactly but this is kind of also the way to go with few lately right if you want to use opinion story do it this way as well yeah yeah it's just a lot simpler yeah so let's go our Outlook View and we can start by just deleting everything oh yeah and uh you know let's let's create let's create a new template um again uh oh yeah oh sorry my my templates in dark mode right now yeah correctly cool yeah and um so the first thing we want to do in here is uh let's just okay it works it works yes exactly so let's let's create it let's create a pop of a component right we can do that we can let's go into components let's create a new file let's call it you want to use TSX or do you want to use a yes well why not why not let's fix oh okay so I don't think you need to use the script inside the TSX file Oh no you're right it's just okay yeah so let's import Define component from View and um defined component uh defining component review and we can create columns okay yeah yeah so Define component is the you know it's a function allows us to create a you know a nice component yeah from View and pop over yeah you just create a new component here I imagine it's like this oh no without the Currys oh no you you we can use them it's fine you're doing the right thing I'm gonna go ahead and do that and let's give it a name property and if you want I like to give this a name because you know in the vue.js docs recommend this so if you actually building components name your components be developers and let's do set up let's create a setup function as well in here uh setup and in here we will return a function let's let's return a function and this inner function should return uh let's let's let's return a div at jsx div right so let's return a jsx div in that case we just do this right yeah oh oh yeah so oh okay now in this case we don't need we don't need to do the the quotes so we can just yeah oh yeah I need to get used to this yeah yeah and then we could say like something like hi or yeah yeah and there we go and let's export our component as well our pop over we could do you prefer named exports or do you prefer default exports should we do names I I like name but you know you can you can do this if you try to do name you could just put the export in front on line three in front of const yes so we're exporting the cons okay let's go yeah yeah and then uh in our script let's set the language to typescript uh oh yep it's usually a good idea to have that no problem at all we're all the same kind of feels the same mode yeah exactly I think let's Also let's let's use a setup script a script setup um we forgot to add the setup tag on the script in here on the script no no on the script view there's another attribute on the script tag we call setup oh we just do setup oh sure sure yeah yeah and then we can import from our component the advantage of having this setup um for those who might be wondering is we you don't need to now Define your components again inside the component and then the view just handles it for you all right all the easy stuff it's nice yeah okay so we have it now now let's let's put a pop over inside the uh inside the template let's see if it works let's see if we should see low two highs now yeah we should see two highs there we go we now have two highs all right cool Next Step oh yeah yeah quickly do this for for the folks looking at all what what we're dealing with here here we go yeah we named our component so it shows up over nice okay cool cool let's let's let's let's go to the dot JS docs right so now we're gonna pull in our steak machine from zack.js exactly we're going to yeah let's go to get started and on the left side bar towards the bottom you'll see a pop over lovely lovely and let's go oh yeah yeah this is fun clicking this I do the clicking things we're clicking yeah yeah oh yeah there we go so we can just copy the the names of the packages we want to install which is pop-up yeah these guys and then we can PM PM add uh these guys there we go nice and uh this is how we install node modules with a pnpm all right learning cool cool cool cool all right so you can scroll down a little bit and just straight away how this explain this is explained it's very good yeah shout out shout out to Sage for for working on these and uh there's actually a whole team of people working on this to make sure like the the documentation is very clear so yeah we can we can start by do you want to maybe understand how the Popova component is structured before we will continue or well yeah maybe that's a good so we just have a look at this one then yeah so we could just go up to the drawing you had before oh yeah sure sure this will make sense when you look at that yeah so all components inside inside the ZJ is having Anatomy so the idea of the anatomy is that each each component has specific parts and each part is supposed to behave a specific way um so you have a trigger you have the arrow you have the content the description as well as the title some of these are just like very simple like the title and description it's just adding area attributes so that it announces properly to the screen reader Ah that's good so it says area content that it's that it's like not or that that is readable or something like this exactly exactly but you could you could change you could change whatever you want inside it so it's up to you so swaps can I add any description from any component in there you can add any anything that you would like to to add in there in fact what we wanted to do is um you could see here right the description is just it's just it's just jsx it just add it in as like it's all yeah I think right yeah so let's let's look at the view jsx one The View jsx tab oh yeah exactly here we go so this is what we are going to do and we can literally just copy whatever is everything inside the setup function let's copy the from inside the setup right from inside the setup yeah yeah yeah that would be that that would be that and then we can actually put this in our setup right exactly and yeah and this this should work of course uh you know what we forgot to do we forgot to import oh you know inside the inside the popover the pop-over setup that's okay yeah we can we can we can um I think you might have pasted in the wrong place so we could you see line six we also need to get rid of everything yeah but you need to know this yeah exactly exactly so we can just we can just copy all the whatever line one two three from the examples as well yeah just get all the things I like that they have the teleport stuff in few now that's very cool yeah it certainly makes things a lot easier and we can see we have a duplicate yeah import there and yeah I believe with any luck this should give us the result we want left side of comma operator is unused and has no side effects why do you understand I don't think this should be a bug let's scroll down to the bottom let's see if we're missing something at the bottom oh yeah wait oh yeah and maybe it's a closing tag as yeah this one that one so what are we missing ah another function oh no that's here oh let's see set up okay I think we got the setup one and I think the on line 33 I think that should just be uh yeah just the brace and then the at the very bottom should be that does that fix it no it's not happening okay so this is correct now okay so then we have this setup goes here which should be correct and then this one is this hmm gee this uh I've not been baffled like this before in a long time let's see uh no the rapper oh actually you don't think we'll need the wrapper for this one maybe we can get rid of it um just to kind of keep things simple at the beginning um I thought that fixed it but it doesn't wait maybe just yeah oh that was it [Laughter] all right I think this this should now render it in our com in our happen out right so let's do it go over there and uh try to you know if you click me that should show something whoa boom boom there we go there we go so we have state and likely area rolls and a whole bunch of stuff let's say yep this is what I like guys I really like this stuff look at this pop over one bar yeah and the the one the one is like the ID of the popover so you could if you have multiple you could like give it different IDs right so you see the idea exactly you can put it let's call it team let's call it team uh it should you know it should also you know reflect change so this is the team pop over so you don't have conflicting yeah well it's kind of nice that you can actually now do stuff based on that unique ID that's very cool yeah and does this also set a key in in few in view uh the key yeah which is the kind of key well you have a key tag in few right oh that the key attribute for yeah oh oh okay okay so in this case I think usually that is applied uh on the user side for example if you have multiple yeah it's foreign but as you can see it hasn't have any styling yet no we haven't actually done any of our um fun um chakra yeah we could we we can we can we can start we can actually get started maybe the first thing we could do is make the button look better right so the first thing we'll do is let's just import a button from Chakra UI the fun fact is you will need to eat today oh all right oh yeah that's that's true for jsx might through Classics so yeah let's import C button a big c big c button from you can just replace yeah and we can replace the trigger I think the trigger is maybe the last one to replace yeah um and maybe yeah even even the action button maybe you can also replace this the closer the close button maybe let's use the close button prop right from from Chakra UI um yeah there's a c close button see close button that is cool yes I always worry about making close buttons but this is oh yeah yeah you don't you don't have to worry anymore and we can actually remove the X the X okay the close I imagine has an icon that is accessible yeah I'm sorry it's already there cool I think if you save this you should or at least have a nice looking button on like something that looks interesting okay all right cool yeah let's look at least it's not it's not it's not what we want it to be but it's good enough right right it's a lot closer than it was nice yeah cool so let's let's let's head in over to the theme directory now we're going to do some them um with Checker UI you can do some interesting custom theming how much time do we have by the way because this might take around 30 minutes minus five minutes why don't we do this let's do this let's let's copy the theme for the popover I could describe it for you from the other Branch how does that sound yeah that's cool let's go here go to GitHub right the final result I'll just go into the theme Here I'm just gonna grab it I'm assuming it's here components it's in components in the components directory oh yeah and oh you hit the button yeah you can you can go go to the uh the the go up one directory to the uh components yeah there we go down there ah pop over yeah sure yeah so inside here let's let's copy it then we can explain it right we'll explain it in the in the in the editor okay and let's create a new file in the theme components let's create a new popover.ts and we can paste it here so a few things a few things happening here right so if you look on line three and four uh we have a function that we imported called create multi-style config helpers so this is how chakra UI allows you to style components that have multiple parts so say for example you're building a carousel right you have a carousel container you have a carousel navigation button you have a carousel you know slide right you have multiple Parts exactly so you can Define different theme Styles and if you look at line six now we're consuming the the the the helpers and we're saying we have best styles for the container for the header for the body and the close button cool right yeah so this this is how so this is how you define them you can even define hover States you can create variants if we had time we could go into all that and like see all the the magic in there but you know uh I don't know if I don't think we have enough time right now so now what we're going to do is get this one in to see it look good let's have it okay let's let's let's let's put it in let's put it in there so let's go to the um yeah yeah let's do pop over and inside the if you go to the I believe inside index.ts yeah I might have maybe over over at the bottom sorry the next one under Global styles I might have overdone this like organization um it's a lot but it's cool yeah yeah let's let's go to line line two you can import the pop-over I think there's a way to just export all from one file or something but I don't know I didn't think to do that online line two so now what we're doing is now telling chakra UI hey we have this theme uh put it under the components field so if you scroll down uh there is a field for components ah yeah so you're yeah exactly and so what is this exactly what did I get here so all that is okay cool makes sense exactly so what we're doing is we're telling Checker UI about this new theme so if you go to the uh the Popova file uh popova.tsx we're going to import a hook from Chakra UI called use multi multi multi-style config use multi style config there we go all right and let's create a variable inside our setup function called const styles const styles is equal to use multi style config and that it accepts a key and the key is the name of the component which is popover right so we could do pop over and then the second argument could just be an empty object since we don't have any theming properties coming in from oh yeah and there's nothing to overrule whatever comes from there I mentioned exactly exactly so now we have this Styles computed variable so we have styles for the four different parts that we defined inside our theme so if it becomes computed directly so you don't have to do any complicated stuff with refs or computed fields and stuff yeah no need to no need to just only maybe a few values and you know yeah exactly one more thing we want to import inside Joker UI is our Factory inside from from Chakra is our Factory so what this Factory does is that it allows us to the the chakra sorry I forgot to just just a short underscore chakra the short lowercase chakra yeah so let's look at on line 26 um let's let's do chakra dot div right so send you to chakra.div and let's keep going yeah so chakra Dave and then uh on that same chakra Dave we're gonna do uh the same the 926 let's we're going to create a new style prop double unders let's do underscore underscore CSS CSS and uh in here let's let's create it's a dynamic variable we're going to pass in the styles.value.container the value dot container and if you hit save and go to the browser it should now apply your container styles to the pop-up if you click on that yeah there we go now it's applied so we we had three other styles right so we could apply them to to all the other different parts of the component so this is this is how we build custom components inside chakra UI you've you've basically built the pop-over component for Checker UI we're just doing a this but maybe in a more complicated no not complicated in a way that allows us to organize our components differently right so yeah you can see already you're already going man I don't know guys yeah that's good now yeah I just you just have to get used to it a little and I my old school brain is just telling me why the heck I do I have two underscores and why do I have does it feel like oh yeah I've seen testing JS and all the nightmares of the past are hunting me now but oh dear oh wait maybe oh yeah no you're right you're right that that's that's correct so that's the body so in this case um I don't think we need the the pop-up the close button Styles because we're already using the chat we already have one right yeah yeah there you go so in this case yeah so in this case the reason why we have the double underscore is it's it's it's a lower it's a lower level like you know property this in this case is like for design system engineer to say it provides an API that is high enough for a design system engineer to Define custom Styles but also low enough for them to customize and the parent props can override these Styles so if if you had like say parent props from the pop-over you could up you could spread them onto any one of these chakra dot components and those will still override Your Design system Styles so it was just it's just a nice sweet in between yeah yeah yeah so this is getting used to it somehow yes yeah this this is probably not how most people use it but it just shows you like the power you have like with building you know very complex components with like dynamic themes as well from different you know different places yeah exactly you know what I think if you are let's say um you're providing something for a huge um I think time is flying so I'm just going to stop sharing for a second come back to us yeah here we go um so yeah because I I only have one screen so it's a little strange sometimes not to be able to see everything now but like if you're building a big website right or a big application that has lots of sub applications in different states this is amazing right and I've been looking at like how people build apps especially on the react side of things with like the emotion the CSS and JS and all the stuff and people kind of have to Tool it up themselves and then you get lots of memory leaks and complicated reflows of stuff when something happens and all the Styles need to be recalculated and we've had lots of scary things go on like that and you know what this is a similar thing but it's already built for you it just use the tools and understand it and run and the fact that we did this and it is actually fujs I don't know anymore this feels like a new language to me but it fits yeah it does feel a bit new but like if you can we could also like overly simplify it so it's like just a template as well like you could there's many ways to to do it we just wanted to show you the you know some new things for you guys right how do you see the adoption of this in the ecosystem are there like genius developers like you guys that just go wild with this or do you have very little amount of people doing this like I want to know because I work at a startup and our product is relatively new and we figure we work on messaging we work on onboarding we have enablement and then you kind of figure out what's the best path for someone to go in what is the best path for a developer like me who has never used this but I have some experience what is the best path other than a live stream with the creators obviously I just want to go ahead and say that probably 99 of people would not use or create a pop-up component like this okay using chakra live view okay they would probably just import see pop-up oh pop over from the Checker Wi-Fi you will have it yeah okay yeah because right now we're really dive into how we also do it yeah like if I now wanted to make the team pop over and make a PR to check our UI I would probably do it like this yeah yeah but if you use it like in your website you probably just use the c pop over and then add these yeah exactly same way that you added The Styling in the theme um and just add it all it's all the style props on there like you did with the button for example yeah the close button uh in there probably that's what 99 of the people will do uh I feel like I'm kind of being groomed into doing some PRS yeah you basically did that I think today but super is totally spot on that yeah most people just import the component it's already built for you is today we just we just wanted to show like the inner stuff right because we want exactly we were told this was going to be a meeting of Never Back yes well yeah we were like like the thing is I've been enabled now to to at least be inspired empowered maybe not so much because there's just a lot going on I kind of have to figure out how feet goes into this and how that's like the like for example when you look at like quickly share my screen um here when we look at stuff like this like you have to kind of connect the state and there's just a bunch of stuff that is like extra boilerplate that you have to get used to but when you read it back it makes sense all right so sorry sorry I might have interrupted you uh with regards to like the theme I think I kind of overdid it that's how I like to do my stuff I like all my theme stuff is here right but like maybe most people don't do that so you can organize your theme how you want really it's just a JavaScript object at the end of the day exactly where you want to happen you know yeah yeah awesome guys I want to thank you so much we are a bit over time but if it is this interesting I'll just I could go on for an hour now and build a website or something but that's let's not go there because our poor viewers um thank you so much you guys were really excited and I like that and you came really prepared and this makes me very happy what I'm gonna do is show the stream to my boss and say hey shouldn't we make a bunch of chakra UI components and then match them to uniform components and build cool stuff there you go there you go that would be cool exactly I I'm excited to dive in a bit more and learn because at uniform we build our own design system um and because we also have other people making integration so they they can use it and it's basically like the C button you know and the C call out it's similar and it's interesting to to have a look at how deep this goes and what you can do with it first is how other people build it let's say it uniform and so I'm I like to find patterns and I'm not sure if I can find them yet but it's it's really interesting at least all right guys yeah you go go thank you thank you thank you very much for having us yeah thank you for joining us and so uh Jonathan where can people find you uh online oh yeah I'm I'm usually on Twitter um uh codebender 828 um yeah that's oh there we go I mean dark mode again yeah I'm just I'm just putting in code like somehow I typed code beast but it's code Bender wait yeah it is uh code code Bender yeah here we go and um it's even yours I know I'm gonna write it in here oh it's actually also in your name yeah the privilege of changing my uh yeah exactly so that's how you do it that's how I have it too um thanks guys I really enjoyed this and I'm gonna be diving deeper into this um soon uh cheers take care awesome thank you okay bye-bye