contentoh-components-library 21.2.90 → 21.2.92

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

@@ -0,0 +1,50 @@
+import { ButtonV2 } from "./index";
+import { faCamera as iconCamera } from "@fortawesome/free-solid-svg-icons";
+
+export default {
+  title: "Components/atoms/ButtonV2",
+  component: ButtonV2,
+  argTypes: {
+    type: {
+      options: [
+        undefined,
+        "white",
+        "whiteS2",
+        "pink",
+        "gray",
+        "purple",
+        "black",
+      ],
+      control: { type: "select" },
+    },
+    borderType: {
+      options: [undefined, "rectangle", "oval", "circle"],
+      control: { type: "select" },
+    },
+    iconPosition: {
+      options: [undefined, "start", "end"],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <ButtonV2 {...args} />;
+
+export const ButtonTest = Template.bind({});
+ButtonTest.args = {
+  id: "",
+  key: "",
+  disabled: false,
+  isLoading: false,
+  className: "",
+  type: undefined,
+  transparent: false,
+  borderType: undefined,
+  iconPosition: undefined,
+  label: "Ejemplo boton",
+  size: "20",
+  icon: iconCamera,
+  onClick: () => {
+    console.log("click boton");
+  },
+};

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

@@ -0,0 +1,74 @@
+import { Container } from "./styles";
+import { Button as ButtonMUI } from "@mui/material";
+import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
+import { faSpinner as iconLoading } from "@fortawesome/free-solid-svg-icons";
+import React from "react";
+
+export const ButtonV2 = (props) => {
+  const {
+    id,
+    keyId,
+    className,
+    disabled,
+    type, // white | whiteS2 | pink | gray | purple | black => por default (white)
+    transparent, // boolean => por default (NO transparent)
+    label,
+    size, // number ... label? size -> label && icon adaptable : size -> icon
+    borderType, // rectangle | oval | circle
+    icon, // icon fontawesome
+    iconPosition = "start", // end
+    isLoading, // boolean
+    onClick,
+  } = props;
+
+  return (
+    <Container
+      id={id}
+      key={keyId}
+      className={className}
+      type={type}
+      transparent={transparent}
+      borderType={borderType}
+      iconPosition={iconPosition}
+      icon={icon}
+      label={label}
+      size={size}
+      disabled={disabled}
+      isLoading={isLoading}
+    >
+      <ButtonMUI
+        className={
+          "button " +
+          (["white", "whiteS2", "pink", "gray", "purple", "black"].includes(
+            type
+          )
+            ? type
+            : "white") +
+          (transparent ? " transparent " : " fill ") +
+          className
+        }
+        variant={"text"}
+        disabled={disabled || isLoading}
+        onClick={async (event) => onClick && (await onClick(event))}
+      >
+        {isLoading ? (
+          <>
+            <i className="iconLoading">
+              <Icon pulse={true} icon={iconLoading} />
+            </i>
+            {label && label}
+          </>
+        ) : (
+          <>
+            {icon && (
+              <i className="icon">
+                <Icon icon={icon} />
+              </i>
+            )}
+            {label && label}
+          </>
+        )}
+      </ButtonMUI>
+    </Container>
+  );
+};

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

@@ -0,0 +1,187 @@
+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;
+    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;
+        }
+      }
+      &.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

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