contentoh-components-library 21.4.22 → 21.4.24

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/PanelLayout/PanelLayout.stories.js

@@ -1,63 +0,0 @@
-import styled from "styled-components";
-import { ButtonV2 } from "../../atoms/ButtonV2";
-import { PanelLayout } from "./index";
-
-const TwoColumns = styled.div`
-  display: grid;
-  width: 100%;
-  grid-auto-rows: 1fr;
-  grid-template-columns: 85% 15%;
-  grid-template-rows: 100%;
-  gap: 0px 10px;
-  grid-template-areas: "first second";
-  .first {
-    grid-area: first;
-    width: 100%;
-    margin-left: 50px;
-    display: flex;
-  }
-  .second {
-    grid-area: second;
-    width: 100%;
-  }
-`;
-
-export default {
-  title: "Components/organisms/PanelLayout",
-  component: PanelLayout,
-};
-
-const Template = (args) => <PanelLayout {...args} />;
-
-export const PanelLayoutDefault = Template.bind({});
-PanelLayoutDefault.args = {
-  header: (
-    <TwoColumns>
-      <div className="first">Productos</div>
-      <div className="second">Precio</div>
-    </TwoColumns>
-  ),
-  children: (
-    <>
-      <TwoColumns>
-        <div className="first">Nombre de producto 1</div>
-        <div className="second">Precio de producto 1</div>
-      </TwoColumns>
-      <TwoColumns>
-        <div className="first">Nombre de producto 1</div>
-        <div className="second">Precio de producto 1</div>
-      </TwoColumns>
-    </>
-  ),
-  footer: (
-    <TwoColumns>
-      <div className="first">
-        <ButtonV2 id="1" label="Seleccionar todos" type="pink" />
-        <ButtonV2 id="2" label="Manual" />
-      </div>
-      <div className="second">
-        <ButtonV2 id="3" label="Siguiente" type="pink" />
-      </div>
-    </TwoColumns>
-  ),
-};

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

@@ -1,11 +0,0 @@
-import { Container, Header, Body, Footer } from "./styles";
-
-export const PanelLayout = ({ header, children, footer, className }) => {
-  return (
-    <Container className={className}>
-      {header ? <Header>{header}</Header> : null}
-      <Body>{children}</Body>
-      {footer ? <Footer>{footer}</Footer> : null}
-    </Container>
-  );
-};

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

@@ -1,39 +0,0 @@
-import styled from "styled-components";
-import { FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display: grid;
-  grid-auto-rows: 1fr;
-  grid-template-columns: 1fr;
-  grid-template-rows: 34px 1fr 100%;
-  gap: 0px 0px;
-  grid-template-areas:
-    "header"
-    "body"
-    "footer";
-  font-family: ${FontFamily.RobotoMedium}, sans-serif;
-  font-size: 12px;
-`;
-
-export const Header = styled.div`
-  grid-area: header;
-  background: #8a6caa;
-  color: #ffffff;
-  border-radius: 5px 5px 0px 0px;
-  display: flex;
-  align-items: center;
-`;
-
-export const Body = styled.div`
-  grid-area: body;
-  border-left: 1px solid #f0f0f0;
-  border-right: 1px solid #f0f0f0;
-`;
-
-export const Footer = styled.div`
-  grid-area: footer;
-  display: flex;
-  align-items: center;
-  border: 1px solid #f0f0f0;
-  border-radius: 0 0 5px 5px;
-`;

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

@@ -1,23 +0,0 @@
-import { SideModal } from ".";
-import { ButtonV2 } from "../../atoms/ButtonV2";
-
-export default {
-  title: "Components/organisms/SideModal",
-  component: SideModal,
-};
-
-const Template = (args) => <SideModal {...args} />;
-
-export const DefaultSideModal = Template.bind({});
-DefaultSideModal.args = {
-  show: false,
-  header: [
-    <div className="title-container">
-      <h2></h2>
-    </div>,
-    <ButtonV2 label="Ir al Checkout" />,
-    <ButtonV2 label="X" />,
-  ],
-  body: <></>,
-  footer: <></>,
-};

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

@@ -1,50 +0,0 @@
-import { useRef } from "react";
-import { Container } from "./styles";
-import { useEffect } from "react";
-import { PropaneSharp } from "@mui/icons-material";
-
-export const SideModal = ({
-  header,
-  body,
-  footer,
-  show,
-  setShow,
-  id = "side-modal",
-}) => {
-  const modal = useRef();
-
-  const closeModal = (e) => {
-    if (!e.target.closest(`#${id}`) && show) {
-      document.removeEventListener("click", closeModal, false);
-      modal?.current?.classList?.remove("shown");
-      setShow && setShow(false);
-    }
-  };
-
-  useEffect(() => {
-    if (show && modal.current) {
-      document.addEventListener("click", closeModal, false);
-      modal?.current?.classList?.add("shown");
-    }
-  }, [show]);
-
-  useEffect(() => {
-    return () => {
-      document.removeEventListener("click", closeModal, false);
-      modal?.current?.classList?.remove("shown");
-      setShow && setShow(false);
-    };
-  }, []);
-
-  return (
-    show && (
-      <Container>
-        <div id={id} ref={modal} className="modal-container">
-          <div className="modal-header">{header}</div>
-          <div className="modal-body">{body}</div>
-          <div className="modal-footer">{footer}</div>
-        </div>
-      </Container>
-    )
-  );
-};

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

@@ -1,30 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  z-index: 9999999;
-  background-color: transparent;
-  top: 0;
-  left: 0;
-
-  .modal-container {
-    width: 600px;
-    height: 100%;
-    position: absolute;
-    right: -600px;
-    background-color: #fff;
-    display: flex;
-    flex-direction: column;
-    box-shadow: -0.5px 0px 5px #f0f0f0;
-    border: 1px solid #f0f0f0;
-    .modal-body {
-      flex: 1;
-    }
-
-    &.shown {
-      right: 0;
-    }
-  }
-`;