contentoh-components-library 21.3.19 → 21.3.20

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

@@ -0,0 +1,217 @@
+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 === "top"
+        ? "column"
+        : iconPosition === "right"
+        ? "row-reverse"
+        : iconPosition === "bottom"
+        ? "column-reverse"
+        : "row"};
+    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;
+        }
+      }
+      &.whiteS4 {
+        background-color: white;
+        color: #8a6caa;
+        border-color: #8a6caa;
+        &:hover {
+          background-color: #e0e0f1;
+        }
+      }
+      &.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;
+        }
+      }
+      &.purpleS2 {
+        background-color: #8a6caa;
+        color: white;
+        border-color: #8a6caa;
+        &:hover {
+          background-color: #61467e;
+        }
+      }
+    }
+
+    // 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

@@ -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/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>
+  );
+};