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)
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>
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
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 yourangular.json
file.
- Set up the custom schematics using
$ npm run build:schematic-win
for a Windows machine, or$ npm run build:schematic
for 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 insrc/lib
if run from the root of the repository.
Run ng build unified-angular-components --prod
to build the project. The build artifacts will be stored in the dist/
directory.
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
.
Run ng test unified-angular-components
to execute the unit tests via Karma.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.