Feat/left menu i18n (#407)

* feat(i18n): add left menu i18n

* chore(i18n): add missing ComingSoon

* chore(i18n): update docs

* fix: lint

.eslintrc.json

@@ -103,7 +103,8 @@
                                     "datasource:db-services",
                                     "components:ui",
                                     "components:icons",
-                                    "library:feature-flags"
+                                    "library:feature-flags",
+                                    "datasource:i18n"
                                 ]
                             },
                             {

libs/components/editor-plugins/src/menu/left-menu/LeftMenu.tsx

@@ -1,14 +1,15 @@
-import { useMemo } from 'react';
-import { Virgo, PluginHooks } from '@toeverything/framework/virgo';
-import { Cascader, CascaderItemProps } from '@toeverything/components/ui';
-import { Protocol } from '@toeverything/datasource/db-service';
-import { TurnIntoMenu } from './TurnIntoMenu';
 import {
     AddViewIcon,
     DeleteCashBinIcon,
     TurnIntoIcon,
     UngroupIcon,
 } from '@toeverything/components/icons';
+import { Cascader, CascaderItemProps } from '@toeverything/components/ui';
+import { Protocol } from '@toeverything/datasource/db-service';
+import { useTranslation } from '@toeverything/datasource/i18n';
+import { PluginHooks, Virgo } from '@toeverything/framework/virgo';
+import { useMemo } from 'react';
+import { TurnIntoMenu } from './TurnIntoMenu';
 
 interface LeftMenuProps {
     anchorEl?: Element;
@@ -21,10 +22,11 @@ interface LeftMenuProps {
 
 export function LeftMenu(props: LeftMenuProps) {
     const { editor, anchorEl, hooks, blockId, onClose } = props;
+    const { t } = useTranslation();
     const menu: CascaderItemProps[] = useMemo(
         () => [
             {
-                title: 'Delete',
+                title: t('Delete'),
                 callback: () => {
                     editor.commands.blockCommands.removeBlock(blockId);
                 },
@@ -32,7 +34,7 @@ export function LeftMenu(props: LeftMenuProps) {
                 icon: <DeleteCashBinIcon />,
             },
             {
-                title: 'Turn into',
+                title: t('Turn into'),
                 subItems: [],
                 children: (
                     <TurnIntoMenu
@@ -48,7 +50,7 @@ export function LeftMenu(props: LeftMenuProps) {
                 icon: <TurnIntoIcon />,
             },
             {
-                title: 'Add A Below Block',
+                title: t('Add A Below Block'),
                 icon: <AddViewIcon />,
                 callback: async () => {
                     const block = await editor.getBlockById(blockId);
@@ -66,14 +68,14 @@ export function LeftMenu(props: LeftMenuProps) {
                 },
             },
             {
-                title: 'Divide Here As A New Group',
+                title: t('Divide Here As A New Group'),
                 icon: <UngroupIcon />,
                 callback: () => {
                     editor.commands.blockCommands.splitGroupFromBlock(blockId);
                 },
             },
         ],
-        [editor, hooks, blockId, onClose]
+        [t, editor, hooks, blockId, onClose]
     );
 
     // const filterItems = (

libs/components/layout/src/settings-sidebar/Layout/LayoutSettings.tsx

@@ -1,9 +1,11 @@
 import { styled } from '@toeverything/components/ui';
+import { useTranslation } from '@toeverything/datasource/i18n';
 
 export const LayoutSettings = () => {
+    const { t } = useTranslation();
     return (
         <StyledText>
-            <p>Layout Settings Coming Soon...</p>
+            <p>{t('ComingSoon')}</p>
         </StyledText>
     );
 };

libs/datasource/i18n/README.md

@@ -2,10 +2,13 @@
 
 ## Usages
 
+-   Update missing translations into the base resources, a.k.a the `src/resources/en.json`
+-   Replace literal text with translation keys
+
 ```tsx
 import { useTranslation } from '@toeverything/datasource/i18n';
 
-// base.json
+// src/resources/en.json
 // {
 //     'Text': 'some text',
 //     'Switch to language': 'Switch to {{language}}', // <- you can interpolation by curly brackets
@@ -33,7 +36,14 @@ const App = () => {
 };
 ```
 
-## How to sync translations
+## How the i18n workflow works?
+
+-   When the `src/resources/en.json`(base language) updated and merged to the develop branch, will trigger the `languages-sync` action.
+-   The `languages-sync` action will check the base language and add missing translations to the Tolgee platform.
+-   This way, partners from the community can update the translations.
+-   Finally, the `languages-download` action will regularly download the latest translation resources from the Tolgee platform.
+
+## How to sync translations manually
 
 -   Set token as environment variable
 

libs/datasource/i18n/project.json

@@ -2,7 +2,7 @@
     "$schema": "../../../node_modules/nx/schemas/project-schema.json",
     "sourceRoot": "libs/datasource/i18n/src",
     "projectType": "library",
-    "tags": ["datasource"],
+    "tags": ["datasource:i18n"],
     "targets": {
         "build": {
             "executor": "@nrwl/web:rollup",

libs/datasource/i18n/src/resources/en.json

@@ -20,5 +20,9 @@
     "Import Workspace": "Import Workspace",
     "Export Workspace": "Export Workspace",
     "Last edited by": "Last edited by {{name}}",
-    "Logout": "Logout"
+    "Logout": "Logout",
+    "Delete": "Delete",
+    "Turn into": "Turn into",
+    "Add A Below Block": "Add A Below Block",
+    "Divide Here As A New Group": "Divide Here As A New Group"
 }