@addev-be/ui 0.2.13 → 0.2.15

package/src/providers/PortalsProvider/index.tsx

@@ -1,54 +0,0 @@
-import * as styles from './styles';
-
-import {
-  FC,
-  PropsWithChildren,
-  ReactNode,
-  ReactPortal,
-  createContext,
-  useCallback,
-  useMemo,
-  useRef,
-} from 'react';
-
-import { createPortal } from 'react-dom';
-
-export type PortalProps = {
-  key: string;
-  children: ReactNode;
-};
-
-export type PortalsContextType = {
-  createPortal: (children: ReactNode) => ReactPortal | null;
-};
-
-export const PortalsContext = createContext<PortalsContextType>({
-  createPortal: () => null,
-});
-
-export const PortalsProvider: FC<PropsWithChildren> = ({ children }) => {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-
-  const createLocalPortal = useCallback(
-    (children: ReactNode) =>
-      createPortal(
-        <styles.PortalContainer>{children}</styles.PortalContainer>,
-        containerRef.current!
-      ) ?? null,
-    []
-  );
-
-  const value = useMemo(
-    () => ({
-      createPortal: createLocalPortal,
-    }),
-    [createLocalPortal]
-  );
-
-  return (
-    <PortalsContext.Provider value={value}>
-      {children}
-      <styles.PortalsWrapper ref={containerRef} />
-    </PortalsContext.Provider>
-  );
-};

package/src/providers/PortalsProvider/styles.ts

@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-
-export const BackdropContainer = styled.div.attrs({
-  className: 'BackdropContainer',
-})`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1000;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-export const PortalsWrapper = styled.div.attrs({
-  className: 'PortalsWrapper',
-})`
-  width: 0;
-  height: 0;
-`;
-
-export const PortalContainer = styled.div.attrs({
-  className: 'PortalContainer',
-})``;

package/src/providers/SettingsProvider/index.tsx

@@ -1,70 +0,0 @@
-import {
-  FC,
-  PropsWithChildren,
-  createContext,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-
-export type Settings = Record<string, string | undefined>;
-
-export type SettingsContextProps = {
-  settings: Settings;
-  updateSettings: (partialSettings: Settings) => void;
-};
-
-export const SettingsContext = createContext<SettingsContextProps>({
-  settings: {},
-  updateSettings: () => {},
-});
-
-export const SettingsProvider: FC<PropsWithChildren> = ({ children }) => {
-  const [settings, setSettings] = useState({});
-  const getSettings = useCallback(() => {
-    try {
-      const settingsJson = localStorage.getItem('settings');
-      return settingsJson ? JSON.parse(settingsJson) : {};
-    } catch (error) {
-      console.warn('Settings load error', error);
-      return {};
-    }
-  }, []);
-
-  const saveSettings = useCallback((settingsToSave: Settings) => {
-    try {
-      localStorage.setItem('settings', JSON.stringify(settingsToSave));
-    } catch (error) {
-      console.error('Settings save error', error);
-    }
-  }, []);
-
-  const updateSettings = useCallback(
-    (partialSettings: Settings) => {
-      const newSettings = {
-        ...settings,
-        ...partialSettings,
-      };
-      setSettings(newSettings);
-      saveSettings(newSettings);
-    },
-    [saveSettings, settings]
-  );
-
-  useEffect(() => {
-    const readSettings = getSettings();
-    setSettings(readSettings);
-  }, [getSettings]);
-
-  const contextValue = useMemo(
-    () => ({ settings, updateSettings }),
-    [settings, updateSettings]
-  );
-
-  return (
-    <SettingsContext.Provider value={contextValue}>
-      {children}
-    </SettingsContext.Provider>
-  );
-};

package/src/providers/ThemeProvider/ThemeProvider.ts

@@ -1,55 +0,0 @@
-import { Theme } from './types';
-import { defaultTheme } from './defaultTheme';
-import styled from 'styled-components';
-
-type ThemeProviderProps = {
-  $theme?: Theme;
-  $darkMode?: boolean;
-};
-
-const getThemeValuesCss = (
-  prefix: string,
-  obj: Record<string, string> | undefined
-) => {
-  return Object.entries(obj ?? {})
-    .map(([key, value]) => {
-      return `--${prefix}-${key}: ${value};`;
-    })
-    .join('');
-};
-
-const getThemeColorsCss = (colors: Theme['colors'], darkMode = false) => {
-  return Object.entries(colors ?? {})
-    .map(([color, intensities]) =>
-      Object.entries(
-        (typeof intensities === 'string'
-          ? (colors ?? {})[intensities] ??
-            (defaultTheme.colors ?? {})[intensities]
-          : intensities) ?? {}
-      )
-        .map(
-          ([intensity, value]) =>
-            `--color-${color}-${
-              darkMode ? 1000 - Number(intensity) : intensity
-            }: ${value};`
-        )
-        .join('')
-    )
-    .join('');
-};
-
-export const ThemeProvider = styled.div<ThemeProviderProps>`
-  display: contents;
-  ${({ $theme = {}, $darkMode }) => {
-    return [
-      getThemeColorsCss($theme.colors, $darkMode),
-      getThemeValuesCss('font', $theme.fonts),
-      getThemeValuesCss('text', $theme.texts),
-      getThemeValuesCss('weight', $theme.weights),
-      getThemeValuesCss('space', $theme.spaces),
-      getThemeValuesCss('size', $theme.sizes),
-      getThemeValuesCss('rounded', $theme.rounded),
-      getThemeValuesCss('shadow', $theme.shadows),
-    ].join('');
-  }}
-`;

package/src/providers/ThemeProvider/defaultTheme.ts

@@ -1,444 +0,0 @@
-import { Theme } from './types';
-
-export const defaultTheme: Theme = {
-  colors: {
-    slate: {
-      0: '#ffffff',
-      50: '#f8fafc',
-      100: '#f1f5f9',
-      200: '#e2e8f0',
-      300: '#cbd5e1',
-      400: '#94a3b8',
-      500: '#64748b',
-      600: '#475569',
-      700: '#334155',
-      800: '#1e293b',
-      900: '#0f172a',
-      950: '#020617',
-    },
-
-    gray: {
-      0: '#ffffff',
-      50: '#f9fafb',
-      100: '#f3f4f6',
-      200: '#e5e7eb',
-      300: '#d1d5db',
-      400: '#9ca3af',
-      500: '#6b7280',
-      600: '#4b5563',
-      700: '#374151',
-      800: '#1f2937',
-      900: '#111827',
-      950: '#030712',
-    },
-
-    zinc: {
-      0: '#ffffff',
-      50: '#fafafa',
-      100: '#f4f4f5',
-      200: '#e4e4e7',
-      300: '#d4d4d8',
-      400: '#a1a1aa',
-      500: '#71717a',
-      600: '#52525b',
-      700: '#3f3f46',
-      800: '#27272a',
-      900: '#18181b',
-      950: '#09090b',
-    },
-
-    neutral: {
-      0: '#ffffff',
-      50: '#fafafa',
-      100: '#f5f5f5',
-      200: '#e5e5e5',
-      300: '#d4d4d4',
-      400: '#a3a3a3',
-      500: '#737373',
-      600: '#525252',
-      700: '#404040',
-      800: '#262626',
-      900: '#171717',
-      950: '#0a0a0a',
-      1000: '#000000',
-    },
-    stone: {
-      0: '#ffffff',
-      50: '#fafaf9',
-      100: '#f5f5f4',
-      200: '#e7e5e4',
-      300: '#d6d3d1',
-      400: '#a8a29e',
-      500: '#78716c',
-      600: '#57534e',
-      700: '#44403c',
-      800: '#292524',
-      900: '#1c1917',
-      950: '#0c0a09',
-    },
-
-    red: {
-      0: '#ffffff',
-      50: '#fef2f2',
-      100: '#fee2e2',
-      200: '#fecaca',
-      300: '#fca5a5',
-      400: '#f87171',
-      500: '#ef4444',
-      600: '#dc2626',
-      700: '#b91c1c',
-      800: '#991b1b',
-      900: '#7f1d1d',
-      950: '#450a0a',
-    },
-
-    orange: {
-      0: '#ffffff',
-      50: '#fff7ed',
-      100: '#ffedd5',
-      200: '#fed7aa',
-      300: '#fdba74',
-      400: '#fb923c',
-      500: '#f97316',
-      600: '#ea580c',
-      700: '#c2410c',
-      800: '#9a3412',
-      900: '#7c2d12',
-      950: '#431407',
-      1000: '#000000',
-    },
-
-    amber: {
-      0: '#ffffff',
-      50: '#fffbeb',
-      100: '#fef3c7',
-      200: '#fde68a',
-      300: '#fcd34d',
-      400: '#fbbf24',
-      500: '#f59e0b',
-      600: '#d97706',
-      700: '#b45309',
-      800: '#92400e',
-      900: '#78350f',
-      950: '#451a03',
-      1000: '#000000',
-    },
-
-    yellow: {
-      0: '#ffffff',
-      50: '#fefce8',
-      100: '#fef9c3',
-      200: '#fef08a',
-      300: '#fde047',
-      400: '#facc15',
-      500: '#eab308',
-      600: '#ca8a04',
-      700: '#a16207',
-      800: '#854d0e',
-      900: '#713f12',
-      950: '#422006',
-      1000: '#000000',
-    },
-
-    lime: {
-      0: '#ffffff',
-      50: '#f7fee7',
-      100: '#ecfccb',
-      200: '#d9f99d',
-      300: '#bef264',
-      400: '#a3e635',
-      500: '#84cc16',
-      600: '#65a30d',
-      700: '#4d7c0f',
-      800: '#3f6212',
-      900: '#365314',
-      950: '#1a2e05',
-      1000: '#000000',
-    },
-
-    green: {
-      0: '#ffffff',
-      50: '#f0fdf4',
-      100: '#dcfce7',
-      200: '#bbf7d0',
-      300: '#86efac',
-      400: '#4ade80',
-      500: '#22c55e',
-      600: '#16a34a',
-      700: '#15803d',
-      800: '#166534',
-      900: '#14532d',
-      950: '#052e16',
-      1000: '#000000',
-    },
-
-    emerald: {
-      0: '#ffffff',
-      50: '#ecfdf5',
-      100: '#d1fae5',
-      200: '#a7f3d0',
-      300: '#6ee7b7',
-      400: '#34d399',
-      500: '#10b981',
-      600: '#059669',
-      700: '#047857',
-      800: '#065f46',
-      900: '#064e3b',
-      950: '#022c22',
-      1000: '#000000',
-    },
-
-    teal: {
-      0: '#ffffff',
-      50: '#f0fdfa',
-      100: '#ccfbf1',
-      200: '#99f6e4',
-      300: '#5eead4',
-      400: '#2dd4bf',
-      500: '#14b8a6',
-      600: '#0d9488',
-      700: '#0f766e',
-      800: '#115e59',
-      900: '#134e4a',
-      950: '#042f2e',
-      1000: '#000000',
-    },
-
-    cyan: {
-      0: '#ffffff',
-      50: '#ecfeff',
-      100: '#cffafe',
-      200: '#a5f3fc',
-      300: '#67e8f9',
-      400: '#22d3ee',
-      500: '#06b6d4',
-      600: '#0891b2',
-      700: '#0e7490',
-      800: '#155e75',
-      900: '#164e63',
-      950: '#083344',
-      1000: '#000000',
-    },
-
-    sky: {
-      0: '#ffffff',
-      50: '#f0f9ff',
-      100: '#e0f2fe',
-      200: '#bae6fd',
-      300: '#7dd3fc',
-      400: '#38bdf8',
-      500: '#0ea5e9',
-      600: '#0284c7',
-      700: '#0369a1',
-      800: '#075985',
-      900: '#0c4a6e',
-      950: '#082f49',
-      1000: '#000000',
-    },
-
-    blue: {
-      0: '#ffffff',
-      50: '#eff6ff',
-      100: '#dbeafe',
-      200: '#bfdbfe',
-      300: '#93c5fd',
-      400: '#60a5fa',
-      500: '#3b82f6',
-      600: '#2563eb',
-      700: '#1d4ed8',
-      800: '#1e40af',
-      900: '#1e3a8a',
-      950: '#172554',
-      1000: '#000000',
-    },
-
-    indigo: {
-      0: '#ffffff',
-      50: '#eef2ff',
-      100: '#e0e7ff',
-      200: '#c7d2fe',
-      300: '#a5b4fc',
-      400: '#818cf8',
-      500: '#6366f1',
-      600: '#4f46e5',
-      700: '#4338ca',
-      800: '#3730a3',
-      900: '#312e81',
-      950: '#1e1b4b',
-      1000: '#000000',
-    },
-
-    violet: {
-      0: '#ffffff',
-      50: '#f5f3ff',
-      100: '#ede9fe',
-      200: '#ddd6fe',
-      300: '#c4b5fd',
-      400: '#a78bfa',
-      500: '#8b5cf6',
-      600: '#7c3aed',
-      700: '#6d28d9',
-      800: '#5b21b6',
-      900: '#4c1d95',
-      950: '#2e1065',
-      1000: '#000000',
-    },
-
-    purple: {
-      0: '#ffffff',
-      50: '#faf5ff',
-      100: '#f3e8ff',
-      200: '#e9d5ff',
-      300: '#d8b4fe',
-      400: '#c084fc',
-      500: '#a855f7',
-      600: '#9333ea',
-      700: '#7e22ce',
-      800: '#6b21a8',
-      900: '#581c87',
-      950: '#3b0764',
-      1000: '#000000',
-    },
-
-    fuchsia: {
-      0: '#ffffff',
-      50: '#fdf4ff',
-      100: '#fae8ff',
-      200: '#f5d0fe',
-      300: '#f0abfc',
-      400: '#e879f9',
-      500: '#d946ef',
-      600: '#c026d3',
-      700: '#a21caf',
-      800: '#86198f',
-      900: '#701a75',
-      950: '#4a044e',
-      1000: '#000000',
-    },
-
-    pink: {
-      0: '#ffffff',
-      50: '#fdf2f8',
-      100: '#fce7f3',
-      200: '#fbcfe8',
-      300: '#f9a8d4',
-      400: '#f472b6',
-      500: '#ec4899',
-      600: '#db2777',
-      700: '#be185d',
-      800: '#9d174d',
-      900: '#831843',
-      950: '#500724',
-      1000: '#000000',
-    },
-
-    rose: {
-      0: '#ffffff',
-      50: '#fff1f2',
-      100: '#ffe4e6',
-      200: '#fecdd3',
-      300: '#fda4af',
-      400: '#fb7185',
-      500: '#f43f5e',
-      600: '#e11d48',
-      700: '#be123c',
-      800: '#9f1239',
-      900: '#881337',
-      950: '#4c0519',
-      1000: '#000000',
-    },
-
-    primary: 'sky',
-    secondary: 'gray',
-    success: 'emerald',
-    warning: 'amber',
-    danger: 'red',
-    info: 'cyan',
-  },
-
-  texts: {
-    xs: '0.5rem',
-    sm: '0.75rem',
-    base: '0.875rem',
-    lg: '1rem',
-    xl: '1.125rem',
-    '2xl': '1.25rem',
-    '3xl': '1.5rem',
-    '4xl': '1.875rem',
-    '5xl': '2.25rem',
-    '6xl': '3rem',
-  },
-
-  fonts: {
-    sans: "'Montserrat', Helvetica, Arial, Verdana, sans-serif",
-    serif: "Georgia, Cambria, 'Times New Roman', Times, serif",
-    mono: "Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-  },
-
-  weights: {
-    light: '200',
-    normal: '400',
-    bold: '700',
-  },
-
-  spaces: {
-    '0': '0',
-    '0_5': '0.125rem',
-    '1': '0.25rem',
-    '1_5': '0.375rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '5': '1.25rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '10': '2.5rem',
-    '12': '3rem',
-    '16': '4rem',
-    '20': '5rem',
-    '24': '6rem',
-    '32': '8rem',
-    '40': '10rem',
-    '48': '12rem',
-  },
-
-  sizes: {
-    '0': '0',
-    '0_5': '0.125rem',
-    '1': '0.25rem',
-    '1_5': '0.375rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '5': '1.25rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '10': '2.5rem',
-    '12': '3rem',
-    '16': '4rem',
-    '20': '5rem',
-    '24': '6rem',
-    '32': '8rem',
-    '40': '10rem',
-    '48': '12rem',
-  },
-
-  rounded: {
-    none: '0',
-    sm: '0.125rem',
-    md: '0.25rem',
-    lg: '0.5rem',
-    xl: '1rem',
-    '2xl': '2rem',
-    '3xl': '3rem',
-    full: '9999px',
-  },
-
-  shadows: {
-    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.1)',
-    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-    '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
-  },
-};

package/src/providers/ThemeProvider/index.ts

@@ -1,3 +0,0 @@
-export { ThemeProvider } from './ThemeProvider';
-
-export { type Theme } from './types';