polpo 0.1.7 → 0.1.8

package/src/helpers/get-modal-position.ts

@@ -1,211 +0,0 @@
-export enum PositionContainer {
-  CENTER = 'center',
-  TOP = 'top',
-  TOP_LEFT = 'top left',
-  TOP_RIGHT = 'top right',
-  TOP_CENTER = 'top center',
-  LEFT = 'left',
-  LEFT_TOP = 'left top',
-  LEFT_BOTTOM = 'left bottom',
-  LEFT_CENTER = 'left center',
-  RIGHT = 'right',
-  RIGHT_TOP = 'right top',
-  RIGHT_BOTTOM = 'right bottom',
-  RIGHT_CENTER = 'right center',
-  BOTTOM = 'bottom',
-  BOTTOM_LEFT = 'bottom left',
-  BOTTOM_RIGHT = 'bottom right',
-  BOTTOM_CENTER = 'bottom center',
-}
-
-export type PositionObject = {
-  x: number;
-  y: number;
-  top: number;
-  left: number;
-  w: number;
-  h: number;
-};
-
-export type ModalPosition = {
-  left: number;
-  top: number;
-};
-
-export type GetModalPositionParams = {
-  c: PositionObject;
-  m: PositionObject;
-  offset: number;
-  position: PositionContainer;
-};
-
-/*
- * @description Calculates the position of the modal relative to the container
- *
- * @param c - The container's position object
- * @param m - The modal's position object
- * @param offset - The offset between the container and the modal
- * @param position - The position of the modal
- *
- * -----------------------------------------------------------------------------
- * @returns The position of the modal relative to the container
- */
-export const getModalPosition = ({ c, m, offset, position }: GetModalPositionParams): ModalPosition => {
-  // Default bottom
-  let top = c.y + c.h + offset;
-  let left = c.x - (m.w - c.w) * (50 / 100);
-
-  switch (position) {
-    case PositionContainer.TOP:
-    case PositionContainer.TOP_CENTER:
-      top = c.y - m.h - offset;
-      left = c.x - (m.w - c.w) / 2;
-
-      break;
-    case PositionContainer.TOP_LEFT:
-      top = c.y - m.h - offset;
-      left = c.x - m.w + c.w;
-
-      break;
-
-    case PositionContainer.TOP_RIGHT:
-      top = c.y - m.h - offset;
-      left = c.x;
-
-      break;
-
-    case PositionContainer.BOTTOM:
-    case PositionContainer.BOTTOM_CENTER:
-      top = c.y + c.h + offset;
-      left = c.x - (m.w - c.w) / 2;
-
-      break;
-
-    case PositionContainer.BOTTOM_LEFT:
-      top = c.y + c.h + offset;
-      left = c.x - m.w + c.w;
-
-      break;
-
-    case PositionContainer.BOTTOM_RIGHT:
-      top = c.y + c.h + offset;
-      left = c.x;
-
-      break;
-
-    case PositionContainer.LEFT:
-    case PositionContainer.LEFT_CENTER:
-      top = c.y - (m.h - c.h) / 2;
-      left = c.x - m.w - offset;
-
-      break;
-
-    case PositionContainer.LEFT_TOP:
-      top = c.y - m.h + c.h;
-      left = c.x - m.w - offset;
-
-      break;
-
-    case PositionContainer.LEFT_BOTTOM:
-      top = c.y;
-      left = c.x - m.w - offset;
-
-      break;
-
-    case PositionContainer.RIGHT:
-    case PositionContainer.RIGHT_CENTER:
-      top = c.y - (m.h - c.h) / 2;
-      left = c.x + c.w + offset;
-
-      break;
-
-    case PositionContainer.RIGHT_TOP:
-      top = c.y - m.h + c.h;
-      left = c.x + c.w + offset;
-
-      break;
-
-    case PositionContainer.RIGHT_BOTTOM:
-      top = c.y;
-      left = c.x + c.w + offset;
-
-      break;
-  }
-
-  return {
-    left: Math.round(left),
-    top: Math.round(top),
-  };
-};
-
-export const getOppositePosition = (
-  { top, left }: ModalPosition,
-  position: PositionContainer,
-  windowOffset: number,
-  m: PositionObject,
-) => {
-  const positions = position.split(' ');
-  const newPosition = [];
-  const rightOffset = left + m.w + windowOffset - window.innerWidth;
-  const bottomOffset = top + m.h + windowOffset - window.innerHeight;
-
-  for (const p of positions) {
-    if (p === PositionContainer.TOP && top < windowOffset) {
-      newPosition.push(PositionContainer.BOTTOM);
-    } else if (p === PositionContainer.LEFT && left < windowOffset) {
-      newPosition.push(PositionContainer.RIGHT);
-    } else if (p === PositionContainer.BOTTOM && bottomOffset > 0) {
-      newPosition.push(PositionContainer.TOP);
-    } else if (p === PositionContainer.RIGHT && rightOffset > 0) {
-      newPosition.push(PositionContainer.LEFT);
-    } else {
-      newPosition.push(p);
-    }
-  }
-
-  return newPosition.join(' ') as PositionContainer;
-};
-
-export const fixModalPosition = ({ top, left }: ModalPosition, m: PositionObject, windowOffset: number) => {
-  const rightOffset = left + m.w + windowOffset - window.innerWidth;
-  const bottomOffset = top + m.h + windowOffset - window.innerHeight;
-
-  left = rightOffset > 0 ? left - rightOffset : left;
-  top = bottomOffset > 0 ? top - bottomOffset : top;
-
-  left = left < windowOffset ? windowOffset : left;
-  top = top < windowOffset ? windowOffset : top;
-
-  return { top, left };
-};
-
-type getModalPositionRelativeToContainerParams = GetModalPositionParams & {
-  windowOffset: number;
-};
-
-export const getModalPositionRelativeToContainer = ({
-  c,
-  m,
-  offset,
-  windowOffset,
-  position,
-}: getModalPositionRelativeToContainerParams): Record<string, string> => {
-  const params = { c, m, offset, position };
-  let modalContainerStyle = getModalPosition(params);
-
-  const oppositePosition = getOppositePosition(modalContainerStyle, position, windowOffset, m);
-
-  if (oppositePosition !== position) {
-    modalContainerStyle = getModalPosition({
-      ...params,
-      position: oppositePosition,
-    });
-  }
-
-  const fixedPosition = fixModalPosition(modalContainerStyle, m, windowOffset);
-
-  return {
-    left: `${fixedPosition.left}px`,
-    top: `${fixedPosition.top}px`,
-  };
-};

package/src/helpers/index.ts

@@ -1,5 +0,0 @@
-export * from './format-bytes';
-export * from './format-dates';
-export * from './get-modal-position';
-export * from './get-modal-position-relative-to-screen';
-export * from './text';

package/src/helpers/text/index.ts

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

package/src/helpers/text/to-capitalize.ts

@@ -1,17 +0,0 @@
-export type ToCapitalizeOptions = Partial<{
-  separator: string;
-  join: string;
-  variant: 'first-word' | 'each-word';
-}>;
-
-export const toCapitalize = (text: string, options: ToCapitalizeOptions = {}) => {
-  const { separator = ' ', variant = 'each-word', join = separator } = options;
-
-  if (variant === 'first-word') {
-    return text[0].toUpperCase() + text.slice(1);
-  }
-
-  const words = text.split(separator);
-
-  return words.map(word => word[0].toUpperCase() + word.slice(1)).join(join);
-};

package/src/hooks/index.ts

@@ -1,29 +0,0 @@
-export * from './use-async';
-export * from './use-classnames';
-export * from './use-click-outside';
-export * from './use-constant';
-export * from './use-cookie';
-export * from './use-debounce';
-export * from './use-dimensions';
-export * from './use-dom-container';
-export * from './use-event-listener';
-export * from './use-file-reader';
-export * from './use-geolocation';
-export * from './use-hover';
-export * from './use-in-view';
-export * from './use-input-handlers';
-export * from './use-intersection-observer';
-export * from './use-media-query';
-export * from './use-modal';
-export * from './use-modal-in-container';
-export * from './use-modal-transition';
-export * from './use-mouse-position';
-export * from './use-online-status';
-export * from './use-render-count';
-export * from './use-resize-observer';
-export * from './use-safe-dispatch';
-export * from './use-scroll';
-export * from './use-state-history';
-export * from './use-toggle';
-export * from './use-toggle-values';
-export * from './use-viewport';

package/src/hooks/use-async.ts

@@ -1,88 +0,0 @@
-import React, { useCallback, useMemo, useReducer } from 'react';
-
-import { useSafeDispatch } from './use-safe-dispatch';
-
-type AsyncState<T> =
-  | {
-      status: 'idle' | 'pending';
-      data?: null;
-      error?: null;
-    }
-  | {
-      status: 'resolved';
-      data: T;
-      error: null;
-    }
-  | {
-      status: 'rejected';
-      data: null;
-      error: Error;
-    };
-
-type AsyncAction<T> =
-  | { type: 'reset' }
-  | { type: 'pending' }
-  | { type: 'resolved'; data: T }
-  | { type: 'rejected'; error: Error };
-
-const asyncReducer = <T>(_state: AsyncState<T>, action: AsyncAction<T>): AsyncState<T> => {
-  switch (action.type) {
-    case 'pending': {
-      return { status: 'pending' as const, data: null, error: null };
-    }
-    case 'resolved': {
-      return { status: 'resolved' as const, data: action.data, error: null };
-    }
-    case 'rejected': {
-      return { status: 'rejected' as const, data: null, error: action.error };
-    }
-    default: {
-      throw new Error(`Unhandled action: ${JSON.stringify(action)}`);
-    }
-  }
-};
-
-export const useAsync = <T>(
-  initialState?: AsyncState<T>,
-): AsyncState<T> & {
-  setData: (data: T) => void;
-  setError: (error: Error) => void;
-  run: (promise: Promise<T>) => void;
-} => {
-  const [asyncState, unsafeDispatch] = useReducer<React.Reducer<AsyncState<T>, AsyncAction<T>>>(asyncReducer, {
-    status: 'idle',
-    data: null,
-    error: null,
-    ...initialState,
-  });
-  const dispatch = useSafeDispatch(unsafeDispatch);
-
-  const run = useCallback(
-    (promise: Promise<T>) => {
-      dispatch({ type: 'pending' });
-      promise.then(
-        data => {
-          dispatch({ type: 'resolved', data });
-        },
-        (error: Error) => {
-          dispatch({ type: 'rejected', error });
-        },
-      );
-    },
-    [dispatch],
-  );
-
-  const setData = useCallback((data: T) => dispatch({ type: 'resolved', data }), [dispatch]);
-
-  const setError = useCallback((error: Error) => dispatch({ type: 'rejected', error }), [dispatch]);
-
-  return useMemo(
-    () => ({
-      setData,
-      setError,
-      run,
-      ...asyncState,
-    }),
-    [asyncState, run, setData, setError],
-  );
-};

package/src/hooks/use-classnames.ts

@@ -1,13 +0,0 @@
-import { useMemo } from 'react';
-
-export const useClassNames = (classes: Record<string, boolean>): string =>
-  useMemo<string>(
-    () =>
-      Object.entries(classes)
-        .reduce<Array<string>>(
-          (compiledClassNames, [classname, value]) => (value ? [...compiledClassNames, classname] : compiledClassNames),
-          [],
-        )
-        .join(' '),
-    [classes],
-  );

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

@@ -1,32 +0,0 @@
-import { RefObject } from 'react';
-
-import { useEventListener } from './use-event-listener';
-
-const checkIsOutside = (ref: RefObject<HTMLElement>, target: Node) => {
-  return ref.current && !ref.current.contains(target);
-};
-
-export const useClickOutside = <T extends HTMLElement>(
-  ref: RefObject<T> | Array<RefObject<T>>,
-  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

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

package/src/hooks/use-cookie.ts

@@ -1,124 +0,0 @@
-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.ts

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

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

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

@@ -1,71 +0,0 @@
-import { RefObject, useEffect, useLayoutEffect, useRef } from 'react';
-
-function useEventListener<EventName extends keyof MediaQueryListEventMap>(
-  eventName: EventName,
-  callback: (event: MediaQueryListEventMap[EventName]) => void,
-  element: RefObject<MediaQueryList> | 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> | undefined,
-  options?: boolean | AddEventListenerOptions,
-): void;
-
-function useEventListener<EventName extends keyof DocumentEventMap>(
-  eventName: EventName,
-  callback: (event: DocumentEventMap[EventName]) => void,
-  element: RefObject<Document> | 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> | 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 };