contentoh-components-library 21.4.123 → 21.4.124

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: {
-    
-  },
-};

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

@@ -1,31 +0,0 @@
-import { NumberMandatory } from "../../atoms/NumberMandatory";
-import { Container } from "./styles";
-
-export const MandatoryBar = ({
-  obligatorias,
-  minimas,
-  maximas
-}) => {
-  return (
-    <Container>
-      <NumberMandatory
-        number={obligatorias}
-        required={true}
-        typeImage={"obligatorias"}
-        typeSingle={"obligatoria"}
-      ></NumberMandatory>
-      <NumberMandatory
-        number={minimas}
-        required={false}
-        typeImage={"mínimas"}
-        typeSingle={"mínimas"}
-      ></NumberMandatory>
-      <NumberMandatory
-        number={maximas}
-        required={false}
-        typeImage={"máximas"}
-        typeSingle={"máximas"}
-      ></NumberMandatory>
-    </Container>
-);
-}  

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

@@ -1,12 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  width: fit-content;
-  height:60px;
-  display: flex;
-  gap: 10px;
-  padding:22px 15px;
-  border:1px solid ${GlobalColors.gray_light};
-  border-radius:10px;
-`;

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

@@ -1,90 +0,0 @@
-import { ProductImageModalv2 } from "./index";
-
-export default {
-  title: "Components/organisms/ProductImageModalv2",
-  component: ProductImageModalv2,
-};
-
-const Template = (args) => <ProductImageModalv2 {...args} />;
-
-export const ProductImageModalv2Default = Template.bind({});
-ProductImageModalv2Default.args = {
-  headerInfo: {},
-
-  images: {
-    values: [
-      {
-        img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
-        alt: "img",
-        name: "Hero",
-        data: [
-          { feature: "Tamaño de imagen", value: "1000x10000" },
-          { feature: "Formato", value: "jpg" },
-          { feature: "Resolución", value: "300dpi" },
-          { feature: "Tipo de imagen", value: "Tipo de imagen" },
-          { feature: "Identificador", value: "F261" },
-        ],
-      },
-      {
-        img: "https://www.muycomputer.com/wp-content/uploads/2020/12/google.png",
-        alt: "img",
-        name: "Hero2",
-        data: [
-          { feature: "Tamaño de imagen", value: "1000x10000" },
-          { feature: "Formato", value: "jpg" },
-          { feature: "Resolución", value: "300dpi" },
-          { feature: "Tipo de imagen", value: "Tipo de imagen" },
-          { feature: "Identificador", value: "F261" },
-        ],
-      },
-      {
-        img: "https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Teaser/bildergalerie-online-t.jpg",
-        alt: "img",
-        name: "Hero3",
-        data: [
-          { feature: "Tamaño de imagen", value: "1000x10000" },
-          { feature: "Formato", value: "jpg" },
-          { feature: "Resolución", value: "300dpi" },
-          { feature: "Tipo de imagen", value: "Tipo de imagen" },
-          { feature: "Identificador", value: "F261" },
-        ],
-      },
-      {
-        img: "https://i.pinimg.com/originals/d0/b9/28/d0b928df15d3a3bf1905865a8fedb257.jpg",
-        alt: "img",
-        name: "Hero4",
-        data: [
-          { feature: "Tamaño de imagen", value: "1000x10000" },
-          { feature: "Formato", value: "jpg" },
-          { feature: "Resolución", value: "300dpi" },
-          { feature: "Tipo de imagen", value: "Tipo de imagen" },
-          { feature: "Identificador", value: "F261" },
-        ],
-      },
-      {
-        img: "https://memegenerator.net/img/images/72798198.jpg",
-        alt: "img",
-        name: "Hero5",
-        data: [
-          { feature: "Tamaño de imagen", value: "1000x10000" },
-          { feature: "Formato", value: "jpg" },
-          { feature: "Resolución", value: "300dpi" },
-          { feature: "Tipo de imagen", value: "Tipo de imagen" },
-          { feature: "Identificador", value: "F261" },
-        ],
-      },
-      {
-        img: "http://www.dumpaday.com/wp-content/uploads/2016/02/funny-pictures-621.jpg",
-        alt: "img",
-        name: "Hero6",
-        data: [
-          { feature: "Tamaño de imagen", value: "1000x10000" },
-          { feature: "Formato", value: "jpg" },
-          { feature: "Resolución", value: "300dpi" },
-          { feature: "Tipo de imagen", value: "Tipo de imagen" },
-          { feature: "Identificador", value: "F261" },
-        ],
-      },
-    ],
-  },
-};