@symply.io/basic-components 1.0.0-alpha.1

package/PasswordInput/Password.js

@@ -0,0 +1,68 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+function Password(props) {
+    var _a = props.strategies, strategies = _a === void 0 ? {
+        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,}/ },
+    } : _a, _b = props.successColor, successColor = _b === void 0 ? "green" : _b, value = props.value, error = props.error, _c = props.onVerify, onVerify = _c === void 0 ? function (password) {
+        var reg = /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~])([!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~a-zA-z0-9]{8,})$/;
+        return reg.test(password);
+    } : _c, onChange = props.onChange, rest = __rest(props, ["strategies", "successColor", "value", "error", "onVerify", "onChange"]);
+    var isValidPassword = useMemo(function () { return !!value && onVerify(value); }, [value, onVerify]);
+    var helperTextColor = useMemo(function () {
+        var textColors = Object.keys(strategies).reduce(function (temp, key) {
+            var regex = strategies[key].regex;
+            if (value === "") {
+                temp[key] = undefined;
+            }
+            else if (regex.test(value)) {
+                temp[key] = successColor;
+            }
+            else {
+                temp[key] = "red";
+            }
+            return temp;
+        }, {});
+        return textColors;
+    }, [value, strategies]);
+    var helperText = useMemo(function () {
+        return (_jsx(_Fragment, { children: Object.keys(strategies).map(function (key) {
+                var label = strategies[key].label;
+                return (_jsx(Typography, __assign({ component: "p", variant: "caption", style: { color: helperTextColor[key] } }, { children: label }), key));
+            }) }, void 0));
+    }, [helperTextColor, strategies]);
+    return (_jsx(TextField, __assign({ error: !isValidPassword || error, helperText: helperText, type: "password", label: "Password", size: "small", margin: "dense", value: value, onChange: function (event) {
+            onChange(event.target.value);
+        }, fullWidth: true, required: true }, rest), void 0));
+}
+export default Password;

package/PasswordInput/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Password } from "./Password";
+export * from "./Password";
+export { default as ConfirmPassword } from "./ConfirmPassword";
+export * from "./ConfirmPassword";

package/PasswordInput/index.js

@@ -0,0 +1,4 @@
+export { default as Password } from "./Password";
+export * from "./Password";
+export { default as ConfirmPassword } from "./ConfirmPassword";
+export * from "./ConfirmPassword";

package/PhoneNumberInput/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { InputProps } from "@mui/material/Input";
+import { TextFieldProps } from "@mui/material/TextField";
+declare type TextInputProps = Omit<TextFieldProps, "onChange">;
+export interface PhoneInputProps {
+    value: string;
+    endAdornment?: InputProps["endAdornment"];
+    onChange: (val: string) => void;
+}
+declare function PhoneInput(props: TextInputProps & PhoneInputProps): JSX.Element;
+export default PhoneInput;

package/PhoneNumberInput/index.js

@@ -0,0 +1,44 @@
+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 Typography from "@mui/material/Typography";
+import InputAdornment from "@mui/material/InputAdornment";
+import TextField from "@mui/material/TextField";
+import useInteractions from "./useInteractions";
+function PhoneInput(props) {
+    var value = props.value, endAdornment = props.endAdornment, onChange = props.onChange, rest = __rest(props, ["value", "endAdornment", "onChange"]);
+    var _a = useInteractions({ value: value }), addMask = _a.addMask, phoneFormat = _a.phoneFormat;
+    var rifm = useRifm({
+        mask: true,
+        value: String(value),
+        onChange: onChange,
+        replace: addMask,
+        format: phoneFormat,
+    });
+    return (_jsx(TextField, __assign({ value: rifm.value, InputProps: {
+            startAdornment: (_jsx(InputAdornment, __assign({ position: "start" }, { children: _jsx(Typography, __assign({ variant: "body2" }, { children: "+1" }), void 0) }), void 0)),
+            endAdornment: endAdornment,
+        }, onChange: rifm.onChange }, rest), void 0));
+}
+export default PhoneInput;

package/PhoneNumberInput/useInteractions.d.ts

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

package/PhoneNumberInput/useInteractions.js

@@ -0,0 +1,30 @@
+import { useCallback, useMemo } from "react";
+function useInteractions(props) {
+    var value = props.value;
+    var phoneFormat = useCallback(function (str) {
+        var digits = (str.match(/\d+/g) || []).join("");
+        var chars = digits.split("");
+        return chars.reduce(function (prev, curr, index) {
+            if (index === 3) {
+                return "".concat(prev, ") ").concat(curr);
+            }
+            if (index === 6) {
+                return "".concat(prev, "-").concat(curr);
+            }
+            return "".concat(prev).concat(curr);
+        }, "(");
+    }, []);
+    var addMask = useCallback(function (str) {
+        var digits = (str.match(/\d+/g) || []).join("");
+        var areaCode = digits.slice(0, 3).padEnd(3, "_");
+        var prefixCode = digits.slice(3, 6).padEnd(3, "_");
+        var subscriber = digits.slice(6, 10).padEnd(4, "_");
+        return "(".concat(areaCode, ") ").concat(prefixCode, "-").concat(subscriber);
+    }, []);
+    var valLength = useMemo(function () {
+        var digitsArr = String(value).match(/\d/g);
+        return digitsArr ? digitsArr.length : 0;
+    }, [value]);
+    return { valLength: valLength, addMask: addMask, phoneFormat: phoneFormat };
+}
+export default useInteractions;