@symply.io/basic-components 1.0.0-alpha.17 → 1.0.0-alpha.19

package/CheckBox/types.d.ts

@@ -1,8 +1,8 @@
-import { CSSProperties } from "react";
+import { CSSProperties, ReactNode } from "react";
 import { CheckboxProps } from "@mui/material/Checkbox";
 import { FormGroupProps } from "@mui/material/FormGroup";
 export interface CheckBoxProps extends Omit<CheckboxProps, "onChange"> {
-    label: string;
+    label: string | ReactNode;
     onChange: (val: boolean) => void;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];

package/FeinInput/index.d.ts

@@ -0,0 +1,6 @@
+import { FeinInputProps } from "./types";
+export declare function FeinInputFormat(str: string): string;
+export declare function verifyFein(feinString: string): boolean;
+declare function FeinInput(props: FeinInputProps): JSX.Element;
+export default FeinInput;
+export * from "./types";

package/FeinInput/index.js

@@ -0,0 +1,73 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRifm } from "rifm";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import TextField from "@mui/material/TextField";
+import useInteractions from "./useInteractions";
+import useCustomTheme from "../useCustomTheme";
+export function FeinInputFormat(str) {
+    var digits = (str.match(/\d+/g) || []).join("");
+    var chars = digits.split("");
+    return chars.reduce(function (prev, curr, index) {
+        if (index === 2) {
+            return "".concat(prev, " - ").concat(curr);
+        }
+        else {
+            return "".concat(prev).concat(curr);
+        }
+    }, "");
+}
+export function verifyFein(feinString) {
+    var reg = /^\d{2}\s?-\s?\d{7}$/g;
+    return reg.test(feinString);
+}
+function FeinInput(props) {
+    var value = props.value, _a = props.error, error = _a === void 0 ? false : _a, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid FEIN" : _b, onChange = props.onChange, verifyFn = props.verifyFn, onFocus = props.onFocus, onBlur = props.onBlur, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["value", "error", "helperText", "onChange", "verifyFn", "onFocus", "onBlur", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
+    var rifm = useRifm({
+        mask: true,
+        value: String(value),
+        onChange: onChange,
+        replace: addMask,
+        format: FeinInputFormat
+    });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ value: rifm.value, onChange: rifm.onChange, error: error ||
+                (valLength > 0 && (verifyFn ? !verifyFn(value) : verifyFein(value))), helperText: valLength > 0 && (verifyFn ? !verifyFn(value) : verifyFein(value))
+                ? helperText
+                : "", onFocus: function (event) {
+                if (onFocus) {
+                    onFocus(event);
+                }
+            }, onBlur: function (event) {
+                onChange(value.trim());
+                if (onBlur) {
+                    onBlur(event);
+                }
+            }, InputLabelProps: {
+                shrink: true
+            } }, rest)) })));
+}
+export default FeinInput;
+export * from "./types";

package/FeinInput/types.d.ts

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

package/FeinInput/types.js

@@ -0,0 +1 @@
+export {};

package/FeinInput/useInteractions.d.ts

@@ -0,0 +1,8 @@
+interface InteractionProps {
+    value: string;
+}
+declare function useInteractions(props: InteractionProps): {
+    valLength: number;
+    addMask: (str: string) => string;
+};
+export default useInteractions;

package/FeinInput/useInteractions.js

@@ -0,0 +1,16 @@
+import { useCallback, useMemo } from "react";
+function useInteractions(props) {
+    var value = props.value;
+    var addMask = useCallback(function (str) {
+        var digits = (str.match(/\d+/g) || []).join("");
+        var areaCode = digits.slice(0, 2).padEnd(2, "_");
+        var prefixCode = digits.slice(2, 9).padEnd(7, "_");
+        return "".concat(areaCode, " - ").concat(prefixCode);
+    }, []);
+    var valLength = useMemo(function () {
+        var digitsArr = String(value).match(/\d/g);
+        return digitsArr ? digitsArr.length : 0;
+    }, [value]);
+    return { valLength: valLength, addMask: addMask };
+}
+export default useInteractions;

package/README.md

@@ -20,6 +20,7 @@
   - [CheckBoxGroup](#checkboxgroup)
   - [Copyright](#copyright)
   - [DigitInput](#digitinput)
+  - [FeinInput](#feininput)
   - [FormRadioGroup](#formradiogroup)
   - [FormSelector](#formselector)
   - [HelpCaption](#helpcaption)
@@ -226,16 +227,16 @@ It is extended from `@mui/material/Checkbox`, so it includes all properties of `
 import { CheckBox } from '@symply.io/basic-components/';
 // or 
 import { CheckBox } from '@symply.io/basic-components/CheckBox'; 
+// or 
+import CheckBox from '@symply.io/basic-components/CheckBox/CheckBox'; 
 ```
 
 <h5>Props</h5>
 
-| Name     | Type   | Default | Required | Description                                                  |
-| -------- | ------ | ------- | -------- | ------------------------------------------------------------ |
-| label    | string |         | true     | The label of the checkbox.                                   |
-| onChange | func   |         | true     | Callback fired when the `checkbox` value is changed.<br />**Signature:**<br/>`function(value: boolean) => void`<br/>*value:* The value of the `checkbox` element. |
-
-
+| Name     | Type                | Default | Required | Description                                                  |
+| -------- | ------------------- | ------- | -------- | ------------------------------------------------------------ |
+| label    | string \| ReactNode |         | true     | The label of the checkbox.                                   |
+| onChange | func                |         | true     | Callback fired when the `checkbox` value is changed.<br />**Signature:**<br/>`function(value: boolean) => void`<br/>*value:* The value of the `checkbox` element. |
 
 
 
@@ -251,6 +252,8 @@ It is extended from `@mui/material/FormGroup`, so it includes all properties of
 import { CheckBoxGroup } from '@symply.io/basic-components/';
 // or 
 import { CheckBoxGroup } from '@symply.io/basic-components/CheckBox'; 
+// or 
+import CheckBoxGroup from '@symply.io/basic-components/CheckBox/CheckBoxGroup'; 
 ```
 
 <h5>Props</h5>
@@ -302,6 +305,30 @@ import DigitInput from '@symply.io/basic-components/DigitInput';
 
 
 
+<h3>FeinInput</h3>
+
+Input component for FEIN. 
+
+It is extended from `@mui/material/TextField`, so it includes all properties of `@mui/material/TextField`.
+
+<h5>Import</h5>
+
+```typescript
+import { FeinInput } from '@symply.io/basic-components/';
+// or 
+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.                            |
+
+
+
 <h3>FormRadioGroup</h3>
 
 Radio Group allow the user to select one option from a set.

package/index.d.ts

@@ -7,6 +7,7 @@ export * from "./CheckBox";
 export * from "./Copyright";
 export * from "./DigitInput";
 export * from "./DynamicHeaderBar";
+export * from "./FeinInput";
 export * from "./FormRadioGroup";
 export * from "./FormSelector";
 export * from "./HelpCaption";
@@ -28,6 +29,7 @@ export { default as BreadCrumbs } from "./BreadCrumbs";
 export { default as Copyright } from "./Copyright";
 export { default as DigitInput } from "./DigitInput";
 export { default as DynamicHeaderBar } from "./DynamicHeaderBar";
+export { default as FeinInput } from "./FeinInput";
 export { default as FormRadioGroup } from "./FormRadioGroup";
 export { default as HelpCaption } from "./HelpCaption";
 export { default as LoadingModal } from "./LoadingModal";

package/index.js

@@ -7,6 +7,7 @@ export * from "./CheckBox";
 export * from "./Copyright";
 export * from "./DigitInput";
 export * from "./DynamicHeaderBar";
+export * from "./FeinInput";
 export * from "./FormRadioGroup";
 export * from "./FormSelector";
 export * from "./HelpCaption";
@@ -28,6 +29,7 @@ export { default as BreadCrumbs } from "./BreadCrumbs";
 export { default as Copyright } from "./Copyright";
 export { default as DigitInput } from "./DigitInput";
 export { default as DynamicHeaderBar } from "./DynamicHeaderBar";
+export { default as FeinInput } from "./FeinInput";
 export { default as FormRadioGroup } from "./FormRadioGroup";
 export { default as HelpCaption } from "./HelpCaption";
 export { default as LoadingModal } from "./LoadingModal";

package/package.json

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