contentoh-components-library 21.2.98 → 21.2.100

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

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

@@ -1,45 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { Checkbox } from "@mui/material";
-import { Container } from "./styles";
-import React from "react";
-import { isStringEmpty } from "../../../global-files/utils";
-
-export const SelectItemV2 = (props) => {
-  const {
-    id,
-    keyId,
-    className, // (string) clase del container
-    label, // (string) texto visible del item
-    value, // valor del item
-    checkbox /* (boolean)
-			true -> item con checkbox 
-			false -> item sin checkbox pero respeta el espacio del checkbox
-			undefined -> item sin checkbox
-		*/,
-    selected, // (boolean) item seleccionado??
-    onClick, // (isSelected , value) => {}
-  } = props;
-
-  return (
-    <Container
-      className={
-        "selectItemV2" +
-        (isStringEmpty(className) ? "" : " " + className) +
-        (!checkbox && selected ? " selectedItem" : "")
-      }
-      id={id}
-      key={keyId}
-      checkbox={checkbox}
-      onClick={(event) => onClick && onClick(!selected, value)}
-    >
-      {checkbox !== undefined && (
-        <Checkbox
-          className={"checkbox" + (checkbox ? "" : " hidden")}
-          checked={selected}
-        />
-      )}
-
-      <label className="label">{label}</label>
-    </Container>
-  );
-};

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

@@ -1,55 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  width: fit-content;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  gap: 11px;
-  justify-content: flex-start;
-  align-items: center;
-  cursor: pointer;
-  padding: 8px;
-  transition: background 0.25s;
-  //border: 1px solid lightgray;
-
-  &:hover {
-    background-color: #f0f0f0;
-  }
-
-  .checkbox {
-    padding: 3px;
-
-    &.hidden {
-      visibility: hidden;
-    }
-
-    &.Mui-checked {
-      color: #808080;
-    }
-
-    .MuiSvgIcon-root {
-      font-size: 16px;
-    }
-  }
-
-  .label {
-    cursor: inherit;
-    font-family: ${FontFamily.RobotoRegular}, sans-serif;
-    font-size: 12px;
-    text-align: left;
-    color: #262626;
-    line-height: 1.25;
-    padding: ${({ checkbox }) => (checkbox === undefined ? "3" : "0")}px;
-  }
-
-  // para item sin checkbox seleccionado
-  &.selectedItem {
-    background-color: #8e8e8e;
-    .label {
-      font-family: ${FontFamily.RobotoMedium}, sans-serif;
-      color: white;
-    }
-  }
-`;

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

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

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

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

@@ -1,42 +0,0 @@
-import { FontFamily } from "../../../global-files/variables";
-import styled from "styled-components";
-
-export const Container = styled.div`
-  width: fit-content;
-  //margin: 100px 0px 0px 100px;	modo dev
-  //border: 1px solid red;	modo dev
-
-  + .MuiTooltip-popper {
-    background-color: transparent;
-
-    .MuiTooltip-tooltip {
-      --background: white;
-      box-shadow: 0px 0px 10px 1px gray;
-      background-color: var(--background);
-      padding: 10px;
-      border-radius: 7px;
-      max-width: 60vw;
-      font-family: ${FontFamily.RobotoMedium}, sans-serif;
-      font-size: 12px;
-      text-align: left;
-      color: #262626;
-
-      .MuiTooltip-arrow {
-        color: var(--background);
-      }
-    }
-
-    &[data-popper-placement*="bottom"] .MuiTooltip-tooltip {
-      margin-top: 10px;
-    }
-    &[data-popper-placement*="top"] .MuiTooltip-tooltip {
-      margin-bottom: 10px;
-    }
-    &[data-popper-placement*="left"] .MuiTooltip-tooltip {
-      margin-right: 10px;
-    }
-    &[data-popper-placement*="right"] .MuiTooltip-tooltip {
-      margin-left: 10px;
-    }
-  }
-`;

package/src/components/molecules/ButtonDownloadFile/DownloadFile.stories.js

@@ -1,54 +0,0 @@
-import { ButtonDownloadFile } from "./index";
-export default {
-  title: "Components/molecules/ButtonDownloadFile",
-  component: ButtonDownloadFile,
-  argTypes: {
-    type: {
-      options: [
-        undefined,
-        "white",
-        "whiteS2",
-        "pink",
-        "gray",
-        "purple",
-        "black",
-      ],
-      control: { type: "select" },
-    },
-    borderType: {
-      options: [undefined, "rectangle", "circle"],
-      control: { type: "select" },
-    },
-  },
-};
-
-const Template = (args) => <ButtonDownloadFile {...args} />;
-
-export const DownloadFileOk = Template.bind({});
-DownloadFileOk.args = {
-  type: undefined,
-  transparent: false,
-  borderType: undefined,
-  size: "70",
-  onDownload: (error) => {
-    error &&
-      alert("mensaje: " + error.message + "\nDetalles: " + error.details);
-  },
-  url: `https://content-management-images.s3.amazonaws.com/84300/1/chat/acuse RFC-8b2eb177-5bfc-4266-9b26-4e7297880594-9e2e5853-4697-442a-8ff7-3b7a1ede0856.pdf`,
-};
-
-export const DownloadFileError = Template.bind({});
-DownloadFileError.args = {
-  id: "",
-  key: "",
-  color: undefined,
-  background: undefined,
-  borderType: "circle",
-  size: "70",
-  width: "100px",
-  onDownload: (error) => {
-    error &&
-      alert("mensaje: " + error.message + "\nDetalles: " + error.details);
-  },
-  url: `https://content-management-images.s3.amazonaws.com/84300/1/chat/noExiste.pdf`,
-};

package/src/components/molecules/ButtonDownloadFile/index.js

@@ -1,111 +0,0 @@
-import { Container } from "./styles";
-import { faArrowDown as IconDownload } from "@fortawesome/free-solid-svg-icons";
-import { useState } from "react";
-import { ButtonV2 } from "../../atoms/ButtonV2";
-import { IconFile } from "../../atoms/IconFile";
-import axios from "axios";
-import { getFileExtension } from "../../../global-files/utils";
-
-export const ButtonDownloadFile = (props) => {
-  const {
-    id,
-    key,
-    className,
-    type, // white | pink | gray | purple (white -> predeterminado)
-    transparent, // boolean
-    size, // number ... default (13)
-    borderType, // rectangle || circle || (cualquier otro valor -> no borde)
-    url, // src del file
-    onDownload, // ( {message , details} ) => {}
-  } = props;
-  const [showDownload, setShowDownload] = useState(false);
-  const [loading, setLoading] = useState(false);
-
-  const getSrc = () => {
-    const temp = url.split("/");
-    return temp[temp.length - 1];
-  };
-
-  const getFile = async () => {
-    try {
-      setLoading(true);
-      const responseFile = await axios({
-        url: url,
-        method: "GET",
-        responseType: "blob",
-      });
-      if (responseFile.status != 200) {
-        setLoading(false);
-        onDownload &&
-          onDownload({
-            message: "No se pudo descargar el archivo",
-            details: responseFile.statusText,
-          });
-        return;
-      }
-      const newUrl = window.URL.createObjectURL(new Blob([responseFile.data]));
-      const link = document.createElement("a");
-      link.href = newUrl;
-      link.setAttribute("download", getSrc());
-      link.style.display = "none";
-      document.body.appendChild(link);
-      setLoading(false);
-      link.click();
-      document.body.removeChild(link);
-    } catch (err) {
-      setLoading(false);
-      onDownload &&
-        onDownload({
-          message: "No se pudo descargar el archivo",
-          details: err.message,
-        });
-    }
-  };
-
-  return (
-    <>
-      <Container
-        id={id}
-        key={key}
-        className={className}
-        borderType={borderType}
-        onMouseEnter={(event) => {
-          if (!showDownload) {
-            setShowDownload(true);
-            //console.log("showDownload");
-          }
-        }}
-        onMouseLeave={(event) => {
-          if (!loading) {
-            setShowDownload(false);
-            //console.log("showIconFile");
-          }
-        }}
-      >
-        {showDownload ? (
-          <ButtonV2
-            className={"buttonDownload"}
-            type={type}
-            transparent={transparent}
-            size={size}
-            borderType={borderType}
-            icon={IconDownload}
-            isLoading={loading}
-            onClick={async (event) => {
-              getFile();
-            }}
-          />
-        ) : (
-          <IconFile
-            className="iconFile"
-            type={type}
-            transparent={transparent}
-            size={size}
-            borderType={borderType}
-            ext={getFileExtension(getSrc())}
-          />
-        )}
-      </Container>
-    </>
-  );
-};

package/src/components/molecules/ButtonDownloadFile/styles.js

@@ -1,66 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  width: fit-content;
-  height: fit-content;
-  min-width: min-content;
-  min-height: min-content;
-  overflow: hidden;
-  display: grid;
-  place-items: center;
-  border-radius: ${({ borderType }) => {
-    return borderType?.toLowerCase() === "rectangle"
-      ? "10%"
-      : borderType?.toLowerCase() === "circle"
-      ? "50%"
-      : "none";
-  }};
-
-  .buttonDownload {
-    width: 100%;
-    height: 100%;
-    .button {
-      // tipos de botones fill
-      &.fill {
-        &.white:hover {
-          background-color: white;
-        }
-        &.whiteS2:hover {
-          background-color: white;
-        }
-        &.pink:hover {
-          background-color: #e33aa9;
-        }
-        &.gray:hover {
-          background-color: #e8e5e5;
-        }
-        &.purple:hover {
-          background-color: #f7f7fc;
-        }
-      }
-
-      // tipos de botones transparent
-      &.transparent {
-        &.white:hover {
-          color: white;
-        }
-        &.pink:hover {
-          color: #e33aa9;
-        }
-        &.gray:hover {
-          .icon,
-          .iconLoading {
-            color: #7b7979;
-          }
-        }
-        &.purple:hover {
-          color: #8a6caa;
-        }
-        &.black:hover {
-          color: #262626;
-        }
-      }
-    }
-  }
-`;

package/src/components/molecules/ImageTooltip/ImageTooltip.stories.js

@@ -1,46 +0,0 @@
-import { ImageTooltip } from "./index";
-
-export default {
-  title: "Components/molecules/ImageTooltip",
-  component: ImageTooltip,
-  argTypes: {},
-};
-
-const Template = (args) => <ImageTooltip {...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 ImageTooltipTest = Template.bind({});
-ImageTooltipTest.args = {
-  width: "200px",
-  sizeLoading: "50",
-  colorLoading: "#bbbbbb",
-  src: "bn",
-  componentDefault: <label> test error </label>,
-  componentTooltip: <label> mensaje del tooltip test </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 ImageTooltipOK = Template.bind({});
-ImageTooltipOK.args = {
-  width: "250px",
-  sizeLoading: "40",
-  src: srcOK,
-  componentDefault: <label> img no cargada </label>,
-  componentTooltip: <label> mensaje del tooltip OK </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 ImageTooltipERROR = Template.bind({});
-ImageTooltipERROR.args = {
-  width: "300px",
-  sizeLoading: "60",
-  src: srcERROR,
-  componentDefault: <label> ERROR al cargar </label>,
-  componentTooltip: <label> mensaje del tooltip ERROR </label>,
-};