ComponentsLib

This is the UI components library for BlueKey frontend projects.

Table component

The bluekey-core-table component is used to display a table with the data provided through the table input. It also provides event outputs for rowClickEvent and addRowEvent.

Inputs

table: This input is used to pass the Table data to the component. showLoader: This input is used to pass a boolean toggling a loader. highlightRowIdentifier: This input is used to highlight a row in the table (used for deeplinking). error: This is the error object returned by the API's response. It is used to display an error message. showLoader is used to toggle a loader.

Outputs

rowClickEvent: This event is emitted when a row in the table is clicked, and it provides the clicked row data. addRowEvent: This event is emitted when the add row button is clicked, and it provides the command button data consisting of: updateTableEvent: This event is emitted when the save changes button is clicked, and it provides with the patchUrl and array with rows that has been affected. commandButtonEvent: This event is emitted when a command button in a row is clicked. It provides the commandButton object, which can be handled as wished in the place of usage. deleteRowsEvent: This event is emitted when the delete rows button is clicked, and it provides the array with the ids of the rows that should be deleted.

Example usage

<bluekey-core-table
    [table]="tableData"
    [error]="error"
    [highlightRowIdentifier]="identifier"
    [showLoader]="boolean"
    (addRowEvent)="handleFunction($event)"
    (rowClickEvent)="handleFunction($event)"
    (updateTableEvent)="handleFunction($event)"
    (commandButtonEvent)="handleFunction($event)"
    (deleteRowsEvent)="handleFunction($event)"
></bluekey-core-table>

Sidebar Component

The bluekey-core-sidebar component is used to display a navigation sidebar with links provided through the navLinks input. It allows customization of the sidebar's style via the sidebarStyle input and controls the expansion state of the sidebar.

Inputs

navigation: This input is used to pass the navigation links to the sidebar. Each link should be an object of type NavLinks, which includes properties for the link text, URL, img, icon or action.

sidebarStyle: This input is used to customize the sidebar's appearance, including its background color and text color. The expected object is of type SidebarStyle with properties for backgroundColor and textColor. profile is used to display the user's profile.

Outputs

logoutClicked: This event is emitted when the logout button is clicked. loginClicked: This event is emitted when the login button is clicked. utilityLinkClicked: This event is emitted when a utility link is clicked.

Properties

isExpanded: A boolean property that controls the expansion state of the sidebar. It is true by default, indicating that the sidebar is expanded.

Example Usage

<bluekey-core-sidebar
    [navigation]="navigation"
    [sidebarStyle]="{
        backgroundColor: '#333',
        textColor: '#fff'
    }"
    [profile]="profile"
></bluekey-core-sidebar>

Error component

The bluekey-core-error component is used to display an error message. It is used in the following scenarios:

• When an API request fails
• When the API response returns an error
• When the API response returns an error with a custom message

Inputs

error: This is the error object returned by the API's response. It is used to display an error message.

Example

{
    statusCode: 404,
    message: 'Resource not found',
}

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

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

Build

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

Publishing

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

Publish with tag

After building your library with ng build components-lib, go to the dist folder cd dist/components-lib and run npm publish --tag <tag>. Tag could be for "itochu"