feat: complete multilanguage

BUN-88

apps/storefront/src/App.tsx

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

apps/storefront/src/locales/en-US/index.ts

@@ -0,0 +1,5 @@
+import users from './users'
+
+export const en = {
+  ...users,
+}

apps/storefront/src/locales/en-US/users.ts

@@ -0,0 +1,3 @@
+export default {
+  'intl.users.register': 'register',
+}

apps/storefront/src/locales/index.ts

@@ -0,0 +1,2 @@
+export { en } from './en-US'
+export { zh } from './zh-CN'

apps/storefront/src/locales/zh-CN/index.ts

@@ -0,0 +1,5 @@
+import users from './users'
+
+export const zh = {
+  ...users,
+}

apps/storefront/src/locales/zh-CN/users.ts

@@ -0,0 +1,3 @@
+export default {
+  'intl.users.register': '注册',
+}

apps/storefront/src/main.tsx

@@ -1,7 +1,10 @@
 import ReactDOM from 'react-dom/client'
+import { LangProvider } from '@b3/lang'
+
 import App from './App'
 
 import './main.css'
+import * as locales from './locales'
 
 const CONTAINER_ID = 'bundle-container'
 
@@ -14,4 +17,8 @@ if (!container) {
 
 container.className = 'bundle-namespace'
 
-ReactDOM.createRoot(container).render(<App />)
+ReactDOM.createRoot(container).render(
+  <LangProvider locales={locales}>
+    <App />
+  </LangProvider>,
+)

packages/lang/LangProvider.tsx

@@ -0,0 +1,28 @@
+import { IntlProvider, MessageFormatElement } from 'react-intl'
+import React from 'react'
+import { ThemeProvider, Theme } from '@mui/material/styles'
+
+import { BrowserLanguage } from '@b3/utils'
+
+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()
+
+  return (
+    <IntlProvider messages={locales[lang] || locales.en} locale={lang} defaultLocale="en">
+      <ThemeProvider theme={theme(lang)}>
+        {children}
+      </ThemeProvider>
+    </IntlProvider>
+  )
+}

packages/lang/index.ts

@@ -0,0 +1,2 @@
+export { LangProvider } from './LangProvider'
+export { useB3Lang } from './useB3Lang'

packages/lang/locales/en-US/index.ts

@@ -0,0 +1 @@
+export const en = {}

packages/lang/locales/index.ts

@@ -0,0 +1 @@
+export { en } from './en-US'

packages/lang/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@b3/lang",
+  "private": true,
+  "version": "1.0.0",
+  "main": "index.js",
+  "dependencies": {
+    "react-intl": "^5.20.3"
+  }
+}

packages/lang/theme.ts

@@ -0,0 +1,24 @@
+import { createTheme } from '@mui/material/styles'
+import * as materialMultiLanguages from '@mui/material/locale'
+
+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 = {
+  [index: string]: materialMultiLanguages.Localization
+}
+
+const theme = (lang: string) => createTheme({}, (materialMultiLanguages as MaterialMultiLanguagesType)[MUI_LANG_MAP[lang] || 'enUS'])
+
+export default theme

packages/lang/useB3Lang.ts

@@ -0,0 +1,10 @@
+import { useIntl } from 'react-intl'
+
+export const useB3Lang = () => {
+  const intl = useIntl()
+  return (id: string, options = {}) => (
+    id ? intl.formatMessage({
+      id,
+      defaultMessage: id,
+    }, options) : '')
+}

packages/utils/BrowserLanguage.ts

@@ -0,0 +1,6 @@
+const BrowserLanguage = () => {
+  const lang = navigator.language
+  return lang.substring(0, 2)
+}
+
+export default BrowserLanguage

packages/utils/index.ts

@@ -1 +1 @@
-export { }
+export { default as BrowserLanguage } from './BrowserLanguage'