contentoh-components-library 21.5.1 → 21.5.3

package/src/components/organisms/ImageVisor/index.js

@@ -1,143 +0,0 @@
-import { useState, useEffect } from "react";
-import ReactImageFallback from "react-image-fallback";
-import { ImageContainer, ImageView } from "./styles.js";
-import ImageUploader from "../ImageUploader";
-import { getImageURL } from "../../../global-files/utils.js";
-import defaultProductImage from "../../../assets/images/defaultImages/defaultProductImage.png";
-import fullscreen from "../../../assets/images/Icons/fullscreen.svg";
-import close from "../../../assets/images/Icons/close.svg";
-import uploadFile from "../../../assets/images/Icons/upload-file.svg";
-import deleteForever from "../../../assets/images/Icons/delete-forever-white.svg";
-
-export const ImageVisor = ({
-  value,
-  name,
-  setModalFromTable,
-  setDataServices,
-  setModal,
-  ...props
-}) => {
-  const [smallSrc, setSmallSrc] = useState("");
-  function handleNewImage(imageFile) {
-    const payload = { ...props, ...imageFile };
-    setDataServices({ type: "updateImage", payload });
-  }
-
-  function handleUpdateImage(file) {
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = () => {
-        getImageDimensions(reader.result);
-      };
-      reader.readAsDataURL(file);
-    }
-  }
-
-  const getImageDimensions = (dataURL) => {
-    const img = new Image();
-    img.onload = () => {
-      const image = {
-        src: dataURL,
-        ext: img.src.includes("image/jpeg") ? "jpg" : "png",
-        width: img.width,
-        height: img.height,
-      };
-      handleNewImage(image);
-      changeVisor();
-    };
-    img.src = dataURL;
-  };
-
-  function changeVisor(view) {
-    if (!view) {
-      setModalFromTable(null);
-      return;
-    }
-    const isSmall = view === "small";
-    let src = isSmall
-      ? smallSrc
-      : `${process.env.REACT_APP_IMAGES_ENDPOINT}/${value?.src}`;
-    setModalFromTable(
-      <ImageView visorView={view}>
-        <div className="header">
-          <p>{name}</p>
-          <div className="buttons">
-            {isSmall ? (
-              <>
-                {value?.src ? (
-                  <img
-                    src={fullscreen}
-                    alt="Ver en pantalla completa"
-                    onClick={() => changeVisor("fullscreen")}
-                  />
-                ) : null}
-                <img src={close} alt="Cerrar" onClick={() => changeVisor()} />
-              </>
-            ) : (
-              <>
-                <label className="borderCircle" htmlFor="fileInput">
-                  <img src={uploadFile} alt="Actualizar imagen" />
-                  <input
-                    type="file"
-                    id="fileInput"
-                    accept="image/png, image/jpeg"
-                    style={{ display: "none" }}
-                    onChange={(e) => handleUpdateImage(e.target.files[0])}
-                  />
-                </label>
-                <img
-                  className="borderCircle"
-                  src={deleteForever}
-                  alt="Eliminar imágen"
-                  onClick={() => {
-                    setModal({
-                      type: "delete",
-                      functions: { setModal, setDataServices },
-                      payload: props,
-                    });
-                    changeVisor();
-                  }}
-                />
-                <img
-                  className="borderCircle"
-                  src={close}
-                  alt="Cerrar"
-                  onClick={() => changeVisor("small")}
-                />
-              </>
-            )}
-          </div>
-        </div>
-        <div className="body">
-          <ReactImageFallback
-            className="imageLoaded"
-            src={src}
-            fallbackImage={<ImageUploader handleNewImage={handleNewImage} />}
-            alt={name ?? "Imagen del producto"}
-          />
-        </div>
-      </ImageView>
-    );
-  }
-
-  useEffect(() => {
-    let src = value?.src?.includes("image/")
-      ? value?.src
-      : getImageURL(process.env.REACT_APP_IMAGES_BUCKET, value?.src, 250, 250);
-    setSmallSrc(src);
-  }, [value]);
-
-  return (
-    <>
-      <ImageContainer onClick={() => changeVisor("small")}>
-        <ReactImageFallback
-          src={smallSrc}
-          fallbackImage={defaultProductImage}
-          alt={name ?? "Imagen del producto"}
-        />
-      </ImageContainer>
-    </>
-  );
-};
-
-export default ImageVisor;

package/src/components/organisms/ImageVisor/styles.js

@@ -1,106 +0,0 @@
-import styled, { css } from "styled-components";
-import uploadFile from "../../../assets/images/Icons/upload-file.svg";
-
-export const ImageContainer = styled.div`
-  align-items: center;
-  background: var(--white-main, #fff);
-  border-radius: 7px;
-  border: 1px solid var(--grey-medium, #cbcbcb);
-  cursor: pointer;
-  display: flex;
-  height: 52px;
-  justify-content: center;
-  width: 52px;
-  & > img {
-    border-radius: 7px;
-    height: 100%;
-    width: 100%;
-    object-fit: contain;
-  }
-`;
-
-export const ImageView = styled.div`
-  background: var(--white-main, #fff);
-  border-radius: 5px;
-  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
-  height: 280px;
-  left: calc(50% - 125px);
-  position: absolute;
-  top: calc(50% - 140px);
-  width: 250px;
-  z-index: 10;
-  .header {
-    align-items: center;
-    background: var(--grey-medium, #cbcbcb);
-    border-radius: 5px 5px 0px 0px;
-    color: var(--white-main, #fff);
-    display: flex;
-    font-family: Roboto;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    height: 30px;
-    justify-content: space-between;
-    line-height: normal;
-    overflow: hidden;
-    padding: 0 9px 0 10px;
-    text-overflow: ellipsis;
-    width: 100%;
-    .buttons {
-      display: flex;
-      gap: 10px;
-      img {
-        cursor: pointer;
-      }
-      label {
-        display: flex;
-        align-items: center;
-        padding: 3px;
-      }
-      .borderCircle {
-        border-radius: 20px;
-        border: 1px solid var(--white-main, #fff);
-      }
-    }
-  }
-  .body {
-    width: 100%;
-    height: calc(100% - 30px);
-    .imageLoaded {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
-  }
-  ${({ visorView }) =>
-    visorView === "fullscreen" &&
-    css`
-      background: var(--black-main, #262626d9);
-      height: 100%;
-      left: 0;
-      top: 0;
-      width: 100%;
-      .header {
-        background: var(--black-main, #262626);
-        font-size: 14px;
-        height: 45px;
-        .buttons > img {
-          border-radius: 20px;
-          border: 1px solid var(--white-main, #fff);
-          padding: 3px;
-        }
-      }
-      > div {
-        align-items: center;
-        display: flex;
-        height: 100%;
-        justify-content: center;
-        width: 100%;
-        & > img {
-          border-radius: 5px;
-          height: 500px;
-          width: 500px;
-        }
-      }
-    `}
-`;

package/src/components/organisms/InputGroupv2/InputGroupv2.stories.js

@@ -1,31 +0,0 @@
-import { InputGroupv2 } from "./index";
-
-export default {
-  title: "Components/organisms/InputGroupv2",
-  component: InputGroupv2,
-  argTypes: {
-    activeSection: {
-      options: [true, false],
-      control: { type: "boolean" },
-    },
-  },
-};
-
-const Template = (args) => <InputGroupv2 {...args} />;
-
-export const InputGroupDefault = Template.bind({});
-InputGroupDefault.args = {
-  InputGroupv2: {
-    name: "Información básica del producto",
-    inputs: [
-      { label: "Item", value: "1234567890", placeholder: "Ingresar valor" },
-      { label: "Item", value: "1234567890", placeholder: "Ingresar valor" },
-      { label: "Item", value: "1234567890", placeholder: "Ingresar valor" },
-      { label: "Item", value: "1234567890", placeholder: "Ingresar valor" },
-      { label: "Item", value: "1234567890", placeholder: "Ingresar valor" },
-      { label: "Item", value: "1234567890", placeholder: "Ingresar valor" },
-      { label: "Item", value: "1234567890", placeholder: "Ingresar valor" },
-      { label: "Item", value: "1234567890", placeholder: "Ingresar valor" },
-    ],
-  },
-};

package/src/components/organisms/InputGroupv2/index.js

@@ -1,296 +0,0 @@
-import { Container } from "./styles";
-import { TagAndInputv2 } from "../../molecules/TagAndInputv2";
-import { ScreenHeaderv2 } from "../../atoms/ScreenHeaderv2";
-import { useState, useEffect } from "react";
-import { Box } from "../Box";
-
-export const InputGroupv2 = ({
-  inputGroup = {},
-  auditInputGroup,
-  activeSection,
-  dataInputs = {},
-  auditInputs = {},
-  updatedDescriptions,
-  setUpdatedDescriptions,
-  updatedDatasheets,
-  setUpdatedDatasheets,
-  articleId,
-  version,
-  dinamicHeight,
-  compare,
-  activeRetailer,
-  setUpdatedBoxData,
-  showMissingChars,
-}) => {
-  const inputTypeValue = (type) => {
-    switch (type) {
-      case "Booleano":
-        return "checkbox";
-      case "Numérico":
-        return "number";
-      default:
-        return "text";
-    }
-  };
-  const [showBox, setShowBox] = useState(false);
-
-  const isEquals = (dataInputsVal, auditInputsVal) => {
-    const result = dataInputsVal === auditInputsVal;
-    return result;
-  };
-
-  
-  useEffect(() => {
-    if (inputGroup.groupId === "16" && activeRetailer && activeRetailer?.retailer?.id) {
-      if (activeRetailer?.retailer?.id === 68) {
-        setShowBox(true);
-      } else {
-        setShowBox(false);
-      }
-    }
-  }, [activeRetailer, inputGroup.groupId]);
-
-  // useEffect(() => {
-  //   if (showBox) {
-  //     // Realiza la acción que deseas cuando showBox es true
-  //     console.log("showBox es true");
-  //   } else {
-  //     // Realiza la acción que deseas cuando showBox es false
-  //     console.log("showBox es false");
-  //   }
-  // }, [showBox]);
-  // console.log("dataInputs",dataInputs);
-
-  return (
-    <>
-    {inputGroup.groupId === "16" && activeRetailer?.retailer?.id === 68 && (
-      <Container
-        className={
-          activeSection === "Ficha técnica"
-            ? "datasheets-layout"
-            : "descriptions-layout"
-        }
-      >
-        <Box
-          inputGroup={inputGroup}
-          dataInputs={dataInputs}
-          onChange={setUpdatedBoxData}
-        />
-      </Container>
-    )}
-    {(inputGroup.groupId !== "16") && (
-      <Container
-        className={
-          activeSection === "Ficha técnica"
-            ? "datasheets-layout"
-            : "descriptions-layout"
-        }
-      >
-        {inputGroup?.dataGroup && (
-          <ScreenHeaderv2
-            headerType={"retailer-name-header"}
-            text={`${inputGroup?.dataGroup}`}
-          />
-        )}
-        <div className="inputs-container">
-          {inputGroup?.inputs?.map((input, index) =>
-            activeSection === "Ficha técnica" ? (
-              <>
-                <TagAndInputv2
-                  key={
-                    index +
-                    "-" +
-                    dataInputs[input]?.value +
-                    "-" +
-                    dataInputs[input]?.id +
-                    "-" +
-                    compare
-                  }
-                  //disabled={input === 40001}
-                  disabled={false}
-                  inputId={dataInputs[input]?.id}
-                  version={version}
-                  inputType={inputTypeValue(dataInputs[input]?.type)}
-                  label={
-                    dataInputs[input]?.name +
-                    (dataInputs[input]?.required ? "*" : "")
-                  }
-                  value={
-                    compare
-                      ? auditInputs[input]?.value
-                      : dataInputs[input]?.value
-                  }
-                  inputPlaceHolder={input?.placeholder}
-                  articleId={articleId}
-                  isRequired={dataInputs[input]?.required}
-                  required={dataInputs[input]?.required}
-                  minWords={dataInputs[input]?.min_words}
-                  maxWords={dataInputs[input]?.max_words}
-                  minChar={dataInputs[input]?.min_chars}
-                  updatedDatasheets={updatedDatasheets}
-                  setUpdatedDatasheets={setUpdatedDatasheets}
-                  maxChar={
-                    dataInputs[input]?.max_chars
-                      ? dataInputs[input]?.max_chars
-                      : 999
-                  }
-                  optionList={dataInputs[input]?.option_list}
-                  description={dataInputs[input]?.description}
-                  showTooltip={true}
-                  auditClass={
-                    compare &&
-                    !isEquals(dataInputs[input].value, auditInputs[input].value)
-                      ? "audit-class"
-                      : ""
-                  }
-                  showMissingChars={showMissingChars}
-                />
-              </>
-            ) : (
-              <TagAndInputv2
-                key={index + "-" + input?.value + "-" + compare}
-                inputId={input.id}
-                index={index}
-                inputType={"textarea"}
-                label={input?.name + (input.required ? "*" : "")}
-                value={
-                  compare ? auditInputGroup?.inputs[index]?.value : input?.value
-                }
-                isRequired={input.required}
-                required={input.required}
-                minWords={input?.min_words}
-                maxWords={input?.max_words}
-                minChar={input?.min_chars}
-                maxChar={input.max_chars}
-                inputPlaceHolder={input?.placeholder}
-                updatedDescriptions={updatedDescriptions}
-                setUpdatedDescriptions={setUpdatedDescriptions}
-                articleId={articleId}
-                version={version}
-                dinamicHeight={dinamicHeight}
-                description={input?.description}
-                showTooltip={true}
-                auditClass={
-                  compare &&
-                  !isEquals(input?.value, auditInputGroup?.inputs[index]?.value)
-                    ? "audit-class"
-                    : ""
-                }
-                showMissingChars={showMissingChars}
-              />
-            )
-          )}
-        </div>
-      </Container>
-    )}
-     {(inputGroup.groupId === "16" && activeRetailer?.retailer?.id === 74) && (
-      <Container
-        className={
-          activeSection === "Ficha técnica"
-            ? "datasheets-layout"
-            : "descriptions-layout"
-        }
-      >
-        {inputGroup?.dataGroup && (
-          <ScreenHeaderv2
-            headerType={"retailer-name-header"}
-            text={`${inputGroup?.dataGroup}`}
-          />
-        )}
-        <div className="inputs-container">
-          {inputGroup?.inputs?.map((input, index) =>
-            activeSection === "Ficha técnica" ? (
-              <>
-                <TagAndInputv2
-                  key={
-                    index +
-                    "-" +
-                    dataInputs[input]?.value +
-                    "-" +
-                    dataInputs[input]?.id +
-                    "-" +
-                    compare
-                  }
-                  //disabled={input === 40001}
-                  disabled={false}
-                  inputId={dataInputs[input]?.id}
-                  version={version}
-                  inputType={inputTypeValue(dataInputs[input]?.type)}
-                  label={
-                    dataInputs[input]?.name +
-                    (dataInputs[input]?.required ? "*" : "")
-                  }
-                  value={
-                    compare
-                      ? auditInputs[input]?.value
-                      : dataInputs[input]?.value
-                  }
-                  inputPlaceHolder={input?.placeholder}
-                  articleId={articleId}
-                  isRequired={dataInputs[input]?.required}
-                  required={input.required}
-                  minWords={input?.min_words}
-                  maxWords={input?.max_words}
-                  minChar={input?.min_chars}
-                  updatedDatasheets={updatedDatasheets}
-                  setUpdatedDatasheets={setUpdatedDatasheets}
-                  maxChar={
-                    dataInputs[input]?.max_chars
-                      ? dataInputs[input]?.max_chars
-                      : 999
-                  }
-                  optionList={dataInputs[input]?.option_list}
-                  description={dataInputs[input]?.description}
-                  showTooltip={true}
-                  inputGroup={inputGroup}
-                  dataInputs={dataInputs}
-                  onChange={setUpdatedBoxData}
-                  auditClass={
-                    compare &&
-                    !isEquals(dataInputs[input].value, auditInputs[input].value)
-                      ? "audit-class"
-                      : ""
-                  }
-                  showMissingChars={showMissingChars}
-                />
-              </>
-            ) : (
-              <TagAndInputv2
-                key={index + "-" + input?.value + "-" + compare}
-                inputId={input.id}
-                index={index}
-                inputType={"textarea"}
-                label={input?.name + (input.required ? "*" : "")}
-                value={
-                  compare ? auditInputGroup?.inputs[index]?.value : input?.value
-                }
-                isRequired={input.required}
-                required={input.required}
-                minWords={input?.min_words}
-                maxWords={input?.max_words}
-                minChar={input?.min_chars}
-                maxChar={input.max_chars}
-                inputPlaceHolder={input?.placeholder}
-                updatedDescriptions={updatedDescriptions}
-                setUpdatedDescriptions={setUpdatedDescriptions}
-                articleId={articleId}
-                version={version}
-                dinamicHeight={dinamicHeight}
-                description={input?.description}
-                showTooltip={true}
-                auditClass={
-                  compare &&
-                  !isEquals(input?.value, auditInputGroup?.inputs[index]?.value)
-                    ? "audit-class"
-                    : ""
-                }
-                showMissingChars={showMissingChars}
-              />
-            )
-          )}
-        </div>
-      </Container>
-    )}
-  </>
-);
-}  

package/src/components/organisms/InputGroupv2/styles.js

@@ -1,90 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  border-radius: 6px;
-  padding: 10px;
-  width: 100%;
-
-  .retailer-name-header {
-    & + * {
-      margin-top: 10px;
-    }
-  }
-  &.datasheets-layout {
-    border: 1px solid ${GlobalColors.gray_light};
-    padding: 18px;
-    border-radius: 10px;
-
-    .inputs-container {
-      display: flex;
-      flex-wrap: wrap;
-      width: 100%;
-      gap: 10px;
-
-      .input-container {
-        flex: 1 1 20%;
-        min-width: 227px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 10px;
-      }
-    }
-  }
-  &.datasheets-layout .title-container {
-    width:auto;
-    white-space:nowrap;
-  }
-
-  & + * {
-    margin-top: 15px;
-  }
-  .title-container {
-    display:flex;
-    gap:8px;
-  }
-
-  &.descriptions-layout .title-container {
-    width:20%;
-  }
-
-  &.descriptions-layout {
-    .inputs-container{
-      .input-container{
-        display: flex;
-        align-items: center;
-        gap:8px;
-        margin-top:10px;
-      }
-    }
-  }
-`;
-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;
-    
-  }
-  .icono-police{
-    font-size:20px;
-    color: ${(props) =>
-      props.percentageRequired < 100 ? "#d4d1d7" : "#ECDD1D"};
-  }
-`;

package/src/components/organisms/MandatoryBar/MandatoryBar.stories.js

@@ -1,18 +0,0 @@
-import { MandatoryBar } from "./index";
-
-export default {
-  title: "Components/organisms/MandatoryBar",
-  component: MandatoryBar,
-  argTypes: {
-    
-  },
-};
-
-const Template = (args) => <MandatoryBar {...args} />;
-
-export const MandatoryBarDefault = Template.bind({});
-MandatoryBarDefault.args = {
-  MandatoryBar: {
-    
-  },
-};