josenanodev-react-components-library 1.0.4 → 1.0.5

package/dist/esm/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/esm/components/IntegerControl/IntegerControl.js

@@ -1,24 +0,0 @@
-import React, { useState } from "react";
-import styles from "./IntegerControl.module.scss";
-//icons
-import { AiFillMinusCircle, AiFillPlusCircle } from "react-icons/ai";
-const IntegerControl = ({ onChange = () => { }, defaultValue = 0, minimumValue, maximumValue, customStyle, }) => {
-    const [currentValue, setCurrentValue] = useState(defaultValue);
-    return (React.createElement("div", { className: `${styles["integer-control"]} ${currentValue === defaultValue ? styles["default"] : ""}`, style: customStyle },
-        React.createElement("button", { onClick: () => {
-                setCurrentValue(currentValue - 1);
-                onChange(currentValue - 1);
-            } },
-            React.createElement(AiFillMinusCircle, null)),
-        React.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.createElement("button", { onClick: () => {
-                setCurrentValue(currentValue + 1);
-                onChange(currentValue + 1);
-            } },
-            React.createElement(AiFillPlusCircle, null))));
-};
-export default IntegerControl;

package/dist/esm/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/esm/components/LabeledInput/LabeledInput.js

@@ -1,19 +0,0 @@
-import React, { useState, useRef } from "react";
-import styles from "./LabeledInput.module.scss";
-const LabeledInput = ({ label, defaultValue, onChange = () => { }, width = "328px", height = "66px", backgroundColor = "white", textAlign = "left", highlightError = false, errorMessage, inputProps, }) => {
-    const inputRef = useRef(null);
-    const [shrinkLabel, setShrinkLabel] = useState(defaultValue ? true : false);
-    return (React.createElement("div", { className: styles["labeled-input"] + (highlightError ? ` ${styles["error"]}` : ""), onClick: () => {
-            if (inputRef.current) {
-                inputRef.current.focus();
-            }
-        }, style: { width, height, backgroundColor } },
-        React.createElement("label", { className: shrinkLabel ? styles["focused"] : "" }, label),
-        React.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.createElement("p", { className: styles["error-message"] }, errorMessage))));
-};
-export default LabeledInput;

package/dist/esm/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/esm/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/esm/components/Modal/Modal.js

@@ -1,54 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import ReactDOM from "react-dom";
-import "./Modal.css";
-//Hooks
-import useOutsideClick from "../../hooks/useOutsideClick";
-const Modal = ({ children, visibility, forced = false, onOpen, onClose, transitionTime = 500, }) => {
-    //Refs
-    const modalRef = useRef(null);
-    //Estados
-    const [visible, setVisible] = useState(visibility);
-    //Hooks
-    useOutsideClick(modalRef, () => {
-        if (modalRef.current !== null && !forced) {
-            modalRef.current.className = "close-modal";
-            setTimeout(() => {
-                setVisible(false);
-                if (onClose)
-                    onClose();
-            }, transitionTime - 50);
-        }
-    });
-    //UseEffect
-    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 ReactDOM.createPortal(React.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.createElement(React.Fragment, null);
-    }
-};
-export default Modal;

package/dist/esm/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;
-}

package/dist/esm/components/Multicalendar/Multicalendar.css

@@ -1,191 +0,0 @@
-.trc-multicalendar {
-  display: grid;
-  color: black;
-  width: 100%;
-  height: 100%;
-  grid-template-areas:
-    "fil con"
-    "fil hor"
-    "ver gri";
-  text-align: center;
-  transition: 0.5s;
-}
-
-.trc-multicalendar .div-upper-left-component {
-  grid-area: fil;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  background-color: white;
-  border-bottom: 1px solid rgb(235, 235, 235);
-  border-right: 1px solid rgb(235, 235, 235);
-  box-sizing: border-box;
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.trc-multicalendar .controls {
-  grid-area: con;
-  height: 100%;
-  padding: 2px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap-reverse;
-  box-sizing: border-box;
-  border-bottom: var(--border-tenues);
-}
-
-.trc-multicalendar .div-upper-left-component {
-  grid-area: fil;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  background-color: white;
-  border-bottom: 1px solid rgb(235, 235, 235);
-  border-right: 1px solid rgb(235, 235, 235);
-  box-sizing: border-box;
-  display: flex;
-  flex-flow: column;
-  justify-content: flex-end;
-}
-
-
-.trc-multicalendar .vertical-axis {
-  grid-area: ver;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  box-shadow: rgb(0 0 0 / 15%) 0px 0px 16px 5px;
-  z-index: 1;
-}
-
-.trc-multicalendar .horizontal-axis {
-  grid-area: hor;
-  position: relative;
-  max-width: 100%;
-  height: 90px;
-}
-
-.trc-multicalendar .controls .div-dates-navigation {
-  display: flex;
-  align-items: center;
-}
-
-.trc-multicalendar .controls .div-dates-navigation button {
-  cursor: pointer;
-  margin: 0px;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  border: 1px solid rgb(216, 216, 216);
-  padding: 4px 8px;
-  box-sizing: border-box;
-  color: black;
-  font-size: 14px;
-  touch-action: manipulation;
-  border-radius: 6px;
-  background: rgb(255, 255, 255);
-  font-weight: normal;
-  height: calc(100% - 16px);
-}
-
-.trc-multicalendar .controls .div-aditional-controls-components {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  flex-grow: 1;
-}
-
-.trc-multicalendar .div-main-container {
-  grid-area: gri;
-  height: 100%;
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-}
-
-.trc-multicalendar .div-main-container .div-cargando-contenedor-principal {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 2;
-  background-color: rgba(236, 236, 236, 0.8);
-}
-
-.trc-multicalendar .main-container {
-  position: relative;
-  min-width: 100%;
-  height: 100%;
-  overflow-x: scroll;
-}
-
-.trc-multicalendar .vertical-axis .div-list-element-column {
-  height: 100%;
-  overflow-y: scroll;
-  box-sizing: border-box;
-}
-
-.trc-multicalendar .horizontal-axis .div-weeks-buttons {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 74px;
-}
-
-.trc-multicalendar .horizontal-axis .div-weeks-buttons .past-week-button,
-.trc-multicalendar .horizontal-axis .div-weeks-buttons .next-week-button {
-  z-index: 2;
-  position: absolute;
-  background-color: transparent;
-  border: none;
-  height: 100%;
-  width: 32px;
-  font-size: 1em;
-  color: var(--primary-color);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.3s;
-  height: 75%;
-  background: rgb(255 255 255);
-  box-shadow: 0px 0px 8px 8px white;
-}
-
-.trc-multicalendar .horizontal-axis .div-weeks-buttons .past-week-button:hover,
-.trc-multicalendar .horizontal-axis .div-weeks-buttons .next-week-button:hover {
-  background: rgb(247, 247, 247);
-  box-shadow: 0px 0px 8px 8px rgb(247 247 247);
-}
-
-.trc-multicalendar .horizontal-axis .div-weeks-buttons .past-week-button:active,
-.trc-multicalendar .horizontal-axis .div-weeks-buttons .next-week-button:active {
-  background: rgb(167, 167, 167);
-  box-shadow: 0px 0px 8px 8px rgb(167, 167, 167);
-}
-
-.trc-multicalendar .horizontal-axis .div-weeks-buttons .past-week-button {
-  left: 5px;
-}
-
-.trc-multicalendar .horizontal-axis .div-weeks-buttons .next-week-button {
-  right: 5px;
-}
-
-.trc-multicalendar .horizontal-axis .div-dates-row {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  overflow-x: scroll;
-  border-bottom: 1px solid rgb(235, 235, 235);
-  box-sizing: border-box;
-}