polpo 0.1.0 → 0.1.2

package/src/core/http-client.ts

@@ -1,47 +1,49 @@
-import axios, { AxiosInstance } from 'axios';
-
-export class HttpClient {
-  private _instance: AxiosInstance;
-  private _token: string;
-
-  public logout = () => localStorage.removeItem('token');
-
-  constructor(baseURL: string) {
-    this._token = localStorage.getItem('token') ?? '';
-
-    this._instance = axios.create({
-      baseURL: baseURL,
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-
-    this._instance.interceptors.request.use(req => {
-      const token = this.token;
-      token !== null && req.headers.setAuthorization(`Bearer ${token}`);
-
-      return req;
-    });
-
-    this._instance.interceptors.response.use(
-      response => Promise.resolve(response),
-      error => {
-        error.response.status === 401 && this.logout();
-        Promise.reject(error);
-      },
-    );
-  }
-
-  public get instance(): AxiosInstance {
-    return this._instance;
-  }
-
-  public get token() {
-    return this._token;
-  }
-
-  public set token(token: string) {
-    this._token = token;
-    localStorage.setItem('token', token);
-  }
-}
+/*
+ * import axios, { AxiosInstance } from 'axios';
+ *
+ * export class HttpClient {
+ *   private _instance: AxiosInstance;
+ *   private _token: string;
+ *
+ *   public logout = () => localStorage.removeItem('token');
+ *
+ *   constructor(baseURL: string) {
+ *     this._token = localStorage.getItem('token') ?? '';
+ *
+ *     this._instance = axios.create({
+ *       baseURL: baseURL,
+ *       headers: {
+ *         'Content-Type': 'application/json',
+ *       },
+ *     });
+ *
+ *     this._instance.interceptors.request.use(req => {
+ *       const token = this.token;
+ *       token !== null && req.headers.setAuthorization(`Bearer ${token}`);
+ *
+ *       return req;
+ *     });
+ *
+ *     this._instance.interceptors.response.use(
+ *       response => Promise.resolve(response),
+ *       error => {
+ *         error.response.status === 401 && this.logout();
+ *         Promise.reject(error);
+ *       },
+ *     );
+ *   }
+ *
+ *   public get instance(): AxiosInstance {
+ *     return this._instance;
+ *   }
+ *
+ *   public get token() {
+ *     return this._token;
+ *   }
+ *
+ *   public set token(token: string) {
+ *     this._token = token;
+ *     localStorage.setItem('token', token);
+ *   }
+ * }
+ */

package/src/core/variants/color.ts

@@ -1,36 +1,9 @@
-import { useClassNames } from '@polpo/hooks';
-
 export enum ColorVariants {
-  Primary = 'small',
-  Secondary = 'medium',
-  Tertiary = 'large',
+  Primary = 'primary',
+  Secondary = 'secondary',
+  Tertiary = 'tertiary',
   Info = 'info',
   Active = 'active',
   Warning = 'warning',
   Alert = 'alert',
 }
-
-const getColorVariantClassName = (size: `${ColorVariants}`) => {
-  return `${size}-color`;
-};
-
-export const ColorClassNames: Record<keyof typeof ColorVariants, string> = {
-  Primary: getColorVariantClassName(ColorVariants.Primary),
-  Secondary: getColorVariantClassName(ColorVariants.Secondary),
-  Tertiary: getColorVariantClassName(ColorVariants.Tertiary),
-  Info: getColorVariantClassName(ColorVariants.Info),
-  Active: getColorVariantClassName(ColorVariants.Active),
-  Warning: getColorVariantClassName(ColorVariants.Warning),
-  Alert: getColorVariantClassName(ColorVariants.Alert),
-};
-
-export const useColorClassName = (size: `${ColorVariants}`) =>
-  useClassNames(
-    Object.entries(ColorVariants).reduce(
-      (object, [key, value]) => ({
-        ...object,
-        [ColorClassNames[key as keyof typeof ColorVariants]]: size === value,
-      }),
-      {},
-    ),
-  );

package/src/core/variants/radius.ts

@@ -1,7 +1,5 @@
 import { css } from 'styled-components';
 
-import { useClassNames } from '@polpo/hooks';
-
 export enum RadiusVariants {
   None = 'none',
   Small = 'small',
@@ -10,47 +8,20 @@ export enum RadiusVariants {
   Full = 'full',
 }
 
-const getRadiusVariantClassName = (size: `${RadiusVariants}`) => {
-  return `${size}-radius`;
-};
-
-export const RadiusClassNames: Record<keyof typeof RadiusVariants, string> = {
-  None: getRadiusVariantClassName(RadiusVariants.None),
-  Small: getRadiusVariantClassName(RadiusVariants.Small),
-  Medium: getRadiusVariantClassName(RadiusVariants.Medium),
-  Large: getRadiusVariantClassName(RadiusVariants.Large),
-  Full: getRadiusVariantClassName(RadiusVariants.Full),
-};
-
-export const useRadiusClassName = (size: `${RadiusVariants}`) =>
-  useClassNames(
-    Object.entries(RadiusVariants).reduce(
-      (object, [key, value]) => ({
-        ...object,
-        [RadiusClassNames[key as keyof typeof RadiusVariants]]: size === value,
-      }),
-      {},
-    ),
-  );
-
-export const RadiusStyles = css`
-  &.${RadiusClassNames.None} {
+export const RadiusStyles: Record<RadiusVariants, ReturnType<typeof css>> = {
+  [RadiusVariants.None]: css`
     border-radius: 0;
-  }
-
-  &.${RadiusClassNames.Small} {
+  `,
+  [RadiusVariants.Small]: css`
     border-radius: 0.5em;
-  }
-
-  &.${RadiusClassNames.Medium} {
+  `,
+  [RadiusVariants.Medium]: css`
     border-radius: 1em;
-  }
-
-  &.${RadiusClassNames.Large} {
+  `,
+  [RadiusVariants.Large]: css`
     border-radius: 1.5em;
-  }
-
-  &.${RadiusClassNames.Full} {
+  `,
+  [RadiusVariants.Full]: css`
     border-radius: 100em;
-  }
-`;
+  `,
+};

package/src/core/variants/size.ts

@@ -1,44 +1,19 @@
 import { css } from 'styled-components';
 
-import { useClassNames } from '@polpo/hooks';
-
 export enum SizeVariants {
   Small = 'small',
   Medium = 'medium',
   Large = 'large',
 }
 
-const getSizeVariantClassName = (size: `${SizeVariants}`) => {
-  return `${size}-size`;
-};
-
-export const SizeClassNames: Record<keyof typeof SizeVariants, string> = {
-  Small: getSizeVariantClassName(SizeVariants.Small),
-  Medium: getSizeVariantClassName(SizeVariants.Medium),
-  Large: getSizeVariantClassName(SizeVariants.Large),
-};
-
-export const useSizeClassName = (size: `${SizeVariants}`) =>
-  useClassNames(
-    Object.entries(SizeVariants).reduce(
-      (object, [key, value]) => ({
-        ...object,
-        [SizeClassNames[key as keyof typeof SizeVariants]]: size === value,
-      }),
-      {},
-    ),
-  );
-
-export const SizeStyles = css`
-  &.${SizeClassNames.Small} {
+export const SizeStyles: Record<SizeVariants, ReturnType<typeof css>> = {
+  [SizeVariants.Small]: css`
     font-size: ${props => props.theme.constants.typography.small.fontSize};
-  }
-
-  &.${SizeClassNames.Medium} {
+  `,
+  [SizeVariants.Medium]: css`
     font-size: ${props => props.theme.constants.typography.label.fontSize};
-  }
-
-  &.${SizeClassNames.Large} {
+  `,
+  [SizeVariants.Large]: css`
     font-size: ${props => props.theme.constants.typography.body.fontSize};
-  }
-`;
+  `,
+};

package/src/helpers/get-modal-position-relative-to-screen.ts

@@ -0,0 +1,86 @@
+import { PositionContainer } from './get-modal-position';
+
+export type GetModalPositionRelativeToScreenParams = {
+  position: PositionContainer;
+  windowOffset: number;
+};
+
+export const getModalPositionRelativeToScreen = ({
+  position,
+  windowOffset,
+}: GetModalPositionRelativeToScreenParams): Record<string, string> => {
+  switch (position) {
+    case PositionContainer.CENTER:
+      return {
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+      };
+
+    case PositionContainer.TOP:
+    case PositionContainer.TOP_CENTER:
+      return {
+        top: `${windowOffset}px`,
+        left: '50%',
+        transform: 'translateX(-50%)',
+      };
+
+    case PositionContainer.TOP_LEFT:
+    case PositionContainer.LEFT_TOP:
+      return {
+        top: `${windowOffset}px`,
+        left: `${windowOffset}px`,
+      };
+
+    case PositionContainer.TOP_RIGHT:
+    case PositionContainer.RIGHT_TOP:
+      return {
+        top: `${windowOffset}px`,
+        right: `${windowOffset}px`,
+      };
+
+    case PositionContainer.BOTTOM:
+    case PositionContainer.BOTTOM_CENTER:
+      return {
+        bottom: `${windowOffset}px`,
+        left: '50%',
+        transform: 'translateX(-50%)',
+      };
+
+    case PositionContainer.LEFT_BOTTOM:
+    case PositionContainer.BOTTOM_LEFT:
+      return {
+        bottom: `${windowOffset}px`,
+        left: `${windowOffset}px`,
+      };
+
+    case PositionContainer.RIGHT_BOTTOM:
+    case PositionContainer.BOTTOM_RIGHT:
+      return {
+        bottom: `${windowOffset}px`,
+        right: `${windowOffset}px`,
+      };
+
+    case PositionContainer.LEFT:
+    case PositionContainer.LEFT_CENTER:
+      return {
+        top: '50%',
+        left: `${windowOffset}px`,
+        transform: 'translateY(-50%)',
+      };
+
+    case PositionContainer.RIGHT:
+    case PositionContainer.RIGHT_CENTER:
+      return {
+        top: '50%',
+        right: `${windowOffset}px`,
+        transform: 'translateY(-50%)',
+      };
+  }
+
+  return {
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+  };
+};

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

@@ -1,8 +1,21 @@
-export enum POSITION {
-  top = 'top',
-  left = 'left',
-  right = 'right',
-  bottom = 'bottom',
+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 = {
@@ -14,53 +27,185 @@ export type PositionObject = {
   h: number;
 };
 
+export type ModalPosition = {
+  left: number;
+  top: number;
+};
+
 export type GetModalPositionParams = {
   c: PositionObject;
   m: PositionObject;
   offset: number;
-  windowOffset: number;
-  position?: `${POSITION}`;
-  distancePercentage?: number;
+  position: PositionContainer;
 };
 
-export const getModalPosition = ({
-  c,
-  m,
-  offset,
-  windowOffset,
-  position,
-  distancePercentage = 50,
-}: GetModalPositionParams) => {
+/*
+ * @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);
+  let left = c.x - (m.w - c.w) * (50 / 100);
 
   switch (position) {
-    case POSITION.top:
+    case PositionContainer.TOP:
+    case PositionContainer.TOP_CENTER:
       top = c.y - m.h - offset;
-      left = c.x - (m.w - c.w) * (distancePercentage / 100);
+      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 POSITION.bottom:
+
+    case PositionContainer.BOTTOM_LEFT:
       top = c.y + c.h + offset;
-      left = c.x - (m.w - c.w) * (distancePercentage / 100);
+      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 POSITION.left:
-      top = c.y - (m.h - c.h) * (distancePercentage / 100);
+
+    case PositionContainer.LEFT_TOP:
+      top = c.y - m.h + c.h;
       left = c.x - m.w - offset;
 
       break;
-    case POSITION.right:
-      top = c.y - (m.h - c.h) * (distancePercentage / 100);
+
+    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:
-      left + m.w + windowOffset > window.innerWidth ? c.left - (left + m.w - window.innerWidth) - windowOffset : left,
-    top: top + m.h + windowOffset > window.innerHeight ? c.top - (top + m.h - window.innerHeight) - windowOffset : top,
+    left: `${fixedPosition.left}px`,
+    top: `${fixedPosition.top}px`,
   };
 };

package/src/helpers/index.ts

@@ -1,4 +1,5 @@
 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/hooks/index.ts

@@ -1,20 +1,26 @@
 export * from './use-async';
-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-observer';
-export * from './use-on-click-outside-ref';
 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';

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>, 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();
+    }
+  });
+};