contentoh-components-library 21.0.28 → 21.0.31

package/src/components/atoms/InputFormatter/Wysiwyg.stories.js

@@ -0,0 +1,12 @@
+import { InputFormatter } from "./index";
+
+export default {
+  title: "Components/atoms/InputFormatter",
+  component: InputFormatter,
+};
+
+const Template = (args) => <InputFormatter {...args} />;
+
+export const DefaultInputFormatter = Template.bind({});
+
+DefaultInputFormatter.args = { text: "hola mundo" };

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

@@ -0,0 +1,141 @@
+import ReactQuill from "react-quill";
+import "react-quill/dist/quill.snow.css";
+import { useEffect, useState } from "react";
+import { Container } from "./styles";
+
+export const InputFormatter = ({
+  mainValue = "",
+  inputId,
+  articleId,
+  updatedDescriptions,
+  setUpdatedDescriptions,
+  addTextAreaToArray,
+  name,
+  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>");
+    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, "");
+  };
+
+  const onChange = (valueInput, delta, user, h) => {
+    let value = "";
+    try {
+      if (h.getLength() - 1 <= maxLength) {
+        setInputValue(
+          (val) => (val = valueInput.replace(/<\/?span.*?>/gm, ""))
+        );
+        value = valueInput;
+      } 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);
+
+    let idInput = inputId;
+    let dataSave = updatedDescriptions.slice();
+    if (dataSave.length > 0) {
+      if (dataSave.filter((e) => e.attributeId === idInput).length > 0) {
+        dataSave.forEach((e) => {
+          if (e.attributeId === idInput) {
+            e.value = value;
+          }
+        });
+      } else {
+        dataSave.push({
+          articleId: articleId,
+          attributeId: idInput,
+          value: value,
+        });
+      }
+    } else {
+      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)}
+        value={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, user, range, h);
+        }}
+        onChangeSelection={getSelection}
+      />
+      <p className="description-limit">
+        {charsCounter}/{maxLength}
+      </p>
+    </Container>
+  );
+};

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

@@ -0,0 +1,40 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  .quill {
+    border: 1px solid
+      ${({ focus, isRequired }) =>
+        focus ? GlobalColors.magenta_s2 : isRequired ? "red" : GlobalColors.s3};
+    position: relative;
+    border-radius: 2px;
+
+    .ql-toolbar {
+      background-color: ${GlobalColors.s2};
+      position: absolute;
+      z-index: 10;
+      border: 1px solid ${GlobalColors.s3};
+      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.s4};
+      strong {
+        font-family: ${FontFamily.Raleway_900};
+      }
+    }
+  }
+  .description-limit {
+    font-size: 12px;
+    font-family: ${FontFamily.AvenirNext};
+    color: ${GlobalColors.s4};
+    text-align: right;
+  }
+`;

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

@@ -0,0 +1,26 @@
+import React, { useState, useEffect } from "react";
+import { MainContainer } from "./style";
+import Input from "../Input";
+
+export default function LabelToInput(props) {
+  const [isActive, setIsActive] = useState(false);
+  const [defaultValue, setDefaultValue] = useState("");
+  useEffect(() => {
+    setDefaultValue(props.defaultValue === "" ? "-" : props.defaultValue);
+  }, [props.defaultValue]);
+  return (
+    <MainContainer width={props.width} error={!isActive && props.error}>
+      {!isActive ? (
+        <p onClick={() => setIsActive(true)}>{defaultValue}</p>
+      ) : (
+        <Input
+          {...props}
+          onBlur={() => {
+            props.onBlur && props.onBlur();
+            setIsActive(false);
+          }}
+        />
+      )}
+    </MainContainer>
+  );
+}

package/src/components/atoms/LabelToInput/style.js

@@ -0,0 +1,41 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const MainContainer = styled.div`
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  height: 20px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  margin-left: auto;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  & > p {
+    font-family: ${FontFamily.AvenirNext};
+    font-weight: 400;
+    font-size: 11px;
+    line-height: 19px;
+    color: ${GlobalColors.s5};
+    background-color: ${GlobalColors.s2};
+    padding: 1px 3px;
+    border-radius: 3px;
+    min-width: 50px;
+    height: 21px;
+    text-align: center;
+  }
+  border: ${(props) => props.error && "1px solid red"};
+  ::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+  ::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #d4d1d7;
+    border-radius: 3px;
+  }
+`;

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

@@ -1,13 +1,12 @@
-import { Container } from "./styles";
-
+import { Container, Loader } from "./styles";
 export const Loading = () => {
   return (
-    <Container >
-      <div className="loader">
+    <Container>
+      <Loader>
         <span className="first"></span>
         <span className="second"></span>
         <span className="third"></span>
-      </div>
+      </Loader>
     </Container>
   );
 };

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

@@ -6,52 +6,52 @@ export const Container = styled.div`
   align-items: center;
   height: 100%;
   width: 100%;
-  .loader {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-    span {
-      display: inline-block;
-      border-radius: 100%;
-      margin-left: 5px;
-      opacity: 1;
-    }
-    .first {
-      background-color: #ff75cf;
-    }
-    .second {
-      background-color: #e33aa9;
-    }
-    .third {
-      background-color: #b12d84;
-    }
-    span:nth-child(1) {
-      width: 16px;
-      height: 16px;
-      animation: opacitychange 1s ease-in-out infinite;
-    }
-    span:nth-child(2) {
-      width: 18px;
-      height: 18px;
+`;
+export const Loader = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  span {
+    display: inline-block;
+    border-radius: 100%;
+    margin: 35px 5px;
+    opacity: 1;
+  }
+  .first {
+    background-color: #ff75cf;
+  }
+  .second {
+    background-color: #e33aa9;
+  }
+  .third {
+    background-color: #b12d84;
+  }
+  span:nth-child(1) {
+    width: 16px;
+    height: 16px;
+    animation: opacitychange 1s ease-in-out infinite;
+  }
+  span:nth-child(2) {
+    width: 18px;
+    height: 18px;
 
-      animation: opacitychange 1s ease-in-out 0.33s infinite;
-    }
-    span:nth-child(3) {
-      width: 20px;
-      height: 20px;
+    animation: opacitychange 1s ease-in-out 0.33s infinite;
+  }
+  span:nth-child(3) {
+    width: 20px;
+    height: 20px;
 
-      animation: opacitychange 1s ease-in-out 0.66s infinite;
+    animation: opacitychange 1s ease-in-out 0.66s infinite;
+  }
+  @keyframes opacitychange {
+    0%,
+    100% {
+      opacity: 0;
     }
-    @keyframes opacitychange {
-      0%,
-      100% {
-        opacity: 0;
-      }
-      60% {
-        opacity: 1;
-      }
+    60% {
+      opacity: 1;
     }
   }
 `;

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

@@ -6,7 +6,7 @@ import low from "../../../assets/images/flags/lowPriority.svg";
 
 export const PriorityFlag = ({ priority }) => {
   const PriorityFlags = {
-    ["no priority"]: without,
+    ["none"]: without,
     ["low"]: low,
     ["medium"]: medium,
     ["high"]: high,

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

@@ -4,7 +4,7 @@ export const Container = styled.div`
   width: fit-content;
 
   img {
-    object-fit: cover;
+    object-fit: contain;
   }
 
   &.carousel-image {

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

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

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

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
-  background-color: ${(props) => GlobalColors[props.backgroundColor]};
+  background-color: ${GlobalColors.s3};
   width: fit-content;
   height: 27px;
   padding: 4px;
@@ -11,8 +11,59 @@ export const Container = styled.div`
   font-weight: 600;
   font-size: 14px;
   line-height: 19px;
-  color: ${(props) =>
-    props.backgroundColor === "s2" || props.backgroundColor === "s1"
+  color: ${(backgroundColor) =>
+    backgroundColor === "s2" || backgroundColor === "s1"
       ? GlobalColors.s4
       : GlobalColors.white};
+
+  &.status-As,
+  &.status-P {
+    background-color: ${GlobalColors.in_progress};
+  }
+
+  &.status-Pr,
+  &.status-Rr {
+    background-color: ${GlobalColors.reception};
+  }
+
+  &.status-AA,
+  &.status-AP,
+  &.status-AC,
+  &.status-AF {
+    background-color: ${GlobalColors.finished};
+  }
+
+  &.status-RA,
+  &.status-RF,
+  &.status-RP,
+  &.status-RC {
+    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/ScreenHeader/index.js

@@ -8,12 +8,16 @@ export const ScreenHeader = ({
   color,
   headerType,
   Paragraph,
-
 }) => {
   return (
-    <Container fontFamily={fontFamily} color={color} className={headerType} key={`title-${text}`}>
+    <Container
+      fontFamily={fontFamily}
+      color={color}
+      className={headerType}
+      key={`title-${text}`}
+    >
       {text} {boldText && <span> {boldText}</span>}
-      {<p>{Paragraph}</p>}
+      {Paragraph && <p>{Paragraph}</p>}
     </Container>
   );
 };

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

@@ -52,6 +52,11 @@ export const Container = styled.h2`
     font-weight: 400;
     font-size: 11px;
     line-height: 18px;
+
+    &:last-child {
+      min-width: 50px;
+      text-align: center;
+    }
   }
 
   &.gray-table-row {
@@ -63,12 +68,14 @@ export const Container = styled.h2`
     background-color: ${GlobalColors.s2};
     padding: 1px 3px;
     border-radius: 3px;
+    min-width: 50px;
+    text-align: center;
   }
-  &.header-and-paragraph{
+  &.header-and-paragraph {
     font-family: ${FontFamily.Raleway};
     font-size: 36px;
     color: ${GlobalColors.s5};
-    p{
+    p {
       font-family: ${FontFamily.AvenirNext};
       font-size: 14px;
       color: ${GlobalColors.s4};

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

@@ -0,0 +1,35 @@
+import { SelectCustom, Container, BackgroundEnd } from "./style";
+
+export default function Select(props) {
+  return (
+    <Container width={props.width}>
+      <SelectCustom
+        id={props.id}
+        width={props.width}
+        onChange={props.onChange}
+        defaultValue={props.valueSelected ? props.valueSelected : ""}
+      >
+        <option value="" disabled>
+          {props.placeholder}
+        </option>
+        {props.options &&
+          props.options.map((item, i) => (
+            <option
+              className={item.required ? "option-required" : ""}
+              //className={ ? "option-required" : ""}
+              key={"select-" + item.value ? item.value : item + "-" + i}
+              value={item.value ? item.value : item}
+              // selected={
+              //   item.value
+              //     ? item.value == props.valueSelected && "selected"
+              //     : item === props.valueSelected && "selected"
+              // }
+            >
+              {item.name ? item.name : item} {item?.required ? "*" : ""}
+            </option>
+          ))}
+      </SelectCustom>
+      <BackgroundEnd />
+    </Container>
+  );
+}

package/src/components/atoms/Select/style.js

@@ -0,0 +1,76 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  height: 21px;
+  line-height: 3;
+  width: ${({ width }) => width || "100%"};
+  overflow: hidden;
+  border-radius: 0.25em;
+  &::after {
+    border-left: 1px solid #e33aa9;
+    border-top: 1px solid #e33aa9;
+    width: 4px;
+    content: "";
+    height: 4px;
+    position: absolute;
+    right: 7px;
+    -webkit-transform: rotate(-135deg);
+    -ms-transform: rotate(-135deg);
+    transform: rotate(-135deg);
+    top: 35%;
+  }
+  &::before {
+    border-left: 1px solid #e33aa9;
+    width: 1px;
+    content: "";
+    height: 15px;
+    right: 15px;
+    position: absolute;
+    z-index: 2;
+  }
+`;
+
+export const BackgroundEnd = styled.div`
+  position: absolute;
+  left: calc(100% - 18px);
+  height: 100%;
+  width: 18px;
+  background-color: #fafafa;
+`;
+
+export const SelectCustom = styled.select`
+  background: #fafafa;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  outline: 0;
+  box-shadow: none;
+  border: 0 !important;
+  background-image: none;
+  width: ${({ width }) => width || "100%"};
+  cursor: pointer;
+  height: 21px;
+  font-family: Avenir Next;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 21px;
+  padding: 0 5px;
+  box-sizing: border-box;
+  &::-ms-expand {
+    display: none;
+  }
+  option {
+    &:disabled {
+      color: #d4d1d7;
+    }
+    &:invalid {
+      color: gray;
+    }
+  }
+`;

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

@@ -1,9 +1,37 @@
 import { Container } from "./styles";
 
 export const StatusTag = ({ statusType, ovalForm }) => {
+  const getShortStatus = (status) => {
+    switch (status) {
+      case "COMPLETED":
+        return "C";
+      case "RECEPTION":
+        return "Pr";
+      case "NULL":
+        return "-";
+      case "RECEIVED":
+        return "Rc";
+      case "IN_PROGRESS":
+        return "P";
+      case "ASSIGNED":
+        return "As";
+      case "APPROVED":
+        return "Ap";
+      case "VALIDATING":
+        return "V";
+      case "PAID_OUT":
+        return "Po";
+      default:
+        return status;
+    }
+  };
   return (
-    <Container className={`status-${statusType} ${ovalForm && "oval-form"}`}>
-      <p>{statusType}</p>
+    <Container
+      className={`status-${getShortStatus(statusType)} ${
+        ovalForm && "oval-form"
+      }`}
+    >
+      <p>{getShortStatus(statusType)}</p>
     </Container>
   );
 };