---
# System prepended metadata

title: FIS3 UI

---

<img src="https://i.imgur.com/IZetKce.png" alt="FIS3 logo" title="FIS3" align="right" height="182px"/>

# FIS3 UI
**FIS3 UI** is a library of UI components that can be used by an application developer to create individual FIS3 applications<br>that serve to manage the day-to-day operations of Hapag-Lloyd’s business.

The goal of **FIS3 UI** is to provide a set of ready-made visual components for building unified interfaces.


## Built with
* [TypeScript](https://www.typescriptlang.org)
* [React](https://reactjs.org)
* [Redux](https://redux.js.org)
* [Linaria](https://github.com/callstack/linaria)

## Getting started

### Prerequisites
- [Git](https://git-scm.com/downloads)
- [Node.js](https://nodejs.org) >=16.10.0
- [Yarn](https://yarnpkg.com/getting-started/install)

### Install
1. Clone the repository:
```bash
git clone git@gitlab.hlag.altemista.cloud:fis3/commons-ui/commons-ui-frontend.git
```
2. Go to the root folder: 
```bash
cd commons-ui-frontend
```
3. Install the dependencies:
```bash
yarn
```

### Launch
```bash
yarn start
```
This command spins up a local development web server, which runs on port `4443` and mocks the middle tier API for local development. To ensure that everything went smoothly, visit https://localhost:4443/shell/shipment/app/I7000 in your browser. There you should see an example application. 

> In case you receive an error that your connection is not secure, type `thisisunsafe` on your keyboard or use the advanced option in your browser to proceed.

### Test
* **Unit and integration tests**

To run all unit and integration tests:
```bash
yarn test:unit
```
To run one particular test file:
```bash
yarn test:unit:single FILE_PATH
```
Where **FILE_PATH** is the path to the test file location in the project 
(e.g. `packages/core/components/Button/__tests__/Button.unit.tsx`). 

* **Browser tests**

We run our browser tests in [Docker](https://www.docker.com) container. [Here]() is described how to install it on your machine and pull the required Docker image.

This command runs all browser tests:
```bash
yarn test:browser
```
For a single browser test run use:
```bash
yarn test:browser:single FILE_PATH
```
More useful information about our testing approach and techniques can be found [here]().

### Build
```bash
yarn build
```
Creates a production build in the `target/build` folder.

## Contributing

>NOTE: The section is currently under development. Some links may be temporarily broken.

1. **Creating a branch**
First of all, familiarize yourself with the [Git workflow]() we are using in this project. Then, to actually start the development process, [create a new branch]() with the [appropriate name]().
2. **Making changes**
Before making any changes to the code base, we suggest you to check our [coding guidelines](https://gitlab.hlag.altemista.cloud/fis3/commons-ui/commons-ui-frontend/-/blob/master/doc/coding-guidelines.md). In order to better understand the project structure you can check this [document](). We've also collected a bunch of other useful development-related information [here]().
3. **Covering with tests**
If you've implemented a new feature or fixed a bug, it's always a good idea to cover your work with tests. In [this document]() you can find some helpful information about different types of tests we use in our project, testing guidelines, practices, and so on.
4. **Merging**
At this point, it's time to introduce the world to the incredible work you've done. [Here]() we've covered the whole process from preparing a local branch and creating a merge request to merging your changes into the master branch.

Other useful information can be found in the `docs` [folder]().

## Related documents
* [Code of Conduct](https://gitlab.hlag.altemista.cloud/fis3/commons-ui/commons-ui-frontend/-/blob/master/CODE_OF_CONDUCT.md)
* [Code of Contributing](https://gitlab.hlag.altemista.cloud/fis3/commons-ui/commons-ui-frontend/-/blob/master/CODE_OF_CONTRIBUTION.md)
* [Contributing](https://gitlab.hlag.altemista.cloud/fis3/commons-ui/commons-ui-frontend/-/blob/master/CONTRIBUTING.md)
* [Coding Guidelines](https://gitlab.hlag.altemista.cloud/fis3/commons-ui/commons-ui-frontend/-/blob/master/docs/coding-guidelines.md)
* [Definition of Done](https://gitlab.hlag.altemista.cloud/fis3/commons-ui/commons-ui-frontend/-/blob/master/docs/definition-of-done.md)
* [Docker Configuration](https://gitlab.hlag.altemista.cloud/fis3/commons-ui/commons-ui-frontend/-/blob/master/docs/docker-configuration.md)
* [Git Workflow](https://gitlab.hlag.altemista.cloud/fis3/commons-ui/commons-ui-frontend/-/blob/master/docs/git-workflow.md)
* [Widget Toolkit](https://gitlab.hlag.altemista.cloud/fis3/commons-ui/commons-ui-frontend/-/blob/master/docs/widget-toolkit.md)
* [Development Process](https://gitlab.hlag.altemista.cloud/fis3/commons-ui/commons-ui-frontend/-/blob/master/docs/development/README.md)
* [Conditionals](https://gitlab.hlag.altemista.cloud/fis3/commons-ui/commons-ui-frontend/-/blob/master/docs/development/conditionals.md) 
* [Message Binding](https://gitlab.hlag.altemista.cloud/fis3/commons-ui/commons-ui-frontend/-/blob/master/docs/development/message-binding.md)
* [Value Binding](https://gitlab.hlag.altemista.cloud/fis3/commons-ui/commons-ui-frontend/-/blob/master/docs/development/value-binding.md)
 

## Related repositories
* [idetools](https://gitlab.hlag.altemista.cloud/fis3/idetools) contains domain specific languages to create and define applications and stands as home of the FIS3 widget toolkit.
* [commons-ui-rest-api](https://gitlab.hlag.altemista.cloud/fis3/commons-ui/commons-ui-rest-api) contains the UI REST API specification and generated client and server projects.
* [commons-ui-documentation](https://gitlab.hlag.altemista.cloud/fis3/commons-ui/commons-ui-documentation) contains FIS3 UI [website](https://fis3doc.hlag.altemista.cloud/ui/) documentation, including application developers documentation and FIS3 UI widget toolkit reference.
* [commons-ui](https://gitlab.hlag.altemista.cloud/fis3/commons-ui/commons-ui) contains enumerations for Hapaq-Lloyd icons and colors and end-to-end testing framework.
* [commons-ui-lang](https://gitlab.hlag.altemista.cloud/fis3/commons/-/tree/master/commons-ui-lang) contains the base classes that build the application on the back-end, like controller, view, etc.
* [commons-ui-api-server](https://gitlab.hlag.altemista.cloud/fis3/commons/-/tree/master/commons-ui-api-server) contains the server implementation of the UI REST API.
* [commons-integrationtest](https://gitlab.hlag.altemista.cloud/fis3/commons-integrationtest) contains sample applications that are used for end-to-end tests.
* [commons-ui-analyzer](https://gitlab.hlag.altemista.cloud/fis3/commons-ui/commons-ui-analyzer) contains a framework to run screenshot tests on all FIS3 applications.
* [commons-ui-frontend-performance](https://gitlab.hlag.altemista.cloud/fis3/commons-ui/commons-ui-frontend-performance) contains the performance test server and Docker definitions.