AEROS Component Library

A UI and component library for ELANY's new AEROS system.
Built with React, Material UI, and Material-Table to allow developers to access the ELANY UI theme and custom components for a faster workflow.

Contents

• Installation
• Updating and Publishing to npm
• Components
  • Accordions
  • Buttons
  • Cards
  • Chips
  • Dialogs
  • Inputs
  • Side Notes
  • Steppers
  • Tables

Installation

Install

//with npm

npm install @aeros-ui/components

//with yarn

yarn add @aeros-ui/components

Update Package

//with npm

npm install @aeros-ui/components@latest

//with yarn

yarn add @aeros-ui/components@latest

Peer Dependencies

React

This package requires use of react version 17^ and react-dom version 17^

// with npx

npx create-react-app <app-name>

//with yarn

yarn create react-app <app-name>

Material UI

This package requires use of Material UI version 5^

//with npm

npm install @emotion/react @emotion/styled @mui/material @mui/icons-material @mui/lab @mui/styles

//with yarn

yarn add @emotion/react @emotion/styled @mui/material @mui/icons-material @mui/lab @mui/styles

Material-Table

This package requires use of @material-table/core and @material-table/exporters
@material-table/core documentation (new release)
@material-table/exporters documentation (new release)
material-table documentation (older version)

//with npm

npm install @material-table/core @material-table/exporters

//with yarn

yarn add @material-table/core @material-table/exporters

Note: InternationalTelInput Peer Dependency

If you use the InternationalTelInput component, you must install the following peer dependency in your project:

// with npm
npm install react-international-phone

// with yarn
yarn add react-international-phone

This package also requires the CSS import:

import 'react-international-phone/style.css';

Updating and Publishing to npm

To update and publish this package to npm, follow these steps:

1. Update the Version

   • Edit the version field in package.json according to semantic versioning.

2. Build the Package

   npm run build

   This will generate the dist/ directory with the compiled output.

3. Login to npm (if not already logged in)

   npm login

   Enter your npm credentials when prompted.

4. Publish the Package

   npm publish --access public

   Ensure the private field in package.json is set to false.

5. (Optional) Tag the Release in Git

   git tag v<new-version>
   git push origin v<new-version>

   Replace <new-version> with the version you set in package.json.

Components

Accordions

Accordion Item

Import

import { AccordionItem } from '@aeros-ui/components';

Props

| Name | Type | Description | | --------- | --------- | ------------------------------------------------------------ | | children | node | The content of the component. | | disabled | boolean | A true or false condition to disable the accordion. | | expanded | boolean | A true or false condition to expand the accordion panel. | | panelName | string | The header for the accordion. |

Buttons

Choose File Button

Import

import { ChooseFileButton } from '@aeros-ui/components';

Props

Search Button

Import

import { SearchButton } from '@aeros-ui/components';

Props

| Name | Type | Description | | -------- | ---------- | --------------------------------------------------- | | onClick | function | Event fired when button is clicked | | disabled | boolean | a true or false condition to disable the button |

Addition MuiButton Props

Search Loading Button

Import

import { SearchLoadingButton } from '@aeros-ui/components';

Props

The loading button has no required props.
Additonal MuiLoadingButton Props

Cards

TransactionCard

Import

import { TransactionCard } from '@aeros-ui/components';

Props

| Name | Type | Description | Options | | -------------- | ------------------- | ----------------------------------------------------------- | ------- | | children | node | Content for the component | | | sideNote | element or null | An instance of the InfoSideNote or ErrorSideNote component. | | | selectedPolicy | element or null | An instance of the SelectedPolicyTable component. | | | title | string | The header component for the card. | |

Dialogs

Session Timeout

Import

import { SessionTimeout } from '@aeros-ui/components';

Props

| Name | Type | Description | | ---- | --------- | ------------------------------------------------ | | open | boolean | a true or false condition to open the dialog |

Inputs

Currency Input

Import

import { CurrencyInput } from '@aeros-ui/components';

const CurrencyInputExample = () => {
    const [currencyValue, setCurrencyValue] = useState();
    return (
        <CurrencyInput
            label="Premium"
            value={currencyValue}
            onChange={(event, value)=> setCurrencyValue(value)}
        />
    )
}