polpo 0.1.13 → 0.1.16

package/src/hooks/use-click-outside.ts

@@ -0,0 +1,32 @@
+import { RefObject } from 'react';
+
+import { useEventListener } from './use-event-listener';
+
+const checkIsOutside = (ref: RefObject<HTMLElement | null>, target: Node) => {
+  return ref.current && !ref.current.contains(target);
+};
+
+export const useClickOutside = <T extends HTMLElement>(
+  ref: RefObject<T | null> | Array<RefObject<T | null>>,
+  callback: () => void,
+) => {
+  useEventListener('keydown', e => {
+    if (e.key === 'Escape') {
+      callback();
+    }
+  });
+
+  useEventListener('mousedown', event => {
+    const target = event.target as Node;
+
+    if (!target?.isConnected) {
+      return;
+    }
+
+    const isOutside = (Array.isArray(ref) ? ref : [ref]).every(r => checkIsOutside(r, target));
+
+    if (isOutside) {
+      callback();
+    }
+  });
+};

package/src/hooks/use-constant.ts

@@ -0,0 +1,3 @@
+import { useState } from 'react';
+
+export const useConstant = <T>(initializer: T | (() => T)): T => useState(initializer)[0];

package/src/hooks/use-cookie.ts

@@ -0,0 +1,124 @@
+import { useState, useCallback } from 'react';
+
+export type CookieOptions = {
+  days?: number;
+  expires?: Date;
+  maxAge?: number;
+  path?: string;
+  domain?: string;
+  secure?: boolean;
+  sameSite?: 'strict' | 'lax' | 'none';
+};
+
+const generateCookieAttributes = (options: CookieOptions): string => {
+  const parts: Array<string> = [];
+
+  if (options.expires instanceof Date) {
+    parts.push(`expires=${options.expires.toUTCString()}`);
+  } else if (typeof options.days === 'number') {
+    const date = new Date();
+    date.setTime(date.getTime() + options.days * 24 * 60 * 60 * 1000);
+    parts.push(`expires=${date.toUTCString()}`);
+  }
+
+  if (typeof options.maxAge === 'number') {
+    parts.push(`max-age=${options.maxAge}`);
+  }
+
+  parts.push(`path=${options.path ?? '/'}`);
+
+  if (options.domain) {
+    parts.push(`domain=${options.domain}`);
+  }
+
+  if (options.secure) {
+    parts.push('secure');
+  }
+
+  if (options.sameSite) {
+    parts.push(`SameSite=${options.sameSite}`);
+  }
+
+  return parts.length > 0 ? `; ${parts.join('; ')}` : '';
+};
+
+const setCookie = (name: string, value: string, options: CookieOptions = {}): void => {
+  if (typeof document === 'undefined') {
+    return;
+  }
+
+  const encodedValue = encodeURIComponent(value);
+  const attributes = generateCookieAttributes(options);
+  document.cookie = `${name}=${encodedValue}${attributes}`;
+};
+
+const getCookie = (name: string): string | null => {
+  if (typeof document === 'undefined') {
+    return null;
+  }
+
+  const nameEq = `${name}=`;
+  const cookies = document.cookie ? document.cookie.split(';') : [];
+
+  for (const cookie of cookies) {
+    const cookieTrimmed = cookie.trim();
+
+    if (cookieTrimmed.indexOf(nameEq) === 0) {
+      return decodeURIComponent(cookieTrimmed.substring(nameEq.length));
+    }
+  }
+
+  return null;
+};
+
+const deleteCookie = (name: string, options: CookieOptions = {}) => {
+  if (typeof document === 'undefined') {
+    return;
+  }
+
+  // Ensure the same path/domain so that the deletion matches the existing cookie.
+  setCookie(name, '', {
+    ...options,
+    days: -1,
+  });
+};
+
+type UpdateCookie<T> = (value: T, overrideOptions?: CookieOptions) => void;
+type RemoveCookie = () => void;
+
+export const useCookie = <T = unknown>(
+  cookieName: string,
+  defaultValue?: T,
+  options: CookieOptions = {},
+): [T, UpdateCookie<T>, RemoveCookie] => {
+  const [cookieValue, setCookieValue] = useState<T>(() => {
+    const rawCookie = getCookie(cookieName);
+
+    if (rawCookie !== null) {
+      try {
+        return JSON.parse(rawCookie) as T;
+      } catch {
+        return defaultValue as T;
+      }
+    }
+
+    return defaultValue as T;
+  });
+
+  const updateCookie = useCallback<UpdateCookie<T>>(
+    (value: T, overrideOptions: CookieOptions = {}) => {
+      const mergedOptions = { ...options, ...overrideOptions };
+      const stringValue = JSON.stringify(value);
+      setCookie(cookieName, stringValue, mergedOptions);
+      setCookieValue(value);
+    },
+    [cookieName, options],
+  );
+
+  const removeCookie = useCallback<RemoveCookie>(() => {
+    deleteCookie(cookieName, options);
+    setCookieValue(defaultValue as T);
+  }, [cookieName, defaultValue, options]);
+
+  return [cookieValue, updateCookie, removeCookie];
+};

package/src/hooks/use-debounce-state.ts

@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+import { useDebounce } from './use-debounce';
+
+export const useDebounceState = <T>(
+  defaultValue: T,
+  delay: number = 500,
+): [T, T, React.Dispatch<React.SetStateAction<T>>] => {
+  const [value, setValue] = useState<T>(defaultValue);
+  const debouncedValue = useDebounce(value, delay);
+
+  return [value, debouncedValue, setValue];
+};

package/src/hooks/use-debounce.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+
+export const useDebounce = <T>(value: T, delay: number = 500): T => {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};

package/src/hooks/use-dimensions.ts

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+
+import { useResizeObserver } from './use-resize-observer';
+
+export const useDimensions = (ref: React.RefObject<HTMLElement>) => {
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+  useResizeObserver(ref, ([entry]) => {
+    if ((entry?.borderBoxSize ?? [])[0]) {
+      const { inlineSize: width, blockSize: height } = entry.borderBoxSize[0];
+      setDimensions({ width, height });
+    } else if (entry.contentRect) {
+      const { width, height } = entry.contentRect;
+      setDimensions({ width, height });
+    }
+  });
+
+  return dimensions;
+};

package/src/hooks/use-dom-container.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+const createContainer = (containerID: string) => {
+  let domContainer = document.getElementById(containerID);
+
+  if (domContainer === null) {
+    domContainer = document.createElement('div');
+    domContainer.setAttribute('id', containerID);
+    document.body.appendChild(domContainer);
+  }
+
+  return domContainer;
+};
+
+export const useDomContainer = (containerID: string) => {
+  const [container, setContainer] = useState<HTMLElement | null>(() => createContainer(containerID));
+
+  useEffect(() => {
+    const domContainer = document.getElementById(containerID);
+
+    if (container === null || domContainer === null) {
+      const domContainer = createContainer(containerID);
+
+      setContainer(domContainer);
+    }
+
+    return () => {
+      if (container && container.parentNode && process.env.NODE_ENV === 'production') {
+        document.body.removeChild(container);
+      }
+    };
+  }, [container, containerID]);
+
+  return container;
+};

package/src/hooks/use-event-listener.ts

@@ -0,0 +1,71 @@
+import { RefObject, useEffect, useLayoutEffect, useRef } from 'react';
+
+function useEventListener<EventName extends keyof MediaQueryListEventMap>(
+  eventName: EventName,
+  callback: (event: MediaQueryListEventMap[EventName]) => void,
+  element: RefObject<MediaQueryList | null> | undefined,
+  options?: boolean | AddEventListenerOptions,
+): void;
+
+function useEventListener<EventName extends keyof WindowEventMap>(
+  eventName: EventName,
+  callback: (event: WindowEventMap[EventName]) => void,
+  element?: undefined,
+  options?: boolean | AddEventListenerOptions,
+): void;
+
+function useEventListener<EventName extends keyof HTMLElementEventMap, ElementRef extends HTMLElement = HTMLDivElement>(
+  eventName: EventName,
+  callback: (event: HTMLElementEventMap[EventName]) => void,
+  element: RefObject<ElementRef | null> | undefined,
+  options?: boolean | AddEventListenerOptions,
+): void;
+
+function useEventListener<EventName extends keyof DocumentEventMap>(
+  eventName: EventName,
+  callback: (event: DocumentEventMap[EventName]) => void,
+  element: RefObject<Document | null> | undefined,
+  options?: boolean | AddEventListenerOptions,
+): void;
+
+function useEventListener<
+  MediaQueryEventName extends keyof MediaQueryListEventMap,
+  WindowEventName extends keyof WindowEventMap,
+  ElementEventName extends keyof HTMLElementEventMap,
+  DocumentEventName extends keyof DocumentEventMap,
+  ElementRef extends HTMLElement | MediaQueryList | Document | Window | void = void,
+>(
+  eventName: WindowEventName | DocumentEventName | ElementEventName | MediaQueryEventName,
+  callback: (
+    event:
+      | MediaQueryListEventMap[MediaQueryEventName]
+      | WindowEventMap[WindowEventName]
+      | HTMLElementEventMap[ElementEventName]
+      | DocumentEventMap[DocumentEventName]
+      | Event,
+  ) => void,
+  element?: RefObject<ElementRef | null> | undefined,
+  options?: boolean | AddEventListenerOptions,
+) {
+  const callbackRef = useRef<EventListener>(callback);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useLayoutEffect(() => {
+    const targetElement = element?.current ?? window;
+
+    if (!(targetElement && targetElement.addEventListener)) return;
+
+    const listener: typeof callback = event => callbackRef.current(event);
+
+    targetElement.addEventListener(eventName, listener, options);
+
+    return () => {
+      targetElement.removeEventListener(eventName, listener, options);
+    };
+  }, [eventName, element, options]);
+}
+
+export { useEventListener };

package/src/hooks/use-file-reader.ts

@@ -0,0 +1,69 @@
+import { useEffect, useState } from 'react';
+
+import { formatBytes } from '../helpers';
+
+export enum FileTypeEnum {
+  PNG = 'image/png',
+  PDF = 'application/pdf',
+}
+
+export type FileResolvedT = {
+  name: string;
+  size: number;
+  formatSize: string;
+  type: FileTypeEnum;
+  url: FileReader['result'];
+};
+
+export const useFileReader = (inputFiles: Array<File>) => {
+  const [files, setFiles] = useState<Array<FileResolvedT>>([]);
+
+  useEffect(() => {
+    const fileReaders: Array<FileReader> = [];
+    let isCancel = false;
+
+    if (!Array.isArray(inputFiles) || inputFiles.length === 0) {
+      setFiles([]);
+    } else {
+      const promises = inputFiles.map(file => {
+        return new Promise<FileResolvedT>((resolve, reject) => {
+          const fileReader = new FileReader();
+          fileReaders.push(fileReader);
+          fileReader.onload = (e: ProgressEvent<FileReader>) => {
+            if (e.target?.result) {
+              resolve({
+                name: file.name,
+                size: file.size,
+                formatSize: formatBytes(file.size),
+                type: file.type as FileTypeEnum,
+                url: e.target.result,
+              });
+            }
+          };
+          fileReader.onabort = () => {
+            reject(new Error('File reading aborted'));
+          };
+          fileReader.onerror = () => {
+            reject(new Error('Failed to read file'));
+          };
+          fileReader.readAsDataURL(file);
+        });
+      });
+
+      Promise.all(promises).then(files => {
+        if (!isCancel) {
+          setFiles(files);
+        }
+      });
+    }
+
+    return () => {
+      isCancel = true;
+      fileReaders.forEach(fileReader => {
+        fileReader.abort();
+      });
+    };
+  }, [inputFiles]);
+
+  return files;
+};

package/src/hooks/use-geolocation.ts

@@ -0,0 +1,63 @@
+import { useEffect, useRef, useState } from 'react';
+
+type GeolocationData = GeolocationPosition['coords'] & {
+  timestamp: GeolocationPosition['timestamp'];
+};
+
+interface GeolocationError {
+  code: number;
+  message: string;
+}
+
+type UseGeolocationReturn = {
+  data: GeolocationData | null;
+  error: GeolocationError | null;
+  isLoading: boolean;
+};
+
+export const useGeolocation = (): UseGeolocationReturn => {
+  const [data, setData] = useState<GeolocationData | null>(null);
+  const [error, setError] = useState<GeolocationError | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const watchIdRef = useRef<number>(null);
+
+  useEffect(() => {
+    if (!navigator.geolocation) {
+      setError({
+        code: 0,
+        message: 'Geolocation is not supported by your browser.',
+      });
+      setIsLoading(false);
+
+      return;
+    }
+
+    const handleSuccess = (position: GeolocationPosition) => {
+      setData({
+        ...position.coords,
+        timestamp: position.timestamp,
+      });
+      setIsLoading(false);
+    };
+
+    const handleError = (geolocationError: GeolocationPositionError) => {
+      setError({
+        code: geolocationError.code,
+        message: geolocationError.message,
+      });
+      setIsLoading(false);
+    };
+
+    navigator.geolocation.getCurrentPosition(handleSuccess, handleError);
+
+    watchIdRef.current = navigator.geolocation.watchPosition(handleSuccess, handleError);
+
+    return () => {
+      if (watchIdRef.current !== null) {
+        navigator.geolocation.clearWatch(watchIdRef.current);
+      }
+    };
+  }, []);
+
+  return { data, error, isLoading };
+};

package/src/hooks/use-hover.ts

@@ -0,0 +1,17 @@
+import { useCallback, useRef, useState } from 'react';
+
+import { useEventListener } from './use-event-listener';
+
+export const useHover = () => {
+  const [isHovered, setIsHovered] = useState(false);
+  const ref = useRef<HTMLElement>(null);
+
+  const handleMouseEnter = useCallback(() => setIsHovered(true), []);
+
+  const handleMouseLeave = useCallback(() => setIsHovered(false), []);
+
+  useEventListener('mouseenter', handleMouseEnter, ref);
+  useEventListener('mouseleave', handleMouseLeave, ref);
+
+  return isHovered;
+};

package/src/hooks/use-in-view.ts

@@ -0,0 +1,18 @@
+import { useRef, useState } from 'react';
+
+import { useIntersectionObserver } from './use-intersection-observer';
+
+export const useInView = (initOptions: IntersectionObserverInit = {}) => {
+  const [inView, setInView] = useState(false);
+  const ref = useRef<HTMLElement>(null);
+
+  useIntersectionObserver(
+    ref,
+    ([entry]) => {
+      setInView(entry.isIntersecting);
+    },
+    initOptions,
+  );
+
+  return { ref, inView };
+};

package/src/hooks/use-input-handlers.ts

@@ -0,0 +1,52 @@
+import React, { useCallback, useState } from 'react';
+
+type InputTypes = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+
+type UseInputHandlersProps<T extends InputTypes> = {
+  onBlur?: (e: React.FocusEvent<T>) => void;
+  onFocus?: (e: React.FocusEvent<T>) => void;
+  onChange?: (e: React.ChangeEvent<T>) => void;
+};
+
+export const useInputHandlers = <T extends InputTypes>({
+  onBlur,
+  onFocus,
+  onChange,
+}: UseInputHandlersProps<T> = {}) => {
+  const [isFocus, setIsFocus] = useState(false);
+
+  const handleFocus = useCallback(
+    (e: React.FocusEvent<T>) => {
+      setIsFocus(true);
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      onFocus && onFocus(e);
+    },
+    [onFocus],
+  );
+
+  const handleBlur = useCallback(
+    (e: React.FocusEvent<T>) => {
+      setIsFocus(false);
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      onBlur && onBlur(e);
+    },
+    [onBlur],
+  );
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<T>) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      onChange && onChange(e);
+    },
+    [onChange],
+  );
+
+  return {
+    isFocus,
+    handlers: {
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onChange: handleChange,
+    },
+  };
+};

package/src/hooks/use-intersection-observer.ts

@@ -0,0 +1,19 @@
+import { RefObject, useEffect } from 'react';
+
+export const useIntersectionObserver = <T extends Element>(
+  ref: RefObject<T | null> | Array<RefObject<T | null>>,
+  callback: IntersectionObserverCallback,
+  initOptions: IntersectionObserverInit = {},
+) => {
+  useEffect(() => {
+    const refs = Array.isArray(ref) ? ref : [ref];
+
+    const observer = new IntersectionObserver(callback, initOptions);
+
+    refs.forEach(r => r.current && observer.observe(r.current));
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [callback, initOptions, ref]);
+};

package/src/hooks/use-media-query.ts

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+
+export const useMediaQuery = (query: string): boolean => {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+
+    const listener = () => {
+      setMatches(media.matches);
+    };
+
+    media.addEventListener('change', listener);
+
+    return () => {
+      media.removeEventListener('change', listener);
+    };
+  }, [matches, query]);
+
+  return matches;
+};

package/src/hooks/use-modal-in-container.ts

@@ -0,0 +1,85 @@
+import { RefObject, useCallback, useLayoutEffect, useRef } from 'react';
+
+import {
+  getModalPositionRelativeToContainer,
+  getModalPositionRelativeToScreen,
+  PositionContainer,
+  PositionObject,
+} from '../helpers';
+
+import { useEventListener } from './use-event-listener';
+import { useResizeObserver } from './use-resize-observer';
+
+const convertDOMRectToPosition = (rect: DOMRectReadOnly): PositionObject => ({
+  x: rect.x,
+  y: rect.y,
+  w: rect.width,
+  h: rect.height,
+  top: rect.top,
+  left: rect.left,
+});
+
+export type UseModalInContainerParams<
+  Container extends HTMLElement = HTMLElement,
+  Modal extends HTMLElement = Container,
+> = {
+  windowOffset?: number;
+  offset?: number;
+  position?: `${PositionContainer}`;
+  modalRef: RefObject<Modal | null>;
+  containerRef?: RefObject<Container | null>;
+  isOpen: boolean;
+};
+
+export const useModalInContainer = <
+  Container extends HTMLElement = HTMLElement,
+  Modal extends HTMLElement = Container,
+>({
+  offset = 0,
+  windowOffset = 0,
+  position = PositionContainer.BOTTOM,
+  modalRef,
+  containerRef,
+  isOpen,
+}: UseModalInContainerParams<Container, Modal>) => {
+  const containerTemporalRef = useRef<Container>(null);
+
+  const getPosition = useCallback(
+    (modalRef: RefObject<Modal | null>, containerRef: RefObject<Container | null>) => {
+      const modal = modalRef.current?.getClientRects()[0];
+      const container = containerRef.current?.getClientRects()[0];
+
+      if (!modal) {
+        return;
+      }
+
+      const modalStyle: Record<string, string> = !container
+        ? getModalPositionRelativeToScreen({ position: position as PositionContainer, windowOffset })
+        : getModalPositionRelativeToContainer({
+            c: convertDOMRectToPosition(container),
+            m: convertDOMRectToPosition(modal),
+            offset,
+            windowOffset,
+            position: position as PositionContainer,
+          });
+
+      Object.keys(modalStyle).forEach(key => {
+        modalRef.current?.style.setProperty(key, modalStyle[key]);
+      });
+    },
+    [position, windowOffset, offset],
+  );
+
+  const callback = useCallback(() => {
+    if (isOpen) {
+      getPosition(modalRef, containerRef ?? containerTemporalRef);
+    }
+  }, [getPosition, isOpen, containerRef, modalRef]);
+
+  useLayoutEffect(callback, [callback]);
+
+  useResizeObserver<Container>(containerRef ?? containerTemporalRef, callback);
+  useResizeObserver<Modal>(modalRef, callback);
+  useEventListener('resize', callback);
+  useEventListener('scroll', callback, modalRef);
+};