contentoh-components-library 21.4.71 → 21.4.73

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

@@ -1,148 +0,0 @@
-import ReactQuill from "react-quill";
-import "react-quill/dist/quill.snow.css";
-import { useState } from "react";
-import { Container } from "./styles";
-
-export const InputFormatterv2 = ({
-  mainValue = "",
-  inputId,
-  articleId,
-  updatedDescriptions,
-  setUpdatedDescriptions,
-  isRequired,
-  maxChar,
-}) => {
-  const [inputValue, setInputValue] = useState(mainValue);
-  const [selection, setSelection] = useState(false);
-  const [position, setPosition] = useState({ left: 0, top: 0 });
-  const [charsCounter, setCharsCounter] = useState(0);
-  const [quillState, setQuillState] = useState({});
-  const maxLength = maxChar ? maxChar : 999;
-
-  const getValue = (value) => {
-    let temp = value
-      .replace(/\n/gm, "<br>")
-      .replace(/\&nbsp;/gm, " ")
-      .replace(/\&amp;/gm, "&");
-    return temp;
-  };
-
-  //const quillRef = useRef();
-  const setQuill = (ref) => {
-    if (!ref || ref === null) return;
-    if (typeof ref.getEditor !== "function") return;
-    setQuillState(ref.getEditor());
-  };
-
-  const valueFormater = (value) => {
-    return value
-      .replace(/<\/p><p>/gm, "\n")
-      .replace(/<\/?br>|<\/?p>/gm, "")
-      .replace(/\&nbsp;/gm, " ")
-      .replace(/\&amp;/gm, "&");
-  };
-
-  const onChange = (valueInput, h) => {
-    let value = "";
-    try {
-      if (h.getLength() - 1 <= maxLength) {
-        let unformattedText = valueInput
-          .replace(/<li.*?>/gm, "   - ")
-          .replace(/<\/li>/gm, "\n")
-          .replace(/<\/p><p>/gm, "\n")
-          .replaceAll(/<\/?(?!\/?strong).*?>/gm, "")
-          .replace(/\&nbsp;/gm, " ")
-          .replace(/\&amp;/gm, "&");
-        setInputValue(valueInput);
-        value = unformattedText;
-      } else {
-        quillState.deleteText(maxLength, quillState.getLength());
-        setInputValue((val) => (val = quillState.getText()));
-        value = quillState.getText();
-      }
-    } catch (error) {
-      console.log(error);
-    }
-    setCharsCounter(h.getLength() - 1);
-    value = valueFormater(value);
-
-    if (updatedDescriptions) {
-      let idInput = inputId;
-      let dataSave = updatedDescriptions?.slice();
-      if (dataSave?.length > 0) {
-        const index = dataSave.findIndex((e) => e.attributeId === idInput);
-        if (index !== -1) {
-          if (value !== mainValue) dataSave[index].value = value;
-          else dataSave.splice(index, 1);
-        } else {
-          dataSave.push({
-            articleId: articleId,
-            attributeId: idInput,
-            value: value,
-          });
-        }
-      } else {
-        if (value !== mainValue) {
-          dataSave.push({
-            articleId: articleId,
-            attributeId: idInput,
-            value: value,
-          });
-        }
-      }
-      setUpdatedDescriptions(dataSave);
-    }
-  };
-
-  const getSelection = (range, a, b) => {
-    //getBounds(index,length)
-    const selected = b.getSelection();
-    const bounds = b.getBounds(selected?.index || 0, selected?.length || 0);
-    if (a === "user") {
-      setPosition({ left: bounds.left, top: bounds.top });
-      setSelection(selected?.length > 0);
-    }
-  };
-
-  return (
-    <Container
-      isRequired={
-        isRequired &&
-        (inputValue.replace(/<.*?>/gm, "").length === 0 || !inputValue)
-      }
-      selection={selection}
-      position={position}
-    >
-      <ReactQuill
-        id={inputId + ""}
-        ref={(el) => setQuill(el)}
-        defaultValue={getValue(inputValue)}
-        //disabled={!props.enableInputs}
-        modules={{ toolbar: ["bold"] }}
-        onKeyPress={(e) => {
-          if (charsCounter >= maxLength && e.key !== "Backspace") {
-            e.preventDefault();
-          }
-        }}
-        onKeyDown={(e) => {
-          let keysArray = [
-            "Backspace",
-            "Meta",
-            "ArrowLeft",
-            "ArrowRight",
-            "ArrowUp",
-            "ArrowDown",
-          ];
-          if (
-            charsCounter >= maxLength &&
-            keysArray.every((key) => e.key !== key)
-          ) {
-            e.preventDefault();
-          }
-        }}
-        onChange={(valueInput, user, range, h) => onChange(valueInput, h)}
-        onChangeSelection={getSelection}
-      />
-    </Container>
-  );
-};

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

@@ -1,39 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  .quill {
-    background-color: ${GlobalColors.white};
-    border: 1px solid
-      ${({ focus, isRequired }) =>
-        focus ? GlobalColors.magenta_s2 : isRequired ? "red" : GlobalColors.gray_light};
-    position: relative;
-    border-radius: 5px;
-
-    .ql-toolbar {
-      background-color: ${GlobalColors.s2};
-      position: absolute;
-      z-index: 10;
-      border: 1px solid ${GlobalColors.gray_light};
-      width: 45px;
-      height: 45px;
-      border-radius: 4px;
-      visibility: ${({ selection }) => (selection ? "visible" : "hidden")};
-      top: ${({ position }) => position.top}px;
-      left: ${({ position }) => position.left}px;
-    }
-
-    .ql-container {
-      border: none;
-      font-family: ${FontFamily.AvenirNext};
-      color: ${GlobalColors.deep_gray};
-      strong {
-        font-family: ${FontFamily.Raleway_900};
-      }
-
-      .ql-editor{
-        padding: 8px 10px;
-      }
-    }
-  }
-`;

package/src/components/atoms/InputImages/InputImages.stories.js

@@ -1,19 +0,0 @@
-import { InputImages } from ".";
-
-export default {
-  title: "Components/atoms/InputImages",
-  component: InputImages,
-  argTypes: {
-  },
-};
-
-export const Template = (args) => <InputImages {...args} />;
-
-const InputImagesDefault = Template.bind({});
-
-InputImagesDefault.args = {
-  description_small:"Descripción del campo",
-  required:true, 
-  number:4, 
-  typeImage:"Obligatorio"
-};

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

@@ -1,25 +0,0 @@
-import Input from "../Input";
-import { InputText } from "../InputText";
-import { TooltipLight } from "../TooltipLight";
-import { Container } from "./styles";
-
-export const InputImages = ({ description_small, required, placeHolder }) => {
-  return (
-    <Container>
-      <TooltipLight
-        description_small={description_small}
-        required={required}
-      ></TooltipLight>
-      <span> {placeHolder}</span>
-      <InputText
-        className="inputSearch"
-        type="black"
-        transparent
-        size={12}
-        placeHolder={placeHolder}
-        onChangeText={(newValue) => setTextInputSearch(newValue)}
-        onEnter={(event) => onClickSearch()}
-      ></InputText>
-    </Container>
-  );
-};

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

@@ -1,17 +0,0 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display:flex;
-  align-items:center;
-  gap:5px;
-  span {
-    font-family:${FontFamily.RobotoMedium}, sans-serif;
-    font-size:12px;
-  }
-
-  .inputSearch{
-    border:1px solid ${GlobalColors.gray_light};
-    border-radius:5px;
-  }
-`;

package/src/components/atoms/NumberMandatory/NumberMandatory.stories.js

@@ -1,19 +0,0 @@
-import { NumberMandatory } from ".";
-
-export default {
-  title: "Components/atoms/NumberMandatory",
-  component: NumberMandatory,
-  argTypes: {
-  },
-};
-
-export const Template = (args) => <NumberMandatory {...args} />;
-
-const NumberMandatoryDefault = Template.bind({});
-
-NumberMandatoryDefault.args = {
-  description_small:"Descripción del campo",
-  required:true, 
-  number:4, 
-  typeImage:"Obligatorio"
-};

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

@@ -1,16 +0,0 @@
-import React from 'react';
-import { TooltipLight } from "../TooltipLight";
-import { Container } from "./styles";
-
-export const NumberMandatory = ({ required, number, typeImage, typeSingle }) => {
-  return (
-    <Container>
-      <TooltipLight
-        description_small={`Este producto necesita ${number} ${number === 1 ? 'imagen' : 'imágenes'} ${number === 1 ? typeSingle : typeImage} para esta cadena.`}
-        required={required}
-      ></TooltipLight>
-      <span>{number}</span>
-      <span> {number === 1 ? 'imagen' : 'imágenes'} {number === 1 ? typeSingle : typeImage}</span>
-    </Container>
-  );
-};

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

@@ -1,11 +0,0 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display:flex;
-  gap:5px;
-  span {
-    font-family:${FontFamily.RobotoMedium}, sans-serif;
-    font-size:12px;
-  }
-`;

package/src/components/atoms/PercentTag/PercentTag.stories.js

@@ -1,7 +0,0 @@
-import { PercentTag } from ".";
-
-export default { title: "Components/atoms/PercentTag", component: PercentTag };
-
-const Template = (args) => <PercentTag {...args} />;
-export const PercentTagDefault = Template.bind({});
-PercentTagDefault.args = { percent: 88, progressBarType: "AA" };

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

@@ -1,9 +0,0 @@
-import { Container } from "./styles";
-
-export const PercentTag = ({ percent, progressBarType }) => {
-  return (
-    <Container className={`status-${progressBarType}`}>
-      <p>{percent}%</p>
-    </Container>
-  );
-};

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

@@ -1,69 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  background-color: ${GlobalColors.s3};
-  display: inline-block;
-  padding: 0 10px;
-  border-radius: 5px;
-  font-family: ${FontFamily.Lato};
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 20px;
-  color: ${(backgroundColor) =>
-    backgroundColor === "s2" || backgroundColor === "s1"
-      ? GlobalColors.s4
-      : GlobalColors.white};
-
-  &.status-CA,
-  &.status-IE {
-    background-color: ${GlobalColors.in_progress};
-  }
-
-  &.status-R,
-  &.status-AS,
-  &.status-PA {
-    background-color: ${GlobalColors.reception};
-  }
-
-  &.status-AA,
-  &.status-AP,
-  &.status-ACA,
-  &.status-AC {
-    background-color: ${GlobalColors.finished};
-  }
-
-  &.status-RA,
-  &.status-RC,
-  &.status-RP,
-  &.status-RCA {
-    background-color: ${GlobalColors.rejected_status};
-  }
-
-  &.status-Dat,
-  &.status-Dsc,
-  &.status-Imgs {
-    background-color: ${GlobalColors.s4};
-  }
-
-  &.status-Ex {
-    background-color: ${GlobalColors.exported};
-  }
-
-  &.status-DDI {
-    background-color: ${GlobalColors.original_purpura};
-  }
-
-  &.status-GLD {
-    background-color: ${GlobalColors.in_progress};
-  }
-
-  &.status-TAB {
-    background-color: ${GlobalColors.deep_gray};
-  }
-
-  &.status-Pt {
-    background-color: ${GlobalColors.s2};
-    color: ${GlobalColors.s4};
-  }
-`;

package/src/components/atoms/PriorityFlagv2/PriorityFlagv2.stories.js

@@ -1,20 +0,0 @@
-import { PriorityFlagv2 } from "./index";
-
-export default {
-  title: "Components/atoms/PriorityFlagv2",
-  component: PriorityFlagv2,
-  argTypes: {
-    priority: {
-      options: ["no priority", "low", "medium", "high"],
-      control: { type: "select" },
-    },
-  },
-};
-
-const Template = (args) => <PriorityFlagv2 {...args} />;
-
-export const PriorityFlagDefault = Template.bind({});
-
-PriorityFlagDefault.args = {
-  priority: "no priority",
-};

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

@@ -1,20 +0,0 @@
-import { Container } from "./styles";
-import without from "../../../assets/images/flagsv2/noPriority.svg";
-import high from "../../../assets/images/flagsv2/highPriority.svg";
-import medium from "../../../assets/images/flagsv2/mediumPriority.svg";
-import low from "../../../assets/images/flagsv2/lowPriority.svg";
-
-export const PriorityFlagv2 = ({ priority }) => {
-  const PriorityFlags = {
-    ["none"]: without,
-    ["low"]: low,
-    ["medium"]: medium,
-    ["high"]: high,
-  };
-
-  return (
-    <Container>
-      <img src={PriorityFlags[priority]} alt={priority} />
-    </Container>
-  );
-};

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

@@ -1,6 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-width:20px;
-height:20px;
-`;

package/src/components/atoms/ProductImagev2/ProductImagev2.stories.js

@@ -1,28 +0,0 @@
-import { ProductImagev2 } from ".";
-
-export default {
-  title: "Components/atoms/ProductImagev2",
-  component: ProductImagev2,
-  argTypes: {
-    imageType: {
-      options: [
-        "main-image",
-        "carousel-image",
-        "catalogue-image-big-size",
-        "catalogue-image-small-size",
-        "catalogue-modal-image",
-        "expanded-modal-image",
-      ],
-      control: { type: "select" },
-    },
-  },
-};
-
-export const Template = (args) => <ProductImagev2 {...args} />;
-
-const ProductImagev2Default = Template.bind({});
-
-ProductImagev2Default.args = {
-  imageType: "main-image",
-  altText: "default image",
-};

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

@@ -1,16 +0,0 @@
-import { Container } from "./styles";
-import ReactImageFallback from "react-image-fallback";
-import defaultProductImage from "../../../assets/images/defaultImages/defaultProductImage.png";
-
-export const ProductImagev2 = ({ img, imageType, altText, onClick }) => {
-  return (
-    <Container className={imageType}>
-      <ReactImageFallback
-        src={img}
-        fallbackImage={defaultProductImage}
-        alt={altText}
-        onClick={onClick}
-      />
-    </Container>
-  );
-};

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

@@ -1,62 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  width: fit-content;
-
-  img {
-    object-fit: contain;
-  }
-
-  &.carousel-image {
-    img {
-      width: 85px;
-      height: 55px;
-      cursor: pointer;
-    }
-
-    & + * {
-      margin-left: 1px;
-    }
-  }
-
-  &.main-image {
-    img {
-      width: 182px;
-      height: 182px;
-    }
-  }
-
-  &.catalogue-image-big-size {
-    img {
-      width: 179px;
-      height: 179px;
-    }
-  }
-
-  &.catalogue-image-small-size {
-    img {
-      width: 60px;
-      height: 60px;
-    }
-  }
-
-  &.catalogue-modal-image {
-    cursor: pointer;
-
-    img {
-      width: 68px;
-      height: 68px;
-    }
-  }
-
-  &.expanded-modal-image {
-    width: 500px;
-    height: 500px;
-
-    img {
-      width: 500px;
-      height: 500px;
-      border-radius:10px;
-    }
-  }
-`;

package/src/components/atoms/Progress/Progress.stories.js

@@ -1,25 +0,0 @@
-import { Progress } from "./index.js";
-import { GlobalColors } from "../../../global-files/variables.js";
-
-export default {
-  title: "Components/atoms/Progress",
-  component: Progress,
-  argTypes: {
-    percent: {
-      control: { type: "range", min: 0, max: 100, step: 1 },
-    },
-    backgroundColor: {
-      options: Object.keys(GlobalColors),
-      control: { type: "select" },
-    },
-  },
-};
-
-const Template = (args) => <Progress {...args} />;
-
-export const ProgressDefault = Template.bind({});
-
-ProgressDefault.args = {
-  percent: 0,
-  backgroundColor: "s2",
-};

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

@@ -1,74 +0,0 @@
-import { Container, ContainerIcon } from "./styles";
-import { Tooltip } from "../Tooltip";
-import { Button } from "../GeneralButton";
-
-export const Progress = ({
-  percent,
-  progressBarType,
-  percentRequired,
-  version,
-  setShowVersionSelector,
-  showShield,
-}) => {
-  return (
-    <>
-      <Tooltip
-        componentTooltip={
-          <>
-            <p>
-              <b>Porcentaje de requeridos</b>
-            </p>
-            <p>
-              Este porcentaje indica la completitud de los atributos requeridos
-              para todos los servicios.
-            </p>
-          </>
-        }
-        children={
-          <Container className={`status-${progressBarType}`}>
-            <p>{percent}%</p>
-          </Container>
-        }
-        classNameTooltip={"container-tooltip"}
-      />
-      <>
-        {version && (
-          <Button
-            buttonType={"general-button-rec version-button"}
-            onClick={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              setShowVersionSelector(true);
-            }}
-            label={`V${version}`}
-          />
-        )}
-        {showShield && (
-          <Tooltip
-            componentTooltip={
-              <>
-                <p>
-                  <b>Campos requeridos</b>
-                </p>
-                <p>
-                  Este nuevo icono te indicará cuando <br></br> completes todos
-                  los campos requeridos
-                </p>
-              </>
-            }
-            children={
-              <ContainerIcon
-                className="fondo"
-                percentageRequired={percentRequired}
-              >
-                {/* <span class="hola">local_police</span> */}
-                <span class="material-icons icono-police">&#xef56;</span>
-              </ContainerIcon>
-            }
-            classNameTooltip={"container-tooltip"}
-          />
-        )}
-      </>
-    </>
-  );
-};