pentatrion-design 0.0.1

package/src/hooks/useDebounce.ts

@@ -0,0 +1,59 @@
+import {
+  Dispatch,
+  MutableRefObject,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+export function useDebounce<T>(value: T, delay?: number): [T, Dispatch<SetStateAction<T>>] {
+  const [debouncedValue, setImmediateValue] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setImmediateValue(value), delay || 500);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return [debouncedValue, setImmediateValue];
+}
+
+export function useRefDebounce<T>(value: T, delay?: number): MutableRefObject<T> {
+  const debouncedValueRef = useRef(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      debouncedValueRef.current = value;
+    }, delay || 500);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValueRef;
+}
+
+export function useStateDebounce<T>(
+  initialValue: T,
+  delay?: number,
+): [T, T, (initialValue: SetStateAction<T>, immediate?: boolean) => void] {
+  const [value, setImmediateValue] = useState(initialValue);
+  const [debouncedValue, setDebouncedValue] = useState(initialValue);
+
+  const setValue = useCallback((value: SetStateAction<T>, immediate = false) => {
+    setImmediateValue(value);
+    if (immediate) {
+      setDebouncedValue(value);
+    }
+  }, []);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return [value, debouncedValue, setValue];
+}

package/src/hooks/useEventCallback.ts

@@ -0,0 +1,13 @@
+import { useCallback, useRef } from "react";
+
+export function useEventCallback<Args extends unknown[], R>(
+  callback: ((...args: Args) => R) | null,
+) {
+  const ref = useRef<typeof callback>(() => {
+    throw new Error("Cannot call an event handler while rendering.");
+  });
+
+  ref.current = callback;
+
+  return useCallback((...args: Args) => ref.current?.(...args), [ref]);
+}

package/src/hooks/useEventListener.ts

@@ -0,0 +1,86 @@
+import { useEffect, useRef } from "react";
+
+import type { RefObject } from "react";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+
+// MediaQueryList Event based useEventListener interface
+function useEventListener<K extends keyof MediaQueryListEventMap>(
+  eventName: K,
+  handler: (event: MediaQueryListEventMap[K]) => void,
+  element: RefObject<MediaQueryList>,
+  options?: boolean | AddEventListenerOptions,
+): void;
+
+// Window Event based useEventListener interface
+function useEventListener<K extends keyof WindowEventMap>(
+  eventName: K,
+  handler: (event: WindowEventMap[K]) => void,
+  element?: undefined,
+  options?: boolean | AddEventListenerOptions,
+): void;
+
+// Element Event based useEventListener interface
+function useEventListener<
+  K extends keyof HTMLElementEventMap & keyof SVGElementEventMap,
+  T extends Element = K extends keyof HTMLElementEventMap ? HTMLDivElement : SVGElement,
+>(
+  eventName: K,
+  handler: ((event: HTMLElementEventMap[K]) => void) | ((event: SVGElementEventMap[K]) => void),
+  element: RefObject<T>,
+  options?: boolean | AddEventListenerOptions,
+): void;
+
+// Document Event based useEventListener interface
+function useEventListener<K extends keyof DocumentEventMap>(
+  eventName: K,
+  handler: (event: DocumentEventMap[K]) => void,
+  element: RefObject<Document>,
+  options?: boolean | AddEventListenerOptions,
+): void;
+
+function useEventListener<
+  KW extends keyof WindowEventMap,
+  KH extends keyof HTMLElementEventMap & keyof SVGElementEventMap,
+  KM extends keyof MediaQueryListEventMap,
+  T extends HTMLElement | SVGAElement | MediaQueryList = HTMLElement,
+>(
+  eventName: KW | KH | KM,
+  handler: (
+    event:
+      | WindowEventMap[KW]
+      | HTMLElementEventMap[KH]
+      | SVGElementEventMap[KH]
+      | MediaQueryListEventMap[KM]
+      | Event,
+  ) => void,
+  element?: RefObject<T>,
+  options?: boolean | AddEventListenerOptions,
+) {
+  // Create a ref that stores handler
+  const savedHandler = useRef(handler);
+
+  useIsomorphicLayoutEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+
+  useEffect(() => {
+    // Define the listening target
+    const targetElement: T | Window = element?.current ?? window;
+
+    if (!(targetElement && targetElement.addEventListener)) return;
+
+    // Create event listener that calls handler function stored in ref
+    const listener: typeof handler = (event) => {
+      savedHandler.current(event);
+    };
+
+    targetElement.addEventListener(eventName, listener, options);
+
+    // Remove event listener on cleanup
+    return () => {
+      targetElement.removeEventListener(eventName, listener, options);
+    };
+  }, [eventName, element, options]);
+}
+
+export { useEventListener };

package/src/hooks/useFetch.tsx

@@ -0,0 +1,21 @@
+import { useCallback } from "react";
+import { CustomFetchOptions, fetchAPI } from "../lib";
+import { useNotifications } from "./useNotifications";
+
+export const useFetch = () => {
+  // is it the good useNotifications ? from redux or not ??
+  const notificationManager = useNotifications();
+
+  const appFetch = useCallback(
+    async (urlObjOrString: string | URL, enhancedOptions: CustomFetchOptions = {}) => {
+      try {
+        return await fetchAPI(urlObjOrString, enhancedOptions);
+      } catch (err) {
+        notificationManager.notifyError(err);
+      }
+    },
+    [notificationManager],
+  );
+
+  return appFetch;
+};

package/src/hooks/useIsClosing.ts

@@ -0,0 +1,25 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export function useIsClosing(initialValue = false, delay = 500) {
+  const [[isOpen, isClosing], setState] = useState([initialValue, false]);
+  const isMounted = useRef(false);
+  useEffect(() => {
+    isMounted.current = true;
+    return () => void (isMounted.current = false);
+  }, []);
+  const setIsOpen = useCallback(
+    (newState: boolean) => {
+      if (newState) {
+        setState([true, false]);
+      } else {
+        setState([true, true]);
+        setTimeout(() => {
+          isMounted.current && setState([false, false]);
+        }, delay);
+      }
+    },
+    [delay],
+  );
+
+  return { isOpen, isClosing, setIsOpen };
+}

package/src/hooks/useIsMounted.tsx

@@ -0,0 +1,16 @@
+import { useCallback, useEffect, useRef } from "react";
+
+export const useIsMounted = () => {
+  const mountedRef = useRef(false);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  return useCallback(() => {
+    return mountedRef.current;
+  }, []);
+};

package/src/hooks/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,4 @@
+import { useEffect, useLayoutEffect } from "react";
+
+export const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect;

package/src/hooks/useNotifications.tsx

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+
+import { NotificationsContext } from "../components/notification/NotificationsContext";
+
+export const useNotifications = () => {
+  const manager = useContext(NotificationsContext);
+
+  if (!manager) {
+    throw new Error("Trying to use uninitialized NotificationsContext");
+  }
+
+  return manager;
+};

package/src/hooks/useOnClickOutside.ts

@@ -0,0 +1,35 @@
+import type { RefObject } from "react";
+import { useEventListener } from "./useEventListener";
+
+type EventType = "mousedown" | "mouseup" | "touchstart" | "touchend" | "focusin" | "focusout";
+
+export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
+  ref: RefObject<T> | RefObject<T>[],
+  handler: (event: MouseEvent | TouchEvent | FocusEvent) => void,
+  eventType: EventType = "mousedown",
+  eventListenerOptions: AddEventListenerOptions = {},
+): void {
+  useEventListener(
+    eventType,
+    (event) => {
+      const target = event.target as Node;
+
+      // Do nothing if the target is not connected element with document
+      if (!target || !target.isConnected) {
+        return;
+      }
+
+      const isOutside = Array.isArray(ref)
+        ? ref
+            .filter((r) => Boolean(r.current))
+            .every((r) => r.current && !r.current.contains(target))
+        : ref.current && !ref.current.contains(target);
+
+      if (isOutside) {
+        handler(event);
+      }
+    },
+    undefined,
+    eventListenerOptions,
+  );
+}

package/src/hooks/usePrevious.ts

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "react";
+
+export function usePrevious<T>(value: T) {
+  const ref = useRef<T>();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}

package/src/hooks/useRipple.test.tsx

@@ -0,0 +1,52 @@
+import { useRef } from "react";
+import { afterEach, describe, it, vi } from "vitest";
+import { useRipple } from ".";
+import { cleanup, fireEvent, render } from "@testing-library/react";
+
+const TestEltWithRipple = () => {
+  const ref = useRef<HTMLButtonElement>(null);
+  const ripples = useRipple(ref);
+  return (
+    <button role="button" ref={ref}>
+      {ripples}
+    </button>
+  );
+};
+
+afterEach(cleanup);
+
+describe("useRipple", () => {
+  it("add as many ripples as mouse clicks", async ({ expect }) => {
+    const { getByRole, getAllByTestId } = render(<TestEltWithRipple />);
+    const button = getByRole("button");
+
+    fireEvent.pointerDown(button);
+    fireEvent.pointerDown(button);
+
+    expect(getAllByTestId("ripple")).toHaveLength(2);
+  });
+
+  it("cleanup after 1 second", ({ expect }) => {
+    vi.useFakeTimers();
+
+    const { getByRole, queryAllByTestId, rerender } = render(<TestEltWithRipple />);
+    const button = getByRole("button");
+
+    fireEvent.pointerDown(button);
+
+    vi.advanceTimersByTime(999);
+
+    rerender(<TestEltWithRipple />);
+    expect(queryAllByTestId("ripple")).toHaveLength(1);
+
+    vi.advanceTimersByTime(999);
+
+    rerender(<TestEltWithRipple />);
+
+    vi.advanceTimersByTime(2);
+
+    expect(queryAllByTestId("ripple")).toHaveLength(0);
+
+    vi.restoreAllMocks();
+  });
+});

package/src/hooks/useRipple.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from "react";
+import { useDebounce } from ".";
+
+/**
+ * This hook accepts a ref to any element and adds a click event handler that creates ripples when click
+ */
+export const useRipple = <T extends HTMLElement>(ref: React.RefObject<T>) => {
+  //ripples are just styles that we attach to span elements
+  const [ripples, setRipples] = useState<React.CSSProperties[]>([]);
+
+  useEffect(() => {
+    //add a click handler for the ripple
+    const handlePointerDown = (e: MouseEvent) => {
+      if (ref.current) {
+        const elem = ref.current;
+
+        //calculate the position and dimensions of the ripple.
+        //based on click position and button dimensions
+        const rect = elem.getBoundingClientRect();
+        const left = (e.clientX ?? 0) - rect.left;
+        const top = (e.clientY ?? 0) - rect.top;
+        const height = elem.clientHeight;
+        const width = elem.clientWidth;
+        const diameter = Math.max(width, height);
+        setRipples((r) => [
+          ...r,
+          {
+            top: top - diameter / 2,
+            left: left - diameter / 2,
+            height: Math.max(width, height),
+            width: Math.max(width, height),
+          },
+        ]);
+      }
+    };
+
+    //check if there's a ref
+    if (ref.current) {
+      const elem = ref.current;
+
+      //add an event listener to the button
+      elem.addEventListener("pointerdown", handlePointerDown);
+
+      //clean up when the component is unmounted
+      return () => {
+        elem.removeEventListener("pointerdown", handlePointerDown);
+      };
+    }
+  }, [ref]);
+
+  //add a debounce so that if the user doesn't click after 1s, we remove all the ripples
+  const [_debounced] = useDebounce(ripples, 1000);
+  useEffect(() => {
+    if (_debounced.length) {
+      setRipples([]);
+    }
+  }, [_debounced]);
+
+  //map through the ripples and return span elements.
+  //this will be added to the button component later
+  return ripples?.map((style, i) => {
+    return (
+      <span
+        key={i}
+        data-testid="ripple"
+        className="animate-ripple"
+        style={{
+          ...style,
+          //should be absolutely positioned
+          position: "absolute",
+          backgroundColor: "#FFFFFF",
+          opacity: "25%",
+          transform: "scale(0)",
+          borderRadius: "50%",
+        }}
+      />
+    );
+  });
+};

package/src/index.css

@@ -0,0 +1,14 @@
+@import "tailwindcss/base";
+@import "./tailwind/base.css" layer(base);
+
+@import "tailwindcss/components";
+@import "./tailwind/components.css" layer(components);
+@import "./tailwind/components-input-outline.css" layer(components);
+@import "./tailwind/components-resize-area.css" layer(components);
+@import "./tailwind/components-step.css" layer(components);
+
+@import "tailwindcss/utilities";
+@import "./tailwind/utilities.css" layer(utilities);
+@import "./tailwind/utilities-dialog.css" layer(utilities);
+
+@import "pentatrion-fonts/fontello-lonlat";

package/src/index.ts

@@ -0,0 +1,39 @@
+// issue: https://github.com/floating-ui/floating-ui/issues/2507
+import type {} from "@floating-ui/react-dom";
+
+export type { ThemeColor } from "./types.d";
+
+export * from "./components/table";
+export * from "./components/card";
+export { default as Code } from "./components/code/Code";
+export { default as Tabs } from "./components/tabs/Tabs";
+export { default as Flash } from "./components/flash/Flash";
+export { default as Scroll } from "./components/scroll/Scroll";
+export { default as Loader } from "./components/loader/Loader";
+export { default as Portal } from "./components/portal/Portal";
+export { default as Badge } from "./components/badge/Badge";
+export { default as Highlight } from "./components/highlight/Highlight";
+export { default as InputField } from "./components/input-field/InputField";
+export { default as ResizeArea } from "./components/resize-area/ResizeArea";
+export { default as Snack } from "./components/snack/Snack";
+export { default as Href } from "./components/href/Href";
+
+export * from "./components/autocomplete";
+export * from "./components/button";
+export * from "./components/context-menu";
+export * from "./components/dialog";
+export * from "./components/dropdown-menu";
+export * from "./components/dropdown-menu-nested";
+export * from "./components/input";
+export * from "./components/modal";
+export * from "./components/notification";
+export * from "./components/popover";
+export * from "./components/select";
+export * from "./components/steps";
+export * from "./components/tooltip";
+export * from "./components/sortable";
+
+export * from "./lib";
+export * from "./hooks";
+
+export { default as pentatrionTw } from "./tailwind/pentatrionTw";

package/src/lib/arrUtil.ts

@@ -0,0 +1,8 @@
+export function arrayEquals(a: any, b: any) {
+  return (
+    Array.isArray(a) &&
+    Array.isArray(b) &&
+    a.length === b.length &&
+    a.every((val, index) => val === b[index])
+  );
+}

package/src/lib/error.ts

@@ -0,0 +1,18 @@
+import { MessageOptions } from "~/types.d";
+
+export function isErrorLike(err: any): err is Error {
+  if (err instanceof Error) {
+    return true;
+  } else if (err.name !== undefined && err.message !== undefined) {
+    return true;
+  }
+
+  return false;
+}
+
+export function parseError(err: any): [string, MessageOptions] | null {
+  if (isErrorLike(err)) {
+    return [err.message || "An error occured", { color: "red" }];
+  }
+  return null;
+}

package/src/lib/fetch.test.ts

@@ -0,0 +1,107 @@
+import { afterEach, describe, test, vi } from "vitest";
+import { fetchAPI } from "./fetch";
+
+function get200Response() {
+  return {
+    status: 200,
+    ok: true,
+    headers: new Headers(),
+    text() {
+      return Promise.resolve("hello world");
+    },
+  };
+}
+
+describe("fetchAPI", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  test("accept relative url", async ({ expect }): Promise<void> => {
+    const mock = vi.fn().mockResolvedValueOnce(get200Response());
+
+    vi.stubGlobal("fetch", mock);
+
+    const result = await fetchAPI("/hello");
+
+    expect(mock).toBeCalledTimes(1);
+    expect(mock).toHaveBeenCalledWith("http://localhost:3000/hello", {});
+    expect(result).toBe("hello world");
+  });
+
+  test("parse urlParams", async ({ expect }): Promise<void> => {
+    const mock = vi.fn().mockResolvedValue(get200Response());
+
+    vi.stubGlobal("fetch", mock);
+
+    await fetchAPI("/user/{name}/{id}", {
+      urlParams: {
+        name: "dupond",
+        id: 3,
+      },
+    });
+
+    expect(mock).toHaveBeenCalledWith("http://localhost:3000/user/dupond/3", {});
+
+    await fetchAPI("/user/{name}/{id}", {
+      urlParams: {
+        name: "dupond",
+      },
+    });
+
+    expect(mock).toHaveBeenCalledWith("http://localhost:3000/user/dupond/%7Bid%7D", {});
+
+    await fetchAPI("/user/{name}/{id}", {
+      urlParams: {
+        name: "dupond",
+        id: 3,
+        lastname: "dupont",
+      },
+    });
+
+    expect(mock).toHaveBeenCalledWith("http://localhost:3000/user/dupond/3", {});
+  });
+
+  test("parse query", async ({ expect }): Promise<void> => {
+    const mock = vi.fn().mockResolvedValue(get200Response());
+
+    vi.stubGlobal("fetch", mock);
+
+    await fetchAPI("/user", {
+      query: {
+        name: "dupond",
+        id: 3,
+      },
+    });
+    expect(mock).toHaveBeenCalledWith("http://localhost:3000/user?name=dupond&id=3", {});
+
+    await fetchAPI("/user?page=1#hash", {
+      query: {
+        name: "dupond",
+        id: 3,
+      },
+    });
+    expect(mock).toHaveBeenCalledWith(
+      "http://localhost:3000/user?page=1&name=dupond&id=3#hash",
+      {},
+    );
+  });
+
+  test("stringify json object", async ({ expect }): Promise<void> => {
+    const mock = vi.fn().mockResolvedValue(get200Response());
+
+    vi.stubGlobal("fetch", mock);
+    await fetchAPI("/user", {
+      body: {
+        name: "dupond",
+        id: 3,
+      },
+    });
+    expect(mock).toHaveBeenCalledWith("http://localhost:3000/user", {
+      body: '{"name":"dupond","id":3}',
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  });
+});