Microsoft 365 Community Community Demos, 2 Dec 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Introduction to HtwoO React library – Fluent UI experiences easily

Description

In this 19-minute developer-focused demo, Julie Turner educates viewers about the new open-source HtwoO React library she created containing many atomic components built by Stefan Bauer (N8D) | @StfBauer. Step through installing and initializing the library in an SPFx project. Build a Splash card page containing multiple sub-components (modular development). Copy sample code from library into components and add components to a page. Alpha library available now, will go GA shortly. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 2, 2021.

Demo Presenter: Julie Turner (Sympraxis Consulting) | @jfj1997

Supporting materials:
• Tools - Getting Started with HTWOO-REACT | https://lab.n8d.studio/htwoo/htwoo-react/
• Icons - hTWOo UI Icons | https://github.com/n8design/htwoo/tree/main/packages/htwoo-icons
• Article - ABOUT HTWOO UI | https://lab.n8d.studio/htwoo/
• Splash card – Welcome to your hTWOo Splash card | https://lab.n8d.studio/htwoo/htwoo-core/?p=pages-teams-splash-screen

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

A

Hi, my name is julie, turner, I'm going to do a preview of the h2o react component library. So this is who I am. These are all my social media areas where you can find things out about me.

A

I will skip right along uh to start off with uh give a level set on what h2o is so h2o is a open source alternative for the microsoft's fluent ui uh web design system, and it was um an html and css library written by stefan bauer, and so that is out in the ecosystem, and that is basically gives you a style guide based on that html and css to create implementations for any framework that you want to.

A

And so, if you go to that uh style guide, you can see all the html and then the names of styles that you can then import into your various projects, to use those styles to get styled components that look exactly like the fluent ui web design system. So that's wonderful and it's great! You can build those controls from scratch, but it's a lot of work to do that.

A

Every single time, and since a lot of us use react because that is the on the page uh framework, that's used by microsoft in their pages themselves and is used in the sharepoint framework pretty easily. uh I decided that it was a good idea to try to build all of the components that uh stefan had styled so that we would have them as react components so that we could just more quickly use them in our projects.

A

So I went ahead and built that library and so to get started with the library it's going to be very similar to using office fabric react. Essentially you just create your sharepoint framework solution with the react.js library. You install h2o react. So it's right now in a jokingly, stefan made my release pre-alpha. So it's a pre-alpha release, but we'll be updating that fairly soon as we're getting very close to a general general availability on it. So you install it using that uh at n8d h2o react and that uh current build is 21..

A

uh So then you would create a class or function component, whichever you like. If you use react, hooks, that's fine or if you use class components. That's fine as well, uh and then you import the h2o react component that you need and if the component doesn't exist, you can create it and so we're gonna sort of walk through all that. Let me just show you. This is the example that I'm gonna build. So this is um a teams splash card that was designed by stefan.

A

So you can go and look at that and it has multiple different sub components, so stefan's, h2o and css is built on something called atomic design, which means that he takes each one of these components and breaks them down into their smallest pieces. So we have here an image and a title and a description and buttons and those are all what we would call atoms and then they can get merged together into higher order components.

A

So two buttons together in this layout becomes the footer for the splash card and the image title description and footer all together become the card that is in the card container. So these are the different levels of uh the controls that we have in the library and that's how everything is broken down. Okay, so enough with slides, we're, gonna sort of stop this and I'm gonna move over to uh the documentation. So I mentioned getting started in sharepoint framework and that I have that documentation here.

A

Although this library is not dependent on anything about the sharepoint framework, it could be used in any react uh project that you're building it doesn't have to be the sharepoint framework. But since most of us on this call are going to be using the sharepoint framework, we're starting there with some getting started docs on that, okay, so I'm just going to walk through my getting started doc.

A

So we over on the left, you can see some navigation and that shows uh our getting started page and then we have documentation on all the atoms that have created all the molecules that are created and all the organisms that I've created thus far based on stefan's, more complete and actually I should probably point pull that up really quickly.

A

And just put that in here pattern lads documentation, so this is his uh his html and css documentation, and so I've been slowly but surely going through here and building out each one of these controls. So if I like go to check box, we can see the um handlebars template or the html template for an input for a checkbox and essentially I've just made that checkbox also a react control.

A

Okay! So let's come back over here we have the getting started, and so what you would need to do is, like I said, install the library- and I didn't put the version number on the end here, because this is the documentation, not the pre-documentation, um and then what we want to do is add a reference to the h2o core styles, and so this library here the h2o react library takes a pure dependency on h2o core.

A

So when you install it, it's also in your mpm modules going to install the h2o core library, so you will have both of them there and you're going to need to import the styles prod uh build into your scss file for the sharepoint framework solution.

A

I'm going to show you all this in just a second and then we're going to initialize some icons, we're going to show you that and then we're going to initialize theme, support by adding our supports theme variants and adding some helper functions that I've built into the library and then we're going to put a component in okay. So I'm going to minimize this now we're going to come over to our project, so I've built a basic h2o react demo environment here, and so this is just a 1.13.

A

I think it's 1.13.0 sharepoint framework solution. It's a web part, it's just pretty basic and vanilla. I did uninstall um the office fabric react because I didn't need that library. I just removed it, but it wouldn't matter because it doesn't, since I'm not using it, it won't build in um and then what I've done is I've gone into my scss file for my components and again I had commented this out and we have our baseline uh component.

A

Excuse me style here and I'll get to why we need that in a minute, but I just set its content to nothing just so that it builds correctly, and then I did this, which is to add a global import of this style, which is the rolled up all the styles that you need from the library in the h2o core module and the global here make sure that when your component, your sharepoint framework, build happens, it doesn't name space out all of these styles because we don't use namespacing with the h2o uh library.

A

We need the names to be exactly as they're labeled in that style, library, okay, so then we're going to come over to our root, webpart ts file, and so what we'll need to do is add an on init, um which is an override there's, an on in it uh method in the uh base, client, side, webpart class and so we're going to override that and then we're going to initialize our symbol set. And so what that means is I've added this helper function.

A

There is a base svg file in the react library that has some of the things that some of the base atom atomic components need like a drop down box needs a little carrot, um svg for that pull down, and things like that. So we have a very small set of icons in the library that are sort of base to its ability to function.

A

So we need to make a call to initialize those symbols now, because I know that you're going to want to have a lot more icons available to your solutions than just those very few that we have in the library. I also made it so that this function, the symbol, step function, will also allow you to add one or more additional svg files to it to register a bunch, more controls, and so it luckily stefan has also created another project that he called the h2o icons, which is all the fluent ui icons.

A

So it's the regular ones, the solid ones and there's some page ones. Let me just show you quickly what that looks like so that package, it's uh from the n8d h2o github repo under packages, there's an h2o icons and he is showing you here how his fault that package is laid out. So when you import this in this build into your solution, you will get those svg files and then you can make reference to them.

A

So you install uh the nad, h2o icons and then those files are in your node modules and since they're, then in your known modules, you can import them in. So what I do is create a string constant where I require in that svg file, and then I pass that into init symbols, and so once you do that it will not only register those base, symbols that the library needs, but also all of the the icons that are in that svg file. Okay, so that's a that's a lot of stuff!

A

So now we have all of those icons. Now, if I'm doing this, if I'm doing this, I don't need to do this as well. It's just sort of a demo, so I could have this competent out, because this one line will not only register the base ones, but they'll also register these additional ones. So then, after that we want to use or consume the theme provider that we have set up. So in our manifest here we made sure that we have added supports theme variants to true, so that's in there and then so back here.

A

I've built a special extra feature that I called spfx themes. It has an interface as well, and that does, if you've read stefan's blog post about themes and how you consume themes. I've basically put all of that in a class so that you can just with two lines of code initialize all your theme handler.

A

So if you're in a web part where the theme provider is available, you would create a instance of the theme provider and then you would make a call to initialize the theme handler and passing in the theme provider with the dom element if there is no theme provider. So if you're in, like a application, extension or something else where theme provider isn't available, you can make the call this way which will use the page context, spf sharepoint framework variables to initialize the theming support for the controls. So that's how to set everything up.

A

Okay, so now we've got it all set up, and now let's try to do something with it. So let me uh let me control s this page and I have gulp serve running. So let's take a look and make sure that everything is well in the world and I'm going to do something I never do, which is I'm going to live code, which is just crazy silly. Why am I doing that?

A

All right, we're good all right, so I'm going to come back over to here this getting started, I'm going to do probably the most simple thing which is to come down here to this team splash card that I mentioned and so on the docs. I have this theme splash card and it looks like that and oh look, a kitty picture. I'm actually.

B

A

Huge fan of cats, but that's fine okay, so we have a kitten picture and if we come down here, we can see that we have a code um code sample.

A

So I had clicked, you know the show code, it shows the code, and so now I can copy this section out here and I'm going to control c that out and then we'll minimize this back out and I'm going to go over to my demo, and so I'm going to paste that demo code in here and you'll notice a whole bunch of red squigglies and so in the in the instance of saving time.

A

I'm going to come up here, I have already pasted all the imports, and so what I want to mention about the imports is that they're selective. So uh when you are bringing in each of these react components, you're only going to inflate the size of your build package by whatever pieces that you actually need, but you know, certainly if you need the whole library, if you just import it from there, it will import the whole library and you'll be good to go. So we need all of these things.

A

For our splash card and then um because of the way the samples work, I just need to sort of change these on click functions so that it does something else.

A

And put some a semicolon: there it likes that and then we can do this and we can copy and we can paste that- and I could save that and now hopefully, if all is running well in the world- and we have no builders looks good. Then if I come over here and we go back to our hello world and we refresh the empty cache and reload.

A

There we go, we have the um component all put in all styled exactly the way we uh need to so now. Let's say that we wanted to sort of extend this a little bit, so we know that we have the splash card footer here with the two buttons sitting on top of each other, and so what I'm gonna just do is say: hey how about I wanted to have a a selection for the combo box. Let's say so.

A

If I come back over here and I go up to drop down, this is one of our more complicated controls and I show the code for this. Here is our drop down, and so we have the options, the value I'm actually there's one of a piece. That's missing from these dots that in a minute, so we copy that out- and let's say we want to put our drop down here. So we can put our drop down here.

A

We can set that after we can set this after and we can set that after okay. So let me come up here, so I'm adding the drop down, so I need to undo that. So we have the drop down and then I created just a static, uh although I could pass it into a prop or or whatever I need to do, get it from a service. But here is the list of items that I want to have for my drop down options. So I have you know black white and orange as my drop down options.

A

So now I have this drop down options, values, and so I can say this dot drop down options and that passes that in- and this is giving me an error, because there is one more missing attribute that I need there. We go, and this contains type ahead and I'm going to just say false here, because I don't need that and one other thing I have to do here is give it a change event. So what I'm going to do here is I'm just going to.

A

I have a drop down value, state property, and so I'm going to do something that I would normally not do, but is to say on change. And so, if we hover over this, we can get some intellisense. It says our onchange event gives me the field value, so I know I'm going to have field value here and I'm going to pass that into a function to set the state.

A

So this dot set state and then I'm going to set dd value is equal to field value and I'm gonna one more over semicolon that and I'm gonna save that and now, assuming that we are in good, build stead, looks pretty good. I'm gonna come back over here and I'm gonna end the cash and hard reload.

A

A

There we go, and now I have my drop down list note: there's no default value. So if I come back over here, if you see this value, it's set to apple. Well, that doesn't help me very much. I need to use the state value so I'm going to override this and change this to this dots state, dot, dd value, save that one more time.

A

Gosh and hard reload.

A

There we go and we have our drop down now with all of our selection options in it, so that I think yep good timing. So that was all that I wanted to show for that. Let me just show the slides again right here. I just want to share some resources.

A

Okay, so here's some references so the documentation that I was sharing um for the react. Docs is there at lab.nad.studio, h2o h2o react. The icons are at that github, so just go to github nad design, h2o and you can go down through the packages h2o icons to find those icons files and then again, the base documentation for the h2o design patterns are right there at the root of that nad studio. Url all right.

A

That is all that I had so back to you, patrick.

B

Awesome stuff there julie. Thank you so much for that introduction uh to the work. I hope folks check that out. It's a really neat uh way to wrap all that stuff up and to me, css is just a bunch of wizardry, so it's exciting to see that whole process get made a little bit easier.