Shared UI Components

Shared UI Components for Universal Aviation Training Web Applications.

Setup

1. Install dependencies:

   yarn install

2. Compile library to dist/:

   yarn run start

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

Example project

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

1. Navigate to example folder from the project root:

   cd example

2. Install dependencies for example project:

   yarn install

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

   yarn run start

Usage from example project

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

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

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

Integration to other projects

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

   yarn link

   Library name is defined in package.json.

2. Link library's react module to yarn:

   cd node_modules/react
   yarn link

   This step is required because Invalid Hook Call Warning exception will be raised since library uses react-hooks.

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

4. Link uat-components library from yarn:

   yarn link uat-components

5. Link react from yarn:

   yarn link react

Usage in other projects

Components can be imported from library using library name:

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

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

About

This project is created using create-react-library, CLI for creating modern React libraries.