Unified Angular Components

This library consists of Clarabridge's Angular UI Components that are shared among multiple projects. The library was generated with Angular CLI for Angular 11.

For a full list of the available components, visit our Storybook documentation (note: requires OpenVPN connection)

Basic usage

npm install @clarabridge/unified-angular-components;

Add the required module(s) to the project's module file.

import {InlineHelpModule} from '@clarabridge/unified-angular-components';
...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    InlineHelpModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

You can import individual modules, such as InlineHelpModule, or import UnifiedAngularComponentsModule which will import all the components.

The components can then be used as such:

<cb-inline-help>
</cb-inline-help>

Contributing

We fully welcome contributors, either with fresh code or improvements to existing code.
Contributors are asked to please follow the below guidelines:

• Create a branch with your changes and put in a pull request for review
• All tests and implementation must be written in typescript. No exceptions.
• Be mindful that all code in this library is meant to be shared across applications, and therefore should try to avoid including code that is app-specific, or using app-specific terminology
• Include unit testing for your work
• Carefully consider accessibility
• Create/update Storybook documentation for components
• Be sure to follow Angular style recommendations

Code scaffolding

Run ng generate component component-name --project unified-angular-components to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project unified-angular-components.

Note: Don't forget to add --project unified-angular-components or else it will be added to the default project in your angular.json file.

Set up custom schematics for story scaffolding

• Set up the custom schematics using $ npm run build:schematic-win for a Windows machine, or $ npm run build:schematicfor a Mac machine from the root of the repository.
  • This will allow you to use Angular schematics to generate a story for a component.
  • You can generate a story by running ng g unified-angular-components:story --name component-name --module module-name
  • --name is a required argument, and --module is an optional argument
  • This will create a basic story, componentName.stories.ts, in the folder where it was run, or in src/lib if run from the root of the repository.

Build

Run ng build unified-angular-components --prod to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build unified-angular-components --prod, go to the dist folder cd dist/unified-angular-components and run npm publish.

Running unit tests

Run ng test unified-angular-components to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.