@aeros-ui/components NPM

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.

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