contentoh-components-library 21.2.73 → 21.2.74

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

@@ -1,278 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.button`
-  height: 34px;
-  width: 34px;
-  background-color: transparent;
-  border: 1px solid #f0f0f0;
-  border-radius: 50px;
-  padding: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  cursor: pointer;
-  &:hover {
-    background-color: #f0f0f0;
-  }
-  .icon-chat {
-    margin: 0;
-    width: 15px;
-    height: 15px;
-  }
-`;
-export const Slider = styled.div`
-  -webkit-box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.8);
-  box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.8);
-  z-index: 200;
-  width: 425px;
-  height: 600px;
-  border-radius: 10px;
-  background: white;
-  padding: 37px 16px 17px 20px;
-  position: absolute;
-  right: ${({ showMenu }) => (showMenu ? 2 : -50)}%;
-  top: 3%;
-  transition: right 2s ease 0;
-  .image {
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    background-color: #f7f7f7;
-    border-radius: 10px;
-    #myList {
-      list-style: none;
-      img {
-        width: 365px;
-        border-radius: 10px;
-      }
-    }
-  }
-  .close {
-    background-color: #e33aa9;
-    border: 3px solid white;
-    height: 35px;
-    width: 35px;
-    border-radius: 50%;
-    position: absolute;
-    top: -18px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-  }
-  .content-chat {
-    height: 495px;
-    max-height: 495px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    background-color: transparent;
-    font-family: sans-serif;
-    font-size: 12px;
-    & + * {
-      margin-top: 12px;
-    }
-    ::-webkit-scrollbar {
-      width: 0;
-    }
-    .cargar-mas {
-      border: none;
-      border-radius: 10px;
-      font: normal normal normal 11px/11px sans-serif;
-      letter-spacing: 0.1px;
-      color: #8a6caa;
-      background-color: #f7f7fc;
-      padding: 5px 17px;
-      margin: 0 35%;
-      display: flex;
-      cursor: pointer;
-      white-space: nowrap;
-      &:hover {
-        background-color: #f0f0f0;
-      }
-      img {
-        margin-right: 7px;
-        height: 13px;
-      }
-    }
-    #myListChat {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      height: 100%;
-      overflow-y: auto;
-      overflow-x: hidden;
-      display: flex;
-      flex-direction: column-reverse;
-      gap: 3px;
-      .group-date {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        hr {
-          width: 120px;
-          border: 0.3px solid #f0f0f0;
-        }
-        p {
-          margin: 0 10px;
-          color: #b3b3b3;
-        }
-      }
-      li {
-        width: 100%;
-        padding: 5px 0;
-        margin: 0;
-        display: flex;
-        flex-direction: row-reverse;
-        justify-content: flex-start;
-        flex-wrap: nowrap;
-        gap: 5px;
-        align-items: center;
-        .tooltip-userName {
-          background-color: #f0f0f0;
-          padding: 6px 10px;
-          color: #000000;
-          font-size: 11px;
-          margin-bottom: 6px;
-          .MuiTooltip-arrow {
-            color: #f0f0f0;
-          }
-        }
-
-        .profile {
-          display: grid;
-          place-items: center;
-          align-self: start;
-          width: 34px;
-          height: 34px;
-          border-radius: 50%;
-          overflow: hidden;
-          img {
-            width: 100%;
-            height: 100%;
-            border-radius: inherit;
-          }
-        }
-        .img-file {
-          margin: 0 10px;
-          width: 165px;
-          img {
-            width: 100%;
-            object-fit: contain;
-            border-radius: 10px;
-          }
-        }
-        .body-message {
-          margin: 0 10px;
-          border-radius: 10px;
-          box-sizing: border-box;
-          background-color: #f0f0f0;
-          padding: 10px 10px 10px 12px;
-          max-width: 280px;
-          p {
-            color: #262626;
-            margin: 0;
-            padding: 0;
-          }
-          a {
-            text-decoration: none;
-          }
-          div {
-            cursor: pointer;
-            background-color: white;
-            border-radius: 10px;
-            padding: 7px 10px;
-            display: flex;
-            align-items: center;
-            img {
-              height: 20px;
-              width: 20px;
-              margin-right: 5px;
-            }
-            p {
-              color: #262626 !important;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              overflow: hidden;
-            }
-          }
-        }
-        .date {
-          display: flex;
-          align-items: center;
-          white-space: nowrap;
-          p {
-            color: #d9d9d9;
-            font-size: 9px;
-          }
-        }
-        &.own-message {
-          flex-direction: row;
-          justify-content: flex-start;
-          .body-message {
-            background-color: #8386ee;
-            p {
-              margin: 0;
-              padding: 0;
-              color: #ffffff;
-            }
-          }
-        }
-      }
-    }
-  }
-  .input-chat {
-    display: flex;
-    align-items: center;
-    border-radius: 17px;
-    background-color: #f7f7f7;
-    padding: 10px 7px 10px 15px;
-    .send-message {
-      background-color: transparent;
-      width: 157%;
-      border: none;
-      font-family: sans-serif;
-      font-size: 13px;
-      line-height: initial;
-      color: #242424;
-      ::placeholder {
-        font: normal normal medium 12px/14px sans-serif;
-        letter-spacing: 0.6px;
-        color: #b3b3b3;
-      }
-      :focus {
-        outline: none;
-      }
-      & + * {
-        margin-left: 10px;
-      }
-    }
-    .upload {
-      border: none;
-      background: transparent;
-      cursor: pointer;
-      & + * {
-        margin-left: 7px;
-      }
-    }
-    .add-picture-input {
-      display: none;
-    }
-    .send {
-      width: 35.4px;
-      height: 20px;
-      border: none;
-      background-color: #e33aa9;
-      border-radius: 50%;
-      display: flex;
-      justify-content: center;
-      cursor: pointer;
-      align-items: center;
-      img {
-        width: 11px;
-        height: 11px;
-      }
-    }
-  }
-`;

package/src/components/atoms/ChatPopUp/utils/handlersChat.js

@@ -1,104 +0,0 @@
-
-import axios from "axios";
-
-
-export const getBD = (
-	id_article, 
-	version_article, 
-	get_type, 
-	item_date ,
-	tokenUser
-) => {
-    return new Promise(async (response, error) => {
-      try {
-        let URL = `https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/products-chat`; // endpoint
-        URL += `?id_article=${id_article}`;
-        URL += `&version_article=${version_article}`;
-        URL += `&get_type=${get_type}`;
-        URL += `&item_date=${item_date}`;
-
-        const respHTTPjson = await axios.get(URL, {
-          headers: {
-            // AQUI COLOCAR EL TOKEN DEL USUARIO CONECTADO
-            Authorization: tokenUser,
-          },
-        });
-        //console.log( "respHTTPjson" , respHTTPjson )
-        // verificar si existe un error en la peticion realizada
-        if (respHTTPjson.status != 200) {
-          response({
-            message: "No fue posible llevar a cabo la operacion",
-            errorDetails: respHTTPjson.statusText,
-          });
-          return;
-        }
-        // obtener body backend
-        const body = JSON.parse(respHTTPjson.data.body);
-        //console.log( "resHTTP body:" , body );
-        // verificar si existe error desde el backend
-        if (respHTTPjson.data.statusCode != 200) {
-          response({
-            message: body.message,
-            errorDetails: body.errorDetail,
-          });
-          return;
-        }
-        // cuando se ejecuto bien el create ... tomar un posible message
-        response({ body });
-      } catch (err) {
-        //console.log("error catch get items chat" , err);
-        response({
-          message: "Algo salio mal al obtener los items del chat",
-          errorDetails: err.message,
-        });
-      }
-    });
-  };
-
-
-export const createItemBD = (
-	id_article, 
-	version_article, 
-	value_type, 
-	value ,
-	tokenUser
-) => {
-    return new Promise(async (response, error) => {
-      try {
-        const URL = `https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/products-chat`;
-        const bodyData = {
-          id_article: id_article,
-          version_article: version_article,
-          value_type: value_type,
-          value: value,
-        };
-
-        const respHTTPjson = await axios.post(URL, bodyData, {
-          headers: {
-            Authorization: tokenUser,
-          },
-        });
-        if (respHTTPjson.status != 200) {
-          response({
-            message: "No fue posible llevar a cabo la operacion",
-            errorDetails: respHTTPjson.statusText,
-          });
-          return;
-        }
-        const body = JSON.parse(respHTTPjson.data.body);
-        if (respHTTPjson.data.statusCode != 200) {
-          response({
-            message: body.message,
-            errorDetails: body.errorDetail,
-          });
-          return;
-        }
-        response({ body: true });
-      } catch (err) {
-        response({
-          message: "Algo salio mal al agregar el item en el chat",
-          errorDetails: err.message,
-        });
-      }
-    });
-  };

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

@@ -1,15 +0,0 @@
-import { CustomTooltip } from "./index";
-
-export default {
-  title: "Components/atoms/CustomTooltip",
-  component: CustomTooltip
-};
-
-const Template = (args) => <CustomTooltip {...args} />;
-
-export const TooltipDefault = Template.bind({});
-TooltipDefault.args = {
-	componentTooltip: (<p> hola soy tooltip </p>) ,
-	children: (<button> abrir tooltip </button>) ,
-	className: "container-tooltip"
-};

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

@@ -1,35 +0,0 @@
-import { useEffect, useState } from "react";
-import { Tooltip } from "@mui/material";
-import { Container } from "./styles";
-import React from "react";
-
-export const CustomTooltip = ({
-	componentTooltip ,
-	children ,
-	className ,
-	...props
-}) => {
-
-	const MyComponent = React.forwardRef(function MyComponent(props, ref) {
-		return (
-		  <div {...props} ref={ref}>
-			Bin
-		  </div>
-		);
-	  });
-  
-  return (
-  <Tooltip
-	{...props}
-	arrow
-	placement="top"
-	componentsProps={{
-		tooltip: {className: className} ,
-		popper: {disablePortal: true}
-	}}
-	title={ componentTooltip }
-  >
-	{children}
-  </Tooltip>
-  )
-};

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

@@ -1,5 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-	border: 1px solid red;
-`;