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.
//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. |
Nested Table Header
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. |