chore(i18n): use default i18n provider, define LanguageManager component to handle direction and lng

src/providers/AppProvider.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { I18nextProvider } from 'react-i18next';
+import i18n from '@/config/i18n';
+
+export const AppProviders: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+};

src/providers/LanguageProvider.tsx

@@ -1,29 +0,0 @@
-import type { Language } from '@/types/language';
-import { changeLanguage } from 'i18next';
-import { useLayoutEffect, type JSX, type PropsWithChildren } from 'react';
-import { useLocalStorage } from '@/hooks/useLocalStorage';
-import { LangaugeContext } from '@/contexts/LangaugeContext';
-
-export const LanguageProvider = (props: PropsWithChildren): JSX.Element => {
-  const [currentLanguage, setCurrentLangauge] = useLocalStorage<Language>(
-    'language',
-    'fa',
-  );
-
-  useLayoutEffect(() => {
-    changeLanguage(currentLanguage);
-    document.documentElement.dir = currentLanguage === 'fa' ? 'rtl' : 'ltr';
-    document.documentElement.lang = currentLanguage;
-  }, [currentLanguage]);
-
-  return (
-    <LangaugeContext.Provider
-      value={{
-        language: currentLanguage,
-        changeLanguage: setCurrentLangauge,
-      }}
-    >
-      {props.children}
-    </LangaugeContext.Provider>
-  );
-};

src/providers/ThemeProvider.tsx

@@ -1,33 +0,0 @@
-import { useLayoutEffect, type JSX, type PropsWithChildren } from 'react';
-import { useLocalStorage } from '@/hooks/useLocalStorage';
-import type { AppTheme } from '@/types/theme';
-import { AppThemeContext } from '@/contexts/AppThemeContext';
-import { createTheme, ThemeProvider } from '@mui/material';
-import { useLangauge } from '@/hooks/useLanguage';
-
-export const AppThemeProvider = (props: PropsWithChildren): JSX.Element => {
-  const { language } = useLangauge();
-  const [currentThemeMode, setCurrentTheme] = useLocalStorage<AppTheme>(
-    'theme',
-    'default',
-  );
-
-  const muiTheme = createTheme({
-    direction: language === 'fa' ? 'rtl' : 'ltr',
-  });
-
-  useLayoutEffect(() => {
-    document.body.setAttribute('theme', currentThemeMode);
-  }, [currentThemeMode]);
-
-  return (
-    <AppThemeContext.Provider
-      value={{
-        mode: currentThemeMode,
-        changeTheme: setCurrentTheme,
-      }}
-    >
-      <ThemeProvider theme={muiTheme}>{props.children}</ThemeProvider>
-    </AppThemeContext.Provider>
-  );
-};