polpo 0.1.7 → 0.1.8

package/src/components/typography/typography.tsx

@@ -1,100 +0,0 @@
-import React, { HTMLAttributes, createElement, forwardRef, useMemo } from 'react';
-import { DefaultTheme, useTheme } from 'styled-components';
-
-import { ColorVariants } from '../../core/variants';
-
-import {
-  TypographyVariant,
-  TypographyVariantsClassNames,
-  TypographyVariantsElements,
-  TypographyWeight,
-} from './typography.constants';
-
-import { useClassNames } from '@polpo/hooks';
-
-const getTypographyColor = (theme: DefaultTheme, color?: `${ColorVariants}`): React.CSSProperties => {
-  const typographyColors: Record<ColorVariants, React.CSSProperties> = {
-    [ColorVariants.Primary]: { color: theme.colors.primary.main },
-    [ColorVariants.Secondary]: { color: theme.colors.secondary.main },
-    [ColorVariants.Tertiary]: { color: theme.colors.tertiary.main },
-    [ColorVariants.Info]: { color: theme.colors.info.main },
-    [ColorVariants.Active]: { color: theme.colors.active.main },
-    [ColorVariants.Warning]: { color: theme.colors.warning.main },
-    [ColorVariants.Alert]: { color: theme.colors.alert.main },
-  };
-
-  return (color && typographyColors[color]) ?? {};
-};
-
-export type TypographyProps = HTMLAttributes<HTMLElement | HTMLLabelElement> & {
-  variant?: `${TypographyVariant}`;
-  nowrap?: boolean | number;
-  as?: keyof React.ReactHTML;
-  weight?: `${TypographyWeight}`;
-  children: React.ReactNode;
-  noPadding?: boolean;
-  htmlFor?: string;
-  align?: React.CSSProperties['textAlign'];
-  family?: 'primary' | 'code';
-  recommendedWidth?: boolean;
-  color?: `${ColorVariants}`;
-};
-
-export const TypographyComponent = (
-  {
-    variant = 'body',
-    nowrap = false,
-    className: customClassname = '',
-    style = {},
-    children,
-    as,
-    weight,
-    family = 'primary',
-    noPadding = false,
-    align,
-    color,
-    htmlFor,
-    recommendedWidth = false,
-    ...props
-  }: TypographyProps,
-  ref: React.ForwardedRef<unknown>,
-) => {
-  const theme = useTheme();
-  const className = useClassNames({
-    [TypographyVariantsClassNames[variant]]: TypographyVariantsClassNames[variant] !== undefined,
-    [customClassname]: !!customClassname,
-    [weight ?? '']: !!weight,
-    'no-padding': noPadding,
-    'code-family': family === 'code',
-    'recommended-width': recommendedWidth,
-    'nowrap-max-lines': typeof nowrap === 'number',
-    'nowrap-max-lines-2': nowrap === 2,
-    'nowrap-max-lines-3': nowrap === 3,
-    'nowrap-max-lines-4': nowrap === 4,
-    'nowrap-max-lines-5': nowrap === 5,
-    nowrap: nowrap === true,
-  });
-
-  const component = useMemo(
-    () => TypographyVariantsElements[variant] ?? TypographyVariantsElements[TypographyVariant.BODY],
-    [variant],
-  );
-
-  return createElement(
-    as ?? component,
-    {
-      ...props,
-      className,
-      ref,
-      htmlFor,
-      style: {
-        textAlign: align,
-        ...getTypographyColor(theme, color),
-        ...style,
-      },
-    },
-    children,
-  );
-};
-
-export const Typography = forwardRef(TypographyComponent);

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

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

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

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

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

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

package/src/contexts/index.ts

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

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

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

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

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

@@ -1,269 +0,0 @@
-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(1, 1, 1);
-      opacity: 1;
-    }
-
-    50%,
-    55% {
-      opacity: 1;
-      transform: scale3d(1.02, 1.02, 1.02);
-    }
-
-    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);
-    }
-  }
-
-  @keyframes fadeInDown {
-    from {
-      opacity: 0;
-      transform: translateY(-10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes fadeOutDown {
-    from {
-      opacity: 1;
-      transform: translateY(0);
-    }
-    to {
-      opacity: 0;
-      transform: translateY(10px);
-    }
-  }
-
-  @keyframes fadeInUp {
-    from {
-      opacity: 0;
-      transform: translateY(10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes fadeOutUp {
-    from {
-      opacity: 1;
-      transform: translateY(0);
-    }
-    to {
-      opacity: 0;
-      transform: translateY(-10px);
-    }
-  }
-
-  @keyframes fadeInLeft {
-    from {
-      opacity: 0;
-      transform: translateX(10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes fadeOutLeft {
-    from {
-      opacity: 1;
-      transform: translateX(0);
-    }
-    to {
-      opacity: 0;
-      transform: translateX(-10px);
-    }
-  }
-
-  @keyframes fadeInRight {
-    from {
-      opacity: 0;
-      transform: translateX(-10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes fadeOutRight {
-    from {
-      opacity: 1;
-      transform: translateX(0);
-    }
-    to {
-      opacity: 0;
-      transform: translateX(10px);
-    }
-  }
-`;