contentoh-components-library 21.2.104 → 21.2.106

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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,85 @@
+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/GeneralButton/index.js

@@ -15,10 +15,7 @@ export const Button = ({
       id={id}
       className={buttonType}
       buttonFont={buttonFont}
-      onClick={(e) => {
-        e.stopPropagation();
-        onClick(e);
-      }}
+      onClick={onClick}
       key={`button-${buttonType}`}
       disabled={buttonType === "general-button-disabled"}
     >

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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,119 @@
+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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,55 @@
+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>
+  );
+};

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

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: grid;
+  place-items: center;
+  width: ${({ width }) => (width ? width : "min-content")};
+  min-width: min-content;
+  overflow: hidden;
+  border-radius: ${({ borderType }) => {
+    return borderType?.toLowerCase() === "rectangle"
+      ? "6px"
+      : borderType?.toLowerCase() === "circle"
+      ? "50%"
+      : "0px"; // default none
+  }};
+`;
+
+export const ContainerLoading = styled.div`
+  width: 100%;
+  display: grid;
+  place-items: center;
+  min-width: min-content;
+  font-size: ${({ sizeLoading }) => (sizeLoading ? sizeLoading : "30")}px;
+  color: ${({ colorLoading }) => (colorLoading ? colorLoading : "#9e2674")};
+  padding: 5px;
+`;
+
+export const Img = styled.img`
+  display: ${({ show }) => (show ? "grid" : "none")};
+  width: 100%;
+  object-fit: contain;
+  border-radius: inherit;
+`;

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

@@ -0,0 +1,43 @@
+import { ImageLink } from "./index";
+
+export default {
+  title: "Components/atoms/ImageLink",
+  component: ImageLink,
+  argTypes: {},
+};
+
+const Template = (args) => <ImageLink {...args} />;
+
+const keyS3_test =
+  "84300/1/chat/playa-213f791b-d890-48e1-be19-28bf5a95d517.jpeg";
+const srcTest = `https://content-management-images.s3.amazonaws.com/${keyS3_test}`;
+export const ImageTest = Template.bind({});
+ImageTest.args = {
+  width: "200px",
+  sizeLoading: "50",
+  colorLoading: "#bbbbbb",
+  src: srcTest,
+  componentDefault: <label> test error </label>,
+};
+
+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>,
+};
+
+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>,
+};

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

@@ -0,0 +1,57 @@
+import { Container, ContainerLoading, ContainerLink } 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 ImageLink = (props) => {
+  const {
+    className, // string
+    width, // string
+    sizeLoading, // number
+    colorLoading, // string
+    src, // imagen a cargar (string)
+    componentDefault, // componente a mostrar en caso de que no cargue src (JSX)
+  } = 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}>
+      {src && (imgLoad === undefined || loading) && (
+        <ContainerLoading
+          className={"container-loading"}
+          sizeLoading={sizeLoading}
+          colorLoading={colorLoading}
+        >
+          <Icon className="icon" pulse icon={iconLoading} />
+        </ContainerLoading>
+      )}
+
+      {(!src || (imgLoad === false && !loading)) && componentDefault}
+
+      <ContainerLink
+        className="container-img"
+        show={imgLoad === true && !loading}
+        href={src}
+      >
+        <img
+          className="img"
+          src={src}
+          onLoad={(event) => {
+            setImgLoad(true);
+          }}
+          onError={(event) => {
+            setImgLoad(false);
+          }}
+        />
+      </ContainerLink>
+    </Container>
+  );
+};

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

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: grid;
+  place-items: center;
+  width: ${({ width }) => (width ? width : "min-content")};
+  min-width: min-content;
+`;
+
+export const ContainerLoading = styled.div`
+  width: 100%;
+  display: grid;
+  place-items: center;
+  min-width: min-content;
+  font-size: ${({ sizeLoading }) => (sizeLoading ? sizeLoading : "30")}px;
+  color: ${({ colorLoading }) => (colorLoading ? colorLoading : "#9e2674")};
+  padding: 5px;
+`;
+
+export const ContainerLink = styled.a`
+  display: ${({ show }) => (show ? "grid" : "none")};
+  width: 100%;
+  cursor: pointer;
+
+  img {
+    width: 100%;
+    object-fit: contain;
+  }
+`;