Support i18n (#23)

README.md

@@ -17,7 +17,8 @@ to improve the velocity and quality of their teams' work.
 
 ## ✨ Features
 
-- Start of the art project manager [![Yarn 2](https://img.shields.io/badge/Yarn%202-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white)](https://yarnpkg.com/)
+- Multi-language support [![i18n](https://img.shields.io/badge/i18next-26A69A?style=for-the-badge&logo=i18next&logoColor=white)](https://react.i18next.com/getting-started)
+- Start of the art project manager [![Yarn 4](https://img.shields.io/badge/Yarn%204-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white)](https://yarnpkg.com/)
 - Fully automated CI/CD [![GH Action](https://img.shields.io/badge/GitHub%20Action-2088FF?style=for-the-badge&logo=githubactions&logoColor=white)](https://github.com/features/actions)
 
   - Code style checks

custom.d.ts

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright 2025 Jiaqi Liu. All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 declare module "*.svg" {
   const content: string;
   export default content;

docs/docs/redux.md

@@ -7,6 +7,14 @@ FastUI uses [Redux state management][Redux]
 [![Redux Badge](https://img.shields.io/badge/Redux-764ABC?logo=redux&logoColor=white&style=for-the-badge)][Redux]
 instead of [React state management][useState] for a much more maintainable decoupling of React components.
 
+:::tip[When is React state management better]
+
+We recommend using React state management when the state is scoped in a single node in DOM tree, because in this case
+Redux as a global management would be an overkill and React state management would not suffer
+[prop-drilling](https://react.qubitpi.org/learn/passing-data-deeply-with-context) at all
+
+:::
+
 The template has already been configured with 2 states
 
 1. a string variable named `myState1`

package.json

@@ -2,14 +2,15 @@
   "name": "fast-ui",
   "workspaces": [
     "./packages/fast-ui-app",
+    "./packages/fast-ui-i18n",
     "./packages/fast-ui-redux"
   ],
   "version": "0.1.0",
   "engines": {
     "node": ">=22.0.0"
   },
   "description": "React Template with common pre-defined components, such Redux and CI/CD",
-  "packageManager": "yarn@4.6.0",
+  "packageManager": "yarn@4.7.0",
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",

packages/fast-ui-app/src/index.tsx

@@ -16,6 +16,7 @@
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
+import { i18n } from "fast-ui-i18n";
 
 import * as Sentry from "@sentry/react";
 import { Provider } from "react-redux";
@@ -31,6 +32,8 @@ if (process.env.NODE_ENV === "production") {
   });
 }
 
+void i18n; // force a i18n load
+
 /* eslint-disable  @typescript-eslint/non-nullable-type-assertion-style */
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 root.render(

packages/fast-ui-i18n/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright 2025 Jiaqi Liu. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { default as i18n } from "./src/i18n";

packages/fast-ui-i18n/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "fast-ui-i18n",
+  "dependencies": {
+    "i18next": "^24.2.2",
+    "react-i18next": "^15.4.1"
+  }
+}

packages/fast-ui-i18n/src/i18n.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright 2025 Jiaqi Liu. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+export default i18n.use(initReactI18next).init({
+  resources: {
+    en: {
+      translation: {
+        Home: "Home",
+        Projects: "Projects",
+        Contact: "Contact",
+      },
+    },
+    zh: {
+      translation: {
+        Home: "主页",
+        Projects: "游学项目",
+        Contact: "联系我们",
+      },
+    },
+  },
+  lng: "en",
+  fallbackLng: "en",
+
+  interpolation: {
+    escapeValue: false,
+  },
+});

packages/fast-ui-redux/index.ts

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright 2025 Jiaqi Liu. All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 export { setMyState1, setMyState2, selectMyState1, selectMyState2 } from "./src/appSlice";
 
 export { useAppSelector, useAppDispatch } from "./src/hooks";

yarn.lock

@@ -1634,6 +1634,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.25.0":
+  version: 7.26.9
+  resolution: "@babel/runtime@npm:7.26.9"
+  dependencies:
+    regenerator-runtime: "npm:^0.14.0"
+  checksum: 10/08edd07d774eafbf157fdc8450ed6ddd22416fdd8e2a53e4a00349daba1b502c03ab7f7ad3ad3a7c46b9a24d99b5697591d0f852ee2f84642082ef7dda90b83d
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.22.15, @babel/template@npm:^7.3.3":
   version: 7.22.15
   resolution: "@babel/template@npm:7.22.15"
@@ -6232,6 +6241,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"fast-ui-i18n@workspace:packages/fast-ui-i18n":
+  version: 0.0.0-use.local
+  resolution: "fast-ui-i18n@workspace:packages/fast-ui-i18n"
+  dependencies:
+    i18next: "npm:^24.2.2"
+    react-i18next: "npm:^15.4.1"
+  languageName: unknown
+  linkType: soft
+
 "fast-ui-redux@workspace:packages/fast-ui-redux":
   version: 0.0.0-use.local
   resolution: "fast-ui-redux@workspace:packages/fast-ui-redux"
@@ -7009,6 +7027,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"html-parse-stringify@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "html-parse-stringify@npm:3.0.1"
+  dependencies:
+    void-elements: "npm:3.1.0"
+  checksum: 10/8743b76cc50e46d1956c1ad879d18eb9613b0d2d81e24686d633f9f69bb26b84676f64a926973de793cca479997017a63219278476d617b6c42d68246d7c07fe
+  languageName: node
+  linkType: hard
+
 "html-webpack-plugin@npm:^5.5.4":
   version: 5.5.4
   resolution: "html-webpack-plugin@npm:5.5.4"
@@ -7177,6 +7204,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"i18next@npm:^24.2.2":
+  version: 24.2.2
+  resolution: "i18next@npm:24.2.2"
+  dependencies:
+    "@babel/runtime": "npm:^7.23.2"
+  peerDependencies:
+    typescript: ^5
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10/f66ed9e56d9412e59502f5df39163631daf9f1264774732fb21edbd66a528ca7a6b67dc2e2aec95683c6c7956e42c651587a54bd8ee082bd12008880ce6cd326
+  languageName: node
+  linkType: hard
+
 "iconv-lite@npm:0.4.24":
   version: 0.4.24
   resolution: "iconv-lite@npm:0.4.24"
@@ -10022,6 +10063,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-i18next@npm:^15.4.1":
+  version: 15.4.1
+  resolution: "react-i18next@npm:15.4.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.25.0"
+    html-parse-stringify: "npm:^3.0.1"
+  peerDependencies:
+    i18next: ">= 23.2.3"
+    react: ">= 16.8.0"
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+    react-native:
+      optional: true
+  checksum: 10/fd1f2dbffd579d6ea35d5510734f997c11d4a09372a24db194daf5f3201a0f536992d558aa58863d20da4002994d1b6e6bd35cd1eab623f90afb97ea783a01b1
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.12.0 || ^17.0.0 || ^18.0.0, react-is@npm:^18.2.0":
   version: 18.2.0
   resolution: "react-is@npm:18.2.0"
@@ -11889,6 +11948,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"void-elements@npm:3.1.0":
+  version: 3.1.0
+  resolution: "void-elements@npm:3.1.0"
+  checksum: 10/0390f818107fa8fce55bb0a5c3f661056001c1d5a2a48c28d582d4d847347c2ab5b7f8272314cac58acf62345126b6b09bea623a185935f6b1c3bbce0dfd7f7f
+  languageName: node
+  linkType: hard
+
 "w3c-hr-time@npm:^1.0.2":
   version: 1.0.2
   resolution: "w3c-hr-time@npm:1.0.2"