AI X-Lab Shared UI Library

React component library + Other shared UI resources for AI X Lab

Getting Started

To get started, simply install ensure the node package and relevant package dependencies are installed.

Prerequisites

Let's start by making sure the required dependencies are installed.

Here are the packages you would need:

• react
• styled-components

Installing

First, install the aix-ui-library node package:

npm install aix-ui-library

Next, in your top level jsx file (usually index.jsx), include the required stylesheets:

import 'aix-ui-library/src/style/style.css'

import {SiteButton} from 'aix-ui-library';

This line will include SiteButton into the relevant jsx file.

Elements

SiteButton

The SiteButton component is an inline-block display button with the ability to hyperlink or trigger a callback function when clicked.

| Name | Type | Default | Description | | ------------- |:----------:|:---------:|:------------------------------------------------:| | buttonLink | String | # | hyperlink for the button | | onClick | function | null | callback function to customize button behavior | | className | CSS class | null | button css class style | | newTab | Boolean | false | whether to open the hyperlink in a new tab or not|

SiteNavItem

The navigation item component with the ability to hyperlink or trigger a callback function when clicked.

| Name | Type | Default | Description | | ------------- |:----------:|:---------:|:------------------------------------------------:| | itemLink | String | # | hyperlink for the nav item | | onClick | function | null | callback function to customize item behavior | | className | CSS class | null | item css class style | | newTab | Boolean | false | whether to open the hyperlink in a new tab or not|

SiteFooterItem

The footer item component with the ability to hyperlink or trigger a callback function when clicked.

| Name | Type | Default | Description | | ------------- |:----------:|:---------:|:------------------------------------------------:| | itemLink | String | # | hyperlink for the nav item | | onClick | function | null | callback function to customize item behavior | | className | CSS class | null | item css class style | | newTab | Boolean | false | whether to open the hyperlink in a new tab or not|

Components

SiteNavbar

SiteNavbar accepts SiteNavItems to append navigation links/buttons. Call SiteNavbar as below:

 <SiteNavbar>
	 <SiteNavItem onClick={callback}>Share</SiteNavItem>
     <SiteNavItem itemLink="#######">About</SiteNavItem>
 </SiteNavbar>

| Name | Type | Default | Description | | ------------- |:----------:|:---------:|:--------------------------------------------:| | containerClass| CSSClass | null | css class style for the navbar |

SiteFooter

SiteFooter accepts SiteFooterItems to append footer links. Call SiteFooter as below:

 <SiteFooter>
	 <SiteFooterItem onClick={callback}>Terms of Use</SiteFooterItem>
     <SiteFooterItem itemLink="#######">License</SiteFooterItem>
 </SiteFooter>

Updating

Updating to the latest version is easy!

npm install aix-ui-library@latest