Merge pull request #94 from alan412/consolidate_ui_strings

Prepare for consolidating UI strings

Author: alan412

docs/design.md

@@ -33,3 +33,6 @@
 ## Components
 * Every actuator is a component
 * Every sensor is a component
+
+# Localization 
+* This page describes easy ways to use the i18n support that I added: https://phrase.com/blog/posts/localizing-react-apps-with-i18next/

package-lock.json

@@ -10,11 +10,14 @@
     "@types/react-dom": "^19.0.2",
     "antd": "^5.22.1",
     "blockly": "^11.1.1",
+    "i18next": "^24.2.2",
+    "i18next-http-backend": "^3.0.2",
     "jszip": "^3.10.1",
     "lucide-react": "^0.460.0",
     "re-resizable": "^6.10.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-i18next": "^15.4.1",
     "react-syntax-highlighter": "^15.6.1",
     "web-vitals": "^2.1.4"
   },

package.json

@@ -0,0 +1,12 @@
+{
+    "mechanism_delete": "Delete Project",
+    "mechanism_rename": "Rename Project",
+    "mechanism_copy": "Copy Project",
+    "opmode_delete": "Delete Project",
+    "opmode_rename": "Rename Project",
+    "opmode_copy": "Copy Project",
+    "project_delete": "Delete Project",
+    "project_rename": "Rename Project",
+    "project_copy": "Copy Project",
+    "fail_list_modules": "Failed to load the list of modules."
+}

public/locales/en/translation.json

@@ -35,6 +35,8 @@ import {
   UploadOutlined,
 } from '@ant-design/icons';
 
+import { useTranslation } from "react-i18next";
+
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
@@ -117,6 +119,8 @@ const App: React.FC = () => {
   const PURPOSE_RENAME_MODULE = 'RenameModule';
   const PURPOSE_COPY_MODULE = 'CopyModule';
 
+  const { t } = useTranslation();
+
   const ignoreEffect = () => {
     if (!import.meta.env.MODE || import.meta.env.MODE === 'development') {
       // Development mode.
@@ -209,9 +213,9 @@ const App: React.FC = () => {
       } catch (e) {
         console.log('Failed to load the list of modules. Caught the following error...');
         console.log(e);
-        setAlertErrorMessage('Failed to load the list of modules.');
+        setAlertErrorMessage(t("fail_list_modules"));
         setAlertErrorVisible(true);
-        reject(new Error('Failed to load the list of modules.'));
+        reject(new Error(t("fail_list_modules")));
       }
     });
   };
@@ -308,17 +312,17 @@ const App: React.FC = () => {
 
     if (module != null) {
       if (module.moduleType == commonStorage.MODULE_TYPE_PROJECT) {
-        setRenameTooltip('Rename Project');
-        setCopyTooltip('Copy Project');
-        setDeleteTooltip('Delete Project');
+        setRenameTooltip(t("project_rename"));
+        setCopyTooltip(t("project_copy"));
+        setDeleteTooltip(t("project_delete"));
       } else if (module.moduleType == commonStorage.MODULE_TYPE_MECHANISM) {
-        setRenameTooltip('Rename Mechanism');
-        setCopyTooltip('Copy Mechanism');
-        setDeleteTooltip('Delete Mechanism');
+        setRenameTooltip(t("mechanism_rename"));
+        setCopyTooltip(t("mechanism_copy"));
+        setDeleteTooltip(t("mechanism_delete"));
       } else if (module.moduleType == commonStorage.MODULE_TYPE_OPMODE) {
-        setRenameTooltip('Rename OpMode');
-        setCopyTooltip('Copy OpMode');
-        setDeleteTooltip('Delete OpMode');
+        setRenameTooltip(t("opmode_rename"));
+        setCopyTooltip(t("opmode_copy"));
+        setDeleteTooltip(t("opmode_delete"));
       }
 
       storage.saveEntry('mostRecentModulePath', currentModulePath);

src/App.tsx

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2025 Porpoiseful LLC
+ *
+ * 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
+ *
+ *    https://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.
+ */
+
+/**
+ * @fileoverview Configuration for i18n
+ * @author [email protected] (Alan Smith)
+ * 
+ * This is mostly borrowed with a few adaptations from 
+ * https://phrase.com/blog/posts/localizing-react-apps-with-i18next/
+ */
+import i18n from "i18next";      
+import HttpApi from "i18next-http-backend";                
+import { initReactI18next } from "react-i18next";
+
+i18n
+  // Add backend as a plugin so we can load the needed translation at runtime
+  .use(HttpApi)
+  // Add React bindings as a plugin so it will re-render when language changes
+  .use(initReactI18next)
+  .init({
+    // Config options
+
+    // Specifies the default language (locale) used
+    // when a user visits our site for the first time.
+    lng: "en",
+
+    // Fallback locale used when a translation is missing.
+    fallbackLng: "en",
+
+    // Normally, we want `escapeValue: true` as it ensures that i18next escapes any code in
+    // translation messages, safeguarding against XSS (cross-site scripting) attacks. However,
+    // React does this escaping itself, so we turn it off in i18next.
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+export default i18n;

src/i18n/config.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import "./i18n/config.ts"
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(