contentoh-components-library 21.3.12 → 21.3.13

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

@@ -1,109 +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);
-          }
-        }}
-        onMouseLeave={(event) => {
-          if (!loading) {
-            setShowDownload(false);
-          }
-        }}
-      >
-        {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/Dropdown/Dropdown.stories.js

@@ -1,103 +0,0 @@
-import { ButtonV2 } from "../../atoms/ButtonV2";
-import { Dropdown } from "./index";
-import {
-  faHeart as Icon1,
-  faHouse as Icon2,
-  faUser as Icon3,
-} from "@fortawesome/free-solid-svg-icons";
-
-export default {
-  title: "Components/molecules/Dropdown",
-  component: Dropdown,
-  argTypes: {
-    positionDropdown: {
-      options: [
-        undefined,
-        "topStart",
-        "topEnd",
-        "topCenter",
-        "rightStart",
-        "rightEnd",
-        "rightCenter",
-        "bottomStart",
-        "bottomEnd",
-        "bottomCenter",
-        "leftStart",
-        "leftEnd",
-        "leftCenter",
-      ],
-      control: { type: "select" },
-    },
-    triggerType: {
-      options: [undefined, "hover", "click"],
-      control: { type: "select" },
-    },
-  },
-};
-
-const Template = (args) => <Dropdown {...args} />;
-
-export const DropdownTest = Template.bind({});
-DropdownTest.args = {
-  items: [
-    {
-      label: "Palomitas de maiz",
-      //icon: Icon1,
-      disabled: true,
-      onClick: (event) => {
-        console.log("Palomitaz de maiz");
-      },
-    },
-    {
-      label: "Sabritas",
-      //icon: Icon2,
-      onClick: (event) => {
-        console.log("Sabritas");
-      },
-    },
-    {
-      label: "sabritas Doritos",
-      isLoading: true,
-      onClick: (event) => {
-        console.log("Sabritas Doritos");
-      },
-    },
-    {
-      label:
-        "Este es un texto muy largo que deberia llegar al limite establecido para el width",
-      //icon: Icon2,
-      onClick: (event) => {
-        console.log("texto largo de prueba");
-      },
-    },
-    {
-      label: "galletas",
-      icon: undefined,
-      onClick: (event) => {
-        console.log("galletas");
-      },
-    },
-    {
-      label: "jugo de uva",
-      //icon: Icon3,
-      onClick: (event) => {
-        console.log("jugo de uva");
-      },
-    },
-  ],
-  triggerType: "click",
-  maxWidthDropdown: "200px",
-  maxHeightDropdown: "200px",
-  className: "dropdownPrueba",
-  classNameDropdown: "dropdownMenuPrueba",
-  positionDropdown: undefined,
-  children: (
-    <ButtonV2
-      className="buttonTrigger"
-      type={"white"}
-      size={14}
-      borderType={"oval"}
-      label={"boton trigger"}
-    />
-  ),
-};

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

@@ -1,150 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import {
-  ClickAwayListener,
-  Fade,
-  Grow,
-  Popper,
-  Tooltip as TooltipMUI,
-  Zoom,
-} from "@mui/material";
-import { Container } from "./styles";
-import React from "react";
-import { ButtonV2 } from "../../atoms/ButtonV2";
-import { faCircle as IconDefault } from "@fortawesome/free-solid-svg-icons";
-import { isArrayEmpty, isStringEmpty } from "../../../global-files/utils";
-
-/* Este es un menu de opciones tipo select donde cada item
-es un boton con su propio onClick */
-export const Dropdown = (props) => {
-  const {
-    items /* [
-			{
-				label: string
-				icon: FontAwesomeIcon
-        disabled: boolean
-        isLoading: boolean
-				onClick: (event) => {}
-			} , 
-			...
-		] */,
-    triggerType, // (string) "hover" | "click"
-    children, // componente hijo activador del dropdown
-    maxWidthDropdown, // string
-    maxHeightDropdown, // string
-    className, // (string) clase del container select
-    classNameDropdown, // (string) clase del contenedor tooltip
-    positionDropdown, // (string) posicion del contenedor tooltip (values en object positions)
-  } = 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",
-  };
-  const [showDropdown, setShowDropdown] = useState(false);
-
-  const renderItems = () => {
-    const customItems = [];
-    if (!isArrayEmpty(items)) {
-      const useIconDefault = items.some((item) => {
-        return item.icon ? true : false;
-      });
-      items.forEach((item, index) => {
-        customItems.push(
-          <ButtonV2
-            key={"item-" + index}
-            className={
-              "dropdownItem" +
-              (useIconDefault ? (item.icon ? "" : " iconDefault") : "")
-            }
-            type={"whiteS3"}
-            borderType={undefined}
-            size={12}
-            disabled={item.disabled}
-            isLoading={item.isLoading}
-            label={isStringEmpty(item.label) ? undefined : item.label}
-            icon={useIconDefault ? item.icon ?? IconDefault : undefined}
-            onClick={(event) => {
-              event.stopPropagation();
-              setTimeout(() => {
-                setShowDropdown(false);
-                item.onClick && item.onClick(event);
-              }, 200);
-            }}
-          />
-        );
-      });
-    }
-    return customItems;
-  };
-
-  return (
-    <ClickAwayListener
-      onClickAway={(event) => {
-        if (triggerType !== "hover") setShowDropdown(false);
-      }}
-    >
-      <Container
-        className={!isStringEmpty(className) ? className : ""}
-        maxWidthDropdown={maxWidthDropdown}
-        maxHeightDropdown={maxHeightDropdown}
-        onMouseEnter={(event) => {
-          if (triggerType === "hover") {
-            setShowDropdown(true);
-          }
-        }}
-        onMouseLeave={(event) => {
-          if (triggerType === "hover") {
-            setShowDropdown(false);
-          }
-        }}
-      >
-        <TooltipMUI
-          placement={positions[positionDropdown] ?? positions.bottomStart}
-          open={showDropdown}
-          arrow={false}
-          componentsProps={{
-            tooltip: {
-              className:
-                "dropdownMenu" +
-                (isStringEmpty(classNameDropdown)
-                  ? ""
-                  : " " + classNameDropdown),
-            },
-            popper: { disablePortal: true },
-            transition: { timeout: 300 },
-          }}
-          TransitionComponent={Fade}
-          enterDelay={100}
-          followCursor={false}
-          disableFocusListener
-          disableTouchListener
-          disableHoverListener
-          title={<>{renderItems()}</>}
-        >
-          <div
-            className="containerIntern"
-            onClick={(event) => {
-              if (triggerType !== "hover") {
-                setShowDropdown(!showDropdown);
-              }
-            }}
-          >
-            {children}
-          </div>
-        </TooltipMUI>
-      </Container>
-    </ClickAwayListener>
-  );
-};

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

@@ -1,75 +0,0 @@
-import { FontFamily } from "../../../global-files/variables";
-import styled from "styled-components";
-
-export const Container = styled.div`
-  width: fit-content;
-
-  .containerIntern {
-    width: inherit;
-    border: inherit;
-    border-radius: inherit;
-
-    > * {
-      width: inherit;
-      border: inherit;
-      border-radius: inherit;
-    }
-  }
-
-  > .MuiTooltip-popper {
-    background-color: transparent;
-
-    .dropdownMenu {
-      --background: white;
-      box-shadow: 0px 0px 10px 1px gray;
-      background-color: var(--background);
-      padding: 0px 0px;
-      border-radius: 7px;
-      display: flex;
-      flex-direction: column;
-      gap: 0px;
-      overflow: auto;
-      max-width: ${({ maxWidthDropdown }) =>
-        maxWidthDropdown ? maxWidthDropdown : "400px"};
-      max-height: ${({ maxHeightDropdown }) =>
-        maxHeightDropdown ? maxHeightDropdown : "80vh"};
-
-      .dropdownItem {
-        width: 100%;
-        border-radius: 0px;
-        border: none;
-
-        .button {
-          justify-content: flex-start;
-          border: inherit;
-          text-align: left;
-          font-family: ${FontFamily.RobotoRegular};
-          padding: 10px;
-          gap: 11px;
-
-          .icon {
-            font-size: calc(var(--size) + 1px);
-            opacity: 0.75;
-          }
-        }
-
-        &.iconDefault .button .icon {
-          opacity: 0;
-        }
-      }
-    }
-
-    &[data-popper-placement*="bottom"] .dropdownMenu {
-      margin-top: 10px;
-    }
-    &[data-popper-placement*="top"] .dropdownMenu {
-      margin-bottom: 10px;
-    }
-    &[data-popper-placement*="left"] .dropdownMenu {
-      margin-right: 10px;
-    }
-    &[data-popper-placement*="right"] .dropdownMenu {
-      margin-left: 10px;
-    }
-  }
-`;

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

@@ -1,68 +0,0 @@
-import { ImageTooltip } from "./index";
-
-export default {
-  title: "Components/molecules/ImageTooltip",
-  component: ImageTooltip,
-  argTypes: {
-    position: {
-      options: [
-        undefined,
-        "topStart",
-        "topEnd",
-        "topCenter",
-        "rightStart",
-        "rightEnd",
-        "rightCenter",
-        "bottomStart",
-        "bottomEnd",
-        "bottomCenter",
-        "leftStart",
-        "leftEnd",
-        "leftCenter",
-      ],
-      control: { type: "select" },
-    },
-  },
-};
-
-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>,
-  position: 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 ImageTooltipOK = Template.bind({});
-ImageTooltipOK.args = {
-  width: "250px",
-  sizeLoading: "40",
-  src: srcOK,
-  componentDefault: <label> img no cargada </label>,
-  componentTooltip: <label> mensaje del tooltip OK </label>,
-  position: 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 ImageTooltipERROR = Template.bind({});
-ImageTooltipERROR.args = {
-  width: "300px",
-  sizeLoading: "60",
-  src: srcERROR,
-  componentDefault: <label> ERROR al cargar </label>,
-  componentTooltip: <label> mensaje del tooltip ERROR </label>,
-  position: undefined,
-};

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

@@ -1,63 +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";
-import { Tooltip } from "../../atoms/Tooltip";
-
-export const ImageTooltip = (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
-    classNameTooltip,
-    componentTooltip,
-    position, // (string) posicion del contenedor tooltip (values en object positions)
-  } = props;
-  const [imgLoad, setImgLoad] = useState();
-  const [loading, setLoading] = useState(false);
-
-  /* solo para hacer pruebas en modo dev
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-    }, 5000);
-  }, []);
-  */
-
-  return (
-    <Tooltip
-      position={position ?? "topCenter"}
-      addArrow={false}
-      transitionType={"zoom"}
-      followCursor={false}
-      className={className}
-      classNameTooltip={classNameTooltip}
-      componentTooltip={imgLoad !== undefined && !loading && componentTooltip}
-    >
-      {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}
-      />
-    </Tooltip>
-  );
-};

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

@@ -1,18 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-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;
-`;