wrenchnpm-ui-components

UI components for Wrench Group

HTML components for unified user experience across multiple environments

• branded user experience
• analytics
• user profile
• authentication

Dependencies

packages

npm install -g copyfiles

Configuration

Add new script get-theme-assets in package.json This will copy assets to your project Add get-theme-assets to dev and build scripts

"scripts": {
    "dev": "vite && npm run get-theme-assets ",
    "build": "vite build && npm run get-theme-assets ",
    "preview": "vite preview",
    "get-theme-assets": "copyfiles --flat node_modules/wrenchnpm-ui-components/dist/assets/css/*.css dist/assets/css && copyfiles --flat node_modules/wrenchnpm-ui-components/dist/assets/css/*.css src/assets/css "
  },

Usage

Theme

Place Theme in header or body tag Note: dev and prod may have different paths. Example: dev may include src folder

<script>
  import Theme from 'wrenchnpm-ui-components';
</script>

<svelte:head>
  <Theme theme="morrisjenkins-com" themepath="/src/lib/assets/css/" />
</svelte:head>

Button

Buttons may include href or on:click

<script>

import Button from 'wrenchnpm-ui-components';

function myEventHandler(e) {
		console.log(e.detail.id, e.detail.data);
	}

let ariaLabel = "the button";
</script>

<p>
    <Button text="Primary BTN from NPM" icon="fa-truck-front" on:click={myEventHandler} id="123" data="hello"/>
</p>
<p>
    <Button text="TEST BUTTON" icon="wg-icon-calendar" ariaLabel={ariaLabel} href="#/about" classes="a-button--md a-button--secondary" />
</p>

MSAL

Microsoft Azure AD Authentication.

This is msal.js implementation.

autoLogin="true" - invokes login on page load

<script>
import MSAL from 'wrenchnpm-ui-components';
</script>
<svelte:head>
<MSAL
    integrity="sha384-..."
    clientId="..."
    authority="https://login.microsoftonline.com/.../"
    redirectUri="/home"
    grantType="client_credentials"
    autoLogin="false"
  />
</svelte:head>

authenticationStore

This is a global utility to trigger MSAL functions manually

  authenticateStore.login()
  authenticateStore.logout()
  authenticateStore.getMsalInstance() 
  authenticateStore.initMsal(msalconfig)

Authorize

User Role Authorization Options:

1. Enables an Element block based on user role access
2. Triggers user defined functions based on user role access

This examples uses both options.

Everything with the tags are hidden unless the user has authority based on the role provided as requiredRole="Admin.supersecret" Also the corresponding functions are invoked base on authority

<script>

import Authorize from 'wrenchnpm-ui-components';

  function notAuthorized(){
		notify.setMessage('hey you! stop in the name of the law', 'warning');
	};

  function authorized(){
		console.log('welecome. you are authorized');
		notify.setMessage('welecome. you are authorized', 'info');
  };
</script>
	
<Authorize requiredRole="Admin.supersecret" onNotAuthorized={notAuthorized} onAuthorized={authorized} >
  This is top secret material
  <p>MODE: {import.meta.env.MODE}</p>
  <p>BASE URL: {import.meta.env.BASE_URL}</p>
  <p>SSR: {import.meta.env.SSR}</p>
  <p>URL: {import.meta.url.replace(/(.+\w\/)(.+)/,"/$2")}</p>
  <Button text="Secret Button" href="#/about"></Button>
</Authorize>

Notification

This component displays a notificaton message. The message is set using the notificationStore. no parameters required

<script>
import Notification from 'wrenchnpm-ui-components';
</script>

<p>
  <Notification  ></Notification>
</p>

notificationStore

global utility used to set the message and the message type for Notification component Any and all Notification components will display the message

<script>
import notify from 'wrenchnpm-ui-components';

notify.setMessage('welecome. you are authorized', 'info');
</script>