@boxcustodia/library 2.0.0-alpha.10 → 2.0.0-alpha.12

package/src/hooks/useObject/__doc__/useObject.stories.tsx

@@ -0,0 +1,119 @@
+import { Meta } from "@storybook/react-vite";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button, Input } from "../../../components";
+import useObject from "../useObject";
+
+/**
+ * Hook para manejar un estado en forma de objeto
+ *
+ * `@param initialValue` - Valor inicial del estado, se recomienda pasar para evitar el caso donde el estado `T` pueda ser `T | undefined`
+ *
+ * `@returns` [state, setState, reset]
+ */
+const meta: Meta = {
+  title: "hooks/useObject",
+};
+
+export default meta;
+
+interface Form {
+  name: string;
+  email: string;
+}
+
+function Results({ state }: { state?: Record<string, any> }) {
+  if (!state) return;
+  return (
+    <pre className="rounded-md bg-slate-950 p-4 text-white">
+      {Object.keys(state).map((key, i) => (
+        <code className="block flex gap-2" key={i}>
+          <span>{key}:</span>
+          <span className="text-blue-300">
+            {JSON.stringify(state[key as string], null, 2)}
+          </span>
+        </code>
+      ))}
+    </pre>
+  );
+}
+
+export const Default = {
+  render: () => {
+    const [state, setState, reset] = useObject<Form>({ name: "", email: "" });
+
+    return (
+      <div className="grid gap-2">
+        <Input
+          name="name"
+          autoComplete="0"
+          value={state?.name}
+          onChange={(name) =>
+            setState({
+              name,
+            })
+          }
+        />
+        <Input
+          name="email"
+          autoComplete="0"
+          value={state?.email}
+          onChange={(email) =>
+            setState({
+              email,
+            })
+          }
+        />
+
+        <Button type="button" onClick={reset}>
+          Reset
+        </Button>
+
+        <Results state={state} />
+      </div>
+    );
+  },
+};
+
+interface Counter {
+  count: number;
+}
+
+export const Counter = {
+  render: () => {
+    const [state, setState, reset] = useObject<Counter>({ count: 0 });
+
+    return (
+      <div className="space-y-2">
+        <div className="flex items-center gap-x-2">
+          <Button
+            size="icon"
+            variant="ghost"
+            onClick={() =>
+              setState((state) => ({
+                count: state.count - 1,
+              }))
+            }
+          >
+            <ChevronLeft />
+          </Button>
+          {state?.count}
+          <Button
+            size="icon"
+            variant="ghost"
+            onClick={() =>
+              setState((state) => ({
+                count: state.count + 1,
+              }))
+            }
+          >
+            <ChevronRight />
+          </Button>
+          <Button type="button" onClick={reset}>
+            Reset
+          </Button>
+        </div>
+        <Results state={state} />
+      </div>
+    );
+  },
+};

package/src/hooks/useObject/__test__/useObject.test.tsx

@@ -0,0 +1,87 @@
+import { renderHook } from "@testing-library/react";
+import { act } from "react";
+import { describe, expect, it } from "vitest";
+import useObject from "../useObject";
+
+describe("useObject hook", () => {
+  it("should initialize with default state", () => {
+    const initialValue = { count: 0 };
+    const { result } = renderHook(() => useObject(initialValue));
+
+    expect(result.current[0]).toEqual(initialValue);
+  });
+
+  it("should handle object updates", () => {
+    const initialValue = { count: 0 };
+    const { result } = renderHook(() => useObject<{}>(initialValue));
+
+    act(() => {
+      result.current[1]({ count: 1 });
+    });
+
+    expect(result.current[0]).toEqual({ count: 1 });
+
+    act(() => {
+      result.current[1]({ name: "test" });
+    });
+
+    expect(result.current[0]).toEqual({ count: 1, name: "test" });
+  });
+
+  it("should handle function updates", () => {
+    const initialValue = { count: 0 };
+    const { result } = renderHook(() => useObject(initialValue));
+
+    act(() => {
+      result.current[1]((state) => ({ count: (state?.count ?? 0) + 1 }));
+    });
+
+    expect(result.current[0]).toEqual({ count: 1 });
+
+    act(() => {
+      result.current[1]((state) => ({ count: (state?.count ?? 0) + 1 }));
+    });
+
+    expect(result.current[0]).toEqual({ count: 2 });
+  });
+
+  it("should reset to initial value", () => {
+    const initialValue = { count: 0 };
+    const { result } = renderHook(() => useObject(initialValue));
+
+    act(() => {
+      result.current[1]({ count: 1 });
+    });
+
+    expect(result.current[0]).toEqual({ count: 1 });
+
+    act(() => {
+      result.current[2](); // reset
+    });
+
+    expect(result.current[0]).toEqual(initialValue);
+  });
+
+  it("should initialize with undefined if no initial value is provided", () => {
+    const { result } = renderHook(() => useObject());
+
+    expect(result.current[0]).toBeUndefined();
+  });
+
+  it("should handle partial updates", () => {
+    const initialValue = { count: 0, name: "initial" };
+    const { result } = renderHook(() => useObject(initialValue));
+
+    act(() => {
+      result.current[1]({ count: 1 });
+    });
+
+    expect(result.current[0]).toEqual({ count: 1, name: "initial" });
+
+    act(() => {
+      result.current[1]({ name: "updated" });
+    });
+
+    expect(result.current[0]).toEqual({ count: 1, name: "updated" });
+  });
+});

package/src/hooks/useObject/index.ts

@@ -0,0 +1 @@
+export { default as useObject } from "./useObject";

package/src/hooks/useObject/useObject.tsx

@@ -0,0 +1,48 @@
+import { isFunction, isObject } from "lodash";
+import { useCallback, useState } from "react";
+
+type GenericObject = Record<string, any>;
+type Return<
+  TState,
+  TArgs = ((state: TState) => Partial<TState>) | Partial<TState>,
+> = [TState, (arg: TArgs) => void, () => void];
+type MaybeReturn<TState> = Return<
+  TState | undefined,
+  ((state: TState | undefined) => Partial<TState>) | Partial<TState>
+>;
+
+function useObject<T extends GenericObject>(): MaybeReturn<T>;
+function useObject<T extends GenericObject>(initialValue: T): Return<T>;
+function useObject<T extends GenericObject>(initialValue?: T) {
+  const [state, setState] = useState<T | undefined>(initialValue);
+
+  const reset = useCallback(() => setState(initialValue), [initialValue]);
+
+  const setNewState = useCallback(
+    (arg: ((state: T | undefined) => Partial<T>) | Partial<T>) => {
+      setState((prevState) => {
+        if (isFunction(arg)) {
+          const newState = arg(prevState);
+          if (isObject(newState)) {
+            return {
+              ...prevState,
+              ...newState,
+            } as T;
+          }
+          return prevState;
+        } else if (isObject(arg)) {
+          return {
+            ...prevState,
+            ...arg,
+          } as T;
+        }
+        return prevState;
+      });
+    },
+    [],
+  );
+
+  return [state, setNewState, reset] as const;
+}
+
+export default useObject;

package/src/hooks/usePagination/__doc__/usePagination.stories.tsx

@@ -0,0 +1,72 @@
+import { Meta } from "@storybook/react-vite";
+import { useState } from "react";
+import { action } from "storybook/actions";
+import { Button } from "../../../components";
+import usePagination from "../usePagination";
+
+const TABLE_PAGE_SIZES = [5, 10, 20, 50, 100];
+/**
+ * Hook que facilita el manejo de paginaciones, recibe como param la cantidad de elementos, la cantidad de elementos por página y una función
+ * que se ejecuta cuando cambia la pagina
+ */
+const meta: Meta = {
+  title: "hooks/usePagination",
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+export const Default = () => {
+  const [pageSize, setPageSize] = useState(TABLE_PAGE_SIZES[0]);
+  const { currentPage, maxPage, isLastPage, isFirstPage, prev, next, goTo } =
+    usePagination({
+      totalItems: 100,
+      pageSize: pageSize,
+      onChange: action("change"),
+      initialCurrentPage: 1,
+    });
+
+  return (
+    <div className="space-y-2">
+      <pre className="rounded-md bg-slate-950 p-4 text-white">
+        <code className="block">
+          CurrentPage:{" "}
+          <span className="text-blue-300">
+            {JSON.stringify(currentPage, null, 2)}
+          </span>
+        </code>
+        <code className="block">PageSize: {pageSize}</code>
+        <code className="block">Maxpage: {maxPage}</code>
+        <code className="block">
+          isLastPage:{" "}
+          <span className={isLastPage ? "text-green-500" : "text-red-500"}>
+            {JSON.stringify(isLastPage)}
+          </span>
+        </code>
+        <code className="block">
+          IsFirstPage:{" "}
+          <span className={isFirstPage ? "text-green-500" : "text-red-500"}>
+            {JSON.stringify(isFirstPage)}
+          </span>
+        </code>
+      </pre>
+
+      <div className="flex gap-2">
+        <select
+          className="border rounded w-24 px-2"
+          value={pageSize}
+          onChange={(event) => setPageSize(Number(event.target.value))}
+        >
+          {TABLE_PAGE_SIZES.map((option: number, index) => (
+            <option key={index} value={option}>
+              {option}
+            </option>
+          ))}
+        </select>
+        <Button onClick={prev}>Página anterior</Button>
+        <Button onClick={next}>Siguiente pagina</Button>
+        <Button onClick={() => goTo(10)}>Ir a la pagina 10</Button>
+      </div>
+    </div>
+  );
+};

package/src/hooks/usePagination/__test__/usePagination.test.tsx

@@ -0,0 +1,98 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import usePagination from "../usePagination";
+
+describe("usePagination hook", () => {
+  it("should be defined", () => {
+    expect(usePagination).toBeDefined();
+  });
+
+  it("should show total items and items per page", () => {
+    const { result } = renderHook(() =>
+      usePagination({
+        totalItems: 100,
+        pageSize: 10,
+      }),
+    );
+    const { maxPage, currentPage } = result.current;
+
+    expect(maxPage).toBe(10);
+    expect(currentPage).toBe(1);
+  });
+
+  it("should recive initial current page", () => {
+    const { result } = renderHook(() =>
+      usePagination({
+        totalItems: 100,
+        pageSize: 10,
+        initialCurrentPage: 5,
+      }),
+    );
+    const { currentPage } = result.current;
+    expect(currentPage).toBe(5);
+  });
+
+  it("should go next", () => {
+    const { result } = renderHook(() =>
+      usePagination({
+        totalItems: 100,
+        pageSize: 10,
+      }),
+    );
+    const { next } = result.current;
+    act(() => next());
+
+    const { currentPage } = result.current;
+    expect(currentPage).toBe(2);
+  });
+
+  it("should go previous", () => {
+    const { result } = renderHook(() =>
+      usePagination({
+        totalItems: 100,
+        pageSize: 10,
+        initialCurrentPage: 3,
+      }),
+    );
+    const { prev } = result.current;
+    act(() => prev());
+
+    const { currentPage } = result.current;
+    expect(currentPage).toBe(2);
+  });
+
+  it("should go to page number", () => {
+    const { result } = renderHook(() =>
+      usePagination({
+        totalItems: 100,
+        pageSize: 10,
+      }),
+    );
+    const { goTo, currentPage } = result.current;
+    act(() => goTo(5));
+
+    waitFor(() => {
+      expect(currentPage).toBe(5);
+    });
+  });
+
+  it("should show isFirstPage and isLastPage", () => {
+    const { result } = renderHook(() =>
+      usePagination({
+        totalItems: 100,
+        pageSize: 10,
+        initialCurrentPage: 5,
+      }),
+    );
+
+    const { isFirstPage, isLastPage, goTo, maxPage } = result.current;
+    expect(isFirstPage).toBe(false);
+    expect(isLastPage).toBe(false);
+
+    act(() => goTo(maxPage));
+
+    waitFor(() => {
+      expect(isLastPage).toBe(true);
+    });
+  });
+});

package/src/hooks/usePagination/index.ts

@@ -0,0 +1,2 @@
+export * from "./usePagination";
+export { default as usePagination } from "./usePagination";

package/src/hooks/usePagination/usePagination.tsx

@@ -0,0 +1,74 @@
+import { useState } from "react";
+
+export type usePaginationProps = {
+  /**
+   * Cantidad total de elementos
+   */
+  totalItems: number;
+  /**
+   * Cantidad de elementos por página
+   */
+  pageSize: number;
+  /**
+   * Pagina inicial
+   */
+  initialCurrentPage?: number;
+  /**
+   * Callback que se ejecuta cuando cambia la pagina
+   */
+  onChange?: (value: { currentPage: number; pageSize: number }) => void;
+  siblingCount?: number;
+};
+
+function usePagination({
+  totalItems,
+  pageSize,
+  initialCurrentPage = 1,
+  onChange,
+}: usePaginationProps) {
+  const [currentPage, setCurrentPage] = useState<number>(initialCurrentPage);
+  const maxPage = Math.ceil(totalItems / pageSize);
+  const isLastPage = currentPage === maxPage;
+  const isFirstPage = currentPage === 1;
+  const start = (currentPage - 1) * pageSize + 1;
+  const end = Math.min(currentPage * pageSize, totalItems);
+
+  const next = () => {
+    if (isLastPage) return;
+    const newPage = Math.min(currentPage + 1, maxPage);
+    handleNewPage(newPage);
+  };
+
+  const prev = () => {
+    if (isFirstPage) return;
+    const newPage = Math.max(currentPage - 1, 1);
+    handleNewPage(newPage);
+  };
+
+  const goTo = (page: number) => {
+    if (page === 1 && isFirstPage) return;
+    if (page === maxPage && isLastPage) return;
+
+    const pageNumber = Math.max(1, page);
+    const newPage = Math.min(pageNumber, maxPage);
+    handleNewPage(newPage);
+  };
+
+  const handleNewPage = (page: number) => {
+    setCurrentPage(page);
+    onChange?.({ currentPage: page, pageSize });
+  };
+
+  return {
+    next,
+    prev,
+    goTo,
+    currentPage,
+    maxPage,
+    isFirstPage,
+    isLastPage,
+    range: { start, end },
+  };
+}
+
+export default usePagination;

package/src/hooks/usePortal/__doc__/usePortal.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta } from "@storybook/react-vite";
+import usePortal from "../usePortal";
+
+const meta: Meta = {
+  title: "hooks/usePortal",
+};
+
+export default meta;
+
+export const Default = {
+  render: () => {
+    const { render } = usePortal("id");
+    return render(
+      <div className="fixed-center bg-primary text-primary-foreground rounded p-4">
+        Este contenido se muestra en un portal 🧱
+      </div>,
+    );
+  },
+};

package/src/hooks/usePortal/__test__/usePortal.test.tsx

@@ -0,0 +1,20 @@
+import { render, renderHook, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import usePortal from "../usePortal";
+
+describe("usePortal hook", () => {
+  it("should be defined", () => {
+    const { result } = renderHook(() => usePortal("id"));
+    expect(result.current).toBeDefined();
+  });
+
+  it("should render element", () => {
+    const Component = () => {
+      const { render } = usePortal("id2");
+      return render(<div>Hello World</div>);
+    };
+
+    render(<Component />);
+    expect(screen.getByText("Hello World")).toBeInTheDocument();
+  });
+});

package/src/hooks/usePortal/index.ts

@@ -0,0 +1 @@
+export { default as usePortal } from "./usePortal";

package/src/hooks/usePortal/usePortal.ts

@@ -0,0 +1,40 @@
+import type { ReactNode, ReactPortal } from "react";
+import { useEffect, useMemo } from "react";
+import { createPortal } from "react-dom";
+import { Nullable } from "@/models";
+
+function usePortal(id: string) {
+  const getWrapper = (): Nullable<HTMLElement> => document.getElementById(id);
+
+  const createWrapper = (): HTMLElement => {
+    const element = document.createElement("div");
+    element.id = id;
+    return element;
+  };
+
+  const wrapper = useMemo(() => {
+    const element = getWrapper();
+    if (element) return element;
+    return createWrapper();
+  }, [id]);
+
+  useEffect(() => {
+    if (!document.getElementById(id)) {
+      document.body.appendChild(wrapper);
+    }
+
+    return () => {
+      const element = document.getElementById(id);
+      if (element) {
+        document.body.removeChild(element);
+      }
+    };
+  }, [id, wrapper]);
+
+  return {
+    render: (children: ReactNode): ReactPortal | null =>
+      createPortal(children, wrapper),
+  };
+}
+
+export default usePortal;

package/src/hooks/usePreventCloseWindow/__doc__/usePreventCloseWindow.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta } from "@storybook/react-vite";
+import usePreventCloseWindow from "../usePreventCloseWindow";
+
+/**
+ * Hook que permite prevenir que se cierre la ventana (muestra mensaje de aviso)
+ * Es útil para evitar que el usuario cierre la ventana accidentalmente mientras tiene cambios pendientes de guardar
+ */
+const meta: Meta = {
+  title: "hooks/usePreventCloseWindow",
+  args: {
+    shouldPrevent: true,
+    message: "No te vayas 😞",
+  },
+  argTypes: {
+    shouldPrevent: {
+      description: "Propiedad que determina si la ventana se puede cerrar",
+    },
+    message: {
+      description:
+        "Mensaje que se muestra al cerrar la ventana, no soportado por navegadores modernos",
+    },
+  },
+};
+
+export default meta;
+
+export const Default = {
+  render: (args: any) => {
+    usePreventCloseWindow(args);
+    return <div>Intenta cerrar ventana</div>;
+  },
+};

package/src/hooks/usePreventCloseWindow/index.ts

@@ -0,0 +1 @@
+export { default as usePreventCloseWindow } from "./usePreventCloseWindow";

package/src/hooks/usePreventCloseWindow/usePreventCloseWindow.ts

@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+
+interface UsePreventUnloadProps {
+  /**
+   * Propiedad que determina si la ventana se puede cerrar o no
+   */
+  shouldPrevent: boolean;
+  /**
+   * Mensaje que se va a mostrar al usuario antes de cerrar la ventana
+   * @deprecated ya no es soportado por los navegadores modernos
+   */
+  message?: string;
+}
+
+function usePreventClose({
+  shouldPrevent,
+  message = "Es posible que no se guarden los cambios hayas hecho.",
+}: UsePreventUnloadProps) {
+  const handleBeforeUnload = (event: BeforeUnloadEvent): void | string => {
+    if (!shouldPrevent) return;
+
+    event.preventDefault();
+    event.returnValue = message;
+    return message;
+  };
+
+  useEffect(() => {
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, [message, shouldPrevent]);
+}
+
+export default usePreventClose;