# tf-lib

> A library of re-usable UI components built using Angular 6

Latest version **0.0.3** (published 2018-09-14) · SEE LICENSE IN LICENSE license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install tf-lib
pnpm add tf-lib
yarn add tf-lib
bun add tf-lib
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2018-09-14 |
| First published | 2018-09-11 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 88.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tfadmin |
| Keywords | UI, Library, Angular |

## Links

- npm: https://www.npmjs.com/package/tf-lib
- npm.io page: https://npm.io/package/tf-lib

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2018-09-14
- 0.0.2 — 2018-09-12
- 0.0.1 — 2018-09-11

## README

# 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.

---
_Source: https://npm.io/package/tf-lib · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._