Symply Basic Components

Basic and reusable components for all frontend of Symply apps.

Built with Material UI v5.

---

Quick Guide

- Installation
- License
- Components
- AlertDialog
- Autocomplete
- AutocompleteWithFilter
- BasicModal
- BreadCrumbs
- CheckBox
- CheckBoxGroup
- CliickableFabButton
- Copyright
- DataTable
- DateInput
- FullDateInput
- MonthDayInput
- MonthYearInput
- DigitInput
- FeinInput
- FormRadioGroup
- FormSelector
- HelpCaption
- LoadingModal
- MenuButtonGroup
- NumberInput
- PasswordInput
- PhoneNumberInput
- Sidebar
- SocialInput
- TabGroup
- TablePagination
- TextInput
- ToastPrompt
- VideoPlayerModal
- VirtualDataTable
- Changelog

Installation

It is available as an npm package.

``shell
// with npm
npm install @symply.io/basic-components

// with yarn
yarn add @symply.io/basic-components
`

License

This project is licensed under the terms of the MIT license.

Common Properties

All components include these 2 properties to customize the theme

| Name | Type | Default | Required | Description |
| -------------- | ---------------------- | ------- | -------- | ----------------------------- |
| primaryColor | CSSProperties["color"] | | false | Primary color for the theme |
| secondaryColor | CSSProperties["color"] | | false | Secondary color for the theme |

Components

AlertDialog

Diglog component for alerts or confirmations.

Import

`typescript
import { AlertDialog } from '@symply.io/basic-components/';
// or
import AlertDialog from '@symply.io/basic-components/AlertDialog';
`

Props

| Name | Type | Default | Required | Description |
| ------------- | --------------------------------------------- | ------- | -------- | ------------------------------------------------------------ |
| children | node | | true | Dialog content. |
| DialogButtons | element | | false | Customized dialog action buttons. |
| maxWidth | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| false | 'md' | false | Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to false to disable maxWidth. |
| onClose | func | | true | Callback fired when the component requests to be closed.
Signature:
function() => void |
| open | bool | false | true | If true, the component is shown. |
| title | string | 'Info' | false | Dialog title |

Autocomplete

A normal text input enhanced by a panel of suggested options.

It is extended from @mui/material/TextField, so it includes all properties of @mui/material/TextField.

Import

`typescript
import { Autocomplete } from '@symply.io/basic-components/';
// or
import Autocomplete from '@symply.io/basic-components/Autocomplete';
`

Option Props (IOption)

| Name | Type | Default | Required | Description |
| ------ | ---------------- | ------- | -------- | -------------------------- |
| label | string | | true | Option label. |
| value | string \| number | | false | Option valie. |
| [name] | unknown | | false | Customized option property |

Props

| Name | Type | Default | Required | Description |
| --------- | ---------------------- | ------- | -------- | ------------------------------------------------------------ |
| limitTags | number | -1 | false | The maximum number of tags that will be visible when not focused. Set -1 to disable the limit. |
| multiple | bool | false | false | If true, value must be an array and the menu will support multiple selections. |
| onChange | func | | true | Callback fired when the Input value is changed.
Signature:
function(value: Array|IOption|string|null) => void
value: The value of the Input element. |
| options | Array | | true | Array of suggestion options. |
| value | string | | true | The value of the Input element. |

AutocompleteWithFilter

A normal text input enhanced by a panel of suggested options and filter.

It is extended from @mui/material/TextField, so it includes all properties of @mui/material/TextField.

Import

`typescript
import { AutocompleteWithFilter } from '@symply.io/basic-components/';
// or
import AutocompleteWithFilter from '@symply.io/basic-components/AutocompleteWithFilter';
`

Option Props (IOption)

| Name | Type | Default | Required | Description |
| ------ | ---------------- | ------- | -------- | -------------------------- |
| label | string | | true | Option label. |
| value | string \| number | | false | Option valie. |
| [name] | unknown | | false | Customized option property |

Props

| Name | Type | Default | Required | Description |
| -------------------- | ---------------------- | ------- | -------- | ------------------------------------------------------------ |
| disableCloseOnSelect | bool | false | false | If true, the popup won't close when a value is selected. |
| limitTags | number | -1 | false | The maximum number of tags that will be visible when not focused. Set -1 to disable the limit. |
| multiple | bool | false | false | If true, value must be an array and the menu will support multiple selections. |
| onChange | func | | true | Callback fired when the Input value is changed.
Signature:
function(value: Array|IOption|string|null) => void
value: The value of the Input element. |
| options | Array | | true | Array of suggestion options. |
| value | string | | true | The value of the Input element. |

BasicModal

Reusable modal component.

It is extended from @mui/material/Dialog, so it includes all properties of @mui/material/Dialog.

Import

`typescript
import { BasicModal } from '@symply.io/basic-components/';
// or
import BasicModal from '@symply.io/basic-components/BasicModal';
`

Props

| Name | Type | Default | Required | Description |
| ----------------------- | ------------------------------------------------------------ | ------------------- | -------- | ------------------------------------------------------------ |
| cancelButtonColor | 'primary' \| 'secondary' \| 'success' \| 'error' \| 'info' \| 'warning' \| undefined | same as the color | false | The color of the cancel button. |
| cancelText | string | 'Cancel' | false | The text of the cancel button. |
| children | node | | true | The content of the component. |
| color | 'primary' \| 'secondary' \| 'success' \| 'error' \| 'info' \| 'warning' \| undefined | 'primary' | false | The main color of the component. |
| desc | string | | false | Some descriptions you want to add, similar to a subtitle. |
| disabled | bool | false | false | If true, the submit button would be disabled. |
| hideBottomButtons | bool | false | false | If true, hide all action buttons at the bottom of the modal. |
| loading | bool | false | false | If true, the submit and cancel buttons would be disabled. |
| maxWidth | 'xs' \|'sm' \|'md' \|'lg' \|'xl' | 'sm' | false | Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to false to disable maxWidth. |
| noForm | bool | false | False | If true, put the content and action buttons out of a form element. |
| onClose | func | | true | Callback fired when the cancel button requests to be clicked.
Signature:
function() => void |
| onSubmit | func | | true | Callback fired when the submit button requests to be clicked.
Signature:
function() => void |
| open | bool | false | true | If true, the component is shown. |
| ref | ref | | false | You can get the form "onSubmit" function from the ref. |
| scroll | 'body' \| 'paper' | 'paper' | false | Determine the container for scrolling the dialog. |
| submitButtonColor | 'primary' \| 'secondary' \| 'success' \| 'error' \| 'info' \| 'warning' \| undefined | same as the color | false | The color of the submit button. |
| submitText | string | ‘Save’ | false | The text of the submit button. |
| showTopRightCloseButton | bool | false | false | If true, show a close icon button at the top right of the modal. |
| title | string | | true | The title of the component, to show at the top left. |

BreadCrumbs

A list of links that help a user visualize a page's location within the hierarchical structure of a website, and allow navigation up to any of its "ancestors".

Import

`typescript
import { BreadCrumbs } from '@symply.io/basic-components/';
// or
import BreadCrumbs from '@symply.io/basic-components/BreadCrumbs';
`

Props

| Name | Type | Default | Required | Description |
| ------ | --------------------------------------- | ------- | -------- | ------------------------- |
| routes | Array<{ href?: string; label: string }> | | true | All routes of "ancestors" |

CheckBox

Checkboxes allow the user to select one or more items from a set.

It is extended from @mui/material/Checkbox, so it includes all properties of @mui/material/Checkbox.

Import

`typescript
import { CheckBox } from '@symply.io/basic-components/';
// or
import CheckBox from '@symply.io/basic-components/CheckBox';
`

Props

| Name | Type | Default | Required | Description |
| -------- | ---------------------- | ------- | -------- | ------------------------------------------------------------ |
| label | string \| ReactElement | | true | The label of the checkbox. |
| onChange | func | | true | Callback fired when the checkbox value is changed.
Signature:
function(value: boolean) => void
value: The value of the checkbox element. |

CheckBoxGroup

Checkboxes allow the user to select one or more items from a set for a group.

It is extended from @mui/material/FormGroup, so it includes all properties of @mui/material/FormGroup.

Import

`typescript
import { CheckBoxGroup } from '@symply.io/basic-components/';
// or
import CheckBoxGroup from '@symply.io/basic-components/CheckBoxGroup';
`

Props

| Name | Type | Default | Required | Description |
| ---------- | ---------------------- | ------- | -------- | ------------------------------------------------------------ |
| Checkboxes | Array\ | | true | The array of checkboxes.
See the property of CheckBox |

ClickableFabButton

A fab button with icon and text

Import

`typescript
import { ClickableFabButton } from '@symply.io/basic-components/';
// or
import ClickableFabButton from '@symply.io/basic-components/ClickableFabButton';
`

Props

| Name | Type | Default | Required | Description |
| -------- | ------------------------------------------------------------ | --------- | -------- | ------------------------------------------------------------ |
| color | "primary" \|"secondary" \|"success" \|"error" \|"info" \|"warning" | "primary" | false | The button color. |
| disabled | bool | false | false | If true, the button would be disabled. |
| fabIcon | ReactElement | | true | The icon element.. |
| onClick | func | | true | The function for button clicking.
Signature:
function() => unknown |
| text | string | | true | The button text. |

Copyright

A common component for rendering the copyright

Import

`typescript
import { Copyright } from '@symply.io/basic-components/';
// or
import Copyright from '@symply.io/basic-components/Copyright';
`

DataTable

Reusable table component

Import

`tsx
import { DataTable, useDataTable } from '@symply.io/basic-components';
// or
import DataTable, { useDataTable } from '@symply.io/basic-components/DataTable';
`

Column Props (ColumnProps)

| Name | Type | Default | Required | Description |
| --------- | ----------------------------- | ------- | -------- | ------------------------------------------------------------ |
| accessor | string | | true | The key of the column, it should be unique. |
| align | "left" \|"center" \|"right" | | false | The alignment of the column. |
| Body | ReactElement | | true | The component to render the column body cell. |
| fixable | "left" \| "right" \|undefined | | false | If not undefined, the column can be frozen.
⚠️ It doesn't work with IE11. |
| Footer | ReactElement | | false | The component to render the column footer cell. |
| Header | ReactElement | | true | The component to render the column header cell. |
| headerTip | string | | false | The tip title text when the mouse is over the header. |
| sortable | bool | | false | If true, the column can be sortable. |
| width | number | | false | The fixed width of cells. |

Sorting Props

| Name | Type | Default | Required | Description |
| -------- | ------------------------- | ------- | -------- | ---------------------- |
| accessor | string | | true | The key of the column. |
| order | "ASC" \| "DESC" \| "NONE" | | true | The sorting order. |

Hook Props

| Name | Type | Default | Required | Description |
| ------------- | -------------------------- | ------- | -------- | ------------------------------------------------------------ |
| columns | Array\ | | true | table columns |
| data | Array<{ [name]: unknown }> | | true | table data/rows |
| disableSortBy | bool | | false | If true, the whole table can't be sortable. |
| initialState | { sortBy?: SortingProps} | | false | Set the initial states |
| onSort | func | | false | The function for sorting rows.
Signature:
function(props: SortingProps) => unknown |

Hook Returns

| Name | Type | Description |
| -------------- | ----------------------------- | ------------------------------------------------------------ |
| columns | Array\ | The cells for the body. |
| footers | Array\ | The cells for the footer. |
| headers | Array\ | The cells for the header. |
| rows | Array | The rows for the table. |
| onResetSorting | func | An one-key function for resetting sorting to the initial state. |

Component Props

| Name | Type | Default | Required | Description |
| --------------------- | ----------------------------- | ---------- | -------- | ------------------------------------------------------------ |
| columns | Array\ | | true | The cells for the body. (from the hook) |
| dense | bool | | false | If true the table size/density would be tight. |
| footers | Array\ | [] | false | The cells for the footer. (from the hook) |
| footerBgColor | CSSProperties["color"] | | false | Customized footer background color. |
| footerTextColor | CSSProperties["color"] | | false | Customized footer text color. |
| headers | Array\ | | true | The cells for the header. (from the hook) |
| headerBgColor | CSSProperties["color"] | | false | Customized header background color. |
| headerTextColor | CSSProperties["color"] | | false | Customized header text color. |
| noDataText | string | 'No Data!' | false | The text when no data rendered. |
| onContextMenu | func | | false | The function for row right-clicking.
Signature:
function(event: MouseEvent, row: RowProps) => unknown |
| onCustomizeRowBgColor | func | | false | The function for customizing the row background color.
Signature:
function(props: {row: RowProps, columns: Array\}) => {normal?: HexColor;
hover?: HexColor;
} |
| onRowClick | func | | false | The function for row clicking.
Signature:
function(row: RowProps) => unknown |
| rows | Array | | true | The rows for the table. (from the hook) |

DateInput

FullDateInput

Input component for full date (MM/DD/YYYY)

Import

`typescript
import { FullDateInput } from '@symply.io/basic-components/';
// or
import { FullDateInput } from '@symply.io/basic-components/DateInput';
// or
import FullDateInput from '@symply.io/basic-components/DateInput/FullDateInput';
`

Props

| Name | Type | Default | Required | Description |
| ---------- | ----------------------------- | ------- | -------- | ------------------------------------------------------------ |
| error | boolean | | false | If true, the label is displayed in an error state. |
| helperText | string | | false | The helper text content. |
| margin | 'dense' \| 'none' \| 'normal' | 'none' | false | If dense or normal, will adjust vertical spacing of this and contained components. |
| name | string | | false | Name attribute of the input element. |
| onBlur | func | | false | Callback fired when the input is blurred. Notice that the first argument (event) might be undefined. |
| onChange | func | | true | Callback fired when the Input value is changed.
Signature:
function(value: string) => void
value: The value of the Input element. |
| onFocus | func | | false | Callback fired when the input is focused. |
| onValidate | func | | false | Customized validation function. |
| value | string | | true | The value of the Input element. |

MonthDayInput

Input component for month day (MM/DD)

Import

`typescript
import { MonthDayInput } from '@symply.io/basic-components/';
// or
import { MonthDayInput } from '@symply.io/basic-components/DateInput';
// or
import MonthDayInput from '@symply.io/basic-components/DateInput/MonthDayInput';
`

Props

| Name | Type | Default | Required | Description |
| ---------- | ----------------------------- | ------- | -------- | ------------------------------------------------------------ |
| error | boolean | | false | If true, the label is displayed in an error state. |
| helperText | string | | false | The helper text content. |
| margin | 'dense' \| 'none' \| 'normal' | 'none' | false | If dense or normal, will adjust vertical spacing of this and contained components. |
| name | string | | false | Name attribute of the input element. |
| onBlur | func | | false | Callback fired when the input is blurred. Notice that the first argument (event) might be undefined. |
| onChange | func | | true | Callback fired when the Input value is changed.
Signature:
function(value: string) => void
value: The value of the Input element. |
| onFocus | func | | false | Callback fired when the input is focused. |
| onValidate | func | | false | Customized validation function. |
| value | string | | true | The value of the Input element. |

MonthYearInput

Input component for month year (MM/YYYY)

Import

`typescript
import { MonthYearInput } from '@symply.io/basic-components/';
// or
import { MonthYearInput } from '@symply.io/basic-components/DateInput';
// or
import MonthYearInput from '@symply.io/basic-components/DateInput/MonthYearInput';
`

Props

| Name | Type | Default | Required | Description |
| ---------- | ----------------------------- | ------- | -------- | ------------------------------------------------------------ |
| error | boolean | | false | If true, the label is displayed in an error state. |
| helperText | string | | false | The helper text content. |
| margin | 'dense' \| 'none' \| 'normal' | 'none' | false | If dense or normal, will adjust vertical spacing of this and contained components. |
| name | string | | false | Name attribute of the input element. |
| onBlur | func | | false | Callback fired when the input is blurred. Notice that the first argument (event) might be undefined. |
| onChange | func | | true | Callback fired when the Input value is changed.
Signature:
function(value: string) => void
value: The value of the Input element. |
| onFocus | func | | false | Callback fired when the input is focused. |
| onValidate | func | | false | Customized validation function. |
| value | string | | true | The value of the Input element. |

DigitInput

Input component for digits.

It is extended from @mui/material/TextField, so it includes all properties of @mui/material/TextField.

Import

`typescript
import { DigitInput } from '@symply.io/basic-components/';
// or
import DigitInput from '@symply.io/basic-components/DigitInput';
`

Props

| Name | Type | Default | Required | Description |
| ------------ | --------- | ------- | -------- | ------------------------------------------------------------ |
| endAdornment | node | | false | An end adornment element for the Input element. |
| maxLength | number | 999 | false | The max length of the Input element you can type in. |
| minLength | number | 0 | false | The min length of the Input element you should type in. |
| onChange | func | | true | Callback fired when the Input value is changed.
Signature:
function(value: string) => void
value: The value of the Input element. |
| value | string | | true | The value of the Input element. |
| tooltip | ReactNode | | false | A tooltip for the Input element. |

FeinInput

Input component for FEIN.

It is extended from @mui/material/TextField, so it includes all properties of @mui/material/TextField.

Import

`typescript
import { FeinInput } from '@symply.io/basic-components/';
// or
import FeinInput from '@symply.io/basic-components/FeinInput';
`

Props

| Name | Type | Default | Required | Description |
| ---------- | ------ | ------- | -------- | ------------------------------------------------------------ |
| onChange | func | | true | Callback fired when the Input value is changed.
Signature:
function(value: string) => void
value: The value of the Input element. |
| onValidate | func | | false | Customized validation function. |
| value | string | | true | The value of the Input element. |

FormRadioGroup

Radio Group allow the user to select one option from a set.

Import

`typescript
import { FormRadioGroup } from '@symply.io/basic-components/';
// or
import FormRadioGroup from '@symply.io/basic-components/FormRadioGroup';
`

Radio Option Props

| Name | Type | Default | Required | Description |
| -------- | ------------------------ | ------- | -------- | ---------------------------------------- |
| disabled | bool | false | false | If true, the opiton would be disabled. |
| label | string | | true | The label of the option. |
| value | string \| number \| bool | | true | The value of the option. |

Props

It is extended from @mui/material/FormControl, so it includes all properties of @mui/material/FormControl.

| Name | Type | Default | Required | Description |
| ------------------- | ------------------------------------- | ------- | -------- | ------------------------------------------------------------ |
| formLabel | string | | false | The label of the Radio element. |
| helperText | ReactNode | | false | A helper text for the Radio element. |
| onChange | func | | true | Callback fired when the Radio value is changed.
Signature:
function(value: string|number|boolean) => void
value: The value of the Radio element. |
| options | Array\ | | true | The radio options. See the Radio Option Props above. |
| radioLabelPlacement | 'top' \| 'bottom' \| 'start' \| 'end' | 'end' | false | The placement of the radio labe . |
| tooltip | ReactNode \| string | | false | A tooltip for the Radio element. |
| value | string \| number \| bool | | true | The value of the Radio element. |

FormSelector

Selector components are used for collecting user provided information from a list of options.

Import

`typescript
// Simple Selector
import { SimpleSelector } from '@symply.io/basic-components/FormSelector';
// Multiple Selector
import { MultipleSelector } from '@symply.io/basic-components/FormRadioGroup';
`

Selector Option Props

| Name | Type | Default | Required | Description |
| -------- | -------------------------- | ------- | -------- | ---------------------------------------- |
| disabled | bool | false | false | If true, the opiton would be disabled. |
| label | string | | true | The label of the option. |
| value | T extends number \| string | | | The value of the option. |

Base Props

It is extended from @mui/material/FormControl, so it includes all properties of @mui/material/FormControl.

| Name | Type | Default | Required | Description |
| -------------- | --------------------- | ------- | -------- | ----------------------------------------------------------- |
| helperText | string | | false | The helper text of the Select element. |
| label | string | | false | The label of Select element. |
| multiple | bool | false | false | If true, you can select more than 1 option. |
| options | Array\ | | true | The radio options. See the Selector Option Props above. |
| showHelperText | bool | false | false | If true, show the helper text. |
| tooltip | ReactNode | | false | A tooltip for the Select element. |

Simple Selector Props

Extended from the Base Props

| Name | Type | Default | Required | Description |
| -------- | -------------------------- | ------- | -------- | ------------------------------------------------------------ |
| onChange | func | | true | Callback fired when the Select value is changed.
Signature:
function(value: string | number) => void
value: The value of the Select element. |
| value | T extends number \| string | | true | The value of the Select element. |

Multiple Selector Props

Extended from the Base Props

| Name | Type | Default | Required | Description |
| -------------- | ----------------------------------- | ------- | -------- | ------------------------------------------------------------ |
| onChange | func | | true | Callback fired when the Select value is changed.
Signature:
function(value: Array | Array) => void
value: The value of the Select element. |
| showCheckmarks | bool | false | false | If true the option will be shown with a checkbox. |
| value | Array\ | | | The value of the Select element. |

HelpCaption

You can use it to add a hint/help paragraph.

Import

`typescript
import { HelpCaption } from '@symply.io/basic-components/';
// or
import HelpCaption from '@symply.io/basic-components/HelpCaption';
`

Props

| Name | Type | Default | Required | Description |
| ----------- | -------------------- | --------- | -------- | ------------------------------------------------------------ |
| linkText | string | | false | The text of the help link. |
| linkType | 'WEBPAGE' \| 'VIDEO' | 'WEBPAGE' | false | The type of the help link. |
| linkUrl | string | | false | The url of the help link. If undefined then the help link would not be shown. |
| mainCaption | string | | true | The primary text of the caption. |
| subCaption | string | | false | The secondary text of the caption. |

LoadingModal

A modal for loading.

Import

`typescript
import { LoadingModal } from '@symply.io/basic-components/';
// or
import LoadingModal from '@symply.io/basic-components/LoadingModal';
`

Props

| Name | Type | Default | Required | Description |
| ----------- | ------------------------------------------------------------ | ------------ | -------- | ------------------------------------------------------------ |
| direction | 'column' \| 'column-reverse' \| 'column' \| 'column-reverse' | 'column' | false | Defines the flex-direction style property. It is applied for all screen sizes. |
| open | bool | false | true | If true, the component is shown. |
| percent | number | 0 | false | The percent value of the progress. |
| text | string | 'Loading...' | false | The prompt text of the component. |
| showProgess | boolean | false | false | If true, the percent of the progress is shown. |

MenuButtonGroup

A button with menu options.

Import

`typescript
import { MenuButtonGroup } from '@symply.io/basic-components/';
// or
import MenuButtonGroup from '@symply.io/basic-components/MenuButtonGroup';
`

Menu Button Props

| Name | Type | Default | Required | Description |
| ---------- | ------ | ------- | -------- | ------------------------------------------------------------ |
| buttonIcon | node | | false | A start adornment of the button |
| buttonText | string | | true | The text of the menu button |
| disabled | bool | | | |
| onClick | func | | true | Callback fired when the menu button click.
Signature:
function(event: MouseEvent) => void |




Props

| Name | Type | Default | Required | Description |
| ---------- | ------------------------------------------------------------ | ---------- | -------- | -------------------------------------------------- |
| color | 'primary' \|'secondary' \|'success' \|'error' \|'info' \|'warning' | 'primary' | false | The main color of the component. |
| buttonText | string | | true | The text of the main button. |
| size | 'small' \| 'medium' \| 'large' | | false | The size of the main button. |
| disabled | bool | | false | If true, the button is disabled. |
| variant | 'text' \|'contained' \|'outlined' | 'outlined' | false | The variant of the main button. |
| buttons | Array\ | | true | Menu buttons. See the Menu Button Props above. |

NumberInput

Input component for Number.

It is extended from @mui/material/TextField, so it includes all properties of @mui/material/TextField.

Import

`typescript
import { NumberInput } from '@symply.io/basic-components/';
// or
import NumberInput from '@symply.io/basic-components/NumberInput';
`

Props

| Name | Type | Default | Required | Description |
| ----------- | --------- | ----------- | -------- | ------------------------------------------------------------ |
| decimals | number | 0 | false | The max length of decimals, if 0 then no limit. |
| integerOnly | bool | | false | If true, not allow to type a decimal value. |
| maxValue | number | 2^53 − 1 | false | The max value of the Input element you can type in. |
| minValue | number | −(2^53 − 1) | false | The min value of the Input element you should type in. |
| onChange | func | | true | Callback fired when the Input value is changed.
Signature:
function(value: string) => void
value: The value of the Input element. |
| tooltip | ReactNode | | false | A tooltip for the Input element. |
| value | string | | true | The value of the Input element. |

PasswordInput

Input component for Password and Confirm Password.

It is extended from @mui/material/TextField, so it includes all properties of @mui/material/TextField.

Import

`typescript
// Password
import Password from '@symply.io/basic-components/PasswordInput';
// Confirm Password
import ConfirmPassword from '@symply.io/basic-components/ConfirmPasswordInput';
`

Password Props

| Name | Type | Default | Required | Description |
| ------------ | -------------------------------------------------- | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| onChange | func | | true | Callback fired when the Input value is changed.
Signature:
function(value: string) => void
value: The value of the Input element. |
| onValidate | func | | false | Customized verify function when the Input value is changed.
Signature:
function(value: string) => void
value: The value of the Input element. |
| strategies | { [key: string]: { label: string, regex: RegExp }} | {
uppercaseLetter: { label: "1 Uppercase Letter", regex: /[A-Z]+/ },
lowercaseLetter: { label: "1 Lowercase Letter", regex: /[a-z]+/ },
specialCharacter: { label: "1 Special Character", regex: /[!"#$%&'()*+,-./:;<=>?@[\]^_{}~]/ },
number: { label: "1 Number", regex: /\d+/ },
minimum8: { label: "Minimum 8 characters", regex: /.{8,}/ }
} | false | The strategies of the password |
| successColor | Color | 'green' | false | The color of component when success. |
| value | string | | true | The password value. |

Confirm Password Props

| Name | Type | Default | Required | Description |
| -------- | ------ | ------- | -------- | ------------------------------------------------------------ |
| onChange | func | | true | Callback fired when the Input value is changed.
Signature:
function(value: string) => void
value: The value of the Input element. |
| password | string | | true | The password value |
| value | string | | true | The confirm password value. |

PhoneNumberInput

Input component for US phone number.

It is extended from @mui/material/TextField, so it includes all properties of @mui/material/TextField.

Import

``typescript
import { PhoneNumberInput } from '@symply.io/basic-components/';
// or
import PhoneNumberInput from '@symply.io/basic-components/PhoneNumberInput';
`

Props

| Name | Type | Default | Required | Description |
| ------------ | ------ | ------- | -------- | ------------------------------------------------------------ |
| endAdornment | node | | false | An end adornment element for the Input element. |
| onChange | func | | true | Callback fired when the Input value is changed.
Signature:
function(value: string) => void
value: The value of the Input element. |
| onValidate | func | | false | Customized validation function. |
| value | string | | true | The value of the Input element. |

Sidebar

Sidebars for navigation.

Import

`typescript
import { Sidebar } from '@symply.io/basic-components/';
// or
import Sidebar from '@symply.io/basic-components/Sidebar';
`

Sidebar Item Props

| Name | Type | Default | Required | Description |
| ------------ | ------------------------- | ------------------------------------- | -------- | ------------------------------------------------------------ |
| badge | number | | false | The badge will be rendered for notifications. |
| beta | boolean | | false | If true the beta tag will be rendered. |
| betaTagColor | CSSProperties["color"] | \#00A2A9 | false | The value of the Input element. |
| children | Array\ | | false | If not undefined the sub sidebar items would be rendered. |
| icon | Element | | true | The icon adornment. |
| lock | boolean | | false | If true the lock icon will be rendered, and the sidebar item would be disabled. |
| name | string | | true | The sidebar item label. |
| path | string | | true | The link path of the sidebar item. |
| titleForLock | string | "Feature is unavailable on Free plan" | false | The tip when the lock is true |

Props

| Name | Type | Default | Required | Description |
| ------------ | ------------------------- | ------- | -------- | ------------------------------------------ |
| items | Array\ | | true | Sidebar items. |
| showIconOnly | boolean | false | false | If true it will show the main icon only. |

SocialInput

Input component for Social Security Number (SSN).

It is extended from @mui/material/TextField, so it includes all properties of @mui/material/TextField.

Import

`typescript
import { SocialInput } from '@symply.io/basic-components/';
// or
import SocialInput from '@symply.io/basic-components/SocialInput';
`

Props

| Name | Type | Default | Required | Description |
| ---------- | ------ | ------- | -------- | ------------------------------------------------------------ |
| onChange | func | | true | Callback fired when the Input value is changed.
Signature:
function(value: string) => void
value: The value of the Input element. |
| onValidate | func | | false | Customized validation function. |
| value | string | | true | The value of the Input element. |

TabGroup

Tabs group.

It is extended from @mui/material/Tabs, so it includes all properties of @mui/material/Tabs.

Import

`typescript
import { TabGroup } from '@symply.io/basic-components/';
// or
import TabGroup from '@symply.io/basic-components/TabGroup';
`

Props

| Name | Type | Default | Required | Description |
| --------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| currentTabIndex | number | 0 | true | the tab index from the higher component |
| onChange | func | If onChange is undefined and the url of tab is defined, we will navigate to that url when the tab changed | false | Callback fired when the Tab is changed.
Signature:
function(args: {tabIndex: number; url?: string}) => void
tabIndex: The selected index of the Tab element.
url: The url for navigating. |
| tabs | Array\<{ key: string; text: string; url?: string; disabled?: boolean }\> | | true | All tab items. |
| variant | 'standard' \| 'scrollable' \| 'fullWidth' | 'scrollable' | false | Determines additional display behavior of the tabs |

TablePagination

Reusable pagination component for the material table

Import

`typescript
import { TablePagination } from '@symply.io/basic-components/';
// or
import TablePagination from '@symply.io/basic-components/TablePagination';
`

Props

| Name | Type | Default | Required | Description |
| ------------------- | --------------- | ------- | -------- | ------------------------------------------------------------ |
| colSpan | number | | false | The number of columns a cell should span. |
| count | number | | true | The total count of all data. |
| onPageChange | func | | true | Callback fired when the page value is changed.
Signature:
function(event: MouseEvent ) => void,value: number
value: The value of the page . |
| onRowsPerPageChange | func | | true | Callback fired when the Select value is changed.
Signature:
function(event: ChangeEvent |
| page | number | | true | The current page index. |
| rowsPerPage | number | | true | How many rows per page. |
| rowsPerPageOptions | Array\ | | true | The options for setting how many rows per page. |

TextInput

Regular Input component.

It is extended from @mui/material/TextField, so it includes all properties of @mui/material/TextField.

Import

`typescript
import { TextInput } from '@symply.io/basic-components/';
// or
import TextInput from '@symply.io/basic-components/TextInput';
`

Props

| Name | Type | Default | Required | Description |
| --------- | --------- | ------- | -------- | ------------------------------------------------------------ |
| maxLength | number | 999 | false | The max length of the Input element you can type in. |
| minLength | number | 0 | false | The min length of the Input element you should type in. |
| onChange | func | | true | Callback fired when the Input value is changed.
Signature:
function(value: string) => void
value: The value of the Input element. |
| tooltip | ReactNode | | false | A tooltip for the Input element. |
| value | string | | true | The value of the Input element. |

ToastPrompt

Global prompt component.

Import

`typescript
import { usePrompt } from '@symply.io/basic-components';
`

Usage


`typescript
const { showPrompt, hidePrompt } = usePrompt();
`

Props

| Name | Type | Default | Required | Description |
| ------- | ------------------------------------------- | ------- | -------- | ------------------------------------------------------------ |
| message | string \| 400 | | true | The prompt message you want to show. |
| timeout | number | 3500 | false | The number of milliseconds to wait before automatically calling the onClose function. |
| type | 'success' \| 'warning' \| 'info' \| 'error' | | true | The type of prompt. |
| action | ReactNode \| null | | false | Customized button(s) at the end of the prompt. If this property is set, the default close icon button will be replaced directly. |

VideoPlayerModal

A modal for playing videos.

Import

`typescript
import { VideoPlayerModal } from '@symply.io/basic-components/';
// or
import VideoPlayerModal from '@symply.io/basic-components/VideoPlayerModal';
`

Props

| Name | Type | Default | Required | Description |
| ------------ | -------------------- | ------- | -------- | ------------------------------------------------------------ |
| extraButtons | Array\ | | false | Extra buttons next to the Close button at the bottom. |
| onClose | func | | true | Callback fired when the cancel button requests to be clicked.
Signature:
function() => void |
| open | bool | | true | If true, the component is shown. |
| pip | bool | | false | If true, the video can be played in picture |
| title | string | | false | Modal title, it would be shown at the top left. |

VirtualDataTable

Reusable data table component with virtualizer

Import

`tsx
import { VirtualDataTable } from '@symply.io/basic-components';
// or
import VirtualDataTable from '@symply.io/basic-components/VirtualDataTable';
`

Column Props

| Name | Type | Default | Required | Description |
| --------- | ----------------------------- | ------- | -------- | ------------------------------------------------------------ |
| accessor | string | | true | The key of the column, it should be unique. |
| align | "left" \|"center" \|"right" | | false | The alignment of the column. |
| Body | ReactElement | | true | The component to render the column body cell. |
| fixable | "left" \| "right" \|undefined | | false | If not undefined, the column can be frozen.
⚠️ It doesn't work with IE11. |
| Footer | ReactElement | | false | The component to render the column footer cell. |
| Header | ReactElement | | true | The component to render the column header cell. |
| headerTip | string | | false | The tip title text when the mouse is over the header. |
| sortable | bool | | false | If true, the column can be sortable. |
| width | number | | false | The fixed width of cells. |

Sorting Props

| Name | Type | Default | Required | Description |
| -------- | ------------------------- | ------- | -------- | ---------------------- |
| accessor | string | | true | The key of the column. |
| order | "ASC" \| "DESC" \| "NONE" | | true | The sorting order. |




Component Props

| Name | Type | Default | Required | Description |
| --------------------- | -------------------------- | -------------- | -------- | ------------------------------------------------------------ |
| aux | {[name:string]: any} | | false | Extra properties |
| columns | Array | [] | true | Table columns |
| dense | bool | | false | If true the table size/density would be tight. |
| footerBgColor | CSSProperties["color"] | | false | Customized footer background color. |
| footerTextColor | CSSProperties["color"] | | false | Customized footer text color. |
| | | | | |
| headerBgColor | CSSProperties["color"] | | false | Customized header background color. |
| headerTextColor | CSSProperties["color"] | | false | Customized header text color. |
| initialState | { sortBy?: SortingProps} | | false | Set the initial states |
| maxHeight | number | | false | The max height (px) of the table container. |
| noDataText | string | 'No Data!' | false | The text when no data rendered. |
| onContextMenu | func | | false | The function for row right-clicking.
Signature:
function(event: MouseEvent, row: RowProps) => unknown |
| onCustomizeRowBgColor | func | | false | The function for customizing the row background color.
Signature:
function(props: {row: RowProps, columns: Array\}) => {normal?: HexColor;
hover?: HexColor;
} |
| onRowClick | func | | false | The function for row clicking.
Signature:
function(row: RowProps) => unknown |
| onSort | func | | false | The function for sorting rows.
Signature:
function(props: SortingProps) => unknown |
| rows | Array<{ [name]: unknown }> | | true | Table data/rows. |
| sortingDisabled | bool | | false | If true, the whole table can't be sortable. |
| visibleRows | Array<{ [name]: unknown }> | same as rows` | false | The table will only display these rows, and it won't affect the table data, especially some totals in the footer (if you defined them). |

Changelog

If you have recently updated, please read the changelog for details of what has changed.