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[` component should load the initial state of Footer component
}
.emotion-15 {
- width: 18px;
- height: 18px;
+ width: 10px;
}
.emotion-31 {
@@ -211,344 +210,235 @@ exports[` component should load the initial state of Footer component
-
-
diff --git a/packages/plugins/ui-theme/src/App/Header/Header.test.tsx b/packages/plugins/ui-theme/src/App/Header/Header.test.tsx
index 638966c01..ddfde9e10 100644
--- a/packages/plugins/ui-theme/src/App/Header/Header.test.tsx
+++ b/packages/plugins/ui-theme/src/App/Header/Header.test.tsx
@@ -9,8 +9,8 @@ import {
waitForElementToBeRemoved,
} from 'verdaccio-ui/utils/test-react-testing-library';
-import translationEN from '../../../i18n/translations/en-US.json';
import { AppContextProvider } from '../../App';
+import translationEN from '../../i18n/translations/en-US.json';
import Header from './Header';
diff --git a/packages/plugins/ui-theme/src/App/Header/LanguageSwitch.tsx b/packages/plugins/ui-theme/src/App/Header/LanguageSwitch.tsx
index d3be17eb1..6fae65aa4 100644
--- a/packages/plugins/ui-theme/src/App/Header/LanguageSwitch.tsx
+++ b/packages/plugins/ui-theme/src/App/Header/LanguageSwitch.tsx
@@ -1,84 +1,70 @@
+/* eslint-disable react/jsx-pascal-case */
import styled from '@emotion/styled';
import { withStyles } from '@material-ui/core/styles';
import LanguageIcon from '@material-ui/icons/Language';
+import Flags from 'country-flag-icons/react/3x2';
import i18next, { TFunctionKeys } from 'i18next';
import React, { useCallback, useContext, useState, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
+import { Language } from 'src/i18n/enabledLanguages';
import { AutoComplete } from 'verdaccio-ui/components/AutoComplete/AutoCompleteV2';
-import {
- France,
- Brazil,
- Germany,
- Spain,
- China,
- Russia,
- Turkey,
- Ukraine,
- Khmer,
- Japan,
- Usa,
- Czech,
- Taiwan,
-} from 'verdaccio-ui/components/Icons';
import MenuItem from 'verdaccio-ui/components/MenuItem';
import { Theme } from 'verdaccio-ui/design-tokens/theme';
import ThemeContext from 'verdaccio-ui/design-tokens/ThemeContext';
-import { Language } from '../../../i18n/config';
-
const lngDetails: Record = {
'fr-FR': {
translation: 'lng.french',
- icon: ,
+ icon: ,
},
'pt-BR': {
translation: 'lng.portuguese',
- icon: ,
+ icon: ,
},
'de-DE': {
translation: 'lng.german',
- icon: ,
+ icon: ,
},
'es-ES': {
translation: 'lng.spanish',
- icon: ,
+ icon: ,
},
'zh-CN': {
translation: 'lng.chinese',
- icon: ,
+ icon: ,
},
'ru-RU': {
translation: 'lng.russian',
- icon: ,
+ icon: ,
},
'tr-TR': {
translation: 'lng.turkish',
- icon: ,
+ icon: ,
},
'uk-UA': {
translation: 'lng.ukraine',
- icon: ,
+ icon: ,
},
'km-KH': {
translation: 'lng.khmer',
- icon: ,
+ icon: ,
},
'ja-JP': {
translation: 'lng.japanese',
- icon: ,
+ icon: ,
},
'en-US': {
translation: 'lng.english',
- icon: ,
+ icon: ,
},
'cs-CZ': {
translation: 'lng.czech',
- icon: ,
+ icon: ,
},
'zh-TW': {
translation: 'lng.chineseTraditional',
- icon: ,
+ icon: ,
},
};
diff --git a/packages/plugins/ui-theme/src/components/Icons/Austria.tsx b/packages/plugins/ui-theme/src/components/Icons/Austria.tsx
deleted file mode 100644
index ac36447b8..000000000
--- a/packages/plugins/ui-theme/src/components/Icons/Austria.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { SvgIcon } from '../SvgIcon';
-
-type Props = React.ComponentProps;
-
-const Austria = React.forwardRef(function Austria(props: Props, ref: React.Ref) {
- const { t } = useTranslation();
- return (
-
-
-
-
- );
-});
-
-Austria.displayName = 'Austria';
-
-export { Austria };
diff --git a/packages/plugins/ui-theme/src/components/Icons/Brazil.tsx b/packages/plugins/ui-theme/src/components/Icons/Brazil.tsx
deleted file mode 100644
index 224048a6b..000000000
--- a/packages/plugins/ui-theme/src/components/Icons/Brazil.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { SvgIcon } from '../SvgIcon';
-
-type Props = React.ComponentProps;
-
-const Brazil = React.forwardRef(function Brazil(props: Props, ref: React.Ref) {
- const { t } = useTranslation();
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-});
-
-Brazil.displayName = 'Brazil';
-
-export { Brazil };
diff --git a/packages/plugins/ui-theme/src/components/Icons/China.tsx b/packages/plugins/ui-theme/src/components/Icons/China.tsx
deleted file mode 100644
index 701cb936e..000000000
--- a/packages/plugins/ui-theme/src/components/Icons/China.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { SvgIcon } from '../SvgIcon';
-
-type Props = React.ComponentProps;
-
-const China = React.forwardRef(function China(props: Props, ref: React.Ref) {
- const { t } = useTranslation();
- return (
-
-
-
-
-
-
-
-
-
-
-
- );
-});
-
-China.displayName = 'China';
-
-export { China };
diff --git a/packages/plugins/ui-theme/src/components/Icons/Czech.tsx b/packages/plugins/ui-theme/src/components/Icons/Czech.tsx
deleted file mode 100644
index b430e45b2..000000000
--- a/packages/plugins/ui-theme/src/components/Icons/Czech.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { SvgIcon } from '../SvgIcon';
-
-type Props = React.ComponentProps;
-
-const Czech = React.forwardRef(function Czech(props: Props, ref: React.Ref) {
- const { t } = useTranslation();
- return (
-
-
-
-
-
- );
-});
-
-Czech.displayName = 'Czech';
-
-export { Czech };
diff --git a/packages/plugins/ui-theme/src/components/Icons/France.tsx b/packages/plugins/ui-theme/src/components/Icons/France.tsx
deleted file mode 100644
index bc08ec482..000000000
--- a/packages/plugins/ui-theme/src/components/Icons/France.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { SvgIcon } from '../SvgIcon';
-
-type Props = React.ComponentProps;
-
-const France = React.forwardRef(function France(props: Props, ref: React.Ref) {
- const { t } = useTranslation();
- return (
-
-
-
-
-
- );
-});
-
-France.displayName = 'France';
-
-export { France };
diff --git a/packages/plugins/ui-theme/src/components/Icons/Germany.tsx b/packages/plugins/ui-theme/src/components/Icons/Germany.tsx
deleted file mode 100644
index 829e05373..000000000
--- a/packages/plugins/ui-theme/src/components/Icons/Germany.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { SvgIcon } from '../SvgIcon';
-
-type Props = React.ComponentProps;
-
-const Germany = React.forwardRef(function Germany(props: Props, ref: React.Ref) {
- const { t } = useTranslation();
- return (
-
-
-
-
-
- );
-});
-
-Germany.displayName = 'Germany';
-
-export { Germany };
diff --git a/packages/plugins/ui-theme/src/components/Icons/India.tsx b/packages/plugins/ui-theme/src/components/Icons/India.tsx
deleted file mode 100644
index 802ed5880..000000000
--- a/packages/plugins/ui-theme/src/components/Icons/India.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { SvgIcon } from '../SvgIcon';
-
-type Props = React.ComponentProps;
-
-const India = React.forwardRef(function India(props: Props, ref: React.Ref) {
- const { t } = useTranslation();
- return (
-
-
-
-
-
-
-
-
-
- );
-});
-
-India.displayName = 'India';
-
-export { India };
diff --git a/packages/plugins/ui-theme/src/components/Icons/Japan.tsx b/packages/plugins/ui-theme/src/components/Icons/Japan.tsx
deleted file mode 100644
index 1c1fe2036..000000000
--- a/packages/plugins/ui-theme/src/components/Icons/Japan.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { SvgIcon } from '../SvgIcon';
-
-type Props = React.ComponentProps;
-
-const Japan = React.forwardRef(function Japan(props: Props, ref: React.Ref) {
- const { t } = useTranslation();
- return (
-
-
-
-
- );
-});
-
-Japan.displayName = 'Japan';
-
-export { Japan };
diff --git a/packages/plugins/ui-theme/src/components/Icons/Khmer.tsx b/packages/plugins/ui-theme/src/components/Icons/Khmer.tsx
deleted file mode 100644
index f80bc26c8..000000000
--- a/packages/plugins/ui-theme/src/components/Icons/Khmer.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { SvgIcon } from '../SvgIcon';
-
-type Props = React.ComponentProps;
-
-const Khmer = React.forwardRef(function Khmer(props: Props, ref: React.Ref) {
- const { t } = useTranslation();
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-});
-
-Khmer.displayName = 'Khmer';
-
-export { Khmer };
diff --git a/packages/plugins/ui-theme/src/components/Icons/Nicaragua.tsx b/packages/plugins/ui-theme/src/components/Icons/Nicaragua.tsx
deleted file mode 100644
index 69d67a899..000000000
--- a/packages/plugins/ui-theme/src/components/Icons/Nicaragua.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { SvgIcon } from '../SvgIcon';
-
-type Props = React.ComponentProps;
-
-const Nicaragua = React.forwardRef(function Nicaragua(props: Props, ref: React.Ref) {
- const { t } = useTranslation();
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-});
-
-Nicaragua.displayName = 'Nicaragua';
-
-export { Nicaragua };
diff --git a/packages/plugins/ui-theme/src/components/Icons/Russia.tsx b/packages/plugins/ui-theme/src/components/Icons/Russia.tsx
deleted file mode 100644
index 0bd829b65..000000000
--- a/packages/plugins/ui-theme/src/components/Icons/Russia.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { SvgIcon } from '../SvgIcon';
-
-type Props = React.ComponentProps;
-
-const Russia = React.forwardRef(function Russia(props: Props, ref: React.Ref) {
- const { t } = useTranslation();
- return (
-
-
-
-
-
- );
-});
-
-Russia.displayName = 'Russia';
-
-export { Russia };
diff --git a/packages/plugins/ui-theme/src/components/Icons/Spain.tsx b/packages/plugins/ui-theme/src/components/Icons/Spain.tsx
deleted file mode 100644
index 116a0224a..000000000
--- a/packages/plugins/ui-theme/src/components/Icons/Spain.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { SvgIcon } from '../SvgIcon';
-
-type Props = React.ComponentProps;
-
-const Spain = React.forwardRef(function Spain(props: Props, ref: React.Ref) {
- const { t } = useTranslation();
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-});
-
-Spain.displayName = 'Spain';
-
-export { Spain };
diff --git a/packages/plugins/ui-theme/src/components/Icons/Taiwan.tsx b/packages/plugins/ui-theme/src/components/Icons/Taiwan.tsx
deleted file mode 100644
index aa25fc94a..000000000
--- a/packages/plugins/ui-theme/src/components/Icons/Taiwan.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { SvgIcon } from '../SvgIcon';
-
-type Props = React.ComponentProps;
-
-const Taiwan = React.forwardRef(function Taiwan(props: Props, ref: React.Ref) {
- const { t } = useTranslation();
- return (
-
-
-
-
-
-
-
-
-
- );
-});
-
-Taiwan.displayName = 'Taiwan';
-
-export { Taiwan };
diff --git a/packages/plugins/ui-theme/src/components/Icons/Turkey.tsx b/packages/plugins/ui-theme/src/components/Icons/Turkey.tsx
deleted file mode 100644
index 5997e68ce..000000000
--- a/packages/plugins/ui-theme/src/components/Icons/Turkey.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { SvgIcon } from '../SvgIcon';
-
-type Props = React.ComponentProps;
-
-const Turkey = React.forwardRef(function Turkey(props: Props, ref: React.Ref) {
- const { t } = useTranslation();
- return (
-
-
-
-
-
-
-
- );
-});
-
-Turkey.displayName = 'Turkey';
-
-export { Turkey };
diff --git a/packages/plugins/ui-theme/src/components/Icons/Ukraine.tsx b/packages/plugins/ui-theme/src/components/Icons/Ukraine.tsx
deleted file mode 100644
index 74f37cfd6..000000000
--- a/packages/plugins/ui-theme/src/components/Icons/Ukraine.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { SvgIcon } from '../SvgIcon';
-
-type Props = React.ComponentProps;
-
-const Ukraine = React.forwardRef(function Ukraine(props: Props, ref: React.Ref) {
- const { t } = useTranslation();
- return (
-
-
-
-
-
-
-
-
- );
-});
-
-Ukraine.displayName = 'Ukraine';
-
-export { Ukraine };
diff --git a/packages/plugins/ui-theme/src/components/Icons/Usa.tsx b/packages/plugins/ui-theme/src/components/Icons/Usa.tsx
deleted file mode 100644
index d9c8a2489..000000000
--- a/packages/plugins/ui-theme/src/components/Icons/Usa.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { SvgIcon } from '../SvgIcon';
-
-type Props = React.ComponentProps;
-
-const Usa = React.forwardRef(function Usa(props: Props, ref: React.Ref) {
- const { t } = useTranslation();
- return (
-
-
-
-
-
-
- );
-});
-
-Usa.displayName = 'Usa';
-
-export { Usa };
diff --git a/packages/plugins/ui-theme/src/components/Icons/index.ts b/packages/plugins/ui-theme/src/components/Icons/index.ts
index 6cd1927f1..d39de1b2e 100644
--- a/packages/plugins/ui-theme/src/components/Icons/index.ts
+++ b/packages/plugins/ui-theme/src/components/Icons/index.ts
@@ -1,21 +1,5 @@
-export { Austria } from './Austria';
-export { Brazil } from './Brazil';
-export { China } from './China';
-export { Czech } from './Czech';
-export { France } from './France';
-export { Germany } from './Germany';
-export { India } from './India';
-export { Japan } from './Japan';
-export { Nicaragua } from './Nicaragua';
-export { Taiwan } from './Taiwan';
-export { Spain } from './Spain';
-export { Khmer } from './Khmer';
-export { Russia } from './Russia';
-export { Ukraine } from './Ukraine';
-export { Usa } from './Usa';
-export { Turkey } from './Turkey';
export { Version } from './Version';
export { Time } from './Time';
-export { Earth } from './Earth';
export { FileBinary } from './FileBinary';
export { Law } from './Law';
+export { Earth } from './Earth';
diff --git a/packages/plugins/ui-theme/src/design-tokens/ThemeContext.ts b/packages/plugins/ui-theme/src/design-tokens/ThemeContext.ts
index 133f89c67..ad2863f8a 100644
--- a/packages/plugins/ui-theme/src/design-tokens/ThemeContext.ts
+++ b/packages/plugins/ui-theme/src/design-tokens/ThemeContext.ts
@@ -1,6 +1,6 @@
import { createContext } from 'react';
+import { Language } from 'src/i18n/enabledLanguages';
-import { Language } from '../../i18n/config';
interface Props {
isDarkMode: boolean;
setIsDarkMode: (isDarkMode: boolean) => void;
diff --git a/packages/plugins/ui-theme/src/i18n/config.ts b/packages/plugins/ui-theme/src/i18n/config.ts
new file mode 100644
index 000000000..9f29100cc
--- /dev/null
+++ b/packages/plugins/ui-theme/src/i18n/config.ts
@@ -0,0 +1,31 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import { DEFAULT_LANGUAGE, enabledLanguages } from './enabledLanguages';
+
+const languages = enabledLanguages.reduce((acc, lng) => {
+ acc[lng] = {
+ translation: require(`./translations/${lng}.json`),
+ };
+ return acc;
+}, {});
+
+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 || DEFAULT_LANGUAGE,
+ fallbackLng: DEFAULT_LANGUAGE,
+ whitelist: [...enabledLanguages],
+ load: 'currentOnly',
+ resources: languages,
+ debug: false,
+ interpolation: {
+ escapeValue: false, // react already safes from xss
+ },
+ });
+
+export default i18n;
diff --git a/packages/plugins/ui-theme/src/i18n/enabledLanguages.ts b/packages/plugins/ui-theme/src/i18n/enabledLanguages.ts
new file mode 100644
index 000000000..83ea98cea
--- /dev/null
+++ b/packages/plugins/ui-theme/src/i18n/enabledLanguages.ts
@@ -0,0 +1,19 @@
+export const DEFAULT_LANGUAGE = 'en-US';
+
+export const enabledLanguages = [
+ DEFAULT_LANGUAGE,
+ 'cs-CZ',
+ 'pt-BR',
+ 'es-ES',
+ 'de-DE',
+ 'fr-FR',
+ 'zh-CN',
+ 'ja-JP',
+ 'ru-RU',
+ 'tr-TR',
+ 'uk-UA',
+ 'km-KH',
+ 'zh-TW',
+];
+
+export type Language = keyof typeof enabledLanguages;
diff --git a/packages/plugins/ui-theme/i18n/translations/cs-CZ.json b/packages/plugins/ui-theme/src/i18n/translations/cs-CZ.json
similarity index 100%
rename from packages/plugins/ui-theme/i18n/translations/cs-CZ.json
rename to packages/plugins/ui-theme/src/i18n/translations/cs-CZ.json
diff --git a/packages/plugins/ui-theme/i18n/translations/de-DE.json b/packages/plugins/ui-theme/src/i18n/translations/de-DE.json
similarity index 100%
rename from packages/plugins/ui-theme/i18n/translations/de-DE.json
rename to packages/plugins/ui-theme/src/i18n/translations/de-DE.json
diff --git a/packages/plugins/ui-theme/i18n/translations/en-US.json b/packages/plugins/ui-theme/src/i18n/translations/en-US.json
similarity index 100%
rename from packages/plugins/ui-theme/i18n/translations/en-US.json
rename to packages/plugins/ui-theme/src/i18n/translations/en-US.json
diff --git a/packages/plugins/ui-theme/i18n/translations/es-ES.json b/packages/plugins/ui-theme/src/i18n/translations/es-ES.json
similarity index 100%
rename from packages/plugins/ui-theme/i18n/translations/es-ES.json
rename to packages/plugins/ui-theme/src/i18n/translations/es-ES.json
diff --git a/packages/plugins/ui-theme/i18n/translations/fr-FR.json b/packages/plugins/ui-theme/src/i18n/translations/fr-FR.json
similarity index 100%
rename from packages/plugins/ui-theme/i18n/translations/fr-FR.json
rename to packages/plugins/ui-theme/src/i18n/translations/fr-FR.json
diff --git a/packages/plugins/ui-theme/i18n/translations/ja-JP.json b/packages/plugins/ui-theme/src/i18n/translations/ja-JP.json
similarity index 100%
rename from packages/plugins/ui-theme/i18n/translations/ja-JP.json
rename to packages/plugins/ui-theme/src/i18n/translations/ja-JP.json
diff --git a/packages/plugins/ui-theme/i18n/translations/km-KH.json b/packages/plugins/ui-theme/src/i18n/translations/km-KH.json
similarity index 100%
rename from packages/plugins/ui-theme/i18n/translations/km-KH.json
rename to packages/plugins/ui-theme/src/i18n/translations/km-KH.json
diff --git a/packages/plugins/ui-theme/i18n/translations/pt-BR.json b/packages/plugins/ui-theme/src/i18n/translations/pt-BR.json
similarity index 100%
rename from packages/plugins/ui-theme/i18n/translations/pt-BR.json
rename to packages/plugins/ui-theme/src/i18n/translations/pt-BR.json
diff --git a/packages/plugins/ui-theme/i18n/translations/ru-RU.json b/packages/plugins/ui-theme/src/i18n/translations/ru-RU.json
similarity index 100%
rename from packages/plugins/ui-theme/i18n/translations/ru-RU.json
rename to packages/plugins/ui-theme/src/i18n/translations/ru-RU.json
diff --git a/packages/plugins/ui-theme/i18n/translations/tr-TR.json b/packages/plugins/ui-theme/src/i18n/translations/tr-TR.json
similarity index 100%
rename from packages/plugins/ui-theme/i18n/translations/tr-TR.json
rename to packages/plugins/ui-theme/src/i18n/translations/tr-TR.json
diff --git a/packages/plugins/ui-theme/i18n/translations/uk-UA.json b/packages/plugins/ui-theme/src/i18n/translations/uk-UA.json
similarity index 100%
rename from packages/plugins/ui-theme/i18n/translations/uk-UA.json
rename to packages/plugins/ui-theme/src/i18n/translations/uk-UA.json
diff --git a/packages/plugins/ui-theme/i18n/translations/zh-CN.json b/packages/plugins/ui-theme/src/i18n/translations/zh-CN.json
similarity index 100%
rename from packages/plugins/ui-theme/i18n/translations/zh-CN.json
rename to packages/plugins/ui-theme/src/i18n/translations/zh-CN.json
diff --git a/packages/plugins/ui-theme/i18n/translations/zh-TW.json b/packages/plugins/ui-theme/src/i18n/translations/zh-TW.json
similarity index 100%
rename from packages/plugins/ui-theme/i18n/translations/zh-TW.json
rename to packages/plugins/ui-theme/src/i18n/translations/zh-TW.json
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/Versions.test.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/Versions.test.tsx
index 17572efbe..fae607df1 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/Versions.test.tsx
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/Versions.test.tsx
@@ -3,7 +3,7 @@ import { MemoryRouter } from 'react-router-dom';
import { render, cleanup } from 'verdaccio-ui/utils/test-react-testing-library';
-import translationEN from '../../../../../i18n/translations/en-US.json';
+import translationEN from '../../../../i18n/translations/en-US.json';
import { DetailContext } from '../../context';
import { DetailContextProps } from '../../version-config';
diff --git a/packages/plugins/ui-theme/src/pages/Version/Version.test.tsx b/packages/plugins/ui-theme/src/pages/Version/Version.test.tsx
index 8d16f6772..5d5e0f3b6 100644
--- a/packages/plugins/ui-theme/src/pages/Version/Version.test.tsx
+++ b/packages/plugins/ui-theme/src/pages/Version/Version.test.tsx
@@ -4,7 +4,7 @@ import { MemoryRouter } from 'react-router';
import { render } from 'verdaccio-ui/utils/test-react-testing-library';
-import translationEN from '../../../i18n/translations/en-US.json';
+import translationEN from '../../i18n/translations/en-US.json';
import data from './__partials__/data.json';
import { DetailContext } from './context';
diff --git a/packages/plugins/ui-theme/src/utils/test-react-testing-library.tsx b/packages/plugins/ui-theme/src/utils/test-react-testing-library.tsx
index 56bb17f01..bc89eb746 100644
--- a/packages/plugins/ui-theme/src/utils/test-react-testing-library.tsx
+++ b/packages/plugins/ui-theme/src/utils/test-react-testing-library.tsx
@@ -6,7 +6,7 @@ import ThemeProvider from 'verdaccio-ui/design-tokens/ThemeProvider';
import APIProvider from 'verdaccio-ui/providers/API/APIProvider';
import AppConfigurationProvider from 'verdaccio-ui/providers/config';
-import i18nConfig from '../../i18n/config';
+import i18nConfig from '../i18n/config';
const customRender = (node: React.ReactElement, ...options: any) => {
return render(
diff --git a/packages/plugins/ui-theme/tsconfig.json b/packages/plugins/ui-theme/tsconfig.json
index f77efe29c..b27b815b5 100644
--- a/packages/plugins/ui-theme/tsconfig.json
+++ b/packages/plugins/ui-theme/tsconfig.json
@@ -18,7 +18,7 @@
"verdaccio-ui/utils/*": ["src/utils/*"]
}
},
- "include": ["src", "types/*.d.ts", "i18n/**/*.json"],
+ "include": ["src", "types/*.d.ts", "src/i18n/**/*.json"],
"references": [
{
"path": "../../node-api"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 723c349f9..71b792500 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -767,6 +767,7 @@ importers:
babel-plugin-dynamic-import-node: 2.3.3
babel-plugin-emotion: 10.2.2
bundlesize: 0.18.1
+ country-flag-icons: 1.4.10
css-loader: 6.2.0
dayjs: 1.10.6
emotion: 10.0.27
@@ -776,7 +777,7 @@ importers:
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
js-base64: 3.6.1
js-yaml: 3.14.1
@@ -794,7 +795,7 @@ importers:
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
@@ -842,6 +843,7 @@ importers:
babel-plugin-dynamic-import-node: 2.3.3
babel-plugin-emotion: 10.2.2
bundlesize: 0.18.1
+ country-flag-icons: 1.4.10
css-loader: 6.2.0_webpack@5.52.0
dayjs: 1.10.6
emotion: 10.0.27
@@ -851,7 +853,7 @@ importers:
harmony-reflect: 1.6.2
history: 4.10.1
html-webpack-plugin: 5.3.2_webpack@5.52.0
- i18next: 20.6.0
+ i18next: 20.6.1
in-publish: 2.0.1
js-base64: 3.6.1
js-yaml: 3.14.1
@@ -869,7 +871,7 @@ importers:
react-dom: 17.0.2_react@17.0.2
react-hook-form: 7.14.2_react@17.0.2
react-hot-loader: 4.13.0_9c6a8df88c2691f81f37725d5b4de033
- react-i18next: 11.11.4_i18next@20.6.0+react@17.0.2
+ react-i18next: 11.12.0_i18next@20.6.1+react@17.0.2
react-router: 5.2.1_react@17.0.2
react-router-dom: 5.3.0_react@17.0.2
react-virtualized: 9.22.3_react-dom@17.0.2+react@17.0.2
@@ -9142,6 +9144,10 @@ packages:
path-type: 4.0.0
yaml: 1.10.2
+ /country-flag-icons/1.4.10:
+ resolution: {integrity: sha512-4qngHBNB+k7IyXztHYVh0Nfo1SBwUX0ePksCQKntuuCHr/sNbzxtl1Oi0SDtov1q19HqJBzKdULEefYmafXmdg==}
+ dev: true
+
/create-emotion/10.0.27:
resolution: {integrity: sha512-fIK73w82HPPn/RsAij7+Zt8eCE8SptcJ3WoRMfxMtjteYxud8GDTKKld7MYwAX2TVhrw29uR1N/bVGxeStHILg==}
dependencies:
@@ -12420,8 +12426,8 @@ packages:
resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==}
dev: true
- /i18next/20.6.0:
- resolution: {integrity: sha512-sgt7AkvxUQbW5dsA7p5AYq7tBOIdm9K7c4wAppsbt5l0Hynqs7FTsa0bA0Exy+PUR17+IOcg3KVCaILc1OAOxQ==}
+ /i18next/20.6.1:
+ resolution: {integrity: sha512-yCMYTMEJ9ihCwEQQ3phLo7I/Pwycf8uAx+sRHwwk5U9Aui/IZYgQRyMqXafQOw5QQ7DM1Z+WyEXWIqSuJHhG2A==}
dependencies:
'@babel/runtime': 7.15.4
dev: true
@@ -17183,15 +17189,15 @@ packages:
source-map: 0.7.3
dev: true
- /react-i18next/11.11.4_i18next@20.6.0+react@17.0.2:
- resolution: {integrity: sha512-ayWFlu8Sc7GAxW1PzMaPtzq+yiozWMxs0P1WeITNVzXAVRhC0Httkzw/IiODBta6seJRBCLrtUeFUSXhAIxlRg==}
+ /react-i18next/11.12.0_i18next@20.6.1+react@17.0.2:
+ resolution: {integrity: sha512-M9BT+hqVG03ywrl+L7CK74ugK+4jIo7AeKJ17+g9BoqJz2+/aVbs8SIVXT4KMQ1rjIdcw+GcSRDy1CXjcz6tLQ==}
peerDependencies:
i18next: '>= 19.0.0'
react: '>= 16.8.0'
dependencies:
'@babel/runtime': 7.15.4
html-parse-stringify: 3.0.1
- i18next: 20.6.0
+ i18next: 20.6.1
react: 17.0.2
dev: true