@amoa/hooks 0.1.0

package/index.js

@@ -0,0 +1,2 @@
+export { useLocalStorage } from "./src/use-local-storage";
+export { useSessionStorage } from "./src/use-session-storage";

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@amoa/hooks",
+  "version": "0.1.0",
+  "scripts": {
+    "build": "webpack",
+    "dev": "webpack",
+    "clean": "rm -rf dist"
+  },
+  "exports": {
+    "./*": "./dist/*.js"
+  },
+  "dependencies": {
+    "@amoa/forge": "workspace:^"
+  }
+}

package/src/use-click-outside.js

@@ -0,0 +1,34 @@
+import * as React from "react";
+
+export const useClickOutside = (callback) => {
+  const ref = React.useRef(null);
+  const callbackRef = React.useRef(callback);
+
+  React.useLayoutEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  React.useEffect(() => {
+    if (ref.current) {
+      const element = ref.current.parentNode;
+
+      const handler = (e) => {
+        if (element && !element.contains(e.target)) {
+          callbackRef.current(e);
+        }
+      };
+
+      document.addEventListener("mousedown", handler);
+      document.addEventListener("touchstart", handler);
+
+      return () => {
+        document.removeEventListener("mousedown", handler);
+        document.removeEventListener("touchstart", handler);
+      };
+    }
+  }, []);
+
+  return ref;
+};
+
+export default useClickOutside;

package/src/use-client.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+export const useClient = () => {
+  const [client, setClient] = React.useState(false);
+
+  React.useEffect(() => {
+    setClient(true);
+  }, []);
+
+  return client;
+};
+
+export default useClient;

package/src/use-debounce.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+export const useDebounce = (callback, time = 300, minimum = 3) => {
+  const [value, setValue] = React.useState("");
+  const [result, setResult] = React.useState();
+
+  const clear = () => setResult();
+
+  React.useEffect(() => {
+    // setResult();
+    if (typeof value !== "string" || value.length < minimum) return;
+    const delay = setTimeout(async () => {
+      const result = await callback(value);
+      setResult(result);
+    }, time);
+
+    return () => clearTimeout(delay);
+  }, [value]);
+
+  return [result, setValue, clear];
+};
+
+export default useDebounce;

package/src/use-dragging.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+export const useDragging = (callback, delay, state, layoff) => {
+  const savedCallback = React.useRef();
+
+  React.useEffect(() => {
+    savedCallback.state = callback;
+  }, [callback]);
+
+  React.useEffect(() => {
+    function tick() {
+      savedCallback.state();
+    }
+    if (!layoff && delay !== null && delay !== 0) {
+      const interval = setInterval(tick, delay);
+      return () => clearInterval(interval);
+    }
+  }, [state, delay, layoff]);
+};
+
+export default useDragging;

package/src/use-filters.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+import * as Filters from "@amoa/forge/filters";
+
+export const useFilters = (data, filters, sort, reference) => {
+  const [filtered, setFiltered] = React.useState(data);
+  const { search, ...other } = filters;
+
+  React.useEffect(() => {
+    if (!search && !Object.keys(other).length) setFiltered(data);
+    const searched = Filters.search(data, search);
+    const filtered = Filters.filter(searched, other, reference);
+    const sorted = Filters.sort(filtered, sort);
+    setFiltered(sorted);
+  }, [data, filters, sort]);
+
+  return filtered;
+};
+
+export default useFilters;

package/src/use-hover.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+
+export const useHover = () => {
+  const [hovering, setHovering] = React.useState(false);
+  const previousNode = React.useRef(null);
+
+  const handleMouseEnter = React.useCallback(() => {
+    setHovering(true);
+  }, []);
+
+  const handleMouseLeave = React.useCallback(() => {
+    setHovering(false);
+  }, []);
+
+  const customRef = React.useCallback(
+    (node) => {
+      if (previousNode.current?.nodeType === Node.ELEMENT_NODE) {
+        previousNode.current.removeEventListener("mouseenter", handleMouseEnter);
+        previousNode.current.removeEventListener("mouseleave", handleMouseLeave);
+      }
+
+      if (node?.nodeType === Node.ELEMENT_NODE) {
+        node.addEventListener("mouseenter", handleMouseEnter);
+        node.addEventListener("mouseleave", handleMouseLeave);
+      }
+
+      previousNode.current = node;
+    },
+    [handleMouseEnter, handleMouseLeave]
+  );
+
+  return [customRef, hovering];
+};
+
+export default useHover;

package/src/use-intersection.js

@@ -0,0 +1,38 @@
+"use client";
+
+import * as React from "react";
+
+const OPTIONS = { threshold: 1, root: null, rootMargin: "0px" };
+
+export const useIntersection = (options = {}) => {
+  const [entry, setEntry] = React.useState(null);
+  const { threshold, root, rootMargin } = { ...OPTIONS, ...options };
+
+  const reference = React.useRef(null);
+
+  const ref = React.useCallback(
+    (node) => {
+      if (reference.current) {
+        reference.current.disconnect();
+        reference.current = null;
+      }
+
+      if (node?.nodeType === Node.ELEMENT_NODE) {
+        const observer = new IntersectionObserver(
+          ([entry]) => {
+            setEntry(entry);
+          },
+          { threshold, root, rootMargin }
+        );
+
+        observer.observe(node);
+        reference.current = observer;
+      }
+    },
+    [threshold, root, rootMargin]
+  );
+
+  return [ref, entry];
+};
+
+export default useIntersection;

package/src/use-interval.js

@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+
+export const useInterval = (callback, delay) => {
+  const [id, setId] = React.useState();
+  const savedCallback = React.useRef();
+
+  const clear = () => {
+    clearInterval(id);
+  };
+
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  React.useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+    if (delay !== null) {
+      const id = setInterval(tick, delay);
+      setId(id);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+
+  return [clear];
+};
+
+export default useInterval;

package/src/use-lazy-loading.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+import * as Functions from "@amoa/forge/functions";
+
+const OPTIONS = {
+  rootMargin: "200px 0px",
+  threshold: 0.1
+};
+
+export const useLazyLoading = (ref, callback, delay = 300) => {
+  const throttle = React.useMemo(() => Functions.throttle(callback, delay), [callback, delay]);
+
+  React.useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+
+    const observer = new IntersectionObserver(([e]) => e.isIntersecting && throttle(), OPTIONS);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [ref.current, callback]);
+};
+
+export default useLazyLoading;

package/src/use-local-storage.js

@@ -0,0 +1,53 @@
+import { useState, useEffect } from "react";
+
+export const useLocalStorage = (key, initialValue, session = false) => {
+  const [storedValue, setStoredValue] = useState(() => {
+    if (typeof window !== "undefined") {
+      try {
+        const item = session ? window.sessionStorage.getItem(key) : window.localStorage.getItem(key);
+        return item !== null ? JSON.parse(item) : initialValue;
+      } catch (error) {
+        console.info(error);
+        return initialValue;
+      }
+    }
+  });
+
+  const setValue = (value) => {
+    if (typeof window === "undefined") return [];
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      if (valueToStore !== undefined) {
+        const _value = JSON.stringify(valueToStore);
+        if (session) {
+          window.sessionStorage.setItem(key, _value);
+        } else {
+          window.localStorage.setItem(key, _value);
+        }
+      } else {
+        if (session) {
+          window.sessionStorage.removeItem(key);
+        } else {
+          window.localStorage.removeItem(key);
+        }
+      }
+      window.dispatchEvent(new Event(key));
+      setStoredValue(valueToStore);
+    } catch (error) {
+      console.info(error);
+    }
+  };
+
+  useEffect(() => {
+    const check = () => {
+      const value = window.localStorage.getItem(key);
+      if (storedValue !== value) setStoredValue(value);
+    };
+    window.addEventListener(key, check);
+    return () => window.removeEventListener(key, check);
+  }, []);
+
+  return [storedValue, setValue];
+};
+
+export default useLocalStorage;

package/src/use-resize.js

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+export const useResize = () => {
+  const [size, setSize] = React.useState({
+    width: null,
+    height: null
+  });
+
+  const resize = React.useCallback(() => {
+    setSize({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+  }, []);
+
+  React.useLayoutEffect(() => {
+    resize();
+    window.addEventListener("resize", resize);
+
+    return () => {
+      window.removeEventListener("resize", resize);
+    };
+  }, [resize]);
+
+  return size;
+};
+
+export default useResize;

package/src/use-session-storage.js

@@ -0,0 +1,66 @@
+import * as React from "react";
+
+const dispatchEvent = (key, newValue) => {
+  window.dispatchEvent(new StorageEvent("storage", { key, newValue }));
+};
+
+const setSessionStorageItem = (key, value) => {
+  const stringifiedValue = JSON.stringify(value);
+  window.sessionStorage.setItem(key, stringifiedValue);
+  dispatchEvent(key, stringifiedValue);
+};
+
+const removeSessionStorageItem = (key) => {
+  window.sessionStorage.removeItem(key);
+  dispatchEvent(key, null);
+};
+
+const getSessionStorageItem = (key) => {
+  return window.sessionStorage.getItem(key);
+};
+
+const useSessionStorageSubscribe = (callback) => {
+  window.addEventListener("storage", callback);
+  return () => window.removeEventListener("storage", callback);
+};
+
+const getSessionStorageServerSnapshot = () => {
+  // throw Error("Le Session Storage n'est utilisable que côté client.");
+};
+
+export const useSessionStorage = (key, initialValue, fallback) => {
+  const getClientSnapshot = () => getSessionStorageItem(key);
+
+  const getServerSnapshot = fallback !== undefined ? () => fallback : undefined;
+
+  const getSnapshot = typeof window !== "undefined" ? getClientSnapshot : getServerSnapshot;
+
+  const store = React.useSyncExternalStore(useSessionStorageSubscribe, getSnapshot, getSessionStorageServerSnapshot);
+
+  const setState = React.useCallback(
+    (callback) => {
+      try {
+        const nextState = typeof callback === "function" ? callback(JSON.parse(store)) : callback;
+
+        if (nextState === undefined || nextState === null) {
+          removeSessionStorageItem(key);
+        } else {
+          setSessionStorageItem(key, nextState);
+        }
+      } catch (e) {
+        console.warn(e);
+      }
+    },
+    [key, store]
+  );
+
+  React.useEffect(() => {
+    if (getSessionStorageItem(key) === null && typeof initialValue !== "undefined") {
+      setSessionStorageItem(key, initialValue);
+    }
+  }, [key, initialValue]);
+
+  return [store ? JSON.parse(store) : initialValue, setState];
+};
+
+export default useSessionStorage;

package/src/use-skeleton.js

@@ -0,0 +1,71 @@
+import * as React from "react";
+
+const OBSERVER = { childList: true, subtree: true, characterData: true };
+
+const leaves = (node) => {
+  if (!node) return [];
+
+  const { children } = node;
+  const list = Array.from(children).filter((child) => child.tagName !== "svg" || child?.remove());
+  const { length } = list;
+
+  if (length) return list.reduce((acc, node) => [...acc, ...leaves(node)], []);
+
+  const width = 80; // (Math.ceil(Math.random() * 4) + 4) * 10;
+  const min = 50; // (Math.ceil(Math.random() * 3) + 4) * 10;
+
+  if (node.style.backgroundColor !== null) node.style.backgroundColor = "var(--light-background)";
+  if (node.style.borderRadius === "") node.style.borderRadius = "4px";
+
+  node.style.display = "flex";
+  node.style.flexDirection = "column";
+  node.style.borderColor = "transparent";
+  node.style.gap = "0.5px";
+  node.innerHTML = `<span style='min-width:${min}px;width:${width}%;height:14.5px;margin:0.5px 0;background-color:var(--light-background);border-radius:4px;' />`;
+  node.parentNode.style.gap = "1.5px";
+
+  return [node];
+};
+
+const excarnate = (element) => {
+  Array.from(element).forEach((child) => {
+    child.style.borderColor = "transparent";
+    child.style.filter = "unset";
+    child.style.cursor = "default";
+    child.style.pointerEvents = "none";
+    child.classList.add("skeleton");
+  });
+};
+
+export const useSkeleton = (ref) => {
+  React.useEffect(() => {
+    if (!ref.current) return;
+
+    excarnate(ref.current.children);
+    leaves(ref.current);
+
+    const observer = new MutationObserver((mutations) => {
+      observer.disconnect();
+      mutations.forEach(({ addedNodes = [], type, target }) => {
+        const parent = target.parentElement;
+        addedNodes.forEach?.((node) => {
+          if (node.nodeType === 1) {
+            excarnate([node]);
+            leaves(node);
+          }
+        });
+        if (type === "characterData") {
+          excarnate([parent]);
+          leaves(parent);
+        }
+      });
+      observer.observe(ref.current, OBSERVER);
+    });
+
+    observer.observe(ref.current, OBSERVER);
+
+    return () => observer.disconnect();
+  }, [ref.current]);
+};
+
+export default useSkeleton;

package/src/use-summary.js

@@ -0,0 +1,36 @@
+"use client";
+
+import * as React from "react";
+
+const surface = ({ width, height }) => width * height;
+
+export const useSummary = (elements = [], options = {}, target) => {
+  const { threshold = 1, root = null, rootMargin = "0px" } = options;
+  const [visible, setVisible] = React.useState(null);
+  const reference = React.useRef(null);
+
+  React.useEffect(() => {
+    if (!elements.length) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const [first] = entries.sort((a, b) => surface(b.intersectionRect) - surface(a.intersectionRect));
+        if (first?.intersectionRect.height > 0) {
+          setVisible(target(first));
+        }
+      },
+      { threshold, root, rootMargin }
+    );
+
+    reference.current?.disconnect();
+
+    elements.forEach((element) => observer.observe(element));
+    reference.current = observer;
+
+    return () => observer.disconnect();
+  }, [elements, threshold, root, rootMargin, target]);
+
+  return visible;
+};
+
+export default useSummary;

package/src/use-timeout.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+export const useTimeout = (callback, time) => {
+  const id = React.useRef(null);
+
+  const clear = React.useCallback(() => {
+    window.clearTimeout(id.current);
+  }, []);
+
+  React.useEffect(() => {
+    id.current = window.setTimeout(callback, time);
+    return clear;
+  }, [time, clear]);
+
+  return clear;
+};
+
+export default useTimeout;

package/src/use-tooltip.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+const limits = {
+  top: 60,
+  bottom: 60,
+  right: 60,
+  left: 60
+};
+
+export const useTooltip = (item, text, position) => {
+  React.useEffect(() => {
+    if (text && item.current) {
+      const { top, left, bottom, right } = item.current.getBoundingClientRect();
+      item.current.dataset.tooltip = text;
+      if (position) item.current.dataset[position] = "";
+      if (top < limits.top) item.current.dataset.tooltipTop = "";
+      if (window.innerHeight - bottom < limits.bottom) item.current.dataset.tooltipBottom = "";
+      if (window.innerWidth - right < limits.right) item.current.dataset.tooltipRight = "";
+      if (left < limits.left) item.current.dataset.tooltipLeft = "";
+    }
+  }, [item, text]);
+};
+
+export default useTooltip;