Add i18n support with Chinese translations; based on i18n work by songfei <songfei.org@qq.com>

Author: bobnik

package-lock.json

@@ -20,6 +20,8 @@
     "d3-delaunay": "^6.0.4",
     "d3-fisheye": "^2.1.2",
     "gcode-toolpath": "^3.0.0",
+    "i18next": "^24.2.3",
+    "i18next-browser-languagedetector": "^8.0.4",
     "javascript-algorithms": "0.0.5",
     "kdbush": "^4.0.2",
     "konva": "^10.0.12",
@@ -38,6 +40,7 @@
     "react-dom": "^19.2.0",
     "react-error-boundary": "^6.0.0",
     "react-ga4": "^2.1.0",
+    "react-i18next": "^15.4.1",
     "react-icons": "^5.5.0",
     "react-konva": "^19.2.1",
     "react-redux": "^9.2.0",

package.json

@@ -1,4 +1,5 @@
 import React from "react"
+import { useTranslation } from "react-i18next"
 import Col from "react-bootstrap/Col"
 import Row from "react-bootstrap/Row"
 import Form from "react-bootstrap/Form"
@@ -13,6 +14,7 @@ const CheckboxOption = ({
   onChange,
   label = true,
 }) => {
+  const { t } = useTranslation()
   const option = options[optionKey]
   const visible =
     option.isVisible === undefined ? true : option.isVisible(model, data)
@@ -36,7 +38,7 @@ const CheckboxOption = ({
             htmlFor="options-step"
             className="mb-0"
           >
-            {option.title}
+            {t(option.title)}
           </Form.Label>
         )}
       </Col>

src/components/CheckboxOption.js

@@ -1,6 +1,7 @@
 /* global document */
 
 import React from "react"
+import { useTranslation } from "react-i18next"
 import Col from "react-bootstrap/Col"
 import Row from "react-bootstrap/Row"
 import Form from "react-bootstrap/Form"
@@ -14,6 +15,7 @@ const DropdownOption = ({
   onChange,
   index,
 }) => {
+  const { t } = useTranslation()
   const option = options[optionKey]
   const currentChoice = data[optionKey]
 
@@ -24,10 +26,10 @@ const DropdownOption = ({
 
   choices = Array.isArray(choices)
     ? choices.map((choice) => {
-        return { value: choice, label: choice }
+        return { value: choice, label: t(choice) }
       })
     : Object.keys(choices).map((key) => {
-        return { value: key, label: choices[key] }
+        return { value: key, label: t(choices[key]) }
       })
   const currentLabel = (
     choices.find((choice) => choice.value == currentChoice) || choices[0]
@@ -57,7 +59,7 @@ const DropdownOption = ({
           className="m-0"
           htmlFor="options-dropdown"
         >
-          {option.title}
+          {t(option.title)}
         </Form.Label>
       </Col>
 

src/components/DropdownOption.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from "react"
+import { useTranslation } from "react-i18next"
 import Col from "react-bootstrap/Col"
 import Row from "react-bootstrap/Row"
 import Form from "react-bootstrap/Form"
@@ -16,6 +17,7 @@ const InputOption = ({
   label = true,
 }) => {
   inputRef ||= useRef()
+  const { t } = useTranslation()
   const [value, setValue] = useState(data[optionKey])
   const shiftKeyPressed = useKeyPress("Shift", inputRef)
 
@@ -109,7 +111,7 @@ const InputOption = ({
               htmlFor={`option-${optionKey}`}
               className="mb-0"
             >
-              {title}
+              {t(title)}
             </Form.Label>
           )}
         </Col>
@@ -130,7 +132,7 @@ const InputOption = ({
             className="me-2 mb-0"
             style={{ width: "22px" }}
           >
-            {title}
+            {t(title)}
           </Form.Label>
         )}
         {renderedInput}

src/components/InputOption.js

@@ -1,11 +1,13 @@
 import React from "react"
+import { useTranslation } from "react-i18next"
 import Col from "react-bootstrap/Col"
 import Row from "react-bootstrap/Row"
 import Form from "react-bootstrap/Form"
 import ToggleButton from "react-bootstrap/ToggleButton"
 import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup"
 
 const QuadrantButtonsOption = (props) => {
+  const { t } = useTranslation()
   const option = props.options[props.optionKey]
   const { data } = props
   const value = data[props.optionKey]
@@ -22,7 +24,7 @@ const QuadrantButtonsOption = (props) => {
         sm={5}
         className="mb-1"
       >
-        <Form.Label className="m-0">{option.title}</Form.Label>
+        <Form.Label className="m-0">{t(option.title)}</Form.Label>
       </Col>
 
       <Col
@@ -45,7 +47,7 @@ const QuadrantButtonsOption = (props) => {
               className="px-4"
               style={{ borderRadius: 0 }}
             >
-              upper left
+              {t("upper left")}
             </ToggleButton>
             <ToggleButton
               variant="light"
@@ -54,7 +56,7 @@ const QuadrantButtonsOption = (props) => {
               className="px-4"
               style={{ borderRadius: 0 }}
             >
-              upper right
+              {t("upper right")}
             </ToggleButton>
             <ToggleButton
               variant="light"
@@ -63,7 +65,7 @@ const QuadrantButtonsOption = (props) => {
               className="px-4"
               style={{ borderRadius: 0 }}
             >
-              lower left
+              {t("lower left")}
             </ToggleButton>
             <ToggleButton
               variant="light"
@@ -72,7 +74,7 @@ const QuadrantButtonsOption = (props) => {
               className="px-4"
               style={{ borderRadius: 0 }}
             >
-              lower right
+              {t("lower right")}
             </ToggleButton>
           </ToggleButtonGroup>
         </div>

src/components/QuadrantButtonsOption.js

@@ -1,5 +1,6 @@
 import Slider from "rc-slider"
 import React, { useState, useEffect } from "react"
+import { useTranslation } from "react-i18next"
 import Col from "react-bootstrap/Col"
 import Row from "react-bootstrap/Row"
 import Form from "react-bootstrap/Form"
@@ -12,6 +13,7 @@ const SliderOption = ({
   model,
   label = true,
 }) => {
+  const { t } = useTranslation()
   const [value, setValue] = useState(data[optionKey])
 
   useEffect(() => {
@@ -114,7 +116,7 @@ const SliderOption = ({
             htmlFor={`option-${optionKey}`}
             className="mb-0"
           >
-            {title}
+            {t(title)}
           </Form.Label>
         )}
       </Col>

src/components/SliderOption.js

@@ -1,11 +1,13 @@
 import React from "react"
+import { useTranslation } from "react-i18next"
 import Col from "react-bootstrap/Col"
 import Row from "react-bootstrap/Row"
 import Form from "react-bootstrap/Form"
 import ToggleButton from "react-bootstrap/ToggleButton"
 import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup"
 
 const ToggleButtonOption = (props) => {
+  const { t } = useTranslation()
   const option = props.options[props.optionKey]
   const { data } = props
   const model = props.model || data
@@ -27,7 +29,7 @@ const ToggleButtonOption = (props) => {
   return (
     <Row className={"align-items-center mb-1" + (visible ? "" : " d-none")}>
       <Col sm={5}>
-        <Form.Label className="m-0">{option.title}</Form.Label>
+        <Form.Label className="m-0">{t(option.title)}</Form.Label>
       </Col>
 
       <Col sm={7}>
@@ -48,7 +50,7 @@ const ToggleButtonOption = (props) => {
                 variant="light"
                 value={choice}
               >
-                {choice}
+                {t(choice)}
               </ToggleButton>
             )
           })}

src/components/ToggleButtonOption.js

@@ -1,4 +1,5 @@
 import React from "react"
+import { useTranslation } from "react-i18next"
 import Container from "react-bootstrap/Container"
 import Row from "react-bootstrap/Row"
 import Col from "react-bootstrap/Col"
@@ -9,6 +10,8 @@ import { SANDIFY_VERSION } from "@/features/app/appSlice"
 import "./About.scss"
 
 const About = () => {
+  const { t } = useTranslation()
+
   return (
     <footer className="p-4">
       <Container
@@ -27,9 +30,7 @@ const About = () => {
             >
               v{SANDIFY_VERSION}
             </div>
-            <div className="tagline mb-2">
-              create patterns for robots that draw in sand with ball bearings
-            </div>
+            <div className="tagline mb-2">{t("about.tagline")}</div>
             <p>
               Sandify turns your cold, empty-hearted, emotionless sand tables
               into cold, empty-hearted, emotionless sand table robots with