contentoh-components-library 21.2.101 → 21.2.102

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

@@ -0,0 +1,45 @@
+import { useEffect, useRef, useState } from "react";
+import { Checkbox } from "@mui/material";
+import { Container } from "./styles";
+import React from "react";
+import { isStringEmpty } from "../../../global-files/utils";
+
+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 (
+    <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>
+  );
+};

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

@@ -0,0 +1,55 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+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;
+    }
+  }
+`;

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,111 @@
+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);
+            //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/Dropdown/Dropdown.stories.js

@@ -0,0 +1,101 @@
+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,
+      onClick: (event) => {
+        console.log("Palomitaz de maiz");
+      },
+    },
+    {
+      label: "Sabritas",
+      //icon: Icon2,
+      onClick: (event) => {
+        console.log("Sabritas");
+      },
+    },
+    {
+      label: "sabritas Doritos",
+      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"}
+    />
+  ),
+};