Customer UI Lib

This lib can be used in customer facing frontends.

Getting Started

To start building a new web component, run:

1. Use correct node version.

   nvm use

2. Instal clean depdendencies.

   npm ci

3. Run Sandbox project.

   npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Need help? Check out the stencil docs here.

Run Storybook

Storybook is the main component library application where most components should be presented and documented. Use this tool to play around with components and see them in action.

Start Storybook application:

npm run storybook:start

Naming Components

When creating new component tags, we recommend not using stencil in the component name (ex: <stencil-datepicker>). This is because the generated component has little to nothing to do with Stencil; it's just a web component!

Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Lynqtech generated web components use the prefix lqt.

Using components

There are three strategies we recommend for using web components built with Stencil.

The first step for all three of these strategies is to publish to NPM.

Script tag

• Put this script tag in the head of your index.html

  <!-- Modern Browsers -->
  <script type="module" src="https://customer-ui.xtk-dev.de/dist/customer-ui/customer-ui.esm.js"></script>
  <!-- Browsers that do not support modules -->
  <script nomodule="" src="https://customer-ui.xtk-dev.de/dist/esm/customer-ui.js"></script>

• Then you can use the element anywhere in your template, JSX, html etc

Angular

For now we need to write custom wrapper components in our angular application.

1. Install the npm package in your angular project.

   npm install lqt-customer-ui@latest

2. Add node_module assets to public assets in angular.json > build > options > assets:

   {
     "glob": "**",
     "input": "node_modules/lqt-customer-ui",
     "output": "./customer-ui"
   }

3. Inject into index.html with this snippet:

   <!-- load customer-ui -->
   <script nomodule src="/customer-ui/dist/esm/customer-ui.js"></script>
   <script type="module">
     import { defineCustomElements } from '/customer-ui/loader/index.es2017.js';
     defineCustomElements();
   </script>

4. Use it in angular by allowing the CUSTOM_ELEMENTS_SCHEMA in the module/component of your choice.

Updating Stencil

Stencil Docs

npm install @stencil/core@latest --save-exact

Publish

Since we have two ways to consume the application, one per npm package and one per k8s hosted sources, there are also two ways to deploy this library.

Deploy with npm

Deployments to the github npm registry are used to install this package in angular or other npm based applications.

1. Make sure you bumped the version in package.json, package-lock.json & manifest.json.
2. Build the application with npm run build.
3. Deploy to npm with npm publish.

Deploy to k8s

Deployments in k8s are used to install this package on environments that are out of Lynqtechs control and are used to make versioned rollout per client possible on foreign websites that consume this library.

Since this is a k8s service it will be automatically deployed to the dev environment on commits to the main branch.

Stage/prod deployments can be done with the regular tag-based deployment process.