wrenchnpm-ui-components
v0.1.3
Published
UI library for Wrench Group globally compatible components
Downloads
4
Readme
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:
- Enables an Element block based on user role access
- 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>