contentoh-components-library 21.4.122 → 21.4.124

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

@@ -1,50 +0,0 @@
-import { Container } from "./styles";
-import { GridItem } from "../../molecules/GridItem";
-import { HeaderItem } from "../../molecules/HeaderItem";
-import { RowItem } from "../../molecules/RowItem";
-
-export const GridProducts = ({
-  products = [],
-  columnsArray = [],
-  gridView = true,
-  chkOnChange,
-  selected = [],
-  chkChecked,
-  checkAll,
-  chkCheckedAll,
-  onGridClick,
-}) => {
-  return (
-    <Container>
-      {!gridView ? (
-        products?.map(({ gridElement, product, id }, i) => (
-          <GridItem
-            key={i}
-            id={id}
-            index={i}
-            product={product}
-            gridElement={gridElement}
-            chkOnChange={chkOnChange}
-            onGridClick={onGridClick}
-            selected={selected}
-            chkChecked={chkChecked}
-          />
-        ))
-      ) : (
-        <div className="table-view">
-          <HeaderItem
-            columnsArray={columnsArray}
-            checkAll={checkAll}
-            chkCheckedAll={chkCheckedAll}
-          />
-          <RowItem
-            productsArray={products}
-            chkOnChange={chkOnChange}
-            onGridClick={onGridClick}
-            chkChecked={chkChecked}
-          />
-        </div>
-      )}
-    </Container>
-  );
-};

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

@@ -1,14 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  height: calc(100% - 100px);
-  overflow: auto;
-
-  .table-view {
-    height: 100%;
-    width: 100%;
-  }
-`;

package/src/components/organisms/GridProducts/utils.js

@@ -1,111 +0,0 @@
-import { RetailerCatalog } from "../../atoms/RetailerCatalog";
-import { UserCatalog } from "../../atoms/UserCatalog";
-
-export const getProductsToTable = (
-  products = [],
-  textSpecialists,
-  imagesSpecialists,
-  auditors,
-  images,
-  onAssign
-) => {
-  const productsTableArray = [];
-
-  products.forEach((product) => {
-    const { article, orderId, upc, status, version } = product;
-    const id = article?.id_article + "-" + orderId;
-    const imgArray = images[article?.id_article + "-" + version];
-    const element = {
-      id,
-      cols: [
-        { name: article?.country || "-", flex: 1, minWidth: 100 },
-        { name: orderId || "-", flex: 1, minWidth: 100 },
-        { name: upc || "-", flex: 1, minWidth: 100 },
-        { name: article?.name || "-", flex: 1, minWidth: 200 },
-        { name: "S/M" || "-", flex: 1, minWidth: 100 },
-        { name: status || "-", flex: 1, minWidth: 100 },
-        {
-          name: (
-            <RetailerCatalog
-              id={"retailers-" + id}
-              article={product}
-              retailers={product.retailers}
-            />
-          ),
-          flex: 1,
-          minWidth: 100,
-        },
-        { name: product.prio, flex: 1, minWidth: 100 },
-        {
-          name: (
-            <UserCatalog
-              datasheet={article.id_datasheet_especialist}
-              description={article.id_description_especialist}
-              images={article.id_images_especialist}
-              auditor={article.id_auditor}
-              textSpecialists={textSpecialists}
-              imagesSpecialists={imagesSpecialists}
-              auditors={auditors}
-              id={"users-" + id}
-              product={product}
-              onAssign={onAssign}
-            />
-          ),
-          flex: 1,
-          minWidth: 100,
-        },
-        { name: "Cont.", flex: 1, minWidth: 100 },
-      ],
-      gridElement: {
-        images: imgArray,
-        info: [
-          { title: "name", value: article?.name || "-" },
-          { title: "order", value: orderId || "-" },
-          { title: "category", value: article?.category || "-" },
-          { title: "company", value: article?.company_name || "-" },
-          { title: "price", value: article?.price || "-" },
-        ],
-        status: [
-          { title: "datasheet", value: product?.datasheet_status, percent: 80 },
-          {
-            title: "description",
-            value: product?.description_status,
-            percent: 80,
-          },
-          { title: "images", value: product?.images_status, percent: 80 },
-        ],
-        catalogs: {
-          leftSide: (
-            <RetailerCatalog
-              id={"retailers-" + id}
-              limit={2}
-              article={product}
-              retailers={product.retailers}
-            />
-          ),
-          rightSide: (
-            <UserCatalog
-              datasheet={article.id_datasheet_especialist}
-              description={article.id_description_especialist}
-              images={article.id_images_especialist}
-              auditor={article.id_auditor}
-              textSpecialists={textSpecialists}
-              imagesSpecialists={imagesSpecialists}
-              auditors={auditors}
-              id={"users-" + id}
-              product={product}
-              onAssign={onAssign}
-            />
-          ),
-        },
-      },
-      showBottom: true,
-      product,
-      article,
-    };
-
-    productsTableArray.push(element);
-  });
-
-  return productsTableArray;
-};

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

@@ -1,24 +0,0 @@
-import { ImageDataTablev2 } from "./index";
-
-export default {
-  title: "Components/organisms/ImageDataTablev2",
-  component: ImageDataTablev2,
-};
-
-const Template = (args) => <ImageDataTablev2 {...args} />;
-
-export const ImageDataTablev2Default = Template.bind({});
-ImageDataTablev2Default.args = {
-  headerInfo: {
-    src: "https://www.thestar.com/content/dam/thestar/columnist_logos/francis_angelyn_logo2020.jpg",
-    name: "Hero.jpg",
-    status: "AA",
-  },
-  imageData: [
-    { feature: "Tipo de imagen", value: "Tipo de imagen" },
-    { feature: "Identificador", value: "F26" },
-    { feature: "Formato", value: "jpg" },
-    { feature: "Resolución", value: "300dpi" },
-    { feature: "Tamaño de imagen", value: "1000x10000" },
-  ],
-};

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

@@ -1,124 +0,0 @@
-import { Container } from "./styles";
-import { TableHeader } from "../../molecules/TableHeader";
-import { Container as Row } from "../../molecules/TableRow/styles";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-import LabelToInput from "../../atoms/LabelToInput";
-
-export const ImageDataTablev2 = ({
-  activeImage,
-  darkMode,
-  lists,
-  retailerSelected,
-  setImages,
-  assignationsImages,
-  imagesStatus,
-  setAssignation,
-  isRetailer,
-  onClickSave,
-  showSaveButton,
-  version,
-  setShowVersionSelector,
-  shotThd,
-}) => {
-  return (
-    <Container darkMode={darkMode}>
-      <TableHeader
-        imagesStatus={imagesStatus}
-        activeImage={activeImage}
-        assignationsImages={assignationsImages}
-        setAssignation={setAssignation}
-        isRetailer={isRetailer}
-        showSaveButton={showSaveButton}
-        onClickSave={onClickSave}
-        version={version}
-        setShowVersionSelector={setShowVersionSelector}
-      />
-      <Row>
-        <ScreenHeader headerType={"table-row-text"} text="Tipo de toma" />
-        <ScreenHeader
-          headerType={"table-row-text gray-table-row"}
-          text={
-            lists?.inputs?.find((f) => f.id === +activeImage?.image_id)?.name ||
-            "-"
-          }
-        />
-      </Row>
-      <Row>
-        <ScreenHeader headerType={"table-row-text"} text="Tipo de empaque" />
-        <ScreenHeader
-          headerType={"table-row-text gray-table-row"}
-          text={
-            lists?.imagePackagingType?.find(
-              (f) => f.id === +activeImage?.packing_type
-            )?.name || "-"
-          }
-        />
-      </Row>
-      <Row>
-        <ScreenHeader headerType={"table-row-text"} text="Tipo de imagen" />
-        <ScreenHeader
-          headerType={"table-row-text gray-table-row"}
-          text={
-            lists?.imageType?.find((f) => f.id === +activeImage?.image_type)
-              ?.name || "-"
-          }
-        />
-      </Row>
-      {shotThd && (
-        <Row>
-          <ScreenHeader
-            headerType={"table-row-text"}
-            text="Tipo de imagen THD"
-          />
-          <ScreenHeader
-            headerType={"table-row-text gray-table-row"}
-            text={
-              lists?.imageShotType?.find(
-                (f) => f.id === +activeImage?.image_shot_type
-              )?.type_shot || "-"
-            }
-          />
-        </Row>
-      )}
-      <Row>
-        <ScreenHeader headerType={"table-row-text"} text="Formato" />
-        <ScreenHeader
-          headerType={"table-row-text"}
-          text={activeImage?.ext || "-"}
-        />
-      </Row>
-      <Row>
-        <ScreenHeader headerType={"table-row-text"} text="Tamaño de imagen" />
-        <ScreenHeader
-          headerType={"table-row-text"}
-          text={
-            activeImage?.width && activeImage.height
-              ? `${activeImage?.width}x${activeImage?.height}px`
-              : "-"
-          }
-        />
-      </Row>
-      {retailerSelected &&
-        lists?.attrForImgs &&
-        lists?.attrForImgs?.general?.map((attr, index) => (
-          <Row key={"row-" + index + "-" + attr?.name}>
-            <ScreenHeader
-              headerType={"table-row-text"}
-              text={attr?.name || "-"}
-            />
-            <LabelToInput
-              width="100px"
-              defaultValue={attr?.value}
-              onChange={(e) => {
-                setImages({
-                  action: "changeAttrValue",
-                  value: e.target.value || "-",
-                  id: attr.id,
-                });
-              }}
-            />
-          </Row>
-        ))}
-    </Container>
-  );
-};

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

@@ -1,18 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  width: 377px;
-  padding: 10px;
-  border: 1px solid ${GlobalColors.s2};
-  border-radius: 10px;
-  background-color:${GlobalColors.white};
-
-  .input-name-header,
-  .table-row-text {
-    color: ${({ darkMode }) => darkMode && GlobalColors.s1};
-  }
-  .gray-table-row {
-    background-color: ${({ darkMode }) => darkMode && GlobalColors.white};
-  }
-`;

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

@@ -1,38 +0,0 @@
-import { ImagePreviewer } from "./index";
-
-export default {
-  title: "Components/organisms/ImagePreviewer",
-  component: ImagePreviewer,
-};
-
-const Template = (args) => <ImagePreviewer {...args} />;
-
-export const ImagePreviewerDefault = Template.bind({});
-ImagePreviewerDefault.args = {
-  imagesArray: [
-    {
-      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
-      alt: "img",
-    },
-    {
-      img: "https://www.muycomputer.com/wp-content/uploads/2020/12/google.png",
-      alt: "img",
-    },
-    {
-      img: "https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Teaser/bildergalerie-online-t.jpg",
-      alt: "img",
-    },
-    {
-      img: "https://i.pinimg.com/originals/d0/b9/28/d0b928df15d3a3bf1905865a8fedb257.jpg",
-      alt: "img",
-    },
-    {
-      img: "https://memegenerator.net/img/images/72798198.jpg",
-      alt: "img",
-    },
-    {
-      img: "http://www.dumpaday.com/wp-content/uploads/2016/02/funny-pictures-621.jpg",
-      alt: "img",
-    },
-  ],
-};

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

@@ -1,22 +0,0 @@
-import { Container } from "./styles";
-import { ImageSelectorv2 } from "../../molecules/ImageSelectorv2";
-import { EditionActiveImagev2 } from "../../molecules/EditionActiveImagev2";
-
-export const ImagePreviewerv2 = ({
-  imagesArray = [],
-  activeImage,
-  setActiveImage,
-  setShowModal,
-  showSelector = true
-}) => {
-  return (
-    <Container>
-      <EditionActiveImagev2
-        img={activeImage?.src}
-        altText={activeImage?.name}
-        setShowModal={setShowModal}
-      />
-      {showSelector && <ImageSelectorv2 images={imagesArray} setActiveImage={setActiveImage} />}
-    </Container>
-  );
-};

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

@@ -1,7 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  & + * {
-    margin-top: 10px;
-  }
-`;

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

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

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

@@ -1,62 +0,0 @@
-import React, { useState } from "react";
-import { useDropzone } from "react-dropzone";
-import { ImageUploaderContainer } from "./styles";
-import uploadFile from "../../../assets/images/Icons/upload_file.svg";
-
-const ImageUploader = ({ handleNewImage }) => {
-  const [image, setImage] = useState(null);
-
-  const onDrop = (acceptedFiles) => {
-    if (acceptedFiles.length === 1) {
-      showImage(acceptedFiles[0]);
-    }
-  };
-
-  const showImage = (file) => {
-    const reader = new FileReader();
-    reader.onload = () => {
-      setImage(reader.result);
-      getImageDimensions(reader.result);
-    };
-    reader.readAsDataURL(file);
-  };
-
-  const getImageDimensions = (dataURL) => {
-    const img = new Image();
-    img.onload = () => {
-      const image = {
-        src: dataURL,
-        ext: img.src.includes("image/jpeg") ? "jpg" : "png",
-        width: img.width,
-        height: img.height,
-      };
-      handleNewImage(image);
-    };
-    img.src = dataURL;
-  };
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
-
-  return (
-    <ImageUploaderContainer {...getRootProps()}>
-      <input {...getInputProps()} />
-      {image ? (
-        <img className="imageLoaded" src={image} alt="Imagen Cargada" />
-      ) : (
-        <>
-          <img src={uploadFile} alt="Subir imágen" />
-          {isDragActive ? (
-            <p>Suelta la imagen aquí</p>
-          ) : (
-            <div>
-              <p>Da clic aquí o arrastra la foto para subirla a Content-oh!</p>
-              <span>Tamaño de imagen recomendando 3000x3000 pixeles</span>
-            </div>
-          )}
-        </>
-      )}
-    </ImageUploaderContainer>
-  );
-};
-
-export default ImageUploader;

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

@@ -1,29 +0,0 @@
-import styled from "styled-components";
-
-export const ImageUploaderContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  color: var(--magenta-main, #e33aa9);
-  text-align: center;
-  font-family: Roboto;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  padding: 49px 32px;
-  & > div {
-    & > p {
-      margin-bottom: 10px;
-    }
-    & > span {
-      color: var(--grey-medium, #cbcbcb);
-      font-size: 10px;
-      font-weight: 400;
-    }
-  }
-`;

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

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

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

@@ -1,143 +0,0 @@
-import { useState, useEffect } from "react";
-import ReactImageFallback from "react-image-fallback";
-import { ImageContainer, ImageView } from "./styles.js";
-import ImageUploader from "../ImageUploader";
-import { getImageURL } from "../../../global-files/utils.js";
-import defaultProductImage from "../../../assets/images/defaultImages/defaultProductImage.png";
-import fullscreen from "../../../assets/images/Icons/fullscreen.svg";
-import close from "../../../assets/images/Icons/close.svg";
-import uploadFile from "../../../assets/images/Icons/upload-file.svg";
-import deleteForever from "../../../assets/images/Icons/delete-forever-white.svg";
-
-export const ImageVisor = ({
-  value,
-  name,
-  setModalFromTable,
-  setDataServices,
-  setModal,
-  ...props
-}) => {
-  const [smallSrc, setSmallSrc] = useState("");
-  function handleNewImage(imageFile) {
-    const payload = { ...props, ...imageFile };
-    setDataServices({ type: "updateImage", payload });
-  }
-
-  function handleUpdateImage(file) {
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = () => {
-        getImageDimensions(reader.result);
-      };
-      reader.readAsDataURL(file);
-    }
-  }
-
-  const getImageDimensions = (dataURL) => {
-    const img = new Image();
-    img.onload = () => {
-      const image = {
-        src: dataURL,
-        ext: img.src.includes("image/jpeg") ? "jpg" : "png",
-        width: img.width,
-        height: img.height,
-      };
-      handleNewImage(image);
-      changeVisor();
-    };
-    img.src = dataURL;
-  };
-
-  function changeVisor(view) {
-    if (!view) {
-      setModalFromTable(null);
-      return;
-    }
-    const isSmall = view === "small";
-    let src = isSmall
-      ? smallSrc
-      : `${process.env.REACT_APP_IMAGES_ENDPOINT}/${value?.src}`;
-    setModalFromTable(
-      <ImageView visorView={view}>
-        <div className="header">
-          <p>{name}</p>
-          <div className="buttons">
-            {isSmall ? (
-              <>
-                {value?.src ? (
-                  <img
-                    src={fullscreen}
-                    alt="Ver en pantalla completa"
-                    onClick={() => changeVisor("fullscreen")}
-                  />
-                ) : null}
-                <img src={close} alt="Cerrar" onClick={() => changeVisor()} />
-              </>
-            ) : (
-              <>
-                <label className="borderCircle" htmlFor="fileInput">
-                  <img src={uploadFile} alt="Actualizar imagen" />
-                  <input
-                    type="file"
-                    id="fileInput"
-                    accept="image/png, image/jpeg"
-                    style={{ display: "none" }}
-                    onChange={(e) => handleUpdateImage(e.target.files[0])}
-                  />
-                </label>
-                <img
-                  className="borderCircle"
-                  src={deleteForever}
-                  alt="Eliminar imágen"
-                  onClick={() => {
-                    setModal({
-                      type: "delete",
-                      functions: { setModal, setDataServices },
-                      payload: props,
-                    });
-                    changeVisor();
-                  }}
-                />
-                <img
-                  className="borderCircle"
-                  src={close}
-                  alt="Cerrar"
-                  onClick={() => changeVisor("small")}
-                />
-              </>
-            )}
-          </div>
-        </div>
-        <div className="body">
-          <ReactImageFallback
-            className="imageLoaded"
-            src={src}
-            fallbackImage={<ImageUploader handleNewImage={handleNewImage} />}
-            alt={name ?? "Imagen del producto"}
-          />
-        </div>
-      </ImageView>
-    );
-  }
-
-  useEffect(() => {
-    let src = value?.src?.includes("image/")
-      ? value?.src
-      : getImageURL(process.env.REACT_APP_IMAGES_BUCKET, value?.src, 250, 250);
-    setSmallSrc(src);
-  }, [value]);
-
-  return (
-    <>
-      <ImageContainer onClick={() => changeVisor("small")}>
-        <ReactImageFallback
-          src={smallSrc}
-          fallbackImage={defaultProductImage}
-          alt={name ?? "Imagen del producto"}
-        />
-      </ImageContainer>
-    </>
-  );
-};
-
-export default ImageVisor;