feat: complete set lang BUN-88

apps/storefront/src/App.tsx

@@ -1,6 +1,6 @@
 import { HashRouter, Route, Routes } from 'react-router-dom'
 import { useB3AppOpen } from '@b3/hooks'
-import { useB3Lang } from '@b3/lang'
+import { useB3Lang, useB3CurrentLang } from '@b3/lang'
 
 import { ThemeFrame } from './ThemeFrame'
 import { Home, Form } from './pages'
@@ -17,11 +17,13 @@ body {
 export default function App() {
   const [isOpen, setIsOpen] = useB3AppOpen(false)
   const b3Lang = useB3Lang()
+  const [lang, setLang] = useB3CurrentLang()
 
   return (
     <HashRouter>
       <div className="bundle-app">
         <div>{b3Lang('intl.users.register')}</div>
+        <button onClick={() => { setLang(lang === 'zh' ? 'en' : 'zh') }}>update lang</button>
         <ThemeFrame
           className={isOpen ? 'active-frame' : undefined}
           fontUrl={FONT_URL}

apps/storefront/src/main.tsx

@@ -2,6 +2,7 @@ import ReactDOM from 'react-dom/client'
 import { LangProvider } from '@b3/lang'
 
 import App from './App'
+import B3ThemeProvider from './theme'
 
 import './main.css'
 import * as locales from './locales'
@@ -19,6 +20,8 @@ container.className = 'bundle-namespace'
 
 ReactDOM.createRoot(container).render(
   <LangProvider locales={locales}>
-    <App />
+    <B3ThemeProvider>
+      <App />
+    </B3ThemeProvider>
   </LangProvider>,
 )

apps/storefront/src/theme.tsx

@@ -0,0 +1,41 @@
+import { createTheme, ThemeProvider } from '@mui/material/styles'
+import * as materialMultiLanguages from '@mui/material/locale'
+import React from 'react'
+
+import { useB3CurrentLang } from '@b3/lang'
+
+type LangMapType = {
+  [index: string]: string
+}
+
+const MUI_LANG_MAP: LangMapType = {
+  en: 'enUS',
+  zh: 'zhCN',
+  fr: 'frFR',
+  nl: 'nlNL',
+  de: 'deDE',
+  it: 'itIT',
+  es: 'esES',
+}
+
+type MaterialMultiLanguagesType = {
+  [K: string]: materialMultiLanguages.Localization
+}
+
+type Props = {
+  children?: React.ReactNode;
+}
+
+const theme = (lang: string) => createTheme({}, (materialMultiLanguages as MaterialMultiLanguagesType)[MUI_LANG_MAP[lang] || 'enUS'])
+
+function B3ThemeProvider({ children }: Props) {
+  const [lang] = useB3CurrentLang()
+
+  return (
+    <ThemeProvider theme={theme(lang)}>
+      { children }
+    </ThemeProvider>
+  )
+}
+
+export default B3ThemeProvider

packages/lang/LangProvider.tsx

@@ -1,28 +1,22 @@
 import { IntlProvider, MessageFormatElement } from 'react-intl'
 import React from 'react'
-import { ThemeProvider, Theme } from '@mui/material/styles'
-
-import { BrowserLanguage } from '@b3/utils'
 
+import { useB3CurrentLang } from './useB3CurrentLang'
 import * as defaultLocales from './locales'
-import defaultTheme from './theme'
 
 type Props = {
   children?: React.ReactNode;
-  theme?: (lang: string) => Theme;
   locales?: {
     [k: string]: Record<string, string> | Record<string, MessageFormatElement[]>
   };
 };
 
-export function LangProvider({ children, theme = defaultTheme, locales = defaultLocales }: Props) {
-  const lang = BrowserLanguage()
+export function LangProvider({ children, locales = defaultLocales }: Props) {
+  const [lang] = useB3CurrentLang()
 
   return (
     <IntlProvider messages={locales[lang] || locales.en} locale={lang} defaultLocale="en">
-      <ThemeProvider theme={theme(lang)}>
-        {children}
-      </ThemeProvider>
+      {children}
     </IntlProvider>
   )
 }

packages/lang/index.ts

@@ -1,2 +1,4 @@
 export { LangProvider } from './LangProvider'
 export { useB3Lang } from './useB3Lang'
+export { useB3CurrentLang } from './useB3CurrentLang'
+export { withB3Lang } from './withB3Lang'

packages/lang/useB3CurrentLang.ts

@@ -0,0 +1,37 @@
+import {
+  useState,
+  useEffect,
+  Dispatch,
+  SetStateAction,
+} from 'react'
+
+import { BrowserLanguage } from '@b3/utils'
+
+const defaultLang = (() => {
+  const lang = BrowserLanguage()
+  const safeValue = ['en', 'zh', 'fr', 'nl', 'de', 'it', 'es']
+
+  return safeValue.indexOf(lang) !== -1 ? lang : 'en'
+})()
+
+const subscriptions: Dispatch<SetStateAction<string>>[] = []
+let lang = defaultLang
+
+const setLang = (newLang: string) => {
+  lang = newLang
+  subscriptions.forEach((subscription) => {
+    subscription(lang)
+  })
+}
+
+type UseB3CurrentLang = {
+  (): [string, (newLang: string) => void]
+}
+
+export const useB3CurrentLang: UseB3CurrentLang = () => {
+  const [_, newSubscription] = useState(defaultLang)
+  useEffect(() => {
+    subscriptions.push(newSubscription)
+  }, [])
+  return [lang, setLang]
+}

packages/lang/withB3Lang.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { useB3Lang } from './useB3Lang'
+
+export const withB3Lang = (WrappedComponent: typeof React.Component) => function (props: any) {
+  const b3lang = useB3Lang()
+
+  return (
+    <WrappedComponent
+      b3lang={b3lang}
+      {...props}
+    />
+  )
+}