:construction: add fluent demo

dashboard-fluent/src/App.tsx

@@ -1,9 +1,29 @@
-import React from "react";
+import { BrowserRouter } from "react-router-dom";
+import { IntlProvider } from "react-intl";
+
+import Router from "./Router";
+import locales, {
+  get as getLocale,
+  DEFAULT as DEFAULT_LOCALE,
+} from "./locales";
 
 import "./App.css";
 
-function App() {
-  return <div className="App"></div>;
+const lang = getLocale();
+const i18n = locales(lang);
+
+function Widget() {
+  return (
+    <IntlProvider
+      messages={i18n.messages}
+      locale={lang}
+      defaultLocale={DEFAULT_LOCALE}
+    >
+      <BrowserRouter basename={process.env.PUBLIC_URL}>
+        <Router />
+      </BrowserRouter>
+    </IntlProvider>
+  );
 }
 
-export default App;
+export default Widget;

dashboard-fluent/src/Router.tsx

@@ -0,0 +1,16 @@
+import { Route, Routes } from "react-router-dom";
+
+import Home from "./pages/Home";
+import NotFound from "./pages/NotFound";
+
+const Widget = () => {
+  return (
+    <Routes>
+      {/* PLEASE KEEP THOSE ARE THE LAST TWO ROUTES */}
+      <Route path="" element={<Home />} />
+      <Route path="*" element={<NotFound />} />
+    </Routes>
+  );
+};
+
+export default Widget;

dashboard-fluent/src/locales/en-US/index.ts

@@ -0,0 +1,3 @@
+const items = {};
+
+export default items;

dashboard-fluent/src/locales/index.ts

@@ -0,0 +1,60 @@
+import Cookies from "js-cookie";
+import "moment/locale/zh-cn";
+import "moment/locale/zh-tw";
+import "moment/locale/es";
+import "moment/locale/fr";
+import "moment/locale/ja";
+import "moment/locale/ko";
+
+import languages from "./languages";
+import enUS from "./en-US";
+import zhHans from "./zh-Hans";
+import zhHant from "./zh-Hant";
+
+const KEY = "locale";
+
+export const DEFAULT: string =
+  process.env.REACT_APP_DEFAULT_LOCALE || "zh-Hans";
+export const LANGUAGES: string[] = process.env.REACT_APP_LANGUAGES?.split(
+  ","
+) || ["en-US", "zh-Hans"];
+
+export const get = (): string => {
+  return localStorage.getItem(KEY) || Cookies.get(KEY) || DEFAULT;
+};
+
+export const set = (lang: string, reload: boolean) => {
+  Cookies.set(KEY, lang);
+  localStorage.setItem(KEY, lang);
+  if (reload) {
+    window.location.reload();
+  }
+};
+
+export const remove = () => {
+  Cookies.remove(KEY);
+  localStorage.removeItem(KEY);
+};
+
+interface ILocale {
+  messages: Record<string, string>;
+}
+
+const messages = (lang: string): ILocale => {
+  switch (lang) {
+    case "en-US":
+      return {
+        messages: { ...enUS, ...languages },
+      };
+    case "zh-Hant":
+      return {
+        messages: { ...zhHant, ...languages },
+      };
+    default:
+      return {
+        messages: { ...zhHans, ...languages },
+      };
+  }
+};
+
+export default messages;

dashboard-fluent/src/locales/languages.ts

@@ -0,0 +1,11 @@
+const items = {
+  "languages.en-US": "English",
+  "languages.zh-Hans": "简体中文",
+  "languages.zh-Hant": "繁體中文",
+  "languages.fr": "Français",
+  "languages.es": "Español",
+  "languages.ja": "日本語",
+  "languages.ko": "한국어",
+};
+
+export default items;

dashboard-fluent/src/locales/zh-Hans/index.ts

@@ -0,0 +1,3 @@
+const items = {};
+
+export default items;

dashboard-fluent/src/locales/zh-Hant/index.ts

@@ -0,0 +1,3 @@
+const items = {};
+
+export default items;

dashboard-fluent/src/pages/Home.tsx

@@ -0,0 +1,20 @@
+import { PrimaryButton } from "@fluentui/react";
+
+const Widget = () => {
+  return (
+    <div>
+      <h1>home</h1>
+      <div>
+        <PrimaryButton
+          onClick={() => {
+            alert("aaa");
+          }}
+        >
+          Demo
+        </PrimaryButton>
+      </div>
+    </div>
+  );
+};
+
+export default Widget;

dashboard-fluent/src/pages/NotFound.tsx

@@ -0,0 +1,9 @@
+const Widget = () => {
+  return (
+    <div>
+      <h1>not found</h1>
+    </div>
+  );
+};
+
+export default Widget;