contentoh-components-library 21.3.17 → 21.3.19

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,178 +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);
-  };
-
-  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");
-  },
-};

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

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

@@ -1,89 +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;
-  //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

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

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

@@ -1,55 +0,0 @@
-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/SelectItemV2/SelectItemV2.stories.js

@@ -1,26 +0,0 @@
-import { SelectItemV2 } from "./index";
-
-export default {
-  title: "Components/atoms/SelectItemV2",
-  component: SelectItemV2,
-  argTypes: {
-    checkbox: {
-      options: [undefined, true, false],
-      control: { type: "select" },
-    },
-  },
-};
-
-const Template = (args) => <SelectItemV2 {...args} />;
-
-export const SelectItemV2Test = Template.bind({});
-SelectItemV2Test.args = {
-  label: "Label del item",
-  value: 1,
-  checkbox: true,
-  selected: false,
-  onClick: (isSelected, value) => {
-    console.log("isSelected:", isSelected);
-    console.log("value:", value);
-  },
-};