# Shared UI Components

[![YARN](https://img.shields.io/badge/yarn-%5E1.22.4-orange)](https://classic.yarnpkg.com/en/) [![REACT](https://img.shields.io/badge/react-%5E16.13.1-orange)](https://reactjs.org/) [![TYPESCRIPT](https://img.shields.io/badge/language-typescript-blue)](https://www.typescriptlang.org/)

Shared UI Components for Universal Aviation Training Web Applications.

<br/>

## Setup

1. Install dependencies:

   ```bash
   yarn install
   ```

2. Compile library to `dist/`:

   ```bash
   yarn run start
   ```

   This command continues to watch for changes in `src/` module and recompiles the library automatically.

<br/>

## Example project

Library components is tested and showcased in example project using next steps: 

1. Navigate to example folder from the project root:

   ```bash
   cd example
   ```

2. Install dependencies for example project:

   ```bash
   yarn install
   ```

3. Run example/showcase project in browser and see components in action:

   ```bash
   yarn run start
   ```

<br/>

## Usage from example project

Components can be imported from library's `dist/` folder using absolute import:

```tsx
import {
  TextHeadline1,
  Logo,
  TextInput
} from "components";
import "components/dist/index.css";

const Example = () => (
  <>
    <TextHeadline1>Headline</TextHeadline1>
    <Logo />
    <TextInput />
  </>
);
```

<br/>

## Integration to other projects

1. Link `uat-components` library to yarn from the library's project root:

   ```bash
   yarn link
   ```

   Library name is defined in `package.json`.

2. Link library's `react` module to yarn:

   ```bash
   cd node_modules/react
   yarn link
   ```

   This step is required because [Invalid Hook Call Warning](https://reactjs.org/warnings/invalid-hook-call-warning.html) exception will be raised since library uses [react-hooks](https://reactjs.org/docs/hooks-intro.html).

3. Position to the root of the project where you want to integrate the library.

4. Link `uat-components` library from yarn:

   ```bash
   yarn link uat-components
   ```

5. Link `react` from yarn:

   ```bash
   yarn link react
   ```

<br/>

## Usage in other projects

Components can be imported from library using library name:

```tsx
import {
  TextHeadline1,
  Logo,
  TextInput
} from "uat-components";
import "uat-components/dist/index.css";

const MyProject = () => (
  <>
    <TextHeadline1>Headline</TextHeadline1>
    <Logo />
    <TextInput />
  </>
);
```

<br/>

## About

This project is created using [create-react-library](https://www.npmjs.com/package/create-react-library), CLI for creating modern React libraries.