contentoh-components-library 0.1.1 → 6.0.0

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

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

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

@@ -0,0 +1,9 @@
+import { Container } from "./styles";
+
+export const Card = ({ cardIcon, altText }) => {
+  return (
+    <Container>
+      <img src={cardIcon} alt={altText} />
+    </Container>
+  );
+};

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

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+img {
+    width: 100%;
+    margin:auto;
+}
+`;

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

@@ -2,7 +2,7 @@ import { Container } from "./styles";
 
 export const CheckBox = ({ id, label, onChange, isFilter }) => {
   return (
-    <Container>
+    <Container key={`check-${id}`}>
       <input type="checkbox" name={id} id={id} onChange={onChange} />
       <label htmlFor={id}>
         {label && <p className={isFilter && "filter-text"}>{label}</p>}

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

@@ -0,0 +1,9 @@
+import { Container } from "./styles";
+
+export const Commentary = ({ comment }) => {
+  return (
+    <Container>
+      <p>{comment}</p>
+    </Container>
+  );
+};

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

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 500px;
+  height: 80px;
+  border: 1px solid ${GlobalColors.s2};
+  padding: 10px;
+  p {
+    font-family: ${FontFamily.AvenirNext};
+    font-size: 12px;
+    line-height: 15px;
+    color: ${GlobalColors.s4};
+  }
+`;

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

@@ -4,7 +4,7 @@ import Proveedor from "../../../assets/images/providerAndCadena/Proveedor.svg";
 
 export const CustomerTypeImages = ({ imageType = "retailer" }) => {
   return (
-    <Container imageType={imageType}>
+    <Container imageType={imageType} key={`image-${imageType}`}>
       <img
         src={imageType === "retailer" ? Cadena : Proveedor}
         alt={imageType === "retailer" ? "Cadena" : "Proveedor"}

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

@@ -0,0 +1,13 @@
+import { EditField } from "./index";
+
+export default {
+  title: "Components/atoms/EditField",
+  component: EditField,
+};
+
+const Template = (args) => <EditField {...args} />;
+export const EditFieldDefault = Template.bind({});
+
+EditFieldDefault.args = {
+  placeHolder: "Text to edit",
+};

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

@@ -0,0 +1,15 @@
+import { Container } from "./styles";
+import editField from "../../../assets/images/editField/editField.svg";
+
+export const EditField = ({ placeHolder, value }) => {
+  return (
+    <Container>
+      <input type="text" placeHolder={placeHolder} value={value} />
+      <div className="button-container">
+        <button>
+          <img src={editField} alt="save changes icon" />
+        </button>
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 100%;
+  input {
+    background-color: ${GlobalColors.s2};
+    height: 32px;
+    width: 100%;
+    border: 2px solid ${GlobalColors.s3};
+    border-bottom: none;
+    font-size: 15px;
+    font-family: ${FontFamily.Lato};
+    color: ${GlobalColors.s4};
+    font-weight: normal;
+    line-height: 18px;
+    padding-left: 5px;
+    color: ${GlobalColors.s4};
+  }
+  .button-container {
+    background-color: ${GlobalColors.magenta_s2};
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    padding: 3px;
+    button {
+      height: 20px;
+      width: 20px;
+      border: none;
+      background-color: ${GlobalColors.white};
+      padding: 0%;
+      cursor: pointer;
+    }
+  }
+`;

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

@@ -13,11 +13,14 @@ export default {
         "general-white-button",
         "general-purple-button",
         "general-transparent-button",
+        "general-arrow-button",
         "open-modal-button",
         "close-button",
         "circular-button accept-button",
         "circular-button reject-button",
         "circular-button null-button",
+        "circular-button save-button",
+        "circular-button delete-button",
         "grid-layout",
         "row-layout",
       ],

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

@@ -9,7 +9,13 @@ export const Button = ({
   onClick,
 }) => {
   return (
-    <Container className={buttonType} buttonFont={buttonFont} onClick={onClick}>
+    <Container
+      className={buttonType}
+      buttonFont={buttonFont}
+      onClick={onClick}
+      key={`button-${buttonType}`}
+      disabled={buttonType === "general-button-disabled"}
+    >
       {buttonType.includes("general") && label}
       {image && <img src={image} alt={altText} />}
     </Container>

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

@@ -7,6 +7,11 @@ import openModalIcon from "../../../assets/images/generalButton/openModal.svg";
 import closeIcon from "../../../assets/images/generalButton/closeIcon.svg";
 import rowsLayout from "../../../assets/images/generalButton/rowLayout.svg";
 import gridLayout from "../../../assets/images/generalButton/gridLayout.svg";
+import arrowIcon from "../../../assets/images/arrow/arrowIcon.svg";
+import saveIcon from "../../../assets/images/generalButton/saveIcon.svg";
+import saveIconHover from "../../../assets/images/generalButton/saveIconHover.svg";
+import deleteIcon from "../../../assets/images/generalButton/deleteIcon.svg";
+import deleteIconHover from "../../../assets/images/generalButton/deleteIconHover.svg";
 import { GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.button`
@@ -37,7 +42,7 @@ export const Container = styled.button`
   }
   &.general-white-button {
     background-color: ${GlobalColors.s1};
-    color: ${GlobalColors.original_purpura}
+    color: ${GlobalColors.original_purpura};
   }
 
   &.general-green-button {
@@ -51,18 +56,51 @@ export const Container = styled.button`
     background-color: transparent;
     background-repeat: no-repeat;
     background-position: center;
-  }
+    &.accept-button {
+      background-image: url(${acceptIcon});
+    }
 
-  &.accept-button {
-    background-image: url(${acceptIcon});
-  }
+    &.reject-button {
+      background-image: url(${rejectIcon});
+    }
+
+    &.null-button {
+      background-image: url(${nullIcon});
+    }
+
+    &.save-button {
+      background-image: url(${saveIcon});
+      border: 1px solid ${GlobalColors.s3};
+      border-radius: 15px;
+
+      &:hover {
+        background-image: url(${saveIconHover});
+        background-color: ${GlobalColors.magenta_s2};
+        border: 1px solid ${GlobalColors.magenta_s2};
+      }
+    }
+
+    &.delete-button {
+      background-image: url(${deleteIcon});
+      border: 1px solid ${GlobalColors.s3};
+      border-radius: 15px;
+      background-size: 15px;
 
-  &.reject-button {
-    background-image: url(${rejectIcon});
+      &:hover {
+        background-image: url(${deleteIconHover});
+        background-color: ${GlobalColors.magenta_s2};
+        border: 1px solid ${GlobalColors.magenta_s2};
+      }
+    }
   }
 
-  &.null-button {
-    background-image: url(${nullIcon});
+  &.general-arrow-button {
+    background-image: url(${arrowIcon});
+    width: 27px;
+    height: 27px;
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: center;
   }
 
   &.close-button {
@@ -107,4 +145,13 @@ export const Container = styled.button`
   &.row-layout {
     background-image: url(${gridLayout});
   }
+
+  &.general-button-disabled {
+    background-color: grey;
+    color: ${GlobalColors.white};
+
+    &:hover {
+      opacity: 1;
+    }
+  }
 `;

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

@@ -1,4 +1,7 @@
-import { useState } from "react";
+import { isValid } from "js-base64";
+import { number } from "prop-types";
+import { useEffect, useState } from "react";
+import { version } from "styled-components";
 import { Container } from "./styles";
 
 export const GeneralInput = ({
@@ -8,34 +11,84 @@ export const GeneralInput = ({
   inputRows,
   inputName,
   inputValue,
+  articleId,
+  isRequired,
+  version,
   inputPlaceholder,
+  updatedDescriptions,
+  setUpdatedDescriptions,
+  updatedDatasheets,
+  setUpdatedDatasheets,
+  index,
+  dinamicHeight,
 }) => {
-  const [textValue, setTextValue] = useState({ value: inputValue });
+  const [textValue, setTextValue] = useState({
+    value: inputValue ? inputValue : "",
+  });
 
   const onHandleChange = (e) => {
     setTextValue(({ value }) => (value = e.target.value));
+    addTextAreaToArray(e.target.value, updatedDatasheets, setUpdatedDatasheets);
+  };
+
+  const onHandleTextAreaChange = (e) => {
+    setTextValue(({ value }) => (value = e.target.value));
+    addTextAreaToArray(
+      e.target.value,
+      updatedDescriptions,
+      setUpdatedDescriptions
+    );
+  };
+
+  useEffect(() => {
+    if (dinamicHeight) {
+      const input = document.querySelector(
+        `textarea#description-${inputId}-${index}`
+      );
+      if (input) {
+        input.style.cssText = "height:" + input.scrollHeight + "px";
+      }
+    }
+  }, [textValue]);
+
+  const addTextAreaToArray = (textValue, array, setArray) => {
+    const tempDescriptions = array;
+    const newArticle = {
+      articleId: articleId,
+      attributeId: inputId,
+      value: textValue,
+      versionId: version,
+    };
+    const isOnArray = tempDescriptions.some((desc, index) => {
+      if (desc.attributeId === newArticle.attributeId) {
+        tempDescriptions[index] = newArticle;
+        return true;
+      }
+    });
+    !isOnArray && tempDescriptions.push(newArticle);
+    setArray(tempDescriptions);
   };
 
   return (
-    <Container>
-      {inputType === "text" ? (
+    <Container isRequired={isRequired && !textValue}>
+      {inputType !== "textarea" ? (
         <input
-          type="text"
-          id={inputId}
+          type={inputType}
+          id={"datasheet-" + inputId + "-" + index}
           className="general-input"
           placeholder={inputPlaceholder}
-          value={textValue.value}
+          value={textValue?.value}
           onChange={onHandleChange}
         />
       ) : (
         <textarea
           name={inputName}
-          id={inputId}
+          id={"description-" + inputId + "-" + index}
           cols={inputCols}
           rows={inputRows}
           placeholder={inputPlaceholder}
           value={textValue.value}
-          onChange={onHandleChange}
+          onChange={onHandleTextAreaChange}
         ></textarea>
       )}
     </Container>

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

@@ -7,7 +7,8 @@ export const Container = styled.div`
   input,
   textarea {
     width: 100%;
-    border: 1px solid ${GlobalColors.s2};
+    border: 1px solid
+      ${({ isRequired }) => (isRequired ? "red" : `${GlobalColors.s2}`)};
     font-family: ${FontFamily.AvenirNext};
     color: ${GlobalColors.s4};
     font-weight: normal;
@@ -16,6 +17,7 @@ export const Container = styled.div`
     padding: 10px;
     outline: none;
     border-radius: 2px;
+    resize: none;
 
     &:focus {
       border: 1px solid ${GlobalColors.magenta_s2};

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

@@ -1,9 +1,10 @@
 import { Container } from "./styles";
 
-export const GeneralTextBox = ({  number, name, onClick, className }) => {
-    return (<Container className={className} onClick={onClick}>
-            <p className="number-text">{number}</p>
-            <p className="name-text">{name}</p>
+export const GeneralTextBox = ({ number, name, onClick, className }) => {
+  return (
+    <Container className={className} onClick={onClick}>
+        <p className="number-text">{number}</p>
+        <p className="name-text">{name}</p>
     </Container>
-    );
-};
+  );
+};

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

@@ -8,7 +8,7 @@ export const Container = styled.button`
     border-radius: 10px;
     flex-direction: column;
     align-items: center;
-    padding: 20px;
+    padding: 15px;
     background-color: transparent;
     .number-text{
         color: ${GlobalColors.original_purpura}; 

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

@@ -0,0 +1,140 @@
+import { GenericModal } from "./index";
+import { ScreenHeader } from "../ScreenHeader/index";
+import { LoadImageMenu } from "../LoadImageMenu/index";
+import { Button } from "../GeneralButton/index";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import GenericModalWarning from "../../../assets/images/genericModal/genericModalWarning.svg";
+import GenericModalCheck from "../../../assets/images/genericModal/genericModalCheck.svg";
+
+export default {
+  title: "Components/atoms/GenericModal",
+  component: GenericModal,
+};
+
+const Template = (args) => <GenericModal {...args} />;
+
+export const GenericModalDefault = Template.bind({});
+GenericModalDefault.args = {
+  componentsArray: [
+    <img key="1" src={GenericModalWarning} alt="Warning icon"></img>,
+    <ScreenHeader
+      fontFamily={FontFamily.Raleway_500}
+      headerType={"with-bold-text"}
+      color={GlobalColors.white}
+      text={"¿Estás seguro que quieres "}
+      boldText={"cerrar sesión?"}
+      key="2"
+    />,
+    <Button key="3" buttonType={"general-white-button"} label={"Cancelar"} />,
+    <Button
+      buttonType={"general-button-default"}
+      label={"Cerrar Sesión"}
+      key="4"
+    />,
+  ],
+  buttonType: "log-out",
+};
+
+export const DeleteProductDefault = Template.bind({});
+DeleteProductDefault.args = {
+  componentsArray: [
+    <img key="1" src={GenericModalWarning} alt="Warning icon"></img>,
+    <ScreenHeader
+      fontFamily={FontFamily.Raleway_500}
+      headerType={"product-name-header"}
+      color={GlobalColors.white}
+      text={"¿Estás seguro de eliminar estos productos?"}
+      key="2"
+    />,
+    <ScreenHeader
+      fontFamily={FontFamily.Raleway_500}
+      headerType={"retailer-name-header"}
+      color={GlobalColors.white}
+      text={"No podrás recuperar la información eliminada"}
+      key="3"
+    />,
+    <Button buttonType={"general-white-button"} label={"Cancelar"} key="4" />,
+    <Button
+      buttonType={"general-button-default"}
+      label={"Confirmar"}
+      key="5"
+    />,
+  ],
+  buttonType: "delete-product",
+};
+
+export const ProductEditionDefault = Template.bind({});
+ProductEditionDefault.args = {
+  componentsArray: [
+    <ScreenHeader
+      fontFamily={FontFamily.Raleway_500}
+      headerType={"product-name-header"}
+      color={GlobalColors.white}
+      text={"¿Deseas salir de edicion de producto múltiple?"}
+      key="1"
+    />,
+    <Button buttonType={"general-white-button"} label={"Salir"} key="2" />,
+    <Button buttonType={"general-button-default"} label={"Regresar"} key="3" />,
+  ],
+  buttonType: "product-edition",
+};
+
+export const SendInvitationDefault = Template.bind({});
+SendInvitationDefault.args = {
+  componentsArray: [
+    <img key="1" src={GenericModalCheck} alt="Check icon"></img>,
+    <p key="2">
+      <span> Fichas técnicas validadas con éxito</span>, Completa los productos
+      para poder exportar.
+    </p>,
+  ],
+  buttonType: "send-invitation",
+};
+
+export const UploadImageDefault = Template.bind({});
+UploadImageDefault.args = {
+  componentsArray: [
+    <img
+      key="1"
+      className="check"
+      src={GenericModalCheck}
+      alt="Check icon"
+    ></img>,
+    <ScreenHeader
+      fontFamily={FontFamily.Raleway_500}
+      headerType={"product-name-header"}
+      color={GlobalColors.white}
+      text={"Imagen cargada con éxito,"}
+      key="2"
+    />,
+    <ScreenHeader
+      fontFamily={FontFamily.AvenirNext}
+      headerType={"input-name-header"}
+      color={GlobalColors.white}
+      text={"Por favor elige el tipo de empaque e imagen."}
+      key="3"
+    />,
+    <LoadImageMenu
+      tipo={"Tipo de empaque "}
+      product={"Producto expuesto"}
+      content={[
+        { label: "Enbalaje adicional - 0" },
+        { label: "En paquete - 1" },
+        { label: "Producto expuesto - 2" },
+        { label: "Embalaje multiforme - 3" },
+        { label: "Si no es una imagen / no corresponde - X" },
+      ]}
+      id={"menu-packaging-type"}
+      key="4"
+    />,
+    <LoadImageMenu
+      tipo={"Tipo de imagen "}
+      product={"Render"}
+      content={[{ label: "fotografía del producto" }]}
+      id={"menu-image-type"}
+      key="5"
+    />,
+    <Button key="6" buttonType={"general-button-default"} label={"Guardar"} />,
+  ],
+  buttonType: "upload-image",
+};

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

@@ -0,0 +1,12 @@
+import { Container } from "./styles";
+
+export const GenericModal = ({ componentsArray = [], buttonType }) => {
+  return (
+    <Container>
+      <div className={"global-styles " + buttonType}>
+        <button className="close-button" />
+        {componentsArray?.map((component) => component)}
+      </div>
+    </Container>
+  );
+};