polpo 0.1.1 → 0.1.2

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-dimensions.ts

@@ -1,22 +1,19 @@
-import React, { useEffect, useState } from 'react';
+import { useState } from 'react';
 
-import { useEventListener } from './use-event-listener';
-import { useObserver } from './use-observer';
+import { useResizeObserver } from './use-resize-observer';
 
 export const useDimensions = (ref: React.RefObject<HTMLElement>) => {
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
 
-  const getSize = () => {
-    setDimensions({
-      width: ref.current?.offsetWidth ?? 0,
-      height: ref.current?.offsetHeight ?? 0,
-    });
-  };
-
-  useEventListener('resize', getSize);
-  useObserver(ref, getSize);
-
-  useEffect(getSize, [ref]);
+  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,32 @@
+import { ForwardedRef, useEffect, useMemo } from 'react';
+
+export const useDomContainer = (containerID: string, ref?: ForwardedRef<HTMLElement>) => {
+  useEffect(() => {
+    return () => {
+      const domContainer = document.getElementById(containerID);
+
+      if (domContainer?.parentNode === document.body) {
+        document.body.removeChild(domContainer);
+      }
+    };
+  }, [containerID, ref]);
+
+  return useMemo(() => {
+    let domContainer = document.getElementById(containerID);
+
+    if (!domContainer) {
+      domContainer = document.createElement('div');
+      domContainer.setAttribute('id', containerID);
+
+      if (typeof ref === 'function') {
+        ref(domContainer);
+      } else if (ref) {
+        ref.current = domContainer;
+      }
+
+      document.body.appendChild(domContainer);
+    }
+
+    return domContainer;
+  }, [containerID, ref]);
+};

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

@@ -3,7 +3,7 @@ import { RefObject, useEffect, useLayoutEffect, useRef } from 'react';
 function useEventListener<EventName extends keyof MediaQueryListEventMap>(
   eventName: EventName,
   callback: (event: MediaQueryListEventMap[EventName]) => void,
-  element: RefObject<MediaQueryList>,
+  element: RefObject<MediaQueryList> | undefined,
   options?: boolean | AddEventListenerOptions,
 ): void;
 
@@ -17,14 +17,14 @@ function useEventListener<EventName extends keyof WindowEventMap>(
 function useEventListener<EventName extends keyof HTMLElementEventMap, ElementRef extends HTMLElement = HTMLDivElement>(
   eventName: EventName,
   callback: (event: HTMLElementEventMap[EventName]) => void,
-  element: RefObject<ElementRef>,
+  element: RefObject<ElementRef> | undefined,
   options?: boolean | AddEventListenerOptions,
 ): void;
 
 function useEventListener<EventName extends keyof DocumentEventMap>(
   eventName: EventName,
   callback: (event: DocumentEventMap[EventName]) => void,
-  element: RefObject<Document>,
+  element: RefObject<Document> | undefined,
   options?: boolean | AddEventListenerOptions,
 ): void;
 
@@ -44,7 +44,7 @@ function useEventListener<
       | DocumentEventMap[DocumentEventName]
       | Event,
   ) => void,
-  element?: RefObject<ElementRef>,
+  element?: RefObject<ElementRef> | undefined,
   options?: boolean | AddEventListenerOptions,
 ) {
   const callbackRef = useRef<EventListener>(callback);

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>(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-in-view.ts

@@ -1,20 +1,18 @@
-import { useEffect, useRef, useState } from 'react';
+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);
 
-  useEffect(() => {
-    const observer = new IntersectionObserver(([entry]) => {
+  useIntersectionObserver(
+    ref,
+    ([entry]) => {
       setInView(entry.isIntersecting);
-    }, initOptions);
-
-    ref.current && observer.observe(ref.current);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [initOptions]);
+    },
+    initOptions,
+  );
 
   return { ref, inView };
 };

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> | 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-modal-in-container.ts

@@ -1,10 +1,16 @@
-import React, { RefObject, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { RefObject, useCallback, useLayoutEffect, useRef } from 'react';
 
+import { useClickOutside } from './use-click-outside';
 import { useEventListener } from './use-event-listener';
-import { useObserver } from './use-observer';
-import { useOnClickOutsideRef } from './use-on-click-outside-ref';
+import { useModalTransition } from './use-modal-transition';
+import { useResizeObserver } from './use-resize-observer';
 
-import { getModalPosition, GetModalPositionParams, PositionObject } from '@polpo/helpers';
+import {
+  getModalPositionRelativeToContainer,
+  getModalPositionRelativeToScreen,
+  PositionContainer,
+  PositionObject,
+} from '@polpo/helpers';
 
 const convertDOMRectToPosition = (rect: DOMRectReadOnly): PositionObject => ({
   x: rect.x,
@@ -15,80 +21,82 @@ const convertDOMRectToPosition = (rect: DOMRectReadOnly): PositionObject => ({
   left: rect.left,
 });
 
-type useModalInContainerParams = Partial<
-  Pick<GetModalPositionParams, 'position' | 'distancePercentage' | 'offset' | 'windowOffset'>
-> & {
+export type UseModalInContainerParams<
+  Container extends HTMLElement = HTMLElement,
+  Modal extends HTMLElement = Container,
+> = {
   closeOnClickOutside?: boolean;
+  transitionDuration?: number;
+  windowOffset?: number;
+  offset?: number;
+  position?: `${PositionContainer}`;
+  modalRef: RefObject<Modal>;
+  containerRef?: RefObject<Container>;
+  onClose?: () => void;
 };
 
-export const useModalInContainer = <Container extends HTMLElement, Modal extends HTMLElement = Container>({
+export const useModalInContainer = <
+  Container extends HTMLElement = 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, () => {
+  offset = 0,
+  windowOffset = 0,
+  position = PositionContainer.BOTTOM,
+  transitionDuration = 0,
+  modalRef,
+  containerRef,
+  onClose,
+}: UseModalInContainerParams<Container, Modal>) => {
+  const containerTemporalRef = useRef<Container>(null);
+  const modalState = useModalTransition(transitionDuration, onClose);
+
+  const { isVisible, closeModal } = modalState;
+
+  useClickOutside<Modal>(modalRef, () => {
     if (isVisible && closeOnClickOutside) {
-      setIsVisible(false);
+      closeModal();
     }
   });
 
   const getPosition = useCallback(
-    (modalRef: RefObject<HTMLElement>) => {
+    (modalRef: RefObject<Modal>, containerRef: RefObject<Container>) => {
       const modal = modalRef.current?.getClientRects()[0];
       const container = containerRef.current?.getClientRects()[0];
 
-      if (!container || !modal) {
-        setModalStyle({});
-
+      if (!modal) {
         return;
       }
 
-      const nextStyles = getModalPosition({
-        c: convertDOMRectToPosition(container),
-        m: convertDOMRectToPosition(modal),
-        distancePercentage,
-        windowOffset,
-        position,
-        offset,
+      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]);
       });
-
-      setModalStyle(nextStyles);
     },
-    [distancePercentage, windowOffset, position, offset],
+    [position, windowOffset, offset],
   );
 
   const callback = useCallback(() => {
     if (isVisible) {
-      getPosition(modalRef);
+      getPosition(modalRef, containerRef ?? containerTemporalRef);
     }
-  }, [getPosition, isVisible]);
+  }, [getPosition, isVisible, containerRef, modalRef]);
 
   useLayoutEffect(callback, [callback]);
 
-  useObserver<Container>(containerRef, callback);
-  useObserver<Modal>(modalRef, callback);
+  useResizeObserver<Container>(containerRef ?? containerTemporalRef, callback);
+  useResizeObserver<Modal>(modalRef, callback);
   useEventListener('resize', callback);
   useEventListener('scroll', callback, modalRef);
 
-  return {
-    isVisible,
-    setIsVisible,
-    modalStyle,
-    containerRef,
-    modalRef,
-  };
+  return modalState;
 };

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

@@ -0,0 +1,54 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+
+export enum ModalState {
+  OPENING = 'OPENING',
+  OPEN = 'OPEN',
+  CLOSING = 'CLOSING',
+  CLOSED = 'CLOSED',
+}
+
+export const useModalTransition = (transitionDuration: number = 0, onClose: () => void = () => null) => {
+  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);
+          onClose();
+        }, transitionDuration);
+      } else {
+        setModalState(ModalState.CLOSED);
+      }
+    }
+  }, [onClose, 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]);
+
+  return {
+    isVisible,
+    closeModal,
+    openModal,
+    modalState,
+  };
+};

package/src/hooks/use-modal.ts

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

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

@@ -0,0 +1,18 @@
+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/stories/GettingStarted.mdx

@@ -4,13 +4,9 @@ import { Meta } from "@storybook/blocks";
 
 # Polpo UI
 
-[![npm version](https://badge.fury.io/js/polpo.svg)](https://www.npmjs.com/package/polpo)
-
-
-## Description
-
-`polpo` is a lightweight and customizable UI component library designed for React applications. This library provides a set of reusable components to speed up development and maintain a consistent user interface across your projects.
+A lightweight and customizable UI component library designed for React applications. This library provides a set of reusable components to speed up development and maintain a consistent user interface across your projects.
 
+[![npm version](https://badge.fury.io/js/polpo.svg)](https://www.npmjs.com/package/polpo)
 
 ## Features
 

package/svg/Name=npm, Category=social.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 9.93333C0 9.41787 0.421379 9 0.941176 9H31.0588C31.5786 9 32 9.41787 32 9.93333V19.3704C32 19.8858 31.5786 20.3037 31.0588 20.3037H15.5722V22.0667C15.5722 22.5821 15.1508 23 14.631 23H9.15508C8.63528 23 8.2139 22.5821 8.2139 22.0667V20.3037H0.941176C0.421379 20.3037 0 19.8858 0 19.3704V9.93333ZM5.9893 18.437V13.9778C5.9893 13.4623 5.56793 13.0444 5.04813 13.0444C4.52833 13.0444 4.10695 13.4623 4.10695 13.9778V18.437H1.88235V10.8667H8.2139V18.437H5.9893ZM10.0963 10.8667L10.0963 21.1333H13.6898V19.3704C13.6898 18.8549 14.1112 18.437 14.631 18.437H17.7968V10.8667H10.0963ZM19.6791 10.8667V18.437H21.9037V13.9778C21.9037 13.4623 22.3251 13.0444 22.8449 13.0444C23.3647 13.0444 23.7861 13.4623 23.7861 13.9778V18.437H26.0107V13.9778C26.0107 13.4623 26.4321 13.0444 26.9519 13.0444C27.4717 13.0444 27.893 13.4623 27.893 13.9778V18.437H30.1176V10.8667H19.6791ZM14.631 13.0444C15.1508 13.0444 15.5722 13.4623 15.5722 13.9778V15.3259C15.5722 15.8414 15.1508 16.2593 14.631 16.2593C14.1112 16.2593 13.6898 15.8414 13.6898 15.3259V13.9778C13.6898 13.4623 14.1112 13.0444 14.631 13.0444Z" fill="white"/>
+</svg>