NPM Hello World | Unified UX

We will show you how to use UUX with the npm package.

The idea is that a developer can use UUX as part of the solution to a bigger npm project. A fully kitted out example is the Transact API demo.

In this example we will simply show the essentail configuration and a screen with a subset of the UUX components.

This file is normally in your home folder. Typically ~/username for linux and C:\user\username for windows. It needs to contain the following

# Map your company's NPM scope ("@example") to the private registry URL:
@unified-ux:registry=https://repo.temenos.com/repository/npm-releases/
strict-ssl=false

# Otherwise, all other packages come from the public NPM registry:
registry=https://registry.npmjs.org/
always-auth=false

# Here we specify how the package manager should authenticate to the private registry.
# For security reasons, CI jobs should obtain their tokens from environment variables.
# The exact syntax depends on your registry provider.  If a line references an environment
# variable that is undefined, Rush will ignore that line.  This avoids producing an invalid
# string that might interfere with a developer who obtains their credentials from ~/.npmrc.

//repo.temenos.com/repository/npm-releases/:_auth="<your access token here>"
//repo.temenos.com/repository/npm-releases/:always-auth=true

A token can be obtained from Temenos, refer to our downloads page

Add @unified-ux/uux-web as a dependency like this. npm install @unified-ux/uux-web Then a new line in package.json will appear

or manually add this dependency in it "@unified-ux/uux-web": "^2021.11.0"

A full list of available versions is shown on our downloads page

The HTML file that would refer to UUX would contain references in the head section like this

    <link href="./node_modules/@unified-ux/uux-web/css/base.css" rel="stylesheet">
    <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
    <script type="module" src="./index.js"></script>

Warning: Take care not to also include UUX as standard resources as this will cause a double registration error.

Dont forget to import any UUX components before use

import "@unified-ux/uux-web/lib/amount-field";
import "@unified-ux/uux-web/lib/button";
import "@unified-ux/uux-web/lib/button-toggle";
import "@unified-ux/uux-web/lib/card";
import "@unified-ux/uux-web/lib/checkbox";
import "@unified-ux/uux-web/lib/checkbox-group";
import "@unified-ux/uux-web/lib/combobox";
import "@unified-ux/uux-web/lib/compact-flagset";
import "@unified-ux/uux-web/lib/date-picker";
import "@unified-ux/uux-web/lib/date-calendar";
import "@unified-ux/uux-web/lib/expandable-card";
import "@unified-ux/uux-web/lib/grid";
import "@unified-ux/uux-web/lib/navigation-rail";
import "@unified-ux/uux-web/lib/text";
import "@unified-ux/uux-web/lib/text-field";
import "@unified-ux/uux-web/lib/grid";
import "@unified-ux/uux-web/lib/select";

We have taken a number of UUX components and simply laid them out in a single column with default values.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>UUX Hello World</title>
    
    <link href="./node_modules/@unified-ux/uux-web/css/base.css" rel="stylesheet">
    <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
    <script type="module" src="./index.js"></script>
    <style>
        uwc-card {
            --uwc-card-background-color: lightgray;
        }
    </style>
    
  </head>
  <body style="background:#F2F7FD"> <!-- Temenos/Lightest -->
    
    <uwc-card style="background:#F2F7FD"> <!-- Temenos/Lightest -->
        <uwc-text variant="h1" color="temenos-dark" style="";>index.html rendering a subset of UUX components using npm</uwc-text>
    
        <uwc-grid container spacing="3">
            <uwc-grid xs="12">
                <uwc-text-field id="1" label="Name" value="Jane"></uwc-text-field>
            </uwc-grid>
            <uwc-grid xs="12">
                <uwc-amount-field label="Amount" currencyCode="HKD"></uwc-amount-field>
            </uwc-grid>
            <uwc-grid xs="12">
                <uwc-select id="3" label="Nationality">
                    <uwc-list-item>German</uwc-list-item>
                    <uwc-list-item>Indian</uwc-list-item>
                    <uwc-list-item>American</uwc-list-item>
                    <uwc-list-item>Norwegian</uwc-list-item>
                </uwc-select>
            </uwc-grid>
            <uwc-grid xs="12">
                <uwc-date-picker id="4" label="Date of birth"></uwc-date-picker>
            </uwc-grid>
            <uwc-grid xs="12">
                <uwc-badge position="top-right" content="4" color="temenos-primary">
                <uwc-icon color="temenos-dark">star</uwc-icon>
                </uwc-badge>
            </uwc-grid>

            <uwc-grid xs="12">
                <uwc-checkbox id="7" label="Monthly" checked></uwc-checkbox>
            </uwc-grid>
            <uwc-grid xs="12">
                <uwc-button-toggle options='[{"label":"One","value":"one"},{"label":"Two","value":"two"},{"label":"Three","value":"three"},{"label":"Four","value":"four"}]'></uwc-button-toggle>
            </uwc-grid>
            <uwc-grid xs="12">
                <uwc-checkbox-group  name="mygroup" label="My Checkbox Group" helperText="Additional information about the checkbox group"></uwc-checkbox-group>
                <script>const group = document.querySelector("uwc-checkbox-group");
                group.options = [{ label: "One" }, { label: "Two" }, { label: "Three" }];
                </script>
            </uwc-grid>
            <uwc-grid xs="12">
                <uwc-chip-group options='[{ "label": "Chip One" ,"value": "one",  "icon": "grade" }, 
                                          { "label": "Chip Two", "value": "two", "icon": "grade" }]'></uwc-chip-group>
            </uwc-grid>

            <uwc-grid xs="12">
                <uwc-compact-flagset flags='[
                {
                    "label": "Spell-check",
                    "value": "spellCheck",
                    "checked": false
                },
                {
                    "label": "Auto-correct",
                    "value": "autocorrect",
                    "checked": false
                }]'></uwc-compact-flagset>
                
            </uwc-grid>
            <uwc-grid xs="12">
                <uwc-button trailingIcon contained id="faceButton" size="large" type="reset" icon="restore" label="Reset" style="display:flex; justify-content:flex-end;"></uwc-button>
            </uwc-grid>
            
        </uwc-grid>
    </uwc-card>
</body>
</html>

Downloads

Transact API demo