From 7dde848d0c093616816b5c32a4685f636ba0b90e Mon Sep 17 00:00:00 2001 From: Juan Picado Date: Thu, 16 Sep 2021 21:46:56 +0200 Subject: [PATCH] refactor: replace flag icons with library (#2439) * feat: simplify i18n translations config and flags * fix icons * lint * update test --- crowdin.yaml | 2 +- packages/plugins/ui-theme/i18n/config.ts | 94 ---- packages/plugins/ui-theme/package.json | 5 +- packages/plugins/ui-theme/src/App/App.tsx | 2 +- .../ui-theme/src/App/Footer/Footer.tsx | 51 +- .../Footer/__snapshots__/Footer.test.tsx.snap | 520 +++++++----------- .../ui-theme/src/App/Header/Header.test.tsx | 2 +- .../src/App/Header/LanguageSwitch.tsx | 46 +- .../ui-theme/src/components/Icons/Austria.tsx | 23 - .../ui-theme/src/components/Icons/Brazil.tsx | 44 -- .../ui-theme/src/components/Icons/China.tsx | 33 -- .../ui-theme/src/components/Icons/Czech.tsx | 21 - .../ui-theme/src/components/Icons/France.tsx | 27 - .../ui-theme/src/components/Icons/Germany.tsx | 27 - .../ui-theme/src/components/Icons/India.tsx | 44 -- .../ui-theme/src/components/Icons/Japan.tsx | 23 - .../ui-theme/src/components/Icons/Khmer.tsx | 40 -- .../src/components/Icons/Nicaragua.tsx | 66 --- .../ui-theme/src/components/Icons/Russia.tsx | 27 - .../ui-theme/src/components/Icons/Spain.tsx | 43 -- .../ui-theme/src/components/Icons/Taiwan.tsx | 25 - .../ui-theme/src/components/Icons/Turkey.tsx | 23 - .../ui-theme/src/components/Icons/Ukraine.tsx | 30 - .../ui-theme/src/components/Icons/Usa.tsx | 34 -- .../ui-theme/src/components/Icons/index.ts | 18 +- .../src/design-tokens/ThemeContext.ts | 2 +- packages/plugins/ui-theme/src/i18n/config.ts | 31 ++ .../ui-theme/src/i18n/enabledLanguages.ts | 19 + .../{ => src}/i18n/translations/cs-CZ.json | 0 .../{ => src}/i18n/translations/de-DE.json | 0 .../{ => src}/i18n/translations/en-US.json | 0 .../{ => src}/i18n/translations/es-ES.json | 0 .../{ => src}/i18n/translations/fr-FR.json | 0 .../{ => src}/i18n/translations/ja-JP.json | 0 .../{ => src}/i18n/translations/km-KH.json | 0 .../{ => src}/i18n/translations/pt-BR.json | 0 .../{ => src}/i18n/translations/ru-RU.json | 0 .../{ => src}/i18n/translations/tr-TR.json | 0 .../{ => src}/i18n/translations/uk-UA.json | 0 .../{ => src}/i18n/translations/zh-CN.json | 0 .../{ => src}/i18n/translations/zh-TW.json | 0 .../Versions/Versions.test.tsx | 2 +- .../src/pages/Version/Version.test.tsx | 2 +- .../src/utils/test-react-testing-library.tsx | 2 +- packages/plugins/ui-theme/tsconfig.json | 2 +- pnpm-lock.yaml | 24 +- 46 files changed, 330 insertions(+), 1024 deletions(-) delete mode 100644 packages/plugins/ui-theme/i18n/config.ts delete mode 100644 packages/plugins/ui-theme/src/components/Icons/Austria.tsx delete mode 100644 packages/plugins/ui-theme/src/components/Icons/Brazil.tsx delete mode 100644 packages/plugins/ui-theme/src/components/Icons/China.tsx delete mode 100644 packages/plugins/ui-theme/src/components/Icons/Czech.tsx delete mode 100644 packages/plugins/ui-theme/src/components/Icons/France.tsx delete mode 100644 packages/plugins/ui-theme/src/components/Icons/Germany.tsx delete mode 100644 packages/plugins/ui-theme/src/components/Icons/India.tsx delete mode 100644 packages/plugins/ui-theme/src/components/Icons/Japan.tsx delete mode 100644 packages/plugins/ui-theme/src/components/Icons/Khmer.tsx delete mode 100644 packages/plugins/ui-theme/src/components/Icons/Nicaragua.tsx delete mode 100644 packages/plugins/ui-theme/src/components/Icons/Russia.tsx delete mode 100644 packages/plugins/ui-theme/src/components/Icons/Spain.tsx delete mode 100644 packages/plugins/ui-theme/src/components/Icons/Taiwan.tsx delete mode 100644 packages/plugins/ui-theme/src/components/Icons/Turkey.tsx delete mode 100644 packages/plugins/ui-theme/src/components/Icons/Ukraine.tsx delete mode 100644 packages/plugins/ui-theme/src/components/Icons/Usa.tsx create mode 100644 packages/plugins/ui-theme/src/i18n/config.ts create mode 100644 packages/plugins/ui-theme/src/i18n/enabledLanguages.ts rename packages/plugins/ui-theme/{ => src}/i18n/translations/cs-CZ.json (100%) rename packages/plugins/ui-theme/{ => src}/i18n/translations/de-DE.json (100%) rename packages/plugins/ui-theme/{ => src}/i18n/translations/en-US.json (100%) rename packages/plugins/ui-theme/{ => src}/i18n/translations/es-ES.json (100%) rename packages/plugins/ui-theme/{ => src}/i18n/translations/fr-FR.json (100%) rename packages/plugins/ui-theme/{ => src}/i18n/translations/ja-JP.json (100%) rename packages/plugins/ui-theme/{ => src}/i18n/translations/km-KH.json (100%) rename packages/plugins/ui-theme/{ => src}/i18n/translations/pt-BR.json (100%) rename packages/plugins/ui-theme/{ => src}/i18n/translations/ru-RU.json (100%) rename packages/plugins/ui-theme/{ => src}/i18n/translations/tr-TR.json (100%) rename packages/plugins/ui-theme/{ => src}/i18n/translations/uk-UA.json (100%) rename packages/plugins/ui-theme/{ => src}/i18n/translations/zh-CN.json (100%) rename packages/plugins/ui-theme/{ => src}/i18n/translations/zh-TW.json (100%) diff --git a/crowdin.yaml b/crowdin.yaml index 923d935da..c6a2cd3ba 100644 --- a/crowdin.yaml +++ b/crowdin.yaml @@ -13,4 +13,4 @@ files: source: '/website/docs/**/*', translation: '/website/i18n/%locale%/docusaurus-plugin-content-docs/current/**/%original_file_name%', } - ] \ No newline at end of file + ] diff --git a/packages/plugins/ui-theme/i18n/config.ts b/packages/plugins/ui-theme/i18n/config.ts deleted file mode 100644 index 7410050dc..000000000 --- a/packages/plugins/ui-theme/i18n/config.ts +++ /dev/null @@ -1,94 +0,0 @@ -import i18n from 'i18next'; -import { initReactI18next } from 'react-i18next'; - -import translationCS from './translations/cs-CZ.json'; -import translationDE from './translations/de-DE.json'; -import translationEN from './translations/en-US.json'; -import translationES from './translations/es-ES.json'; -import translationFR from './translations/fr-FR.json'; -import translationJP from './translations/ja-JP.json'; -import translationKM from './translations/km-KH.json'; -import translationPT from './translations/pt-BR.json'; -import translationRU from './translations/ru-RU.json'; -import translationTR from './translations/tr-TR.json'; -import translationUA from './translations/uk-UA.json'; -import translationCN from './translations/zh-CN.json'; -import translatiobTW from './translations/zh-TW.json'; - -const languages = { - 'en-US': { - translation: translationEN, - }, - 'cs-CZ': { - translation: translationCS, - }, - 'pt-BR': { - translation: translationPT, - }, - 'es-ES': { - translation: translationES, - }, - 'de-DE': { - translation: translationDE, - }, - 'fr-FR': { - translation: translationFR, - }, - 'zh-CN': { - translation: translationCN, - }, - 'ja-JP': { - translation: translationJP, - }, - 'ru-RU': { - translation: translationRU, - }, - 'tr-TR': { - translation: translationTR, - }, - 'uk-UA': { - translation: translationUA, - }, - 'km-KH': { - translation: translationKM, - }, - 'zh-TW': { - translation: translatiobTW, - }, -}; - -type Language = keyof typeof languages; -i18n - // pass the i18n instance to react-i18next. - .use(initReactI18next) - // init i18next - // for all options read: https://www.i18next.com/overview/configuration-options - .init({ - // in case window.VEDACCIO_LANGUAGE is undefined,it will fall back to 'en-US' - lng: window?.__VERDACCIO_BASENAME_UI_OPTIONS?.language || 'en-US', - fallbackLng: 'en-US', - whitelist: [ - 'en-US', - 'cs-CZ', - 'pt-BR', - 'es-ES', - 'de-DE', - 'fr-FR', - 'zh-CN', - 'ja-JP', - 'ru-RU', - 'tr-TR', - 'uk-UA', - 'km-KH', - 'zh-TW', - ], - load: 'currentOnly', - resources: languages, - debug: false, - interpolation: { - escapeValue: false, // react already safes from xss - }, - }); - -export default i18n; -export { Language }; diff --git a/packages/plugins/ui-theme/package.json b/packages/plugins/ui-theme/package.json index 39f87de1c..e5588ef6f 100644 --- a/packages/plugins/ui-theme/package.json +++ b/packages/plugins/ui-theme/package.json @@ -48,8 +48,9 @@ "harmony-reflect": "1.6.2", "history": "4.10.1", "html-webpack-plugin": "5.3.2", - "i18next": "20.6.0", + "i18next": "20.6.1", "in-publish": "2.0.1", + "country-flag-icons": "1.4.10", "js-base64": "3.6.1", "js-yaml": "3.14.1", "localstorage-memory": "1.0.3", @@ -66,7 +67,7 @@ "react-dom": "17.0.2", "react-hook-form": "7.14.2", "react-hot-loader": "4.13.0", - "react-i18next": "11.11.4", + "react-i18next": "11.12.0", "react-router": "5.2.1", "react-router-dom": "5.3.0", "react-virtualized": "9.22.3", diff --git a/packages/plugins/ui-theme/src/App/App.tsx b/packages/plugins/ui-theme/src/App/App.tsx index ea23e9e13..ed3e17795 100644 --- a/packages/plugins/ui-theme/src/App/App.tsx +++ b/packages/plugins/ui-theme/src/App/App.tsx @@ -17,7 +17,7 @@ import AppRoute, { history } from './AppRoute'; import Footer from './Footer'; import Header from './Header'; -import '../../i18n/config'; +import '../i18n/config'; const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({ backgroundColor: theme?.palette.background.default, diff --git a/packages/plugins/ui-theme/src/App/Footer/Footer.tsx b/packages/plugins/ui-theme/src/App/Footer/Footer.tsx index d1c81fee4..3312ed2ed 100644 --- a/packages/plugins/ui-theme/src/App/Footer/Footer.tsx +++ b/packages/plugins/ui-theme/src/App/Footer/Footer.tsx @@ -1,18 +1,11 @@ +/* eslint-disable react/jsx-max-depth */ +/* eslint-disable react/jsx-pascal-case */ import styled from '@emotion/styled'; +import FlagsIcon from 'country-flag-icons/react/3x2'; import React from 'react'; import { useTranslation, Trans } from 'react-i18next'; -import { - Austria, - Brazil, - Earth, - Nicaragua, - Spain, - Germany, - India, - China, - Taiwan, -} from 'verdaccio-ui/components/Icons'; +import { Earth } from 'verdaccio-ui/components/Icons'; import Logo from 'verdaccio-ui/components/Logo'; import { Theme } from 'verdaccio-ui/design-tokens/theme'; import { useConfig } from 'verdaccio-ui/providers/config'; @@ -32,14 +25,30 @@ const Footer = () => { - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + @@ -87,6 +96,10 @@ const Flags = styled('span')<{ theme?: Theme }>(({ theme }) => ({ }, })); +const Icon = styled('div')({ + width: '10px', +}); + const ToolTip = styled('span')({ position: 'relative', height: '18px', diff --git a/packages/plugins/ui-theme/src/App/Footer/__snapshots__/Footer.test.tsx.snap b/packages/plugins/ui-theme/src/App/Footer/__snapshots__/Footer.test.tsx.snap index ffb6cc125..deccbf8d2 100644 --- a/packages/plugins/ui-theme/src/App/Footer/__snapshots__/Footer.test.tsx.snap +++ b/packages/plugins/ui-theme/src/App/Footer/__snapshots__/Footer.test.tsx.snap @@ -111,8 +111,7 @@ exports[`