polpo 0.1.7 → 0.1.9

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

@@ -1,69 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { formatBytes } from '@polpo/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

@@ -1,63 +0,0 @@
-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>(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

@@ -1,17 +0,0 @@
-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

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

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

@@ -1,49 +0,0 @@
-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);
-      onFocus && onFocus(e);
-    },
-    [onFocus],
-  );
-
-  const handleBlur = useCallback(
-    (e: React.FocusEvent<T>) => {
-      setIsFocus(false);
-      onBlur && onBlur(e);
-    },
-    [onBlur],
-  );
-
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<T>) => {
-      onChange && onChange(e);
-    },
-    [onChange],
-  );
-
-  return {
-    isFocus,
-    handlers: {
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      onChange: handleChange,
-    },
-  };
-};

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

@@ -1,19 +0,0 @@
-import { RefObject, useEffect } from 'react';
-
-export const useIntersectionObserver = <T extends Element>(
-  ref: RefObject<T> | Array<RefObject<T>>,
-  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

@@ -1,25 +0,0 @@
-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

@@ -1,85 +0,0 @@
-import { RefObject, useCallback, useLayoutEffect, useRef } from 'react';
-
-import { useEventListener } from './use-event-listener';
-import { useResizeObserver } from './use-resize-observer';
-
-import {
-  getModalPositionRelativeToContainer,
-  getModalPositionRelativeToScreen,
-  PositionContainer,
-  PositionObject,
-} from '@polpo/helpers';
-
-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>;
-  containerRef?: RefObject<Container>;
-  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>, containerRef: RefObject<Container>) => {
-      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);
-};

package/src/hooks/use-modal-transition.ts

@@ -1,64 +0,0 @@
-import React, { useCallback, useEffect, useLayoutEffect, useMemo } from 'react';
-
-export enum ModalState {
-  OPENING = 'OPENING',
-  OPEN = 'OPEN',
-  CLOSING = 'CLOSING',
-  CLOSED = 'CLOSED',
-}
-
-export type UseModalTransitionParams = {
-  transitionDuration?: number;
-  isOpen: boolean;
-};
-
-export const useModalTransition = ({ transitionDuration = 0, isOpen }: UseModalTransitionParams) => {
-  const [modalState, setModalState] = React.useState<ModalState>(ModalState.CLOSED);
-
-  const isVisible = useMemo(() => {
-    return modalState !== ModalState.CLOSED;
-  }, [modalState]);
-
-  useEffect(() => {
-    document.documentElement.style.overflow = isVisible ? 'hidden' : 'auto';
-  }, [isVisible]);
-
-  const closeModal = useCallback(() => {
-    if ([ModalState.OPENING, ModalState.OPEN].includes(modalState)) {
-      if (transitionDuration > 0) {
-        setModalState(ModalState.CLOSING);
-        setTimeout(() => {
-          setModalState(ModalState.CLOSED);
-        }, transitionDuration);
-      } else {
-        setModalState(ModalState.CLOSED);
-      }
-    }
-  }, [modalState, transitionDuration]);
-
-  const openModal = useCallback(() => {
-    if ([ModalState.CLOSING, ModalState.CLOSED].includes(modalState)) {
-      if (transitionDuration > 0) {
-        setModalState(ModalState.OPENING);
-        setTimeout(() => {
-          setModalState(ModalState.OPEN);
-        }, transitionDuration);
-      } else {
-        setModalState(ModalState.OPEN);
-      }
-    }
-  }, [modalState, transitionDuration]);
-
-  useLayoutEffect(() => {
-    if (modalState === ModalState.CLOSED && isOpen) {
-      openModal();
-    } else if (modalState === ModalState.OPEN && !isOpen) {
-      closeModal();
-    }
-  }, [isOpen, openModal, closeModal, modalState]);
-
-  return {
-    isVisible,
-    modalState,
-  };
-};

package/src/hooks/use-modal.ts

@@ -1,21 +0,0 @@
-import { useRef, useState } from 'react';
-
-export const useModal = <T extends HTMLElement>() => {
-  const containerRef = useRef<T>(null);
-  const [isOpen, setIsOpen] = useState(false);
-
-  const openModal = () => {
-    setIsOpen(true);
-  };
-
-  const closeModal = () => {
-    setIsOpen(false);
-  };
-
-  return {
-    containerRef,
-    isOpen,
-    openModal,
-    closeModal,
-  };
-};

package/src/hooks/use-mouse-position.ts

@@ -1,64 +0,0 @@
-import React, { useRef, useState } from 'react';
-
-import { useEventListener } from './use-event-listener';
-
-type MousePosition = {
-  x: null | number;
-  y: null | number;
-  elementX: number | null;
-  elementY: number | null;
-  elementPositionX: number | null;
-  elementPositionY: number | null;
-};
-
-const getMousePosition = (domRect: DOMRect, e: MouseEvent) => {
-  const { left, top } = domRect;
-  const containerPositionX = left + window.scrollX;
-  const containerPositionY = top + window.scrollY;
-  const containerX = e.pageX - containerPositionX;
-  const containerY = e.pageY - containerPositionY;
-
-  return {
-    x: e.pageX,
-    y: e.pageY,
-    elementX: containerX,
-    elementY: containerY,
-    elementPositionX: containerPositionX,
-    elementPositionY: containerPositionY,
-  };
-};
-
-export const useMousePosition = (containerRef?: React.RefObject<HTMLElement | SVGElement | null>) => {
-  const ref = useRef<HTMLElement>(null);
-  const [position, setPosition] = useState<MousePosition>({
-    x: null,
-    y: null,
-    elementX: null,
-    elementY: null,
-    elementPositionX: null,
-    elementPositionY: null,
-  });
-
-  const mouseMove = (e: MouseEvent) => {
-    const { clientX, clientY } = e;
-    setPosition(prev => ({ ...prev, x: clientX, y: clientY }));
-
-    if (containerRef?.current instanceof Element) {
-      const newState = getMousePosition(containerRef.current.getBoundingClientRect(), e);
-      setPosition(prev => ({
-        ...prev,
-        ...newState,
-      }));
-    } else if (ref.current instanceof Element) {
-      const newState = getMousePosition(ref.current.getBoundingClientRect(), e);
-      setPosition(prev => ({
-        ...prev,
-        ...newState,
-      }));
-    }
-  };
-
-  useEventListener('mousemove', mouseMove);
-
-  return { ...position, ref };
-};

package/src/hooks/use-online-status.ts

@@ -1,12 +0,0 @@
-import { useState } from 'react';
-
-import { useEventListener } from './use-event-listener';
-
-export const useOnlineStatus = () => {
-  const [online, setOnline] = useState(navigator.onLine);
-
-  useEventListener('online', () => setOnline(navigator.onLine));
-  useEventListener('offline', () => setOnline(navigator.onLine));
-
-  return online;
-};

package/src/hooks/use-render-count.ts

@@ -1,11 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-export const useRenderCount = () => {
-  const count = useRef(1);
-
-  useEffect(() => {
-    count.current++;
-  });
-
-  return count.current;
-};

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

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

package/src/hooks/use-safe-dispatch.ts

@@ -1,22 +0,0 @@
-import React, { useCallback, useLayoutEffect, useRef } from 'react';
-
-export const useSafeDispatch = <T>(dispatch: React.Dispatch<T>): ((action: T) => void) => {
-  const mounted = useRef(false);
-
-  useLayoutEffect(() => {
-    mounted.current = true;
-
-    return () => {
-      mounted.current = false;
-    };
-  }, []);
-
-  return useCallback(
-    (...args: Parameters<React.Dispatch<T>>) => {
-      if (mounted.current) {
-        dispatch(...args);
-      }
-    },
-    [dispatch],
-  );
-};

package/src/hooks/use-scroll.ts

@@ -1,31 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-export const useScroll = () => {
-  const ref = useRef<HTMLElement>(null);
-  const [position, setPosition] = useState([0, 0]);
-
-  useEffect(() => {
-    const element = ref.current;
-
-    const handleScroll = () => {
-      if (!element) return;
-
-      setPosition([element.scrollLeft, element.scrollTop]);
-    };
-
-    if (element) {
-      element.addEventListener('scroll', handleScroll);
-    }
-
-    return () => {
-      if (element) {
-        element.removeEventListener('scroll', handleScroll);
-      }
-    };
-  }, []);
-
-  return {
-    ref,
-    position,
-  };
-};

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

@@ -1,22 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-
-function useStateHistory<T>(initialState: T | (() => T)): [T, Dispatch<SetStateAction<T>>, Array<T>];
-
-function useStateHistory<T = undefined>(): [T | undefined, Dispatch<SetStateAction<T | undefined>>, Array<T>];
-
-function useStateHistory<T = undefined>(
-  initialState?: T | (() => T) | undefined,
-): [T | undefined, Dispatch<SetStateAction<T | undefined>>, Array<T>] {
-  const [state, setState] = useState<T | undefined>(initialState);
-  const [history, setHistory] = useState<Array<T>>([]);
-
-  useEffect(() => {
-    if (state !== undefined) {
-      setHistory(prevHistory => [...prevHistory, state]);
-    }
-  }, [state]);
-
-  return [state, setState, history];
-}
-
-export { useStateHistory };

package/src/hooks/use-toggle-values.ts

@@ -1,14 +0,0 @@
-import { useCallback, useState } from 'react';
-
-export const useToggleValues = <T>(values: Array<T>, defaultIndex: number = 0): [T, (index?: number) => void] => {
-  const [index, setIndex] = useState(defaultIndex);
-
-  const toggle = useCallback(
-    (index?: number) => {
-      setIndex(index !== undefined ? index : prev => (prev + 1) % values.length);
-    },
-    [values.length],
-  );
-
-  return [values[index], toggle];
-};

package/src/hooks/use-toggle.ts

@@ -1,11 +0,0 @@
-import { useCallback, useState } from 'react';
-
-export const useToggle = (defaultValue: boolean = false) => {
-  const [value, setValue] = useState<boolean>(defaultValue);
-
-  const toggle = useCallback(() => {
-    setValue(prev => !prev);
-  }, []);
-
-  return [value, toggle, setValue];
-};

package/src/hooks/use-viewport.ts

@@ -1,38 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { useEventListener } from './use-event-listener';
-
-enum ScreenOrientation {
-  PORTRAIT = 'portrait',
-  LANDSCAPE = 'landscape',
-}
-
-type UseViewportData = {
-  width: number;
-  height: number;
-  orientation: ScreenOrientation;
-};
-
-export const useViewport = (): UseViewportData => {
-  const getData = (): UseViewportData => {
-    const { innerWidth, innerHeight } = window;
-
-    return {
-      width: innerWidth,
-      height: innerHeight,
-      orientation: innerWidth > innerHeight ? ScreenOrientation.LANDSCAPE : ScreenOrientation.PORTRAIT,
-    };
-  };
-
-  const [data, setData] = useState<UseViewportData>(getData);
-
-  useEventListener('resize', () => {
-    setData(getData());
-  });
-
-  useEffect(() => {
-    setData(getData());
-  }, []);
-
-  return data;
-};