From f81459d4c0418b75cb4b2d96708fd909aba04f7f Mon Sep 17 00:00:00 2001 From: Whitewater Date: Mon, 12 Sep 2022 19:17:59 +0800 Subject: [PATCH] Feat/left menu i18n (#407) * feat(i18n): add left menu i18n * chore(i18n): add missing ComingSoon * chore(i18n): update docs * fix: lint --- .eslintrc.json | 3 ++- .../src/menu/left-menu/LeftMenu.tsx | 22 ++++++++++--------- .../Layout/LayoutSettings.tsx | 4 +++- libs/datasource/i18n/README.md | 14 ++++++++++-- libs/datasource/i18n/project.json | 2 +- libs/datasource/i18n/src/resources/en.json | 6 ++++- 6 files changed, 35 insertions(+), 16 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 549f14aed9..527de2b1b7 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -103,7 +103,8 @@ "datasource:db-services", "components:ui", "components:icons", - "library:feature-flags" + "library:feature-flags", + "datasource:i18n" ] }, { diff --git a/libs/components/editor-plugins/src/menu/left-menu/LeftMenu.tsx b/libs/components/editor-plugins/src/menu/left-menu/LeftMenu.tsx index 043b9a77c6..731b6ea42e 100644 --- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenu.tsx +++ b/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: , }, { - title: 'Turn into', + title: t('Turn into'), subItems: [], children: ( , }, { - title: 'Add A Below Block', + title: t('Add A Below Block'), icon: , 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: , callback: () => { editor.commands.blockCommands.splitGroupFromBlock(blockId); }, }, ], - [editor, hooks, blockId, onClose] + [t, editor, hooks, blockId, onClose] ); // const filterItems = ( diff --git a/libs/components/layout/src/settings-sidebar/Layout/LayoutSettings.tsx b/libs/components/layout/src/settings-sidebar/Layout/LayoutSettings.tsx index 3d6ad7fe41..5019cb951a 100644 --- a/libs/components/layout/src/settings-sidebar/Layout/LayoutSettings.tsx +++ b/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 ( -

Layout Settings Coming Soon...

+

{t('ComingSoon')}

 ); }; diff --git a/libs/datasource/i18n/README.md b/libs/datasource/i18n/README.md index c454be380a..31ab1d66a1 100644 --- a/libs/datasource/i18n/README.md +++ b/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 diff --git a/libs/datasource/i18n/project.json b/libs/datasource/i18n/project.json index bac263e222..8535bfb237 100644 --- a/libs/datasource/i18n/project.json +++ b/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", diff --git a/libs/datasource/i18n/src/resources/en.json b/libs/datasource/i18n/src/resources/en.json index e243d71db1..aae42bd05d 100644 --- a/libs/datasource/i18n/src/resources/en.json +++ b/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" }