josenanodev-react-components-library 1.0.4 → 1.0.6

package/dist/cjs/components/InputBoxWithConfirmation/InputBoxWithConfirmation.js

@@ -1,137 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const InputBoxWithConfirmation_module_scss_1 = __importDefault(require("./InputBoxWithConfirmation.module.scss"));
-//Hooks
-const useOutsideClick_1 = __importDefault(require("../../hooks/useOutsideClick"));
-//Icons
-const bs_1 = require("react-icons/bs");
-const InputBoxWithConfirmation = ({ onConfirmAction, inputType = "text", minimumValue = "", maximumValue = "", maxLength, placeholder = "", divWrapperCustomStyle, inputBoxCustomStyle, defaultValue, overrideCurrentValue, showConfirmationButton, disabled, }) => {
-    //Refs
-    const inputRef = (0, react_1.useRef)(null);
-    const containerRef = (0, react_1.useRef)(null);
-    //States
-    const [cachedValue, setCachedValue] = (0, react_1.useState)(defaultValue !== undefined ? String(defaultValue) : "");
-    const [currentValue, setCurrentValue] = (0, react_1.useState)(defaultValue !== undefined ? String(defaultValue) : "");
-    const [focused, setFocused] = (0, react_1.useState)(false);
-    //Functions
-    const currentValueValueValidated = () => {
-        if (!currentValue) {
-            return cachedValue;
-        }
-        if (inputType === "number") {
-            let numericValue = Number(currentValue);
-            if (minimumValue !== "" && numericValue < Number(minimumValue)) {
-                numericValue = Number(minimumValue);
-            }
-            else if (maximumValue !== "" && numericValue > Number(maximumValue)) {
-                numericValue = Number(maximumValue);
-            }
-            return String(numericValue);
-        }
-        else {
-            return currentValue;
-        }
-    };
-    const onConfirmActionHandler = () => {
-        setCurrentValue(currentValueValueValidated());
-        if (currentValueValueValidated()) {
-            onConfirmAction(currentValueValueValidated());
-            setCachedValue(currentValueValueValidated());
-        }
-    };
-    //Hooks
-    (0, useOutsideClick_1.default)(containerRef, () => {
-        if (focused) {
-            if (showConfirmationButton) {
-                setCurrentValue(cachedValue);
-            }
-            else {
-                onConfirmActionHandler();
-            }
-            setFocused(false);
-        }
-    });
-    //Effects
-    (0, react_1.useEffect)(() => {
-        if (overrideCurrentValue !== undefined) {
-            setCurrentValue(String(overrideCurrentValue));
-            setCachedValue(String(overrideCurrentValue));
-        }
-        else if (overrideCurrentValue === null) {
-            setCurrentValue("");
-            setCachedValue("");
-        }
-    }, [overrideCurrentValue]);
-    return (react_1.default.createElement("div", { ref: containerRef, style: divWrapperCustomStyle, className: `${InputBoxWithConfirmation_module_scss_1.default["div-wrapper"]} ${focused ? InputBoxWithConfirmation_module_scss_1.default["focused"] : ""}` },
-        react_1.default.createElement("input", { ref: inputRef, disabled: disabled, className: InputBoxWithConfirmation_module_scss_1.default["input-box-with-confirmation"], type: inputType, style: Object.assign({ width: `${((currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) ? currentValue.length : 0) + 7}ch` }, inputBoxCustomStyle), min: minimumValue, max: maximumValue, maxLength: maxLength, placeholder: placeholder, value: focused ? currentValue : cachedValue, onChange: (event) => {
-                let value = event.target.value;
-                if (maxLength && value.length > maxLength) {
-                    value = value.slice(0, maxLength);
-                }
-                setCurrentValue(value);
-            }, onFocus: (event) => {
-                setCachedValue(event.target.value);
-                setCurrentValue(event.target.value);
-                setFocused(true);
-            }, onKeyDown: (event) => {
-                if (event.key === "Enter") {
-                    onConfirmActionHandler();
-                    setFocused(false);
-                    if (inputRef.current) {
-                        inputRef.current.blur();
-                    }
-                }
-                else if (event.key === "Tab") {
-                    onConfirmActionHandler();
-                    setFocused(false);
-                    if (inputRef.current) {
-                        inputRef.current.blur();
-                    }
-                }
-                else if (event.key === "Escape") {
-                    setCurrentValue(cachedValue);
-                    setFocused(false);
-                    if (inputRef.current) {
-                        inputRef.current.blur();
-                    }
-                }
-            } }),
-        !disabled && showConfirmationButton && (react_1.default.createElement(react_1.Fragment, null, focused ? (react_1.default.createElement("button", { className: InputBoxWithConfirmation_module_scss_1.default["button-for-input-box-with-confirmation"], onClick: () => {
-                onConfirmActionHandler();
-                setFocused(false);
-            } },
-            react_1.default.createElement(bs_1.BsCheckLg, null))) : (react_1.default.createElement("button", { className: InputBoxWithConfirmation_module_scss_1.default["button-for-input-box-with-confirmation"], onClick: () => {
-                if (inputRef.current) {
-                    inputRef.current.focus();
-                }
-            } },
-            react_1.default.createElement(bs_1.BsPencil, null)))))));
-};
-exports.default = InputBoxWithConfirmation;

package/dist/cjs/components/InputBoxWithConfirmation/InputBoxWithConfirmation.module.scss

@@ -1,52 +0,0 @@
-.div-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: solid 1px rgb(184, 184, 184);
-  background-color: rgb(250, 250, 250);
-  border-radius: 8px;
-  transition: border 0.3s;
-  &.focused {
-    border-color: #218dec;
-  }
-  .input-box-with-confirmation {
-    box-sizing: border-box;
-    padding: 10px 2ch;
-    min-width: 10ch;
-    text-align: center;
-    border: none;
-    background-color: transparent;
-    font-size: 16px;
-    font-weight: 600;
-    color: dimgray;
-    transition: all 0.2s;
-    &::-webkit-inner-spin-button {
-      display: none;
-    }
-    &:focus {
-      outline: none;
-    }
-  }
-  .button-for-input-box-with-confirmation {
-    position: absolute;
-    right: 0px;
-    background-color: transparent;
-    color: rgb(158, 158, 158);
-    width: 32px;
-    height: 32px;
-    border-radius: 16px;
-    font-size: 16px;
-    border: none;
-    cursor: pointer;
-    transition: all 0.2s;
-    &:focus {
-      outline: none;
-    }
-    &:hover {
-      background-color: rgb(241, 241, 241);
-      color: var(--primary-color);
-    }
-  }
-}
-

package/dist/cjs/components/IntegerControl/IntegerControl.js

@@ -1,52 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const IntegerControl_module_scss_1 = __importDefault(require("./IntegerControl.module.scss"));
-//icons
-const ai_1 = require("react-icons/ai");
-const IntegerControl = ({ onChange = () => { }, defaultValue = 0, minimumValue, maximumValue, customStyle, }) => {
-    const [currentValue, setCurrentValue] = (0, react_1.useState)(defaultValue);
-    return (react_1.default.createElement("div", { className: `${IntegerControl_module_scss_1.default["integer-control"]} ${currentValue === defaultValue ? IntegerControl_module_scss_1.default["default"] : ""}`, style: customStyle },
-        react_1.default.createElement("button", { onClick: () => {
-                setCurrentValue(currentValue - 1);
-                onChange(currentValue - 1);
-            } },
-            react_1.default.createElement(ai_1.AiFillMinusCircle, null)),
-        react_1.default.createElement("input", { onChange: (event) => {
-                const numericValue = Number(event.target.value);
-                setCurrentValue(numericValue);
-                onChange(numericValue);
-            }, value: currentValue, type: "number", defaultValue: String(defaultValue), min: String(minimumValue), max: String(maximumValue), style: { width: currentValue.toString().length + 1 + "ch" } }),
-        react_1.default.createElement("button", { onClick: () => {
-                setCurrentValue(currentValue + 1);
-                onChange(currentValue + 1);
-            } },
-            react_1.default.createElement(ai_1.AiFillPlusCircle, null))));
-};
-exports.default = IntegerControl;

package/dist/cjs/components/IntegerControl/IntegerControl.module.scss

@@ -1,46 +0,0 @@
-.integer-control {
-  display: flex;
-  align-items: center;
-  button {
-    border: none;
-    background: none;
-    padding: 0;
-    margin: 0;
-    svg {
-      height: 44px;
-      width: 44px;
-      fill: #c9c9c9;
-      transition: fill 100ms ease-in-out;
-      cursor: pointer;
-      &:active {
-        fill: #787878;
-      }
-    }
-  }
-  input {
-    border: none;
-    background: none;
-    padding: 0;
-    color: #414141;
-    text-align: center;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 32px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: normal;
-    min-width: 84px;
-    transition: color 300ms ease-in-out;
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-    &:focus {
-      outline: transparent;
-    }
-  }
-  &.default {
-    input {
-      color: #787878;
-    }
-  }
-}

package/dist/cjs/components/LabeledInput/LabeledInput.js

@@ -1,47 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const LabeledInput_module_scss_1 = __importDefault(require("./LabeledInput.module.scss"));
-const LabeledInput = ({ label, defaultValue, onChange = () => { }, width = "328px", height = "66px", backgroundColor = "white", textAlign = "left", highlightError = false, errorMessage, inputProps, }) => {
-    const inputRef = (0, react_1.useRef)(null);
-    const [shrinkLabel, setShrinkLabel] = (0, react_1.useState)(defaultValue ? true : false);
-    return (react_1.default.createElement("div", { className: LabeledInput_module_scss_1.default["labeled-input"] + (highlightError ? ` ${LabeledInput_module_scss_1.default["error"]}` : ""), onClick: () => {
-            if (inputRef.current) {
-                inputRef.current.focus();
-            }
-        }, style: { width, height, backgroundColor } },
-        react_1.default.createElement("label", { className: shrinkLabel ? LabeledInput_module_scss_1.default["focused"] : "" }, label),
-        react_1.default.createElement("input", Object.assign({ ref: inputRef }, inputProps, { onFocus: () => setShrinkLabel(true), onBlur: (event) => {
-                if (!event.target.value) {
-                    setShrinkLabel(false);
-                }
-            }, defaultValue: defaultValue, onChange: (event) => onChange(event.target.value), style: { textAlign } })),
-        highlightError && errorMessage && (react_1.default.createElement("p", { className: LabeledInput_module_scss_1.default["error-message"] }, errorMessage))));
-};
-exports.default = LabeledInput;

package/dist/cjs/components/LabeledInput/LabeledInput.module.scss

@@ -1,74 +0,0 @@
-.labeled-input {
-  position: relative;
-  border-radius: 8px;
-  border: 2px solid #959595;
-  padding: 0px 28px;
-  background: #fff;
-  box-sizing: border-box;
-  transition: all 200ms ease-in-out;
-  cursor: pointer;
-  label {
-    z-index: 1;
-    position: absolute;
-    color: #959595;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-    top: calc(50% - 10px);
-    left: 28px;
-    padding: 0;
-    transition: all 200ms ease-in-out;
-    user-select: none;
-    &.focused {
-      top: 2px;
-      left: 10px;
-      font-weight: 600;
-      font-size: 12px;
-      padding: 0px 5px;
-    }
-  }
-  input {
-    z-index: 2;
-    position: absolute;
-    top: calc(50% - 12px);
-    height: 24px;
-    width: calc(100% - 56px);
-    border: none;
-    outline: transparent;
-    background: transparent;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-    color: #959595;
-    padding: 0;
-    cursor: pointer;
-    &:focus {
-      outline: transparent;
-      cursor: text;
-    }
-  }
-  &.error {
-    border-color: #f34d1b;
-    label {
-      color: #e17959;
-    }
-  }
-  .error-message {
-    position: absolute;
-    margin: 0;
-    top: calc(100% + 5px);
-    left: 5px;
-    color: #f34d1b;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-    padding: 0;
-    transition: all 200ms ease-in-out;
-  }
-}

package/dist/cjs/components/Modal/Modal.css

@@ -1,43 +0,0 @@
-.trc-modal,
-.trc-close-modal {
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  backdrop-filter: blur(10px);
-  top: 0;
-  left: 0;
-  z-index: 1010;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  animation-name: trc-open-modal-animation;
-  animation-duration: 500ms;
-}
-
-.trc-close-modal {
-  animation-name: trc-close-modal-animation;
-  animation-duration: 500ms;
-}
-
-@keyframes trc-open-modal-animation {
-  from {
-    backdrop-filter: none;
-    opacity: 0;
-  }
-  to {
-    backdrop-filter: blur(10px);
-    opacity: 1;
-  }
-}
-
-@keyframes trc-close-modal-animation {
-  from {
-    backdrop-filter: blur(10px);
-    opacity: 1;
-  }
-  to {
-    backdrop-filter: none;
-    opacity: 0;
-    display: none;
-  }
-}

package/dist/cjs/components/Modal/Modal.js

@@ -1,82 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const react_dom_1 = __importDefault(require("react-dom"));
-require("./Modal.css");
-//Hooks
-const useOutsideClick_1 = __importDefault(require("../../hooks/useOutsideClick"));
-const Modal = ({ children, visibility, forced = false, onOpen, onClose, transitionTime = 500, }) => {
-    //Refs
-    const modalRef = (0, react_1.useRef)(null);
-    //Estados
-    const [visible, setVisible] = (0, react_1.useState)(visibility);
-    //Hooks
-    (0, useOutsideClick_1.default)(modalRef, () => {
-        if (modalRef.current !== null && !forced) {
-            modalRef.current.className = "close-modal";
-            setTimeout(() => {
-                setVisible(false);
-                if (onClose)
-                    onClose();
-            }, transitionTime - 50);
-        }
-    });
-    //UseEffect
-    (0, react_1.useEffect)(() => {
-        if (visibility) {
-            setVisible(true);
-            if (onOpen)
-                onOpen();
-        }
-        else if (!visibility) {
-            setTimeout(() => {
-                setVisible(false);
-                if (onClose)
-                    onClose();
-            }, transitionTime - 50);
-        }
-    }, [visibility, transitionTime, onOpen, onClose]);
-    //Render
-    if (visible) {
-        return react_dom_1.default.createPortal(react_1.default.createElement("div", { ref: modalRef, className: visibility ? "trc-modal" : "trc-close-modal", style: { animationDuration: `${transitionTime}ms` }, onClick: (event) => {
-                if (event.target.id === "modal" && !forced) {
-                    event.target.id = "close-modal";
-                    setTimeout(() => {
-                        setVisible(false);
-                        if (onClose)
-                            onClose();
-                    }, transitionTime - 50);
-                }
-            } }, children), document.getElementById("root") || document.body);
-    }
-    else {
-        return react_1.default.createElement(react_1.default.Fragment, null);
-    }
-};
-exports.default = Modal;

package/dist/cjs/components/Modal/types.d.ts

@@ -1,8 +0,0 @@
-export interface ModalPropsType {
-  children: JSX.Element;
-  visibility: boolean;
-  forced?: boolean;
-  onOpen?: Function;
-  onClose?: Function;
-  transitionTime?: number;
-}