 Okay, yes, so Kai will give a demonstration about the components and talk a little bit more about the newly renovated UI library documentation that uses Storybook. And then I will go over the exercises for this assignment. So, Joe, I think you are ready to share your screen. Okay, thanks. Thank you. Okay, everyone should be able to see my screen now. Yes. Okay, great. Hi, everyone. I'm Joe Cooper. I'm a UX designer here at DHS2. I'm just going to give an introduction to the DHS2 design system, what it's for, what it can help us with, and so on. Then, as Deborah said, Kai will give an introduction to how we've implemented it today in the UI library. So, a design system is a collection of principles and components that are common between the DHS2 applications. And we set up the system to kind of, encourage consistency, the use of the same types of components, and the use of the same patterns and principles, so that users get a consistent experience whenever they're using a DHS2 application. Regardless of what that application is for, they should all have some common elements. So, that's the goal of the design system, is to set up that cohesion. The design system is hosted on GitHub. So, the documentation is here, DHS2 slash design system. And it's broken up into two different sections. The first section is principles. So, these are guidelines that are a little bit more intangible. They kind of talk about how applications that run on the DHS2 platform, how they should look, how they should work, how they should communicate, and so on. And the second part is the components. So, that's a collection of user interface components that have certain usages. And the second part is the components. Usages and action usages like buttons, displaying data, different types. So, these components are organized into different sections based on the usage. And each component goes through and has some guidelines about how that should be used in an application. So, I'll go through some examples to make that clearer, as that's just an abstract overview. But first, the principles. Today, though, they cover six areas, and it's constantly expanding. So, the principles kind of lay out in this example, how the content should be worded in DHS2 applications and how we should communicate. Again, the goal here is to establish a level of consistency so that as users move around DHS2 and they use different applications, they feel that everything under content and the way we communicate is consistent and that establishes trust, that establishes, and it's kind of an easy way to understand. It means we're all using the same terms and so on. These guidelines also highlight areas where we can be user-friendly and so on. So, in this communication section, we have some examples about kind of simplicity of language. I'm not going to go through all of the examples, but just to say that there are examples in these principle sections that show what not to do and what you should do. So, before working on or while working on DHS2 applications, it can be useful to go through and refer back to these principles. These principles here address keeping the user informed with feedback, what to do if you don't have any data to display, the tone of voice to use, so how technical we should be speaking to kind of present data in the easiest understandable way. That's an example of the content. There's some examples here for layout. So, this covers some common DHS2 application layouts and when they should be used and also gives some guidelines about how to organize components to make them as easy to use as possible. So, there's lots of information here and I would really urge anyone working on DHS2 applications to refer to these principles and kind of get to know them before moving further. So, with the components, we can talk about, let's talk about the button. So, a button is a component in the design system and when you go into the button page, you can see that there's a small introduction about kind of a one sentence, what is a button. Buttons are used for triggering actions. There are different types of buttons in the design system. So, here in the first section, the documentation covers the different types of buttons like basic primary, secondary, and so on. And then there's a guideline for when to use each type of button. So, this guideline tells us that the basic button is the most often used button that will suit the majority of actions. The guidelines tell us that for primary buttons, we should use sparingly. Rarely should there be more than a single primary button per page. So, following these guidelines, it's quite important and it's not just about getting the components from the UI library and kind of using them for different things because that would confuse a user. For example, a destructive button must only be used for destructive actions like deleting or removing or so on. If an application used a destructive button for a completely different type of action, for example, saving data, then that would be a very confusing experience for users. If some applications had red buttons for saving and some applications had blue buttons for saving, that would be very difficult. So, it's really important to understand and follow these guidelines. And we follow these guidelines ourselves in all of our applications that we develop in the core. So, it's good if core developers and third party developers are all working together consistently. I think it's really good. So, the documentation goes through other options that the components provide. For example, buttons can be toggled and there will always be some accompanying text talking about when these options should be used. So, for example, with icons, you can optionally include an icon in button and this text here tells you to use an icon to supplement the text. The documentation will also cover different states that are available. For example, buttons can be in a disabled state and then there's some documentation about when buttons should be in that state. So, use disabled buttons when an action is being prevented. So, that's one example. We can look at another example of a more complex component. For example, the transfer. So, the transfer is a data entry type of component. So, this is a component that the design system provides that allows users to select options from a list. So, wherever in your applications, users need to make a complex selection from a list. You know that a transfer is the right component for that. And usually in the usage guidelines, which is the first section of each component page, there'll be a short sentence to make sure, kind of a check to make sure this is the right component. So, as I said, this one is whenever a user needs to make a complex selection. Simple selections can be achieved with checkboxes, radio buttons or a select. So, if you actually have a simple selection to make, you could instead go and check out the select component. So, then the usage guidelines at the top cover some use cases that are particularly suitable for a transfer. And then it covers the basic functionality and the composition. And again, that section with the options. So, headers are an option for the transfer and there's some text here about when and where it should use headers, footers and so on. So, as I said, these components are organized by usage. So, all of these components are for performing actions. All of these components are for giving feedback to the user. And at the end of the design system, there's some short guidance on kind of getting started designing and building. So, this is kind of a reference of what I've been covering just now, but it lays out kind of the three important steps to designing DHS2 applications, which is getting to know the principles that I covered in the first step. Understanding the use case. So, making some kind of research or finding out or establishing what your application will be doing. Doing this is an important step because it helps you to know how that application should be designed. And then when you move on to the design stage, that's when you refer to the design system component library where you can use the appropriate components for the actions you need to carry out. Feedback is always welcome. So, if there's a component that you feel is missing, if there's a common use case that is coming up in applications that the design system does not provide a component for, then we are very interested in expanding the library. So, please submit any feedback you have, or if one of the components is missing a feature, then we'll definitely keep that in mind. We try to make sure that all of the components in the library are reusable. So, we do not add components that are only used in one application or only used in maybe one or two use cases. The design system, it's intended to be a very flexible and kind of wide-ranging library. So, the components that you find here are components that are very commonly used. I think Kai will cover this in his discussion. But if there's a component that perhaps is, or if a set of components, that is perhaps quite a complex use case, then you might find that in the UI library as a recipe instead. So, rather than kind of making this design system quite overwhelming with lots and lots of different variations, we've tried to keep it as simple as possible and kind of contain it. And the recipes and tutorials can kind of come on top of that of how to build a complex data table, for example. So, yes, that's the design system. I think that about covers it. If there's any questions, I'm happy to answer. If not, that's me. All right. Everyone's okay? Yes, we can see. Okay, so to implement the design system in your applications, we've built this library of UI components so that you can take them and kind of enact these consistent, reusable components in your applications to make the appearance consistent, to use the same kind of patterns and principles that are described in the design system and just to make a consistent experience for the users. And also, these things provide a lot of useful features that will end up in a number of different applications and DHS too. So, to give you an idea of what it looks like and what it is like to use this UI library, we can go to the developer portal and go to the components and libraries documentation. And then here you'll find the UI components library. We have this documentation page here with some information, like getting started, how to add it to your React application. And there is some API information on the different components in here that you can use. But what I've been working on recently is this documentation system here using Storybook to create demos for all of these components so that you can see what they look like, see the different variations that they can use, and easily integrate them into your project. So in case you kind of forget any of the things that I say here in kind of giving a quick tour of this documentation, the opening page here gives you some instructions about the features that you can find and ways to explore these components and how to use them in your projects. And so you'll find some of the same pages as the previous page that we came from in here, like getting started so that they're in the same place as these kind of component demos. And you'll find these demos of things like the button that Joe is going over here and the stocks page here. Initially, when you click on things, you'll see individual examples of them like the secondary, primary, destructive, and basic types. But you'll find a lot of information in the stocks tab here where you can find some description, instructions on how to incorporate in your project, a demo, and a big list of the props that you use for these React components to control them. And so as much as possible, we try to have descriptions available for what these things do. Like you can look at the code that's here that makes this button. Once you import it from the UI library, you can give it a name, an on-click handler, and a value. And then you can toggle these interactive controls here to add things like the primary variant to it. You can see that turn up in the code sample here. Or you can make it small, and it'll be smaller. And turn off small and turn on large. And a number of other things here like the, you can see that there are different types that you can use, which is important if you're using the button for a form or just for triggering a regular action on the page. So there are a number of other features in here that can show you more information about how to use these components. But just to give you a demo of how to integrate it in your project, we can take a look at the Getting Started page. We want to add the UI library as a dependency. So I have this project here that I just started up that is the same thing as what you get when you initialize a new application using the D2 app scripts in it. It loads this simple thing. And so we can add the UI library by doing yarn add the DHS to slash UI. Oh, interesting. Yarn add. That will add it to the project. And then we can import it here. Or let's see, let's take a button. So we can find that and put a button into our project. And let's just go ahead and copy this large button here. Good or application. The button start up the project again. And here we have the button. So that's how you integrate it in your projects. I'll show you some more features about the documentation system to investigate how to use these components as you're using them in your project. So you can see these code samples here. These are these should be useful for you. As you copy and paste them into your application. There'll be a number of examples here. That you can browse just to visually look at different things like you can see these icon and toggled variants that Joe described in the design system as well. This button component has some of these descriptions written into it. But these aren't fully complete with what the design system describes. And so you should always keep referring to the design system for usage guidelines for these things. We can take a look at something like the other add-ons in here. So if you go to the canvas tab, you can look at individual demonstrations here. And you have the same controls that you have in the other tab that dynamically control what happens to the button. You can see code samples for what it looks like into the JSX tab. This one is dynamic. And so it kind of renders like that code sample that we saw before. That you can see the button and some of these large props and things like that. And if you go and add like destructive or turn off large, then that will be reflected in this JSX tab. You can see button is destructive, no longer says large. And there's also this story tab, which shows you the code sample that was written in the storybook documentation tool to make this demo. This isn't particularly useful for this example, but it is useful for some of the components that are controlled components like form components that need to have a parent that manages state. And so for those kinds of components, you'll probably want to look at the story tab to see what kind of things you need to have around the component. Just to give you an example, the transfer component is like that. And so you can see that as you control this list here, there's some state that's being managed in react using use state. And so this gives you a clue as to what you need to do to make this functional and interactive. The actions button here, the actions tab will show you things that happen or are logged to the console. Like most of these interactive elements like buttons will log something or kind of indicate that like I've been clicked, this event handler has been triggered. And so for some of the things like forms, they also will log things like what kind of payload they send to the event handler. So you can see how to use those. So let's see, I think those are the main features that are useful to take a look at in here in the documentation. I think I'll just kind of give you a tour of the form components because those are very frequently used components that are nice to have a kind of introduction to. So we have these kind of data input components like a regular kind of input field. And we have a few different levels of composition of these form components. And so you'll find things like the checkbox, a regular text input, a radio button, things like that. And there are different levels of composition of each of these things. One is kind of just the bare input component. Another level is the input field, which has extra label text and sometimes validation text. Let's see. Is there help text? Yeah. So this is an input with some extra features around it, which are useful for using in your application. And then there's also these, that same level of thing, but configured to use with react final form, which is our preferred way of using forms in the applications. And so this is a component that integrates with react final form, which is exported from our UI library. And I'll show you that in a second. You can find the documentation for final form here. So you can see how to use it more and I'll post a link to that information. But react final form provides useful tools like spying on the values that are in the form at the time, doing validation of the things and then handling the data inside of it. It's a really useful thing. And if you're making forms in your application, you should use this. And so we have components that are built to be used inside of the final form forms and field components. And so I'll show you a demo of how to use one of these because it'll show you how our UI library interacts with react final form. And some of the validator functions that we have for that. So in here in my demo application, I've set up a form demo. Let's see. I think I'll move this out of the way. And then add and import it. It shows you just this input field here. So here's the code for it. We import a few things from the UI library here. So react final form is one of them. We want to import that. Input field is another one of them. And you can browse the kinds of the different things that you have here. You can see that input field FF is what we're looking for. And you can see a demo of how it's used here. These are a few validator functions that we use for the UI library. And here's a button component from the UI library to make the submit button. And so inside react final form, there are the form and field components that we can either access here or from react final form dot field or react final form dot form, which you might see. And this is very similar to an exercise that you'll be doing in a moment. So I think it'd be useful to have a look at some of these things. So inside the form, this is some pretty typical react final form logic. And you can kind of see how that works in the documentation there. We set a form with a non-submit. And then it passes the handle submit function that we make a regular form with. Here's the react final form field. And as the component inside that field, we use our UI library input field final form component. All of the components with FF at the end are the final form thing. And so we can see in our UI demo, we have this input field. It comes with this initial value. It comes with some validation things. And so it has value validator that I imported from the UI library. I'll show you where you can find those. Because unfortunately we don't have a great documentation source for those yet. But we can do these things and submit the form. And it calls this handle submit function. So you can take a closer look at those things in the example that you'll do pretty soon. But another thing that I'll just show you before you do those is that there is also this compose validators function that we have here. And this is a function that can compose several validators into one. So what you need to do for that is compose validators, email, and has value. These are two ones that I've imported above. And so now it should make sure that this value is a valid email address. And that it provides the value. You can take a look. I'll post a link to this documentation here, but you can take a look at this page in the UI validators code to see what's available. I'll post a link to this in the chat to have as a resource. And you can consider those things. And so the main resources that you'll want to refer to are the storybook documentation here for the UI library. You probably won't need the React final form because you're making your applications. And then this information about validators. So I think that covers it for my demo of the UI library. I think coming up you'll have some exercises to practice applying it. And so I'll be around to help answer questions for those things if anything is unclear. And that's all from me. Thank you so much, Kai. Thank you. And it's, I hope you like the new, like the most that uses storybook, and that will be useful for when you're building your applications and also now for the exercises that I will show you. And I will go ahead and share my screen. I wanted to ask if you were all able to join the GitHub classroom before I start. If not, I shared the link again in the chat. But once you accept that link, you will get the material that will be, that you will need to complete this assignment. So this is the resources repository that you will see. It's a template and you will have yours too. With your name attached to it in the end, like it shows here. Once you accept the invitation and what you will have to do then it's to click here. And then copy the URL and go to your, to your terminal. And then run git clone and then paste that link. I won't do it now because I have it already. So that will create a directory in your local machine with all this information. So you need that in order to do exercises, the exercises of the UI library. So how that would work is to, I'll show you here. And then I will explain what you have to do. So, okay, we have the what workshop one. And so you would have to go to the folder. And then as you can see, we have all the folders for the assignments and what the one that you need is, is the UI library. And you will go to the template. The template one. And the template contains and I will show you contains all the starter called. So you don't have to. Yeah, so you don't have to create a new application. And I will demonstrate this in a little bit. This link. It's also in the resources folder in the templates. I will share this. Sorry. Okay. This are the task instructions and we have three main tasks. Here is just a quick recap of the design system and the UI library. And how to install you don't have to do that because the template already contains that dependency. Yes, so to check that you, you can go to your package Jason file. And you can see that it was already added here. Of course. And. Yeah, so this is. Yeah, okay. So the ones you're ready, let's say that you are now going to start working on, working on this assignments. Then again, we will ask you to create a branch. And the details are explained here in the get started guy that I shared earlier. So you navigate to your directory like I showed you on my terminal. What you would have to do first is to run yarn. To get all the packages and dependencies. And then you are ready to, to start working. So the first one is basically to add a menu and a menu item component. You can go through this document that has a lot of information, but I'll show you exactly how it looks on the, on the, in the code. So what you would have to do is go to your source code and go to the navigation folder. If you see on navigation. You will just concentrate on the add to do comments. So don't worry about a bunch of code here that doesn't contain what you would have to replace. Some of this concepts will be explained tomorrow, especially for the up runtime, but this is just. Yeah, how to set up the sidebar using the we are rather dumb library. Some of you may, maybe familiar with we are rather dumb, but this is, yeah, it won't go over into much detail about this. So here's just telling you to import a menu and main item components and like I showed, you can just, if you have any bounce on how to do it, you can go here and check the check the dogs and you can just easily copy and paste. And the next will be to replace a span. This is fairly easy, but it's just to get you familiar using or importing UI components in your application. So once you do that, you should be able to see this. So a sidebar that will allow you to navigate between three pages, home attributes and form. And so this should be. Yeah, pretty straightforward. Now the second task is under the views folder. And you will be working on the attributes.js file. And now this is, this has more information as it will retrieve or fetch data so that you can see something that's rendered once you import all these components. And this is to get you used to or to learn how to use table basically. If you go again to the documentation, you'll be able to see all these components import everything that is included here. And this is the part that you don't have to worry about. It will be discussed tomorrow. And, yeah, so here is where you will have to replace the divs elements and just use the components instead. And here are some other instructions. This is, yeah, fairly simple, but also, but it uses more components. If you have any questions about any of these instructions, just let us know. Once you are able to do that and you think it looks okay, you should be able to see something like this. So this is using, like I said, fetching data from the HIS2 web API that will be also covered tomorrow. And that's set for task two, task three. This is pretty much something that Kai covered. And that was very useful. I hope as an introduction to the form components. It uses, like Kai mentioned, React final form, the React final form library, which is preferred library for working with forms. And if you're using validators, this is the one that we recommend that you use. And while Kai showed you how to find information on that, this is a bit more complex. And it will take a bit more time. But the form itself is already set up for you. So you would have to import the components. And if you see here, it says FF in the end. It's referring to the final form. Library, you have to import those validators. And some of those validators Kai also showed. So it's to make sure that all the information that the user enters in the input fields are valid. Yeah, are correct, I guess. And this is more like a replacement. You just replace the components. Yeah, replace the components and also add some validators here. But for every line, you would have a comment to it. And finally, then you will be able to add a button to see. Yeah, you have to have a button in your application. Okay, so once you do that, you will see this form. And if everything, if the validators were important correctly and also added correctly in your application, you will see that it's failing if you don't provide the right information. So if the fields are empty or the email address, it wasn't entered correctly. This is how you know that it's working. And once you, yeah, here's more information about what the task is asking you to, to add. And once you're done with this, you can again follow the instructions on how to submit your, your assignments. And you, like I said, you create a new branch, you work on that, then you open up a request, then we will review it and we will add some comments and give you feedback on anything on your assignments. And that's, I think that should cover what, what you are supposed to do for this for the, for the UI library tasks. And let me know if you have any questions. I did cover everything. This instruction here, once you go to the directory, you will see that it has, yeah, everything that you need, you need to know about how to go about doing the exercises. So any questions.