@addev-be/ui 1.1.7 → 1.2.0

package/src/providers/ThemeProvider/helpers.ts

@@ -1,84 +1,84 @@
-import {
-  Theme,
-  ThemeColor,
-  ThemeColorIntensity,
-  ThemeColorWithIntensity,
-} from './types';
-import { defaultDarkTheme, defaultTheme } from './defaultTheme';
-
-import { DeepPartial } from '../../typings';
-import { defaultsDeep } from 'lodash';
-
-export const extendTheme = (
-  base: Theme,
-  override?: DeepPartial<Theme>
-): Theme => defaultsDeep({}, override, base);
-
-export const extendDefaultTheme = (override?: DeepPartial<Theme>): Theme =>
-  extendTheme(defaultTheme, override);
-export const extendDefaultDarkTheme = (override?: DeepPartial<Theme>): Theme =>
-  extendTheme(defaultDarkTheme, override);
-
-export const getColor = (
-  colorWithIntensity: ThemeColorWithIntensity
-): ThemeColor => {
-  const [colorName] = colorWithIntensity.split('-');
-  return colorName as ThemeColor;
-};
-
-export const getIntensity = (
-  colorWithIntensity: ThemeColorWithIntensity
-): ThemeColorIntensity => {
-  const [, intensity] = colorWithIntensity.split('-');
-  return Number(intensity) as ThemeColorIntensity;
-};
-
-export const isThemeColorWithIntensity = (
-  color: ThemeColor | ThemeColorWithIntensity
-): color is ThemeColorWithIntensity => {
-  return color.indexOf('-') >= 0;
-};
-
-export const getColorWithIntensity = (
-  color: ThemeColor | ThemeColorWithIntensity,
-  defaultIntensity: ThemeColorIntensity = 300
-): ThemeColorWithIntensity => {
-  if (isThemeColorWithIntensity(color)) {
-    return color;
-  }
-  return `${color}-${defaultIntensity}`;
-};
-
-export const extractColorAndIntensity = (
-  color: ThemeColor | ThemeColorWithIntensity,
-  defaultIntensity: ThemeColorIntensity = 300
-): [ThemeColor, ThemeColorIntensity] => {
-  if (isThemeColorWithIntensity(color)) {
-    const [colorName, intensity] = color.split('-');
-    return [
-      colorName as ThemeColor,
-      intensity ? (Number(intensity) as ThemeColorIntensity) : defaultIntensity,
-    ];
-  }
-  return [color, defaultIntensity];
-};
-
-export const darkenColor = (
-  color: ThemeColor | ThemeColorWithIntensity,
-  amount: number = 100
-): ThemeColorWithIntensity => {
-  const [colorName, intensity] = extractColorAndIntensity(color);
-  const newIntensity = (Math.floor(Math.min(intensity + amount, 950) / 100) *
-    100) as ThemeColorIntensity;
-  return `${colorName}-${newIntensity}` as ThemeColorWithIntensity;
-};
-
-export const lightenColor = (
-  color: ThemeColor | ThemeColorWithIntensity,
-  amount: number = 100
-): ThemeColorWithIntensity => {
-  const [colorName, intensity] = extractColorAndIntensity(color);
-  const newIntensity = (Math.floor(Math.max(intensity - amount, 0) / 100) *
-    100) as ThemeColorIntensity;
-  return `${colorName}-${newIntensity}` as ThemeColorWithIntensity;
-};
+import {
+  Theme,
+  ThemeColor,
+  ThemeColorIntensity,
+  ThemeColorWithIntensity,
+} from './types';
+import { defaultDarkTheme, defaultTheme } from './defaultTheme';
+
+import { DeepPartial } from '../../typings';
+import { defaultsDeep } from 'lodash';
+
+export const extendTheme = (
+  base: Theme,
+  override?: DeepPartial<Theme>
+): Theme => defaultsDeep({}, override, base);
+
+export const extendDefaultTheme = (override?: DeepPartial<Theme>): Theme =>
+  extendTheme(defaultTheme, override);
+export const extendDefaultDarkTheme = (override?: DeepPartial<Theme>): Theme =>
+  extendTheme(defaultDarkTheme, override);
+
+export const getColor = (
+  colorWithIntensity: ThemeColorWithIntensity
+): ThemeColor => {
+  const [colorName] = colorWithIntensity.split('-');
+  return colorName as ThemeColor;
+};
+
+export const getIntensity = (
+  colorWithIntensity: ThemeColorWithIntensity
+): ThemeColorIntensity => {
+  const [, intensity] = colorWithIntensity.split('-');
+  return Number(intensity) as ThemeColorIntensity;
+};
+
+export const isThemeColorWithIntensity = (
+  color: ThemeColor | ThemeColorWithIntensity
+): color is ThemeColorWithIntensity => {
+  return color.indexOf('-') >= 0;
+};
+
+export const getColorWithIntensity = (
+  color: ThemeColor | ThemeColorWithIntensity,
+  defaultIntensity: ThemeColorIntensity = 300
+): ThemeColorWithIntensity => {
+  if (isThemeColorWithIntensity(color)) {
+    return color;
+  }
+  return `${color}-${defaultIntensity}`;
+};
+
+export const extractColorAndIntensity = (
+  color: ThemeColor | ThemeColorWithIntensity,
+  defaultIntensity: ThemeColorIntensity = 300
+): [ThemeColor, ThemeColorIntensity] => {
+  if (isThemeColorWithIntensity(color)) {
+    const [colorName, intensity] = color.split('-');
+    return [
+      colorName as ThemeColor,
+      intensity ? (Number(intensity) as ThemeColorIntensity) : defaultIntensity,
+    ];
+  }
+  return [color, defaultIntensity];
+};
+
+export const darkenColor = (
+  color: ThemeColor | ThemeColorWithIntensity,
+  amount: number = 100
+): ThemeColorWithIntensity => {
+  const [colorName, intensity] = extractColorAndIntensity(color);
+  const newIntensity = (Math.floor(Math.min(intensity + amount, 950) / 100) *
+    100) as ThemeColorIntensity;
+  return `${colorName}-${newIntensity}` as ThemeColorWithIntensity;
+};
+
+export const lightenColor = (
+  color: ThemeColor | ThemeColorWithIntensity,
+  amount: number = 100
+): ThemeColorWithIntensity => {
+  const [colorName, intensity] = extractColorAndIntensity(color);
+  const newIntensity = (Math.floor(Math.max(intensity - amount, 0) / 100) *
+    100) as ThemeColorIntensity;
+  return `${colorName}-${newIntensity}` as ThemeColorWithIntensity;
+};

package/src/providers/ThemeProvider/index.ts

@@ -1,5 +1,5 @@
-export { ThemeProvider } from './ThemeProvider';
-
-export * from './types';
-export { defaultTheme } from './defaultTheme';
-export * from './helpers';
+export { ThemeProvider } from './ThemeProvider';
+
+export * from './types';
+export { defaultTheme } from './defaultTheme';
+export * from './helpers';

package/src/providers/ThemeProvider/types.ts

@@ -1,134 +1,134 @@
-import { DeepPartial } from '../../typings';
-
-export type ThemeColorIntensity =
-  | 0
-  | 50
-  | 100
-  | 200
-  | 300
-  | 400
-  | 500
-  | 600
-  | 700
-  | 800
-  | 900
-  | 950
-  | 1000;
-export type ThemeColorDefinition = Record<ThemeColorIntensity, string>;
-export type ThemeRawColor =
-  | 'slate'
-  | 'gray'
-  | 'zinc'
-  | 'neutral'
-  | 'stone'
-  | 'red'
-  | 'orange'
-  | 'amber'
-  | 'yellow'
-  | 'lime'
-  | 'green'
-  | 'emerald'
-  | 'teal'
-  | 'cyan'
-  | 'sky'
-  | 'blue'
-  | 'indigo'
-  | 'violet'
-  | 'purple'
-  | 'fuchsia'
-  | 'pink'
-  | 'rose';
-export type ThemePredefinedColor =
-  | 'base'
-  | 'text'
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'warning'
-  | 'danger'
-  | 'info';
-export type ThemeColor = ThemeRawColor | ThemePredefinedColor;
-export type ThemeColorReference = ThemeColor | ThemeColorDefinition;
-export type ThemeColorWithIntensity = `${ThemeColor}-${ThemeColorIntensity}`;
-
-export type ThemeTextSize =
-  | 'xs'
-  | 'sm'
-  | 'base'
-  | 'lg'
-  | 'xl'
-  | '2xl'
-  | '3xl'
-  | '4xl'
-  | '5xl'
-  | '6xl';
-export type ThemeFontFamily = 'sans' | 'serif' | 'mono';
-export type ThemeFontWeight = 'light' | 'normal' | 'bold';
-export type ThemeSpace =
-  | '0'
-  | '0_5'
-  | '1'
-  | '1_5'
-  | '2'
-  | '3'
-  | '4'
-  | '5'
-  | '6'
-  | '8'
-  | '10'
-  | '12'
-  | '14'
-  | '16'
-  | '20'
-  | '24'
-  | '32'
-  | '40'
-  | '48'
-  | '56'
-  | '64'
-  | '72'
-  | '80'
-  | '96'
-  | '128';
-export type ThemeSpaceWithNegative = ThemeSpace | `-${ThemeSpace}`;
-
-export type ThemeSize =
-  | '0'
-  | '0_5'
-  | '1'
-  | '1_5'
-  | '2'
-  | '3'
-  | '4'
-  | '5'
-  | '6'
-  | '8'
-  | '10'
-  | '12'
-  | '16'
-  | '20'
-  | '24'
-  | '32'
-  | '40'
-  | '48';
-export type ThemeRounded =
-  | 'none'
-  | 'sm'
-  | 'md'
-  | 'lg'
-  | 'xl'
-  | '2xl'
-  | '3xl'
-  | 'full';
-export type ThemeShadow = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-
-export type Theme = DeepPartial<{
-  colors: Record<ThemeColor, ThemeColorReference>;
-  texts: Record<ThemeTextSize, string>;
-  fonts: Record<ThemeFontFamily, string>;
-  weights: Record<ThemeFontWeight, string>;
-  spaces: Record<ThemeSpace, string>;
-  sizes: Record<ThemeSpace, string>;
-  rounded: Record<ThemeRounded, string>;
-  shadows: Record<ThemeShadow, string>;
-}>;
+import { DeepPartial } from '../../typings';
+
+export type ThemeColorIntensity =
+  | 0
+  | 50
+  | 100
+  | 200
+  | 300
+  | 400
+  | 500
+  | 600
+  | 700
+  | 800
+  | 900
+  | 950
+  | 1000;
+export type ThemeColorDefinition = Record<ThemeColorIntensity, string>;
+export type ThemeRawColor =
+  | 'slate'
+  | 'gray'
+  | 'zinc'
+  | 'neutral'
+  | 'stone'
+  | 'red'
+  | 'orange'
+  | 'amber'
+  | 'yellow'
+  | 'lime'
+  | 'green'
+  | 'emerald'
+  | 'teal'
+  | 'cyan'
+  | 'sky'
+  | 'blue'
+  | 'indigo'
+  | 'violet'
+  | 'purple'
+  | 'fuchsia'
+  | 'pink'
+  | 'rose';
+export type ThemePredefinedColor =
+  | 'base'
+  | 'text'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'info';
+export type ThemeColor = ThemeRawColor | ThemePredefinedColor;
+export type ThemeColorReference = ThemeColor | ThemeColorDefinition;
+export type ThemeColorWithIntensity = `${ThemeColor}-${ThemeColorIntensity}`;
+
+export type ThemeTextSize =
+  | 'xs'
+  | 'sm'
+  | 'base'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | '4xl'
+  | '5xl'
+  | '6xl';
+export type ThemeFontFamily = 'sans' | 'serif' | 'mono';
+export type ThemeFontWeight = 'light' | 'normal' | 'bold';
+export type ThemeSpace =
+  | '0'
+  | '0_5'
+  | '1'
+  | '1_5'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '8'
+  | '10'
+  | '12'
+  | '14'
+  | '16'
+  | '20'
+  | '24'
+  | '32'
+  | '40'
+  | '48'
+  | '56'
+  | '64'
+  | '72'
+  | '80'
+  | '96'
+  | '128';
+export type ThemeSpaceWithNegative = ThemeSpace | `-${ThemeSpace}`;
+
+export type ThemeSize =
+  | '0'
+  | '0_5'
+  | '1'
+  | '1_5'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '8'
+  | '10'
+  | '12'
+  | '16'
+  | '20'
+  | '24'
+  | '32'
+  | '40'
+  | '48';
+export type ThemeRounded =
+  | 'none'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | 'full';
+export type ThemeShadow = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+export type Theme = DeepPartial<{
+  colors: Record<ThemeColor, ThemeColorReference>;
+  texts: Record<ThemeTextSize, string>;
+  fonts: Record<ThemeFontFamily, string>;
+  weights: Record<ThemeFontWeight, string>;
+  spaces: Record<ThemeSpace, string>;
+  sizes: Record<ThemeSpace, string>;
+  rounded: Record<ThemeRounded, string>;
+  shadows: Record<ThemeShadow, string>;
+}>;

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 };