cemtrik-dependencies 1.0.4

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

@@ -0,0 +1,74 @@
+// 1.- libraries
+import { useState } from "react";
+import classnames from "classnames";
+
+// 2.- utils
+import { classNames } from "../../../utils";
+
+const ButtonSolid = ({
+    children,
+    classNameButton = "bg-indigo-600 hover:bg-indigo-700 focus-visible:outline-indigo-600 shadow-indigo-500 rounded font-semibold px-3 py-1.5 text-white w-full",
+    classNameText = "",
+    icon = null,
+    edge = null,
+    disabled = false,
+    type = "button",
+    onClick,
+    id,
+    outline = "0px 0px 0px 2px #6366F1, 0px 0px 0px 2px #FFF, 0px 1px 2px 0px rgba(0, 0, 0, 0.05)",
+    classNameContainer = "",
+}) => {
+    const [isShadow, setIsShadow] = useState(false);
+
+    const classText = classnames({
+        "ml-2": edge === "start" && icon !== null,
+        "mr-2": edge === "end" && icon !== null,
+    });
+
+    const handleClick = () => {
+        onClick && onClick();
+    };
+
+    return (
+        <div
+            className={classNames(
+                "rounded-md p-0.5",
+                classNameContainer !== "" && classNameContainer,
+            )}
+            style={{
+                boxShadow: isShadow
+                    ? outline
+                    : "0px 0px 0px 0px #6366F1, 0px 0px 0px 0px #FFF, 0px 0px 0px 0px rgba(0, 0, 0, 0.05)",
+                transition: "box-shadow .1s ease-in-out",
+            }}
+            data-testid="container-button"
+        >
+            <button
+                className={classNames(
+                    "flex justify-center items-center text-sm leading-6 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
+                    disabled && "text-white bg-gray-300 rounded focus:outline-none cursor-default",
+                    disabled ? classNameButton.replace(/\bbg-\w+\b/g, "") : classNameButton,
+                )}
+                type={type}
+                onClick={handleClick}
+                onFocus={() => setIsShadow(true)}
+                onBlur={() => setIsShadow(false)}
+                disabled={disabled}
+                data-testid={`button-solid-${id}`}
+            >
+                {edge === "start" && icon !== null && <span className="flex">{icon}</span>}
+                <span
+                    className={classNames(
+                        classNameText.length === 0 && classText,
+                        classNameText.length !== 0 && classNameText,
+                    )}
+                >
+                    {children}
+                </span>
+                {edge === "end" && icon !== null && <span>{icon}</span>}
+            </button>
+        </div>
+    );
+};
+
+export default ButtonSolid;

package/src/components/atoms/ButtonSolid/index.test.js

@@ -0,0 +1,59 @@
+import { render, fireEvent } from "@testing-library/react";
+import Button from "./index";
+
+describe("Button", () => {
+    it("renders Button component without errors", () => {
+        render(
+            <Button disabled classNameText="text-xs" type="button">
+                Click
+            </Button>,
+        );
+    });
+
+    it("button with icon start", () => {
+        const component = render(
+            <Button
+                id="test"
+                edge="start"
+                icon={<span className="icon-inbox" data-testid="icon-start"></span>}
+                classNameContainer="tex-xs"
+            >
+                Click
+            </Button>,
+        );
+        const iconStart = component.getByTestId("icon-start");
+        expect(iconStart).toHaveClass("icon-inbox");
+    });
+
+    it("button with icon end", () => {
+        const component = render(
+            <Button
+                id="test"
+                edge="end"
+                icon={<span className="icon-inbox" data-testid="icon-end"></span>}
+            >
+                Click
+            </Button>,
+        );
+        const iconEnd = component.getByTestId("icon-end");
+        expect(iconEnd).toHaveClass("icon-inbox");
+    });
+
+    it("focus button", () => {
+        const handleClickMock = jest.fn();
+        const outline = "0px 0px 0px 0px red, 0px 0px 0px 0px blue, 0px 0px 0px 0px yellow";
+        const component = render(
+            <Button id="test" onClick={handleClickMock} classNameButton="w-full" outline={outline}>
+                Click
+            </Button>,
+        );
+        const containerButton = component.getByTestId("container-button");
+        const button = component.getByTestId("button-solid-test");
+
+        fireEvent.focus(button);
+        expect(containerButton).toHaveStyle(`box-shadow: ${outline}`);
+        fireEvent.blur(button);
+        fireEvent.click(button);
+        expect(handleClickMock).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,52 @@
+// 1.- libraries
+import { useState, useEffect } from "react";
+
+// 2.- utils
+import { classNames } from "../../../utils";
+
+const Checkbox = ({
+    label = null,
+    checked = false,
+    onChange,
+    id,
+    className = "",
+    classNameCheckbox = "h-4 w-4",
+    style = {},
+    disabled = false,
+}) => {
+    const [checkedCheckbox, setCheckedCheckbox] = useState(false);
+    useEffect(() => {
+        setCheckedCheckbox(checked);
+    }, [checked]);
+    return (
+        <div className="flex items-center" style={style} data-testid={`container-check-${id}`}>
+            <input
+                checked={checkedCheckbox}
+                id={`${label}-${id}`}
+                value={id}
+                aria-describedby="comments-description"
+                type="checkbox"
+                onChange={onChange}
+                className={classNames(
+                    "cursor-pointer rounded border-gray-300 text-indigo-600 focus:ring-indigo-600",
+                    classNameCheckbox !== "" && classNameCheckbox,
+                )}
+                data-testid={`checkbox-${id}`}
+                disabled={disabled}
+            />
+
+            {label !== null ? (
+                <label
+                    htmlFor={`${label}-${id}`}
+                    className={`ml-2.5 font-normal cursor-pointer ${className}`}
+                    id={`label-${id}`}
+                    data-testid="label"
+                >
+                    {label}
+                </label>
+            ) : null}
+        </div>
+    );
+};
+
+export default Checkbox;

package/src/components/atoms/Checkbox/index.test.js

@@ -0,0 +1,15 @@
+import { render } from "@testing-library/react";
+import Checkbox from "./index";
+
+describe("Checkbox", () => {
+    it("renders Checkbox component without errors", () => {
+        render(<Checkbox bgColor="bg-white" className="h-3 w-3" onChange={() => {}} id="header" />);
+    });
+
+    it("label", () => {
+        const component = render(<Checkbox onChange={() => {}} id="header" label="test" />);
+        const label = component.getByTestId("label");
+
+        expect(label.textContent).toBe("test");
+    });
+});

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

@@ -0,0 +1,70 @@
+// 1.- libraries
+
+// 2.- components
+import Modal from "../../molecules/Modal";
+import ButtonSolid from "../ButtonSolid";
+import ButtonOutline from "../ButtonOutline";
+
+// 3.- utils
+import { classNames } from "../../../utils";
+
+const ConfirmationAbandoningCreation = ({
+    isOpenModalConfirmation,
+    setIsOpenModalConfirmation,
+    close,
+    title = "¿Estás seguro de abandonar la creación de la acción?",
+    description = "La información se perderá si no creas la acción",
+    classNameTitle = "",
+    classNameDescription = "",
+}) => {
+    const closeModal = () => {
+        setIsOpenModalConfirmation(false);
+        close();
+    };
+
+    return (
+        <Modal
+            isOpen={isOpenModalConfirmation}
+            setIsOpen={() => setIsOpenModalConfirmation()}
+            showButton={false}
+            showIconSuccess={false}
+        >
+            <p
+                className={classNames(
+                    "text-center text-sm",
+                    classNameTitle !== "" && classNameTitle,
+                )}
+            >
+                {title}
+            </p>
+            <p
+                className={classNames(
+                    "text-center text-sm",
+                    classNameDescription !== "" && classNameDescription,
+                )}
+            >
+                {description}
+            </p>
+
+            <div className="flex w-full justify-center mt-5">
+                <ButtonOutline
+                    className="rounded-md bg-white text-gray-500 text-sm shadow-sm ring-1 ring-inset ring-gray-300 bg-gray-50 w-24 h-9 mr-6"
+                    onClick={() => setIsOpenModalConfirmation()}
+                    id="cancel"
+                >
+                    Cancelar
+                </ButtonOutline>
+                <ButtonSolid
+                    classNameButton="bg-secondary-2 hover:bg-secondary-3 focus-visible:outline-secondary-2 shadow-secondary-2 rounded py-1.5 text-white w-full px-5"
+                    outline="0px 0px 0px 2px #3758F9, 0px 0px 0px 2px #243BBD, 0px 1px 2px 0px rgba(0, 0, 0, 0.05)"
+                    onClick={closeModal}
+                    id="confirmation"
+                >
+                    Aceptar
+                </ButtonSolid>
+            </div>
+        </Modal>
+    );
+};
+
+export default ConfirmationAbandoningCreation;

package/src/components/atoms/ConfirmationAbandoningCreation/index.test.js

@@ -0,0 +1,70 @@
+import { render, fireEvent } from "@testing-library/react";
+import ConfirmationAbandoningCreation from "./index";
+
+global.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+};
+
+describe("ConfirmationAbandoningCreation", () => {
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
+    it("renders ConfirmationAbandoningCreation component without errors", () => {
+        render(
+            <ConfirmationAbandoningCreation
+                isOpenModalConfirmation={false}
+                setIsOpenModalConfirmation={() => {}}
+                close={() => {}}
+                classNameDescription="text-sm"
+                classNameTitle="text-sm"
+            />,
+        );
+    });
+
+    it("close modal", () => {
+        const mockSetIsOpenModalConfirmation = jest.fn();
+        const component = render(
+            <ConfirmationAbandoningCreation
+                isOpenModalConfirmation
+                setIsOpenModalConfirmation={mockSetIsOpenModalConfirmation}
+                close={() => {}}
+                title="title"
+                description="description"
+            />,
+        );
+        const close = component.getByTestId("window-close");
+        fireEvent.click(close);
+        expect(mockSetIsOpenModalConfirmation).toHaveBeenCalled();
+    });
+
+    it("button cancel", () => {
+        const mockSetIsOpenModalConfirmation = jest.fn();
+        const component = render(
+            <ConfirmationAbandoningCreation
+                isOpenModalConfirmation
+                setIsOpenModalConfirmation={mockSetIsOpenModalConfirmation}
+                close={() => {}}
+            />,
+        );
+        const button = component.getByTestId("button-outline-cancel");
+        fireEvent.click(button);
+        expect(mockSetIsOpenModalConfirmation).toHaveBeenCalled();
+    });
+
+    it("button accept", () => {
+        const mockClose = jest.fn();
+        const component = render(
+            <ConfirmationAbandoningCreation
+                isOpenModalConfirmation
+                setIsOpenModalConfirmation={() => {}}
+                close={mockClose}
+            />,
+        );
+        const button = component.getByTestId("button-solid-confirmation");
+        fireEvent.click(button);
+        expect(mockClose).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,10 @@
+// 1.- libraries
+
+// 2.- utils
+import { classNames } from "../../../utils";
+
+const Divider = ({ className = "", style = {} }) => {
+    return <div className={classNames("w-px", className !== "" && className)} style={style}></div>;
+};
+
+export default Divider;

package/src/components/atoms/Divider/index.test.js

@@ -0,0 +1,12 @@
+import { render } from "@testing-library/react";
+import Divider from "./index";
+
+describe("Divider", () => {
+    it("renders Divider component without errors", () => {
+        render(<Divider />);
+    });
+
+    it("className", () => {
+        render(<Divider className="mt-2" />);
+    });
+});

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

@@ -0,0 +1,30 @@
+// 1.- libraries
+
+// 2.- icons
+import { ChevronLeftIcon } from "@heroicons/react/24/solid";
+
+// 3.- utils
+import { classNames } from "../../../utils";
+
+const GoBack = ({ onClick, id = "", className = "" }) => {
+    return (
+        <div
+            className={classNames(
+                "flex items-center text-default-5",
+                className !== "" && className,
+            )}
+            data-testid={id}
+        >
+            <ChevronLeftIcon
+                className="w-3 h-3 3xs:w-4 3xs:h-4 stroke-current cursor-pointer"
+                data-testid="chevron-left-icon"
+                onClick={onClick}
+            />
+            <span onClick={onClick} className="text-sm cursor-pointer" data-testid="go-back">
+                Volver
+            </span>
+        </div>
+    );
+};
+
+export default GoBack;

package/src/components/atoms/GoBack/index.test.js

@@ -0,0 +1,24 @@
+import { render, fireEvent } from "@testing-library/react";
+import GoBack from "./index";
+
+describe("GoBack", () => {
+    it("renders GoBack component without errors", () => {
+        render(<GoBack onClick={() => {}} className="text-sm" />);
+    });
+
+    it("go back with icon", () => {
+        const mockOnClick = jest.fn();
+        const component = render(<GoBack onClick={mockOnClick} />);
+        const goBack = component.getByTestId("chevron-left-icon");
+        fireEvent.click(goBack);
+        expect(mockOnClick).toHaveBeenCalled();
+    });
+
+    it("go back", () => {
+        const mockOnClick = jest.fn();
+        const component = render(<GoBack onClick={mockOnClick} />);
+        const goBack = component.getByTestId("go-back");
+        fireEvent.click(goBack);
+        expect(mockOnClick).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,107 @@
+// 1.- libraries
+import { useState } from "react";
+import classnames from "classnames";
+import { ExclamationCircleIcon } from "@heroicons/react/20/solid";
+
+// 2.- utils
+import { validateEmail, classNames } from "../../../utils";
+
+const Input = ({
+    placeholder = "",
+    label = "",
+    htmlFor,
+    type = "text",
+    name,
+    handleChange,
+    onClick = () => {},
+    value,
+    isReadOnly = false,
+    isError = false,
+    helperText = "",
+    autocomplete = "on",
+    id,
+    classNameLabel = "",
+    classNameContainerInput = "",
+    classNameContainer = "",
+    className = "",
+    icon = null,
+    onKeyDown,
+    onFocus,
+}) => {
+    const [isErrorEmail, setIsErrorEmail] = useState(false);
+
+    const classnamesInput = classnames({
+        "ring-red-300 focus:ring-red-300 text-red-900": isError || isErrorEmail,
+        "focus:ring-indigo-600 text-gray-500": !isError && !isErrorEmail,
+    });
+
+    const onChange = (e) => {
+        handleChange && handleChange(e);
+        if (type !== "email") return;
+
+        const { value } = e.target;
+        const isEmail = validateEmail(value);
+        setIsErrorEmail(!isEmail);
+    };
+
+    return (
+        <div data-testid={`container-input-${id}`} className={classNameContainer}>
+            {label !== "" && (
+                <label
+                    htmlFor={htmlFor}
+                    className={classNames(
+                        "block text-sm font-medium leading-6",
+                        classNameLabel !== "" ? classNameLabel : "text-gray-700",
+                    )}
+                    data-testid={`label-${id}`}
+                >
+                    {label}
+                </label>
+            )}
+            <div
+                className={classNames(
+                    "relative mt-1 rounded-md",
+                    classNameContainerInput !== "" && classNameContainerInput,
+                )}
+            >
+                <input
+                    id={id}
+                    name={name}
+                    type={type}
+                    autoComplete={autocomplete}
+                    placeholder={placeholder}
+                    onChange={onChange}
+                    onClick={onClick}
+                    onKeyDown={onKeyDown}
+                    onFocus={onFocus}
+                    value={value}
+                    readOnly={isReadOnly}
+                    data-testid={`input-${id}`}
+                    className={classNames(
+                        "block w-full rounded-md border-0 py-1.5 shadow-sm placeholder-gray-300 ring-1 ring-gray-300 ring-inset focus:ring-1 focus:ring-inset text-sm sm:leading-6",
+                        classnamesInput,
+                        className !== "" && className,
+                    )}
+                />
+                {icon !== null && (
+                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">{icon}</div>
+                )}
+                {isError && icon === null && (
+                    <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                        <ExclamationCircleIcon
+                            className="h-5 w-5 text-red-500"
+                            aria-hidden="true"
+                        />
+                    </div>
+                )}
+            </div>
+            {helperText.length === 0 || !isError ? null : (
+                <p className="text-red-600 text-sm text-left mt-1" data-testid={`helperText-${id}`}>
+                    {helperText}
+                </p>
+            )}
+        </div>
+    );
+};
+
+export default Input;

package/src/components/atoms/Input/index.test.js

@@ -0,0 +1,63 @@
+import { render, fireEvent } from "@testing-library/react";
+import Input from "./index";
+
+describe("Input", () => {
+    it("renders Input component without errors", () => {
+        render(<Input name="email" handleChange={() => {}} value="example.com" id="email" />);
+    });
+
+    it("input success", () => {
+        const component = render(
+            <Input
+                placeholder="email"
+                label="Email"
+                type="email"
+                htmlFor="email"
+                name="email"
+                handleChange={() => {}}
+                value="example.com"
+                id="email"
+                isError={false}
+                helperText="Email required"
+                classNameLabel="w-100"
+                classNameContainerInput="text-sm"
+                className="w-1/2"
+                icon={<span>Icon</span>}
+            />,
+        );
+
+        const labelEmail = component.getByTestId("label-email");
+        const input = component.getByTestId("input-email");
+        fireEvent.change(input, { target: { value: "test@gmail.com" } });
+        fireEvent.click(input);
+
+        expect(labelEmail.textContent).toBe("Email");
+        expect(input).not.toHaveClass("ring-red-300 focus:ring-red-300");
+    });
+
+    it("input error", () => {
+        const mockOnClick = jest.fn();
+        const component = render(
+            <Input
+                placeholder="email"
+                label="Email"
+                htmlFor="email"
+                name="email"
+                handleChange={() => {}}
+                onClick={mockOnClick}
+                value="example.com"
+                id="email"
+                isError={true}
+                helperText="Email required"
+            />,
+        );
+        const helperText = component.getByTestId("helperText-email");
+        const input = component.getByTestId("input-email");
+        fireEvent.change(input, { target: { value: "test@gmail.com" } });
+        fireEvent.click(input);
+
+        expect(mockOnClick).toHaveBeenCalled();
+        expect(helperText.textContent).toBe("Email required");
+        expect(input).toHaveClass("ring-red-300 focus:ring-red-300");
+    });
+});