@symply.io/basic-components 1.0.0-beta.1 → 1.0.0-beta.10

package/README.md

@@ -15,6 +15,7 @@
   - [Autocomplete](#autocomplete)
   - [AutocompleteWithFilter](#autocompletewithfilter)
   - [BasicModal](#basicmodal)
+  - [BasicTable](#basictable)
   - [BreadCrumbs](#breadcrumbs)
   - [CheckBox](#checkbox)
   - [CheckBoxGroup](#checkboxgroup)
@@ -201,6 +202,63 @@ import BasicModal from '@symply.io/basic-components/BasicModal';
 
 
 
+<h3>BasicTable</h3>
+
+Reusable table component
+
+<h5>Import</h5>
+
+```tsx
+import { BasicTable, useTable } from '@symply.io/basic-components';
+// or 
+import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable'; 
+```
+
+<h5>Column Props (IColumn)</h5>
+
+| accessor    | string                      |         | true     | The key of the column, it should be unique.           |
+| ----------- | --------------------------- | ------- | -------- | ----------------------------------------------------- |
+| Name        | Type                        | Default | Required | Description                                           |
+| align       | "left" \|"center" \|"right" |         | false    | The alignment of the column.                          |
+| Body        | ReactElement                |         | true     | The component to render the column body cell.         |
+| canBeFrozen | bool                        |         | false    | If true, the column can be frozen                     |
+| canSort     | bool                        |         | false    | If true, the column can be sortable.                  |
+| 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. |
+| Footer      | ReactElement                |         | false    | The component to render the column footer cell.       |
+| minWidth    | number                      | 120     | false    | The minimum width of cells.                           |
+
+<h5>Hook Props</h5>
+
+| columns       | Array\<IColumn\>           |         | true     | table columns                               |
+| ------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
+| Name          | Type                       | Default | Required | Description                                 |
+| data          | Array<{ [name]: unknown }> |         | true     | table data/rows                             |
+| disableSortBy | bool                       |         | false    | If true, the whole table can't be sortable. |
+| initialState  | { sortBy?: SortByProps }   |         | false    | Set the initial states                      |
+| onSort        | func                       |         | false    | The function for sorting rows.              |
+
+<h5>Hook Returns</h5>
+
+| Name    | Type                 | Description               |
+| ------- | -------------------- | ------------------------- |
+| headers | Array\<IHeader\>     | The cells for the header. |
+| columns | Array\<IBodyColumn\> | The cells for the body.   |
+| footers | Array\<IFooter>      | The cells for the footer. |
+| rows    | Array<IRow\>         | The rows for the table.   |
+
+<h5>Component Props</h5>
+
+| Name       | Type                 | Default    | Required | Description                               |
+| ---------- | -------------------- | ---------- | -------- | ----------------------------------------- |
+| headers    | Array\<IHeader\>     |            | true     | The cells for the header. (from the hook) |
+| columns    | Array\<IBodyColumn\> |            | true     | The cells for the body. (from the hook)   |
+| footers    | Array\<IFooter>      | []         | false    | The cells for the footer. (from the hook) |
+| noDataText | string               | 'No Data!' | false    | The text when no data rendered.           |
+| rows       | Array<IRow\>         |            | true     | The rows for the table. (from the hook)   |
+
+
+
 <h3>BreadCrumbs</h3>
 
 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".
@@ -213,7 +271,7 @@ import { BreadCrumbs } from '@symply.io/basic-components/';
 import BreadCrumbs from '@symply.io/basic-components/BreadCrumbs'; 
 ```
 
-<h5>Props</h5>
+ <h5>Props</h5>
 
 | Name   | Type                                    | Default | Required | Description               |
 | ------ | --------------------------------------- | ------- | -------- | ------------------------- |
@@ -311,8 +369,8 @@ import FullDateInput from '@symply.io/basic-components/DateInput/FullDateInput';
 | 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.<br />**Signature:**<br/>`function(value: string) => void`<br/>*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.                            |
-| verifyFn   | func                          |         | false    | Customized verification function.                            |
 
 <h4>MonthDayInput</h4>
 
@@ -339,8 +397,8 @@ import MonthDayInput from '@symply.io/basic-components/DateInput/MonthDayInput';
 | 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.<br />**Signature:**<br/>`function(value: string) => void`<br/>*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.                            |
-| verifyFn   | func                          |         | false    | Customized verification function.                            |
 
 <h4>MonthYearInput</h4>
 
@@ -367,8 +425,8 @@ import MonthYearInput from '@symply.io/basic-components/DateInput/MonthYearInput
 | 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.<br />**Signature:**<br/>`function(value: string) => void`<br/>*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.                            |
-| verifyFn   | func                          |         | false    | Customized verification function.                            |
 
 
 
@@ -415,11 +473,11 @@ import FeinInput from '@symply.io/basic-components/FeinInput';
 
 <h5>Props</h5>
 
-| Name     | Type   | Default | Required | Description                                                  |
-| -------- | ------ | ------- | -------- | ------------------------------------------------------------ |
-| onChange | func   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
-| value    | string |         | true     | The value of the `Input` element.                            |
-| verifyFn | func   |         | false    | Customized verification function.                            |
+| Name       | Type   | Default | Required | Description                                                  |
+| ---------- | ------ | ------- | -------- | ------------------------------------------------------------ |
+| onChange   | func   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
+| onValidate | func   |         | false    | Customized validation function.                              |
+| value      | string |         | true     | The value of the `Input` element.                            |
 
 
 
@@ -637,7 +695,7 @@ import { ConfirmPassword } from '@symply.io/basic-components/PasswordInput';
 | Name         | Type                                               | Default                                                      | Required | Description                                                  |
 | ------------ | -------------------------------------------------- | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
 | onChange     | func                                               |                                                              | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
-| onVerify     | func                                               |                                                              | false    | Customized verify function when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
+| onValidate   | func                                               |                                                              | false    | Customized verify function when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
 | strategies   | { [key: string]: { label: string, regex: RegExp }} | {<br />uppercaseLetter: { label: "1 Uppercase Letter", regex: /[A-Z]+/ },<br />lowercaseLetter: { label: "1 Lowercase Letter", regex: /[a-z]+/ },<br />specialCharacter: { label: "1 Special Character", regex: /[!"#$%&'()*+,-./:;<=>?@[\]^_`{}~]/ },<br />number: { label: "1 Number", regex: /\d+/ },<br />minimum8: { label: "Minimum 8 characters", regex: /.{8,}/ }<br />} | false    | The strategies of the password                               |
 | successColor | Color                                              | 'green'                                                      | false    | The color of component when success.                         |
 | value        | string                                             |                                                              | true     | The password value.                                          |
@@ -672,6 +730,7 @@ import PhoneNumberInput from '@symply.io/basic-components/PhoneNumberInput';
 | ------------ | ------ | ------- | -------- | ------------------------------------------------------------ |
 | endAdornment | node   |         | false    | An end adornment element for the `Input` element.            |
 | onChange     | func   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
+| onValidate   | func   |         | false    | Customized validation function.                              |
 | value        | string |         | true     | The value of the `Input` element.                            |
 
 
@@ -725,11 +784,11 @@ import SocialInput from '@symply.io/basic-components/SocialInput';
 
 <h5>Props</h5>
 
-| Name     | Type   | Default | Required | Description                                                  |
-| -------- | ------ | ------- | -------- | ------------------------------------------------------------ |
-| onChange | func   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
-| value    | string |         | true     | The value of the `Input` element.                            |
-| verifyFn | func   |         | false    | Customized verification function.                            |
+| Name       | Type   | Default | Required | Description                                                  |
+| ---------- | ------ | ------- | -------- | ------------------------------------------------------------ |
+| onChange   | func   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
+| onValidate | func   |         | false    | Customized validation function.                              |
+| value      | string |         | true     | The value of the `Input` element.                            |
 
 
 

package/SocialInput/index.d.ts

@@ -1,6 +1,6 @@
 import { SocialInputProps } from "./types";
 export declare function SocialInputFormat(str: string): string;
-export declare function verifySocial(socialString: string): boolean;
+export declare function onValidateSocial(socialString: string): boolean;
 declare function SocialInput(props: SocialInputProps): JSX.Element;
 export default SocialInput;
 export * from "./types";

package/SocialInput/index.js

@@ -45,12 +45,12 @@ export function SocialInputFormat(str) {
         }
     }, "");
 }
-export function verifySocial(socialString) {
+export function onValidateSocial(socialString) {
     var reg = /^\d{3}\s?-\s?\d{2}\s?-\s?\d{4}$/g;
     return reg.test(socialString);
 }
 function SocialInput(props) {
-    var value = props.value, _a = props.helperText, helperText = _a === void 0 ? "Please enter a valid SSN" : _a, error = props.error, verifyFn = props.verifyFn, onChange = props.onChange, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["value", "helperText", "error", "verifyFn", "onChange", "primaryColor", "secondaryColor"]);
+    var value = props.value, _a = props.helperText, helperText = _a === void 0 ? "Please enter a valid SSN" : _a, error = props.error, onChange = props.onChange, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["value", "helperText", "error", "onChange", "onValidate", "primaryColor", "secondaryColor"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _b = useInteractions({
         value: value
@@ -62,11 +62,12 @@ function SocialInput(props) {
         replace: addMask,
         format: SocialInputFormat
     });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ helperText: valLength > 0 && (verifyFn ? !verifyFn(value) : !verifySocial(value))
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ helperText: valLength > 0 &&
+                (onValidate ? !onValidate(value) : !onValidateSocial(value))
                 ? helperText
                 : "", value: rifm.value, onChange: rifm.onChange, type: visible ? "text" : "password", error: error ||
                 (valLength > 0 &&
-                    (verifyFn ? !verifyFn(value) : !verifySocial(value))), InputProps: {
+                    (onValidate ? !onValidate(value) : !onValidateSocial(value))), InputProps: {
                 endAdornment: (_jsx(InputAdornment, __assign({ position: "end" }, { children: valLength === 9 && (_jsx(IconButton, __assign({ "aria-label": "Toggle SSN visibility", onClick: onSwitching }, { children: visible ? _jsx(Visibility, {}) : _jsx(VisibilityOff, {}) }))) })))
             }, InputLabelProps: {
                 shrink: true

package/SocialInput/types.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
 export interface SocialInputProps extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
-    verifyFn?: (value?: string) => boolean;
+    onValidate?: (value?: string) => boolean;
     value: string;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];

package/index.d.ts

@@ -2,6 +2,7 @@ export * from "./AlertDialog";
 export * from "./Autocomplete";
 export * from "./AutocompleteWithFilter";
 export * from "./BasicModal";
+export * from "./BasicTable";
 export * from "./BreadCrumbs";
 export * from "./CheckBox";
 export * from "./Copyright";
@@ -28,6 +29,7 @@ export { default as AlertDialog } from "./AlertDialog";
 export { default as Autocomplete } from "./Autocomplete";
 export { default as AutocompleteWithFilter } from "./AutocompleteWithFilter";
 export { default as BasicModal } from "./BasicModal";
+export { default as BasicTable } from "./BasicTable";
 export { default as BreadCrumbs } from "./BreadCrumbs";
 export { default as Copyright } from "./Copyright";
 export { default as DigitInput } from "./DigitInput";

package/index.js

@@ -2,6 +2,7 @@ export * from "./AlertDialog";
 export * from "./Autocomplete";
 export * from "./AutocompleteWithFilter";
 export * from "./BasicModal";
+export * from "./BasicTable";
 export * from "./BreadCrumbs";
 export * from "./CheckBox";
 export * from "./Copyright";
@@ -28,6 +29,7 @@ export { default as AlertDialog } from "./AlertDialog";
 export { default as Autocomplete } from "./Autocomplete";
 export { default as AutocompleteWithFilter } from "./AutocompleteWithFilter";
 export { default as BasicModal } from "./BasicModal";
+export { default as BasicTable } from "./BasicTable";
 export { default as BreadCrumbs } from "./BreadCrumbs";
 export { default as Copyright } from "./Copyright";
 export { default as DigitInput } from "./DigitInput";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.10",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",