From 32a4946ca83d5a93b3daeceada559c0f2095bfe1 Mon Sep 17 00:00:00 2001 From: joaquin Date: Mon, 11 Jul 2022 17:40:46 +0800 Subject: [PATCH] feat: complete multilanguage BUN-88 --- apps/storefront/src/App.tsx | 3 +++ apps/storefront/src/locales/en-US/index.ts | 5 ++++ apps/storefront/src/locales/en-US/users.ts | 3 +++ apps/storefront/src/locales/index.ts | 2 ++ apps/storefront/src/locales/zh-CN/index.ts | 5 ++++ apps/storefront/src/locales/zh-CN/users.ts | 3 +++ apps/storefront/src/main.tsx | 9 ++++++- packages/lang/LangProvider.tsx | 28 ++++++++++++++++++++++ packages/lang/index.ts | 2 ++ packages/lang/locales/en-US/index.ts | 1 + packages/lang/locales/index.ts | 1 + packages/lang/package.json | 9 +++++++ packages/lang/theme.ts | 24 +++++++++++++++++++ packages/lang/useB3Lang.ts | 10 ++++++++ packages/utils/BrowserLanguage.ts | 6 +++++ packages/utils/index.ts | 2 +- 16 files changed, 111 insertions(+), 2 deletions(-) create mode 100644 apps/storefront/src/locales/en-US/index.ts create mode 100644 apps/storefront/src/locales/en-US/users.ts create mode 100644 apps/storefront/src/locales/index.ts create mode 100644 apps/storefront/src/locales/zh-CN/index.ts create mode 100644 apps/storefront/src/locales/zh-CN/users.ts create mode 100644 packages/lang/LangProvider.tsx create mode 100644 packages/lang/index.ts create mode 100644 packages/lang/locales/en-US/index.ts create mode 100644 packages/lang/locales/index.ts create mode 100644 packages/lang/package.json create mode 100644 packages/lang/theme.ts create mode 100644 packages/lang/useB3Lang.ts create mode 100644 packages/utils/BrowserLanguage.ts diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx index 4ddc1946..12620d31 100644 --- a/apps/storefront/src/App.tsx +++ b/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 (
+
{b3Lang('intl.users.register')}
) +ReactDOM.createRoot(container).render( + + + , +) diff --git a/packages/lang/LangProvider.tsx b/packages/lang/LangProvider.tsx new file mode 100644 index 00000000..65fa2294 --- /dev/null +++ b/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 | Record + }; +}; + +export function LangProvider({ children, theme = defaultTheme, locales = defaultLocales }: Props) { + const lang = BrowserLanguage() + + return ( + + + {children} + + + ) +} diff --git a/packages/lang/index.ts b/packages/lang/index.ts new file mode 100644 index 00000000..0bec2425 --- /dev/null +++ b/packages/lang/index.ts @@ -0,0 +1,2 @@ +export { LangProvider } from './LangProvider' +export { useB3Lang } from './useB3Lang' diff --git a/packages/lang/locales/en-US/index.ts b/packages/lang/locales/en-US/index.ts new file mode 100644 index 00000000..0e212055 --- /dev/null +++ b/packages/lang/locales/en-US/index.ts @@ -0,0 +1 @@ +export const en = {} diff --git a/packages/lang/locales/index.ts b/packages/lang/locales/index.ts new file mode 100644 index 00000000..62946347 --- /dev/null +++ b/packages/lang/locales/index.ts @@ -0,0 +1 @@ +export { en } from './en-US' diff --git a/packages/lang/package.json b/packages/lang/package.json new file mode 100644 index 00000000..7f2ac801 --- /dev/null +++ b/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" + } +} diff --git a/packages/lang/theme.ts b/packages/lang/theme.ts new file mode 100644 index 00000000..6c393f8e --- /dev/null +++ b/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 diff --git a/packages/lang/useB3Lang.ts b/packages/lang/useB3Lang.ts new file mode 100644 index 00000000..95ac8a82 --- /dev/null +++ b/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) : '') +} diff --git a/packages/utils/BrowserLanguage.ts b/packages/utils/BrowserLanguage.ts new file mode 100644 index 00000000..e00dfa8c --- /dev/null +++ b/packages/utils/BrowserLanguage.ts @@ -0,0 +1,6 @@ +const BrowserLanguage = () => { + const lang = navigator.language + return lang.substring(0, 2) +} + +export default BrowserLanguage diff --git a/packages/utils/index.ts b/packages/utils/index.ts index f0a766d3..ebbef43c 100644 --- a/packages/utils/index.ts +++ b/packages/utils/index.ts @@ -1 +1 @@ -export { } +export { default as BrowserLanguage } from './BrowserLanguage'