contentoh-components-library 21.3.5 → 21.3.7

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

@@ -0,0 +1,52 @@
+import { ImagePreview } from "./index";
+
+export default {
+  title: "Components/atoms/ImagePreview",
+  component: ImagePreview,
+  argTypes: {},
+};
+
+const Template = (args) => <ImagePreview {...args} />;
+
+const keyS3_test =
+  "84300/1/chat/playa-213f791b-d890-48e1-be19-28bf5a95d517.jpeg";
+const srcTest = `https://content-management-images.s3.amazonaws.com/${keyS3_test}`;
+export const ImageTest = Template.bind({});
+ImageTest.args = {
+  className: "modal-imagePreview",
+  width: "200px",
+  sizeLoading: "50",
+  colorLoading: "#bbbbbb",
+  url: srcTest,
+  imageName: "playa-213f791b-d890-48e1-be19-28bf5a95d517.jpeg",
+  showButtonDownload: true,
+  componentDefault: <label> test error </label>,
+};
+
+const keyS3_OK =
+  "84300/1/chat/f6579ed5-16e5-48d8-ace5-6be8e8e68f53-38896acf-9179-4686-9088-9784df624ab8.png";
+const srcOK = `https://content-management-images.s3.amazonaws.com/${keyS3_OK}`;
+export const ImageOK = Template.bind({});
+ImageOK.args = {
+  width: "250px",
+  sizeLoading: "40",
+  url: srcOK,
+  imageName:
+    "f6579ed5-16e5-48d8-ace5-6be8e8e68f53-38896acf-9179-4686-9088-9784df624ab8.png",
+  showButtonDownload: true,
+  componentDefault: <label> img no cargada </label>,
+};
+
+const keyS3_ERROR =
+  "84300/1/chat/21dba1da-3c60-42c4-97bd-033664808256-fb19ff57-b91c-4ef2-ba2a-d857b55fb33b.svg";
+const srcERROR = `https://content-management-images.s3.amazonaws.com/${keyS3_ERROR}`;
+export const ImageERROR = Template.bind({});
+ImageERROR.args = {
+  width: "300px",
+  sizeLoading: "60",
+  url: srcERROR,
+  imageName:
+    "21dba1da-3c60-42c4-97bd-033664808256-fb19ff57-b91c-4ef2-ba2a-d857b55fb33b.svg",
+  showButtonDownload: true,
+  componentDefault: <label> ERROR al cargar </label>,
+};

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/ProgressBar/index.js

@@ -1,9 +1,44 @@
-import { Container } from "./styles";
+import { Container, ContainerIcon } from "./styles";
+import { Tooltip } from "../Tooltip";
 
-export const ProgressBar = ({ percent, progressBarType }) => {
+export const ProgressBar = ({ percent, progressBarType, percentRequired }) => {
   return (
-    <Container className={`status-${progressBarType}`}>
-      <p>{percent}%</p>
-    </Container>
+    <>
+      {percentRequired ? (
+        <>
+          <Tooltip
+            componentTooltip={
+              <>
+                <p>
+                  <b>Campos requeridos</b>
+                </p>
+                <p>
+                  Este nuevo icono te indicará cuando <br></br> completes todos
+                  los campos requeridos
+                </p>
+              </>
+            }
+            children={
+              <ContainerIcon
+                className="fondo"
+                percentageRequired={percentRequired}
+              >
+                <span class="hola">local_police</span>
+              </ContainerIcon>
+            }
+            classNameTooltip={"container-tooltip"}
+            position={undefined}
+            addArrow={undefined}
+            transitionType={undefined}
+            followCursor={undefined}
+          ></Tooltip>
+        </>
+      ) : (
+        ""
+      )}
+      <Container className={`status-${progressBarType}`}>
+        <p>{percent}%</p>
+      </Container>
+    </>
   );
 };