npm package: @informaticon/lib.nodejs.base.template
Description: Informaticon Typescript and SCSS library
Author: Informaticon AG
Latest version: 0.1.0

# lib.nodejs.base.template

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

This package contains everything frontend-related of our informaticon template. This package is published to npm
as [@information/lib.nodejs.base.template](https://www.npmjs.com/package/@informaticon/lib.nodejs.base.template).
It is a new version of the [@informaticon/base-assets](https://github.com/informaticon/lib.npm.base.template)
package ([Guide for migration](./MIGRATE.md)).

## Prerequisites

Your project is already prepared to use npm packages, and you already have a bundler like Webpack, Rollup, or something
similar set up.

If you are unsure on how to set that up in a Play! project, check out the
internal [Using Webpack with Play! Framework](https://informaticon.slab.com/posts/using-webpack-with-play-framework-k80xp7eh)
guide.

## Contributions

Please see [CONTRIBUTING.md](./CONTRIBUTING.md) for information on contributions to this package.

## Usage

- add the [lib.play.base.template](https://github.com/informaticon/lib.play.base.template)
  dependency in your project.
  Please see the [README](https://github.com/informaticon/lib.play.base.template) for more information.

  :handshake: Compatibility

  | Version  | `lib.play.base.template` |
  | -------- | ------------------------ |
  | `0.1.0+` | `1.0.0+`                 |

- install the package via npm
  ```sh
  npm i @informaticon/lib.nodejs.base.template -D
  ```
- import and init components used in your application

  > The needed stylesheets are already imported via the InfComponents

  ```typescript
  import { InfNotification } from '@informaticon/lib.nodejs.base.template/notification';
  import { InfCollapsible } from '@informaticon/lib.nodejs.base.template/collapsible';
  import { InfConfirm } from '@informaticon/lib.nodejs.base.template/confirm';
  import { InfDialog } from '@informaticon/lib.nodejs.base.template/dialog';
  import { InfNavToggle } from '@informaticon/lib.nodejs.base.template/nav';
  import { InfPopup } from '@informaticon/lib.nodejs.base.template/popup';
  import { InfTabulator } from '@informaticon/lib.nodejs.base.template/table';
  import { InfTour } from '@informaticon/lib.nodejs.base.template/tour';
  import { ChoicesController } from '@informaticon/lib.nodejs.base.template/choices';
  import '../stylesheets/main.scss';

  export class Loader {
  	constructor() {
  		document.addEventListener('DOMContentLoaded', () => this.ready());
  	}

  	private ready(): void {
  		let collapsibles: InfCollapsible[] = InfCollapsible.init();
  		let confirms: Map<string, InfConfirm> = InfConfirm.init();
  		let dialogs: InfDialog[] = InfDialog.init();
  		let navToggle: InfNavToggle = InfNavToggle.init();
  		let popups: InfPopup[] = InfPopup.init();
  		let tabulators: InfTabulator[] = InfTabulator.init();
  		let tours: Map<string, InfTour> = InfTour.init();

  		new ChoicesController().ready();

  		// the noficiation don't have to be initalized
  		InfNotification.showInfo('Hello World!');
  	}
  }
  new Loader();
  ```

  > The init functions provide a Map<> structure where you can access the specific item for components that are identified by a specific name,
  > other components are simply returned as an array of components.

- add the main stylesheet to enable informaticon layout in your `main.css` file

  ```scss
  @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/layout/main.css';
  ```

  > You can overwrite CSS3 variables if you reassign them after this import.

  > :bulb: **Importing scss instead of compiled css**\
  > You can also import the source SCSS code instead of the compiled CSS:
  >
  > ```
  > @import "~@informaticon/lib.nodejs.base.template/dist/stylesheets/layout/main.scss";
  > ```
  >
  > It's recommended to use the compiled CSS and the CSS3 variables instead of the SCSS source though.

- you can add more stylesheets for elements:

  ```scss
  //if you want to use the scss functions you have to import them as scss
  @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/util/mixins.scss';
  @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/util/functions.scss';

  @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/elements/input.css';
  @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/elements/datepicker.css';
  @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/elements/button.css';
  @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/elements/card.css';
  @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/elements/code.css';
  @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/elements/hr.css';
  @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/elements/tree.css';
  ```