polpo 0.1.13 → 0.1.16

package/src/components/typography/typography.constants.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+
+export enum TypographyColors {
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary',
+  TERTIARY = 'tertiary',
+  ACTIVE = 'active',
+  WARNING = 'warning',
+  ALERT = 'alert',
+  INFO = 'info',
+}
+
+export enum TypographyVariant {
+  HERO = 'hero',
+  HEADER1 = 'header1',
+  HEADER2 = 'header2',
+  HEADER3 = 'header3',
+  HEADER4 = 'header4',
+  BODY = 'body',
+  LABEL = 'label',
+  LABEL_FORM = 'label-form',
+  SMALL = 'small',
+}
+
+export const TypographyVariantsElements: Record<TypographyVariant, React.HTMLElementType> = {
+  [TypographyVariant.HERO]: 'h1',
+  [TypographyVariant.HEADER1]: 'h1',
+  [TypographyVariant.HEADER2]: 'h2',
+  [TypographyVariant.HEADER3]: 'h3',
+  [TypographyVariant.HEADER4]: 'h4',
+  [TypographyVariant.BODY]: 'p',
+  [TypographyVariant.LABEL]: 'span',
+  [TypographyVariant.LABEL_FORM]: 'label',
+  [TypographyVariant.SMALL]: 'small',
+};
+
+export const TypographyVariantsClassNames: Record<TypographyVariant, string> = {
+  [TypographyVariant.HERO]: 'hero',
+  [TypographyVariant.HEADER1]: 'header1',
+  [TypographyVariant.HEADER2]: 'header2',
+  [TypographyVariant.HEADER3]: 'header3',
+  [TypographyVariant.HEADER4]: 'header4',
+  [TypographyVariant.BODY]: 'body',
+  [TypographyVariant.LABEL]: 'label',
+  [TypographyVariant.LABEL_FORM]: 'label',
+  [TypographyVariant.SMALL]: 'small',
+};
+
+export enum TypographyWeight {
+  LIGHT = 'light',
+  REGULAR = 'regular',
+  BOLD = 'bold',
+}

package/src/components/typography/typography.styles.css

@@ -0,0 +1,122 @@
+@reference "polpo-tailwind-config/styles";
+
+.typography {
+    margin: 0;
+    padding: 0.5em 0 0.4em;
+
+    &.primary {
+        color: var(--color-primary-500);
+    }
+
+    &.secondary {
+        color: var(--color-secondary-500);
+    }
+
+    &.tertiary {
+        color: var(--color-tertiary-500);
+    }
+
+    &.active {
+        color: var(--color-active-500);
+    }
+
+    &.alert {
+        color: var(--color-alert-500);
+    }
+
+    &.warning {
+        color: var(--color-warning-500);
+    }
+
+    &.info {
+        color: var(--color-info-500);
+    }
+
+    &.recommended-width {
+        max-width: 70ch;
+    }
+
+    &.code-family {
+        font-family: monospace;
+    }
+
+    &.no-padding {
+        padding: 0;
+    }
+
+    &.nowrap {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &.nowrap-max-lines {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+    }
+
+    &.nowrap-max-lines-2 {
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+    }
+
+    &.nowrap-max-lines-3 {
+        -webkit-line-clamp: 3;
+        line-clamp: 3;
+    }
+
+    &.nowrap-max-lines-4 {
+        -webkit-line-clamp: 4;
+        line-clamp: 4;
+    }
+
+    &.nowrap-max-lines-5 {
+        -webkit-line-clamp: 5;
+        line-clamp: 5;
+    }
+
+    &.hero {
+        @apply text-hero;
+    }
+
+    &.header1 {
+        @apply text-header1;
+    }
+
+    &.header2 {
+        @apply text-header2;
+    }
+
+    &.header3 {
+        @apply text-header3;
+    }
+
+    &.header4 {
+        @apply text-header4;
+    }
+
+    &.body {
+        @apply text-body;
+    }
+
+    &.label {
+        @apply text-label;
+    }
+
+    &.small {
+        @apply text-small;
+    }
+
+    &.bold {
+        font-weight: 700;
+    }
+
+    &.regular {
+        font-weight: 400;
+    }
+
+    &.light {
+        font-weight: 300;
+    }
+}

package/src/helpers/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...inputs: Array<ClassValue>) => {
+  return twMerge(clsx(inputs));
+};

package/src/helpers/format-bytes.ts

@@ -0,0 +1,11 @@
+export const formatBytes = (bytes: number, decimals = 2) => {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1000;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+};

package/src/helpers/format-dates.ts

@@ -0,0 +1,47 @@
+const MONTHS_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+export const formatDate = (date: string) => {
+  const parsedDate = new Date(date);
+
+  if (Number.isNaN(parsedDate.getTime())) {
+    return date;
+  }
+
+  return `${MONTHS_SHORT[parsedDate.getMonth()]} ${parsedDate.getFullYear()}`;
+};
+
+export const timeBetween = (date_start: string, date_end: string) => {
+  const start = new Date(date_start);
+
+  if (Number.isNaN(start.getTime())) {
+    return '';
+  }
+
+  const end = Date.parse(date_end) ? new Date(date_end) : new Date();
+
+  const diffMs = Math.abs(end.getTime() - start.getTime());
+
+  const minutes = Math.floor(diffMs / (1000 * 60));
+  const hours = Math.floor(diffMs / (1000 * 60 * 60));
+  const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+  const months = Math.floor(days / 30);
+  const years = Math.floor(days / 365);
+
+  if (years > 0) {
+    return `${years} year${years > 1 ? 's' : ''}`;
+  }
+
+  if (months > 0) {
+    return `${months} month${months > 1 ? 's' : ''}`;
+  }
+
+  if (days > 0) {
+    return `${days} day${days > 1 ? 's' : ''}`;
+  }
+
+  if (hours > 0) {
+    return `${hours} hour${hours > 1 ? 's' : ''}`;
+  }
+
+  return `${minutes} minute${minutes !== 1 ? 's' : ''}`;
+};

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

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

@@ -0,0 +1,6 @@
+export * from './cn';
+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

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

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

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

@@ -0,0 +1,30 @@
+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-debounce-state';
+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

@@ -0,0 +1,88 @@
+import { 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<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

@@ -0,0 +1,13 @@
+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],
+  );