feat(lng): Added change language on the fly (#456)

* feat(lng): added change language on the fly

* fixed dropdown

* applied feedbacks

* added translation

* updated bundlesize

* fixed error

* updated snaps

* added french language

* added language in storage

* updated styles

* fixed tests

src/design-tokens/ThemeContext.ts

@@ -1,8 +1,11 @@
 import { createContext } from 'react';
 
+import { Language } from '../../i18n/config';
 interface Props {
   isDarkMode: boolean;
   setIsDarkMode: (isDarkMode: boolean) => void;
+  language: Language;
+  setLanguage: (language: Language) => void;
 }
 
 const ThemeContext = createContext<undefined | Props>(undefined);

src/design-tokens/ThemeProvider.tsx

@@ -1,6 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
 import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
+import i18next from 'i18next';
+
+import { Language } from '../../i18n/config';
 
 import ThemeContext from './ThemeContext';
 import { getTheme, ThemeMode } from './theme';
@@ -8,12 +11,23 @@ import useLocalStorage from './useLocalStorage';
 
 const ThemeProvider: React.FC = ({ children }) => {
   const isDarkModeDefault = window?.__VERDACCIO_BASENAME_UI_OPTIONS?.darkMode;
+  const currentLanguage: Language = i18next.language || i18next.options?.fallbackLng?.[0];
+
   const [isDarkMode, setIsDarkMode] = useLocalStorage('darkMode', !!isDarkModeDefault);
+  const [language, setLanguage] = useLocalStorage('language', currentLanguage);
 
   const themeMode: ThemeMode = isDarkMode ? 'dark' : 'light';
 
+  const changeLanguage = async () => {
+    await i18next.changeLanguage(language);
+  };
+
+  useEffect(() => {
+    changeLanguage();
+  }, [language, changeLanguage]);
+
   return (
-    <ThemeContext.Provider value={{ isDarkMode, setIsDarkMode }}>
+    <ThemeContext.Provider value={{ isDarkMode, setIsDarkMode, language, setLanguage }}>
       <EmotionThemeProvider theme={getTheme(themeMode)}>
         <MuiThemeProvider theme={getTheme(themeMode)}>{children}</MuiThemeProvider>
       </EmotionThemeProvider>