polpo 0.1.0

package/src/contexts/fetch-context/fetch-context.tsx

@@ -0,0 +1,114 @@
+import axios, { AxiosInstance } from 'axios';
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+
+type UserT = {
+  name: string;
+  username: string;
+  full_name: string;
+  email: string;
+};
+
+type SessionT = {
+  isAuthenticated: boolean;
+  user: UserT | null;
+  token: string | null;
+};
+
+type FetchContextT = SessionT & {
+  httpClient: AxiosInstance;
+  login: (user: UserT, token: string) => void;
+  logout: () => void;
+};
+
+const FetchContext = createContext<FetchContextT | null>(null);
+
+type FetchProviderProps = {
+  children: React.ReactNode;
+  baseURL: string;
+};
+
+export const FetchProvider = ({ children, baseURL }: FetchProviderProps) => {
+  const [session, setSession] = useState<SessionT>({
+    isAuthenticated: false,
+    user: null,
+    token: null,
+  });
+
+  const getToken = useCallback(() => localStorage.getItem('token'), []);
+
+  const updateSession = useCallback(() => {
+    const user = localStorage.getItem('user');
+    const token = getToken();
+
+    setSession({
+      isAuthenticated: token !== null,
+      user: user !== null ? JSON.parse(user) : user,
+      token: token,
+    });
+  }, [getToken]);
+
+  useEffect(updateSession, [updateSession]);
+
+  const login = useCallback(
+    (user: UserT, token: string) => {
+      localStorage.setItem('user', JSON.stringify(user));
+      localStorage.setItem('token', token);
+      updateSession();
+    },
+    [updateSession],
+  );
+
+  const logout = useCallback(() => {
+    localStorage.clear();
+    updateSession();
+  }, [updateSession]);
+
+  const httpClient = useMemo(() => {
+    const instance = axios.create({
+      baseURL: baseURL,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    instance.interceptors.request.use(req => {
+      const token = getToken();
+      token !== null && req.headers.setAuthorization(`Bearer ${token}`);
+
+      return req;
+    });
+
+    instance.interceptors.response.use(
+      response => Promise.resolve(response),
+      error => {
+        error.response.status === 401 && logout();
+        Promise.reject(error);
+      },
+    );
+
+    return instance;
+  }, [baseURL, getToken, logout]);
+
+  return (
+    <FetchContext.Provider
+      value={{
+        ...session,
+        httpClient,
+        login,
+        logout,
+      }}
+    >
+      {children}
+    </FetchContext.Provider>
+  );
+};
+
+export const useFetch = (): FetchContextT => {
+  const context = useContext(FetchContext);
+
+  if (context === null) {
+    throw new Error('useFetch must be used with in a FetchProvider');
+  }
+
+  return context;
+};

package/src/contexts/fetch-context/index.ts

@@ -0,0 +1 @@
+export * from './fetch-context';

package/src/contexts/form-context/form-context.tsx

@@ -0,0 +1,43 @@
+import { yupResolver } from '@hookform/resolvers/yup';
+import { DefaultValues, FieldValues, FormProvider, Mode, SubmitHandler, useForm } from 'react-hook-form';
+import { AnyObjectSchema } from 'yup';
+
+type FormProps<T extends FieldValues> = {
+  onSubmit: SubmitHandler<T>;
+  children: React.ReactNode;
+  className?: string;
+  defaultValues?: DefaultValues<T>;
+  mode?: Mode;
+  reValidateMode?: Exclude<Mode, 'onTouched' | 'all'>;
+  shouldFocusError?: boolean;
+  style?: React.CSSProperties;
+  schema?: AnyObjectSchema;
+};
+
+export const Form = <T extends FieldValues = FieldValues>({
+  mode = 'onSubmit',
+  reValidateMode = 'onBlur',
+  onSubmit,
+  className = '',
+  style = {},
+  defaultValues,
+  shouldFocusError = false,
+  children,
+  schema,
+}: FormProps<T>): React.ReactElement => {
+  const methods = useForm<T>({
+    mode,
+    defaultValues,
+    reValidateMode,
+    shouldFocusError,
+    resolver: schema ? yupResolver(schema) : undefined,
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <form autoComplete='off' onSubmit={methods.handleSubmit(onSubmit)} className={className} style={style}>
+        {children}
+      </form>
+    </FormProvider>
+  );
+};

package/src/contexts/form-context/index.ts

@@ -0,0 +1 @@
+export * from './form-context';

package/src/contexts/index.ts

@@ -0,0 +1,3 @@
+export * from './form-context';
+export * from './fetch-context';
+export * from './theme-context';

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

@@ -0,0 +1,3 @@
+export * from './themes';
+export * from './theme-context';
+export * from './theme.defaults';

package/src/contexts/theme-context/theme-context.tsx

@@ -0,0 +1,158 @@
+import React, { Suspense, useCallback, useContext, useEffect, useState } from 'react';
+import { ThemeProvider as StyledThemeProvider } from 'styled-components';
+
+import { TypographyStyle } from '../../components/typography/typography.style';
+
+import { GlobalAnimations } from './theme.animations';
+import { CommonTheme, DarkTheme, LightTheme, ThemeConstants } from './theme.defaults';
+import { GlobalStyles, ThemeStyle } from './theme.style';
+import { CommonThemeEntity, PaletteThemeEntity, ThemeConstantsEntity, ThemeEntity } from './themes';
+
+export enum THEME {
+  LIGHT = 'light',
+  DARK = 'dark',
+}
+
+type ThemeContext = {
+  themeName: `${THEME}`;
+  changeTheme: (theme: `${THEME}`) => void;
+  toggleTheme: () => void;
+  setSystemTheme: () => void;
+};
+
+const ThemeContext = React.createContext<ThemeContext | null>(null);
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  commonTheme?: CommonThemeEntity;
+  lightTheme?: PaletteThemeEntity;
+  darkTheme?: PaletteThemeEntity;
+  constants?: ThemeConstantsEntity;
+  defaultTheme?: `${THEME}`;
+};
+
+export const ThemeProvider = ({
+  children,
+  commonTheme = CommonTheme,
+  lightTheme = LightTheme,
+  darkTheme = DarkTheme,
+  constants = ThemeConstants,
+  defaultTheme = THEME.DARK,
+}: ThemeProviderProps) => {
+  const [themeName, setThemeName] = useState<`${THEME}`>(defaultTheme);
+  const [systemThemeName, setSystemThemeName] = useState<`${THEME}`>(THEME.DARK);
+  const [useSystemTheme, setUseSystemTheme] = useState(false);
+
+  useEffect(() => {
+    if ([THEME.DARK, THEME.LIGHT].includes(defaultTheme as THEME)) {
+      setThemeName(defaultTheme);
+      setUseSystemTheme(false);
+      localStorage.setItem('theme-name', defaultTheme);
+
+      return;
+    }
+
+    const savedTheme = localStorage.getItem('theme-name');
+
+    if (!savedTheme || ![THEME.DARK, THEME.LIGHT].includes(savedTheme as THEME)) {
+      setUseSystemTheme(true);
+      localStorage.setItem('theme-name', 'system');
+    } else {
+      setThemeName(savedTheme as `${THEME}`);
+      localStorage.setItem('theme-name', savedTheme);
+    }
+  }, [defaultTheme]);
+
+  useEffect(() => {
+    const mqListener = (e: MediaQueryListEvent) => {
+      setSystemThemeName(e.matches ? THEME.DARK : THEME.LIGHT);
+    };
+
+    const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)');
+    setSystemThemeName(darkThemeMq.matches ? THEME.DARK : THEME.LIGHT);
+    darkThemeMq.addEventListener('change', mqListener);
+
+    return () => darkThemeMq.removeEventListener('change', mqListener);
+  }, []);
+
+  const setSystemTheme = useCallback(() => {
+    localStorage.setItem('theme-name', 'system');
+    setUseSystemTheme(true);
+  }, []);
+
+  const changeTheme = useCallback(
+    (themeName: `${THEME}`) => {
+      setThemeName(themeName);
+      localStorage.setItem('theme-name', themeName);
+
+      if (useSystemTheme) {
+        setUseSystemTheme(false);
+      }
+    },
+    [useSystemTheme],
+  );
+
+  const toggleTheme = useCallback(() => {
+    setThemeName(prev => {
+      let theme = prev === 'light' ? 'dark' : 'light';
+
+      if (useSystemTheme) {
+        theme = systemThemeName === 'light' ? 'dark' : 'light';
+        setUseSystemTheme(false);
+      }
+
+      localStorage.setItem('theme-name', theme);
+
+      return theme as `${THEME}`;
+    });
+  }, [systemThemeName, useSystemTheme]);
+
+  const themes: Record<THEME, ThemeEntity> = {
+    light: {
+      ...commonTheme,
+      ...lightTheme,
+    },
+    dark: {
+      ...commonTheme,
+      ...darkTheme,
+    },
+  };
+
+  return (
+    <Suspense>
+      <ThemeContext.Provider
+        value={{
+          themeName: useSystemTheme ? systemThemeName : themeName,
+          changeTheme,
+          toggleTheme,
+          setSystemTheme,
+        }}
+      >
+        <StyledThemeProvider
+          theme={{
+            name: useSystemTheme ? systemThemeName : themeName,
+            colors: themes[useSystemTheme ? systemThemeName : themeName],
+            constants: constants,
+          }}
+        >
+          <GlobalStyles />
+          <GlobalAnimations />
+          <TypographyStyle />
+          {children}
+        </StyledThemeProvider>
+      </ThemeContext.Provider>
+    </Suspense>
+  );
+};
+
+ThemeProvider.Wrapper = ThemeStyle;
+
+export const useMyTheme = () => {
+  const context = useContext(ThemeContext);
+
+  if (context === null) {
+    throw new Error('useFetch must be used with in a ThemeProvider');
+  }
+
+  return context;
+};

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

@@ -0,0 +1,180 @@
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalAnimations = createGlobalStyle`
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+
+  @keyframes slideIn-left {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideOut-left {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes slideIn-right {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideOut-right {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes slideIn-top {
+    from {
+      transform: translateY(-100%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideOut-top {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(-100%);
+    }
+  }
+
+  @keyframes slideIn-bottom {
+    from {
+      transform: translateY(100%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideOut-bottom {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(100%);
+    }
+  }
+
+  @keyframes bounceIn {
+    from,
+    20%,
+    40%,
+    60%,
+    80%,
+    to {
+      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+
+    0% {
+      opacity: 0;
+      transform: scale3d(0.3, 0.3, 0.3);
+    }
+
+    20% {
+      transform: scale3d(1.1, 1.1, 1.1);
+    }
+
+    40% {
+      transform: scale3d(0.9, 0.9, 0.9);
+    }
+
+    60% {
+      opacity: 1;
+      transform: scale3d(1.03, 1.03, 1.03);
+    }
+
+    80% {
+      transform: scale3d(0.97, 0.97, 0.97);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  @keyframes bounceOut {
+    20% {
+      transform: scale3d(0.9, 0.9, 0.9);
+    }
+
+    50%,
+    55% {
+      opacity: 1;
+      transform: scale3d(1.1, 1.1, 1.1);
+    }
+
+    to {
+      opacity: 0;
+      transform: scale3d(0.3, 0.3, 0.3);
+    }
+  }
+
+  @keyframes headShake {
+    0% {
+      transform: translateX(0);
+    }
+
+    6.5% {
+      transform: translateX(-6px) rotateY(-9deg);
+    }
+
+    18.5% {
+      transform: translateX(5px) rotateY(7deg);
+    }
+
+    31.5% {
+      transform: translateX(-3px) rotateY(-5deg);
+    }
+
+    43.5% {
+      transform: translateX(2px) rotateY(3deg);
+    }
+
+    50% {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes pulse {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.2);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+`;

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

@@ -0,0 +1,205 @@
+import { CommonThemeEntity, PaletteThemeEntity, ThemeConstantsEntity } from './themes';
+
+export const ThemeConstants: ThemeConstantsEntity = {
+  fontFamily: '"Montserrat Alternates", sans-serif',
+  sectionMinHeight: '810px',
+  breakpoints: {
+    mobile: '360px',
+    mobileL: '480px',
+    tablet: '768px',
+    laptopS: '1024px',
+    laptopM: '1280px',
+    laptopL: '1440px',
+    desktop: '1920px',
+    large: '2560px',
+  },
+  typography: {
+    hero: {
+      fontSize: '60px',
+      lineHeight: '120%',
+      defaultWeight: 700,
+      weights: {
+        bold: 700,
+      },
+      breakpoints: [],
+    },
+    header1: {
+      fontSize: '48px',
+      lineHeight: '120%',
+      defaultWeight: 700,
+      weights: {
+        bold: 700,
+      },
+      breakpoints: [],
+    },
+    header2: {
+      fontSize: '40px',
+      lineHeight: '120%',
+      defaultWeight: 700,
+      weights: {
+        bold: 700,
+      },
+      breakpoints: [],
+    },
+    header3: {
+      fontSize: '32px',
+      lineHeight: '120%',
+      defaultWeight: 700,
+      weights: {
+        bold: 700,
+      },
+      breakpoints: [],
+    },
+    header4: {
+      fontSize: '24px',
+      lineHeight: '120%',
+      defaultWeight: 700,
+      weights: {
+        bold: 700,
+        regular: 400,
+      },
+      breakpoints: [],
+    },
+    body: {
+      fontSize: '16px',
+      lineHeight: '140%',
+      defaultWeight: 400,
+      weights: {
+        bold: 700,
+        regular: 400,
+        light: 300,
+      },
+      breakpoints: [],
+    },
+    label: {
+      fontSize: '14px',
+      lineHeight: '140%',
+      defaultWeight: 400,
+      weights: {
+        bold: 700,
+        regular: 400,
+        light: 300,
+      },
+      breakpoints: [],
+    },
+    small: {
+      fontSize: '12px',
+      lineHeight: '140%',
+      defaultWeight: 400,
+      weights: {
+        bold: 700,
+        regular: 400,
+        light: 300,
+      },
+      breakpoints: [],
+    },
+  },
+};
+
+export const CommonTheme: CommonThemeEntity = {
+  black: '#000000',
+  gray1: '#191919',
+  gray2: '#323232',
+  gray3: '#4B4B4B',
+  gray4: '#646464',
+  gray5: '#4B4B4B',
+  gray6: '#969696',
+  gray7: '#CCCCCC',
+  gray8: '#DEDEDE',
+  gray9: '#F0F0F0',
+  white: '#FFFFFF',
+  info: {
+    main: '#0581ff',
+    contrast: '#FFFFFF',
+    light: '#7bc1ff',
+    dark: '#0057b5',
+  },
+  active: {
+    main: '#00B450',
+    contrast: '#FFFFFF',
+    light: '#3dd581',
+    dark: '#029341',
+  },
+  warning: {
+    main: '#FFA300',
+    contrast: '#FFFFFF',
+    light: '#ffc97a',
+    dark: '#a16903',
+  },
+  alert: {
+    main: '#F95F62',
+    contrast: '#FFFFFF',
+    light: '#ff9c9d',
+    dark: '#b1282b',
+  },
+};
+
+export const DarkTheme: PaletteThemeEntity = {
+  background: {
+    main: '#24263A',
+    paper: '#131520',
+    disabled: '#3e3e42',
+  },
+  text: {
+    main: '#FFFFFF',
+    light: '#FFFFFF',
+    dark: '#d1cfcf',
+    disabled: '#9e9e9e',
+  },
+  border: {
+    main: '#3a4145',
+  },
+  primary: {
+    main: '#B91345',
+    contrast: '#FFFFFF',
+    light: '#fa2f6d',
+    dark: '#880a2f',
+  },
+  secondary: {
+    main: '#450b7c',
+    contrast: '#FFFFFF',
+    light: '#5c11a3',
+    dark: '#33075c',
+  },
+  tertiary: {
+    main: '#012e64',
+    contrast: '#FFFFFF',
+    light: '#033f83',
+    dark: '#011c42',
+  },
+};
+
+export const LightTheme: PaletteThemeEntity = {
+  background: {
+    main: '#FFFFFF',
+    paper: '#f1f1f1',
+    disabled: '#d1d1d1',
+  },
+  text: {
+    main: '#333333',
+    light: '#434242',
+    dark: '#1c1b1b',
+    disabled: '#c1c0c0',
+  },
+  border: {
+    main: '#ececec',
+  },
+  primary: {
+    main: '#450b7c',
+    contrast: '#FFFFFF',
+    light: '#5c11a3',
+    dark: '#33075c',
+  },
+  secondary: {
+    main: '#563cc9',
+    contrast: '#FFFFFF',
+    light: '#6d50e4',
+    dark: '#3e2795',
+  },
+  tertiary: {
+    main: '#49e9fb',
+    contrast: '#333333',
+    light: '#a2edff',
+    dark: '#1fa5b5',
+  },
+};