contentoh-components-library 21.4.72 → 21.4.74

package/src/components/molecules/GridItem/styles.js

@@ -1,104 +0,0 @@
-import styled from "styled-components";
-import { FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  width: 175px;
-  border: 1px solid #f0f0f0;
-  position: relative;
-  height: fit-content;
-
-  .chk-container {
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    z-index: 5;
-    height: 16px;
-  }
-
-  .data-body {
-    padding: 10px;
-    border-bottom: 1px solid #f0f0f0;
-
-    & > h3,
-    & > p {
-      color: #262626;
-      font-family: ${FontFamily.Lato};
-      font-size: 12px;
-      line-height: 16px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-
-      & + p {
-        margin-top: 5px;
-      }
-    }
-    p {
-      font-size: 10px;
-      line-height: 12px;
-      color: #808080;
-    }
-  }
-
-  .status-slider {
-    display: flex;
-    padding: 5px 10px;
-    overflow: auto;
-    border-bottom: 1px solid #f0f0f0;
-    flex-wrap: nowrap;
-
-    .status-element {
-      display: flex;
-
-      .srv-name {
-        background-color: #808080;
-        padding: 0 10px;
-        border-radius: 5px;
-        p {
-          font-family: ${FontFamily.AvenirNext};
-          font-size: 12px;
-          line-height: 20px;
-          font-weight: 700;
-          color: #fff;
-        }
-      }
-    }
-
-    * + * {
-      margin-left: 10px;
-    }
-  }
-
-  .cart-and-raiting,
-  .retailers-and-user {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 5px 10px;
-    .star-button {
-      button {
-        padding: 3px;
-        color: transparent;
-        -webkit-text-stroke: 1px #808080;
-      }
-    }
-  }
-
-  .retailers-and-user {
-    padding: 0;
-    > * {
-      flex: 1 0 50%;
-      display: flex;
-      padding: 5px;
-      height: 36px;
-    }
-    .retailers-container {
-      border-right: 1px solid #f0f0f0;
-    }
-  }
-
-  &:hover {
-    cursor: pointer;
-    box-shadow: 1px 2px 5px black;
-  }
-`;

package/src/components/molecules/HeaderItem/ColumnItem.js

@@ -1,9 +0,0 @@
-import { Column } from "./styles";
-
-export const ColumnItem = ({ name, flex, minWidth }) => {
-  return (
-    <Column flex={flex} minWidth={minWidth}>
-      {name}
-    </Column>
-  );
-};

package/src/components/molecules/HeaderItem/HeaderItem.stories.js

@@ -1,24 +0,0 @@
-import { HeaderItem } from ".";
-
-export default {
-  title: "Components/molecules/HeaderItem",
-  component: HeaderItem,
-};
-
-const Template = (args) => <HeaderItem {...args} />;
-export const HeaderItemDefault = Template.bind({});
-
-HeaderItemDefault.args = {
-  columnsArray: [
-    { name: "Reg", flex: 1, minWidth: 100 },
-    { name: "Orden", flex: 1, minWidth: 100 },
-    { name: "UPC", flex: 1, minWidth: 100 },
-    { name: "Nombre", flex: 1, minWidth: 100 },
-    { name: "Marca", flex: 1, minWidth: 100 },
-    { name: "Estatus", flex: 1, minWidth: 100 },
-    { name: "Cadenas", flex: 1, minWidth: 100 },
-    { name: "Prio", flex: 1, minWidth: 100 },
-    { name: "E.D", flex: 1, minWidth: 100 },
-    { name: "Cont.", flex: 1, minWidth: 100 },
-  ],
-};

package/src/components/molecules/HeaderItem/index.js

@@ -1,26 +0,0 @@
-import { Container } from "./styles";
-import { ColumnItem } from "./ColumnItem";
-import { CheckBox } from "../../atoms/CheckBox";
-
-export const HeaderItem = ({ columnsArray = [], checkAll, chkCheckedAll }) => {
-  return (
-    <Container>
-      <div className="chk-global-container">
-        <CheckBox
-          id={"chk-global"}
-          name={"chk-global"}
-          onChange={(e) => checkAll && checkAll(e)}
-          checked={chkCheckedAll && chkCheckedAll()}
-        />
-      </div>
-      {columnsArray.map((col, i) => (
-        <ColumnItem
-          key={i}
-          flex={col.flex}
-          name={col.name}
-          minWidth={col.minWidth}
-        />
-      ))}
-    </Container>
-  );
-};

package/src/components/molecules/HeaderItem/styles.js

@@ -1,27 +0,0 @@
-import styled from "styled-components";
-import { FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  background-color: #f0f0f0;
-  display: flex;
-  width: 100%;
-  min-width: fit-content;
-
-  .chk-global-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 30px;
-  }
-`;
-
-export const Column = styled.div`
-  flex: ${({ flex }) => (flex ? flex : 1)};
-  min-width: ${({ minWidth }) => (minWidth ? minWidth : 100)}px;
-  text-align: center;
-  color: #262626;
-  font-family: ${FontFamily.Lato};
-  font-size: 12px;
-  line-height: 16px;
-  padding: 10px 5px;
-`;

package/src/components/molecules/HeaderTopv2/HeaderTopv2.stories.js

@@ -1,10 +0,0 @@
-import { HeaderTopv2 } from "./index";
-
-export default {
-  title: "Components/molecules/HeaderTopv2",
-  component: HeaderTopv2,
-};
-
-const Template = (args) => <HeaderTopv2 {...args} />;
-
-export const ButtonChatDefault = Template.bind({});

package/src/components/molecules/HeaderTopv2/index.js

@@ -1,100 +0,0 @@
-import { Container } from "./styles";
-import { Button } from "../../atoms/GeneralButton/index";
-import { useEffect, useRef } from "react";
-import { Chat } from "../../organisms/Chat";
-import auditIcon from "../../../../src/assets/images/generalButton/Icono AB.svg";
-import { useState } from "react";
-import { render } from "@testing-library/react";
-import { ScreenHeaderv2 } from "../../atoms/ScreenHeaderv2";
-
-export const HeaderTopv2 = ({
-  setHeaderTop,
-  withChat,
-  chatType,
-  productSelected,
-  token,
-  auditableVersion,
-  setCompare,
-  isAuditor,
-  activeRetailer,
-}) => {
-  const HeaderTopv2 = useRef();
-  const [chat, setChat] = useState(null);
-  const [chatData, setChatData] = useState(null);
-
-  useEffect(() => {
-    if (activeRetailer.id && productSelected && token.length) {
-      setChatData({
-        id: productSelected?.article?.id_article || productSelected?.id_article,
-        version: productSelected?.version,
-        retailerId: activeRetailer?.id,
-        status: productSelected?.status,
-        userToken: token,
-      });
-    }
-  }, [activeRetailer, productSelected, token]);
-
-  useEffect(() => {
-    if (chatType) renderChat(chatType);
-  }, [chatData, chatType]);
-
-  useEffect(() => {
-    setHeaderTop && setHeaderTop(HeaderTopv2.current.clientHeight);
-  }, []);
-
-  const renderChat = (chatType) => {
-    switch (chatType) {
-      case "product_status":
-        chatData &&
-          setChat(
-            <Chat
-              chatType="product_status"
-              chatContainerType="popUp"
-              chatData={{
-                id: chatData?.id,
-                version: chatData?.version,
-                retailerId: chatData?.retailerId,
-                status: chatData?.status,
-                userToken: chatData?.userToken,
-              }}
-              size={18}
-              activeRetailer={activeRetailer}
-            />
-          );
-        break;
-      default:
-        setChat(
-          <Chat
-            chatType="merchant_product"
-            chatContainerType="popUp"
-            chatData={{
-              userToken: token,
-              id: productSelected.id_article,
-              version: productSelected.version,
-            }}
-            size={18}
-            activeRetailer={activeRetailer}
-          />
-        );
-        break;
-    }
-  };
-
-  return (
-    <Container ref={HeaderTopv2}>
-      <ScreenHeaderv2 text="Edición de producto" />
-      <div className="buttons-container">
-        {withChat && chat}
-        {isAuditor && auditableVersion && (
-          <Button
-            buttonType="general-white-button circular-button"
-            onClick={() => {
-              setCompare((current) => !current);
-            }}
-            image={auditIcon}
-          />
-        )}
-      </div>
-    </Container>
-  );
-};

package/src/components/molecules/HeaderTopv2/styles.js

@@ -1,33 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  display: flex;
-  justify-content: space-between;
-  .buttons-top {
-    display: flex;
-    align-items: center;
-    padding-top: 10px;
-  }
-
-  .buttons-container {
-    display: flex;
-
-    button {
-      width: 30px;
-      height: 30px;
-      border: 1px solid #f0f0f0;
-      background-size: 20px;
-      padding: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      img {
-        height: 15px;
-      }
-
-      & + * {
-        margin-left: 10px;
-      }
-    }
-  }
-`;

package/src/components/molecules/ImageSelectorv2/ImageSelectorv2.stories.js

@@ -1,46 +0,0 @@
-import { ImageSelectorv2 } from "./index";
-
-export default {
-  title: "Components/molecules/ImageSelectorv2",
-  component: ImageSelectorv2,
-  images: {},
-  argTypes: {
-    modalSelector: {
-      options: [true, false],
-      type: "boolean",
-    },
-  },
-};
-
-const Template = (args) => <ImageSelectorv2 {...args} />;
-
-export const ImageSelectorv2Default = Template.bind({});
-
-ImageSelectorv2Default.args = {
-  images: [
-    {
-      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
-      alt: "img",
-    },
-    {
-      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
-      alt: "img",
-    },
-    {
-      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
-      alt: "img",
-    },
-    {
-      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
-      alt: "img",
-    },
-    {
-      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
-      alt: "img",
-    },
-    {
-      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
-      alt: "img",
-    },
-  ],
-};

package/src/components/molecules/ImageSelectorv2/index.js

@@ -1,22 +0,0 @@
-import { Container } from "./styles";
-import { ProductImagev2 } from "../../atoms/ProductImagev2";
-
-export const ImageSelectorv2 = ({
-  images = [],
-  setActiveImage,
-  modalSelector,
-}) => {
-  return (
-    <Container className={modalSelector && "modal-image-selector"}>
-      {images?.values?.map((image, index) => (
-        <ProductImagev2
-          key={index}
-          img={image.src}
-          altText={image.altText}
-          imageType={modalSelector ? "catalogue-modal-image" : "carousel-image"}
-          onClick={() => setActiveImage(index)}
-        />
-      ))}
-    </Container>
-  );
-};

package/src/components/molecules/ImageSelectorv2/styles.js

@@ -1,15 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  width: 340px;
-  display: flex;
-  overflow: auto;
-  gap: 10px;
-
-  &.modal-image-selector {
-    width: 377px;
-    height: auto;
-    background: #ffff;
-    border-radius: 10px;
-  }
-`;

package/src/components/molecules/Phase/Phase.stories.js

@@ -1,37 +0,0 @@
-import { Phase } from "./index";
-import { GlobalStatus, GlobalColors } from "../../../global-files/variables";
-
-export default {
-  title: "Components/molecules/Phase",
-  component: Phase,
-  argTypes: {
-    statusType: {
-      options: Object.values(GlobalStatus),
-      control: { type: "select" },
-    },
-    percent: {
-      control: { type: "range", min: 0, max: 100, step: 1 },
-    },
-    backgroundColor: {
-      options: Object.keys(GlobalColors),
-      control: { type: "select" },
-    },
-    priority: {
-      options: ["no priority", "low", "medium", "high"],
-      control: { type: "select" },
-    },
-  },
-};
-
-const Template = (args) => <Phase {...args} />;
-
-export const PhaseDefault = Template.bind({});
-
-PhaseDefault.args = {
-  productName: "Nombre del producto",
-  statusType: "AP",
-  percent: 10,
-  backgroundColor: "s2",
-  priority: "no priority",
-  date: new Date().toLocaleDateString(),
-};

package/src/components/molecules/Phase/index.js

@@ -1,56 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Container, ContainerIcon } from "./styles";
-import Chip from "@mui/material/Chip";
-import { Button } from "@mui/material";
-import Select from "../../atoms/Select";
-
-export const Phase = ({ id, grupos, phases }) => {
-  const [selectedValue, setSelectedValue] = useState("");
-  const [chips, setChips] = useState([]);
-
-  const onAdd = () => {
-    if (selectedValue) {
-      setChips((prevChips) => [...prevChips, selectedValue]);
-      setSelectedValue("");
-    }
-  };
-  
-
-  return (
-    <Container>
-      <div className="header-phase">
-        <h2>Fase {id}</h2>
-        {id === 1 ? (
-          <p className="text-phase">Al rechazar en esta fase enviar a proveedor</p>
-        ) : (
-          <div className="phase-sel">
-            <p className="text-phase">Al rechazar en esta fase enviar a </p>
-            <Select
-              width="100px"
-              valueSelected={selectedValue}
-              placeholder={`Fase`}
-              options={Array.from({ length: phases.length }, (_, i) => ({
-                value: `${i + 1}`,
-                name: `Fase ${i + 1}`,
-              }))}
-              onChange={(e) => {
-                setSelectedValue(e.target.value);
-              }}
-            />
-          </div>
-        )}
-      </div>
-      <div className="attributes-container">
-        {grupos.map((grupo, index) => (
-          <Chip key={index} label={grupo} disabled={false} />
-        ))}
-        {/* FIXME: agregar funcionalidad del check */}
-        <Button onClick={onAdd} variant="outlined" className="button-circle">
-          <ContainerIcon>
-            <span className="iconos-out iconos-grises">add</span>
-          </ContainerIcon>
-        </Button>
-      </div>
-    </Container>
-  );
-};

package/src/components/molecules/Phase/styles.js

@@ -1,82 +0,0 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display: flex;
-  flex-direction:column;
-  gap:10px;
-  align-items: center;
-  border-radius:10px;
-  border:1px solid ${GlobalColors.gray_light};
-  padding:10px 15px;
-  font-family:${FontFamily.Roboto}, sans-serif;
-  font-size:17px;
-
- .header-phase{
-  display:flex;
-  justify-content: space-between;
-  width: 100%;
-  padding-bottom: 5px;
-  border-bottom: 1px solid ${GlobalColors.gray_light};
-
-  h2{
-    font-family:${FontFamily.Roboto}, sans-serif;
-    font-size:17px;
-  }
-  p{
-    font-family:${FontFamily.Roboto}, sans-serif;
-    font-size:12px;
-  }
- }
- .attributes-container{
-  display: flex;
-  align-self: flex-start;
-  flex-wrap: wrap;
-  gap: 10px;
- }
- .phase-sel{
-  display: flex;
-  align-items: center;
-  gap: 10px;
- }
- .button-circle{
-  width:30px;
-  height:30px;
-  padding:2px;
-  border-radius:100%;
-  min-width:30px;
-  border: 1px solid ${GlobalColors.magenta_s2};
-}
-.button-circle:hover {
-  border: 1px solid ${GlobalColors.magenta_s2};
-}
-.text-phase{
-  font-family:${FontFamily.Roboto}, sans-serif;
-  font-size:12px;
-  color:${GlobalColors.gray};
-}
-`;
-
-export const ContainerIcon = styled.div`
-cursor: pointer;
-@font-face {
-  font-family: "Material Symbols Outlined";
-  font-style: normal;
-  font-weight: 100 700;
-  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)
-    format("woff2");
-}
-.iconos-out {
-  font-family: "Material Symbols Outlined";
-  font-size: 20px;
-  //line-height: 1;
-  margin-top: 10px;
-}
-.iconos-out {
-  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
-  color:  #B64545;
-}
-.iconos-grises {
-  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
-  color:  ${GlobalColors.magenta_s2};
-}`;

package/src/components/molecules/ProductNameHeaderv2/ProductNameHeaderv2.stories.js

@@ -1,37 +0,0 @@
-import { ProductNameHeaderv2 } from "./index";
-import { GlobalStatus, GlobalColors } from "../../../global-files/variables";
-
-export default {
-  title: "Components/molecules/ProductNameHeaderv2",
-  component: ProductNameHeaderv2,
-  argTypes: {
-    statusType: {
-      options: Object.values(GlobalStatus),
-      control: { type: "select" },
-    },
-    percent: {
-      control: { type: "range", min: 0, max: 100, step: 1 },
-    },
-    backgroundColor: {
-      options: Object.keys(GlobalColors),
-      control: { type: "select" },
-    },
-    priority: {
-      options: ["no priority", "low", "medium", "high"],
-      control: { type: "select" },
-    },
-  },
-};
-
-const Template = (args) => <ProductNameHeaderv2 {...args} />;
-
-export const ProductNameHeaderv2Default = Template.bind({});
-
-ProductNameHeaderv2Default.args = {
-  productName: "Nombre del producto",
-  statusType: "AP",
-  percent: 10,
-  backgroundColor: "s2",
-  priority: "no priority",
-  date: new Date().toLocaleDateString(),
-};

package/src/components/molecules/ProductNameHeaderv2/index.js

@@ -1,12 +0,0 @@
-import { Container } from "./styles";
-import { ScreenHeaderv2 } from "../../atoms/ScreenHeaderv2";
-
-export const ProductNameHeaderv2 = ({
-  productName
-}) => {
-  return (
-    <Container>
-      <ScreenHeaderv2 headerType={"product-name-header"} text={productName} />
-    </Container>
-  );
-};

package/src/components/molecules/ProductNameHeaderv2/styles.js

@@ -1,10 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  display: flex;
-  align-items: center;
-
-  * + * {
-    margin-left: 10px;
-  }
-`;