contentoh-components-library 21.3.11 → 21.3.13

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

@@ -1,61 +0,0 @@
-import { Container } from "./styles";
-import React from "react";
-import { TextField } from "@mui/material";
-
-export const InputText = (props) => {
-  const {
-    id,
-    key,
-    className,
-    type, // gray | black => (default -> black)
-    transparent, // boolean
-    size, // number ... default (13)
-    borderType, // rectangle || circle || (cualquier otro valor -> no borde)
-    placeHolder, // (string) texto por defecto
-    multiline, // (boolean) true -> textarea  false -> 1 linea
-    maxRows, //	(number) maxima cantidad de rows visibles
-    minRows, // (number) cantidad de rows visibles minimos
-    //label, // (string) titulo del inputText
-    disabled, // (boolean) true -> bloqueado
-    text, // (string) texto del input
-    onChangeText, // (newText) => {}
-    onEnter, // (event) => {}
-    refInputText, // useRef()
-  } = props;
-
-  return (
-    <>
-      <Container
-        id={id}
-        key={key}
-        className={"container-inputText " + className}
-        borderType={borderType}
-        size={size}
-      >
-        <TextField
-          className={
-            "inputText " +
-            (["gray", "white", "black"].includes(type) ? type : "white") +
-            (transparent ? " transparent" : " fill")
-          }
-          multiline={multiline}
-          inputRef={refInputText}
-          disabled={disabled}
-          placeholder={placeHolder}
-          label={undefined}
-          minRows={minRows}
-          maxRows={maxRows}
-          variant="outlined"
-          value={text}
-          onChange={(event) => onChangeText && onChangeText(event.target.value)}
-          onKeyDown={(event) => {
-            if (event.key == "Enter" && !event.shiftKey) {
-              event.preventDefault();
-              onEnter && onEnter(event);
-            }
-          }}
-        />
-      </Container>
-    </>
-  );
-};

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

@@ -1,89 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  width: fit-content;
-  min-width: min-content;
-  //border: 1px solid red;
-
-  .inputText {
-    width: 100%;
-    height: 100%;
-
-    // container interno del input o textarea
-    > div {
-      min-width: 0px;
-      font-family: ${FontFamily.RobotoRegular}, sans-serif;
-      font-size: ${({ size }) => (size ? size : "13")}px;
-      text-align: left;
-      color: #a2a2a2;
-      padding: ${({ borderType }) => {
-        return ["rectangle", "oval"].includes(borderType?.toLowerCase())
-          ? "5px 10px"
-          : "0px";
-      }};
-      border-radius: ${({ borderType }) => {
-        return borderType?.toLowerCase() === "oval"
-          ? "17px"
-          : borderType?.toLowerCase() === "rectangle"
-          ? "6px"
-          : "0px";
-      }};
-
-      // input 1 linea
-      > input {
-        padding: 0px;
-      }
-
-      // borde
-      > fieldset {
-        border: ${({ borderType }) => {
-          return ["rectangle", "oval"].includes(borderType?.toLowerCase())
-            ? "1px solid black"
-            : "none";
-        }};
-        border-color: inherit;
-      }
-
-      &.Mui-focused {
-        > fieldset {
-          border-color: inherit;
-        }
-      }
-      &.Mui-disabled {
-        cursor: not-allowed;
-        * {
-          cursor: inherit;
-        }
-      }
-    }
-
-    &.fill {
-      &.gray > div {
-        background-color: #e8e5e5;
-        color: #262626;
-        border-color: #7b7979;
-      }
-      &.white > div {
-        background-color: white;
-        color: #e33aa9;
-        border-color: #e33aa9;
-      }
-    }
-
-    &.transparent {
-      > div {
-        background-color: transparent;
-      }
-
-      &.gray > div {
-        color: #a2a2a2;
-        border-color: #7b7979;
-      }
-      &.black > div {
-        color: #262626;
-        border-color: #7b7979;
-      }
-    }
-  }
-`;

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

@@ -1,19 +0,0 @@
-import { NotFound } from "./index";
-
-export default {
-  title: "Components/atoms/NotFound",
-  component: NotFound,
-  argTypes: {},
-};
-
-const Template = (args) => <NotFound {...args} />;
-
-export const NotFoundTest = Template.bind({});
-NotFoundTest.args = {
-  code: "501",
-  message: "No se pudo obtener los mensajes del chat",
-  details: "no se encontro la cadena asociada al producto",
-};
-
-export const NotFoundDefault = Template.bind({});
-NotFoundDefault.args = {};

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

@@ -1,52 +0,0 @@
-import { Container } from "./styles";
-import { ButtonV2 } from "../ButtonV2";
-import { Modal } from "../../organisms/Modal";
-import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
-import { faCircleInfo as iconInfo } from "@fortawesome/free-solid-svg-icons";
-import imgNotFountDefault from "../../../assets/images/defaultImages/notFound.svg";
-import { useState, useEffect } from "react";
-
-export const NotFound = (props) => {
-  const {
-    className, // string
-    code, // string
-    message, // string
-    details, // string
-  } = props;
-  const [showModal, setShowModal] = useState(false);
-
-  return (
-    <>
-      <Container className={className}>
-        <img src={imgNotFountDefault} alt={"imagen not found"} />
-
-        <div className="divInfo">
-          {/* icono info */}
-          <ButtonV2
-            className={"btnInfo"}
-            type={"pink"}
-            transparent
-            icon={iconInfo}
-            size={16}
-            onClick={() => {
-              setShowModal(true);
-            }}
-          />
-
-          <label className="label-error">
-            Codigo de error
-            <label> {code ? code : 404} </label>
-          </label>
-        </div>
-
-        <Modal
-          show={showModal}
-          title={message ? message : "Error NO especificado"}
-          message={details ? details : "Reporta esto a TI"}
-          icon={"info"}
-          onClickBtnDefault={(event) => setShowModal(false)}
-        />
-      </Container>
-    </>
-  );
-};

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

@@ -1,55 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  width: 100%;
-  height: 100%;
-  min-width: min-content;
-  min-height: min-content;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 6px;
-  padding: 20px 10px;
-  overflow: auto;
-  //border: 1px solid red;
-
-  img {
-    width: 80%;
-    min-width: 35px;
-    max-width: 480px;
-    max-height: 90%;
-    object-fit: contain;
-    //border: 1px solid blue;
-  }
-
-  .divInfo {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 7px;
-    align-items: center;
-
-    .btnInfo {
-      padding: 0px;
-    }
-
-    .label-error {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 3px;
-      font-family: ${FontFamily.RobotoRegular}, sans-serif;
-      font-size: 13px;
-      color: #262626;
-
-      label {
-        font-family: ${FontFamily.RobotoMedium}, sans-serif;
-        font-size: 15px;
-        color: #e33aa9;
-      }
-    }
-  }
-`;

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

@@ -1,26 +0,0 @@
-import { SelectItemV2 } from "./index";
-
-export default {
-  title: "Components/atoms/SelectItemV2",
-  component: SelectItemV2,
-  argTypes: {
-    checkbox: {
-      options: [undefined, true, false],
-      control: { type: "select" },
-    },
-  },
-};
-
-const Template = (args) => <SelectItemV2 {...args} />;
-
-export const SelectItemV2Test = Template.bind({});
-SelectItemV2Test.args = {
-  label: "Label del item",
-  value: 1,
-  checkbox: true,
-  selected: false,
-  onClick: (isSelected, value) => {
-    console.log("isSelected:", isSelected);
-    console.log("value:", value);
-  },
-};

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

@@ -1,61 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { Checkbox } from "@mui/material";
-import { Container, ContainerButton } from "./styles";
-import React from "react";
-import { isStringEmpty } from "../../../global-files/utils";
-import { faCheck as IconOK } from "@fortawesome/free-solid-svg-icons";
-
-export const SelectItemV2 = (props) => {
-  const {
-    id,
-    keyId,
-    className, // (string) clase del container
-    label, // (string) texto visible del item
-    value, // valor del item
-    checkbox /* (boolean)
-			true -> item con checkbox 
-			false -> item sin checkbox pero respeta el espacio del checkbox
-			undefined -> item sin checkbox
-		*/,
-    selected, // (boolean) item seleccionado??
-    onClick, // (isSelected , value) => {}
-  } = props;
-
-  return checkbox ? (
-    <Container
-      className={
-        "selectItemV2" +
-        (isStringEmpty(className) ? "" : " " + className) +
-        (!checkbox && selected ? " selectedItem" : "")
-      }
-      id={id}
-      key={keyId}
-      checkbox={checkbox}
-      onClick={(event) => onClick && onClick(!selected, value)}
-    >
-      {checkbox !== undefined && (
-        <Checkbox
-          className={"checkbox" + (checkbox ? "" : " hidden")}
-          checked={selected}
-        />
-      )}
-
-      <label className="label">{label}</label>
-    </Container>
-  ) : (
-    <ContainerButton
-      className={
-        "selectItemV2" +
-        (isStringEmpty(className) ? "" : " " + className) +
-        (selected ? " selectedItem" : "")
-      }
-      checkbox={checkbox === false}
-      type={"whiteS3"}
-      label={label}
-      icon={checkbox === false || selected ? IconOK : undefined}
-      onClick={(event) => {
-        onClick && onClick(!selected, value);
-      }}
-    />
-  );
-};

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

@@ -1,90 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-import { ButtonV2 } from "../ButtonV2";
-
-export const Container = styled.div`
-  width: fit-content;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  gap: 11px;
-  justify-content: flex-start;
-  align-items: center;
-  cursor: pointer;
-  padding: 8px;
-  transition: background 0.25s;
-  //border: 1px solid lightgray;
-
-  &:hover {
-    background-color: #f0f0f0;
-  }
-
-  .checkbox {
-    padding: 3px;
-
-    &.hidden {
-      visibility: hidden;
-    }
-
-    &.Mui-checked {
-      color: #808080;
-    }
-
-    .MuiSvgIcon-root {
-      font-size: 16px;
-    }
-  }
-
-  .label {
-    cursor: inherit;
-    font-family: ${FontFamily.RobotoRegular}, sans-serif;
-    font-size: 12px;
-    text-align: left;
-    color: #262626;
-    line-height: 1.25;
-    padding: ${({ checkbox }) => (checkbox === undefined ? "3" : "0")}px;
-  }
-
-  // para item sin checkbox seleccionado
-  &.selectedItem {
-    background-color: #8e8e8e;
-    .label {
-      font-family: ${FontFamily.RobotoMedium}, sans-serif;
-      color: white;
-    }
-  }
-`;
-
-export const ContainerButton = styled(ButtonV2)`
-  width: fit-content;
-  border: none;
-  border-radius: 0px;
-
-  .button {
-    font-family: ${FontFamily.RobotoRegular}, sans-serif;
-    font-size: 12px;
-    text-align: left;
-    line-height: 1.25;
-    padding: ${({ checkbox }) => (checkbox ? "8px" : "11px 8px")};
-    gap: 11px;
-    border: none;
-    letter-spacing: 0px;
-    .icon {
-      padding: 3px;
-      color: #808080 !important;
-      font-size: 16px;
-      visibility: hidden;
-    }
-  }
-
-  // para item sin checkbox seleccionado
-  &.selectedItem {
-    .button {
-      font-family: ${FontFamily.RobotoMedium}, sans-serif;
-      padding: 8px;
-      .icon {
-        visibility: visible;
-      }
-    }
-  }
-`;

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

@@ -1,51 +0,0 @@
-import { Tooltip } from "./index";
-
-export default {
-  title: "Components/atoms/Tooltip",
-  component: Tooltip,
-  argTypes: {
-    position: {
-      options: [
-        undefined,
-        "topStart",
-        "topEnd",
-        "topCenter",
-        "rightStart",
-        "rightEnd",
-        "rightCenter",
-        "bottomStart",
-        "bottomEnd",
-        "bottomCenter",
-        "leftStart",
-        "leftEnd",
-        "leftCenter",
-      ],
-      control: { type: "select" },
-    },
-    addArrow: {
-      options: [undefined, false, true],
-      control: { type: "select" },
-    },
-    transitionType: {
-      options: [undefined, "grow", "fade", "zoom"],
-      control: { type: "select" },
-    },
-    followCursor: {
-      options: [undefined, false, true],
-      control: { type: "select" },
-    },
-  },
-};
-
-const Template = (args) => <Tooltip {...args} />;
-
-export const TooltipDefault = Template.bind({});
-TooltipDefault.args = {
-  componentTooltip: <p> hola soy tooltip de prueba en storybook </p>,
-  children: <button> abrir tooltip </button>,
-  classNameTooltip: "container-tooltip",
-  position: undefined,
-  addArrow: undefined,
-  transitionType: undefined,
-  followCursor: undefined,
-};

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

@@ -1,59 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { Fade, Grow, Popper, Tooltip as TooltipMUI, Zoom } from "@mui/material";
-import { Container } from "./styles";
-import React from "react";
-
-export const Tooltip = (props) => {
-  const {
-    componentTooltip, // (jsx) componente que aparecera en el tooltip
-    children, // (jsx) componente interno que va dentro de la etiqueta <Tooltip>
-    className, // (string) clase del container trigger
-    classNameTooltip, // (string) clase del contenedor tooltip
-    position, // (string) posicion del contenedor tooltip (values en object positions)
-    addArrow, // (boolean) add flecha en la parte posterior del tooltip?
-    transitionType, // (string) -> 'grow' (default) | 'fade' | 'zoom'
-    followCursor, //  (boolean) true -> el tooltip se movera junto al cursor
-  } = props;
-  const positions = {
-    topStart: "top-start",
-    topEnd: "top-end",
-    topCenter: "top",
-
-    rightStart: "right-start",
-    rightEnd: "right-end",
-    rightCenter: "right",
-
-    bottomStart: "bottom-start",
-    bottomEnd: "bottom-end",
-    bottomCenter: "bottom",
-
-    leftStart: "left-start",
-    leftEnd: "left-end",
-    leftCenter: "left",
-  };
-
-  return (
-    <TooltipMUI
-      {...props}
-      placement={positions[position] ?? positions.topCenter}
-      arrow={addArrow || addArrow === undefined ? true : false}
-      componentsProps={{
-        tooltip: { className: classNameTooltip },
-        popper: { disablePortal: true },
-        transition: { timeout: 300 },
-      }}
-      TransitionComponent={
-        transitionType === "grow"
-          ? Grow
-          : transitionType === "fade"
-          ? Fade
-          : Zoom
-      }
-      enterDelay={300}
-      followCursor={followCursor ?? false}
-      title={componentTooltip}
-    >
-      <Container className={className}> {children} </Container>
-    </TooltipMUI>
-  );
-};

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

@@ -1,42 +0,0 @@
-import { FontFamily } from "../../../global-files/variables";
-import styled from "styled-components";
-
-export const Container = styled.div`
-  width: fit-content;
-  //margin: 100px 0px 0px 100px;	modo dev
-  //border: 1px solid red;	modo dev
-
-  + .MuiTooltip-popper {
-    background-color: transparent;
-
-    .MuiTooltip-tooltip {
-      --background: white;
-      box-shadow: 0px 0px 10px 1px gray;
-      background-color: var(--background);
-      padding: 10px;
-      border-radius: 7px;
-      max-width: 60vw;
-      font-family: ${FontFamily.RobotoMedium}, sans-serif;
-      font-size: 12px;
-      text-align: left;
-      color: #262626;
-
-      .MuiTooltip-arrow {
-        color: var(--background);
-      }
-    }
-
-    &[data-popper-placement*="bottom"] .MuiTooltip-tooltip {
-      margin-top: 10px;
-    }
-    &[data-popper-placement*="top"] .MuiTooltip-tooltip {
-      margin-bottom: 10px;
-    }
-    &[data-popper-placement*="left"] .MuiTooltip-tooltip {
-      margin-right: 10px;
-    }
-    &[data-popper-placement*="right"] .MuiTooltip-tooltip {
-      margin-left: 10px;
-    }
-  }
-`;

package/src/components/molecules/ButtonDownloadFile/DownloadFile.stories.js

@@ -1,54 +0,0 @@
-import { ButtonDownloadFile } from "./index";
-export default {
-  title: "Components/molecules/ButtonDownloadFile",
-  component: ButtonDownloadFile,
-  argTypes: {
-    type: {
-      options: [
-        undefined,
-        "white",
-        "whiteS2",
-        "pink",
-        "gray",
-        "purple",
-        "black",
-      ],
-      control: { type: "select" },
-    },
-    borderType: {
-      options: [undefined, "rectangle", "circle"],
-      control: { type: "select" },
-    },
-  },
-};
-
-const Template = (args) => <ButtonDownloadFile {...args} />;
-
-export const DownloadFileOk = Template.bind({});
-DownloadFileOk.args = {
-  type: undefined,
-  transparent: false,
-  borderType: undefined,
-  size: "70",
-  onDownload: (error) => {
-    error &&
-      alert("mensaje: " + error.message + "\nDetalles: " + error.details);
-  },
-  url: `https://content-management-images.s3.amazonaws.com/84300/1/chat/acuse RFC-8b2eb177-5bfc-4266-9b26-4e7297880594-9e2e5853-4697-442a-8ff7-3b7a1ede0856.pdf`,
-};
-
-export const DownloadFileError = Template.bind({});
-DownloadFileError.args = {
-  id: "",
-  key: "",
-  color: undefined,
-  background: undefined,
-  borderType: "circle",
-  size: "70",
-  width: "100px",
-  onDownload: (error) => {
-    error &&
-      alert("mensaje: " + error.message + "\nDetalles: " + error.details);
-  },
-  url: `https://content-management-images.s3.amazonaws.com/84300/1/chat/noExiste.pdf`,
-};