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
• 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

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)}
        />
    )
}

Props

| Name | Type | Description | Options | | --- | --- | --- | | | color | string | The input color if color other than default is needed | info error | | disabled | boolean | A true or false condition to disable the input | | | error | boolean | A true or false condition to display the input in an error state | | | label | string | A label for the input if needed | | | onChange | function | A callback function fired when the value is changed. | | | value | any | The value of the input element | |

Date Input

Import

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

Props

Search Input

Import

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

Props

| Name | Type | Description | Options | | --- | --- | --- | --- | | label | string | A label for the input | | | onChange | string | A callback function fired when the value is changed. | | | width | string   or   numeric | The width of the input | percentage, pixels, or numeric value | | value | any | The value of the input element | |

Additional MuiTextField Props

Text Input

Import

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

Props

Select Input

Import

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

Props

| Name | Type | Description | Options | | --- | --- | --- | --- | | color | string | The color for the input | | | disabled | boolean | A condition to disable the select | | | error | boolean | A condition to show the select in an error state. | | | label | string | A label for the select | | | onChange | function | A callback function fired when the value is changed. | | | options | array | Array of options for the select's menu items | | | value | any | The value of the input element | | | width | string   or   numeric | The width of the input | percentage, pixels, or numeric value |

Side Notes

Error Side Note

Import

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

Props

| Name | Type | Description | | --- | --- | --- | | title | string | Title of the side note for the card header | | data | array | array of objects passed to the list items containing the side note messages to be displayed [{message: "message text"}]|

Info Side Note

Import

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

Props

| Name | Type | Description | | --- | --- | --- | | title | string | Title of the side note for the card header | | data | array | array of objects passed to the list items containing the side note messages to be displayed [{message: "message text"}]|

Steppers

Transaction Stepper

Import

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

Props

| Name | Type | Description | | --- | --- | --- | | steps | array | A list of the step labels. |
| activeStep | number | The index of the activeStep |
| disabledSteps | array | A list of the disabled steps indices. |
| completedSteps | array | A list of the completed steps indices. |

Tables

Nested Table Header

A component to use when a Material-Table component requires a details panel.

Import

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

Props

| Name | Type | Description | | --- | --- | --- | | tableSubheaders | array | A list of the nested table headers to display. |

Table Filter Input

A component to use to override the Material-Table Filter Component.

Import

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

Props

| Name | Type | Description | | --- | --- | --- | | onChange | function | A built in function from Material-Table that handles the filter onChange for the component. |

Additional MuiTextField Props

Table Toolbar

A component to use to override the current MToolbar component from Material-Table.

Import

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

Props

| Name | Type | Description | | ----------- | ----------- | ----------- | | onFilterClick | function | Event fired when the filter icon button in the toolbar is clicked. | | onDensityClick | function | Event fired when the density icon button in the toolbar is clicked. | | showFilters | boolean | A true or false condition to show the filter inputs below the table header. |