@boxcustodia/library 2.0.0-alpha.11 → 2.0.0-alpha.13

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

@@ -0,0 +1,88 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import useArray from "../useArray";
+
+describe("useArray hook", () => {
+  it("should initialize with default value", () => {
+    const defaultList = ["First", "Second", "Third"];
+    const { result } = renderHook(() => useArray(defaultList));
+    const [list] = result.current;
+
+    expect(list).toEqual(defaultList);
+  });
+
+  it("should insert item at specified index", () => {
+    const initialList = ["First", "Second", "Third"];
+    const { result } = renderHook(() => useArray(initialList));
+    const [, { insertAt }] = result.current;
+
+    act(() => insertAt(1, "Inserted"));
+
+    expect(result.current[0]).toEqual(["First", "Inserted", "Second", "Third"]);
+  });
+
+  it("should remove item at specified index", () => {
+    const initialList = ["First", "Second", "Third"];
+    const { result } = renderHook(() => useArray(initialList));
+    const [, { removeAt }] = result.current;
+
+    act(() => removeAt(1));
+
+    expect(result.current[0]).toEqual(["First", "Third"]);
+  });
+
+  it("should update item at specified index", () => {
+    const initialList = ["First", "Second", "Third"];
+    const { result } = renderHook(() => useArray(initialList));
+    const [, { updateAt }] = result.current;
+
+    act(() => updateAt(1, "Updated"));
+
+    expect(result.current[0]).toEqual(["First", "Updated", "Third"]);
+  });
+
+  it("should clear the list", () => {
+    const initialList = ["First", "Second", "Third"];
+    const { result } = renderHook(() => useArray(initialList));
+    const [, { clear }] = result.current;
+
+    act(() => clear());
+
+    expect(result.current[0]).toEqual([]);
+  });
+
+  it("should reset to default value", () => {
+    const defaultList = ["First", "Second", "Third"];
+    const newList = ["New", "List"];
+    const { result } = renderHook((props) => useArray(props), {
+      initialProps: defaultList,
+    });
+
+    const [, { reset, push }] = result.current;
+
+    act(() => push(newList[0]));
+    act(() => reset());
+
+    expect(result.current[0]).toEqual(defaultList);
+  });
+
+  it("should push item to end of list", () => {
+    const initialList = ["First", "Second"];
+    const { result } = renderHook(() => useArray(initialList));
+    const [, { push }] = result.current;
+
+    act(() => push("New"));
+
+    expect(result.current[0]).toEqual(["First", "Second", "New"]);
+  });
+
+  it("should update item based on predicate", () => {
+    const initialList = ["First", "Second", "Third"];
+    const { result } = renderHook(() => useArray(initialList));
+    const [, { update }] = result.current;
+
+    act(() => update((item) => item === "Second", "Updated"));
+
+    expect(result.current[0]).toEqual(["First", "Updated", "Third"]);
+  });
+});

package/src/hooks/useArray/index.ts

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

package/src/hooks/useArray/useArray.ts

@@ -0,0 +1,76 @@
+import { findIndex, isFunction, ListIterateeCustom } from "lodash";
+import { useState } from "react";
+
+function useArray<T>(defaultProp: T[]) {
+  const [list = [], setList] = useState(defaultProp);
+
+  const insertAt = (index: number, item: T) => {
+    setList((prevList = []) => {
+      const newList = [...prevList];
+      newList.splice(index, 0, item);
+      return newList;
+    });
+  };
+
+  const removeAt = (index: number) => {
+    setList((prevList = []) => {
+      const newList = [...prevList];
+      newList.splice(index, 1);
+      return newList;
+    });
+  };
+
+  const updateAt = (index: number, newItem: T) => {
+    setList((prevList = []) => {
+      const newList = [...prevList];
+      newList[index] = newItem;
+      return newList;
+    });
+  };
+
+  const clear = () => setList([]);
+
+  const reset = () => setList(defaultProp);
+
+  const push = (item: T) => setList((prevList = []) => [...prevList, item]);
+
+  const set = (newList: T[]) => setList(newList);
+
+  const pop = () => {
+    setList((prevList = []) => {
+      const newList = [...prevList];
+      newList.pop();
+      return newList;
+    });
+  };
+
+  const update = (
+    predicate: ListIterateeCustom<T, boolean>,
+    newItem: T | ((item: T) => T),
+  ) => {
+    setList((prevList = []) => {
+      const newList = [...prevList];
+      const index = findIndex(newList, predicate);
+      if (index === -1) return newList;
+      newList[index] = isFunction(newItem) ? newItem(newList[index]) : newItem;
+      return newList;
+    });
+  };
+
+  return [
+    list,
+    {
+      insertAt,
+      removeAt,
+      updateAt,
+      clear,
+      reset,
+      push,
+      set,
+      pop,
+      update,
+    },
+  ] as const;
+}
+
+export default useArray;

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

@@ -0,0 +1,149 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { isUndefined } from "lodash";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useState } from "react";
+import { createToastManager, ToastProvider } from "@/components/toast";
+import { Button, Input } from "../../../components";
+import useDebouncedValue from "../../useDebounceValue/useDebouncedValue";
+import useAsync from "../useAsync";
+
+const toastManager = createToastManager();
+
+const meta: Meta = {
+  title: "hooks/useAsync",
+};
+
+export default meta;
+type Story = StoryObj;
+
+const fetchPokemon = async (name: string) => {
+  if (!name) throw new Error("Name is required");
+  const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${name}`);
+  if (!response.ok) throw new Error("Pokemon not found");
+  return response.json();
+};
+
+export const Basic = {
+  render: () => {
+    const [pokemonName, setPokemonName] = useState<string>("pikachu");
+    const debouncedName = useDebouncedValue(pokemonName, 600);
+    const { loading, error, data } = useAsync({
+      fn: () => fetchPokemon(debouncedName),
+      dependencies: [debouncedName],
+    });
+
+    return (
+      <div className="space-y-4">
+        <Input
+          type="text"
+          value={pokemonName}
+          onChange={setPokemonName}
+          placeholder="Enter Pokémon name"
+        />
+        {loading && <p>Loading...</p>}
+        {error && <p>Error: {error.message}</p>}
+        {data && (
+          <div className="border w-fit mx-auto rounded-lg bg-muted">
+            <h3 className="capitalize text-center font-semibold">
+              {data.name}
+            </h3>
+            <img src={data.sprites.front_default} alt={data.name} />
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+
+const fetchPokemonById = async (id: number) => {
+  if (isUndefined(id)) throw new Error("id is required");
+  const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`);
+  if (!response.ok) throw new Error("Pokemon not found");
+  return response.json();
+};
+
+/**
+ * ```tsx
+ * interface UseAsyncOptions<T> {
+ *  onError?: (error: Error) => void;
+ *  onSuccess?: (data: T) => void;
+ *  onFinish?: () => void;
+ * }
+ * ```
+ */
+
+export const Advanced: Story = {
+  decorators: [
+    (Story) => (
+      <ToastProvider toastManager={toastManager}>
+        <Story />
+      </ToastProvider>
+    ),
+  ],
+  render: () => {
+    const [pokemonId, setPokemonId] = useState<number>(1);
+    const [log, setLog] = useState<string[]>([]);
+
+    const handleSuccess = (data: any) => {
+      setLog((prevLog) => [...prevLog, `✅ Fetched Pokémon: ${data.name}`]);
+    };
+
+    const handleError = (error: Error) => {
+      toastManager.add({ variant: "error", description: error.message });
+      setLog((prevLog) => [...prevLog, `❌ Error: ${error.message}`]);
+    };
+
+    const handleSettled = () => {
+      setLog((prevLog) => [...prevLog, `🏁 Request settled`]);
+    };
+
+    const { loading, error, data } = useAsync({
+      fn: () => fetchPokemonById(pokemonId),
+      dependencies: [pokemonId],
+      onSuccess: handleSuccess,
+      onError: handleError,
+      onFinish: handleSettled,
+    });
+
+    return (
+      <div className="p-4">
+        <div className="flex justify-center items-center gap-x-4">
+          <Button
+            size="icon"
+            variant="ghost"
+            onClick={() => setPokemonId(pokemonId - 1)}
+          >
+            <ChevronLeft />
+          </Button>
+          <div className="font-bold">{pokemonId}</div>
+          <Button
+            size="icon"
+            variant="ghost"
+            onClick={() => setPokemonId(pokemonId + 1)}
+          >
+            <ChevronRight />
+          </Button>
+        </div>
+
+        {loading && <p>Loading...</p>}
+        {error && <p>Error: {error.message}</p>}
+        {data && (
+          <div className="border w-fit mx-auto rounded-lg bg-muted">
+            <h3 className="capitalize text-center font-semibold">
+              {data.name}
+            </h3>
+            <img src={data.sprites.front_default} alt={data.name} />
+          </div>
+        )}
+        <div className="mt-4">
+          <h4 className="font-semibold">Log:</h4>
+          <ul className="list-disc">
+            {log.map((entry, index) => (
+              <li key={index}>{entry}</li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,68 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import useAsync from "../useAsync";
+
+const mockFetchSuccess = async (data: any) => {
+  return new Promise((resolve) => setTimeout(() => resolve(data), 100));
+};
+
+const mockFetchError = async () => {
+  return new Promise((_, reject) =>
+    setTimeout(() => reject(new Error("Fetch error")), 100),
+  );
+};
+
+describe("useAsync hook", () => {
+  it("should initialize with default state", () => {
+    const { result } = renderHook(() =>
+      useAsync({ fn: () => Promise.resolve("test") }),
+    );
+
+    expect(result.current.loading).toBe(true);
+    expect(result.current.error).toBeNull();
+    expect(result.current.data).toBeNull();
+  });
+
+  it("should handle success", async () => {
+    const { result } = renderHook(() =>
+      useAsync({ fn: () => mockFetchSuccess("success") }),
+    );
+
+    await waitFor(() => result.current.data);
+  });
+
+  it("should handle error", async () => {
+    const { result } = renderHook(() =>
+      useAsync({ fn: () => mockFetchError() }),
+    );
+
+    await waitFor(() => expect(result.current.error).not.toBeNull());
+  });
+
+  it("should call onSuccess callback", async () => {
+    const onSuccess = vi.fn();
+    renderHook(() =>
+      useAsync({ fn: () => mockFetchSuccess("success"), onSuccess }),
+    );
+
+    await waitFor(() => expect(onSuccess).toHaveBeenCalledWith("success"));
+  });
+
+  it("should call onError callback", async () => {
+    const onError = vi.fn();
+    renderHook(() => useAsync({ fn: () => mockFetchError(), onError }));
+
+    await waitFor(() =>
+      expect(onError).toHaveBeenCalledWith(expect.any(Error)),
+    );
+  });
+
+  it("should call onFinish callback", async () => {
+    const onFinish = vi.fn();
+    renderHook(() =>
+      useAsync({ fn: () => mockFetchSuccess("success"), onFinish }),
+    );
+
+    await waitFor(() => expect(onFinish).toHaveBeenCalled());
+  });
+});

package/src/hooks/useAsync/index.ts

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

package/src/hooks/useAsync/useAsync.ts

@@ -0,0 +1,58 @@
+import { DependencyList, useCallback, useEffect, useState } from "react";
+
+interface UseAsyncOptions<T> {
+  onError?: (error: Error) => void;
+  onSuccess?: (data: T) => void;
+  onFinish?: () => void;
+}
+
+interface AsyncState<T> {
+  loading: boolean;
+  error: Error | null;
+  data: T | null;
+  refetch: () => void;
+}
+
+interface Props<T> extends UseAsyncOptions<T> {
+  fn: () => Promise<T>;
+  dependencies?: DependencyList;
+}
+
+function useAsync<T>({
+  fn,
+  dependencies = [],
+  onError,
+  onSuccess,
+  onFinish,
+}: Props<T>): AsyncState<T> {
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [data, setData] = useState<T | null>(null);
+
+  const fnMemoized = useCallback(() => {
+    setLoading(true);
+    setError(null);
+    setData(null);
+    fn()
+      .then((result) => {
+        onSuccess?.(result);
+        setData(result);
+      })
+      .catch((err: Error) => {
+        onError?.(err);
+        setError(err);
+      })
+      .finally(() => {
+        onFinish?.();
+        setLoading(false);
+      });
+  }, dependencies);
+
+  useEffect(() => {
+    fnMemoized();
+  }, [fnMemoized]);
+
+  return { loading, error, data, refetch: fnMemoized };
+}
+
+export default useAsync;

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

@@ -0,0 +1,40 @@
+import { Meta } from "@storybook/react-vite";
+import { useState } from "react";
+import { Button } from "../../../components";
+import useClickOutside from "../useClickOutside";
+
+const meta: Meta = {
+  title: "hooks/useClickOutside",
+};
+
+export default meta;
+
+export const Default = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(true);
+
+    const handleClose = () => {
+      setIsOpen(false);
+    };
+
+    const ref = useClickOutside<HTMLDivElement>(handleClose);
+
+    return (
+      <div className="flex gap-2">
+        <Button onClick={() => setIsOpen(true)} disabled={isOpen}>
+          Abrir
+        </Button>
+        <Button onClick={() => setIsOpen(false)} disabled={!isOpen}>
+          Cerrar
+        </Button>
+        <div
+          ref={ref}
+          className={`relative p-4 bg-white shadow-md  ${isOpen ? "" : "hidden"}`}
+        >
+          <p>Haz clic fuera de este cuadro para cerrarlo.</p>
+          <Button onClick={() => setIsOpen(false)}>Cerrar desde dentro</Button>
+        </div>
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,33 @@
+import { act, render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import useClickOutside from "../useClickOutside";
+
+describe("useSelection hook", () => {
+  const Component = (mock: any) => {
+    const ref: any = useClickOutside(mock);
+    return (
+      <div data-testid="wrapper">
+        <div ref={ref} data-testid="target" />
+      </div>
+    );
+  };
+
+  it("should close on outside click", () => {
+    const mock = vi.fn();
+    render(<Component mock={mock} />);
+
+    // click item
+    const target = screen.getByTestId("target");
+    act(() => target.click());
+    waitFor(() => {
+      expect(mock).not.toHaveBeenCalled();
+    });
+
+    // click outside
+    const wrapper = screen.getByTestId("wrapper");
+    wrapper.click();
+    waitFor(() => {
+      expect(mock).toHaveBeenCalled();
+    });
+  });
+});

package/src/hooks/useClickOutside/index.ts

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

package/src/hooks/useClickOutside/useClickOutside.ts

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from "react";
+
+const useClickOutside = <T extends HTMLElement = HTMLElement>(
+  callback: () => void,
+  watch: boolean = true,
+) => {
+  const ref = useRef<T>(null);
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (ref.current && !ref.current.contains(event.target as Node)) {
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    if (!watch) return;
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [watch]);
+
+  return ref;
+};
+
+export default useClickOutside;

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

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "../../../components";
+import useClipboard from "../useClipboard";
+
+/**
+ * Permite copiar texto al portapapeles del usuario. Devuelve el texto copiado actualmente y una función para copiar nuevo texto. Incluye manejo de compatibilidad y errores.
+ */
+const meta: Meta = {
+  title: "hooks/useClipboard",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      source: { type: "code" },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "Copia al portapapeles",
+  args: {
+    textoACopiar: "Hello world",
+  },
+  render: (args) => {
+    const [copiedText, copy] = useClipboard();
+    return (
+      <div className="space-y-2">
+        <pre className="rounded-md bg-slate-950 p-4 text-white">
+          <code className="block">
+            Texto copiado:{" "}
+            <span className="text-blue-300">
+              {JSON.stringify(copiedText, null, 2)}
+            </span>
+          </code>
+        </pre>
+
+        <Button showLoader={false} onClick={() => copy(args.textoACopiar)}>
+          Copy
+        </Button>
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,19 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import useClipboard from "../useClipboard";
+
+describe("useClipboard", () => {
+  it("should be defined", () => {
+    expect(useClipboard).toBeDefined();
+  });
+
+  it("should copy to clipboard", () => {
+    const { result } = renderHook(useClipboard);
+    const [copiedValue, copy] = result.current;
+
+    copy("test");
+    waitFor(() => {
+      expect(copiedValue).toEqual("test");
+    });
+  });
+});

package/src/hooks/useClipboard/index.ts

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

package/src/hooks/useClipboard/useClipboard.tsx

@@ -0,0 +1,28 @@
+import { useCallback, useState } from "react";
+
+type CopiedValue = string | null;
+type CopyFunction = (text: string) => Promise<boolean>;
+
+function useCopyToClipboard(): [CopiedValue, CopyFunction] {
+  const [copiedText, setCopiedText] = useState<CopiedValue>(null);
+
+  const copy = useCallback(async (text: string) => {
+    if (!navigator?.clipboard) {
+      return false;
+    }
+
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedText(text);
+      return true;
+    } catch (error) {
+      console.error(error);
+      setCopiedText(null);
+      return false;
+    }
+  }, []);
+
+  return [copiedText, copy];
+}
+
+export default useCopyToClipboard;