cemtrik-dependencies 1.0.4

package/src/hooks/useForm/useForm.test.js

@@ -0,0 +1,104 @@
+import { render, renderHook, fireEvent, waitFor, act } from "@testing-library/react";
+import { useForm } from "./";
+import Input from "../../components/atoms/Input";
+
+describe("useForm", () => {
+    it("handleSubmit", () => {
+        const mockOnSubmit = jest.fn();
+        const {
+            result: { current },
+        } = renderHook(useForm);
+
+        const { getByTestId } = render(
+            <form onSubmit={current.handleSubmit(mockOnSubmit)}>
+                <button type="submit" data-testid="submit-button">
+                    Submit
+                </button>
+            </form>,
+        );
+
+        const submitButton = getByTestId("submit-button");
+
+        fireEvent.click(submitButton);
+
+        expect(mockOnSubmit).toHaveBeenCalled();
+    });
+
+    it("handleChange", () => {
+        const changeMock = jest.fn();
+        const model = { email: "" };
+        const {
+            result: { current },
+        } = renderHook(useForm);
+
+        const { getByTestId } = render(
+            <Input
+                htmlFor="email"
+                label="Usuario"
+                id="email"
+                name="email"
+                type="email"
+                placeholder="Correo Electrónico"
+                handleChange={(e) => current.handleChange(e, changeMock, model)}
+                value={model.email}
+            />,
+        );
+
+        const input = getByTestId("input-email");
+
+        fireEvent.change(input, {
+            target: {
+                value: "test@gmail.com",
+                checked: false,
+                name: "email",
+                type: "email",
+                id: "email",
+            },
+        });
+
+        expect(changeMock).toHaveBeenCalledWith({ email: "test@gmail.com" });
+    });
+
+    it("setValuesDefault", async () => {
+        const { result } = renderHook(useForm);
+
+        await waitFor(() => {
+            result.current.setValuesDefault("email", "test@gmail.com");
+            expect(result.current.model).toEqual({ email: "test@gmail.com" });
+        });
+    });
+
+    it("validateFields", async () => {
+        const { result } = renderHook(useForm);
+
+        await act(async () => {
+            result.current.validateFields({ email: "test@gmail.com", name: "Pepito" }, [
+                "email",
+                "password",
+            ]);
+        });
+
+        expect(result.current.errors.toString()).toBe("password");
+
+        await act(async () => {
+            result.current.validateFields(
+                { email: "test@gmail.com", password: "123", name: "Pepito" },
+                ["email", "password"],
+            );
+        });
+
+        expect(JSON.stringify(result.current.errors)).toBe("[]");
+    });
+
+    it("handleError", async () => {
+        const { result } = renderHook(useForm);
+
+        await waitFor(() => {
+            result.current.handleError("err", ["email", "password"]);
+
+            expect(JSON.stringify(result.current.messageError)).toBe(
+                JSON.stringify({ email: "err", password: "err" }),
+            );
+        });
+    });
+});

package/src/hooks/useMediaQuery/index.js

@@ -0,0 +1,53 @@
+import { useState, useEffect, useCallback } from "react";
+
+export const useMediaQuery = (breakpoint) => {
+    const [isCorrectBreakpoint, setIsCorrectBreakpoint] = useState(true);
+    const [isMatches, setIsMatches] = useState(false);
+
+    const getMatche = useCallback(
+        (isMinWidth, windowWidth) => {
+            const resolution = breakpoint.match(/[0-9]+/g);
+
+            if (resolution === null) return;
+
+            const [number] = resolution;
+            windowWidth = Math.min(window.innerWidth, window.outerWidth);
+
+            const matches = isMinWidth
+                ? windowWidth >= Number(number)
+                : windowWidth <= Number(number);
+            setIsMatches(matches);
+        },
+        [breakpoint],
+    );
+
+    useEffect(() => {
+        const isMinWidth = /\(min-width:\s?[0-9]+px\)/gi.test(breakpoint);
+        const isMaxWidth = /\(max-width:\s?[0-9]+px\)/gi.test(breakpoint);
+
+        !isMinWidth && !isMaxWidth && setIsCorrectBreakpoint(false);
+
+        if (!isMinWidth && !isMaxWidth) return;
+
+        const windowWidth = Math.min(window.innerWidth, window.outerWidth);
+
+        getMatche(isMinWidth, windowWidth);
+    }, [breakpoint, getMatche]);
+
+    useEffect(() => {
+        if (!isCorrectBreakpoint) return;
+
+        const windowWidth = Math.min(window.innerWidth, window.outerWidth);
+
+        function updateSize() {
+            const isMinWidth = /min-width/gi.test(breakpoint);
+            getMatche(isMinWidth, windowWidth);
+        }
+
+        window.addEventListener("resize", updateSize);
+
+        return () => window.removeEventListener("resize", updateSize);
+    }, [isCorrectBreakpoint, breakpoint, getMatche]);
+
+    return isMatches;
+};

package/src/hooks/useMediaQuery/useMediaQuery.test.js

@@ -0,0 +1,46 @@
+import { renderHook, act } from "@testing-library/react";
+import { useMediaQuery } from "./";
+
+describe("useMediaQuery", () => {
+    it("resize", () => {
+        window.innerWidth = 1024;
+        const { result } = renderHook(useMediaQuery, {
+            initialProps: "(max-width: 768px)",
+        });
+
+        act(() => {
+            window.innerWidth = 600;
+            window.dispatchEvent(new Event("resize"));
+        });
+
+        expect(result.current).toBe(true);
+    });
+
+    it("breakpoint incorrect", () => {
+        window.innerWidth = 1024;
+        const { result } = renderHook(useMediaQuery, {
+            initialProps: "(width: 768px)",
+        });
+
+        act(() => {
+            window.innerWidth = 600;
+            window.dispatchEvent(new Event("resize"));
+        });
+
+        expect(result.current).toBe(false);
+    });
+
+    it("min-width", () => {
+        window.innerWidth = 375;
+        const { result } = renderHook(useMediaQuery, {
+            initialProps: "(min-width: 1000px)",
+        });
+
+        act(() => {
+            window.innerWidth = 1280;
+            window.dispatchEvent(new Event("resize"));
+        });
+
+        expect(result.current).toBe(true);
+    });
+});

package/src/hooks/useWindowDimensions/index.js

@@ -0,0 +1,34 @@
+// 1.- libraries
+import { useState, useEffect } from "react";
+
+export const useWindowDimensions = () => {
+    const [windowDimensions, setWindowDimensions] = useState({
+        width: 0,
+        height: 0,
+    });
+
+    useEffect(() => {
+        const width = Math.min(window.innerWidth, window.outerWidth);
+        const height = Math.min(window.innerHeight, window.outerHeight);
+
+        setWindowDimensions({ width, height });
+    }, []);
+
+    useEffect(() => {
+        let width = Math.min(window.innerWidth, window.outerWidth);
+        let height = Math.min(window.innerHeight, window.outerHeight);
+
+        const handleResize = () => {
+            width = Math.min(window.innerWidth, window.outerWidth);
+            height = Math.min(window.innerHeight, window.outerHeight);
+
+            setWindowDimensions({ width, height });
+        };
+
+        window.addEventListener("resize", handleResize);
+
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+
+    return windowDimensions;
+};

package/src/hooks/useWindowDimensions/useWindowDimensions.test.js

@@ -0,0 +1,19 @@
+import { renderHook, act } from "@testing-library/react";
+import { useWindowDimensions } from "./";
+
+describe("useWindowDimensions", () => {
+    it("resize", () => {
+        const { result } = renderHook(useWindowDimensions);
+
+        window.innerWidth = 1024;
+        window.innerHeight = 800;
+
+        act(() => {
+            window.innerWidth = 600;
+            window.innerHeight = 380;
+            window.dispatchEvent(new Event("resize"));
+        });
+
+        expect(result.current).toEqual({ height: 380, width: 600 });
+    });
+});

package/src/utils/index.js

@@ -0,0 +1,32 @@
+export const copyOptions = (data) => {
+    function copyObj(obj) {
+        if (typeof obj !== "object" || obj === null) return obj;
+        const copy = Array.isArray(obj) ? [] : {};
+        for (const key in obj) {
+            if (obj.hasOwnProperty(key)) copy[key] = copyObj(obj[key]);
+        }
+        return copy;
+    }
+
+    const copyData = data.map((option) => {
+        const copiaOption = copyObj(option);
+        return copiaOption;
+    });
+    return copyData;
+};
+
+export const validateEmail = (email) => {
+    return /^(?:[^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*|"[^\n"]+")@(?:[^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,63}$/i.test(
+        email,
+    );
+};
+
+export function classNames(...classes) {
+    return classes.filter(Boolean).join(" ");
+}
+
+export const isPromise = (prop) =>
+    typeof prop !== "string" && Promise.resolve(prop) instanceof Promise;
+
+export const MESSAGE_ABORT_CONTROLLER = "The user aborted a request.";
+export const MESSAGE_SIGNAL_ABORTED_WITHOUT_REASON = "signal is aborted without reason";

package/src/utils/index.test.js

@@ -0,0 +1,56 @@
+import {
+    copyOptions,
+    validateEmail,
+    classNames,
+    isPromise,
+    MESSAGE_ABORT_CONTROLLER,
+    MESSAGE_SIGNAL_ABORTED_WITHOUT_REASON,
+} from "./";
+
+const data = [
+    {
+        id: "0",
+        name: "Número de  Respuestas de Experiencia",
+        text: "",
+        percent: "458",
+        openToolTip: false,
+        data: ["Eliminar"],
+    },
+    {
+        id: "1",
+        name: "NPS Net Promoter Score:",
+        text: "Valor esperado: Mayor a 50%.",
+        percent: "68.5%",
+        openToolTip: false,
+        data: ["Eliminar"],
+    },
+];
+
+describe("utils", () => {
+    it("copyOptions", () => {
+        const copyData = copyOptions(data);
+        copyData[0].current = true;
+        expect(data[0]).not.toEqual(copyData[0]);
+    });
+
+    it("validateEmail", () => {
+        const isEmail1 = validateEmail("test@gmail.com");
+        const isEmail2 = validateEmail("testgmail.com");
+        expect(isEmail1).toBe(true);
+        expect(isEmail2).toBe(false);
+    });
+
+    it("classNames", () => {
+        const classes = classNames("class1", "class2", "class3");
+        expect(classes).toBe("class1 class2 class3");
+    });
+
+    it("isPromise", () => {
+        MESSAGE_ABORT_CONTROLLER && MESSAGE_ABORT_CONTROLLER;
+        MESSAGE_SIGNAL_ABORTED_WITHOUT_REASON && MESSAGE_SIGNAL_ABORTED_WITHOUT_REASON;
+        const promise1 = isPromise("");
+        const promise2 = isPromise(new Promise((resolve) => resolve("")));
+        expect(promise1).toBe(false);
+        expect(promise2).toBe(true);
+    });
+});

package/tailwind.config.js

@@ -0,0 +1,117 @@
+/** @type {import('tailwindcss').Config} */
+const defaultTheme = require("tailwindcss/defaultTheme");
+
+module.exports = {
+    content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
+    purge: {
+        enabled: false,
+        content: ["./src/components/**/*.{js,jsx}", "./src/layouts/**/*.{js,jsx}"],
+    },
+    theme: {
+        fontFamily: {
+            sans: ["Inter", "sans-serif"],
+        },
+        extend: {
+            colors: {
+                white: "#ffffff",
+                black: "#000000",
+
+                stone: {
+                    100: "#f5f5f4",
+                    300: "#d6d3d1",
+                    400: "#a8a29e",
+                    500: "#78716c",
+                    600: "#57534e",
+                    700: "#44403c",
+                    800: "#292524",
+                    900: "#1c1917",
+                },
+                rose: {
+                    100: "#ffe4e6",
+                    300: "#fda4af",
+                    400: "#fb7185",
+                    500: "#f43f5e",
+                    600: "#e11d48",
+                    700: "#be123c",
+                    800: "#9f1239",
+                    900: "#881337",
+                },
+                amber: {
+                    100: "#fef3c7",
+                    200: "#fde68a",
+                    300: "#fcd34d",
+                    400: "#fbbf24",
+                    500: "#f59e0b",
+                    600: "#d97706",
+                    700: "#b45309",
+                    800: "#92400e",
+                    900: "#78350f",
+                },
+
+                "white-1": "#E4E4E4",
+                "white-2": "#E8E8E8",
+                "white-3": "#F0F0F0",
+                "white-4": "#FFFFFF",
+
+                "default-1": "#C7CBD2",
+                "default-2": "#4A4C4D",
+                "default-3": "#2C2F36",
+                "default-4": "#020C1A",
+                "default-5": "#637381",
+                "default-6": "#DFE4EA",
+
+                "secondary-2": "#3758F9",
+                "secondary-3": "#243BBD",
+                "secondary-4": "#070080",
+
+                "success-1": "#1CB196",
+
+                "danger-1": "#FFFEFF",
+                "danger-2": "#FCCED8",
+                "danger-3": "#FE9CB3",
+                "danger-4": "#FF3768",
+
+                transparent: "transparent",
+            },
+            screens: {
+                xs: "320px",
+                "2xs": "375px",
+                "3xs": "470px",
+                sm: "640px",
+                md: "769px",
+            },
+            spacing: {
+                ...defaultTheme.spacing,
+                30: "7.25rem",
+            },
+            fontSize: {
+                6: "6px",
+                10: "10px",
+                11: "11px",
+                13: "13px",
+                15: "15px",
+                17: "17px",
+                19: "19px",
+                23: "23px",
+                25: "25px",
+                26: "26px",
+                28: "28px",
+                29: "29px",
+                31: "31px",
+                35: "35px",
+            },
+            borderRadius: {
+                20: "20px",
+            },
+            borderWidth: {
+                1: "1px",
+            },
+        },
+    },
+    variants: {
+        extend: {
+            fontWeight: ["hover"],
+        },
+    },
+    plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
+};

package/utils.js

@@ -0,0 +1,8 @@
+export {
+    copyOptions,
+    classNames,
+    isPromise,
+    validateEmail,
+    MESSAGE_ABORT_CONTROLLER,
+    MESSAGE_SIGNAL_ABORTED_WITHOUT_REASON,
+} from "./src/utils/index";