ml-shared-components v0.0.1

README

The purpose of this module is to standardize components and theming across all the application in ML ecosystem.

Install

  $npm install @madisonlogic/shared-components --save

Use

Usage - Import

It is mandatory for all the ML applications to import the shared-components library as it holds reference to common theme as well as custom components.

Import the module to app.module.ts file and include in imports array

import { SharedComponentsModule } from '@madisonlogic/shared-components'

imports: [
	SharedComponentsModule
]

Add the reference to the common theme SCSS from the library @madisonlogic/shared-components into the applicatio's style.scss present at src/style.scss. Here on, any Angular material's components will use the custom theme for rendering built in components.

@import  "~@madisonlogic/shared-components/ml-theme";

How to add components to this library

Run the below command to generate the component.

	`ng generate component component-name --project shared-components` 

You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.Note: Don't forget to add --project shared-components or else it will be added to the default project in your angular.json file.

ex. 'ml-nav-bar' under shared-components. Running the above command will generate those compoenents on same level as the nav-bar.

Dev Testing for newly generated components

Developers can test the newly generated components by simply using them in app.component.html in src folder. Run the app by executing the steps in the below 'Steps to Run App' section.

Example: Please refer the below code in app.component.html. This refers to the components in projects folder thereby eliminating the step of building these components for testing. Once the components are ready to be published, you can build them by running npm run package or follow above steps to publish if already packaged.

<lib-ml-nav-bar [navItemData]="navItemData"></lib-ml-nav-bar>

Steps to run App

• npm install
• ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

How to publish this library

To publish the components, simply run the npm run publish. Note, the library should be packaged before you publish it.

Following are the commands for your reference.

"scripts": {
    "start": "npm run package",
    "copyStyle": "copyfiles -u 1 \"src/*.scss\" \"dist\"/shared-components",
    "updateVersion": " cd ./projects/shared-components && npm version patch",
    "build": "ng-packagr -p ./projects/shared-components/ng-package.json"
    "package": "npm run build && npm run copyStyle",    
    "publish": "npm run updateVersion && cd dist/shared-components && npm publish"    
  }