tf-lib v0.0.3

tf-lib Angular Library Project

The tf-lib UI Component Library is built as an Angular library. This library is hosted on npm and is can be used to create applications. This is currently used by dsp-ui application to build a digital sales application.

This library delivers low level application specific components like email, ssn, phone which are then composed to deliver higher order components.

Dev Environment Setup

Steps to set up a local development environment:

1. Clone this project on your local machine

   $ git clone git@bitbucket.org:terafina/tf-lib.git

2. Install all project dependencies by running this from within the project directory.

   $ npm install

3. Start the library build command in watch mode. With this, any changes you make in the library code will be immediately built and available to other projects in the same workspace that import it and use it.

   $ ng build tf-lib --watch

4. Start the dev server for the top level Angular app project. This is a simple Angular application project that imports the tf-lib library as a dependency and renders a simple page that allows you to brows the various UI components part of it.

   $ ng serve

5. Open http://localhost:4200 in browser.

Package and Publish to npm

Steps to build a production package of tf-lib and publish to npm. All command sot be run from the <project-root>:

1. Make sure you are logged in to npm on the console using the tfadmin account.

   $ npm login

2. You can check if you're correctly logged in using this command

   $ npm whoami

3. Ensure that the version in the tf-lib package.json is suitably incremented (following SemVer). Note that npm does snot allow _re-_publishing of a package with a name-version combination that's already published.
4. Run the below command to create a production build and package up the built artifacts.

   $ npm run package

5. This will create the following package: <project-root>/dist/tf-lib/tf-lib-X.X.X.tgz
6. You can now publish this to npm

   $ npm publish ./dist/tf-lib/tf-lib-X.X.X.tgz

Known Issues/Limitations/Assumptions

• Issue ng-packagr, which is used by he Angular CLI to build library project (like our tf-lib), does not currently support global .scss files. There are workarounds for this, which essentially boil down to setting up our own tooling for .scss compilation and bundling. Otherwise, we need to @import any global .scss files in the component specific .scss file for each component. Some references around this issue:
  • https://medium.com/@Dor3nz/compiling-css-in-new-angular-6-libraries-26f80274d8e5
  • https://github.com/ng-packagr/ng-packagr/issues/273

Design Consideration for the Future

• Library Naming and Scoping

  In the future we may want to consider changing the name of our library to follow Scoped package naming. Of course, this is not just about naming, but also about how our library is hosted (i.e. public/private npm registry) and how access to it is controlled etc. A scoped package can help in that. Also, it will be more in keeping with the Angular way of naming packages (e.g. @angular/core, @angular/material, @angular/cdk etc.).

  Read more about Scoped packages here: https://docs.npmjs.com/misc/scope

  Proposed scoped package name: @terafina/tessellate. Motivation behind the name tessellate: It starts with a T (as in T erafina) and it's meaning - cover (a plane surface) by repeated use of a single shape or multiple complimentary shapes, without gaps or overlapping; like a mosaic - is a metaphor for composing a higher level UI by laying out smaller UI components.