contentoh-components-library 21.5.1 → 21.5.3

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" },
-        ],
-      },
-    ],
-  },
-};

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

@@ -1,105 +0,0 @@
-import { Container } from "./styles";
-import { useState, useEffect } from "react";
-import { ValidationPanel } from "../../atoms/ValidationPanel";
-import { Button } from "../../atoms/GeneralButton/index";
-import { ProductImagev2 } from "../../atoms/ProductImagev2";
-import { ImageSelectorv2 } from "../../molecules/ImageSelectorv2";
-import { ImageDataTablev2 } from "../ImageDataTablev2";
-
-export const ProductImageModalv2 = ({
-  images = [],
-  headerInfo,
-  validation,
-  setShowModal,
-  sendToFacilitator,
-  approveRejectButtons = false,
-}) => {
-  const [activeImage, setActiveImage] = useState(0);
-  const [buttonType, setButtonType] = useState(
-    validation ? validation : "null-button"
-  );
-  const [showValidationPanel, setShowValidationPanel] = useState(false);
-
-  const closeValidationPanel = (e) => {
-    if (
-      !e.target.closest("#validation-panel") ||
-      (e.target.closest(".validation-option") && showValidationPanel)
-    ) {
-      document.removeEventListener("click", closeValidationPanel, false);
-      setShowValidationPanel(false);
-    }
-  };
-
-  useEffect(() => {
-    if (showValidationPanel) {
-      document.addEventListener("click", closeValidationPanel, false);
-    }
-  }, [showValidationPanel]);
-
-  return (
-    <Container>
-      <div className="modal-container">
-        <div className="modal-image-container">
-          <ProductImagev2
-            img={
-              "https://" +
-              process.env.REACT_APP_IMAGES_BUCKET +
-              ".s3.amazonaws.com/" +
-              images?.values[activeImage]?.srcDB
-            }
-            altText={images?.values[activeImage]?.name}
-            imageType={"expanded-modal-image"}
-          />
-        </div>
-        <div className="modal-data-container">
-          <div className="validation-and-table-container">
-            <div className="validation-panel">
-              {/* {approveRejectButtons && (
-                <Button
-                  buttonType={`circular-button ${buttonType}`}
-                  onClick={() => setShowValidationPanel(true)}
-                />
-              )} */}
-              <Button
-                buttonType="general-white-button close-button-white"
-                onClick={() => {
-                  setShowModal(false);
-                }}
-              />
-
-        {/* <Button
-          buttonType="general-white-button close-buttonv2"
-          onClick={() => {
-            window.location.href = `/products`;
-          }}
-        /> */}
-
-              {/* {showValidationPanel && (
-                <ValidationPanel
-                  id="validation-panel"
-                  setOptionClicked={setButtonType}
-                  setShowValidationPanel={setShowValidationPanel}
-                  approve={() => sendToFacilitator && sendToFacilitator("A")}
-                  reject={() => sendToFacilitator && sendToFacilitator("R")}
-                />
-              )} */}
-            </div>
-
-            <ImageDataTablev2
-              imageData={images?.values[activeImage]?.data}
-              headerInfo={headerInfo}
-              activeImage={images?.values[activeImage]}
-              darkMode={true}
-              lists={images}
-            />
-          </div>
-          <ImageSelectorv2
-            images={images}
-            setActiveImage={setActiveImage}
-            modalSelector={true}
-          />
-        </div>
-      </div>
-    </Container>
-  );
-};

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

@@ -1,71 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  width: 100%;
-  overflow: auto;
-  position: fixed;
-  background-color: rgba(59, 59, 59, 0.53);
-  backdrop-filter: blur(4px);
-  left: 0;
-  top: 0;
-  z-index: 100;
-
-  .modal-container {
-    display: flex;
-    border-radius: 4px;
-    overflow: hidden;
-
-    .modal-data-container {
-      display: flex;
-      flex-direction: column;
-      gap: 25px;
-      align-items: center;
-      padding: 15px;
-      min-width: 375px;
-      
-      h2 {
-        color: ${GlobalColors.gray};
-      }
-
-      .validation-and-table-container {
-        .validation-panel {
-          width: 100%;
-          height: 44px;
-          background-color: rgba(38,38,38,0.3);
-          padding: 0 10px;
-          position: absolute;
-          top:0;
-          right:0;
-          display: flex;
-          justify-content: flex-end;
-          align-items: center;
-          .circular-button {
-            & + * {
-              margin-left: 10px;
-            }
-          }
-
-          button{
-            width: 24px;
-            height: 24px;
-            border: 1px solid #f0f0f0;
-            background-size: 12px;
-            padding: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          }
-
-          // & + * {
-          //   margin-top: 25px;
-          // }
-        }
-      }
-    }
-  }
-`;

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

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

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

@@ -1,30 +0,0 @@
-import { InputImages } from "../../atoms/InputImages";
-import { NumberMandatory } from "../../atoms/NumberMandatory";
-import { InputGroupv2 } from "../InputGroupv2";
-import { Container } from "./styles";
-
-export const RenameImagesBar = ({
-  description,
-  number,
-}) => {
- 
-  return (
-    <Container>
-      <InputImages
-      required={true}
-      description_small={"Descripción del campo."}
-        placeHolder={"UPC"}
-        ></InputImages>
-      <InputImages
-       required={false}
-       description_small={"Descripción del campo."}
-        placeHolder={"Modelo"}
-        ></InputImages>
-        <InputImages
-         required={true}
-         description_small={"Descripción del campo."}
-        placeHolder={"Item"}
-        ></InputImages>
-    </Container>
-);
-}  

package/src/components/organisms/RenameImagesBar/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;
-`;