@vendasta/uikit NPM

Vendasta UI components for Angular

UIKit currently includes following modules and pipes:

Modules:
- VaListModule
- VaTableModule
- VaFilterModule
- VaMultiSelectModule
- VaItemAndStatusModule
- VaSearchBoxModule
- VaActionMenuModule
- DatepickerModule
- VaLightboxModule
- VaBadgeModule
- VaImageGalleryModule
- AlertService
Pipes:
- VaSafeHtmlModule
- VaSortModule

How to Add a New Module to UIKit

All new modules should be placed in a new folder inside src. The publishing shell script has no idea with the module outside of src.
Import your new module and add it to UIKIT_MODULES in uikit.module.ts. This is not actually required, except you would like to import UIKitModule instead of import single module. Importing everything in UIKit may increase your bundle size.
Export all public components and the new NgModule related to this new module in public_api.ts. Code outside of UIKit should know which component/module I have the access.
Run node vpublish.js --force from UIKit project root to make sure your new module is compatible with AoT. If not, you can solve all errors emitted by compiler and try again.
If your new module requires a third party library, you have to explicitly set this lib as a peer dependency in package.json. Meanwhile, you need to go to rollup.config.js to set this third party library as an external library in ROLLUP_GLOBALS.

Caution: Please make sure you are importing module/component from the file that is actually exporting that module/component.

Working example 1:

    import {SomeModule} from '../some-module/some.module';
    import {SomeComponent} from '../some-module/some.component';

Working example 2:

    import {SomeModule, SomeComponent} from '../some-module/index';

../some-module/index.ts:

    export {SomeModule} from './some.module';
    export {SomeComponent} from './some.component';

The following example does not work! AoT compiler cannot generate a compiler understandable index.metadata.json:

    import {something, something-else} from '../some-module';

Steps to Publish UIKit to NPM

Make sure all your changes got approved by some people and already merged into master branch. The shell script will not let you publishing anything under the branch other than master.
Make sure you increased version number in package.json, updated README.md, and CHANGELOG.md.
Run node vpublish.js --publish. Without --publish, the script will do the compilation and copy publish ready code to publish folder inside UIKit.

For advanced user: You can build and publish UIKit (RC or regular version) under any branch by adding param --force.

ex. `node vpublish.js --force --publish`

vpublish.js

If you need another hand on this script or publishing procedures, try node vpublish.js --help.

Adding shimmer to your stencils

To add the shimmer class in your package and use it in your component: go to the base <app>/src/styles.scss and add @import '~@vendasta/uikit/uikit'; and @include va-stencil(); Add the shimmer class to the div you want to use as a stencil

Bounded material inputs

If you're like me, you hate the default style of material input. To switch to a sexier, bounded input style, include the bounded inputs mixin in your SCSS file by adding @import '~@vendasta/uikit/uikit and @include bounded-inputs().

Fix snackbar not showing `SUCCESS` or `ERROR`

If in your code you have a line such as this.alertService.successSnack('some message'); but can't see a highlighted green SUCCESS inside the snackbar you're missing @import '~@vendasta/uikit/uikit in your project's src/style.scss.