polpo 0.1.0

package/src/contexts/theme-context/theme.style.ts

@@ -0,0 +1,78 @@
+import styled, { createGlobalStyle } from 'styled-components';
+
+export const ThemeStyle = styled.main`
+  height: 100dvh;
+  overflow: auto;
+  background: ${props => props.theme.colors.background.main};
+`;
+
+export const GlobalStyles = createGlobalStyle`
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
+  /* width */
+  ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    border-radius: 10px;
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: #cecece;
+    border-radius: 10px;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #cecece;
+  }
+
+  :root {
+    color-scheme: light dark;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  *, *::after, *::before {
+    box-sizing: border-box;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  input, textarea {
+    color: currentColor;
+    font-family: inherit;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    background: transparent;
+  }
+
+  input {
+    border: 0;
+    outline: 0;
+    padding: 0;
+    width: 100%;
+  }
+
+  body, ${ThemeStyle} {
+    min-width: ${props => props.theme.constants.breakpoints.mobile};
+    font-family: ${props => props.theme.constants.fontFamily};
+    color: ${props => props.theme.colors.text.main};
+  }
+`;

package/src/contexts/theme-context/themes.ts

@@ -0,0 +1,96 @@
+import React from 'react';
+
+export enum TypographyVariants {
+  HERO = 'hero',
+  HEADER1 = 'header1',
+  HEADER2 = 'header2',
+  HEADER3 = 'header3',
+  HEADER4 = 'header4',
+  BODY = 'body',
+  LABEL = 'label',
+  SMALL = 'small',
+}
+export enum Breakpoints {
+  MOBILE = 'mobile',
+  MOBILE_L = 'mobileL',
+  TABLET = 'tablet',
+  LAPTOPS = 'laptopS',
+  LAPTOP_M = 'laptopM',
+  LAPTOP_L = 'laptopL',
+  DESKTOP = 'desktop',
+  LARGE = 'large',
+}
+
+export type TypographyEntity = {
+  fontSize: string;
+  lineHeight: string;
+  defaultWeight: React.CSSProperties['fontWeight'];
+  weights: Record<string, React.CSSProperties['fontWeight']>;
+  breakpoints: Array<{
+    from: `${Breakpoints}`;
+    fontSize: string;
+    lineHeight: string;
+  }>;
+};
+
+export type ThemeConstantsEntity = {
+  fontFamily: string;
+  sectionMinHeight: string;
+  breakpoints: Record<`${Breakpoints}`, string>;
+  typography: Record<`${TypographyVariants}`, TypographyEntity>;
+};
+
+export type ThemeColor = {
+  main: string;
+  contrast: string;
+  light: string;
+  dark: string;
+};
+
+export type CommonThemeEntity = {
+  black: string;
+  white: string;
+  gray1: string;
+  gray2: string;
+  gray3: string;
+  gray4: string;
+  gray5: string;
+  gray6: string;
+  gray7: string;
+  gray8: string;
+  gray9: string;
+  info: ThemeColor;
+  active: ThemeColor;
+  warning: ThemeColor;
+  alert: ThemeColor;
+};
+
+export type PaletteThemeEntity = {
+  background: {
+    main: string;
+    paper: string;
+    disabled: string;
+  };
+  text: {
+    main: string;
+    light: string;
+    dark: string;
+    disabled: string;
+  };
+  border: {
+    main: string;
+  };
+  primary: ThemeColor;
+  secondary: ThemeColor;
+  tertiary: ThemeColor;
+};
+
+export type ThemeEntity = PaletteThemeEntity & CommonThemeEntity;
+
+declare module 'styled-components' {
+  export interface DefaultTheme {
+    name: string;
+    colors: ThemeEntity;
+    constants: ThemeConstantsEntity;
+  }
+}

package/src/core/http-client.d.ts

@@ -0,0 +1,11 @@
+import { AxiosInstance } from 'axios';
+export declare class HttpClient {
+  private _instance;
+  private _token;
+  logout: () => void;
+  constructor(baseURL: string);
+  get instance(): AxiosInstance;
+  get token(): string;
+  set token(token: string);
+}
+//# sourceMappingURL=http-client.d.ts.map

package/src/core/http-client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"http-client.d.ts","sourceRoot":"","sources":["http-client.ts"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,qBAAa,UAAU;IACrB,OAAO,CAAC,SAAS,CAAgB;IACjC,OAAO,CAAC,MAAM,CAAS;IAEhB,MAAM,aAA0C;gBAE3C,OAAO,EAAE,MAAM;IA0B3B,IAAW,QAAQ,IAAI,aAAa,CAEnC;IAED,IAAW,KAAK,IAIQ,MAAM,CAF7B;IAED,IAAW,KAAK,CAAC,KAAK,EAAE,MAAM,EAG7B;CACF"}

package/src/core/http-client.ts

@@ -0,0 +1,47 @@
+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/index.d.ts

@@ -0,0 +1,2 @@
+export * from './http-client';
+//# sourceMappingURL=index.d.ts.map

package/src/core/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/src/core/index.ts

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

package/src/core/variants/color.ts

@@ -0,0 +1,36 @@
+import { useClassNames } from '@polpo/hooks';
+
+export enum ColorVariants {
+  Primary = 'small',
+  Secondary = 'medium',
+  Tertiary = 'large',
+  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/index.ts

@@ -0,0 +1,3 @@
+export * from './color';
+export * from './radius';
+export * from './size';

package/src/core/variants/radius.ts

@@ -0,0 +1,56 @@
+import { css } from 'styled-components';
+
+import { useClassNames } from '@polpo/hooks';
+
+export enum RadiusVariants {
+  None = 'none',
+  Small = 'small',
+  Medium = 'medium',
+  Large = 'large',
+  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} {
+    border-radius: 0;
+  }
+
+  &.${RadiusClassNames.Small} {
+    border-radius: 0.5em;
+  }
+
+  &.${RadiusClassNames.Medium} {
+    border-radius: 1em;
+  }
+
+  &.${RadiusClassNames.Large} {
+    border-radius: 1.5em;
+  }
+
+  &.${RadiusClassNames.Full} {
+    border-radius: 100em;
+  }
+`;

package/src/core/variants/size.ts

@@ -0,0 +1,44 @@
+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} {
+    font-size: ${props => props.theme.constants.typography.small.fontSize};
+  }
+
+  &.${SizeClassNames.Medium} {
+    font-size: ${props => props.theme.constants.typography.label.fontSize};
+  }
+
+  &.${SizeClassNames.Large} {
+    font-size: ${props => props.theme.constants.typography.body.fontSize};
+  }
+`;

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,11 @@
+import moment from 'moment/moment';
+
+export const formatDate = (date: string) => {
+  return Date.parse(date) ? moment(date, 'YYYY-MM-DD').format('MMM YYYY') : date;
+};
+
+export const timeBetween = (date_start: string, date_end: string) => {
+  const momentStart = moment(date_start);
+
+  return Date.parse(date_end) ? moment(date_end).from(momentStart, true) : momentStart.fromNow();
+};

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

@@ -0,0 +1,66 @@
+export enum POSITION {
+  top = 'top',
+  left = 'left',
+  right = 'right',
+  bottom = 'bottom',
+}
+
+export type PositionObject = {
+  x: number;
+  y: number;
+  top: number;
+  left: number;
+  w: number;
+  h: number;
+};
+
+export type GetModalPositionParams = {
+  c: PositionObject;
+  m: PositionObject;
+  offset: number;
+  windowOffset: number;
+  position?: `${POSITION}`;
+  distancePercentage?: number;
+};
+
+export const getModalPosition = ({
+  c,
+  m,
+  offset,
+  windowOffset,
+  position,
+  distancePercentage = 50,
+}: GetModalPositionParams) => {
+  // Default bottom
+  let top = c.y + c.h + offset;
+  let left = c.x - (m.w - c.w);
+
+  switch (position) {
+    case POSITION.top:
+      top = c.y - m.h - offset;
+      left = c.x - (m.w - c.w) * (distancePercentage / 100);
+
+      break;
+    case POSITION.bottom:
+      top = c.y + c.h + offset;
+      left = c.x - (m.w - c.w) * (distancePercentage / 100);
+
+      break;
+    case POSITION.left:
+      top = c.y - (m.h - c.h) * (distancePercentage / 100);
+      left = c.x - m.w - offset;
+
+      break;
+    case POSITION.right:
+      top = c.y - (m.h - c.h) * (distancePercentage / 100);
+      left = c.x + c.w + offset;
+
+      break;
+  }
+
+  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,
+  };
+};

package/src/helpers/index.ts

@@ -0,0 +1,4 @@
+export * from './format-bytes';
+export * from './format-dates';
+export * from './get-modal-position';
+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,23 @@
+export * from './use-async';
+export * from './use-async';
+export * from './use-classnames';
+export * from './use-constant';
+export * from './use-debounce';
+export * from './use-dimensions';
+export * from './use-event-listener';
+export * from './use-file-reader';
+export * from './use-in-view';
+export * from './use-input-handlers';
+export * from './use-media-query';
+export * from './use-modal-in-container';
+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-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 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

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

package/src/hooks/use-constant.ts

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

package/src/hooks/use-debounce.ts

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

@@ -0,0 +1,22 @@
+import React, { useEffect, useState } from 'react';
+
+import { useEventListener } from './use-event-listener';
+import { useObserver } from './use-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]);
+
+  return dimensions;
+};