contentoh-components-library 21.3.19 → 21.3.20

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/Dropdown/Dropdown.stories.js

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

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

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

@@ -1,9 +1,15 @@
 import { Container } from "./styles";
 import { ScreenHeader } from "../../atoms/ScreenHeader/index";
 import { Button } from "../../atoms/GeneralButton/index";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
+import { Chat } from "../../organisms/Chat";
 
-export const HeaderTop = ({ setHeaderTop }) => {
+export const HeaderTop = ({
+  setHeaderTop,
+  withChat,
+  productSelected,
+  token,
+}) => {
   const headerTop = useRef();
 
   useEffect(() => {
@@ -13,12 +19,27 @@ 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">
+        {withChat && (
+          <Chat
+            chatType="merchant_product"
+            chatContainerType="popUp"
+            chatData={{
+              userToken: token,
+              id: productSelected.id_article,
+              version: productSelected.version,
+            }}
+            size={18}
+          />
+        )}
+
+        <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,68 @@
+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

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

@@ -0,0 +1,18 @@
+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;
+`;