aix-ui-library/README.md

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

# 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](https://www.npmjs.com/package/react)
* [styled-components](https://www.npmjs.com/package/styled-components)

### Installing


First, install the [aix-ui-library](https://www.npmjs.com/package/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'
```

<br />
Finally, in the files you want to add the package components to, simply include the relevant component.

```
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 `SiteNavItem`s 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 `SiteFooterItem`s 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
```