:scissors:+:crab: -> Hallings - components for Yew

:question: Purpose

What if there existed a couple of pre-built components for yew like password strength checker or steps-left? Wonder no more.

:::warning Note: this is not a finished library it is meant as a prototype/test during a master's course at LiU (Sweden), it should not be used for any real world projects :slightlysmilingface: :::

Prerequisites

:::info Yew: version "0.20" :::

:checkered_flag: Getting started

1. Install Yew
2. Add in Cargo.toml file

toml= hallings = "0.1"

1. Bring in the library by doing use hallings::prelude::* :::success As simple as that to get started :::

:pencil: Running tests

All tests are located in test.rs. To run tests make sure you have installed everything required, then run.

• wasm-pack test --chrome

You could replace --chrome with --firefox. Check the wasm-pack documentation for more info

:ok_hand: Check out our usage examples below...

Provider & Theme

Halling uses Context Providers to provide components with theme data. Currently you can not pass your own theme struct.

html <MaestroProvider> halling components </MaestroProvider>

All of the examples have been tested using yew = "0.20" inside Function Components

Text

htmlmixed= <Text size={"40px"} color={"purple"} // if none is specified theme color is used class={classes!("Custom class")} > {"Pretty large text"} </Text>

Or feed text through as prop variable,

htmlmixed <Text size={"40px"} custom={TextProps { label: "Test".into() }}/>

Button

```rust= let counter = use_state(|| 0);

let click = { let counter = counter.clone(); Callback::from(move |_s: yew::MouseEvent| { counter.set(*counter + 1); }) };

```

Password Strength Checker

This component provides a password input component while also providing feedback dependent on how strong the given password currently is. You can provide your own strength checking function and formatting functions. Right now there is no direct way to extract the password value.

rust= <PasswordStrengthInput custom = { PasswordStrengthInputProps { calculate_strength_level: None, strength_level_to_text_and_color: None, strength_callback: None }} />

Example 1 (default behaviour)

```rust= pub fn calculatestrengthlevel(value: String) -> StrengthLevel { if value.contains("secure") { return StrengthLevel::HIGH; } StrengthLevel::LOW }

pub fn onlevelchange(strengthlevel: StrengthLevel) { // use strengthlevel }

fn strengthleveltotextand_color(value: StrengthLevel) -> (String, String) { match value { StrengthLevel::LOW => ("Password not strong enough".into(), "red".into()), StrengthLevel::MEDIUM => ("Password weak but passable".into(), "blue".into()), StrengthLevel::HIGH => ("Password strong".into(), "green".into()), } }

```

Example 2 (customized behaviour)

Steps Left

Steps left draws its UI using svg, circle & lines. The width and height dictates the width and height of the svg image. You can feed however many steps and the component will dynamically position and space the steps.

rust= <StepsLeft custom = { StepsLeftProps { width: 800, height: 200, current_step: (*counter).clone(), steps: vec![ Step { label: "Check out".into() }, Step { label: "Confirm".into() }, Step { label: "Pay".into() }, ] } } />