neuro-graph1 v0.0.10

@sutterhealth/widgets

General Notes

This project was created by a yeoman generator:

generator-angular2-library

Starting a new project

Install yo generator

$ npm install -g yo
$ npm install -g generator-angular2-library

make a new directory and cd into it:

$ mkdir angular-library-name
$ cd angular-library-name

and generate your new library:

$ yo angular2-library

And fill up the questions to generate a clean library project. When the generator asks for you library name make sure you name your package using Sutter Health prefix (so library will be private):

@sutterhealth/<package-name>

Install the np tool and add the script script to your root package.json

$ npm install np -g

"scripts": {
    ...
    ...
    "release": "np --yolo --any-branch --no-publish"
  },

Managing module dependencies

Install dependencies to your proyect, for example Material and Flex-layout, as Development dependencies

$ npm install @angular/material @angular/flex-layout --save-dev

Also add the dependencies to /src/package.json <-- pay attention to this file location, is NOT the on on the root directory.

This will alert the host project to install the necessary dependencies.

"peerDependencies": {
    ...
    "@angular/flex-layout": "^2.0.0-beta.9",
    "@angular/material": "^2.0.0-beta.8",
  }

Import the dependencies into your library, now you can develop with the dependencies on your library.

import { MdToolbarModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MaterialModule } from '@angular/material'

Consuming your library for development

To consume your library before you publish it to npm, you can follow the following steps:

Clone repo and install dependencies

Clone this repo and create a branch out of staging branch.

$ git clone <repo-name>
$ npm install 

Building your module

Compile your library files:

$ npm run build

You can compile the library on each change:

$ npm run build:watch

Linking your library to your project

From the /dist directory, create a symlink in the global node_modules directory to the dist directory of your library:

$ cd dist
$ npm link

Make sure your main angular app does NOT have installed your published library by:

$ npm uninstall @sutterhealth/widgets

In your Angular main app using your module, link the global @sutterhealth/analytics directory to node_modules of your App directory by typing:

$ npm link @sutterhealth/widgets

If this step does not work or shows and error, try typing the full path for your local npm module:

$ npm link [path of your linked module], e.g.: /home/user/git/ui-toolkit-widgets/dist

Now, your Angular project will use your local builds as node module.

To run the application with the library link you will need to run it this way to preserve the symlinks:

$ ng serve --preserve-symlinks

To unlink the library simply remove the library:

$ npm uninstall @sutterhealth/widgets

Code merge and pre-publishing process

This process will allow you to create an alpha version of your changes to the library and be able to test it before release a stable version.

1. Create a pull request with your changes on the library to staging branch.

2. Create a pull request in your angular main app that includes library implementation. Make sure this compiles ahead of time:

   $ ng build --prod

3. Wait for code merge

4. Checkout staging branch and run build:

   $ npm run build 

5. Create a pre-release by running:

   $ cd src
   $ npm run release 

   This step will ask you for the version you want to upgrade, specify that you want a pre-release, so you will end up with a version number similar to x.x.x-0. The -0 part is the prepatch, no packages will be updated automatically to this version.

6. Publish you pre-release version:

$ cd dist
$ npm publish

7. Test your pre-release version on main angular app by installing your published alpha version (do not use --save flag):

$ npm uninstall @sutterhealth/widgets (to unlink)
$ npm install @sutterhealth/widgets@x.x.x-0 (to install alpha)
$ ng serve --prod

8. Do not forget to commit your package.json that includes version bumps

Publishing the module

Lint your module

To lint all *.ts files:

$ npm run lint

Make sure all lint issues are resolved before publishing your module. Also review that your sample app integrating the module builds for production with ng build --prod

Publishing

You will need an npmjs account and have publish rights on the module.

Login to your npm account on your console:

$ npm login

After building run the np script from the root directory, you will be prompted to bupm the package version, select the type of release you are developing (patch, minor, major). The script will run the tests, clean your working tree and push a tag on Git repo:

$ cd src
$ npm run release

Publish your module:

$ cd dist
$ npm publish

Do not forget to commit to git all version bumps and merge to master branch.

Consuming your library after npm published

Installation

Once you have published your library to npm, you can import your library in any Angular application by running:

$ npm install @sutterhealth/widgets --save

Usage

Demographic Header:

The header takes demographicData, appConfig and userObject, example:

<sh-demographic-header [appConfig]="appConfig" [demographicData]="demographicData" [userObject]="userObject"></sh-demographic-header>

Parameters must contain at least the following properties: appConfig

• name
• version

demographicData

• name.first
• name.last
• dateOfBirth
• medicalRecordNumber
• sex
• status
• statusMHO (optional)

userObject

• name

Documentation

For Classes Documentation refer here -> https://sutterrdd.github.io/ui-toolkit-widgets/