cemtrik-dependencies 1.0.4

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

@@ -0,0 +1,315 @@
+// 1.- libraries
+import { Fragment, useState, useEffect } from "react";
+import { Menu, Transition } from "@headlessui/react";
+
+// 2.- components
+import { SpinnerIcon } from "../../atoms/Spinner";
+import Input from "../../atoms/Input";
+import ButtonSolid from "../../atoms/ButtonSolid";
+
+// 3.- icons
+import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/solid";
+
+// 4.- utils
+import { classNames } from "../../../utils";
+
+const Dropdown = ({
+    children,
+    data,
+    className = "",
+    classNameTooltip = "w-full",
+    classNameMenu = "",
+    classNameMenuItems = "",
+    classNameContainerSearch = "px-5",
+    isSelectMultiple = false,
+    optionsSelect,
+    propObject = "name",
+    propId = "id",
+    textNewItem = "",
+    defaultId = null,
+    loading = false,
+    search = null,
+    searchPlaceHolder = "Buscar...",
+    valueSearch = undefined,
+    idsOptionSelect = null,
+    isComponent,
+    hiddenMenu = false,
+    id,
+    onClick = () => {},
+    isRelative = true,
+    isMaxWidth = false,
+    isTag = false,
+    isClear = false,
+    clear = null,
+    applyButton = null,
+    applyButtonText = "Aplicar",
+    tagsParent = [],
+    isReadOnly,
+    isDisabledApplyButton = true,
+    isOpenMenu = undefined,
+}) => {
+    const [ids, setIds] = useState(new Set());
+    const [tags, setTags] = useState(new Map());
+
+    useEffect(() => {
+        if (idsOptionSelect === null) return;
+        setIds(new Set(new Set(idsOptionSelect)));
+    }, [idsOptionSelect]);
+
+    useEffect(() => {
+        if (tagsParent.length === 0) return;
+        const map = new Map();
+        tagsParent.forEach((item) => map.set(item.id, item));
+        setTags(map);
+    }, [tagsParent]);
+
+    useEffect(() => {
+        if (!isClear) return;
+        setIds(new Set());
+        setTags(new Map());
+        clear && clear();
+    }, [clear, isClear]);
+
+    const selectOption = (item) => {
+        let tagsMap = new Map(tags);
+        let set = new Set(ids);
+        let uuid = null;
+
+        if (defaultId !== null) {
+            item[propId] === defaultId && (uuid = crypto.randomUUID());
+            uuid !== null && (item[propId] = uuid);
+            uuid !== null && (item[propObject] = item[propObject].replace(textNewItem, "").trim());
+        }
+
+        set.has(item[propId]) ? set.delete(item[propId]) : set.add(item[propId]);
+        tagsMap.has(item[propId]) ? tagsMap.delete(item[propId]) : tagsMap.set(item[propId], item);
+
+        if (!isSelectMultiple) {
+            const arrSet = Array.from(set);
+            const arrMap = Array.from(tagsMap);
+            arrSet.shift();
+            arrMap.shift();
+            set = set.size === 2 ? new Set(arrSet) : set;
+            tagsMap = tagsMap.size === 2 ? new Map(arrMap) : tagsMap;
+        }
+
+        optionsSelect(item, Array.from(set), uuid !== null);
+        setIds(set);
+        setTags(tagsMap);
+    };
+
+    const handleClick = (isClose) => {
+        onClick(isClose === true ? -1 : id);
+    };
+
+    const deleteTag = (item) => {
+        const set = new Set(ids);
+        const tagsMap = new Map(tags);
+        set.delete(item[propId]);
+        tagsMap.delete(item[propId]);
+
+        optionsSelect(item, Array.from(set));
+        setIds(set);
+        setTags(tagsMap);
+    };
+
+    function capitalizeFirstLetter(text) {
+        if (typeof text !== "string") return text;
+        const textLowerCase = text.toLowerCase();
+        return textLowerCase.charAt(0).toUpperCase() + textLowerCase.slice(1);
+    }
+
+    return (
+        <Menu
+            as="div"
+            className={classNames(
+                "inline-block text-left",
+                isRelative && "relative",
+                classNameMenu !== "" && classNameMenu,
+            )}
+            onClick={() => handleClick(true)}
+            data-testid={`menu-${id}`}
+            id={id}
+        >
+            <style>{`
+                .blue {
+                    background-color: #3758F9;
+                }
+                .w-custom {
+                    width: 320px;
+                }
+                @media(min-width: 375px) {
+                    .w-custom {
+                        width: 375px;
+                    }
+                }
+                @media(min-width: 500px) {
+                    .w-custom {
+                        width: 414px;
+                    }
+                }
+            `}</style>
+            <Menu.Button
+                as="div"
+                onClick={() => handleClick(hiddenMenu)}
+                data-testid={`menu-button-${id}`}
+            >
+                {children}
+            </Menu.Button>
+            <div
+                className={classNames(
+                    "absolute right-0 z-10",
+                    classNameTooltip,
+                    hiddenMenu && "hidden",
+                    loading && "w-full",
+                )}
+            >
+                <Transition
+                    as={Fragment}
+                    enter="transition ease-out duration-100"
+                    enterFrom="transform opacity-0 scale-95"
+                    enterTo="transform opacity-100 scale-100"
+                    leave="transition ease-in duration-75"
+                    leaveFrom="transform opacity-100 scale-100"
+                    leaveTo="transform opacity-0 scale-95"
+                    show={isOpenMenu}
+                >
+                    <Menu.Items
+                        className={classNames(
+                            "mt-1 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none",
+                            loading ? "w-full" : classNameMenuItems === "" && "w-max",
+                            classNameMenuItems !== "" && classNameMenuItems,
+                        )}
+                    >
+                        {loading ? (
+                            <div className="flex justify-center py-4">
+                                <SpinnerIcon />
+                            </div>
+                        ) : (
+                            <div
+                                className={classNames(
+                                    !isComponent && "pb-1",
+                                    "divide-y divide-gray-100",
+                                    className !== "" && className,
+                                    isMaxWidth && "w-custom",
+                                )}
+                                data-testid="dropdown-menu"
+                            >
+                                <div className="flex justify-between items-center sticky top-0 bg-white w-full">
+                                    {search !== null && (
+                                        <div
+                                            className={classNames(
+                                                "py-2 w-full",
+                                                classNameContainerSearch,
+                                            )}
+                                        >
+                                            <Input
+                                                htmlFor="search"
+                                                id={`dropdown-search-${id}`}
+                                                name="search"
+                                                type="text"
+                                                placeholder={searchPlaceHolder}
+                                                handleChange={(e) => search(e, id)}
+                                                icon={
+                                                    searchPlaceHolder !== "" && (
+                                                        <MagnifyingGlassIcon className="w-4 h-4 text-indigo-300" />
+                                                    )
+                                                }
+                                                className="pl-5 pr-4 h-8"
+                                                classNameContainerInput="w-full"
+                                                value={valueSearch}
+                                                onKeyDown={(e) =>
+                                                    e.key === " " && e.stopPropagation()
+                                                }
+                                            />
+                                        </div>
+                                    )}
+                                    {applyButton !== null && (
+                                        <div className="pl-1 pr-2 pt-1.5">
+                                            <ButtonSolid
+                                                classNameButton="bg-secondary-2 hover:bg-secondary-3 font-medium px-5 py-1.5 rounded-md"
+                                                outline={
+                                                    ids.size === 0 && isDisabledApplyButton
+                                                        ? ""
+                                                        : "0px 0px 0px 2px #3758F9, 0px 0px 0px 2px #243BBD, 0px 1px 2px 0px rgba(0, 0, 0, 0.05)"
+                                                }
+                                                classNameText="text-sm text-white text-center"
+                                                id="apply"
+                                                disabled={ids.size === 0 && isDisabledApplyButton}
+                                                onClick={() =>
+                                                    applyButton({
+                                                        id,
+                                                        items: Array.from(tags.values()),
+                                                    })
+                                                }
+                                            >
+                                                {applyButtonText}
+                                            </ButtonSolid>
+                                        </div>
+                                    )}
+                                </div>
+                                {isTag && !isReadOnly && (
+                                    <div className="flex flex-wrap ml-7 pt-1">
+                                        {Array.from(tags).map((item, index) => (
+                                            <div
+                                                key={item}
+                                                className={classNames(index > 0 && "ml-1")}
+                                            >
+                                                <span className="inline-flex items-center gap-x-0.5 rounded-md bg-gray-100 px-2 py-1 text-xs font-medium text-gray-600 mb-1">
+                                                    {item[1][propObject]}
+                                                    <button
+                                                        type="button"
+                                                        className="p-0.5 rounded-sm bg-gray-100 hover:bg-gray-300"
+                                                        onClick={() => deleteTag(item[1])}
+                                                        data-testid={`tag-${item[0]}`}
+                                                    >
+                                                        <XMarkIcon className="h-2.5 w-2.5 stroke-gray-700/50 group-hover:stroke-gray-700/75" />
+                                                    </button>
+                                                </span>
+                                            </div>
+                                        ))}
+                                    </div>
+                                )}
+                                {(isReadOnly ? [] : data).map((item, index) => (
+                                    <div key={index} className={classNames(!isComponent && "py-1")}>
+                                        {isComponent ? (
+                                            <div
+                                                onClick={(e) => {
+                                                    e.preventDefault();
+                                                    optionsSelect();
+                                                }}
+                                                data-testid={`item-component-${index}`}
+                                            >
+                                                {item}
+                                            </div>
+                                        ) : (
+                                            <Menu.Item>
+                                                <span
+                                                    className={classNames(
+                                                        ids.has(item[propId]) && "blue text-white",
+                                                        !ids.has(item[propId]) &&
+                                                            "text-gray-700 hover:bg-gray-100 hover:text-gray-900",
+                                                        "block px-4 py-2 text-13 lg:text-sm cursor-pointer font-normal",
+                                                    )}
+                                                    data-testid={`item-${index}`}
+                                                    onClick={(e) => {
+                                                        e.preventDefault();
+                                                        selectOption(item);
+                                                    }}
+                                                >
+                                                    {capitalizeFirstLetter(item[propObject])}
+                                                </span>
+                                            </Menu.Item>
+                                        )}
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </Menu.Items>
+                </Transition>
+            </div>
+        </Menu>
+    );
+};
+
+export default Dropdown;

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

@@ -0,0 +1,190 @@
+import { render, fireEvent, act } from "@testing-library/react";
+import Dropdown from "./index";
+
+describe("Dropdown", () => {
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
+    it("renders Dropdown component without errors", () => {
+        render(
+            <Dropdown
+                isRelative={false}
+                data={[
+                    { name: "data1", id: 1 },
+                    { name: "data2", id: 2 },
+                ]}
+                loading
+                classNameMenuItems="text-xs"
+                hiddenMenu
+            >
+                <p>List1</p>
+                <p>List2</p>
+                <p>List3</p>
+            </Dropdown>,
+        );
+    });
+
+    it("select option", async () => {
+        const mockOptionsSelect = jest.fn();
+        const mockOnClick = jest.fn();
+        const component = render(
+            <Dropdown
+                data={[
+                    { name: "data1", id: 1 },
+                    { name: "data2", id: 2 },
+                    { name: "data3", id: 3 },
+                    { name: 4, id: 4 },
+                ]}
+                defaultId={1}
+                propObject="name"
+                optionsSelect={mockOptionsSelect}
+                className="w-full"
+                isMaxWidth
+                id="dropdown-test"
+                onClick={mockOnClick}
+                classNameMenu="text-xs"
+                textNewItem="data6"
+            >
+                <p>dropdown</p>
+            </Dropdown>,
+        );
+        const menuButton = component.getByTestId("menu-button-dropdown-test");
+        const menu = component.getByTestId("menu-dropdown-test");
+        await act(async () => fireEvent.click(menu));
+        await act(async () => fireEvent.click(menuButton));
+        expect(mockOnClick).toHaveBeenCalledWith(-1);
+
+        const item1 = component.getByTestId("item-0");
+        const item2 = component.getByTestId("item-1");
+        const item3 = component.getByTestId("item-2");
+        await act(async () => fireEvent.click(item1));
+        expect(item1).toHaveClass("blue text-white");
+        await act(async () => fireEvent.click(item1));
+        await act(async () => fireEvent.click(item2));
+        expect(item2).toHaveClass("blue text-white");
+        expect(item1).toHaveClass("text-gray-700 hover:bg-gray-100 hover:text-gray-900");
+        await act(async () => fireEvent.click(item3));
+        expect(item3).toHaveClass("blue text-white");
+        expect(mockOptionsSelect).toHaveBeenCalledTimes(4);
+    });
+
+    it("select multiple option", async () => {
+        const component = render(
+            <Dropdown
+                data={[
+                    { name: "data1", id: 1 },
+                    { name: "data2", id: 2 },
+                    { name: "data3", id: 3 },
+                    { name: "data4", id: 4 },
+                ]}
+                propObject="name"
+                isSelectMultiple
+                optionsSelect={() => {}}
+                id="dropdown-test"
+                isTag
+            >
+                <p>dropdown</p>
+            </Dropdown>,
+        );
+        const menuButton = component.getByTestId("menu-button-dropdown-test");
+        await act(async () => fireEvent.click(menuButton));
+
+        const item1 = component.getByTestId("item-1");
+        const item2 = component.getByTestId("item-2");
+        const item3 = component.getByTestId("item-3");
+        await act(async () => fireEvent.click(item1));
+        await act(async () => fireEvent.click(item2));
+        await act(async () => fireEvent.click(item3));
+
+        expect(item1).toHaveClass("blue text-white");
+        expect(item2).toHaveClass("blue text-white");
+        expect(item3).toHaveClass("blue text-white");
+
+        const tags = component.getAllByTestId(/tag-/i);
+        expect(tags.length).toBe(3);
+        await act(async () => fireEvent.click(tags[1]));
+
+        const tags2 = component.getAllByTestId(/tag-/i);
+        expect(tags2.length).toBe(2);
+
+        await act(async () => fireEvent.click(item3));
+        expect(item3).toHaveClass("text-gray-700 hover:bg-gray-100 hover:text-gray-900");
+    });
+
+    it("search input", async () => {
+        const mockSearch = jest.fn();
+        const component = render(
+            <Dropdown
+                data={["item1", "item2", "item3"]}
+                isComponent
+                optionsSelect={() => {}}
+                id="dropdown-test"
+                isTag
+                idOptionSelect={0}
+                search={mockSearch}
+            >
+                <p>dropdown</p>
+            </Dropdown>,
+        );
+        const menuButton = component.getByTestId("menu-button-dropdown-test");
+        await act(async () => fireEvent.click(menuButton));
+        const item = component.getByTestId("item-component-1");
+        fireEvent.click(item);
+
+        const input = component.getByTestId("input-dropdown-search-dropdown-test");
+        fireEvent.change(input, { target: { value: "data2" } });
+        fireEvent.keyDown(input, { key: " ", keyCode: 32 });
+        expect(mockSearch).toHaveBeenCalled();
+    });
+
+    it("applyButton", async () => {
+        const mockApplyButton = jest.fn();
+        const component = render(
+            <Dropdown
+                data={[
+                    { name: "data1", id: 1 },
+                    { name: "data2", id: 2 },
+                    { name: "data3", id: 3 },
+                ]}
+                optionsSelect={() => {}}
+                id="dropdown-test"
+                onClick={() => {}}
+                applyButton={mockApplyButton}
+            >
+                <p>dropdown</p>
+            </Dropdown>,
+        );
+        const menuButton = component.getByTestId("menu-button-dropdown-test");
+        await act(async () => fireEvent.click(menuButton));
+        const item = component.getByTestId("item-1");
+        fireEvent.click(item);
+
+        const button = component.getByTestId("button-solid-apply");
+        fireEvent.click(button);
+        expect(mockApplyButton).toHaveBeenCalled();
+    });
+
+    it("clear ids and tags", async () => {
+        const mockClear = jest.fn();
+        render(
+            <Dropdown
+                data={[
+                    { name: "data1", id: 1 },
+                    { name: "data2", id: 2 },
+                    { name: "data3", id: 3 },
+                ]}
+                id="dropdown-test"
+                idsOptionSelect={[1]}
+                isChangeOptionIdsOptionSelect
+                tagsParent={[{ id: 1 }]}
+                clear={mockClear}
+                isClear
+                isReadOnly
+            >
+                <p>dropdown</p>
+            </Dropdown>,
+        );
+        expect(mockClear).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,103 @@
+// 1.- libraries
+import { Fragment } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { CheckIcon } from "@heroicons/react/24/outline";
+
+// 2.- components
+import ButtonSolid from "../../atoms/ButtonSolid";
+
+// 3.- utils
+import { classNames } from "../../../utils";
+
+export default function Modal({
+    children,
+    className = "sm:max-w-sm w-11/12 sm:my-8",
+    classNameContainer = "",
+    isOpen = false,
+    setIsOpen,
+    showIconSuccess = true,
+    showButton = true,
+}) {
+    return (
+        <>
+            <style>{`
+                .bg-opacity-35 {
+                    opacity: .35;
+                }
+            `}</style>
+            <Transition.Root show={isOpen} as={Fragment}>
+                <Dialog
+                    as="div"
+                    className="relative z-50 relative"
+                    onClose={setIsOpen}
+                    data-testid="modal"
+                >
+                    <Transition.Child
+                        as={Fragment}
+                        enter="ease-out duration-300"
+                        enterFrom="opacity-0"
+                        enterTo="opacity-100"
+                        leave="ease-in duration-200"
+                        leaveFrom="opacity-100"
+                        leaveTo="opacity-0"
+                    >
+                        <div
+                            className="fixed inset-0 bg-opacity-35 bg-gray-900 transition-opacity"
+                            data-testid="window-close"
+                            onClick={() => setIsOpen(false)}
+                        />
+                    </Transition.Child>
+
+                    <div className="fixed inset-0 z-10 overflow-y-auto">
+                        <div className="flex min-h-full items-center justify-center xs:p-2 p-4 text-center sm:items-center sm:p-0">
+                            <Transition.Child
+                                as={Fragment}
+                                enter="ease-out duration-300"
+                                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                                enterTo="opacity-100 translate-y-0 sm:scale-100"
+                                leave="ease-in duration-200"
+                                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+                                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                            >
+                                <Dialog.Panel
+                                    className={classNames(
+                                        "relative transform rounded-lg bg-white px-4 pb-3 pt-5 text-left shadow-xl transition-all sm:w-full sm:pt-3 sm:px-3",
+                                        className !== "" && className,
+                                    )}
+                                >
+                                    {showIconSuccess && (
+                                        <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+                                            <CheckIcon
+                                                className="h-6 w-6 text-green-600"
+                                                aria-hidden="true"
+                                            />
+                                        </div>
+                                    )}
+                                    <div
+                                        className={classNames(
+                                            classNameContainer !== "" && classNameContainer,
+                                        )}
+                                        data-testid="content"
+                                    >
+                                        {children}
+                                    </div>
+                                    {showButton && (
+                                        <div className="mt-5 sm:mt-6">
+                                            <ButtonSolid
+                                                id="close-modal"
+                                                onClick={() => setIsOpen(false)}
+                                            >
+                                                Cerrar
+                                            </ButtonSolid>
+                                        </div>
+                                    )}
+                                    <button className="opacity-0 absolute"></button>
+                                </Dialog.Panel>
+                            </Transition.Child>
+                        </div>
+                    </div>
+                </Dialog>
+            </Transition.Root>
+        </>
+    );
+}

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

@@ -0,0 +1,42 @@
+import { render, fireEvent, act } from "@testing-library/react";
+import Modal from "./index";
+
+global.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+};
+
+describe("Modal", () => {
+    it("renders Modal component without errors", () => {
+        render(
+            <Modal open={false}>
+                <p>text modal</p>
+            </Modal>,
+        );
+    });
+
+    it("close modal window", async () => {
+        const setSidebarOpenMock = jest.fn();
+        const component = render(
+            <Modal isOpen={true} setIsOpen={setSidebarOpenMock} classNameContainer="w-full">
+                <p>text modal</p>
+            </Modal>,
+        );
+        const close = component.getByTestId("window-close");
+        await act(async () => fireEvent.click(close));
+        expect(setSidebarOpenMock).toHaveBeenCalled();
+    });
+
+    it("close modal", async () => {
+        const setSidebarOpenMock = jest.fn();
+        const component = render(
+            <Modal isOpen={true} setIsOpen={setSidebarOpenMock} classNameContainer="w-full">
+                <p>text modal</p>
+            </Modal>,
+        );
+        const close = component.getByTestId("button-solid-close-modal");
+        await act(async () => fireEvent.click(close));
+        expect(setSidebarOpenMock).toHaveBeenCalled();
+    });
+});