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.