contentoh-components-library 21.2.102 → 21.2.104

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

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

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

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

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

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

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

@@ -1,332 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import {
-  ClickAwayListener,
-  Fade,
-  Grow,
-  Popper,
-  Tooltip as TooltipMUI,
-  Zoom,
-} from "@mui/material";
-import { Container, ContainerSelect } from "./styles";
-import React from "react";
-import { ButtonV2 } from "../../atoms/ButtonV2";
-import {
-  faCaretDown as IconDownArrow,
-  faSearch as IconSearch,
-} from "@fortawesome/free-solid-svg-icons";
-import { isArrayEmpty, isStringEmpty } from "../../../global-files/utils";
-import { SelectItemV2 } from "../../atoms/SelectItemV2";
-import { InputText } from "../../atoms/InputText";
-
-export const SelectV2 = (props) => {
-  const {
-    items /* [
-			{
-				label: string,
-				value: string | number,
-				selected: (boolean) true -> item seleccionado al inicio
-			} , 
-			...
-		] */,
-    triggerType, // (string) "hover" | "click"
-    selectButton /* {
-			className: string,
-			type:	(string) tipos validos de ButtonV2,
-			transparent: boolean,
-			disabled: boolean,
-			label: string ,
-			size: number ,
-		} */,
-    defaultItem /* {
-      label: string,
-      itemType: (string) "checkbox" | "marginCheckbox" | "labelOnly"
-      showLabelInSelect: boolean, cuando esta seleccionado ver label en el btnSelect??
-    } */,
-    inputSearch /* {
-      className: string,
-      defaultText: string ,
-    } */,
-    maxWidthSelect, // string
-    maxWidthDropdown, // string
-    maxHeightDropdown, // string
-    maxWidthItems, // string
-    alignmentItemsOverflow, // (string) "columns" | "rows" -> por default "rows"
-    typeSelectItems, // (string) "checkbox" | "marginCheckbox" | "labelOnly"
-    multiple, // (boolean) se permite multiple seleccion??
-    borderType, // (string) "rectangle" | "oval" -> por default oval
-    classNameSelect, // (string) clase del container select
-    classNameDropdown, // (string) clase del contenedor tooltip
-    positionDropdown, // (string) posicion del contenedor tooltip (values en object positions)
-    onChange, // (selectedItems: []) = {}  array con los values de los items seleccionados
-  } = 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 [selectedItems, setSelectedItems] = useState(); // { .. }
-  const [customItems, setCustomItems] = useState([]);
-  const [showDropdown, setShowDropdown] = useState(false);
-  const [labelSelect, setLabelSelect] = useState("Sin titulo");
-  const [textInputSearch, setTextInputSearch] = useState("");
-
-  const refInputTextSearch = useRef();
-
-  // cada que cambie la lista de items
-  useEffect(() => {
-    if (isArrayEmpty(items)) {
-      setSelectedItems({});
-      return;
-    }
-    // items iniciales seleccionados
-    let initialSelectedItems = {};
-    items.forEach((item) => {
-      if (item.selected) {
-        if (multiple) initialSelectedItems[item.value] = item.value;
-        else initialSelectedItems = { [item.value]: item.value };
-      }
-    });
-    setSelectedItems(initialSelectedItems);
-  }, [items]);
-
-  // cada que cambien los items seleccionados
-  useEffect(() => {
-    if (!selectedItems) return;
-    renderItems();
-    renderLabelSelect();
-    onChange && onChange(Object.values(selectedItems));
-  }, [selectedItems]);
-
-  // evento click de cada item de la lista
-  const onClickItem = (isSelected, value) => {
-    let selectedItemsCopy = { ...selectedItems };
-    if (isSelected) {
-      multiple
-        ? (selectedItemsCopy[value] = value)
-        : (selectedItemsCopy = { [value]: value });
-    } else delete selectedItemsCopy[value];
-    setSelectedItems(selectedItemsCopy);
-  };
-
-  const onClickSearch = () => {
-    setTextInputSearch(textInputSearch.trim());
-    refInputTextSearch?.current && refInputTextSearch.current.blur();
-    renderItems(textInputSearch.trim());
-  };
-
-  const renderLabelSelect = () => {
-    if (!selectedItems) return;
-    const selectedItemsCopy = Object.values(selectedItems);
-    if (selectedItemsCopy.length > 1) {
-      setLabelSelect("Personalizado");
-    } else if (selectedItemsCopy.length === 1) {
-      let labelItem = undefined;
-      for (const item of items) {
-        if (item.value == selectedItemsCopy[0]) {
-          labelItem = item.label;
-          break;
-        }
-      }
-      !isStringEmpty(labelItem)
-        ? setLabelSelect(labelItem)
-        : setLabelSelect("Sin titulo");
-    } else {
-      if (
-        !isStringEmpty(defaultItem?.label) &&
-        defaultItem?.showLabelInSelect
-      ) {
-        setLabelSelect(defaultItem.label);
-      } else if (!isStringEmpty(selectButton?.label)) {
-        setLabelSelect(selectButton.label);
-      } else {
-        setLabelSelect("Sin titulo");
-      }
-    }
-  };
-
-  const renderItems = (textSearch = "") => {
-    if (isArrayEmpty(items)) setCustomItems([]);
-    setCustomItems(
-      items.map((item, index) => {
-        if (
-          !isStringEmpty(textSearch) &&
-          !item.label
-            .trim()
-            .toLowerCase()
-            .includes(textSearch.trim().toLowerCase())
-        ) {
-          return null;
-        }
-        return (
-          <SelectItemV2
-            key={classNameSelect + "_item" + index}
-            label={item.label}
-            value={item.value}
-            checkbox={
-              typeSelectItems === "checkbox"
-                ? true
-                : typeSelectItems === "marginCheckbox"
-                ? false
-                : undefined
-            }
-            selected={selectedItems && selectedItems[item.value] ? true : false}
-            onClick={onClickItem}
-          />
-        );
-      })
-    );
-  };
-
-  return (
-    <ClickAwayListener
-      onClickAway={(event) => {
-        if (triggerType !== "hover") setShowDropdown(false);
-      }}
-    >
-      <Container
-        className={!isStringEmpty(classNameSelect) ? classNameSelect : ""}
-        borderType={borderType}
-        maxWidthSelect={maxWidthSelect}
-        maxWidthDropdown={maxWidthDropdown}
-        maxHeightDropdown={maxHeightDropdown}
-        alignmentItemsOverflow={alignmentItemsOverflow}
-        maxWidthItems={maxWidthItems}
-      >
-        <TooltipMUI
-          {...props}
-          placement={positions[positionDropdown] ?? positions.bottomCenter}
-          open={triggerType !== "hover" ? showDropdown : undefined}
-          arrow={false}
-          componentsProps={{
-            tooltip: {
-              className:
-                "dropdownSelect" +
-                (isStringEmpty(classNameDropdown)
-                  ? ""
-                  : " " + classNameDropdown),
-            },
-            popper: { disablePortal: true },
-            transition: { timeout: 300 },
-          }}
-          TransitionComponent={Fade}
-          enterDelay={100}
-          followCursor={false}
-          disableFocusListener
-          disableTouchListener
-          disableHoverListener={triggerType !== "hover"}
-          title={
-            <>
-              {/* input search */}
-              {inputSearch && (
-                <div
-                  className={
-                    "container-inputSearch" +
-                    (!isStringEmpty(inputSearch?.className)
-                      ? " " + inputSearch.className
-                      : "")
-                  }
-                >
-                  <ButtonV2
-                    className="buttonSearch"
-                    type={"gray"}
-                    transparent
-                    size={14}
-                    icon={IconSearch}
-                    onClick={(event) => {
-                      if (
-                        isStringEmpty(textInputSearch) &&
-                        refInputTextSearch?.current
-                      ) {
-                        setTextInputSearch("");
-                        refInputTextSearch.current.focus();
-                      } else {
-                        onClickSearch();
-                      }
-                    }}
-                  />
-
-                  <InputText
-                    className="inputSearch"
-                    type="black"
-                    transparent
-                    size={12}
-                    placeHolder={
-                      isStringEmpty(inputSearch?.defaultText)
-                        ? "Texto a buscar"
-                        : inputSearch.defaultText
-                    }
-                    text={textInputSearch}
-                    onChangeText={(newValue) => setTextInputSearch(newValue)}
-                    onEnter={(event) => onClickSearch()}
-                    refInputText={refInputTextSearch}
-                  />
-                </div>
-              )}
-
-              {/* item por default */}
-              {defaultItem && (
-                <SelectItemV2
-                  label={defaultItem.label}
-                  value={null}
-                  checkbox={
-                    defaultItem.itemType === "checkbox"
-                      ? true
-                      : defaultItem.itemType === "marginCheckbox"
-                      ? false
-                      : undefined
-                  }
-                  selected={
-                    selectedItems && Object.keys(selectedItems).length
-                      ? false
-                      : true
-                  }
-                  onClick={(isSelected, value) => {
-                    selectedItems &&
-                      Object.keys(selectedItems).length &&
-                      setSelectedItems({});
-                  }}
-                />
-              )}
-
-              {/* lista de items */}
-              <div className="container-items">{customItems}</div>
-            </>
-          }
-        >
-          <ContainerSelect className={"container-buttonSelect"}>
-            <ButtonV2
-              className={
-                "buttonSelect" +
-                (!isStringEmpty(selectButton?.className)
-                  ? " " + selectButton.className
-                  : "")
-              }
-              disabled={selectButton?.disabled}
-              type={selectButton?.type}
-              transparent={selectButton?.transparent}
-              label={labelSelect}
-              size={selectButton?.size}
-              icon={IconDownArrow}
-              iconPosition="end"
-              onClick={(event) => {
-                if (triggerType !== "hover") setShowDropdown((prev) => !prev);
-              }}
-            />
-          </ContainerSelect>
-        </TooltipMUI>
-      </Container>
-    </ClickAwayListener>
-  );
-};