Merge pull request #110 from drawdb-io/i18n

Configure i18n and add simplified Chinese (#99)
drawdb-io · May 17, 2024 · 002e240 · 002e240
2 parents 0366bb8 + 4e93212
commit 002e240
Show file tree

Hide file tree

Showing 54 changed files with 1,835 additions and 594 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,13 +24,16 @@
     "file-saver": "^2.0.5",
     "framer-motion": "^10.18.0",
     "html-to-image": "^1.11.11",
+    "i18next": "^23.11.4",
+    "i18next-browser-languagedetector": "^8.0.0",
     "jsonschema": "^1.4.1",
     "jspdf": "^2.5.1",
     "lexical": "^0.12.5",
     "node-sql-parser": "^5.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "^4.4.1",
+    "react-i18next": "^14.1.1",
     "react-router-dom": "^6.21.0",
     "url": "^0.11.1"
   },

diff --git a/src/components/ColorPalette.jsx → src/components/ColorPicker.jsx b/src/components/ColorPalette.jsx → src/components/ColorPicker.jsx
@@ -1,18 +1,20 @@
 import { Button } from "@douyinfe/semi-ui";
 import { IconCheckboxTick } from "@douyinfe/semi-icons";
 import { tableThemes } from "../data/constants";
+import { useTranslation } from "react-i18next";
 
 export default function ColorPalette({
   currentColor,
   onClearColor,
   onPickColor,
 }) {
+  const { t } = useTranslation();
   return (
     <div>
       <div className="flex justify-between items-center p-2">
-        <div className="font-medium">Theme</div>
+        <div className="font-medium">{t("theme")}</div>
         <Button type="tertiary" size="small" onClick={onClearColor}>
-          Clear
+          {t("clear")}
         </Button>
       </div>
       <hr />

diff --git a/src/components/EditorCanvas/Area.jsx b/src/components/EditorCanvas/Area.jsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Button, Popover, Input, Toast } from "@douyinfe/semi-ui";
+import { Button, Popover, Input } from "@douyinfe/semi-ui";
 import { IconEdit, IconDeleteStroked } from "@douyinfe/semi-icons";
 import {
   Tab,
@@ -17,7 +17,8 @@ import {
   useSaveState,
   useTransform,
 } from "../../hooks";
-import ColorPalette from "../ColorPalette";
+import ColorPalette from "../ColorPicker";
+import { useTranslation } from "react-i18next";
 
 export default function Area({ data, onMouseDown, setResize, setInitCoords }) {
   const [hovered, setHovered] = useState(false);
@@ -191,14 +192,15 @@ function EditPopoverContent({ data }) {
   const { setSaveState } = useSaveState();
   const { updateArea, deleteArea } = useAreas();
   const { setUndoStack, setRedoStack } = useUndoRedo();
+  const { t } = useTranslation();
 
   return (
     <div className="popover-theme">
-      <div className="font-semibold mb-2 ms-1">Edit subject area</div>
+      <div className="font-semibold mb-2 ms-1">{t("edit")}</div>
       <div className="w-[280px] flex items-center mb-2">
         <Input
           value={data.name}
-          placeholder="Name"
+          placeholder={t("name")}
           className="me-2"
           onChange={(value) => updateArea(data.id, { name: value })}
           onFocus={(e) => setEditField({ name: e.target.value })}
@@ -212,7 +214,10 @@ function EditPopoverContent({ data }) {
                 aid: data.id,
                 undo: editField,
                 redo: { name: e.target.value },
-                message: `Edit area name to ${e.target.value}`,
+                message: t("edit_area", {
+                  areaName: e.target.value,
+                  extra: "[name]",
+                }),
               },
             ]);
             setRedoStack([]);
@@ -232,7 +237,10 @@ function EditPopoverContent({ data }) {
                       aid: data.id,
                       undo: { color: data.color },
                       redo: { color: c },
-                      message: `Edit area color to ${c}`,
+                      message: t("edit_area", {
+                        areaName: data.name,
+                        extra: "[color]",
+                      }),
                     },
                   ]);
                   setRedoStack([]);
@@ -263,12 +271,9 @@ function EditPopoverContent({ data }) {
           icon={<IconDeleteStroked />}
           type="danger"
           block
-          onClick={() => {
-            Toast.success(`Area deleted!`);
-            deleteArea(data.id);
-          }}
+          onClick={() => deleteArea(data.id, true)}
         >
-          Delete
+          {t("delete")}
         </Button>
       </div>
     </div>

diff --git a/src/components/EditorCanvas/Canvas.jsx b/src/components/EditorCanvas/Canvas.jsx
@@ -20,8 +20,11 @@ import {
   useNotes,
   useLayout,
 } from "../../hooks";
+import { useTranslation } from "react-i18next";
+import { diagram } from "../../data/heroDiagram";
 
 export default function Canvas() {
+  const { t } = useTranslation();
   const { tables, updateTable, relationships, addRelationship } = useTables();
   const { areas, updateArea } = useAreas();
   const { notes, updateNote } = useNotes();
@@ -278,7 +281,10 @@ export default function Canvas() {
           toX: info.x,
           toY: info.y,
           id: dragging.id,
-          message: `Move ${info.name} to (${info.x}, ${info.y})`,
+          message: t("move_element", {
+            coords: `(${info.x}, ${info.y})`,
+            name: info.name,
+          }),
         },
       ]);
       setRedoStack([]);
@@ -291,7 +297,10 @@ export default function Canvas() {
           action: Action.PAN,
           undo: { x: panning.x, y: panning.y },
           redo: transform.pan,
-          message: `Move diagram to (${transform.pan?.x}, ${transform.pan?.y})`,
+          message: t("move_element", {
+            coords: `(${transform?.pan.x}, ${transform?.pan.y})`,
+            name: diagram,
+          }),
         },
       ]);
       setRedoStack([]);
@@ -321,7 +330,10 @@ export default function Canvas() {
             height: initCoords.height,
           },
           redo: areas[areaResize.id],
-          message: `Resize area`,
+          message: t("edit_area", {
+            areaName: areas[areaResize.id].name,
+            extra: "[resize]",
+          }),
         },
       ]);
       setRedoStack([]);
@@ -350,7 +362,7 @@ export default function Canvas() {
       tables[linkingLine.startTableId].fields[linkingLine.startFieldId].type !==
       tables[hoveredTable.tableId].fields[hoveredTable.field].type
     ) {
-      Toast.info("Cannot connect");
+      Toast.info(t("connot_connect"));
       return;
     }
     if (

diff --git a/src/components/EditorCanvas/Note.jsx b/src/components/EditorCanvas/Note.jsx
@@ -6,7 +6,7 @@ import {
   State,
   noteThemes,
 } from "../../data/constants";
-import { Input, Button, Popover, Toast } from "@douyinfe/semi-ui";
+import { Input, Button, Popover } from "@douyinfe/semi-ui";
 import {
   IconEdit,
   IconDeleteStroked,
@@ -19,6 +19,7 @@ import {
   useNotes,
   useSaveState,
 } from "../../hooks";
+import { useTranslation } from "react-i18next";
 
 export default function Note({ data, onMouseDown }) {
   const w = 180;
@@ -27,6 +28,7 @@ export default function Note({ data, onMouseDown }) {
   const [editField, setEditField] = useState({});
   const [hovered, setHovered] = useState(false);
   const { layout } = useLayout();
+  const { t } = useTranslation();
   const { setSaveState } = useSaveState();
   const { updateNote, deleteNote } = useNotes();
   const { setUndoStack, setRedoStack } = useUndoRedo();
@@ -54,7 +56,10 @@ export default function Note({ data, onMouseDown }) {
         nid: data.id,
         undo: editField,
         redo: { content: e.target.value, height: newHeight },
-        message: `Edit note content to "${e.target.value}"`,
+        message: t("edit_note", {
+          noteTitle: e.target.value,
+          extra: "[content]",
+        }),
       },
     ]);
     setRedoStack([]);
@@ -168,11 +173,11 @@ export default function Note({ data, onMouseDown }) {
                   stopPropagation
                   content={
                     <div className="popover-theme">
-                      <div className="font-semibold mb-2 ms-1">Edit note</div>
+                      <div className="font-semibold mb-2 ms-1">{t("edit")}</div>
                       <div className="w-[280px] flex items-center mb-2">
                         <Input
                           value={data.title}
-                          placeholder="Title"
+                          placeholder={t("title")}
                           className="me-2"
                           onChange={(value) =>
                             updateNote(data.id, { title: value })
@@ -190,7 +195,10 @@ export default function Note({ data, onMouseDown }) {
                                 nid: data.id,
                                 undo: editField,
                                 redo: { title: e.target.value },
-                                message: `Edit note title to "${e.target.value}"`,
+                                message: t("edit_note", {
+                                  noteTitle: e.target.value,
+                                  extra: "[title]",
+                                }),
                               },
                             ]);
                             setRedoStack([]);
@@ -199,7 +207,9 @@ export default function Note({ data, onMouseDown }) {
                         <Popover
                           content={
                             <div className="popover-theme">
-                              <div className="font-medium mb-1">Theme</div>
+                              <div className="font-medium mb-1">
+                                {t("theme")}
+                              </div>
                               <hr />
                               <div className="py-3">
                                 {noteThemes.map((c) => (
@@ -216,7 +226,10 @@ export default function Note({ data, onMouseDown }) {
                                           nid: data.id,
                                           undo: { color: data.color },
                                           redo: { color: c },
-                                          message: `Edit note color to ${c}`,
+                                          message: t("edit_note", {
+                                            noteTitle: data.title,
+                                            extra: "[color]",
+                                          }),
                                         },
                                       ]);
                                       setRedoStack([]);
@@ -249,12 +262,9 @@ export default function Note({ data, onMouseDown }) {
                           icon={<IconDeleteStroked />}
                           type="danger"
                           block
-                          onClick={() => {
-                            Toast.success(`Note deleted!`);
-                            deleteNote(data.id);
-                          }}
+                          onClick={() => deleteNote(data.id, true)}
                         >
-                          Delete
+                          {t("delete")}
                         </Button>
                       </div>
                     </div>