contentoh-components-library 21.3.17 → 21.3.19

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

@@ -1,61 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { Checkbox } from "@mui/material";
-import { Container, ContainerButton } from "./styles";
-import React from "react";
-import { isStringEmpty } from "../../../global-files/utils";
-import { faCheck as IconOK } from "@fortawesome/free-solid-svg-icons";
-
-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 checkbox ? (
-    <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>
-  ) : (
-    <ContainerButton
-      className={
-        "selectItemV2" +
-        (isStringEmpty(className) ? "" : " " + className) +
-        (selected ? " selectedItem" : "")
-      }
-      checkbox={checkbox === false}
-      type={"whiteS3"}
-      label={label}
-      icon={checkbox === false || selected ? IconOK : undefined}
-      onClick={(event) => {
-        onClick && onClick(!selected, value);
-      }}
-    />
-  );
-};

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

@@ -1,90 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-import { ButtonV2 } from "../ButtonV2";
-
-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;
-    }
-  }
-`;
-
-export const ContainerButton = styled(ButtonV2)`
-  width: fit-content;
-  border: none;
-  border-radius: 0px;
-
-  .button {
-    font-family: ${FontFamily.RobotoRegular}, sans-serif;
-    font-size: 12px;
-    text-align: left;
-    line-height: 1.25;
-    padding: ${({ checkbox }) => (checkbox ? "8px" : "11px 8px")};
-    gap: 11px;
-    border: none;
-    letter-spacing: 0px;
-    .icon {
-      padding: 3px;
-      color: #808080 !important;
-      font-size: 16px;
-      visibility: hidden;
-    }
-  }
-
-  // para item sin checkbox seleccionado
-  &.selectedItem {
-    .button {
-      font-family: ${FontFamily.RobotoMedium}, sans-serif;
-      padding: 8px;
-      .icon {
-        visibility: visible;
-      }
-    }
-  }
-`;

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