contentoh-components-library 21.2.101 → 21.2.102

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

@@ -0,0 +1,142 @@
+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
+				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}
+            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);
+              }, 275);
+            }}
+          />
+        );
+      });
+    }
+    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);
+          }
+        }}
+        onClick={(event) => {
+          if (triggerType !== "hover") {
+            setShowDropdown(!showDropdown);
+          }
+        }}
+      >
+        <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">{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

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

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

@@ -0,0 +1,62 @@
+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,
+  } = 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={"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;
+`;

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

@@ -0,0 +1,114 @@
+import { SelectV2 } from "./index";
+
+export default {
+  title: "Components/molecules/SelectV2",
+  component: SelectV2,
+  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" },
+    },
+    typeSelectItems: {
+      options: [undefined, "checkbox", "marginCheckbox", "labelOnly"],
+      control: { type: "select" },
+    },
+    borderType: {
+      options: [undefined, "rectangle", "oval"],
+      control: { type: "select" },
+    },
+    alignmentItemsOverflow: {
+      options: [undefined, "columns", "rows"],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <SelectV2 {...args} />;
+
+export const SelectV2Test = Template.bind({});
+SelectV2Test.args = {
+  items: [
+    {
+      label: "Palomitas de maiz",
+      value: 1,
+      selected: false,
+    },
+    {
+      label: "Sabritas",
+      value: 2,
+      selected: true,
+    },
+    {
+      label: "sabritas Doritos",
+      value: 3,
+      selected: false,
+    },
+    {
+      label:
+        "Este es un texto muy largo que deberia llegar al limite establecido para el width",
+      value: 4,
+      selected: true,
+    },
+    {
+      label: "galletas",
+      value: 5,
+      selected: false,
+    },
+    {
+      label: "jugo de uva",
+      value: 6,
+      selected: false,
+    },
+  ],
+  triggerType: "hover",
+  selectButton: {
+    className: "btnSelectPrueba",
+    type: "whiteS3",
+    transparent: undefined,
+    disabled: false,
+    label: "select de prueba",
+    size: 12,
+    borderType: "oval",
+  },
+  defaultItem: {
+    label: "Ningun filtro",
+    itemType: undefined,
+    showLabelInSelect: true,
+  },
+  inputSearch: {
+    className: "inputBusqueda",
+    defaultText: "hola",
+  },
+  typeSelectItems: undefined,
+  borderType: undefined,
+  maxWidthSelect: "150px",
+  maxWidthDropdown: "300px",
+  maxHeightDropdown: "300px",
+  maxWidthItems: "100px",
+  alignmentItemsOverflow: undefined,
+  multiple: true,
+  classNameSelect: "selectPrueba",
+  classNameDropdown: "dropdownSelectPrueba",
+  positionDropdown: undefined,
+  onChange: (selectedItems) => {
+    console.log("selectedItems:", selectedItems);
+  },
+};