contentoh-components-library 21.2.83 → 21.2.85

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

@@ -0,0 +1,53 @@
+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 PropTypes from "prop-types";
+import { useState, useEffect } from "react";
+
+export default function 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/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 default function 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,113 @@
+import { Container } from "./styles";
+import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
+import { faArrowDown as IconDownload } from "@fortawesome/free-solid-svg-icons";
+import { useState } from "react";
+import PropTypes from "prop-types";
+import ButtonV2 from "../../atoms/ButtonV2";
+import IconFile from "../../atoms/IconFile";
+import axios from "axios";
+import { getFileExtension } from "../../../global-files/utils";
+
+export default function 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

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

@@ -1,4 +1,5 @@
 import { CustomSelect } from "./index";
+import iconStar from "../../../assets/images/customSelect/starIcon.svg";
 
 export default {
   title: "Components/molecules/CustomSelect",
@@ -8,20 +9,27 @@ export default {
 const Template = (args) => <CustomSelect {...args} />;
 export const CustomSelectDefault = Template.bind({});
 CustomSelectDefault.args = {
-  selectLabel: "Todos los departamentos",
+  // selectLabel: "Todos los departamentos",
   defaultOption: "Todos los departamentos",
   options: [
-      {
-      id: 1,
-      value: "Decoración",
-      subOptions: [
-        { id: 1, value: "Espejos" },
-        { id: 2, value: "Persianas" },
-  ],
+    {
+      id: 47,
+      name: "Enero 2023",
+      isSelected: true,
+    },
+    {
+      id: 49,
+      name: "Mis Favoritos",
     },
-    { id: 2, value: "Eléctrico" },
-    { id: 3, value: "Ferretería" },
-    { id: 4, value: "Herramientas" },
-    { id: 5, value: "Iluminación" },
   ],
+  onClickItem: (v, id) => {
+    if (v) {
+      console.log("Agregar a la lista", id);
+    } else {
+      console.log("Eliminar a la lista", id);
+    }
+  },
+  icon: iconStar,
+  showSearchBar: true,
+  customOptions: <p>Esto es un customOptions</p>
 };

package/src/components/molecules/CustomSelect/SelectItem.js

@@ -7,6 +7,7 @@ export const SelecItem = ({
   setParameterArray,
   activeFilters,
   setActiveFilters,
+  onClickItem,
 }) => {
   const [showSubOptions, setShowSubOptions] = useState(false);
   const [chkGlobal, setChkGlobal] = useState(false);
@@ -17,6 +18,9 @@ export const SelecItem = ({
           id={"main-item-" + option.id}
           label={option.name}
           onChange={(e) => {
+            if (onClickItem) {
+              onClickItem(e.target.checked, option.id)
+            }
             const subOptions = option.subOptions;
             const filtersCopy = { ...activeFilters };
             if (subOptions) {
@@ -77,6 +81,9 @@ export const SelecItem = ({
                   activeFilters[option.name][sub.name]
                 }
                 onChange={(e) => {
+                  if (onClickItem) {
+                    onClickItem(e.target.checked, sub.id)
+                  }
                   if (e.target.checked) {
                     setParameterArray((current) =>
                       [...current, sub.id].sort((a, b) => a - b)

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

@@ -2,6 +2,7 @@ import { Container } from "./styles";
 import { ScreenHeader } from "../../atoms/ScreenHeader/index";
 import { Button } from "../../atoms/GeneralButton/index";
 import { useEffect, useRef } from "react";
+import Chat from "../../organisms/Chat";
 
 export const HeaderTop = ({ setHeaderTop }) => {
   const headerTop = useRef();
@@ -13,12 +14,16 @@ export const HeaderTop = ({ setHeaderTop }) => {
   return (
     <Container ref={headerTop}>
       <ScreenHeader text="Edición de producto" />
-      <Button
-        buttonType="close-button"
-        onClick={() => {
-          window.location.href = `/products`;
-        }}
-      />
+      <div className="buttons-top">
+        {/* <Chat /> */}
+
+        <Button
+          buttonType="close-button"
+          onClick={() => {
+            window.location.href = `/products`;
+          }}
+        />
+      </div>
     </Container>
   );
 };

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

@@ -3,4 +3,8 @@ import styled from "styled-components";
 export const Container = styled.div`
   display: flex;
   justify-content: space-between;
+  .buttons-top {
+    display: flex;
+    align-items: center;
+  }
 `;

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

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