Fix errors when importing common packages (#432)

* fix: temporarily comment out error codes in Feeds

* fix: update esbuild and fix tailwind build command

* fix: temporarily change the target of ReactModal.setAppElement

* fix: commented out translation & navigation function and fix typo of color variables

* fix: language switch icon size

* fix: move i18n config from packages folder to each microfrontend

* fix: recover sign in modal

Author: YHhaoareyou

apps/campus/src/bus/Bus.tsx

@@ -321,10 +321,10 @@ const Bus = (): JSX.Element => {
 
   const { t, i18n } = useTranslation()
   useEffect(() => {
-    i18n.changeLanguage(localStorage.getItem("wasedatime-lng"))
+    // i18n.changeLanguage(localStorage.getItem("wasedatime-lng"))
   }, [])
 
-  const lng = i18n.language
+  const lng = i18n.language || "en"
   const { wasedaStatus, nishiStatus } = getBusStatuses(date, lng, t)
   const wasedaStatusComponent = createStatusComponent(wasedaStatus, t)
   const nishiStatusComponent = createStatusComponent(nishiStatus, t)

apps/campus/src/root.component.tsx

@@ -1,22 +1,12 @@
 import React, { Suspense, useContext, useEffect } from "react"
-import { Lang, LoadingSpinner, i18nConfig } from "wasedatime-ui"
-import i18next from "i18next"
+import { LoadingSpinner } from "wasedatime-ui"
 import { useTranslation } from "react-i18next"
 import { BrowserRouter, Routes, Route } from "react-router-dom"
 
 import App from "@app/App"
-import translationEN from "@app/constants/locales/en/translation.json"
-import translationJA from "@app/constants/locales/ja/translation.json"
+import "@app/utils/i18n"
 import { ThemeContext, ThemeProvider } from "@app/utils/theme-context"
 
-i18nConfig({
-  i18n: i18next,
-  customTranslations: {
-    [Lang.EN]: translationEN,
-    [Lang.JA]: translationJA,
-  },
-})
-
 const LoadingSpinnerContainer = () => {
   const { theme } = useContext(ThemeContext)
 

apps/campus/src/utils/i18n.ts

@@ -0,0 +1,40 @@
+import { initReactI18next } from "react-i18next"
+import i18next from "i18next"
+import { getCoreTranslation, getI18nLanguageDetector, getI18nHttpBackend, Lang } from "wasedatime-ui"
+import translationEN from "@app/constants/locales/en/translation.json"
+import translationJA from "@app/constants/locales/ja/translation.json"
+
+const resources = {
+  [Lang.EN]: {
+    translation: { ...getCoreTranslation(Lang.EN), ...translationEN },
+  },
+  [Lang.JA]: {
+    translation: { ...getCoreTranslation(Lang.JA), ...translationJA },
+  },
+}
+
+const detectorOptions = {
+  order: ["localStorage"],
+  lookupLocalStorage: "wasedatime-lng",
+  caches: ["localStorage"],
+}
+
+i18next
+  .use(getI18nHttpBackend())
+  .use(getI18nLanguageDetector())
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources,
+    fallbackLng: Lang.EN,
+    keySeparator: ".",
+    interpolation: {
+      // react already safes from xss
+      escapeValue: false,
+    },
+    // Configure the withNamespaces / NamespacesConsumer to
+    // not render the content until needed namespaces are loaded.
+    // react: {
+    //   wait: true,
+    // },
+    detection: detectorOptions,
+  })

apps/campus/src/wasedatime-campus.ts

@@ -1,22 +1,8 @@
 import React from "react"
-
-import { Lang, i18nConfig } from "wasedatime-ui"
-import i18next from "i18next"
 import ReactDOM from "react-dom"
 import singleSpaReact from "single-spa-react"
-
-import translationEN from "@app/constants/locales/en/translation.json"
-import translationJA from "@app/constants/locales/ja/translation.json"
 import Root from "@app/root.component"
 
-i18nConfig({
-  i18n: i18next,
-  customTranslations: {
-    [Lang.EN]: translationEN,
-    [Lang.JA]: translationJA,
-  },
-})
-
 const lifecycles = singleSpaReact({
   React,
   ReactDOM,

apps/feeds/components/FeedLink.tsx

@@ -113,15 +113,15 @@ const FeedLink = ({ name, feed, locale }: Props) => {
                 </p>
               </CardContent>
             </div>
-            <Hidden xsDown>
+            {/* <Hidden xsDown> */}
               <CardMedia
                 sx={{
                   width: 200,
                 }}
                 image={cover}
                 title="Feed Cover Image"
               />
-            </Hidden>
+            {/* </Hidden> */}
           </Card>
         </Link>
       </CardActionArea>

apps/feeds/pages copy/_app.tsx

@@ -2,16 +2,17 @@ import "../styles/globals.css"
 import "../styles/feed.css"
 import type { AppProps } from "next/app"
 import { useEffect } from "react"
+import type { NextComponentType } from "next";
 
-function MyApp({ Component, pageProps }: AppProps) {
-  useEffect(() => {
-    // Remove the server-side injected CSS.
-    const jssStyles = document.querySelector("#jss-server-side")
-    if (jssStyles) {
-      jssStyles.parentElement?.removeChild(jssStyles)
-    }
-  }, [])
+// function MyApp({ Component, pageProps }: AppProps) {
+//   useEffect(() => {
+//     // Remove the server-side injected CSS.
+//     const jssStyles = document.querySelector("#jss-server-side")
+//     if (jssStyles) {
+//       jssStyles.parentElement?.removeChild(jssStyles)
+//     }
+//   }, [])
 
-  return <Component {...pageProps} />
-}
-export default MyApp
+//   return <Component {...pageProps} /> 
+// }
+// export default MyApp

apps/feeds/pages copy/_document.tsx

@@ -14,10 +14,10 @@ export default class CustomDocument extends Document {
     const sheets = new ServerStyleSheets()
     const originalRenderPage = ctx.renderPage
 
-    ctx.renderPage = () =>
-      originalRenderPage({
-        enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
-      })
+    // ctx.renderPage = () =>
+    //   originalRenderPage({
+    //     enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
+    //   })
 
     const initialProps = await Document.getInitialProps(ctx)
     return {

apps/root/package.json

@@ -15,7 +15,7 @@
     "lint": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
     "local": "concurrently --kill-others \"pnpm start\" \"cd ../syllabus && pnpm start\" \"cd ../campus && pnpm start\" \"cd ../career && pnpm start\" \"cd ../blog && pnpm start\"",
-    "tailwind:build": "pnpx tailwind build -i ./src/styles/styles.css -o ./src/styles/tailwind-build-output.css"
+    "tailwind:build": "pnpx tailwindcss build -i ./src/styles/styles.css -o ./src/styles/tailwind-build-output.css"
   },
   "devDependencies": {
     "@babel/core": "7.18.2",
@@ -35,9 +35,9 @@
     "concurrently": "7.2.1",
     "cssnano": "5.1.11",
     "dotenv": "16.0.1",
+    "esbuild": "^0.18.6",
     "eslint": "8.17.0",
     "eslint-config-custom": "workspace:*",
-    "i18next": "21.8.9",
     "postcss": "8.4.14",
     "prettier": "2.6.2",
     "prettier-plugin-tailwindcss": "^0.2.8",
@@ -72,15 +72,15 @@
     "@types/styled-components": "5.1.25",
     "daisyui": "2.15.2",
     "history": "5.3.0",
-    "i18next": "21.8.9",
+    "i18next": "23.2.3",
     "localforage": "1.10.0",
     "lodash": "4.17.21",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-error-boundary": "3.1.4",
     "react-ga": "3.3.0",
     "react-helmet": "6.1.0",
-    "react-i18next": "11.17.0",
+    "react-i18next": "13.0.1",
     "react-responsive": "9.0.0-beta.10",
     "react-router-dom": "6.3.0",
     "react-vertical-timeline-component": "3.5.2",