Alto UI

Zeroheight Documentation

Prerequisites

Before setting up the project, ensure you have the following installed on your local machine:

• Node.js: v20.11.1 (as recommended)
• NPM: Comes with Node.js
• nvm: (Optional, but recommended for managing Node versions)

Local Setup

Clone the repository from our github repository here: https://github.com/IAG-Loyalty/alto-ui

You will need to setup a personal access token.

Once cloned simply run

npm i

This should install the avios tokens package too which can be located in your node_modules folder.

Running Linting & Formatting

For linting and formatting we use ESLint and Prettier. You can run with the following command:

npm run lint

Running Tests

If you want to run the tests for this project, you can do so with the following command:

npm run test

Running Accessibility Tests

If you want to run accessibility tests for this project, you can do so with the following command:

npm run test-a11y

Commiting code

We're using commitizen to enforce conventional commits.

git add . npm run commit

Running Storybook Locally

To run storybook locally run the following command

npm run storybook

Shared Spaces content-type docs are generated with npm run contentful:sync (see .storybook/contentful-addon/README.md).

Creating a new component

To scaffold a new component run the following command:

npm run generate

Bundling the package with vite

If you want to bundle the components for production, use the following command to create an optimized build:

npm run vite

To create static Storybook files

We need to create static storybook files for our public domain site to use. Run the following command

npm run build:storybook

Run Chromatic (Dev)

Run the following command to analyze our code and send to chromatic

npx chromatic --project-token <YOUR_PROJECT_TOKEN>

Project Token can be found in the chromatic dashboard

For Application using our package

Install Package in Applications

Install the Avios Alto Component Library package

npm install @alto-avios/alto-ui

Importing Alto Components

After following the installation process, you can import and use Alto-UI components in your React application. Here is an example of how to do it.

import { Button } from '@alto-avios/alto-ui';

const App = () => (
  <div>
    <Button>Click Me!</Button>
  </div>
);

export default App;

Update

Check if an update exists:

npm outdated

If an update is available, update the package:

npm i @alto-avios/alto-ui@latest

Node

Make sure to use Node -v 20.11.1.

Follow these steps to verify and install the required Node.js version for this project: Open your terminal.

Check the current version of Node.js installed on your system by running the following command:

node -v ​ Check the output. If it is not version 20.11.1, you will need to install this version.

If you don't have a Node version manager, install one. We recommend using NVM (Node Version Manager).

Install Node.js version 20.11.1 using your version manager. If you're using NVM, the command is:

nvm install 20.11.1 ​ Once the installation is complete, verify the installation by checking the Node.js version again:

node -v ​ The output should now be 20.11.1. You can now proceed with the project setup.

License

This project is licensed under the terms of the MIT license.