contentoh-components-library 21.5.32 → 21.5.34

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

@@ -1,43 +1,43 @@
-import { Container } from "./styles";
-import { Chart } from "react-chartjs-2";
-import "chart.js/auto";
-import { useEffect, useRef } from "react";
-
-export const Graphic = ({ data, type, options }) => {
-  const counter = {
-    id: "counter",
-    beforeDraw(chart, args, options) {
-      const {
-        ctx,
-        chartArea: { top, right, bottom, left, width, height },
-      } = chart;
-      const x = width / 2;
-      const y = height / 2 + (options.fontSize * 0.68) / 2;
-      const percent = options.value.toString().includes(".")
-        ? options.value.toFixed(2)
-        : options.value;
-      ctx.save();
-      ctx.beginPath();
-      ctx.arc(x, height / 2, 60, 0, 2 * Math.PI);
-      ctx.fillStyle = "#E9E9E9";
-      ctx.fill();
-      ctx.strokeStyle = "#E9E9E9";
-      ctx.stroke();
-      ctx.font = `${options.fontSize}px ${options.fontFamily}`;
-      ctx.textAlign = options.textAlign;
-      ctx.fillStyle = options.fontColor;
-      ctx.fillText(percent + "%", x, y);
-    },
-  };
-
-  return (
-    <Container>
-      <Chart
-        type={type}
-        data={data}
-        options={options}
-        plugins={type === "doughnut" ? [counter] : null}
-      />
-    </Container>
-  );
-};
+import { Container } from "./styles";
+import { Chart } from "react-chartjs-2";
+import "chart.js/auto";
+import { useEffect, useRef } from "react";
+
+export const Graphic = ({ data, type, options }) => {
+  const counter = {
+    id: "counter",
+    beforeDraw(chart, args, options) {
+      const {
+        ctx,
+        chartArea: { top, right, bottom, left, width, height },
+      } = chart;
+      const x = width / 2;
+      const y = height / 2 + (options.fontSize * 0.68) / 2;
+      const percent = options.value.toString().includes(".")
+        ? options.value.toFixed(2)
+        : options.value;
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(x, height / 2, 60, 0, 2 * Math.PI);
+      ctx.fillStyle = "#E9E9E9";
+      ctx.fill();
+      ctx.strokeStyle = "#E9E9E9";
+      ctx.stroke();
+      ctx.font = `${options.fontSize}px ${options.fontFamily}`;
+      ctx.textAlign = options.textAlign;
+      ctx.fillStyle = options.fontColor;
+      ctx.fillText(percent + "%", x, y);
+    },
+  };
+
+  return (
+    <Container>
+      <Chart
+        type={type}
+        data={data}
+        options={options}
+        plugins={type === "doughnut" ? [counter] : null}
+      />
+    </Container>
+  );
+};

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

@@ -1,3 +1,3 @@
-import styled from "styled-components";
-
-export const Container = styled.div``;
+import styled from "styled-components";
+
+export const Container = styled.div``;

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

@@ -1,35 +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",
-};
+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 +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>
-    </>
-  );
-};
+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 +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;
-  }
-`;
+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 +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,
-};
+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,
+};