oolib 2.49.0 → 2.49.2

package/dist/components/TextInputs/index.d.ts

@@ -1,7 +1,6 @@
 export function TextInput(props: any): any;
-export function PasswordInput({ enableValidation, ...props }: {
+export function PasswordInput({ ...props }: {
     [x: string]: any;
-    enableValidation?: boolean;
 }): any;
 export function EmailInput({ passValidationErrorToFormValidation, ...props }: {
     [x: string]: any;

package/dist/components/TextInputs/index.js

@@ -94,31 +94,37 @@ var OKELink_1 = require("../OKELink");
 var DisplayIcon = function (_a) {
     var icon = _a.icon, onClick = _a.onClick, size = _a.size;
     var IconComp = icons_1.icons[icon];
-    return (react_1.default.createElement("div", { style: { cursor: onClick ? 'pointer' : '', display: 'flex' }, onMouseDown: onClick || null }, IconComp && react_1.default.createElement(IconComp, { size: size, weight: "bold" })));
+    return (react_1.default.createElement("div", { style: { cursor: onClick ? "pointer" : "", display: "flex" }, onMouseDown: onClick || null }, IconComp && react_1.default.createElement(IconComp, { size: size, weight: "bold" })));
 };
 var TextInput = function (props) {
-    var id = props.id, invert = props.invert, disabled = props.disabled, icon = props.icon, type = props.type, _a = props.placeholder, placeholder = _a === void 0 ? 'Enter Text...' : _a, _b = props.value, value = _b === void 0 ? '' : _b, onChange = props.onChange, onFocus = props.onFocus, readOnly = props.readOnly, iconOnClick = props.iconOnClick, eyeIcon = props.eyeIcon, S = props.S, validateOnBlur = props.validateOnBlur, validateOnMount = props.validateOnMount, actionBtn = props.actionBtn, clearBtn = props.clearBtn, className = props.className, maxLength = props.maxLength, DEPRECATED_maxNumLimiter = props.maxNumLimiter, forceFocus = props.forceFocus //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
-    ;
-    var _c = (0, react_1.useState)(''), inputStatus = _c[0], setInputStatus = _c[1];
-    var composition = icon && !eyeIcon ? 'icon+text' : 'textOnly';
-    var size = S ? 'S' : 'M';
-    var actionBtnEnabaled = !!value && (type !== 'url' ? true : inputStatus.type === 'success');
-    var clearBtnEnabled = !!value && (type !== 'url' ? true : inputStatus.type === 'success');
-    var handleValidate = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+    var id = props.id, invert = props.invert, disabled = props.disabled, icon = props.icon, type = props.type, _a = props.placeholder, placeholder = _a === void 0 ? "Enter Text..." : _a, _b = props.value, value = _b === void 0 ? "" : _b, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, readOnly = props.readOnly, iconOnClick = props.iconOnClick, eyeIcon = props.eyeIcon, S = props.S, handleValidation = props.handleValidation, validateOnMount = props.validateOnMount, actionBtn = props.actionBtn, clearBtn = props.clearBtn, className = props.className, maxLength = props.maxLength, DEPRECATED_maxNumLimiter = props.maxNumLimiter, forceFocus = props.forceFocus, //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
+    _c = props.validateOnlyOnBlur, //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
+    validateOnlyOnBlur = _c === void 0 ? false : _c, //for example, in the login form we want validation to only run, once the text input is blurred. else it can be irritating
+    _validationStatus = props.validationStatus;
+    var _d = (0, react_1.useState)(_validationStatus), validationStatus = _d[0], setValidationStatus = _d[1];
+    (0, react_1.useEffect)(function () {
+        setValidationStatus(_validationStatus);
+    }, [_validationStatus]);
+    var composition = icon && !eyeIcon ? "icon+text" : "textOnly";
+    var size = S ? "S" : "M";
+    var actionBtnEnabaled = !!value && (type !== "url" ? true : validationStatus.type === "success");
+    var clearBtnEnabled = !!value && (type !== "url" ? true : validationStatus.type === "success");
+    var handleValidate = function (e, onBlur) { return __awaiter(void 0, void 0, void 0, function () {
         var value, res;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
+                    onBlur && onBlur(e);
                     value = e.target.value;
                     if (!value)
                         return [2 /*return*/];
-                    if (type === 'url')
-                        setInputStatus('loading');
-                    if (!validateOnBlur) return [3 /*break*/, 2];
-                    return [4 /*yield*/, validateOnBlur(value)];
+                    if (type === "url")
+                        setValidationStatus("loading");
+                    if (!handleValidation) return [3 /*break*/, 2];
+                    return [4 /*yield*/, handleValidation(value)];
                 case 1:
                     res = _a.sent();
-                    setInputStatus(res);
+                    setValidationStatus(res);
                     _a.label = 2;
                 case 2: return [2 /*return*/];
             }
@@ -131,72 +137,55 @@ var TextInput = function (props) {
     }, [validateOnMount]);
     var handleOnChange = function (e) {
         onChange(id, e.target.value);
-        if (inputStatus) {
-            if (type === 'url')
-                return setInputStatus('');
+        if (!e.target.value)
+            setValidationStatus('');
+        if (!validateOnlyOnBlur) {
             handleValidate(e);
         }
+        else {
+            /**
+             * basically if an error has already been set then, run validation in realtime on change
+             */
+            if (validationStatus) {
+                if (type === "url")
+                    return setValidationStatus("");
+                handleValidate(e);
+            }
+        }
     };
     var inputRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
-        forceFocus &&
-            inputRef.current &&
-            inputRef.current.focus();
+        forceFocus && inputRef.current && inputRef.current.focus();
     }, [forceFocus]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: className },
             react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
-            readOnly ? (react_1.default.createElement(Typo_1.SANS_3, { invert: invert }, type === 'password' ? '********' : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(index_styled_1.InputContainerStyled, { invert: invert, type: type, disabled: disabled, status: inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.type, eyeIcon: eyeIcon, composition: composition, onClick: function () { return inputRef.current.focus(); } },
+            readOnly ? (react_1.default.createElement(Typo_1.SANS_3, { invert: invert }, type === "password" ? "********" : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(index_styled_1.InputContainerStyled, { invert: invert, type: type, disabled: disabled, status: validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type, eyeIcon: eyeIcon, composition: composition, onClick: function () { return inputRef.current.focus(); } },
                     icon && (react_1.default.createElement(DisplayIcon, { icon: icon, size: S ? 15 : 20, onClick: iconOnClick || null })),
-                    react_1.default.createElement(index_styled_1.InputStyled, { ref: inputRef, className: size === 'S' ? 'SANS_2' : 'SANS_3', id: id, type: type, name: type, placeholder: placeholder, value: value, onChange: handleOnChange, maxLength: maxLength || DEPRECATED_maxNumLimiter, onBlur: handleValidate, onFocus: onFocus, size: size, autoComplete: 'off' }),
-                    inputStatus === 'loading' && (react_1.default.createElement("div", null,
+                    react_1.default.createElement(index_styled_1.InputStyled, { ref: inputRef, className: size === "S" ? "SANS_2" : "SANS_3", id: id, type: type, name: type, placeholder: placeholder, value: value, onChange: handleOnChange, maxLength: maxLength || DEPRECATED_maxNumLimiter, onBlur: validateOnlyOnBlur
+                            ? function (e) { return handleValidate(e, onBlur); }
+                            : onBlur, onFocus: onFocus, size: size, autoComplete: "off" }),
+                    validationStatus === "loading" && (react_1.default.createElement("div", null,
                         react_1.default.createElement(LoadersAndProgress_1.LoaderCircle, { S: true, invert: invert }))),
-                    clearBtn && (react_1.default.createElement(Buttons_1.ButtonGhost, { M: true, value: clearBtn.text, invert: clearBtn.invert, onClick: function () { return onChange(props.id, ''); }, disabled: !clearBtnEnabled, style: { marginRight: actionBtn ? '-1rem' : '-2rem' }, icon: clearBtn.icon })),
-                    actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimary, { M: true, value: actionBtn.text, invert: actionBtn.invert, onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: '-2rem' }, icon: actionBtn.icon }))),
-                (inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.msg) && (react_1.default.createElement(index_styled_1.MsgContainer, { invert: invert, status: inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.type },
+                    clearBtn && (react_1.default.createElement(Buttons_1.ButtonGhost, { M: true, value: clearBtn.text, invert: clearBtn.invert, onClick: function () { return onChange(props.id, ""); }, disabled: !clearBtnEnabled, style: { marginRight: actionBtn ? "-1rem" : "-2rem" }, icon: clearBtn.icon })),
+                    actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimary, { M: true, value: actionBtn.text, invert: actionBtn.invert, onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: "-2rem" }, icon: actionBtn.icon }))),
+                (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.msg) && (react_1.default.createElement(index_styled_1.MsgContainer, { invert: invert, status: validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type },
                     react_1.default.createElement(Typo_1.SANS_3, null,
-                        inputStatus.msg,
-                        inputStatus.link &&
-                            react_1.default.createElement(OKELink_1.OKELink, { style: { marginLeft: '1rem' }, to: inputStatus.link.to }, inputStatus.link.text)))))))));
+                        validationStatus.msg,
+                        validationStatus.link && (react_1.default.createElement(OKELink_1.OKELink, { style: { marginLeft: "1rem" }, to: validationStatus.link.to }, validationStatus.link.text))))))))));
 };
 exports.TextInput = TextInput;
 //passValidationErrorToFormValidation is not being handled by PasswordInput, cuz i dont think we will need it here..
 var PasswordInput = function (_a) {
-    var _b = _a.enableValidation, enableValidation = _b === void 0 ? true : _b, props = __rest(_a, ["enableValidation"]);
-    var _c = (0, react_1.useState)(false), showPassword = _c[0], setShowPassword = _c[1];
-    var icon = showPassword ? 'Eye' : 'EyeClosed';
+    var props = __rest(_a, []);
+    var _b = (0, react_1.useState)(false), showPassword = _b[0], setShowPassword = _b[1];
+    var icon = showPassword ? "Eye" : "EyeClosed";
     var toggleShowPassword = function (e) {
         e.preventDefault();
         setShowPassword(function (prev) { return !prev; });
     };
-    var handleValidation = function (value) {
-        if (value.length < 8) {
-            return { type: 'error', msg: 'Password cannot be less than 8 characters' };
-        }
-        if (!/[A-Z]/g.test(value)) {
-            return {
-                type: 'error',
-                msg: 'Password must contain a uppercase character',
-            };
-        }
-        if (!/[\d]/g.test(value)) {
-            return {
-                type: 'error',
-                msg: 'Password must contain a digit',
-            };
-        }
-        if (!/[a-z]/g.test(value)) {
-            return {
-                type: 'error',
-                msg: 'Password must contain a lowercase character',
-            };
-        }
-        if (!/\W|_/g.test(value)) {
-            return { type: 'error', msg: 'Password must contain a special character' };
-        }
-    };
-    return (react_1.default.createElement(exports.TextInput, __assign({ placeholder: 'Enter password...', type: showPassword ? 'text' : 'password', iconOnClick: toggleShowPassword, eyeIcon: true, icon: icon, validateOnBlur: enableValidation && handleValidation }, props)));
+    return (react_1.default.createElement(exports.TextInput, __assign({ placeholder: "Enter password...", type: showPassword ? "text" : "password", iconOnClick: toggleShowPassword, eyeIcon: true, icon: icon }, props)));
 };
 exports.PasswordInput = PasswordInput;
 var EmailInput = function (_a) {
@@ -204,14 +193,14 @@ var EmailInput = function (_a) {
     var handleValidation = function (value) {
         var regEx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
         var errorObj = regEx.test(value)
-            ? ''
-            : { type: 'error', msg: 'Enter a valid email address' };
+            ? ""
+            : { type: "error", msg: "Enter a valid email address" };
         if (passValidationErrorToFormValidation) {
-            passValidationErrorToFormValidation((errorObj === null || errorObj === void 0 ? void 0 : errorObj.type) || 'success');
+            passValidationErrorToFormValidation((errorObj === null || errorObj === void 0 ? void 0 : errorObj.type) || "success");
         }
         return errorObj;
     };
-    return (react_1.default.createElement(exports.TextInput, __assign({ type: "email", placeholder: 'Enter email...', validateOnBlur: handleValidation }, props)));
+    return (react_1.default.createElement(exports.TextInput, __assign({ type: "email", placeholder: "Enter email...", handleValidation: handleValidation }, props)));
 };
 exports.EmailInput = EmailInput;
 var PhoneInput = function (_a) {
@@ -219,22 +208,22 @@ var PhoneInput = function (_a) {
     var handleValidation = function (value) {
         var errorObj;
         if (isNaN(value)) {
-            errorObj = { type: 'error', msg: 'Enter a valid phone number' };
+            errorObj = { type: "error", msg: "Enter a valid phone number" };
             if (passValidationErrorToFormValidation)
                 passValidationErrorToFormValidation(errorObj.type);
             return errorObj;
         }
         if (value.length < 10) {
-            errorObj = { type: 'error', msg: 'Enter a valid phone number' };
+            errorObj = { type: "error", msg: "Enter a valid phone number" };
             if (passValidationErrorToFormValidation)
                 passValidationErrorToFormValidation(errorObj.type);
             return errorObj;
         }
         //else
         if (passValidationErrorToFormValidation)
-            passValidationErrorToFormValidation('success');
+            passValidationErrorToFormValidation("success");
     };
-    return (react_1.default.createElement(exports.TextInput, __assign({ type: "tel", placeholder: 'Enter Phone...', validateOnBlur: handleValidation, maxLength: 10 }, props)));
+    return (react_1.default.createElement(exports.TextInput, __assign({ type: "tel", placeholder: "Enter Phone...", handleValidation: handleValidation, maxLength: 10 }, props)));
 };
 exports.PhoneInput = PhoneInput;
 var URLInput = function (_a) {
@@ -246,7 +235,11 @@ var URLInput = function (_a) {
             switch (_a.label) {
                 case 0:
                     if (!validationPlugin) return [3 /*break*/, 2];
-                    return [4 /*yield*/, validationPlugin({ value: value, content: content, passValidationErrorToFormValidation: passValidationErrorToFormValidation })];
+                    return [4 /*yield*/, validationPlugin({
+                            value: value,
+                            content: content,
+                            passValidationErrorToFormValidation: passValidationErrorToFormValidation,
+                        })];
                 case 1:
                     pluginResponse = _a.sent();
                     if (pluginResponse)
@@ -255,15 +248,15 @@ var URLInput = function (_a) {
                 case 2:
                     //else
                     //if routesAreValidInputs, then first validate for a route
-                    if (routesAreValidInputs && value.substring(0, 1) === '/') {
-                        successObj = { type: 'success', msg: 'valid route' };
+                    if (routesAreValidInputs && value.substring(0, 1) === "/") {
+                        successObj = { type: "success", msg: "valid route" };
                         if (passValidationErrorToFormValidation)
                             passValidationErrorToFormValidation(successObj.type);
                         return [2 /*return*/, successObj];
                     }
                     //else validate for a url
                     if (!/^https?:\/\//i.test(value)) {
-                        value = 'https://' + value;
+                        value = "https://" + value;
                     }
                     _a.label = 3;
                 case 3:
@@ -272,20 +265,20 @@ var URLInput = function (_a) {
                 case 4:
                     response = _a.sent();
                     if (response.status !== 200)
-                        throw new Error('');
-                    successObj = { type: 'success', msg: 'valid url' };
+                        throw new Error("");
+                    successObj = { type: "success", msg: "valid url" };
                     if (passValidationErrorToFormValidation)
                         passValidationErrorToFormValidation(successObj.type);
                     return [2 /*return*/, successObj];
                 case 5:
                     err_1 = _a.sent();
-                    if (/[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/ig.test(value)) {
-                        successObj = { type: 'success', msg: 'valid url' };
+                    if (/[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/gi.test(value)) {
+                        successObj = { type: "success", msg: "valid url" };
                         if (passValidationErrorToFormValidation)
                             passValidationErrorToFormValidation(successObj.type);
                         return [2 /*return*/, successObj];
                     }
-                    errorObj = { type: 'error', msg: 'Enter a valid url...' };
+                    errorObj = { type: "error", msg: "Enter a valid url..." };
                     if (passValidationErrorToFormValidation)
                         passValidationErrorToFormValidation(errorObj.type);
                     return [2 /*return*/, errorObj];
@@ -293,7 +286,7 @@ var URLInput = function (_a) {
             }
         });
     }); };
-    return (react_1.default.createElement(exports.TextInput, __assign({ type: "url", validateOnBlur: handleValidation, placeholder: "Enter a valid url..." }, props)));
+    return (react_1.default.createElement(exports.TextInput, __assign({ type: "url", handleValidation: handleValidation, placeholder: "Enter a valid url..." }, props)));
 };
 exports.URLInput = URLInput;
 var NumberInput = function (_a) {
@@ -302,31 +295,37 @@ var NumberInput = function (_a) {
     var handleValidation = function (value) {
         var errorObj;
         if (isNaN(value)) {
-            errorObj = { type: 'error', msg: 'Enter a number' };
+            errorObj = { type: "error", msg: "Enter a number" };
             if (passValidationErrorToFormValidation)
                 passValidationErrorToFormValidation(errorObj.type);
             return errorObj;
         }
         if (min && value < min) {
-            errorObj = { type: 'error', msg: "Enter value greater than or equal to ".concat(min) };
+            errorObj = {
+                type: "error",
+                msg: "Enter value greater than or equal to ".concat(min),
+            };
             if (passValidationErrorToFormValidation)
                 passValidationErrorToFormValidation(errorObj.type);
             return errorObj;
         }
         if (max && value > max) {
-            errorObj = { type: 'error', msg: "Enter value less than or equal to ".concat(max) };
+            errorObj = {
+                type: "error",
+                msg: "Enter value less than or equal to ".concat(max),
+            };
             if (passValidationErrorToFormValidation)
                 passValidationErrorToFormValidation(errorObj.type);
             return errorObj;
         }
         //else
         if (passValidationErrorToFormValidation)
-            passValidationErrorToFormValidation('success');
+            passValidationErrorToFormValidation("success");
     };
     return (react_1.default.createElement(exports.TextInput
     // type="number"
     , __assign({ 
         // type="number"
-        validateOnBlur: handleValidation, placeholder: "Enter Number..." }, props)));
+        handleValidation: handleValidation, placeholder: "Enter Number..." }, props)));
 };
 exports.NumberInput = NumberInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.49.0",
+  "version": "2.49.2",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,9 +12,26 @@
     "build": "npx tsc",
     "prebuild": "rm -rf dist",
     "postbuild": "npm run copy-files",
-    "semantic-release": "semantic-release --branches main",
+    "semantic-release": "semantic-release",
     "chromatic": "npx chromatic --project-token=0db95ae1f8d9"
   },
+  "release": {
+    "branches": [
+      "main"
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/npm",
+      [
+        "@semantic-release/github",
+        {
+          "successComment": false,
+          "failComment": false
+        }
+      ]
+    ]
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/ooloi-labs/oolib.git"