@addev-be/ui 2.5.20 → 2.6.0

package/src/providers/ToastProvider/index.tsx

@@ -1,93 +1,93 @@
-import {
-  CircleCheckIcon,
-  CircleInfoIcon,
-  CircleXMarkIcon,
-  TriangleExclamationIcon,
-} from '../../Icons';
-import {
-  Flip,
-  ToastContainer,
-  ToastContainerProps,
-  TypeOptions,
-  toast,
-} from 'react-toastify';
-import React, { ReactNode, createContext, useCallback, useMemo } from 'react';
-
-import { useMediaQuery } from '../../hooks/useMediaQuery';
-
-type ToastType = Exclude<TypeOptions, 'default'>;
-
-type ToastContextType = {
-  toastSuccess: (message: string) => void;
-  toastError: (message: string) => void;
-  toastInfo: (message: string) => void;
-  toastWarning: (message: string) => void;
-};
-
-const ToastContext = createContext<ToastContextType>({
-  toastSuccess: () => {},
-  toastError: () => {},
-  toastInfo: () => {},
-  toastWarning: () => {},
-});
-
-const iconMap: Record<TypeOptions, React.ReactNode> = {
-  info: <CircleInfoIcon style={{ fill: 'var(--color-blue-500)' }} />,
-  error: <CircleXMarkIcon style={{ fill: 'var(--color-red-500)' }} />,
-  success: <CircleCheckIcon style={{ fill: 'var(--color-green-500)' }} />,
-  warning: (
-    <TriangleExclamationIcon style={{ fill: 'var(--color-yellow-500)' }} />
-  ),
-  default: null,
-};
-
-const toastOptions: ToastContainerProps = {
-  autoClose: 5000,
-  limit: 3,
-  theme: 'light',
-  hideProgressBar: false,
-  closeButton: false,
-  pauseOnHover: true,
-  closeOnClick: false,
-  draggable: true,
-  stacked: true,
-  transition: Flip,
-  style: {
-    margin: '0 auto',
-  },
-};
-
-export const ToastProvider = ({ children }: { children: ReactNode }) => {
-  const { isLgUp } = useMediaQuery();
-
-  const showToast = useCallback((type: ToastType, message: string) => {
-    toast(message, {
-      ...toastOptions,
-      type: type as TypeOptions,
-      icon: () => iconMap[type],
-    });
-  }, []);
-
-  const contextValue: ToastContextType = useMemo(
-    () => ({
-      toastSuccess: (msg: string) => showToast('success', msg),
-      toastError: (msg: string) => showToast('error', msg),
-      toastInfo: (msg: string) => showToast('info', msg),
-      toastWarning: (msg: string) => showToast('warning', msg),
-    }),
-    [showToast]
-  );
-
-  return (
-    <ToastContext.Provider value={contextValue}>
-      {children}
-      <ToastContainer
-        icon={({ type }) => iconMap[type]}
-        {...toastOptions}
-        position={isLgUp ? 'bottom-right' : 'bottom-center'}
-      />
-    </ToastContext.Provider>
-  );
-};
-
-export { ToastContext };
+import {
+  CircleCheckIcon,
+  CircleInfoIcon,
+  CircleXMarkIcon,
+  TriangleExclamationIcon,
+} from '../../Icons';
+import {
+  Flip,
+  ToastContainer,
+  ToastContainerProps,
+  TypeOptions,
+  toast,
+} from 'react-toastify';
+import React, { ReactNode, createContext, useCallback, useMemo } from 'react';
+
+import { useMediaQuery } from '../../hooks/useMediaQuery';
+
+type ToastType = Exclude<TypeOptions, 'default'>;
+
+type ToastContextType = {
+  toastSuccess: (message: string) => void;
+  toastError: (message: string) => void;
+  toastInfo: (message: string) => void;
+  toastWarning: (message: string) => void;
+};
+
+const ToastContext = createContext<ToastContextType>({
+  toastSuccess: () => {},
+  toastError: () => {},
+  toastInfo: () => {},
+  toastWarning: () => {},
+});
+
+const iconMap: Record<TypeOptions, React.ReactNode> = {
+  info: <CircleInfoIcon style={{ fill: 'var(--color-blue-500)' }} />,
+  error: <CircleXMarkIcon style={{ fill: 'var(--color-red-500)' }} />,
+  success: <CircleCheckIcon style={{ fill: 'var(--color-green-500)' }} />,
+  warning: (
+    <TriangleExclamationIcon style={{ fill: 'var(--color-yellow-500)' }} />
+  ),
+  default: null,
+};
+
+const toastOptions: ToastContainerProps = {
+  autoClose: 5000,
+  limit: 3,
+  theme: 'light',
+  hideProgressBar: false,
+  closeButton: false,
+  pauseOnHover: true,
+  closeOnClick: false,
+  draggable: true,
+  stacked: true,
+  transition: Flip,
+  style: {
+    margin: '0 auto',
+  },
+};
+
+export const ToastProvider = ({ children }: { children: ReactNode }) => {
+  const { isLgUp } = useMediaQuery();
+
+  const showToast = useCallback((type: ToastType, message: string) => {
+    toast(message, {
+      ...toastOptions,
+      type: type as TypeOptions,
+      icon: () => iconMap[type],
+    });
+  }, []);
+
+  const contextValue: ToastContextType = useMemo(
+    () => ({
+      toastSuccess: (msg: string) => showToast('success', msg),
+      toastError: (msg: string) => showToast('error', msg),
+      toastInfo: (msg: string) => showToast('info', msg),
+      toastWarning: (msg: string) => showToast('warning', msg),
+    }),
+    [showToast]
+  );
+
+  return (
+    <ToastContext.Provider value={contextValue}>
+      {children}
+      <ToastContainer
+        icon={({ type }) => iconMap[type]}
+        {...toastOptions}
+        position={isLgUp ? 'bottom-right' : 'bottom-center'}
+      />
+    </ToastContext.Provider>
+  );
+};
+
+export { ToastContext };

package/src/providers/TrackingProvider/index.tsx

@@ -1,71 +1,71 @@
-import {
-  FC,
-  PropsWithChildren,
-  createContext,
-  useCallback,
-  useMemo,
-  useState,
-} from 'react';
-
-import { useSendTrackingEventRequestHandler } from '../../services/requests/tracking';
-
-export type TrackingContextType = {
-  sendEvent: (
-    name: string,
-    details?: Record<string, string | number | boolean | null>
-  ) => void;
-  enableTracking: () => void;
-  disableTracking: () => void;
-};
-
-export const TrackingContext = createContext<TrackingContextType>({
-  sendEvent: () => {},
-  enableTracking: () => {},
-  disableTracking: () => {},
-});
-
-export const TrackingProvider: FC<PropsWithChildren> = ({ children }) => {
-  const [trackingEnabled, setTrackingEnabled] = useState(true);
-  const sendTrackingEvent = useSendTrackingEventRequestHandler();
-
-  const sendEvent = useCallback(
-    (
-      name: string,
-      details: Record<string, string | number | boolean | null> = {}
-    ) => {
-      if (trackingEnabled) {
-        sendTrackingEvent({
-          data: {
-            id: '',
-            name,
-            details,
-          },
-        });
-      }
-    },
-    [sendTrackingEvent, trackingEnabled]
-  );
-
-  const enableTracking = useCallback(() => {
-    setTrackingEnabled(true);
-  }, []);
-
-  const disableTracking = useCallback(() => {
-    setTrackingEnabled(false);
-  }, []);
-
-  const value = useMemo(
-    () => ({
-      sendEvent,
-      enableTracking,
-      disableTracking,
-    }),
-    [disableTracking, enableTracking, sendEvent]
-  );
-
-  return (
-    <TrackingContext.Provider value={value}>
-      {children}
-    </TrackingContext.Provider>
-  );
-};
+import {
+  FC,
+  PropsWithChildren,
+  createContext,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
+
+import { useSendTrackingEventRequestHandler } from '../../services/requests/tracking';
+
+export type TrackingContextType = {
+  sendEvent: (
+    name: string,
+    details?: Record<string, string | number | boolean | null>
+  ) => void;
+  enableTracking: () => void;
+  disableTracking: () => void;
+};
+
+export const TrackingContext = createContext<TrackingContextType>({
+  sendEvent: () => {},
+  enableTracking: () => {},
+  disableTracking: () => {},
+});
+
+export const TrackingProvider: FC<PropsWithChildren> = ({ children }) => {
+  const [trackingEnabled, setTrackingEnabled] = useState(true);
+  const sendTrackingEvent = useSendTrackingEventRequestHandler();
+
+  const sendEvent = useCallback(
+    (
+      name: string,
+      details: Record<string, string | number | boolean | null> = {}
+    ) => {
+      if (trackingEnabled) {
+        sendTrackingEvent({
+          data: {
+            id: '',
+            name,
+            details,
+          },
+        });
+      }
+    },
+    [sendTrackingEvent, trackingEnabled]
+  );
+
+  const enableTracking = useCallback(() => {
+    setTrackingEnabled(true);
+  }, []);
+
+  const disableTracking = useCallback(() => {
+    setTrackingEnabled(false);
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      sendEvent,
+      enableTracking,
+      disableTracking,
+    }),
+    [disableTracking, enableTracking, sendEvent]
+  );
+
+  return (
+    <TrackingContext.Provider value={value}>
+      {children}
+    </TrackingContext.Provider>
+  );
+};

package/src/providers/UiProviders/index.tsx

@@ -1,76 +1,76 @@
-import '../../styles/index.scss';
-import '../../styles/animations.scss';
-
-import * as styles from './styles';
-
-import {
-  FC,
-  PropsWithChildren,
-  createContext,
-  useCallback,
-  useMemo,
-  useRef,
-} from 'react';
-
-import { PortalsProvider } from '../PortalsProvider';
-import { SettingsProvider } from '../SettingsProvider';
-import { Theme } from '../ThemeProvider/types';
-import { ThemeProvider } from '../ThemeProvider';
-import { TrackingProvider } from '../TrackingProvider';
-import { defaultTheme } from '../ThemeProvider/defaultTheme';
-
-export type UiProvidersProps = PropsWithChildren<{
-  theme?: Theme;
-  darkTheme?: Theme;
-  darkMode?: boolean;
-}>;
-
-export type UiContextType = {
-  rootRect: DOMRect;
-  getElementScreenRect: (element: HTMLElement) => DOMRect;
-};
-
-export const UiContext = createContext<UiContextType>({
-  rootRect: new DOMRect(),
-  getElementScreenRect: () => new DOMRect(),
-});
-
-export const UiProviders: FC<UiProvidersProps> = ({
-  theme = defaultTheme,
-  darkTheme,
-  darkMode,
-  children,
-}) => {
-  const rootRef = useRef<HTMLDivElement | null>(null);
-
-  const getElementScreenRect = useCallback((element: HTMLElement) => {
-    const rootRect = rootRef.current?.getBoundingClientRect();
-    const rect = element.getBoundingClientRect();
-    rect.x -= (rootRect?.x ?? 0) + window.scrollX;
-    rect.y -= (rootRect?.y ?? 0) + window.scrollY;
-    return rect;
-  }, []);
-
-  const value = useMemo(
-    () => ({
-      rootRect: rootRef.current?.getBoundingClientRect() ?? new DOMRect(),
-      getElementScreenRect,
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [rootRef.current]
-  );
-
-  return (
-    <ThemeProvider $theme={theme} $darkTheme={darkTheme} $darkMode={darkMode}>
-      <UiContext.Provider value={value}>
-        <styles.Root ref={rootRef}>
-          <SettingsProvider>
-            <TrackingProvider>
-              <PortalsProvider>{children}</PortalsProvider>
-            </TrackingProvider>
-          </SettingsProvider>
-        </styles.Root>
-      </UiContext.Provider>
-    </ThemeProvider>
-  );
-};
+import '../../styles/index.scss';
+import '../../styles/animations.scss';
+
+import * as styles from './styles';
+
+import {
+  FC,
+  PropsWithChildren,
+  createContext,
+  useCallback,
+  useMemo,
+  useRef,
+} from 'react';
+
+import { PortalsProvider } from '../PortalsProvider';
+import { SettingsProvider } from '../SettingsProvider';
+import { Theme } from '../ThemeProvider/types';
+import { ThemeProvider } from '../ThemeProvider';
+import { TrackingProvider } from '../TrackingProvider';
+import { defaultTheme } from '../ThemeProvider/defaultTheme';
+
+export type UiProvidersProps = PropsWithChildren<{
+  theme?: Theme;
+  darkTheme?: Theme;
+  darkMode?: boolean;
+}>;
+
+export type UiContextType = {
+  rootRect: DOMRect;
+  getElementScreenRect: (element: HTMLElement) => DOMRect;
+};
+
+export const UiContext = createContext<UiContextType>({
+  rootRect: new DOMRect(),
+  getElementScreenRect: () => new DOMRect(),
+});
+
+export const UiProviders: FC<UiProvidersProps> = ({
+  theme = defaultTheme,
+  darkTheme,
+  darkMode,
+  children,
+}) => {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+
+  const getElementScreenRect = useCallback((element: HTMLElement) => {
+    const rootRect = rootRef.current?.getBoundingClientRect();
+    const rect = element.getBoundingClientRect();
+    rect.x -= (rootRect?.x ?? 0) + window.scrollX;
+    rect.y -= (rootRect?.y ?? 0) + window.scrollY;
+    return rect;
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      rootRect: rootRef.current?.getBoundingClientRect() ?? new DOMRect(),
+      getElementScreenRect,
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rootRef.current]
+  );
+
+  return (
+    <ThemeProvider $theme={theme} $darkTheme={darkTheme} $darkMode={darkMode}>
+      <UiContext.Provider value={value}>
+        <styles.Root ref={rootRef}>
+          <SettingsProvider>
+            <TrackingProvider>
+              <PortalsProvider>{children}</PortalsProvider>
+            </TrackingProvider>
+          </SettingsProvider>
+        </styles.Root>
+      </UiContext.Provider>
+    </ThemeProvider>
+  );
+};

package/src/providers/UiProviders/styles.ts

@@ -1,10 +1,10 @@
-import styled from 'styled-components';
-
-export const Root = styled.div.attrs({ className: 'Root' })`
-  position: relative;
-  font-family: var(--font-sans);
-  font-size: var(--text-base);
-  color: var(--color-text-800);
-  width: 100%;
-  height: 100%;
-`;
+import styled from 'styled-components';
+
+export const Root = styled.div.attrs({ className: 'Root' })`
+  position: relative;
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  color: var(--color-text-800);
+  width: 100%;
+  height: 100%;
+`;

package/src/providers/hooks.ts

@@ -1,14 +1,14 @@
-import { AuthenticationContext } from './AuthenticationProvider';
-import { LoadingContext } from './LoadingProvider';
-import { PortalsContext } from './PortalsProvider';
-import { SettingsContext } from './SettingsProvider';
-import { ToastContext } from './ToastProvider';
-import { UiContext } from './UiProviders';
-import { useContext } from 'react';
-
-export const useAuthentication = () => useContext(AuthenticationContext);
-export const useLoading = () => useContext(LoadingContext);
-export const usePortals = () => useContext(PortalsContext);
-export const useSettings = () => useContext(SettingsContext);
-export const useUi = () => useContext(UiContext);
-export const useToast = () => useContext(ToastContext);
+import { AuthenticationContext } from './AuthenticationProvider';
+import { LoadingContext } from './LoadingProvider';
+import { PortalsContext } from './PortalsProvider';
+import { SettingsContext } from './SettingsProvider';
+import { ToastContext } from './ToastProvider';
+import { UiContext } from './UiProviders';
+import { useContext } from 'react';
+
+export const useAuthentication = () => useContext(AuthenticationContext);
+export const useLoading = () => useContext(LoadingContext);
+export const usePortals = () => useContext(PortalsContext);
+export const useSettings = () => useContext(SettingsContext);
+export const useUi = () => useContext(UiContext);
+export const useToast = () => useContext(ToastContext);