ng-librarian

Micro-framework for component library abstraction.

• framework: standard component abstractions
• structure: domain-driven project folder structure
• databinds: simplified databinding directives
• extension: productive prototype extensions
• samplings: template-driven encapsulation
• lifecycle: unified lifecycle methods
• servicing: jwt, api and idb services

Structure

Isolated app screen components (branching) from lib control components (tranversal) for reuse purpose.

APP                             LIB
 ├ home/                         ├ classes/
 │  ├ home.component.html        │  ├ sample.ts
 │  ├ home.component.css         │  └ index.ts   
 │  ├ home.component.ts          ├ components/
 │  └ index.ts                   ├ directives/
 ├ app.component.html            ├ extensions/
 ├ app.component.css             ├ services/
 ├ app.component.ts              └ shareds/
 ├ app.service.ts                   ├ interfaces.ts
 └ app.module.ts                    ├ modules.ts
                                    └ index.ts  

Abstractions

Lean component abstractions useful facade resources in base ControlComponent and specialized abstraction as below.

                   [ControlComponent]  
                           ▲
          ┌────────────────┼─────────────────┐
   [InputComponent] [OutputComponent] [ThruputComponent]
      read-write        read-only       wrapper/parent

Example of component abstraction usage.

@Component({selector: 'field', template: '<b>It works!</b>' })
export class FieldComponent extends InputComponent  { ... }

Control components with its main attributes:

• InputComponent (name, fail, info, rows)
• OutputComponent (that, wrap, path)
• ThruputComponent (side, gaps)

The base control component contains guid, html, data, bind, size, click, style, class, hidden, disabled, on(stage), fix(attrs), render(...). Some those members is a facade for some usual resources:

• guid: autogenerated id attribute
• html: the current HTML element
• bind: formControlName equivalent
• data: ngModel/formGroup equivalent
• on(stage): facade for life-cycle hooks
• fix(attrs): fix boolean attributes as HTML flags
• render(...): easy page refresh with changeDetectorRef.detectChanges

| size | cast | hidden | view | gone | done | |:-:|:-:|:-:|:-:|:-:|:-:| | ngOnInit | ngAfterContentInit | ngOnChanges | ngAfterViewInit | ngOnDestroy | ApplicationRef.isStable |

Bindings

Simplified reactive form data binding directives with [data] and [bind] (it doesn't require to tranform data in FormGroup), and also works as template-driven.

<!-- simplified reactive form -->
<form [(data)]="car"> 
   <input bind="model">
</form>

<!-- template-driven -->
<input bind="car.model">

Stylings

All components inherits class and style hostbinding and is based in those CSS variables --default, --primary, --inverse, --success, --warning, --failure, also with some font variables as font-size, font-name, font-color. Default styles could be add in angular.json as './node_modules/ng-librarian/lib/index.css' in "styles".

...
"styles": ["./app/styles.css", "./node_modules/ng-librarian/lib/index.css"],
...

Extension

It has self-generate unique id for each HTML element of component (extensible by guidfy method) and prototype extensions helpers

| Class | Prototype method extensions | |-|-| | String | encrypt(); decrypt(); equals(that); equalize()**; contains(that); toDate(); toObject(format); toBoolean(); toCamelCase() | | Array | take(); distinct(); toObject(); remove(f); min(f); max(f); sum(f); flatMap(f) | | Date | getLastMonthDay(); toDateTimeString(dateType, timeType); toDateString(type); toTimeString(type); toDateModel(); toTimeModel(); toNumber(); toArray() | | Number | toDate(); format(); toMoney(digits, typing); toBoolean() | | Object | let(field, value); stringify(); dictionarify() | | Element* | toObject(); toArray(); toComponent(); maskfy(); databind(data); toMoney(digits); isCommandKey(); get value; set value; get refer; |

Also some static class members helpers

// global label to render boolean values
Boolean.TRUE = "yes"
Boolean.FALSE = "no"

// validate any kind of data as Date
Date.isDate(value)

// some static object key helpers
Object.hasKeys(obj, 'field1', 'field2')
Object.hasTypeOf(obj, 'field1', 'string')
Object.hasInstanceOf(obj, 'field2', Date)

Servicing

Some common service already implemented.

• idb: IndexedDB async facade
• jwt: HTTP interceptor for Axios
• sso: authentication service
• app: alerts and loading state
• api: common API service

Lifecycle

Hooks are unified in 'on' method with Stage argument as aliases for Angular life-cycle hooks:

| init | load | bind | view | gone | done | |:-:|:-:|:-:|:-:|:-:|:-:| | ngOnInit | ngAfterContentInit | ngOnChanges | ngAfterViewInit | ngOnDestroy | ApplicationRef.isStable |

public override on(stage: Stage): void { if (stage == "gone") { /* Something in ngOnDestroy */ }  }

Samplings

Sample library for template-driven component library abstraction by concrete class extensions.

a) InputComponent (name, fail, info, rows)

| tag | variations | attributes | |-|-|-| | field | text, coin, date, time , mail, pass | mask, hint, cent, test, type, auto | | combo | select, option, toggle | none, type, multiple | | range | number, slider, switch | min, max, step, type | | agenda | day, week, month (?) | week, month, current, selected |

b) OutputComponent (that, wrap, path)

| tag | variations | attributes | |-|-|-| | icon | font, file | Spin, fill, type | | alert | success, failure, warning | type, text, manager |

c) ThruputComponent (side, gaps)

| tag | nestings | attributes or contents | |-|-|-| | form[data] | input, output | aside | | tab-manager | [tab] | ... | | menubar | menu, submenu | route, label, roles, menus |