cemtrik-dependencies 1.0.4

package/src/components/molecules/Pagination/index.js

@@ -0,0 +1,126 @@
+// 1.- libraries
+import { useState, useEffect } from "react";
+
+// 2.- components
+import ButtonPagination from "../../atoms/ButtonPagination";
+
+// 3.- icons
+import { ArrowLongLeftIcon, ArrowLongRightIcon } from "@heroicons/react/20/solid";
+
+// 4.- utils
+import { classNames } from "../../../utils";
+
+export const rowsPerPage = 50;
+
+const Pagination = ({ total, handleNext, handlePrev, handleSelectPage, page = null }) => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [arrOfCurrButtons, setArrOfCurrButtons] = useState([]);
+    const [numOfButtons, setNumOfButtons] = useState([]);
+
+    const numOfPages = Math.ceil(total / rowsPerPage);
+
+    useEffect(() => {
+        const arr = [];
+        for (let i = 1; i <= numOfPages; i++) arr.push(i);
+        setNumOfButtons(arr);
+    }, [numOfPages]);
+
+    useEffect(() => {
+        let tempNumberOfButtons = [];
+        const dotsInitial = "...";
+        const dotsLeft = "... ";
+        const dotsRight = " ...";
+        if (numOfButtons.length < 6) {
+            tempNumberOfButtons = numOfButtons;
+        } else if (currentPage >= 1 && currentPage <= 3) {
+            tempNumberOfButtons = [1, 2, 3, 4, dotsInitial, numOfButtons.length];
+        } else if (currentPage === 4) {
+            const sliced = numOfButtons.slice(0, 5);
+            tempNumberOfButtons = [...sliced, dotsInitial, numOfButtons.length];
+        } else if (currentPage > 4 && currentPage < numOfButtons.length - 2) {
+            const sliced1 = numOfButtons.slice(currentPage - 2, currentPage);
+            const sliced2 = numOfButtons.slice(currentPage, currentPage + 1);
+            tempNumberOfButtons = [
+                1,
+                dotsLeft,
+                ...sliced1,
+                ...sliced2,
+                dotsRight,
+                numOfButtons.length,
+            ];
+        } else if (currentPage > numOfButtons.length - 3) {
+            const sliced = numOfButtons.slice(numOfButtons.length - 4);
+            tempNumberOfButtons = [1, dotsLeft, ...sliced];
+        }
+        setArrOfCurrButtons(tempNumberOfButtons);
+    }, [currentPage, numOfButtons]);
+
+    useEffect(() => {
+        if (page === null) return;
+        page !== currentPage && setCurrentPage(page);
+    }, [page, currentPage]);
+
+    const selectPage = (data) => {
+        setCurrentPage(data);
+        handleSelectPage(data);
+    };
+
+    const prev = () => {
+        currentPage === 1 ? setCurrentPage(currentPage) : setCurrentPage(currentPage - 1);
+        currentPage > 1 && handlePrev(currentPage - 1);
+    };
+
+    const next = () => {
+        currentPage === numOfButtons.length
+            ? setCurrentPage(currentPage)
+            : setCurrentPage(currentPage + 1);
+        currentPage < numOfButtons.length && handleNext(currentPage + 1);
+    };
+
+    return (
+        <nav className="flex items-center justify-between border-t border-gray-200 px-4 sm:px-0">
+            <div className="-mt-px flex w-0 flex-1">
+                <span
+                    className="inline-flex items-center border-t-2 border-transparent pr-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 cursor-pointer"
+                    onClick={prev}
+                    data-testid="prev"
+                >
+                    <ArrowLongLeftIcon className="mr-3 h-5 w-5 text-gray-400" aria-hidden="true" />
+                    Anterior
+                </span>
+            </div>
+            <div className="hidden md:-mt-px md:flex">
+                {arrOfCurrButtons.map((data, index) => (
+                    <ButtonPagination
+                        key={index}
+                        className={classNames(
+                            "inline-flex items-center border-t-2 px-4 pt-4 text-sm font-medium",
+                            currentPage === data
+                                ? "border-indigo-500 text-indigo-600"
+                                : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
+                        )}
+                        aria-current="page"
+                        onClick={() =>
+                            data !== "..." && data !== " ..." && data !== "... " && selectPage(data)
+                        }
+                        id={`page-${index + 1}`}
+                    >
+                        {data}
+                    </ButtonPagination>
+                ))}
+            </div>
+            <div className="-mt-px flex w-0 flex-1 justify-end">
+                <span
+                    className="inline-flex items-center border-t-2 border-transparent pl-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 cursor-pointer"
+                    onClick={next}
+                    data-testid="next"
+                >
+                    Siguiente
+                    <ArrowLongRightIcon className="ml-3 h-5 w-5 text-gray-400" aria-hidden="true" />
+                </span>
+            </div>
+        </nav>
+    );
+};
+
+export default Pagination;

package/src/components/molecules/Pagination/index.test.js

@@ -0,0 +1,57 @@
+import { render, fireEvent } from "@testing-library/react";
+import Pagination, { rowsPerPage } from "./";
+
+describe("Pagination", () => {
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
+    it("selectPage", () => {
+        const handleSelectPage = jest.fn();
+        const component = render(
+            <Pagination
+                total={rowsPerPage}
+                handleNext={() => {}}
+                handlePrev={() => {}}
+                handleSelectPage={handleSelectPage}
+                page={2}
+            />,
+        );
+        const page = component.getByTestId("button-page-1");
+        fireEvent.click(page);
+        expect(handleSelectPage).toHaveBeenCalledWith(1);
+    });
+
+    it("prev", () => {
+        const handlePrev = jest.fn();
+        const component = render(
+            <Pagination total={1150} handlePrev={handlePrev} handleSelectPage={() => {}} />,
+        );
+        const page3 = component.getByTestId("button-page-3");
+        const prev = component.getByTestId("prev");
+
+        fireEvent.click(prev);
+        fireEvent.click(page3);
+        fireEvent.click(prev);
+        expect(handlePrev).toHaveBeenCalledWith(2);
+    });
+
+    it("next", () => {
+        const handleNext = jest.fn();
+        const component = render(
+            <Pagination total={450} handleNext={handleNext} handleSelectPage={() => {}} />,
+        );
+        const page4 = component.getByTestId("button-page-4");
+        const page6 = component.getByTestId("button-page-6");
+        const next = component.getByTestId("next");
+        fireEvent.click(page4);
+        fireEvent.click(next);
+        fireEvent.click(next);
+        fireEvent.click(next);
+        fireEvent.click(page6);
+        fireEvent.click(next);
+        expect(handleNext).toHaveBeenNthCalledWith(1, 5);
+        expect(handleNext).toHaveBeenNthCalledWith(2, 6);
+        expect(handleNext).toHaveBeenNthCalledWith(3, 7);
+    });
+});

package/src/components/templates/Accordion/index.js

@@ -0,0 +1,174 @@
+// 1.- libraries
+import { useState, useEffect, Fragment } from "react";
+import { Transition } from "@headlessui/react";
+
+// 2.- components
+import Input from "../../atoms/Input";
+
+// 3.- icons
+import {
+    TrashIcon,
+    ChevronDownIcon,
+    ChevronUpIcon,
+    MagnifyingGlassIcon,
+} from "@heroicons/react/24/outline";
+
+// 4.- utils
+import { copyOptions, classNames } from "../../../utils";
+
+const Accordion = ({
+    openDefault = false,
+    setForm,
+    setValuesDefault,
+    title,
+    type,
+    data,
+    setData,
+    Component,
+    id,
+    defaultData,
+    dispatch,
+    isAdd = true,
+    search = null,
+    isPadding = true,
+}) => {
+    const [open, setOpen] = useState(false);
+
+    useEffect(() => {
+        setOpen(openDefault);
+    }, [openDefault]);
+
+    const handleChange = ({ e, index }) => {
+        const copyData = copyOptions(data);
+        const { name, value } = e.target;
+        copyData[index][name] = value;
+        setData(copyData);
+        setValuesDefault(id, copyData);
+        setForm((state) => ({ ...state, [id]: copyData }));
+    };
+
+    const add = () => {
+        const isEmpty = data.some((item) => {
+            const items = Object.values(item);
+            const isEmptyValues = items.some((v) => v.value === -1);
+            return isEmptyValues;
+        });
+        if (isEmpty || data.length === 0)
+            return dispatch({
+                type: "ALERT",
+                payload: {
+                    title: "",
+                    message: "Todos los campos son requeridos",
+                    typeAlert: "warning",
+                    active: true,
+                },
+            });
+        setForm((state) => ({ ...state, data }));
+        setValuesDefault(id, data);
+        setData([...data, defaultData]);
+    };
+
+    const deleteData = (index) => {
+        if (index === data.length - 1) return;
+        const copyData = copyOptions(data);
+        copyData.splice(index, 1);
+        setForm((state) => ({ ...state, copyData }));
+        setValuesDefault(id, copyData);
+        setData(copyData);
+    };
+
+    return (
+        <div className="divide-y divide-gray-200 rounded-lg bg-white shadow mt-7">
+            <div
+                className="px-4 py-3.5 sm:px-6 flex justify-between items-center cursor-pointer"
+                onClick={() => setOpen(!open)}
+                data-testid="open-accordion"
+            >
+                <p className="text-gray-500 uppercase text-xs font-bold">{title}</p>
+                <div className="flex items-center">
+                    {search && (
+                        <Input
+                            htmlFor="search"
+                            id="search"
+                            name="search"
+                            type="text"
+                            autoComplete="search"
+                            placeholder="Buscar..."
+                            handleChange={search}
+                            icon={<MagnifyingGlassIcon className="w-6 h-6 text-indigo-300" />}
+                            className="h-9"
+                            classNameContainerInput="w-52 2xs:w-64 max-w-64 mr-8 hidden sm:block"
+                            value=""
+                            onClick={(e) => e.stopPropagation()}
+                            onFocus={() => setOpen(true)}
+                        />
+                    )}
+                    {open ? (
+                        <ChevronUpIcon className="w-5 h-5 text-default-5" />
+                    ) : (
+                        <ChevronDownIcon className="w-5 h-5 text-default-5" />
+                    )}
+                </div>
+            </div>
+            <Transition
+                as={Fragment}
+                show={open}
+                enter="transition duration-[400ms]"
+                enterFrom="opacity-0"
+                enterTo="opacity-100"
+                leave="duration-200 transition ease-in-out"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+            >
+                <div className={classNames("sm:mt-2.5 py-3.5", isPadding && "px-4 sm:p-6")}>
+                    {data.map((item, index) => (
+                        <div
+                            key={index}
+                            className={classNames(
+                                "flex flex-col 3xs:flex-row mb-4",
+                                isPadding && "ml-0 3xs:ml-3",
+                            )}
+                        >
+                            <Component item={item} index={index} handleChange={handleChange} />
+                            {isAdd && (
+                                <div
+                                    style={{
+                                        backgroundColor: "#B0B8BF",
+                                        width: "25px",
+                                        height: "25px",
+                                    }}
+                                    className={classNames(
+                                        "rounded-full flex justify-center items-center mt-4 3xs:mt-7 ml-2 3xs:ml-5 self-start 3xs:self-center",
+                                        index === data.length - 1 && "3xs:opacity-0",
+                                    )}
+                                >
+                                    <TrashIcon
+                                        className={classNames(
+                                            "w-6 h-4",
+                                            index !== data.length - 1 && "cursor-pointer",
+                                        )}
+                                        style={{ color: "#637381" }}
+                                        strokeWidth={2.5}
+                                        onClick={() => deleteData(index)}
+                                        data-testid={`delete-data-${index}`}
+                                    />
+                                </div>
+                            )}
+                        </div>
+                    ))}
+                    {isAdd && (
+                        <p
+                            className="text-secondary-2 text-sm font-medium ml-3 cursor-pointer"
+                            onClick={add}
+                            data-testid="add"
+                        >
+                            {`+ Añadir ${type}`}
+                        </p>
+                    )}
+                </div>
+            </Transition>
+        </div>
+    );
+};
+
+export default Accordion;

package/src/components/templates/Accordion/index.test.js

@@ -0,0 +1,130 @@
+import { render, fireEvent, act } from "@testing-library/react";
+import Accordion from "./";
+
+describe("Accordion", () => {
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
+    it("renders Accordion component without errors", async () => {
+        let component;
+        await act(async () => {
+            component = render(
+                <Accordion title="title" data={[]} openDefault id={1} dispatch={() => {}} />,
+            );
+        });
+        const add = component.getByTestId("add");
+        fireEvent.click(add);
+    });
+
+    it("search", async () => {
+        const handleSearch = jest.fn();
+        const component = render(<Accordion title="title" search={handleSearch} data={[]} />);
+        const open = component.getByTestId("open-accordion");
+        const input = component.getByTestId("input-search");
+        await act(async () => fireEvent.click(open));
+        fireEvent.change(input, { target: { value: "search..." } });
+        fireEvent.click(input);
+        fireEvent.focus(input);
+        expect(handleSearch).toHaveBeenCalled();
+    });
+
+    it("handleChange Component", async () => {
+        const MockComponent = ({ item, index, handleChange }) => {
+            return (
+                <button
+                    onClick={() =>
+                        handleChange({
+                            e: { target: { name: "scope", value: { label: "label-2", id: 2 } } },
+                            index,
+                        })
+                    }
+                    data-testid="component-mock"
+                >
+                    Click me
+                </button>
+            );
+        };
+        const mockSetValuesDefault = jest.fn();
+        const mockSetData = jest.fn();
+        let component;
+        await act(async () => {
+            component = render(
+                <Accordion
+                    id={3}
+                    title="title"
+                    isPadding
+                    openDefault
+                    data={[{ scope: { label: "label", id: 1 } }]}
+                    Component={MockComponent}
+                    setValuesDefault={mockSetValuesDefault}
+                    setForm={(fn) => fn()}
+                    setData={mockSetData}
+                />,
+            );
+        });
+        const button = component.getByTestId("component-mock");
+        fireEvent.click(button);
+        expect(mockSetValuesDefault).toHaveBeenCalledWith(3, [
+            { scope: { id: 2, label: "label-2" } },
+        ]);
+        expect(mockSetData).toHaveBeenCalledWith([{ scope: { id: 2, label: "label-2" } }]);
+    });
+
+    it("delete data", async () => {
+        const mockSetData = jest.fn();
+        const mockSetValuesDefault = jest.fn();
+        let component;
+        await act(async () => {
+            component = render(
+                <Accordion
+                    id={4}
+                    title="title"
+                    openDefault
+                    data={[
+                        { scope: { label: "label", id: 1 } },
+                        { scope: { label: "label", id: 2 } },
+                    ]}
+                    Component={() => {}}
+                    isAdd
+                    setValuesDefault={mockSetValuesDefault}
+                    setForm={(fn) => fn()}
+                    setData={mockSetData}
+                />,
+            );
+        });
+        const buttonDelete = component.getByTestId("delete-data-0");
+        const buttonDelete2 = component.getByTestId("delete-data-1");
+        fireEvent.click(buttonDelete);
+        fireEvent.click(buttonDelete2);
+        expect(mockSetValuesDefault).toHaveBeenCalledWith(4, [
+            { scope: { id: 2, label: "label" } },
+        ]);
+        expect(mockSetData).toHaveBeenCalledWith([{ scope: { id: 2, label: "label" } }]);
+    });
+
+    it("add data", async () => {
+        const mockSetData = jest.fn();
+        const mockSetValuesDefault = jest.fn();
+        let component;
+        await act(async () => {
+            component = render(
+                <Accordion
+                    id={5}
+                    title="title"
+                    data={[{ item: { value: 1 } }]}
+                    type="rol"
+                    openDefault
+                    Component={() => {}}
+                    setValuesDefault={mockSetValuesDefault}
+                    setForm={(fn) => fn()}
+                    setData={mockSetData}
+                />,
+            );
+        });
+        const add = component.getByTestId("add");
+        fireEvent.click(add);
+        expect(mockSetValuesDefault).toHaveBeenCalledWith(5, [{ item: { value: 1 } }]);
+        expect(mockSetData).toHaveBeenCalledWith([{ item: { value: 1 } }, undefined]);
+    });
+});

package/src/hooks/useCloseModal/index.js

@@ -0,0 +1,27 @@
+import { useEffect, useCallback } from "react";
+
+export const useCloseModal = ({ id, close, isPathsTest = false }) => {
+    const closeWindow = useCallback(
+        (paths) => {
+            const isClose = paths.some((v) => {
+                return v.getAttribute === undefined ? false : v.getAttribute("id") === id;
+            });
+            if (!isClose) close();
+        },
+        [close, id],
+    );
+
+    useEffect(() => {
+        const closeModal = (e) => {
+            const paths = e.composedPath();
+            if (paths === undefined || isPathsTest) return;
+            closeWindow(paths);
+        };
+
+        window.addEventListener("click", closeModal);
+
+        return () => {
+            window.removeEventListener("click", closeModal);
+        };
+    }, [closeWindow, isPathsTest]);
+};

package/src/hooks/useCloseModal/index.test.js

@@ -0,0 +1,26 @@
+import { renderHook, act } from "@testing-library/react";
+import { useCloseModal } from "./";
+
+describe("useCloseModal", () => {
+    it("close", () => {
+        const closeMock = jest.fn();
+        renderHook(useCloseModal, {
+            initialProps: { id: "", close: closeMock },
+        });
+        act(() => {
+            window.dispatchEvent(new MouseEvent("click", { composedPath: undefined }));
+        });
+        expect(closeMock.mock.calls.length).toBe(1);
+    });
+
+    it("paths undefined", () => {
+        const closeMock = jest.fn();
+        renderHook(useCloseModal, {
+            initialProps: { id: "", close: closeMock, isPathsTest: true },
+        });
+        act(() => {
+            window.dispatchEvent(new Event("click"));
+        });
+        expect(closeMock.mock.calls.length).toBe(0);
+    });
+});

package/src/hooks/useForm/index.js

@@ -0,0 +1,70 @@
+import { useState, useCallback } from "react";
+
+export const useForm = () => {
+    const [model, setModel] = useState({});
+    const [messageError, setMessageError] = useState({});
+    const [errors, setErrors] = useState([]);
+
+    const handleSubmit = (onSubmit) => (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onSubmit(model);
+    };
+
+    const handleChange = (e, setForm, form) => {
+        const { checked, value, name, type, id } = e.target;
+        const dict = {
+            radio: id,
+            checkbox: checked,
+        };
+        setModel({
+            ...model,
+            [name]: dict[type] ?? value,
+        });
+        setForm({
+            ...form,
+            [name]: dict[type] ?? value,
+        });
+    };
+
+    const setValuesDefault = useCallback((name, value) => {
+        setModel((obj) => ({ ...obj, [name]: value }));
+    }, []);
+
+    const validateFields = useCallback((obj, fieldRequerids) => {
+        const fields = fieldRequerids.filter(
+            (field) => obj[field] === "" || obj[field] === undefined,
+        );
+        fields.forEach((v) =>
+            setMessageError((state) => ({
+                ...state,
+                [v]: "Este campo es requerido",
+            })),
+        );
+
+        setErrors(fields);
+        return fields.length > 0;
+    }, []);
+
+    const handleError = (message, fields) => {
+        fields.forEach((v) =>
+            setMessageError((state) => ({
+                ...state,
+                [v]: message,
+            })),
+        );
+        setErrors(fields);
+    };
+
+    return {
+        handleSubmit,
+        handleChange,
+        setValuesDefault,
+        validateFields,
+        errors,
+        model,
+        handleError,
+        messageError,
+        setModel,
+    };
+};