contentoh-components-library 21.2.90 → 21.2.91

package/src/components/atoms/ImagePreview/index.js

@@ -0,0 +1,191 @@
+import { Container, ContainerLoading, ContainerModalImg, Img } from "./styles";
+import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
+import {
+  faSpinner as iconLoading,
+  faArrowDown as IconDownload,
+} from "@fortawesome/free-solid-svg-icons";
+import { useState, useEffect } from "react";
+import { Fade, Grow, Modal as ModalMUI, Zoom } from "@mui/material";
+import { Modal } from "../../organisms/Modal";
+import { ButtonV2 } from "../ButtonV2";
+import axios from "axios";
+import { Image } from "../Image";
+
+export const ImagePreview = (props) => {
+  const {
+    className, // string
+    width, // string
+    sizeLoading, // number
+    colorLoading, // string
+    downloadImgURL, // URL de la imagen a descargar (string)
+    imgURL, // imagen a cargar (string)
+    modalImgURL, // imagen a cargar (string) para el modo full
+    imageName, // nombre del file
+    showButtonDownload, // boolean
+    componentDefault, // componente a mostrar en caso de que no cargue src (JSX)
+    componentDefaultModal, // componente a mostrar en el modal en caso de que no cargue srcModal (JSX)
+  } = props;
+  const [imgLoad, setImgLoad] = useState();
+  const [imgLoadModal, setImgLoadModal] = useState();
+  const [loading, setLoading] = useState(false);
+  const [loadingDownload, setLoadingDownload] = useState(false);
+  const [showModalImg, setShowModalImg] = useState(false);
+  const [modalAlert, setModalAlert] = useState({
+    show: false,
+    title: "",
+    message:
+      "Ocurrió un error al descargar la imagen ¿Quieres intentarlo de nuevo?",
+    icon: "info",
+    buttons: [
+      <ButtonV2
+        key={"btn-No"}
+        type={"white"}
+        borderType={"oval"}
+        label={"No"}
+        size={12}
+        onClick={(event) => {
+          setModalAlert((prev) => ({
+            ...prev,
+            show: false,
+          }));
+        }}
+      />,
+      <ButtonV2
+        key={"btn-Intentar"}
+        type={"pink"}
+        borderType={"oval"}
+        label={"Intentar"}
+        size={12}
+        onClick={(event) => {
+          setModalAlert((prev) => ({
+            ...prev,
+            show: false,
+          }));
+          getImage();
+        }}
+      />,
+    ],
+  });
+
+  const getImage = () => {
+    //setLoadingDownload(true);
+    const link = document.createElement("a");
+    link.href = downloadImgURL;
+    link.setAttribute("download", imageName ?? "image");
+    link.style.display = "none";
+    link.onerror = () => {
+      setModalAlert((prev) => ({
+        ...prev,
+        show: true,
+      }));
+      return;
+    };
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  /* solo para hacer pruebas en modo dev
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 5000);
+  }, []); */
+  /*
+  useEffect(() => {
+    console.log("imgURL:", imgURL);
+    console.log("modalImgURL:", modalImgURL);
+  }, []);
+  */
+
+  return (
+    <Container className={className} width={width}>
+      {imgURL && (imgLoad === undefined || loading) && (
+        <ContainerLoading
+          className={"container-loading"}
+          sizeLoading={sizeLoading}
+          colorLoading={colorLoading}
+        >
+          <Icon className="icon" pulse icon={iconLoading} />
+        </ContainerLoading>
+      )}
+
+      {(!imgURL || (imgLoad === false && !loading)) && componentDefault}
+
+      <Img
+        show={imgLoad && !loading}
+        className="img"
+        src={imgURL}
+        onLoad={(event) => {
+          setImgLoad(true);
+        }}
+        onError={(event) => {
+          setImgLoad(false);
+        }}
+        onClick={(event) => {
+          setShowModalImg(true);
+        }}
+      />
+
+      {/* modal que muestra la img en pantalla completa con
+      boton de download en caso de ser especificado */}
+      <ModalMUI
+        open={showModalImg}
+        disablePortal={true}
+        closeAfterTransition
+        componentsProps={{
+          root: {
+            className: "container-modal",
+          },
+          backdrop: {
+            timeout: 400,
+            className: "container-background",
+          },
+        }}
+        onClick={(event) => {
+          if (!loadingDownload) setShowModalImg(false);
+        }}
+      >
+        <Fade in={showModalImg} timeout={400}>
+          <ContainerModalImg>
+            {/* icono download */}
+            {showButtonDownload && (
+              <div className="container-header">
+                <ButtonV2
+                  className={"container-btnDownload"}
+                  type={"pink"}
+                  size={14}
+                  borderType={"circle"}
+                  icon={IconDownload}
+                  isLoading={loadingDownload}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    getImage();
+                  }}
+                />
+              </div>
+            )}
+
+            <Image
+              className="container-imgModal"
+              classNameImg="img"
+              sizeLoading={100}
+              colorLoading={"white"}
+              src={modalImgURL}
+              componentDefault={componentDefaultModal}
+            />
+          </ContainerModalImg>
+        </Fade>
+      </ModalMUI>
+
+      {/* modal utilizado para alertar cuando falla la descarga */}
+      <Modal
+        show={modalAlert.show}
+        title={modalAlert.title}
+        message={modalAlert.message}
+        icon={modalAlert.icon}
+        buttons={modalAlert.buttons}
+      />
+    </Container>
+  );
+};

package/src/components/atoms/ImagePreview/styles.js

@@ -0,0 +1,77 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: grid;
+  place-items: center;
+  width: ${({ width }) => (width ? width : "min-content")};
+  min-width: min-content;
+
+  .container-modal {
+    .container-background {
+      background-color: rgba(0, 0, 0, 0.7);
+    }
+  }
+`;
+
+export const ContainerModalImg = styled.div`
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  background-color: transparent;
+
+  .container-header {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    padding: 8px 10px;
+
+    .container-btnDownload {
+      width: 28px;
+      height: 28px;
+      overflow: hidden;
+      display: grid;
+      place-items: center;
+    }
+  }
+
+  .container-imgModal {
+    width: 100%;
+    height: 100%;
+
+    .img {
+      width: 100%;
+      max-height: 100vh;
+      object-fit: contain;
+    }
+  }
+`;
+
+export const ContainerLoading = styled.div`
+  width: 100%;
+  display: grid;
+  place-items: center;
+  min-width: min-content;
+  font-size: ${({ sizeLoading }) => (sizeLoading ? sizeLoading : "30")}px;
+  color: ${({ colorLoading }) => (colorLoading ? colorLoading : "#9e2674")};
+  padding: 5px;
+`;
+
+export const Img = styled.img`
+  display: ${({ show }) => (show ? "grid" : "none")};
+  width: 100%;
+  cursor: pointer;
+  object-fit: contain;
+`;

package/src/components/atoms/InputText/InputText.stories.js

@@ -0,0 +1,39 @@
+import { InputText } from "./index";
+
+export default {
+  title: "Components/atoms/InputText",
+  component: InputText,
+  argTypes: {
+    type: {
+      options: [undefined, "white", "gray", "black"],
+      control: { type: "select" },
+    },
+    borderType: {
+      options: [undefined, "rectangle", "oval"],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <InputText {...args} />;
+
+export const InputTextTest = Template.bind({});
+InputTextTest.args = {
+  type: undefined,
+  transparent: true,
+  size: "17",
+  borderType: undefined,
+  placeHolder: "ingresa el texto",
+  multiline: true,
+  maxRows: "5",
+  minRows: "1",
+  //label: "titulo",
+  disabled: false,
+  initialText: "",
+  onChangeText: (newText) => {
+    console.log(newText);
+  },
+  onEnter: (event) => {
+    console.log("evento enter");
+  },
+};

package/src/components/atoms/InputText/index.js

@@ -0,0 +1,61 @@
+import { Container } from "./styles";
+import React from "react";
+import { TextField } from "@mui/material";
+
+export const InputText = (props) => {
+  const {
+    id,
+    key,
+    className,
+    type, // gray | black => (default -> black)
+    transparent, // boolean
+    size, // number ... default (13)
+    borderType, // rectangle || circle || (cualquier otro valor -> no borde)
+    placeHolder, // (string) texto por defecto
+    multiline, // (boolean) true -> textarea  false -> 1 linea
+    maxRows, //	(number) maxima cantidad de rows visibles
+    minRows, // (number) cantidad de rows visibles minimos
+    //label, // (string) titulo del inputText
+    disabled, // (boolean) true -> bloqueado
+    text, // (string) texto del input
+    onChangeText, // (newText) => {}
+    onEnter, // (event) => {}
+    refInputText, // useRef()
+  } = props;
+
+  return (
+    <>
+      <Container
+        id={id}
+        key={key}
+        className={"container-inputText " + className}
+        borderType={borderType}
+        size={size}
+      >
+        <TextField
+          className={
+            "inputText " +
+            (["gray", "white", "black"].includes(type) ? type : "white") +
+            (transparent ? " transparent" : " fill")
+          }
+          multiline={multiline}
+          inputRef={refInputText}
+          disabled={disabled}
+          placeholder={placeHolder}
+          label={undefined}
+          minRows={minRows}
+          maxRows={maxRows}
+          variant="outlined"
+          value={text}
+          onChange={(event) => onChangeText && onChangeText(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key == "Enter" && !event.shiftKey) {
+              event.preventDefault();
+              onEnter && onEnter(event);
+            }
+          }}
+        />
+      </Container>
+    </>
+  );
+};

package/src/components/atoms/InputText/styles.js

@@ -0,0 +1,89 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: fit-content;
+  min-width: min-content;
+  //border: 1px solid red;
+
+  .inputText {
+    width: 100%;
+    height: 100%;
+
+    // container interno del input o textarea
+    > div {
+      min-width: 0px;
+      font-family: ${FontFamily.RobotoRegular}, sans-serif;
+      font-size: ${({ size }) => (size ? size : "13")}px;
+      text-align: left;
+      color: #a2a2a2;
+      padding: ${({ borderType }) => {
+        return ["rectangle", "oval"].includes(borderType?.toLowerCase())
+          ? "5px 10px"
+          : "0px";
+      }};
+      border-radius: ${({ borderType }) => {
+        return borderType?.toLowerCase() === "oval"
+          ? "17px"
+          : borderType?.toLowerCase() === "rectangle"
+          ? "6px"
+          : "0px";
+      }};
+
+      // input 1 linea
+      > input {
+        padding: 0px;
+      }
+
+      // borde
+      > fieldset {
+        border: ${({ borderType }) => {
+          return ["rectangle", "oval"].includes(borderType?.toLowerCase())
+            ? "1px solid black"
+            : "none";
+        }};
+        border-color: inherit;
+      }
+
+      &.Mui-focused {
+        > fieldset {
+          border-color: inherit;
+        }
+      }
+      &.Mui-disabled {
+        cursor: not-allowed;
+        * {
+          cursor: inherit;
+        }
+      }
+    }
+
+    &.fill {
+      &.gray > div {
+        background-color: #e8e5e5;
+        color: #262626;
+        border-color: #7b7979;
+      }
+      &.white > div {
+        background-color: white;
+        color: #e33aa9;
+        border-color: #e33aa9;
+      }
+    }
+
+    &.transparent {
+      > div {
+        background-color: transparent;
+      }
+
+      &.gray > div {
+        color: #a2a2a2;
+        border-color: #7b7979;
+      }
+      &.black > div {
+        color: #262626;
+        border-color: #7b7979;
+      }
+    }
+  }
+`;

package/src/components/atoms/NotFound/NotFound.stories.js

@@ -0,0 +1,19 @@
+import { NotFound } from "./index";
+
+export default {
+  title: "Components/atoms/NotFound",
+  component: NotFound,
+  argTypes: {},
+};
+
+const Template = (args) => <NotFound {...args} />;
+
+export const NotFoundTest = Template.bind({});
+NotFoundTest.args = {
+  code: "501",
+  message: "No se pudo obtener los mensajes del chat",
+  details: "no se encontro la cadena asociada al producto",
+};
+
+export const NotFoundDefault = Template.bind({});
+NotFoundDefault.args = {};

package/src/components/atoms/NotFound/index.js

@@ -0,0 +1,52 @@
+import { Container } from "./styles";
+import { ButtonV2 } from "../ButtonV2";
+import { Modal } from "../../organisms/Modal";
+import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
+import { faCircleInfo as iconInfo } from "@fortawesome/free-solid-svg-icons";
+import imgNotFountDefault from "../../../assets/images/defaultImages/notFound.svg";
+import { useState, useEffect } from "react";
+
+export const NotFound = (props) => {
+  const {
+    className, // string
+    code, // string
+    message, // string
+    details, // string
+  } = props;
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <>
+      <Container className={className}>
+        <img src={imgNotFountDefault} alt={"imagen not found"} />
+
+        <div className="divInfo">
+          {/* icono info */}
+          <ButtonV2
+            className={"btnInfo"}
+            type={"pink"}
+            transparent
+            icon={iconInfo}
+            size={16}
+            onClick={() => {
+              setShowModal(true);
+            }}
+          />
+
+          <label className="label-error">
+            Codigo de error
+            <label> {code ? code : 404} </label>
+          </label>
+        </div>
+
+        <Modal
+          show={showModal}
+          title={message ? message : "Error NO especificado"}
+          message={details ? details : "Reporta esto a TI"}
+          icon={"info"}
+          onClickBtnDefault={(event) => setShowModal(false)}
+        />
+      </Container>
+    </>
+  );
+};

package/src/components/atoms/NotFound/styles.js

@@ -0,0 +1,55 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  min-width: min-content;
+  min-height: min-content;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  padding: 20px 10px;
+  overflow: auto;
+  //border: 1px solid red;
+
+  img {
+    width: 80%;
+    min-width: 35px;
+    max-width: 480px;
+    max-height: 90%;
+    object-fit: contain;
+    //border: 1px solid blue;
+  }
+
+  .divInfo {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 7px;
+    align-items: center;
+
+    .btnInfo {
+      padding: 0px;
+    }
+
+    .label-error {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 3px;
+      font-family: ${FontFamily.RobotoRegular}, sans-serif;
+      font-size: 13px;
+      color: #262626;
+
+      label {
+        font-family: ${FontFamily.RobotoMedium}, sans-serif;
+        font-size: 15px;
+        color: #e33aa9;
+      }
+    }
+  }
+`;

package/src/components/atoms/Tooltip/Tooltip.stories.js

@@ -0,0 +1,51 @@
+import { Tooltip } from "./index";
+
+export default {
+  title: "Components/atoms/Tooltip",
+  component: Tooltip,
+  argTypes: {
+    position: {
+      options: [
+        undefined,
+        "topStart",
+        "topEnd",
+        "topCenter",
+        "rightStart",
+        "rightEnd",
+        "rightCenter",
+        "bottomStart",
+        "bottomEnd",
+        "bottomCenter",
+        "leftStart",
+        "leftEnd",
+        "leftCenter",
+      ],
+      control: { type: "select" },
+    },
+    addArrow: {
+      options: [undefined, false, true],
+      control: { type: "select" },
+    },
+    transitionType: {
+      options: [undefined, "grow", "fade", "zoom"],
+      control: { type: "select" },
+    },
+    followCursor: {
+      options: [undefined, false, true],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <Tooltip {...args} />;
+
+export const TooltipDefault = Template.bind({});
+TooltipDefault.args = {
+  componentTooltip: <p> hola soy tooltip de prueba en storybook </p>,
+  children: <button> abrir tooltip </button>,
+  classNameTooltip: "container-tooltip",
+  position: undefined,
+  addArrow: undefined,
+  transitionType: undefined,
+  followCursor: undefined,
+};

package/src/components/atoms/Tooltip/index.js

@@ -0,0 +1,59 @@
+import { useEffect, useRef, useState } from "react";
+import { Fade, Grow, Popper, Tooltip as TooltipMUI, Zoom } from "@mui/material";
+import { Container } from "./styles";
+import React from "react";
+
+export const Tooltip = (props) => {
+  const {
+    componentTooltip, // (jsx) componente que aparecera en el tooltip
+    children, // (jsx) componente interno que va dentro de la etiqueta <Tooltip>
+    className, // (string) clase del container trigger
+    classNameTooltip, // (string) clase del contenedor tooltip
+    position, // (string) posicion del contenedor tooltip (values en object positions)
+    addArrow, // (boolean) add flecha en la parte posterior del tooltip?
+    transitionType, // (string) -> 'grow' (default) | 'fade' | 'zoom'
+    followCursor, //  (boolean) true -> el tooltip se movera junto al cursor
+  } = props;
+  const positions = {
+    topStart: "top-start",
+    topEnd: "top-end",
+    topCenter: "top",
+
+    rightStart: "right-start",
+    rightEnd: "right-end",
+    rightCenter: "right",
+
+    bottomStart: "bottom-start",
+    bottomEnd: "bottom-end",
+    bottomCenter: "bottom",
+
+    leftStart: "left-start",
+    leftEnd: "left-end",
+    leftCenter: "left",
+  };
+
+  return (
+    <TooltipMUI
+      {...props}
+      placement={positions[position] ?? positions.topCenter}
+      arrow={addArrow || addArrow === undefined ? true : false}
+      componentsProps={{
+        tooltip: { className: classNameTooltip },
+        popper: { disablePortal: true },
+        transition: { timeout: 300 },
+      }}
+      TransitionComponent={
+        transitionType === "grow"
+          ? Grow
+          : transitionType === "fade"
+          ? Fade
+          : Zoom
+      }
+      enterDelay={300}
+      followCursor={followCursor ?? false}
+      title={componentTooltip}
+    >
+      <Container className={className}> {children} </Container>
+    </TooltipMUI>
+  );
+};