Code at the Speed of Design in Chakra UI Vue

Hi, everybody. My name is Jonathan Bekewa. I am the creator and one of the maintainers of Chakra UI view. And I'm also a UI engineer and engineering manager at RCT.AI. During day, that's what I do. I am also finally a computer science major at Beijing Institute of Technology. And I am excited to be here today at vue.js London, talking to us about coding at the speed of design with Chakra UI view. I'm going to start by introducing Chakra UI as a component library. Chakra UI is a component library with a focus on accessibility. And what that means is that all components in the Chakra UI library have been built from the ground up with WAI-ARIA spec compliance for authored components. We've also built in the ability to extend the theme of the Chakra UI components. And this becomes so much easier inside of V1. And the way that we've made it more convenient is that you can now override the initial rendered styles for components that are natively inside Chakra UI. And we've also added more features that allow you to define custom variants, custom sizes, and even create your own custom components and theme them using Chakra UI. And what this allows for is that you have a lot more concise code and you have a bit more speed when it comes to implementing UIs. So we see this as a step towards bridging the gap between design and code, especially within the browser context. So for V1, we did a full typescript rewrite. And what we did was that we re-implemented the theming api. And I want to talk about the theming api because that's going to be the focus of this talk. And we also were able to implement some composables. And so what we did was that when we were writing the components for V1 was that we split a lot of the logic out into composables and the component only had to deal with the styles for that component. So this allows you to be able to consume some of the hooks that are commonly used. So that means you don't need to import another third party library for hooks that we are exposing. The other thing that we've added inside of V1 is a factory api. So this factory api provides some component primitives that you can style directly. And you can also, since it's a function, you can also use it to, you can also provide it a component that's not initially styled with Chakra UI. And this component will be able to, you can now, the return value will now be the same component with the same props, everything that will be the same, with the differences, you can now add some style props to it and it will work natively. So with the new theming api, you can also define custom components. We've also provided a new api that with the use style config. And what this allows you to do is to define styles within your theme and you can then consume those values when you create your own custom components. And since it's a full typescript rewrite, we've spent a lot of work and effort trying to make sure that all the style props are accessible to you within your vue templates. And thanks to the community for working with different tools like Volar and with vite, all this becomes a lot more easier if you're going into vue 3. And we definitely recommend using vite for Chakra UI vue, vue V1. If you have webpack, it's also possible to use it. Some of the ideas we're exploring inside of probably the later versions of V1 would be a zero runtime build. And what this would allow for is that we would walk through your entire template context because we realized most of our users are using Chakra UI to define maybe static properties, static style props onto the components. And so what we can also do is that we can walk through the entire your template and we can then extract those style props into css that we'll then inject into your single file component styles. We might also, we're also planning to, in the future, we're also planning to use state machines for logic heavy components. For example, the accordion has a lot of logic that we have to compute and a lot of states that we have to manage. And the best way to deal with this that we discovered as a team was to use state machines. And for this, what this allows us to do is that the state machine only returns the current state that we then destructure into the components that are then rendered on the page. So this makes it a lot more convenient to use. And it's certainly a good way for us to share logic. And so in the future, if somebody decides to build Chakra UI for svelte, they don't have to rewrite all this logic and use side effects for things that would probably already exist inside a state machine. They just need to access that state and then provide it to their components, which is really, really convenient. So what's coming inside of the V1 theming api? As I mentioned before, we're going to be providing component overrides, which we'll then look at today. We're also providing a custom variants api. We're also providing the ability to create custom sizes for your components. And we're also providing the factory function api and custom components. So for today's talk, I want to focus on three attributes that the theming api will cover inside of V1. The one among so many, by the way, so since we only have some time, we can only talk about three of them. The first one will be component overrides. So inside of the theme object, for those of us that are quite familiar with V1, with V0.x of Chakra UI, within the plugin options, there's a value called extend theme. And under the extend theme, for V1, we have added a key called the components key. So this components key allows you to now override the base styles for the component that you are then choosing to override within the extend theme. So when you define the base styles, those styles get applied to all the buttons. So you don't need to create a custom button so it can do that. The second thing we have allowed for you to do is to define custom variants. So now within Chakra UI, you can then create a custom variant within for that component that you are hoping to consume the variant. And finally, you can then define custom sizes, which is really convenient for creating an extra large button. If you need a button that's 100 meters wide, you can certainly now do that with Chakra UI view. I wouldn't advise you creating a 100 meter wide button, it wouldn't fit on the screen. But it's certainly possible. So let's look at all of this in action. That's going to how we're going to implement this, this, how we're going to see these things in action. So for starters, I went online and I tried to collect, you know, a bit of a user interface with a few custom, which has components that are not implemented inside of whose designs are not implemented inside of Chakra UI. So looking very quickly at this, this UI, I can see there's a button here. And this button appears to have a different theme compared to the default styles that are provided inside of Chakra UI. And there's this variant here of a solid button that has a black style, a black background, the edges are rounded. And there's also this style here. So we can already see certain things are being shared by the buttons. Second thing that I can see here is that the height of this button is not really quite the same as this button. So this is a different size. And so we might need to create a custom size for this component. It's inheriting icons from an external library because we don't have this icon inside of Chakra UI natively. So we might need to use a custom icon. So I'm going to go ahead and create a project that we can then clone. We can then basically try to re implement this using Chakra UI. And the beauty of this is we're not going to rewrite all the button logic because we need the button to look different. And you're not going to write extra nested styles so you can make sure that the button looks like the way you want it to look like. You can simply define these and create a new custom variant within the theme object. Or you can decide to override the button entirely and then make all buttons share these styles. And so let's dive right in and let's see what that looks like. So I think the first thing we're going to do is I think I'm going to go ahead and try to clone this button using Chakra UI. Try to implement this. You know, I'm going to assume a designer handed it over to me. And in most cases, I probably already know all the different measurements of all the pixels of the radar and everything else in particular. But we may not go that deep. I just want to show you how easy it is to implement the visual representation for this button. So the first thing I'm going to do is I'm going to go ahead and clone my Chakra UI Chidori starter. Actually, it's pretty good starter. I use it for my project. So if you ever want to have a project that's already using Chakra UI, you can just head on over to my GitHub username slash Chakra UI Chidori starter. So I'm going to copy that and I'm going to clone it. And so I'm going to open my terminal. And I'm going to hit and close that. Sorry, I'll open my terminal again. And head over to my projects directory and I'm going to then git clone this. Well, should have pasted that. Well, I didn't paste it. So I'll copy that again. Git clone that and I will call this Chakra button. Right? I'm just going to call it Chakra button. I was going to try to clone that button. Great. And while this is close, I was really fast. So I'm going to cd into that directory. I think it's called Chakra button. And I'm going to run yarn. Terminal and yarn dev and open the same directory in new terminal and I'm going to open it inside VS code so we can see what's what's inside this project. All right, let me open up a full screen. Great. That's perfect. So the first thing that I'm interested in looking at is our main.ts file. And this this project is actually scuffled in out with Chakra UI with layouts and routes and also statically generated site. So it's pretty good. So the first thing I'm going to look at here is inside the consummation of the Chakra UI plugin, we see there's this extend theme option that we saw. And I'm going to click the theme. And inside the theme here, this is where the entire definition of our theme. So since we're going to re-implement this from scratch, I'm going to go ahead and remove everything inside here because we do not need it because we're savages. I'm joking. And I'm going to delete that. And I'm also going to go inside our index dot the view file, I'm going to delete everything from inside here. I will also go ahead and remove these other styles because I don't think we need them. No, I don't think we need them. I don't think we need them. And I'll just put in here a hello world. So that I can be sure that everything is working. Here we can see a dev service running. I'm going to open that in a new tab. And if I refresh this page, all right, there it is. There's our hello world. It's empty, page is empty, there's so much emptiness. And so we're just going to go ahead and do some some some simple modifications here. The first thing I'm going to I'm going to want to do is I'd like to import this font family because it seems to me like there's a very special font family being used here. So I'm going to go to fonts.google.com. And it looks it resembles poppins. So I'm going to just go ahead and search for poppins. I've been using it a lot. So that's how I'm able to tell poppins and I want to get this style. We might want to use the bold style. So I'm going to take that as well. I think we're also going to use the regular style. So I'll copy this entire link and I will put that inside of our index.html. This template comes set up with inter but I don't think we're going to need this for this demo. So I'm just going to replace inter with the poppins font family. And finally, I would like our theme to then inherit I would like it to then I'd like to ask our theme to hey, wherever you find the font family value being defined as body or as heading, I would like you to use the poppins theme and poppins font family. So to do that, we head back inside our theme file. And we're going to go into the fonts. And here there is a property called body. And for body I wanted to use this guy. And for our heading as well, I would like for it to use the same font family. And so I can then inherit that by saying I would like everything inside here, I'd like it to inherit the font family of body. So this should reference whatever we have inside of our theme definition here. So that's great. So I can head over to the browser now. And if I refresh the page, I can already see there's a font family there. If I inspect it, I can see that there is a font family there or fonts body. And if we click that, or if we try to search for that fonts body, the definition, it should be somewhere in here. Yeah, fonts, fonts body. There it is. There's our poppins. Awesome. So that should make things a bit clearer inside here for us. Great. So our button now, we can see that it has this, this black background. And I can also see that all buttons tend to share this, this squared off, squared off border radius. So I'm going to go ahead inside our theme, and I'm going to define that for our buttons. But first we need a button. There it is. And I think the text inside the button says, get started. So out of the box, all right, there's a get started button. It looks nothing like our button that we see in our design. So I'm just going to go ahead and first define the border radii and the font weights. So under the components key, I have a button component, right? And I'm going to then find the base style, define the base style. I want it to have a rounded of none. All these are shorthands that Chakra UI already has inside it. So you can just directly use the shorthands here. I'd like for it to have a font weight of, I think, regular. Right. So with any luck, this should have replaced those values inside our. All right, that's great. The next thing I want to do is, it seems to me that this is a different variant. Like this black button is a different variant compared to this other one. So I'm going to go ahead and define a variance key variance. And I want to create a let's see what we call this. Let's call it let's call it a dark variant. Right. Most people probably use something like primary or something. I'm just using this so that it's easy to remember. You could name these whatever you want. So I'm just going to give us a background of black. I'm going to give this a color of white. And if I head back, oh, of course, of course, it's not going to be applied. The reason for that is we need to add the probably. Yeah, we need to add the variant prop here so we can then say variant is we called it dark, I suppose. And if we head back to our browser, it should have updated. Oh, perfect. It's the same size. Great. The second thing is if we zoom back out to our default size, to the default size here, we can see that it's actually a little smaller than it should be compared to the button here. So I'm going to create a custom size. And inside this size, I would like for it to have a very specific padding inside there. So let's go back to our theme and let's create a custom size. So for that, we'll put that under the sizes key. And I would like for it to have a value of Excel. And just to show you that it doesn't already exist in the library, we don't have an Excel button. So we can then say Excel or size would be Excel. And this should should break our button because you know, if we define a size that doesn't exist or a perfect it's broken. Maybe maybe let's let's use a size called huge. Let's just use huge. Because you can name these sizes what whatever you want. So I want a huge button. And for this, I would like for it to have a padding x of six by four is about 24 pixels. So I think that makes sense. So I'm going to use six. So in Chakra UI, we use a four pixel grid. And that's how we're able to, to establish can calculate how many pixels are being used. And it allows for some kind of visual consistency on the page. And so for our padding, why I would like for the large button to have about 12 maybe maybe 16 pixels on either side. Great and great. Now you see button is inheriting the styles and I'll just zoom in. So we can see that. Great. This is the size we passed in the huge size as a prop. The last and final thing here, as we can see is our button has this this icon and I don't think we have this icon inside of Chakra UI inside the internal icons. So to solve this problem, what are we going to do? I like to use feather icons. So I'm just going to go to feather icons.com. And I set up this data to already work with feather icons. And I'm going to search for the arrow. And I think the name for that icon is this arrow up right. Perfect. We already we can already find the icon that we need. So we don't need to do a lot of gymnastics for that. And we head over to our utils icons. And if you're wondering how we're able to define these inside the main.ts file, we imported a icons from the icons object from this file. So when it come in here and export it from from the library. So arrow, it was arrow up right, right. And then I'm going to go inside our template and I'm going to define a left icon. So I'll say here left icon should be equal to the arrow up and right. And if I head back to our browser, oh, it's not right, it's a right icon, I can strike correctly. So this should be a right icon. I can show incorrectly was just positioned poorly. I forgot to position it the right way. I think that should be here. All right, great. Awesome. We have a perfectly similar button. And we didn't, we didn't create a brand new component, we just defined a new custom variant, we defined a custom size. And we also imported an icon from an external library. And we have re implemented this without having to rewrite the entire button. And it saves us so much time, compared to having to have written it ourselves. And if we want to, we could then use a button size like large in case you need it smaller on this, this size would then be reflected inside the template. I think because of the zooming, maybe the effect may difference may not be so much I think it's probably the same. But yeah, but that's it when it comes to using Chakra UI, we could also go ahead and do the same for this other variant, this would probably be your secondary variant. Also be your primary variant, and you can be able to do this using Chakra UI. Awesome. So with Chakra UI, it allows you to be able to code less or to write less code and you have a bit more speed when it comes to implementing new UI designs that your design team will give to you. And in order to get started with Chakra UI, you can head on over to view.chakraui.com. Or you can also follow us on Twitter. You can also check out our V1 repository, which is chakraui.com slash Chakra UI view next. If you want to see our V 0.x, you can just omit the next from the GitHub repository link and you can see the currently released version. But if you want to get started with this, you can just head on over to next.view.chakraui.com. And you can get started with our V1 api. And I look forward to seeing what you've built, what you build with this. And I'm happy to answer any questions. And I'm very excited to be here today. Thank you so much for the opportunity. And I wish you a great rest of your day. Have a wonderful evening and bye bye.