@canyaio/common-lib

CanyaCommon

Reusable components across all CanApps

Important

If you plan to add a new library component or edit an existing one, your first step should be to update the ./projects/common-lib/package.json version.

This will prevent overwriting the npm package registry and therefore all of the CanApps that use the package.

Getting started

First, clone or fork this repo and perform a cd Common; npm install command to download the required dependencies.

Creating a new reusable component

Use the ng generate component <component-name> --project=common-lib command to add a new component to the common library.

Then, add the component class name to the ./projects/common-lib/src/lib/common-lib.module.ts file.

Styling the component

Create a new file .scss inside ./src/assets/sass/lib//.component.scss

Open a new terminal tab and run gulp watch in the project root.

Gulp should watch for changes in the file you created and output it in the corresponding library component directory.

Look at the header.component.scss reference.

Configuring the component

After generating a new common-lib component, you can proceed to add the functionality to it.

The header.component.ts is a good reference of how to add @Input() properties to a component.

Important

Don't forget to add the encapsulation: ViewEncapsulation.Native, line to the @Component declaration. This will encapsulate the component styles during the build.

@Component({
  selector: 'canyalib-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
  encapsulation: ViewEncapsulation.Native,
})

Building the component

Before building your component, make sure that you have added it to the public_api.ts file.

Execute a ng build --prod common-lib command in the project root and add your component tag to app.component.html.

Do ng serve to run the app and see your component.

Testing your component

TODO: how to do unit testing

Publishing the component

When your component features are working as expected, it is time to build, package and upload your component to the npm @canyaio registry.

First, run a npm run package command. A *.tgz file will be created with the package version appended to it.

Secondly, do a npm publish dist/common-lib/canyaio-common-lib-<version>.tgz --access public

Using the component in an external application

To use your new component, update or install the @canyaio/common-lib library into your angular ^6.0.0 application: npm i @canyaio/common-lib@<version>