contentoh-components-library 21.3.5 → 21.3.7

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,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)