contentoh-components-library 21.2.97 → 21.2.99

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

@@ -1,195 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  width: fit-content;
-  padding: 0px;
-  cursor: ${({ disabled, isLoading }) =>
-    disabled || isLoading ? "not-allowed" : "pointer"};
-  border-radius: ${({ label, borderType, transparent }) => {
-    return borderType?.toLowerCase() === "rectangle"
-      ? "6px"
-      : borderType?.toLowerCase() === "oval"
-      ? "17px"
-      : borderType?.toLowerCase() === "circle"
-      ? "50%"
-      : transparent
-      ? "6px"
-      : label && label?.trim() !== ""
-      ? "17px"
-      : "6px"; // default rectangle
-  }};
-  border: none;
-
-  .button {
-    --size: ${({ size }) => (size ? size : "13")}px;
-    width: 100%;
-    min-width: min-content;
-    cursor: inherit;
-    display: flex;
-    flex-direction: ${({ iconPosition }) =>
-      iconPosition === "start" ? "row" : "row-reverse"};
-    gap: 7px;
-    align-items: center;
-    justify-content: center;
-    padding: ${({ label, borderType }) => {
-      return label && label?.trim() !== ""
-        ? "5px 15px" // button con label
-        : "5px";
-    }};
-    border-radius: inherit;
-    border: ${({ label, borderType, transparent }) => {
-      return ["rectangle", "circle", "oval"].includes(borderType?.toLowerCase())
-        ? "1px solid black"
-        : transparent
-        ? "none"
-        : label && label?.trim() !== ""
-        ? "1px solid black" // button con label
-        : "none"; // button icon sin borde
-    }};
-    font-family: ${FontFamily.RobotoMedium}, sans-serif;
-    font-size: var(--size);
-    line-height: 1.2;
-    text-transform: none;
-
-    // tipos de botones fill
-    &.fill {
-      &.white {
-        background-color: white;
-        color: #e33aa9;
-        border-color: #e33aa9;
-        &:hover {
-          background-color: #f4f4f4;
-        }
-      }
-      &.whiteS2 {
-        background-color: white;
-        color: #7b7979;
-        border-color: #f0f0f0;
-        &:hover {
-          background-color: #f4f4f4;
-        }
-      }
-      &.whiteS3 {
-        background-color: white;
-        color: #262626;
-        border-color: #f0f0f0;
-        &:hover {
-          background-color: #f4f4f4;
-        }
-      }
-      &.pink {
-        background-color: #e33aa9;
-        color: white;
-        border-color: #e33aa9;
-        &:hover {
-          background-color: #b42983;
-        }
-      }
-      &.gray {
-        background-color: #e8e5e5;
-        color: #262626;
-        border-color: #7b7979;
-        .icon,
-        .iconLoading {
-          color: #7b7979;
-        }
-        &:hover {
-          background-color: #d6d3d3;
-        }
-      }
-      &.purple {
-        background-color: #f7f7fc;
-        color: #8a6caa;
-        border-color: #8a6caa;
-        &:hover {
-          background-color: #e0e0f1;
-        }
-      }
-    }
-
-    // tipos de botones transparent
-    &.transparent {
-      &:hover {
-        background-color: transparent;
-      }
-      &.white {
-        color: white;
-        border-color: #e33aa9;
-        &:hover {
-          color: #d6d4d4;
-        }
-      }
-      &.pink {
-        color: #e33aa9;
-        border-color: #e33aa9;
-        &:hover {
-          color: #b42983;
-        }
-      }
-      &.gray {
-        color: #262626;
-        border-color: #7b7979;
-        .icon,
-        .iconLoading {
-          color: #7b7979;
-          transition: inherit;
-        }
-        &:hover {
-          color: #7b7979;
-          .icon,
-          .iconLoading {
-            color: #bdbbbb;
-          }
-        }
-      }
-      &.purple {
-        color: #8a6caa;
-        border-color: #8a6caa;
-        &:hover {
-          color: #714f95;
-        }
-      }
-      &.black {
-        color: #262626;
-        border-color: #262626;
-        &:hover {
-          color: #7b7979;
-        }
-      }
-    }
-
-    .icon,
-    .iconLoading {
-      display: grid;
-      place-items: center;
-      color: inherit;
-      font-size: ${({ label }) => {
-        return label && label?.trim() !== ""
-          ? "calc(var(--size) + 3px)" // button with label
-          : "var(--size)"; // button icon
-      }};
-    }
-    .iconLoading {
-      font-size: ${({ icon }) => !icon && "var(--size)"};
-    }
-
-    // mismo estilo desabilitado para cualquier tipo de boton
-    &:disabled {
-      background-color: #fcebf7 !important;
-      color: #7b7979 !important;
-      border-color: #7b7979 !important;
-
-      .icon {
-        color: #9e9c9c !important;
-      }
-      .iconLoading {
-        color: #9e2674 !important;
-      }
-
-      &:hover {
-        background-color: #fcebf7 !important;
-      }
-    }
-  }
-`;

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

@@ -1,36 +0,0 @@
-import { CustomIcon } from "./index";
-import { faCamera as iconCamera } from "@fortawesome/free-solid-svg-icons";
-
-export default {
-  title: "Components/atoms/CustomIcon",
-  component: CustomIcon,
-  argTypes: {
-    type: {
-      options: [
-        undefined,
-        "white",
-        "whiteS2",
-        "pink",
-        "gray",
-        "purple",
-        "black",
-      ],
-      control: { type: "select" },
-    },
-    borderType: {
-      options: [undefined, "rectangle", "circle"],
-      control: { type: "select" },
-    },
-  },
-};
-
-const Template = (args) => <CustomIcon {...args} />;
-
-export const ButtonTest = Template.bind({});
-ButtonTest.args = {
-  type: undefined,
-  transparent: false,
-  borderType: undefined,
-  size: "20",
-  icon: iconCamera,
-};

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

@@ -1,41 +0,0 @@
-import { Container } from "./styles";
-import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
-import React from "react";
-
-export const CustomIcon = (props) => {
-  const {
-    id,
-    key,
-    className,
-    type, // white | whiteS2 | pink | gray || purple | black  => (default white)
-    transparent, // boolean
-    size, // number ... default (13)
-    borderType, // rectangle || circle (default)
-    icon, // icon fontawesome
-  } = props;
-
-  return (
-    <>
-      {icon ? (
-        <Container
-          id={id}
-          key={key}
-          className={
-            "container-icon " +
-            (["white", "whiteS2", "pink", "gray", "purple", "black"].includes(
-              type
-            )
-              ? type
-              : "white") +
-            (transparent ? " transparent " : " fill ") +
-            className
-          }
-          borderType={borderType}
-          size={size}
-        >
-          <Icon icon={icon} />
-        </Container>
-      ) : null}
-    </>
-  );
-};

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

@@ -1,85 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.i`
-  width: fit-content;
-  min-width: min-content;
-  cursor: default;
-  display: grid;
-  place-items: center;
-  font-size: ${({ size }) => (size ? size : "13")}px;
-  border-radius: ${({ borderType }) => {
-    return borderType?.toLowerCase() === "rectangle"
-      ? "6px"
-      : borderType?.toLowerCase() === "circle"
-      ? "50%"
-      : "0px";
-  }};
-  padding: ${({ borderType }) => {
-    return ["rectangle", "circle"].includes(borderType?.toLowerCase())
-      ? "5px"
-      : "0px";
-  }};
-  border: ${({ borderType, transparent }) => {
-    return ["rectangle", "circle"].includes(borderType?.toLowerCase())
-      ? "1px solid black"
-      : "none";
-  }};
-
-  // tipos de iconos fill
-  &.fill {
-    &.white {
-      background-color: white;
-      color: #e33aa9;
-      border-color: #e33aa9;
-    }
-    &.whiteS2 {
-      background-color: white;
-      color: #7b7979;
-      border-color: #f0f0f0;
-    }
-    &.pink {
-      background-color: #e33aa9;
-      color: white;
-      border-color: #e33aa9;
-    }
-    &.gray {
-      background-color: #e8e5e5;
-      border-color: #7b7979;
-      color: #7b7979;
-    }
-    &.purple {
-      background-color: #f7f7fc;
-      color: #8a6caa;
-      border-color: #8a6caa;
-    }
-  }
-
-  // tipos de iconos transparent
-  &.transparent {
-    &.white {
-      color: white;
-      border-color: #e33aa9;
-    }
-    &.whiteS2 {
-      color: #7b7979;
-      border-color: #f0f0f0;
-    }
-    &.pink {
-      color: #e33aa9;
-      border-color: #e33aa9;
-    }
-    &.gray {
-      color: #7b7979;
-      border-color: #7b7979;
-    }
-    &.purple {
-      color: #8a6caa;
-      border-color: #8a6caa;
-    }
-    &.black {
-      color: #262626;
-      border-color: #262626;
-    }
-  }
-`;

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

@@ -1,35 +0,0 @@
-import { IconFile } from "./index";
-
-export default {
-  title: "Components/atoms/IconFile",
-  component: IconFile,
-  argTypes: {
-    type: {
-      options: [
-        undefined,
-        "white",
-        "whiteS2",
-        "pink",
-        "gray",
-        "purple",
-        "black",
-      ],
-      control: { type: "select" },
-    },
-    borderType: {
-      options: [undefined, "rectangle", "circle"],
-      control: { type: "select" },
-    },
-  },
-};
-
-const Template = (args) => <IconFile {...args} />;
-
-export const ButtonTest = Template.bind({});
-ButtonTest.args = {
-  type: undefined,
-  transparent: false,
-  borderType: undefined,
-  size: "100",
-  ext: "doc",
-};

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

@@ -1,119 +0,0 @@
-import { Container } from "./styles";
-import {
-  faFileExcel as IconFileExcel,
-  faFileWord as IconFileWord,
-  faFilePdf as IconFilePdf,
-  faFileCsv as IconFileCsv,
-  faFileImage as IconFileImg,
-  faFilePowerpoint as IconFilePowerPoint,
-  faFileZipper as IconFileZip,
-  faFileCode as IconFileCode,
-  faFileAudio as IconFileAudio,
-  faFileLines as IconFileDefault,
-  faFileVideo as IconFileVideo,
-} from "@fortawesome/free-solid-svg-icons";
-import React, { useRef } from "react";
-import { CustomIcon } from "../CustomIcon";
-
-export const IconFile = (props) => {
-  const {
-    id,
-    key,
-    className,
-    type, // white | whiteS2 | pink | gray | purple | black  => (default -> white)
-    transparent, // boolean
-    size, // number ... default (13)
-    borderType, // rectangle || circle || (cualquier otro valor -> no borde)
-    ext, // extension del file
-  } = props;
-  const extensions = {
-    // file word
-    docx: { icon: IconFileWord, type: "word" },
-    docm: { icon: IconFileWord, type: "word" },
-    doc: { icon: IconFileWord, type: "word" },
-    docs: { icon: IconFileWord, type: "word" },
-
-    // file excel
-    xls: { icon: IconFileExcel, type: "excel" },
-    xlsm: { icon: IconFileExcel, type: "excel" },
-    xlsx: { icon: IconFileExcel, type: "excel" },
-    tsv: { icon: IconFileExcel, type: "excel" },
-    // file csv
-    csv: { icon: IconFileCsv, type: "csv" },
-    // file image
-    svg: { icon: IconFileImg, type: "image" },
-    gif: { icon: IconFileImg, type: "image" },
-    // file pdf
-    pdf: { icon: IconFilePdf, type: "pdf" },
-    // file power point
-    pot: { icon: IconFilePowerPoint, type: "powerPoint" },
-    potm: { icon: IconFilePowerPoint, type: "powerPoint" },
-    potx: { icon: IconFilePowerPoint, type: "powerPoint" },
-    pps: { icon: IconFilePowerPoint, type: "powerPoint" },
-    ppsm: { icon: IconFilePowerPoint, type: "powerPoint" },
-    ppsx: { icon: IconFilePowerPoint, type: "powerPoint" },
-    ppt: { icon: IconFilePowerPoint, type: "powerPoint" },
-    pptm: { icon: IconFilePowerPoint, type: "powerPoint" },
-    pptx: { icon: IconFilePowerPoint, type: "powerPoint" },
-
-    // file zip
-    rar: { icon: IconFileZip, type: "zip" },
-    zip: { icon: IconFileZip, type: "zip" },
-    tar: { icon: IconFileZip, type: "zip" },
-
-    // file code
-    xml: { icon: IconFileCode, type: "code" },
-    htm: { icon: IconFileCode, type: "code" },
-    html: { icon: IconFileCode, type: "code" },
-    css: { icon: IconFileCode, type: "code" },
-    js: { icon: IconFileCode, type: "code" },
-    jsx: { icon: IconFileCode, type: "code" },
-    ts: { icon: IconFileCode, type: "code" },
-    tsx: { icon: IconFileCode, type: "code" },
-    cpp: { icon: IconFileCode, type: "code" },
-    c: { icon: IconFileCode, type: "code" },
-    java: { icon: IconFileCode, type: "code" },
-    php: { icon: IconFileCode, type: "code" },
-    json: { icon: IconFileCode, type: "code" },
-    sql: { icon: IconFileCode, type: "code" },
-
-    // file video
-    avi: { icon: IconFileVideo, type: "video" },
-    mp4: { icon: IconFileVideo, type: "video" },
-    mpeg: { icon: IconFileVideo, type: "video" },
-    mpg: { icon: IconFileVideo, type: "video" },
-    wmv: { icon: IconFileVideo, type: "video" },
-
-    // file audio
-    m4a: { icon: IconFileAudio, type: "audio" },
-    mp3: { icon: IconFileAudio, type: "audio" },
-    wav: { icon: IconFileAudio, type: "audio" },
-    wma: { icon: IconFileAudio, type: "audio" },
-  };
-  const ref = useRef();
-
-  return (
-    <>
-      <Container
-        className={
-          className +
-          (!type && extensions[ext]?.type
-            ? " icon-" + extensions[ext].type
-            : undefined)
-        }
-        borderType={borderType}
-      >
-        <CustomIcon
-          id={id}
-          key={key}
-          className="icon"
-          type={type}
-          transparent={transparent}
-          borderType={borderType}
-          size={size}
-          icon={extensions[ext]?.icon ?? IconFileDefault}
-        />
-      </Container>
-    </>
-  );
-};

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

@@ -1,67 +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;
-  min-height: min-content;
-  overflow: hidden;
-  cursor: default;
-  display: grid;
-  place-items: center;
-  padding: 0px;
-  border-radius: ${({ borderType }) => {
-    return borderType?.toLowerCase() === "rectangle"
-      ? "6px"
-      : borderType?.toLowerCase() === "circle"
-      ? "50%"
-      : "0px";
-  }};
-  border: none;
-
-  // colores de acuerdo al tipo de icono
-  &.icon-word .icon {
-    color: #1f3780;
-    border-color: #1f3780;
-  }
-  &.icon-excel .icon {
-    color: #2d5639;
-    border-color: #2d5639;
-  }
-  &.icon-csv .icon {
-    color: #6b8e73;
-    border-color: #6b8e73;
-  }
-  &.icon-image .icon {
-    color: #ca7f4d;
-    border-color: #ca7f4d;
-  }
-  &.icon-pdf .icon {
-    color: #951a1a;
-    border-color: #951a1a;
-  }
-  &.icon-powerPoint .icon {
-    color: #ba4f19;
-    border-color: #ba4f19;
-  }
-  &.icon-zip .icon {
-    color: #b8950c;
-    border-color: #b8950c;
-  }
-  &.icon-code .icon {
-    color: #1c778e;
-    border-color: #1c778e;
-  }
-  &.icon-video .icon {
-    color: #a15bb1;
-    border-color: #a15bb1;
-  }
-  &.icon-audio .icon {
-    color: #3090e9;
-    border-color: #3090e9;
-  }
-  &.icon-default .icon {
-    color: #5e6265;
-    border-color: #5e6265;
-  }
-`;

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

@@ -1,51 +0,0 @@
-import { Image } from "./index";
-
-export default {
-  title: "Components/atoms/Image",
-  component: Image,
-  argTypes: {
-    borderType: {
-      options: [undefined, "rectangle", "circle"],
-      control: { type: "select" },
-    },
-  },
-};
-
-const Template = (args) => <Image {...args} />;
-
-const keyS3_test =
-  "84300/1/chat/playa-213f791b-d890-48e1-be19-28bf5a95d517.jpeg";
-const srcTest = `https://content-management-profile.s3.amazonaws.com/id-59/59.png`;
-export const ImageTest = Template.bind({});
-ImageTest.args = {
-  width: "200px",
-  sizeLoading: "50",
-  colorLoading: "#bbbbbb",
-  src: srcTest,
-  componentDefault: <label> test error </label>,
-  borderType: undefined,
-};
-
-const keyS3_OK =
-  "84300/1/chat/f6579ed5-16e5-48d8-ace5-6be8e8e68f53-38896acf-9179-4686-9088-9784df624ab8.png";
-const srcOK = `https://content-management-images.s3.amazonaws.com/${keyS3_OK}`;
-export const ImageOK = Template.bind({});
-ImageOK.args = {
-  width: "250px",
-  sizeLoading: "40",
-  src: srcOK,
-  componentDefault: <label> img no cargada </label>,
-  borderType: undefined,
-};
-
-const keyS3_ERROR =
-  "84300/1/chat/21dba1da-3c60-42c4-97bd-033664808256-fb19ff57-b91c-4ef2-ba2a-d857b55fb33b.svg";
-const srcERROR = `https://content-management-images.s3.amazonaws.com/${keyS3_ERROR}`;
-export const ImageERROR = Template.bind({});
-ImageERROR.args = {
-  width: "300px",
-  sizeLoading: "60",
-  src: srcERROR,
-  componentDefault: <label> ERROR al cargar </label>,
-  borderType: undefined,
-};

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

@@ -1,55 +0,0 @@
-import { Container, ContainerLoading, Img } from "./styles";
-import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
-import { faSpinner as iconLoading } from "@fortawesome/free-solid-svg-icons";
-import { useState, useEffect } from "react";
-
-export const Image = (props) => {
-  const {
-    className, // string
-    width, // string
-    sizeLoading, // number
-    colorLoading, // string
-    classNameLoading, // string
-    src, // imagen a cargar (string)
-    componentDefault, // componente a mostrar en caso de que no cargue src (JSX)
-    classNameImg, // string
-    borderType, // "rectangle" | "circle" -> por default none
-  } = props;
-  const [imgLoad, setImgLoad] = useState();
-  const [loading, setLoading] = useState(false);
-
-  /* solo para hacer pruebas en modo dev
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-    }, 5000);
-  }, []); */
-
-  return (
-    <Container className={className} width={width} borderType={borderType}>
-      {src && (imgLoad === undefined || loading) && (
-        <ContainerLoading
-          className={classNameLoading}
-          sizeLoading={sizeLoading}
-          colorLoading={colorLoading}
-        >
-          <Icon pulse icon={iconLoading} />
-        </ContainerLoading>
-      )}
-
-      {(!src || (imgLoad === false && !loading)) && componentDefault}
-
-      <Img
-        className={classNameImg}
-        src={src}
-        onLoad={(event) => {
-          setImgLoad(true);
-        }}
-        onError={(event) => {
-          setImgLoad(false);
-        }}
-        show={imgLoad === true && !loading}
-      />
-    </Container>
-  );
-};