@addev-be/ui 0.2.2 → 0.2.6

package/src/providers/SettingsProvider/index.tsx

@@ -1,70 +1,70 @@
-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>
-  );
-};
+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 +1,55 @@
-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('');
-  }}
-`;
+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('');
+  }}
+`;