contentoh-components-library 21.3.11 → 21.3.13

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

@@ -1,67 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  width: fit-content;
-  min-width: min-content;
-  min-height: min-content;
-  overflow: hidden;
-  cursor: default;
-  display: grid;
-  place-items: center;
-  padding: 0px;
-  border-radius: ${({ borderType }) => {
-    return borderType?.toLowerCase() === "rectangle"
-      ? "6px"
-      : borderType?.toLowerCase() === "circle"
-      ? "50%"
-      : "0px";
-  }};
-  border: none;
-
-  // colores de acuerdo al tipo de icono
-  &.icon-word .icon {
-    color: #1f3780;
-    border-color: #1f3780;
-  }
-  &.icon-excel .icon {
-    color: #2d5639;
-    border-color: #2d5639;
-  }
-  &.icon-csv .icon {
-    color: #6b8e73;
-    border-color: #6b8e73;
-  }
-  &.icon-image .icon {
-    color: #ca7f4d;
-    border-color: #ca7f4d;
-  }
-  &.icon-pdf .icon {
-    color: #951a1a;
-    border-color: #951a1a;
-  }
-  &.icon-powerPoint .icon {
-    color: #ba4f19;
-    border-color: #ba4f19;
-  }
-  &.icon-zip .icon {
-    color: #b8950c;
-    border-color: #b8950c;
-  }
-  &.icon-code .icon {
-    color: #1c778e;
-    border-color: #1c778e;
-  }
-  &.icon-video .icon {
-    color: #a15bb1;
-    border-color: #a15bb1;
-  }
-  &.icon-audio .icon {
-    color: #3090e9;
-    border-color: #3090e9;
-  }
-  &.icon-default .icon {
-    color: #5e6265;
-    border-color: #5e6265;
-  }
-`;

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

@@ -1,51 +0,0 @@
-import { Image } from "./index";
-
-export default {
-  title: "Components/atoms/Image",
-  component: Image,
-  argTypes: {
-    borderType: {
-      options: [undefined, "rectangle", "circle"],
-      control: { type: "select" },
-    },
-  },
-};
-
-const Template = (args) => <Image {...args} />;
-
-const keyS3_test =
-  "84300/1/chat/playa-213f791b-d890-48e1-be19-28bf5a95d517.jpeg";
-const srcTest = `https://content-management-profile.s3.amazonaws.com/id-59/59.png`;
-export const ImageTest = Template.bind({});
-ImageTest.args = {
-  width: "200px",
-  sizeLoading: "50",
-  colorLoading: "#bbbbbb",
-  src: srcTest,
-  componentDefault: <label> test error </label>,
-  borderType: undefined,
-};
-
-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",
-  src: srcOK,
-  componentDefault: <label> img no cargada </label>,
-  borderType: undefined,
-};
-
-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",
-  src: srcERROR,
-  componentDefault: <label> ERROR al cargar </label>,
-  borderType: undefined,
-};

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

@@ -1,55 +0,0 @@
-import { Container, ContainerLoading, Img } from "./styles";
-import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
-import { faSpinner as iconLoading } from "@fortawesome/free-solid-svg-icons";
-import { useState, useEffect } from "react";
-
-export const Image = (props) => {
-  const {
-    className, // string
-    width, // string
-    sizeLoading, // number
-    colorLoading, // string
-    classNameLoading, // string
-    src, // imagen a cargar (string)
-    componentDefault, // componente a mostrar en caso de que no cargue src (JSX)
-    classNameImg, // string
-    borderType, // "rectangle" | "circle" -> por default none
-  } = props;
-  const [imgLoad, setImgLoad] = useState();
-  const [loading, setLoading] = useState(false);
-
-  /* solo para hacer pruebas en modo dev
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-    }, 5000);
-  }, []); */
-
-  return (
-    <Container className={className} width={width} borderType={borderType}>
-      {src && (imgLoad === undefined || loading) && (
-        <ContainerLoading
-          className={classNameLoading}
-          sizeLoading={sizeLoading}
-          colorLoading={colorLoading}
-        >
-          <Icon pulse icon={iconLoading} />
-        </ContainerLoading>
-      )}
-
-      {(!src || (imgLoad === false && !loading)) && componentDefault}
-
-      <Img
-        className={classNameImg}
-        src={src}
-        onLoad={(event) => {
-          setImgLoad(true);
-        }}
-        onError={(event) => {
-          setImgLoad(false);
-        }}
-        show={imgLoad === true && !loading}
-      />
-    </Container>
-  );
-};

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

@@ -1,34 +0,0 @@
-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;
-  overflow: hidden;
-  border-radius: ${({ borderType }) => {
-    return borderType?.toLowerCase() === "rectangle"
-      ? "6px"
-      : borderType?.toLowerCase() === "circle"
-      ? "50%"
-      : "0px"; // default none
-  }};
-`;
-
-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%;
-  object-fit: contain;
-  border-radius: inherit;
-`;

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

@@ -1,43 +0,0 @@
-import { ImageLink } from "./index";
-
-export default {
-  title: "Components/atoms/ImageLink",
-  component: ImageLink,
-  argTypes: {},
-};
-
-const Template = (args) => <ImageLink {...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 = {
-  width: "200px",
-  sizeLoading: "50",
-  colorLoading: "#bbbbbb",
-  src: srcTest,
-  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",
-  src: srcOK,
-  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",
-  src: srcERROR,
-  componentDefault: <label> ERROR al cargar </label>,
-};

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

@@ -1,57 +0,0 @@
-import { Container, ContainerLoading, ContainerLink } from "./styles";
-import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
-import { faSpinner as iconLoading } from "@fortawesome/free-solid-svg-icons";
-import { useState, useEffect } from "react";
-
-export const ImageLink = (props) => {
-  const {
-    className, // string
-    width, // string
-    sizeLoading, // number
-    colorLoading, // string
-    src, // imagen a cargar (string)
-    componentDefault, // componente a mostrar en caso de que no cargue src (JSX)
-  } = props;
-  const [imgLoad, setImgLoad] = useState();
-  const [loading, setLoading] = useState(false);
-
-  /* solo para hacer pruebas en modo dev
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-    }, 5000);
-  }, []); */
-
-  return (
-    <Container className={className} width={width}>
-      {src && (imgLoad === undefined || loading) && (
-        <ContainerLoading
-          className={"container-loading"}
-          sizeLoading={sizeLoading}
-          colorLoading={colorLoading}
-        >
-          <Icon className="icon" pulse icon={iconLoading} />
-        </ContainerLoading>
-      )}
-
-      {(!src || (imgLoad === false && !loading)) && componentDefault}
-
-      <ContainerLink
-        className="container-img"
-        show={imgLoad === true && !loading}
-        href={src}
-      >
-        <img
-          className="img"
-          src={src}
-          onLoad={(event) => {
-            setImgLoad(true);
-          }}
-          onError={(event) => {
-            setImgLoad(false);
-          }}
-        />
-      </ContainerLink>
-    </Container>
-  );
-};

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

@@ -1,30 +0,0 @@
-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;
-`;
-
-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 ContainerLink = styled.a`
-  display: ${({ show }) => (show ? "grid" : "none")};
-  width: 100%;
-  cursor: pointer;
-
-  img {
-    width: 100%;
-    object-fit: contain;
-  }
-`;

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

@@ -1,52 +0,0 @@
-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

@@ -1,191 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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");
-  },
-};