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
• Components
  • Accordions
  • Buttons
  • Cards
  • Chips
  • Dialogs
  • Inputs
  • Side Notes
  • Steppers
  • Tables

//with npm

npm install @aeros-ui/components

//with yarn

yarn add @aeros-ui/components

//with npm

npm install @aeros-ui/components@latest

//with yarn    

yarn add @aeros-ui/components@latest

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>

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

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

---

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

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.

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

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

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

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

The loading button has no required props.
Additonal MuiLoadingButton Props

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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"}]

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

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"}]

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

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.

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

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

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

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

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

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

Additional MuiTextField Props

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

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

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.

---