polpo 0.1.0

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>,
+  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>,
+  options?: boolean | AddEventListenerOptions,
+): void;
+
+function useEventListener<EventName extends keyof DocumentEventMap>(
+  eventName: EventName,
+  callback: (event: DocumentEventMap[EventName]) => void,
+  element: RefObject<Document>,
+  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>,
+  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 '@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-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,20 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const useInView = (initOptions: IntersectionObserverInit = {}) => {
+  const [inView, setInView] = useState(false);
+  const ref = useRef<Element>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      setInView(entry.isIntersecting);
+    }, initOptions);
+
+    ref.current && observer.observe(ref.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [initOptions]);
+
+  return { ref, inView };
+};

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

@@ -0,0 +1,49 @@
+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-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,94 @@
+import React, { RefObject, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+import { useEventListener } from './use-event-listener';
+import { useObserver } from './use-observer';
+import { useOnClickOutsideRef } from './use-on-click-outside-ref';
+
+import { getModalPosition, GetModalPositionParams, 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,
+});
+
+type useModalInContainerParams = Partial<
+  Pick<GetModalPositionParams, 'position' | 'distancePercentage' | 'offset' | 'windowOffset'>
+> & {
+  closeOnClickOutside?: boolean;
+};
+
+export const useModalInContainer = <Container extends HTMLElement, Modal extends HTMLElement = Container>({
+  closeOnClickOutside = true,
+  offset = 5,
+  windowOffset = 10,
+  position,
+  distancePercentage = 50,
+}: useModalInContainerParams = {}) => {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+  const [modalStyle, setModalStyle] = useState<React.CSSProperties>({});
+
+  const modalRef = useRef<Modal>(null);
+  const containerRef = useRef<Container>(null);
+
+  useEffect(() => {
+    if (closeOnClickOutside) {
+      document.documentElement.style.overflow = isVisible ? 'hidden' : 'auto';
+    }
+  }, [isVisible, closeOnClickOutside]);
+
+  useOnClickOutsideRef<Modal>(modalRef, () => {
+    if (isVisible && closeOnClickOutside) {
+      setIsVisible(false);
+    }
+  });
+
+  const getPosition = useCallback(
+    (modalRef: RefObject<HTMLElement>) => {
+      const modal = modalRef.current?.getClientRects()[0];
+      const container = containerRef.current?.getClientRects()[0];
+
+      if (!container || !modal) {
+        setModalStyle({});
+
+        return;
+      }
+
+      const nextStyles = getModalPosition({
+        c: convertDOMRectToPosition(container),
+        m: convertDOMRectToPosition(modal),
+        distancePercentage,
+        windowOffset,
+        position,
+        offset,
+      });
+
+      setModalStyle(nextStyles);
+    },
+    [distancePercentage, windowOffset, position, offset],
+  );
+
+  const callback = useCallback(() => {
+    if (isVisible) {
+      getPosition(modalRef);
+    }
+  }, [getPosition, isVisible]);
+
+  useLayoutEffect(callback, [callback]);
+
+  useObserver<Container>(containerRef, callback);
+  useObserver<Modal>(modalRef, callback);
+  useEventListener('resize', callback);
+  useEventListener('scroll', callback, modalRef);
+
+  return {
+    isVisible,
+    setIsVisible,
+    modalStyle,
+    containerRef,
+    modalRef,
+  };
+};

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

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+
+import { useEventListener } from './use-event-listener';
+
+export const useMousePosition = () => {
+  const [{ x, y }, setPosition] = useState({ x: 0, y: 0 });
+
+  const mouseMove = (e: React.MouseEvent) => {
+    const { clientX, clientY } = e;
+    setPosition({ x: clientX, y: clientY });
+  };
+
+  useEventListener('mousemove', mouseMove as unknown as EventListener);
+
+  return [x, y];
+};

package/src/hooks/use-observer.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+export const useObserver = <T extends HTMLElement>(ref: React.RefObject<T>, callback: () => void) => {
+  useEffect(() => {
+    let observer = null;
+
+    if (callback && ref.current) {
+      observer = new ResizeObserver(callback);
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      if (observer) {
+        observer.disconnect();
+      }
+    };
+  }, [ref, callback]);
+};

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

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+
+import { useEventListener } from './use-event-listener';
+
+export const useOnClickOutsideRef = <T extends HTMLElement>(containerRef: RefObject<T>, callback: () => void) => {
+  useEventListener('keydown', e => {
+    if (e.key === 'Escape') {
+      callback();
+    }
+  });
+
+  useEventListener('mousedown', event => {
+    if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+      callback();
+    }
+  });
+};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,38 @@
+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;
+};

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './contexts';
+export * from './core';
+export * from './layouts';
+export * from './types';

package/src/layouts/flex/flex.tsx

@@ -0,0 +1,75 @@
+import React, { createElement } from 'react';
+
+type FlexProps = {
+  tag?: keyof React.ReactHTML;
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  direction?: React.CSSProperties['flexDirection'];
+  wrap?: React.CSSProperties['flexWrap'];
+  basis?: React.CSSProperties['flexBasis'];
+  grow?: React.CSSProperties['flexGrow'];
+  shrink?: React.CSSProperties['flexShrink'];
+  flow?: React.CSSProperties['flexFlow'];
+  pc?: React.CSSProperties['placeContent'];
+  pi?: React.CSSProperties['placeItems'];
+  ps?: React.CSSProperties['placeSelf'];
+  jc?: React.CSSProperties['justifyContent'];
+  ji?: React.CSSProperties['justifyItems'];
+  js?: React.CSSProperties['justifySelf'];
+  ac?: React.CSSProperties['alignContent'];
+  ai?: React.CSSProperties['alignItems'];
+  as?: React.CSSProperties['alignSelf'];
+  gap?: React.CSSProperties['gap'];
+};
+
+export const Flex = ({
+  tag = 'section',
+  children,
+  className,
+  style,
+  direction,
+  wrap,
+  basis,
+  grow,
+  shrink,
+  flow,
+  pc,
+  pi,
+  ps,
+  jc,
+  ji,
+  js,
+  ac,
+  ai,
+  as,
+  gap,
+}: FlexProps) => {
+  return createElement(
+    tag,
+    {
+      className,
+      style: {
+        ...style,
+        ...(direction ? { flexDirection: direction } : {}),
+        ...(wrap ? { flexWrap: wrap } : {}),
+        ...(basis ? { flexBasis: basis } : {}),
+        ...(grow ? { flexGrow: grow } : {}),
+        ...(shrink ? { flexShrink: shrink } : {}),
+        ...(flow ? { flexFlow: flow } : {}),
+        ...(pc ? { placeContent: pc } : {}),
+        ...(pi ? { placeItems: pi } : {}),
+        ...(ps ? { placeSelf: ps } : {}),
+        ...(jc ? { justifyContent: jc } : {}),
+        ...(ji ? { justifyItems: ji } : {}),
+        ...(js ? { justifySelf: js } : {}),
+        ...(ac ? { alignContent: ac } : {}),
+        ...(ai ? { alignItems: ai } : {}),
+        ...(as ? { alignSelf: as } : {}),
+        ...(gap ? { gap: gap } : {}),
+        display: 'flex',
+      },
+    },
+    children,
+  );
+};

package/src/layouts/flex/index.ts

@@ -0,0 +1 @@
+export * from './flex';