contentoh-components-library 21.3.16 → 21.3.18

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

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

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

@@ -1,9 +1,44 @@
-import { Container } from "./styles";
+import { Container, ContainerIcon } from "./styles";
+import { Tooltip } from "../Tooltip";
 
-export const ProgressBar = ({ percent, progressBarType }) => {
+export const ProgressBar = ({ percent, progressBarType, percentRequired }) => {
   return (
-    <Container className={`status-${progressBarType}`}>
-      <p>{percent}%</p>
-    </Container>
+    <>
+      {percentRequired ? (
+        <>
+          <Tooltip
+            componentTooltip={
+              <>
+                <p>
+                  <b>Campos requeridos</b>
+                </p>
+                <p>
+                  Este nuevo icono te indicará cuando <br></br> completes todos
+                  los campos requeridos
+                </p>
+              </>
+            }
+            children={
+              <ContainerIcon
+                className="fondo"
+                percentageRequired={percentRequired}
+              >
+                <span class="hola">local_police</span>
+              </ContainerIcon>
+            }
+            classNameTooltip={"container-tooltip"}
+            position={undefined}
+            addArrow={undefined}
+            transitionType={undefined}
+            followCursor={undefined}
+          ></Tooltip>
+        </>
+      ) : (
+        ""
+      )}
+      <Container className={`status-${progressBarType}`}>
+        <p>{percent}%</p>
+      </Container>
+    </>
   );
 };

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

@@ -68,3 +68,27 @@ export const Container = styled.div`
     color: ${GlobalColors.s4};
   }
 `;
+export const ContainerIcon = styled.div`
+  cursor: pointer;
+  @font-face {
+    font-family: "Material Symbols Outlined";
+    font-style: normal;
+    font-weight: 100 700;
+    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)
+      format("woff2");
+  }
+
+  .hola {
+    font-family: "Material Symbols Outlined";
+    font-size: 30px;
+    //line-height: 1;
+    margin-top: 10px;
+  }
+  .hola {
+    font-variation-settings: "FILL"
+        ${(props) => (props.percentageRequired < 100 ? 0 : 1)},
+      "wght" 400, "GRAD" 0, "opsz" 48;
+    color: ${(props) =>
+      props.percentageRequired < 100 ? "#d4d1d7" : "#e33aa9"};
+  }
+`;

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

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

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

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

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

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

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

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

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