0
Fork 0
mirror of https://github.com/verdaccio/verdaccio.git synced 2024-12-16 21:56:25 -05:00

refactor: replace flag icons with library (#2439)

* feat: simplify i18n translations config and flags

* fix icons

* lint

* update test
This commit is contained in:
Juan Picado 2021-09-16 21:46:56 +02:00 committed by GitHub
parent 71874de027
commit 7dde848d0c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
46 changed files with 330 additions and 1024 deletions

View file

@ -13,4 +13,4 @@ files:
source: '/website/docs/**/*',
translation: '/website/i18n/%locale%/docusaurus-plugin-content-docs/current/**/%original_file_name%',
}
]
]

View file

@ -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 };

View file

@ -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",

View file

@ -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,

View file

@ -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 = () => {
<ToolTip>
<StyledEarth />
<Flags>
<Spain />
<Nicaragua />
<India />
<Brazil />
<China />
<Austria />
<Germany />
<Taiwan />
<Icon>
<FlagsIcon.ES />
</Icon>
<Icon>
<FlagsIcon.NI />
</Icon>
<Icon>
<FlagsIcon.IN />
</Icon>
<Icon>
<FlagsIcon.BR />
</Icon>
<Icon>
<FlagsIcon.CN />
</Icon>
<Icon>
<FlagsIcon.AU />
</Icon>
<Icon>
<FlagsIcon.DE />
</Icon>
<Icon>
<FlagsIcon.TW />
</Icon>
</Flags>
</ToolTip>
</Left>
@ -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',

View file

@ -111,8 +111,7 @@ exports[`<Footer /> component should load the initial state of Footer component
}
.emotion-15 {
width: 18px;
height: 18px;
width: 10px;
}
.emotion-31 {
@ -211,344 +210,235 @@ exports[`<Footer /> component should load the initial state of Footer component
<span
class="emotion-13 emotion-14"
>
<svg
class="MuiSvgIcon-root emotion-15 emotion-12"
focusable="false"
role="img"
viewBox="0 0 45 45"
<div
class="emotion-15 emotion-16"
>
<defs>
<clippath
id="prefix__a"
>
<path
d="M0 36h36V0H0v36z"
/>
</clippath>
</defs>
<g
clip-path="url(#prefix__a)"
transform="matrix(1.25 0 0 -1.25 0 45)"
<svg
viewBox="0 85.333 512 341.333"
>
<path
d="M36 9a4 4 0 00-4-4H4a4 4 0 00-4 4v18a4 4 0 004 4h28a4 4 0 004-4V9z"
fill="#c60a1d"
d="M0 85.331h512v341.337H0z"
fill="#FFDA44"
/>
<path
d="M36 12H0v12h36V12z"
fill="#ffc400"
d="M0 85.331h512v113.775H0zm0 227.551h512v113.775H0z"
fill="#D80027"
/>
<path
d="M9 19v-3a3 3 0 116 0v3H9z"
fill="#ea596e"
/>
<path
d="M12 17h3v3h-3v-3z"
fill="#f4a2b2"
/>
<path
d="M12 17H9v3h3v-3z"
fill="#dd2e44"
/>
<path
d="M15 21.5c0-.829-1.343-1.5-3-1.5s-3 .671-3 1.5 1.343 1.5 3 1.5 3-.671 3-1.5"
fill="#ea596e"
/>
<path
d="M15 22.25c0 .414-1.343.75-3 .75s-3-.336-3-.75 1.343-.75 3-.75 3 .336 3 .75"
fill="#ffac33"
/>
<path
d="M7 13h1v7H7v-7zm10 0h-1v7h1v-7z"
fill="#99aab5"
/>
<path
d="M9 13H6v1h3v-1zm9 0h-3v1h3v-1zM8 20H7v1h1v-1zm9 0h-1v1h1v-1z"
fill="#66757f"
/>
</g>
<title>
Spain
</title>
</svg>
<svg
class="MuiSvgIcon-root emotion-15 emotion-12"
focusable="false"
role="img"
viewBox="0 0 512 512"
</svg>
</div>
<div
class="emotion-15 emotion-16"
>
<path
d="M512 384c0 31.418-25.473 56.889-56.889 56.889H56.89C25.472 440.889 0 415.417 0 384V128c0-31.418 25.472-56.889 56.889-56.889H455.11C486.53 71.111 512 96.584 512 128v256z"
fill="#265fb5"
/>
<path
d="M512 327.111H0V184.89h512v142.22z"
fill="#eee"
/>
<path
d="M320.811 256c0 35.797-29.014 64.811-64.811 64.811-35.783 0-64.811-29.014-64.811-64.811s29.027-64.811 64.811-64.811c35.797 0 64.811 29.013 64.811 64.811"
fill="#a9bf4c"
/>
<path
d="M312.889 256c0 31.418-25.473 56.889-56.889 56.889S199.111 287.416 199.111 256s25.473-56.889 56.889-56.889 56.889 25.471 56.889 56.889"
fill="#eee"
/>
<path
d="M209.891 286.649l45.909-79.517 45.909 79.517H209.89z"
fill="#265fb5"
/>
<path
d="M215.04 283.591l40.818-70.685 40.803 70.685H215.04z"
fill="#55acee"
/>
<path
d="M215.04 283.591l9.841-17.052 61.483-.783 10.297 17.835H215.04z"
fill="#bbddf5"
/>
<path
d="M222.891 272.441l15.331-12.445 6.67 7.553 5.774-6.215 4.893 4.892 4.665-5.12 5.561 5.12 5.106-5.334 4.665 5.334 4.451-4.892 7.325 9.102 1.338 2.674s-7.78 1.55-18.446.669c-10.667-.896-16.882 1.55-25.33 2.66-8.448 1.109-23.553-1.109-23.553-1.109l1.55-2.889z"
fill="#5c913b"
/>
<path
d="M237.995 262.67l10.226 11.107-5.12.442-5.774-8.434.668-3.115zm12.231.883l8.22 7.338-3.782.654-3.996-5.546-.442-2.446zm10.439-.442l7.111 6.67L266 270.89l-5.774-6.229.44-1.55zm9.33 0l-2.888 2.66 1.338 1.565 1.55-4.225zm8.889.228l-3.328 4.224 1.109 1.99 2.446-4.664-.227-1.55z"
fill="#e2f09f"
/>
<path
d="M256.426 233.671l.939 13.227 7.566-10.867-5.675 11.805 11.805-5.66-10.851 7.553 13.213.939-13.213.952 10.851 7.553-11.805-5.66 5.675 11.805-7.566-10.867-.939 13.226-.939-13.226-7.566 10.867 5.675-11.805-11.805 5.66 10.851-7.553-13.212-.953 13.212-.938-10.85-7.553 11.804 5.66-5.675-11.805 7.566 10.866.94-13.226z"
fill="#bbddf5"
/>
<path
d="M256 244.665l-2.66 2.66s.654 4.011.441 4.679C253.554 252.658 256 256 256 256l3.327-3.996-.88-5.334-2.447-2.005z"
fill="#dd2e44"
/>
<path
d="M257.28 240.071c10.894 0 17.109 5.334 17.109 5.334l-3.996-7.111s-6.443-4.893-13.995-4.893c-7.567 0-16 6.001-16 6.001l-3.783 7.553s9.771-6.884 20.665-6.884"
fill="#269"
/>
<path
d="M257.28 240.071c10.894 0 17.109 5.334 17.109 5.334l-2.888-5.106s-7.78-4.665-15.331-4.665-16.896 5.987-16.896 5.987l-2.66 5.334c.001 0 9.772-6.884 20.666-6.884"
fill="#ffcc4d"
/>
<path
d="M257.28 240.071c10.894 0 17.109 5.334 17.109 5.334l-2.005-3.327s-5.988-4.224-16.214-3.783c-7.553 0-18.005 5.561-18.005 5.561l-1.55 3.1c0-.001 9.771-6.885 20.665-6.885"
fill="#dd2e44"
/>
<path
d="M264.291 322.873h-14.165V309.29h14.165v13.582zm-16.426-118.898h-10.183l-5.106-12.459 10.198-1.137 5.091 13.596zm23.21 5.66l-6.784-2.261 3.385-16.426 13.028 1.137-9.629 17.55zm-61.141 69.646l-19.811 4.523-.57-13.583 19.812-2.83.569 11.89zm5.106 14.152l-16.426 6.812-3.954-10.766 15.289-5.106 5.091 9.06zm109.269-12.444l-18.105-5.091v-9.63l20.366-2.83-2.261 17.55zm-9.003 18.674l-16.981-7.937 5.646-10.182 18.703 5.66-7.368 12.459z"
fill="#eee"
/>
<title>
Nicaragua
</title>
</svg>
<svg
class="MuiSvgIcon-root emotion-15 emotion-12"
focusable="false"
role="img"
viewBox="0 0 512 512"
>
<path
d="M0 384c0 31.418 25.473 56.889 56.889 56.889H455.11c31.42 0 56.89-25.473 56.89-56.889v-56.889H0V384z"
fill="#138808"
/>
<path
d="M0 327.111h512V184.89H0v142.22z"
fill="#eee"
/>
<path
d="M512 184.889V128c0-31.417-25.473-56.889-56.889-56.889H56.89C25.472 71.111 0 96.583 0 128v56.889h512z"
fill="#f93"
/>
<path
d="M312.889 256c0-31.431-25.473-56.902-56.903-56.902-31.417 0-56.888 25.472-56.888 56.902 0 31.418 25.472 56.889 56.888 56.889 31.432 0 56.903-25.472 56.903-56.889"
fill="navy"
/>
<path
d="M298.666 256c0-23.566-19.115-42.681-42.681-42.681S213.319 232.434 213.319 256s19.1 42.666 42.666 42.666 42.681-19.1 42.681-42.666"
fill="#eee"
/>
<path
d="M256 213.334l2.076 32.199 14.251-28.943-10.396 30.535 24.235-21.305-21.291 24.249 30.535-10.396-28.942 14.25L298.666 256l-32.198 2.076 28.942 14.237-30.535-10.383 21.291 24.235-24.235-21.29 10.396 30.535-14.25-28.942L256 298.666l-2.076-32.198-14.252 28.942 10.397-30.535-24.249 21.291 21.305-24.235-30.535 10.383 28.942-14.236L213.334 256l32.199-2.076-28.943-14.251 30.535 10.396-21.305-24.249 24.249 21.305-10.396-30.535 14.25 28.943 2.077-32.2z"
fill="navy"
opacity="0.6"
/>
<path
d="M241.778 256c0-7.851 6.37-14.223 14.222-14.223s14.223 6.372 14.223 14.223-6.372 14.223-14.223 14.223-14.223-6.372-14.223-14.223"
fill="navy"
/>
<title>
India
</title>
</svg>
<svg
class="MuiSvgIcon-root emotion-15 emotion-12"
focusable="false"
role="img"
viewBox="0 0 45 45"
>
<defs>
<clippath
id="prefix__a"
>
<path
d="M0 36h36V0H0v36z"
/>
</clippath>
</defs>
<g
clip-path="url(#prefix__a)"
transform="matrix(1.25 0 0 -1.25 0 45)"
<svg
viewBox="0 85.333 512 341.333"
>
<path
d="M36 9a4 4 0 00-4-4H4a4 4 0 00-4 4v18a4 4 0 004 4h28a4 4 0 004-4V9z"
d="M0 85.337h512v341.326H0z"
fill="#FFF"
/>
<path
d="M0 85.337h512v113.775H0zm0 227.551h512v113.775H0z"
fill="#338AF3"
/>
<path
d="M256 214.447c-22.949 0-41.553 18.603-41.553 41.553S233.05 297.553 256 297.553c22.949 0 41.553-18.603 41.553-41.553S278.949 214.447 256 214.447zm0 65.298c-13.114 0-23.745-10.631-23.745-23.745s10.631-23.745 23.745-23.745 23.745 10.631 23.745 23.745-10.631 23.745-23.745 23.745z"
fill="#FFDA44"
/>
<path
d="M276.563 261.936L256 256l-20.563 5.936-6.855 11.873h54.836z"
fill="#0052B4"
/>
<path
d="M256 226.32l-13.709 23.744L256 256l13.709-5.936z"
fill="#338AF3"
/>
<path
d="M235.437 261.936h41.126l-6.854-11.872h-27.418z"
fill="#6DA544"
/>
</svg>
</div>
<div
class="emotion-15 emotion-16"
>
<svg
viewBox="0 0 513 342"
>
<path
d="M17.3 0h478.4v342H17.3V0z"
fill="#181A93"
/>
<path
d="M0 0h513v114H0V0z"
fill="#FFA44A"
/>
<path
d="M0 228h513v114H0V228z"
fill="#1A9F0B"
/>
<path
d="M0 114h513v114H0V114z"
fill="#FFF"
/>
<circle
cx="256.5"
cy="171"
fill="#FFF"
r="34.2"
/>
<path
d="M256.5 216.6c-25.1 0-45.6-20.5-45.6-45.6s20.5-45.6 45.6-45.6 45.6 20.5 45.6 45.6-20.5 45.6-45.6 45.6zm0-11.4c18.2 0 34.2-16 34.2-34.2s-15.9-34.2-34.2-34.2-34.2 16-34.2 34.2 16 34.2 34.2 34.2z"
fill="#181A93"
/>
<circle
cx="256.5"
cy="171"
fill="#181A93"
r="22.8"
/>
</svg>
</div>
<div
class="emotion-15 emotion-16"
>
<svg
viewBox="0 0 513 342"
>
<path
d="M0 0h513v342H0z"
fill="#009b3a"
/>
<path
d="M32.727 18L18 6.876 3.27 18 18 29.125 32.727 18z"
fill="#fedf01"
d="M256.5 19.3l204.9 151.4L256.5 322 50.6 170.7z"
fill="#fedf00"
/>
<circle
cx="256.5"
cy="171"
fill="#FFF"
r="80.4"
/>
<path
d="M24.434 18.076a6.458 6.458 0 11-12.917 0 6.458 6.458 0 0112.917 0"
d="M215.9 165.7c-13.9 0-27.4 2.1-40.1 6 .6 43.9 36.3 79.3 80.3 79.3 27.2 0 51.3-13.6 65.8-34.3-24.9-31-63.2-51-106-51zm119 20.3c.9-5 1.5-10.1 1.5-15.4 0-44.4-36-80.4-80.4-80.4-33.1 0-61.5 20.1-73.9 48.6 10.9-2.2 22.1-3.4 33.6-3.4 46.8.1 89 19.5 119.2 50.6z"
fill="#002776"
/>
<path
d="M12.277 21.113a6.406 6.406 0 01-.672-2.023c3.994.29 9.417-1.892 11.744-4.596.402.604.7 1.28.882 2.004-2.871 2.809-7.916 4.63-11.954 4.615"
fill="#cbe9d4"
/>
<path
d="M13 16.767h-1v1h1v-1zm1-2h-1v1h1v-1z"
fill="#88c9f9"
/>
<path
d="M16 16.767h-1v1h1v-1zm2-1h-1v1h1v-1zm4-2h-1v1h1v-1zm-3-1h-1v1h1v-1zm3 6h-1v1h1v-1z"
fill="#55acee"
/>
<path
d="M20 14.767h-1v1h1v-1z"
fill="#3b88c3"
/>
</g>
<title>
Brazil
</title>
</svg>
<svg
class="MuiSvgIcon-root emotion-15 emotion-12"
focusable="false"
role="img"
viewBox="0 0 45 45"
</svg>
</div>
<div
class="emotion-15 emotion-16"
>
<defs>
<clippath
id="prefix__a"
>
<path
d="M0 36h36V0H0v36z"
/>
</clippath>
</defs>
<g
clip-path="url(#prefix__a)"
transform="matrix(1.25 0 0 -1.25 0 45)"
<svg
viewBox="0 0 513 342"
>
<path
d="M36 9a4 4 0 00-4-4H4a4 4 0 00-4 4v18a4 4 0 004 4h28a4 4 0 004-4V9z"
fill="#de2910"
d="M0 0h513v342H0z"
fill="#D80027"
/>
<path
d="M7 25.049l.929-2.67 2.826-.06-2.253-1.706.819-2.707L7 19.52l-2.321-1.615.819 2.707-2.253 1.707 2.826.059.929 2.67zm6 3.423l.34-.688.759-.11-.549-.536.129-.756-.679.357-.679-.357.13.756-.55.536.76.11.339.688zm2-4l.34-.688.759-.11-.549-.536.129-.756-.679.357-.679-.357.13.756-.55.536.76.11.339.688zm0-4l.34-.688.759-.11-.549-.536.129-.756-.679.357-.679-.357.13.756-.55.536.76.11.339.688zm-2-3.999l.34-.69.759-.11-.549-.534.129-.757-.679.357-.679-.357.13.757-.55.535.76.11.339.689z"
fill="#ffde02"
d="M226.8 239.2l-9.7-15.6-17.9 4.4 11.9-14.1-9.7-15.6 17.1 6.9 11.8-14.1-1.3 18.4 17.1 6.9-17.9 4.4zM290.6 82l-10.1 15.4 11.6 14.3-17.7-4.8-10.1 15.5-1-18.4-17.7-4.8 17.2-6.6-1-18.4 11.6 14.3zm-54.4-56.6l-2 18.3 16.8 7.6-18 3.8-2 18.3-9.2-16-17.9 3.8 12.3-13.7-9.2-15.9 16.8 7.5zm56.6 136.4l-14.9 10.9 5.8 17.5-14.9-10.8-14.9 11 5.6-17.6-14.9-10.7 18.4-.1 5.6-17.6 5.8 17.5zM115 46.3l17.3 53.5h56.2l-45.4 32.9 17.3 53.5-45.4-33-45.5 33 17.4-53.5-45.5-32.9h56.3z"
fill="#FFDA44"
/>
</g>
<title>
China
</title>
</svg>
<svg
class="MuiSvgIcon-root emotion-15 emotion-12"
focusable="false"
role="img"
viewBox="0 0 512 512"
</svg>
</div>
<div
class="emotion-15 emotion-16"
>
<path
d="M473.655 88.276H38.345C17.167 88.276 0 105.443 0 126.621v73.471h512v-73.471c0-21.178-17.167-38.345-38.345-38.345zM0 385.379c0 21.177 17.167 38.345 38.345 38.345h435.31c21.177 0 38.345-17.167 38.345-38.345v-73.471H0v73.471z"
fill="#ff4b55"
/>
<path
d="M0 200.09h512V311.9H0z"
fill="#f5f5f5"
/>
<title>
Austria
</title>
</svg>
<svg
class="MuiSvgIcon-root emotion-15 emotion-12"
focusable="false"
role="img"
viewBox="0 0 512 512"
<svg
viewBox="0 0 513 342"
>
<path
d="M0 0h513v342H0z"
fill="#10338c"
/>
<g
fill="#FFF"
>
<path
d="M222.2 170.7c.3-.3.5-.6.8-.9-.2.3-.5.6-.8.9zM188 212.6l11 22.9 24.7-5.7-11 22.8 19.9 15.8-24.8 5.6.1 25.4-19.9-15.9-19.8 15.9.1-25.4-24.8-5.6 19.9-15.8-11.1-22.8 24.8 5.7zm197.9 28.5l5.2 10.9 11.8-2.7-5.3 10.9 9.5 7.5-11.8 2.6v12.2l-9.4-7.6-9.5 7.6.1-12.2-11.8-2.6 9.5-7.5-5.3-10.9 11.8 2.7zm-48.6-116l5.2 10.9 11.8-2.7-5.3 10.9 9.5 7.5-11.8 2.7v12.1l-9.4-7.6-9.5 7.6.1-12.1-11.9-2.7 9.5-7.5-5.3-10.9L332 136zm48.6-66.2l5.2 10.9 11.8-2.7-5.3 10.9 9.5 7.5-11.8 2.7v12.1l-9.4-7.6-9.5 7.6.1-12.1-11.8-2.7 9.5-7.5-5.3-10.9 11.8 2.7zm42.5 49.7l5.2 10.9 11.8-2.7-5.3 10.9 9.5 7.5-11.8 2.6V150l-9.4-7.6-9.5 7.6v-12.2l-11.8-2.6 9.5-7.5-5.3-10.9 11.8 2.7zM398 166.5l4.1 12.7h13.3l-10.8 7.8 4.2 12.7-10.8-7.9-10.8 7.9 4.1-12.7-10.7-7.8h13.3z"
/>
<path
d="M254.8 0v30.6l-45.1 25.1h45.1V115h-59.1l59.1 32.8v22.9h-26.7l-73.5-40.9v40.9H99v-48.6l-87.4 48.6H-1.2v-30.6L44 115H-1.2V55.7h59.1L-1.2 22.8V0h26.7L99 40.8V0h55.6v48.6L242.1 0z"
/>
</g>
<path
d="M142.8 0h-32v69.3h-112v32h112v69.4h32v-69.4h112v-32h-112z"
fill="#D80027"
/>
<path
d="M154.6 115l100.2 55.7v-15.8L183 115z"
fill="#0052B4"
/>
<path
d="M154.6 115l100.2 55.7v-15.8L183 115z"
fill="#FFF"
/>
<path
d="M154.6 115l100.2 55.7v-15.8L183 115zm-83.9 0l-71.9 39.9v15.8L99 115z"
fill="#D80027"
/>
<path
d="M99 55.7L-1.2 0v15.7l71.9 40z"
fill="#0052B4"
/>
<path
d="M99 55.7L-1.2 0v15.7l71.9 40z"
fill="#FFF"
/>
<path
d="M99 55.7L-1.2 0v15.7l71.9 40zm84 0l71.8-40V0L154.6 55.7z"
fill="#D80027"
/>
</svg>
</div>
<div
class="emotion-15 emotion-16"
>
<path
d="M473.655 88.276H38.345C17.167 88.276 0 105.443 0 126.621v73.471h512v-73.471c0-21.178-17.167-38.345-38.345-38.345z"
fill="#464655"
/>
<path
d="M0 385.379c0 21.177 17.167 38.345 38.345 38.345h435.31c21.177 0 38.345-17.167 38.345-38.345v-73.471H0v73.471z"
fill="#ffe15a"
/>
<path
d="M0 200.09h512V311.9H0z"
fill="#ff4b55"
/>
<title>
Germany
</title>
</svg>
<svg
class="MuiSvgIcon-root emotion-15 emotion-12"
focusable="false"
role="img"
viewBox="-60 -40 240 160"
<svg
viewBox="0 85.333 512 341.333"
>
<path
d="M0 85.331h512v341.337H0z"
fill="#D80027"
/>
<path
d="M0 85.331h512v113.775H0z"
/>
<path
d="M0 312.882h512v113.775H0z"
fill="#FFDA44"
/>
</svg>
</div>
<div
class="emotion-15 emotion-16"
>
<rect
fill="#fe0000"
height="100%"
width="100%"
x="-60"
y="-40"
/>
<rect
fill="#000095"
height="50%"
width="50%"
x="-60"
y="-40"
/>
<path
d="M8 0L0 30-8 0l8-30M0 8l30-8L0-8l-30 8"
fill="#fff"
id="prefix__a"
/>
<use
transform="rotate(30)"
xlink:href="#prefix__a"
/>
<use
transform="rotate(60)"
xlink:href="#prefix__a"
/>
<circle
fill="#000095"
r="17"
/>
<circle
fill="#fff"
r="15"
/>
<title>
Taiwan
</title>
</svg>
<svg
viewBox="0 85.333 512 341.333"
>
<path
d="M0 85.337h512v341.326H0z"
fill="#D80027"
/>
<path
d="M0 85.337h256V256H0z"
fill="#0052B4"
/>
<path
d="M186.435 170.669L162.558 181.9l12.714 23.125-25.927-4.961-3.286 26.192L128 206.993l-18.06 19.263-3.285-26.192-25.927 4.96 12.714-23.125-23.877-11.23 23.877-11.231-12.714-23.125 25.927 4.96 3.286-26.192L128 134.344l18.06-19.263 3.285 26.192 25.928-4.96-12.715 23.125z"
fill="#FFF"
/>
<circle
cx="128"
cy="170.674"
fill="#0052B4"
r="29.006"
/>
<path
d="M128 190.06c-10.692 0-19.391-8.7-19.391-19.391 0-10.692 8.7-19.391 19.391-19.391 10.692 0 19.391 8.7 19.391 19.391 0 10.691-8.699 19.391-19.391 19.391z"
fill="#FFF"
/>
</svg>
</div>
</span>
</span>
</div>

View file

@ -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';

View file

@ -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<Language, { translation: TFunctionKeys; icon: React.ReactElement }> = {
'fr-FR': {
translation: 'lng.french',
icon: <France size="md" />,
icon: <Flags.FR />,
},
'pt-BR': {
translation: 'lng.portuguese',
icon: <Brazil size="md" />,
icon: <Flags.BR />,
},
'de-DE': {
translation: 'lng.german',
icon: <Germany size="md" />,
icon: <Flags.DE />,
},
'es-ES': {
translation: 'lng.spanish',
icon: <Spain size="md" />,
icon: <Flags.ES />,
},
'zh-CN': {
translation: 'lng.chinese',
icon: <China size="md" />,
icon: <Flags.CN />,
},
'ru-RU': {
translation: 'lng.russian',
icon: <Russia size="md" />,
icon: <Flags.RU />,
},
'tr-TR': {
translation: 'lng.turkish',
icon: <Turkey size="md" />,
icon: <Flags.TR />,
},
'uk-UA': {
translation: 'lng.ukraine',
icon: <Ukraine size="md" />,
icon: <Flags.UA />,
},
'km-KH': {
translation: 'lng.khmer',
icon: <Khmer size="md" />,
icon: <Flags.KH />,
},
'ja-JP': {
translation: 'lng.japanese',
icon: <Japan size="md" />,
icon: <Flags.JP />,
},
'en-US': {
translation: 'lng.english',
icon: <Usa size="md" />,
icon: <Flags.US />,
},
'cs-CZ': {
translation: 'lng.czech',
icon: <Czech size="md" />,
icon: <Flags.CZ />,
},
'zh-TW': {
translation: 'lng.chineseTraditional',
icon: <Taiwan size="md" />,
icon: <Flags.TW />,
},
};

View file

@ -1,23 +0,0 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SvgIcon } from '../SvgIcon';
type Props = React.ComponentProps<typeof SvgIcon>;
const Austria = React.forwardRef(function Austria(props: Props, ref: React.Ref<SVGSVGElement>) {
const { t } = useTranslation();
return (
<SvgIcon viewBox="0 0 512 512" {...props} ref={ref} title={t('flag.austria')}>
<path
d="M473.655 88.276H38.345C17.167 88.276 0 105.443 0 126.621v73.471h512v-73.471c0-21.178-17.167-38.345-38.345-38.345zM0 385.379c0 21.177 17.167 38.345 38.345 38.345h435.31c21.177 0 38.345-17.167 38.345-38.345v-73.471H0v73.471z"
fill="#ff4b55"
/>
<path fill="#f5f5f5" d="M0 200.09h512V311.9H0z" />
</SvgIcon>
);
});
Austria.displayName = 'Austria';
export { Austria };

View file

@ -1,44 +0,0 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SvgIcon } from '../SvgIcon';
type Props = React.ComponentProps<typeof SvgIcon>;
const Brazil = React.forwardRef(function Brazil(props: Props, ref: React.Ref<SVGSVGElement>) {
const { t } = useTranslation();
return (
<SvgIcon viewBox="0 0 45 45" {...props} ref={ref} title={t('flag.brazil')}>
<defs>
<clipPath id="prefix__a">
<path d="M0 36h36V0H0v36z" />
</clipPath>
</defs>
<g clipPath="url(#prefix__a)" transform="matrix(1.25 0 0 -1.25 0 45)">
<path
d="M36 9a4 4 0 00-4-4H4a4 4 0 00-4 4v18a4 4 0 004 4h28a4 4 0 004-4V9z"
fill="#009b3a"
/>
<path d="M32.727 18L18 6.876 3.27 18 18 29.125 32.727 18z" fill="#fedf01" />
<path
d="M24.434 18.076a6.458 6.458 0 11-12.917 0 6.458 6.458 0 0112.917 0"
fill="#002776"
/>
<path
d="M12.277 21.113a6.406 6.406 0 01-.672-2.023c3.994.29 9.417-1.892 11.744-4.596.402.604.7 1.28.882 2.004-2.871 2.809-7.916 4.63-11.954 4.615"
fill="#cbe9d4"
/>
<path d="M13 16.767h-1v1h1v-1zm1-2h-1v1h1v-1z" fill="#88c9f9" />
<path
d="M16 16.767h-1v1h1v-1zm2-1h-1v1h1v-1zm4-2h-1v1h1v-1zm-3-1h-1v1h1v-1zm3 6h-1v1h1v-1z"
fill="#55acee"
/>
<path d="M20 14.767h-1v1h1v-1z" fill="#3b88c3" />
</g>
</SvgIcon>
);
});
Brazil.displayName = 'Brazil';
export { Brazil };

View file

@ -1,33 +0,0 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SvgIcon } from '../SvgIcon';
type Props = React.ComponentProps<typeof SvgIcon>;
const China = React.forwardRef(function China(props: Props, ref: React.Ref<SVGSVGElement>) {
const { t } = useTranslation();
return (
<SvgIcon viewBox="0 0 45 45" {...props} ref={ref} title={t('flag.china')}>
<defs>
<clipPath id="prefix__a">
<path d="M0 36h36V0H0v36z" />
</clipPath>
</defs>
<g clipPath="url(#prefix__a)" transform="matrix(1.25 0 0 -1.25 0 45)">
<path
d="M36 9a4 4 0 00-4-4H4a4 4 0 00-4 4v18a4 4 0 004 4h28a4 4 0 004-4V9z"
fill="#de2910"
/>
<path
d="M7 25.049l.929-2.67 2.826-.06-2.253-1.706.819-2.707L7 19.52l-2.321-1.615.819 2.707-2.253 1.707 2.826.059.929 2.67zm6 3.423l.34-.688.759-.11-.549-.536.129-.756-.679.357-.679-.357.13.756-.55.536.76.11.339.688zm2-4l.34-.688.759-.11-.549-.536.129-.756-.679.357-.679-.357.13.756-.55.536.76.11.339.688zm0-4l.34-.688.759-.11-.549-.536.129-.756-.679.357-.679-.357.13.756-.55.536.76.11.339.688zm-2-3.999l.34-.69.759-.11-.549-.534.129-.757-.679.357-.679-.357.13.757-.55.535.76.11.339.689z"
fill="#ffde02"
/>
</g>
</SvgIcon>
);
});
China.displayName = 'China';
export { China };

View file

@ -1,21 +0,0 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SvgIcon } from '../SvgIcon';
type Props = React.ComponentProps<typeof SvgIcon>;
const Czech = React.forwardRef(function Czech(props: Props, ref: React.Ref<SVGSVGElement>) {
const { t } = useTranslation();
return (
<SvgIcon viewBox="0 0 45 45" {...props} ref={ref} title={t('flag.czech')}>
<path fill="#d7141a" d="M0 22.5h45v16H0z" />
<path fill="#fff" d="M0 6.5h45v16H0z" />
<path d="M22.5 22.5L0 6.5v32z" fill="#11457e" />
</SvgIcon>
);
});
Czech.displayName = 'Czech';
export { Czech };

View file

@ -1,27 +0,0 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SvgIcon } from '../SvgIcon';
type Props = React.ComponentProps<typeof SvgIcon>;
const France = React.forwardRef(function France(props: Props, ref: React.Ref<SVGSVGElement>) {
const { t } = useTranslation();
return (
<SvgIcon viewBox="0 0 512 512" {...props} ref={ref} title={t('flag.france')}>
<path
d="M38.345 88.273C17.167 88.273 0 105.44 0 126.618v258.759c0 21.177 17.167 38.345 38.345 38.345h132.322V88.273H38.345z"
fill="#41479b"
/>
<path fill="#f5f5f5" d="M170.67 88.277h170.67v335.45H170.67z" />
<path
d="M473.655 88.273H341.333v335.448h132.322c21.177 0 38.345-17.167 38.345-38.345V126.618c0-21.178-17.167-38.345-38.345-38.345z"
fill="#ff4b55"
/>
</SvgIcon>
);
});
France.displayName = 'France';
export { France };

View file

@ -1,27 +0,0 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SvgIcon } from '../SvgIcon';
type Props = React.ComponentProps<typeof SvgIcon>;
const Germany = React.forwardRef(function Germany(props: Props, ref: React.Ref<SVGSVGElement>) {
const { t } = useTranslation();
return (
<SvgIcon viewBox="0 0 512 512" {...props} ref={ref} title={t('flag.germany')}>
<path
d="M473.655 88.276H38.345C17.167 88.276 0 105.443 0 126.621v73.471h512v-73.471c0-21.178-17.167-38.345-38.345-38.345z"
fill="#464655"
/>
<path
d="M0 385.379c0 21.177 17.167 38.345 38.345 38.345h435.31c21.177 0 38.345-17.167 38.345-38.345v-73.471H0v73.471z"
fill="#ffe15a"
/>
<path fill="#ff4b55" d="M0 200.09h512V311.9H0z" />
</SvgIcon>
);
});
Germany.displayName = 'Germany';
export { Germany };

View file

@ -1,44 +0,0 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SvgIcon } from '../SvgIcon';
type Props = React.ComponentProps<typeof SvgIcon>;
const India = React.forwardRef(function India(props: Props, ref: React.Ref<SVGSVGElement>) {
const { t } = useTranslation();
return (
<SvgIcon viewBox="0 0 512 512" {...props} ref={ref} title={t('flag.india')}>
<path
d="M0 384c0 31.418 25.473 56.889 56.889 56.889H455.11c31.42 0 56.89-25.473 56.89-56.889v-56.889H0V384z"
fill="#138808"
/>
<path d="M0 327.111h512V184.89H0v142.22z" fill="#eee" />
<path
d="M512 184.889V128c0-31.417-25.473-56.889-56.889-56.889H56.89C25.472 71.111 0 96.583 0 128v56.889h512z"
fill="#f93"
/>
<path
d="M312.889 256c0-31.431-25.473-56.902-56.903-56.902-31.417 0-56.888 25.472-56.888 56.902 0 31.418 25.472 56.889 56.888 56.889 31.432 0 56.903-25.472 56.903-56.889"
fill="navy"
/>
<path
d="M298.666 256c0-23.566-19.115-42.681-42.681-42.681S213.319 232.434 213.319 256s19.1 42.666 42.666 42.666 42.681-19.1 42.681-42.666"
fill="#eee"
/>
<path
d="M256 213.334l2.076 32.199 14.251-28.943-10.396 30.535 24.235-21.305-21.291 24.249 30.535-10.396-28.942 14.25L298.666 256l-32.198 2.076 28.942 14.237-30.535-10.383 21.291 24.235-24.235-21.29 10.396 30.535-14.25-28.942L256 298.666l-2.076-32.198-14.252 28.942 10.397-30.535-24.249 21.291 21.305-24.235-30.535 10.383 28.942-14.236L213.334 256l32.199-2.076-28.943-14.251 30.535 10.396-21.305-24.249 24.249 21.305-10.396-30.535 14.25 28.943 2.077-32.2z"
fill="navy"
opacity={0.6}
/>
<path
d="M241.778 256c0-7.851 6.37-14.223 14.222-14.223s14.223 6.372 14.223 14.223-6.372 14.223-14.223 14.223-14.223-6.372-14.223-14.223"
fill="navy"
/>
</SvgIcon>
);
});
India.displayName = 'India';
export { India };

View file

@ -1,23 +0,0 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SvgIcon } from '../SvgIcon';
type Props = React.ComponentProps<typeof SvgIcon>;
const Japan = React.forwardRef(function Japan(props: Props, ref: React.Ref<SVGSVGElement>) {
const { t } = useTranslation();
return (
<SvgIcon viewBox="0 0 512 512" {...props} ref={ref} title={t('flag.japan')}>
<path
d="M473.655 88.275H38.345C17.167 88.275 0 105.442 0 126.62v258.76c0 21.177 17.167 38.345 38.345 38.345h435.31c21.177 0 38.345-17.167 38.345-38.345V126.62c0-21.178-17.167-38.345-38.345-38.345z"
fill="#f5f5f5"
/>
<circle cx={256} cy={255.999} r={97.1} fill="#ff4b55" />
</SvgIcon>
);
});
Japan.displayName = 'Japan';
export { Japan };

View file

@ -1,40 +0,0 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SvgIcon } from '../SvgIcon';
type Props = React.ComponentProps<typeof SvgIcon>;
const Khmer = React.forwardRef(function Khmer(props: Props, ref: React.Ref<SVGSVGElement>) {
const { t } = useTranslation();
return (
<SvgIcon viewBox="0 0 512 512" {...props} ref={ref} title={t('flag.khmer')}>
<path
d="M0 304.8v64.8a48.3 48.3 0 0048 48.8h400c26.4 0 48-21.6 48-48.8v-64.8H0zM448 77.6H48c-26.4 0-48 21.6-48 48.8v64.8h496v-64.8a48.3 48.3 0 00-48-48.8z"
fill="#032ea1"
/>
<path fill="#e00025" d="M0 189.6h496v116H0z" />
<path
d="M448 418.4c26.4 0 48-21.6 48-48.8v-64.8H315.2L448 418.4zm0-340.8H48l132.8 113.6H496v-64.8a48.3 48.3 0 00-48-48.8z"
fill="#042a7f"
/>
<path fill="#b50030" d="M316 306.4h180V189.6H180z" />
<path fill="#002566" d="M448 77.6H48l370.4 113.6H496v-64.8a48.3 48.3 0 00-48-48.8z" />
<path fill="#8c002b" d="M496 214.4v-24.8h-81.6z" />
<path fill="#002566" d="M496 369.6a48.3 48.3 0 01-48 48.8H48c-26.4 0-48-21.6-48-48.8" />
<g fill="#fff">
<path d="M249.6 200s0-2.4-1.6-2.4-1.6 2.4-1.6 2.4h3.2zm72 90.4v-7.2h-24 20v-6.4h-4V272h-16H312v-4h-3.2c-.8-.8-2.4-1.6-2.4-3.2v-12c.8-1.6 1.6-3.2 2.4-3.2v-11.2c-1.6 0-2.4 1.6-2.4 1.6v-4.8h-1.6v9.6-6.4h-2.4 2.4v-1.6h-2.4v-5.6c-.8 0-.8 2.4-2.4 2.4-.8 0-.8-.8 0-1.6s.8-1.6 0-4c-.8 1.6-1.6 1.6-1.6.8.8-1.6 1.6-1.6.8-4 0 2.4-1.6 2.4-1.6.8 0-1.6.8-1.6 0-4-.8 2.4-1.6 2.4-1.6.8 0-2.4 0-4-2.4-4.8 0 0 0-1.6-.8-1.6s-.8 1.6-.8 1.6c-2.4.8-2.4 3.2-2.4 4.8s-.8 1.6-1.6-.8c-.8 1.6 0 2.4 0 4s-.8 1.6-1.6-.8c-.8 2.4 0 2.4.8 4 0 .8-.8.8-1.6-.8-.8 1.6 0 3.2 0 4 .8.8.8 1.6 0 1.6-1.6 0-1.6-2.4-2.4-2.4v9.6H280v-.8h-1.6v.8H264V232c-1.6.8-1.6 1.6-1.6 1.6v7.2-5.6h-1.6s-.8 0-.8-1.6.8-2.4 1.6-2.4V228s-3.2 0-3.2 4v-3.2c-.8 0-.8.8-.8 4h-2.4 1.6v-3.2c0-1.6 1.6-1.6 1.6-3.2V224c-.8 2.4-1.6 1.6-1.6.8s.8-1.6 2.4-4c.8-.8 0-2.4-.8-3.2 0 1.6-.8 2.4-1.6 2.4s-.8 0-.8-1.6c0-.8.8-1.6.8-3.2.8-1.6 0-2.4-.8-3.2 0 1.6 0 2.4-.8 2.4-1.6-.8 0-3.2 0-3.2 0-.8-.8-2.4-.8-2.4-.8 1.6-.8 1.6-1.6 1.6s-.8-1.6 0-2.4c.8-.8.8-1.6 0-1.6-.8 1.6-1.6.8-1.6 0l.8-2.4h-10.4l.8 2.4c0 .8-.8.8-1.6 0-.8.8-.8 1.6 0 1.6.8.8.8 1.6 0 2.4-.8 0-.8 0-1.6-1.6 0 0-.8 1.6-.8 2.4 0 .8 1.6 3.2 0 3.2-.8 0-.8-.8-.8-2.4-.8.8-.8 1.6-.8 3.2 0 .8.8 1.6.8 3.2 0 .8-.8 1.6-.8 1.6-.8 0-.8-.8-1.6-2.4-.8.8-.8 3.2-.8 3.2 1.6 2.4 2.4 3.2 2.4 4s-.8 1.6-1.6-.8c-.8.8 0 2.4 0 2.4 0 1.6 1.6 1.6 1.6 3.2v3.2h1.6-2.4c0-3.2 0-4-.8-4v3.2c0-3.2-3.2-3.2-3.2-3.2v3.2c.8 0 1.6.8 1.6 2.4s-.8 1.6-.8 1.6h-1.6v5.6-7.2s0-1.6-1.6-1.6v8.8h-14.4V240h-1.6v.8h-3.2v-9.6c-.8 0-.8 2.4-2.4 2.4-.8 0-.8-.8 0-1.6s.8-1.6 0-4c-.8 1.6-1.6 1.6-1.6.8.8-1.6 1.6-1.6.8-4 0 2.4-1.6 2.4-1.6.8 0-1.6.8-1.6 0-4-.8 2.4-1.6 2.4-1.6.8 0-2.4 0-4-2.4-4.8 0 0 0-1.6-.8-1.6s-.8 1.6-.8 1.6c-2.4.8-2.4 3.2-2.4 4.8s-.8 1.6-1.6-.8c-.8 1.6 0 2.4 0 4s-.8 1.6-1.6-.8c-.8 2.4 0 2.4.8 4 0 .8-.8.8-1.6-.8-.8 1.6 0 3.2 0 4 .8.8.8 1.6 0 1.6-1.6 0-1.6-2.4-2.4-2.4v5.6h-2.4v-.8h-1.6v4s-.8-1.6-2.4-1.6v12c.8 0 2.4 1.6 2.4 3.2v12c0 1.6-1.6 2.4-2.4 3.2h-.8v3.2h13.6-16v4.8h-4v6.4h20-24v7.2h-4v7.2h156v-7.2h-4zm-16.8-25.6zm-2.4-17.6v.8-.8zm-3.2.8h4-4zm-105.6-9.6h-2.4 2.4zm3.2 10.4h-3.2 3.2zm12-.8h4-4zm-.8 24h35.2H208zm35.2 11.2H208h35.2zm.8-50.4zm8 0zm32 15.2h3.2-3.2c-.8.8-.8 0 0 0zm4 35.2h-36 36zm0-11.2h-36 36z" />
<path d="M252.8 205.6v-2.4h-9.6v2.4zm-.8-2.4v-1.6h-8v1.6zm-1.6-1.6V200h-4.8v1.6z" />
</g>
<g fill="#cecece">
<path d="M231.2 232v2.4l1.6 1.6v-1.6c0-.8 0-2.4-1.6-2.4z" />
<path d="M321.6 283.2h-24 20v-6.4h-4V272h-16H312v-4h-3.2c-.8-.8-2.4-1.6-2.4-3.2v-12c.8-1.6 1.6-3.2 2.4-3.2v-11.2c-1.6 0-2.4 1.6-2.4 1.6v-4.8h-1.6v9.6-6.4h-2.4 2.4v-1.6h-2.4v-5.6c-.8 0-.8 2.4-2.4 2.4-.8 0-.8-.8 0-1.6s.8-1.6 0-4c-.8 1.6-1.6 1.6-1.6.8.8-1.6 1.6-1.6.8-4 0 2.4-1.6 2.4-1.6.8 0-1.6.8-1.6 0-4-.8 2.4-1.6 2.4-1.6.8 0-2.4 0-4-2.4-4.8 0 0 0-1.6-.8-1.6s-.8 1.6-.8 1.6c-2.4.8-2.4 3.2-2.4 4.8s-.8 1.6-1.6-.8c-.8 1.6 0 2.4 0 4s-.8 1.6-1.6-.8c-.8 2.4 0 2.4.8 4 0 .8-.8.8-1.6-.8-.8 1.6 0 3.2 0 4 .8.8.8 1.6 0 1.6-1.6 0-1.6-2.4-2.4-2.4v9.6H280v-.8h-1.6v.8H264V232c-1.6.8-1.6 1.6-1.6 1.6v7.2-5.6h-1.6s-.8 0-.8-1.6.8-2.4 1.6-2.4V228s-3.2 0-3.2 4v-3.2c-.8 0-.8.8-.8 4h-.8v-3.2c0-1.6 1.6-1.6 1.6-3.2V224c-.8 2.4-1.6 1.6-1.6.8s.8-1.6 2.4-4c.8-.8 0-2.4-.8-3.2 0 1.6-.8 2.4-1.6 2.4s-.8 0-.8-1.6c0-.8.8-1.6.8-3.2.8-1.6 0-2.4-.8-3.2 0 1.6 0 2.4-.8 2.4-1.6-.8 0-3.2 0-3.2 0-.8-.8-2.4-.8-2.4-.8 1.6-.8 1.6-1.6 1.6s-.8-1.6 0-2.4c.8-.8.8-1.6 0-1.6-.8 1.6-1.6.8-1.6 0l.8-2.4h-10.4l.8 2.4c0 .8-.8.8-1.6 0-.8.8-.8 1.6 0 1.6.8.8.8 1.6 0 2.4-.8 0-.8 0-1.6-1.6 0 0-.8 1.6-.8 2.4 0 .8 1.6 3.2 0 3.2-.8 0-.8-.8-.8-2.4-.8.8-.8 1.6-.8 3.2 0 .8.8 1.6.8 3.2 0 .8-.8 1.6-.8 1.6-.8 0-.8-.8-1.6-2.4-.8.8-.8 3.2-.8 3.2 1.6 2.4 2.4 3.2 2.4 4s-.8 1.6-1.6-.8c-.8.8 0 2.4 0 2.4 0 1.6 1.6 1.6 1.6 3.2v3.2h-.8c0-3.2 0-4-.8-4v3.2c0-3.2-3.2-3.2-3.2-3.2v3.2c.8 0 1.6.8 1.6 2.4s-.8 1.6-.8 1.6h-1.6l42.4 36.8H288h-12l31.2 26.4h19.2V292h-4v-8.8h-.8zm-19.2-36v.8-.8zm-3.2.8h4-4zm-12 .8h-4 4zM248 197.6c-1.6 0-1.6 2.4-1.6 2.4h2.4c.8 0 .8-2.4-.8-2.4z" />
<path d="M243.2 203.2v2.4h9.6v-2.4zm8.8 0v-1.6h-8v1.6zm-1.6-1.6V200h-4.8v1.6z" />
</g>
</SvgIcon>
);
});
Khmer.displayName = 'Khmer';
export { Khmer };

View file

@ -1,66 +0,0 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SvgIcon } from '../SvgIcon';
type Props = React.ComponentProps<typeof SvgIcon>;
const Nicaragua = React.forwardRef(function Nicaragua(props: Props, ref: React.Ref<SVGSVGElement>) {
const { t } = useTranslation();
return (
<SvgIcon viewBox="0 0 512 512" {...props} ref={ref} title={t('flag.nicaragua')}>
<path
d="M512 384c0 31.418-25.473 56.889-56.889 56.889H56.89C25.472 440.889 0 415.417 0 384V128c0-31.418 25.472-56.889 56.889-56.889H455.11C486.53 71.111 512 96.584 512 128v256z"
fill="#265fb5"
/>
<path d="M512 327.111H0V184.89h512v142.22z" fill="#eee" />
<path
d="M320.811 256c0 35.797-29.014 64.811-64.811 64.811-35.783 0-64.811-29.014-64.811-64.811s29.027-64.811 64.811-64.811c35.797 0 64.811 29.013 64.811 64.811"
fill="#a9bf4c"
/>
<path
d="M312.889 256c0 31.418-25.473 56.889-56.889 56.889S199.111 287.416 199.111 256s25.473-56.889 56.889-56.889 56.889 25.471 56.889 56.889"
fill="#eee"
/>
<path d="M209.891 286.649l45.909-79.517 45.909 79.517H209.89z" fill="#265fb5" />
<path d="M215.04 283.591l40.818-70.685 40.803 70.685H215.04z" fill="#55acee" />
<path d="M215.04 283.591l9.841-17.052 61.483-.783 10.297 17.835H215.04z" fill="#bbddf5" />
<path
d="M222.891 272.441l15.331-12.445 6.67 7.553 5.774-6.215 4.893 4.892 4.665-5.12 5.561 5.12 5.106-5.334 4.665 5.334 4.451-4.892 7.325 9.102 1.338 2.674s-7.78 1.55-18.446.669c-10.667-.896-16.882 1.55-25.33 2.66-8.448 1.109-23.553-1.109-23.553-1.109l1.55-2.889z"
fill="#5c913b"
/>
<path
d="M237.995 262.67l10.226 11.107-5.12.442-5.774-8.434.668-3.115zm12.231.883l8.22 7.338-3.782.654-3.996-5.546-.442-2.446zm10.439-.442l7.111 6.67L266 270.89l-5.774-6.229.44-1.55zm9.33 0l-2.888 2.66 1.338 1.565 1.55-4.225zm8.889.228l-3.328 4.224 1.109 1.99 2.446-4.664-.227-1.55z"
fill="#e2f09f"
/>
<path
d="M256.426 233.671l.939 13.227 7.566-10.867-5.675 11.805 11.805-5.66-10.851 7.553 13.213.939-13.213.952 10.851 7.553-11.805-5.66 5.675 11.805-7.566-10.867-.939 13.226-.939-13.226-7.566 10.867 5.675-11.805-11.805 5.66 10.851-7.553-13.212-.953 13.212-.938-10.85-7.553 11.804 5.66-5.675-11.805 7.566 10.866.94-13.226z"
fill="#bbddf5"
/>
<path
d="M256 244.665l-2.66 2.66s.654 4.011.441 4.679C253.554 252.658 256 256 256 256l3.327-3.996-.88-5.334-2.447-2.005z"
fill="#dd2e44"
/>
<path
d="M257.28 240.071c10.894 0 17.109 5.334 17.109 5.334l-3.996-7.111s-6.443-4.893-13.995-4.893c-7.567 0-16 6.001-16 6.001l-3.783 7.553s9.771-6.884 20.665-6.884"
fill="#269"
/>
<path
d="M257.28 240.071c10.894 0 17.109 5.334 17.109 5.334l-2.888-5.106s-7.78-4.665-15.331-4.665-16.896 5.987-16.896 5.987l-2.66 5.334c.001 0 9.772-6.884 20.666-6.884"
fill="#ffcc4d"
/>
<path
d="M257.28 240.071c10.894 0 17.109 5.334 17.109 5.334l-2.005-3.327s-5.988-4.224-16.214-3.783c-7.553 0-18.005 5.561-18.005 5.561l-1.55 3.1c0-.001 9.771-6.885 20.665-6.885"
fill="#dd2e44"
/>
<path
d="M264.291 322.873h-14.165V309.29h14.165v13.582zm-16.426-118.898h-10.183l-5.106-12.459 10.198-1.137 5.091 13.596zm23.21 5.66l-6.784-2.261 3.385-16.426 13.028 1.137-9.629 17.55zm-61.141 69.646l-19.811 4.523-.57-13.583 19.812-2.83.569 11.89zm5.106 14.152l-16.426 6.812-3.954-10.766 15.289-5.106 5.091 9.06zm109.269-12.444l-18.105-5.091v-9.63l20.366-2.83-2.261 17.55zm-9.003 18.674l-16.981-7.937 5.646-10.182 18.703 5.66-7.368 12.459z"
fill="#eee"
/>
</SvgIcon>
);
});
Nicaragua.displayName = 'Nicaragua';
export { Nicaragua };

View file

@ -1,27 +0,0 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SvgIcon } from '../SvgIcon';
type Props = React.ComponentProps<typeof SvgIcon>;
const Russia = React.forwardRef(function Russia(props: Props, ref: React.Ref<SVGSVGElement>) {
const { t } = useTranslation();
return (
<SvgIcon viewBox="0 0 512 512" {...props} ref={ref} title={t('flag.russia')}>
<path
d="M473.655 88.276H38.345C17.167 88.276 0 105.443 0 126.621v73.471h512v-73.471c0-21.178-17.167-38.345-38.345-38.345z"
fill="#f5f5f5"
/>
<path d="M0 200.09h512V311.9H0z" fill="#0039a6" />
<path
d="M0 385.379c0 21.177 17.167 38.345 38.345 38.345h435.31c21.177 0 38.345-17.167 38.345-38.345v-73.471H0v73.471z"
fill="#d52b1e"
/>
</SvgIcon>
);
});
Russia.displayName = 'Russia';
export { Russia };

View file

@ -1,43 +0,0 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SvgIcon } from '../SvgIcon';
type Props = React.ComponentProps<typeof SvgIcon>;
const Spain = React.forwardRef(function Spain(props: Props, ref: React.Ref<SVGSVGElement>) {
const { t } = useTranslation();
return (
<SvgIcon viewBox="0 0 45 45" {...props} ref={ref} title={t('flag.spain')}>
<defs>
<clipPath id="prefix__a">
<path d="M0 36h36V0H0v36z" />
</clipPath>
</defs>
<g clipPath="url(#prefix__a)" transform="matrix(1.25 0 0 -1.25 0 45)">
<path
d="M36 9a4 4 0 00-4-4H4a4 4 0 00-4 4v18a4 4 0 004 4h28a4 4 0 004-4V9z"
fill="#c60a1d"
/>
<path d="M36 12H0v12h36V12z" fill="#ffc400" />
<path d="M9 19v-3a3 3 0 116 0v3H9z" fill="#ea596e" />
<path d="M12 17h3v3h-3v-3z" fill="#f4a2b2" />
<path d="M12 17H9v3h3v-3z" fill="#dd2e44" />
<path
d="M15 21.5c0-.829-1.343-1.5-3-1.5s-3 .671-3 1.5 1.343 1.5 3 1.5 3-.671 3-1.5"
fill="#ea596e"
/>
<path
d="M15 22.25c0 .414-1.343.75-3 .75s-3-.336-3-.75 1.343-.75 3-.75 3 .336 3 .75"
fill="#ffac33"
/>
<path d="M7 13h1v7H7v-7zm10 0h-1v7h1v-7z" fill="#99aab5" />
<path d="M9 13H6v1h3v-1zm9 0h-3v1h3v-1zM8 20H7v1h1v-1zm9 0h-1v1h1v-1z" fill="#66757f" />
</g>
</SvgIcon>
);
});
Spain.displayName = 'Spain';
export { Spain };

View file

@ -1,25 +0,0 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SvgIcon } from '../SvgIcon';
type Props = React.ComponentProps<typeof SvgIcon>;
const Taiwan = React.forwardRef(function Taiwan(props: Props, ref: React.Ref<SVGSVGElement>) {
const { t } = useTranslation();
return (
<SvgIcon viewBox="-60 -40 240 160" {...props} ref={ref} title={t('flag.taiwan')}>
<rect x={-60} y={-40} width="100%" height="100%" fill="#fe0000" />
<rect x={-60} y={-40} width="50%" height="50%" fill="#000095" />
<path id="prefix__a" d="M8 0L0 30-8 0l8-30M0 8l30-8L0-8l-30 8" fill="#fff" />
<use xlinkHref="#prefix__a" transform="rotate(30)" />
<use xlinkHref="#prefix__a" transform="rotate(60)" />
<circle r={17} fill="#000095" />
<circle r={15} fill="#fff" />
</SvgIcon>
);
});
Taiwan.displayName = 'Taiwan';
export { Taiwan };

View file

@ -1,23 +0,0 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SvgIcon } from '../SvgIcon';
type Props = React.ComponentProps<typeof SvgIcon>;
const Turkey = React.forwardRef(function Turkey(props: Props, ref: React.Ref<SVGSVGElement>) {
const { t } = useTranslation();
return (
<SvgIcon viewBox="0 0 512 512" {...props} ref={ref} title={t('flag.turkey')}>
<path fill="#d80027" d="M0 85.337h512v341.326H0z" />
<g fill="#f0f0f0">
<path d="M247.213 216.787l17.594 24.246 28.493-9.239-17.621 24.224 17.592 24.244-28.484-9.274-17.621 24.225.018-29.955-28.484-9.275 28.494-9.239z" />
<path d="M199.202 316.602c-33.469 0-60.602-27.133-60.602-60.602s27.133-60.602 60.602-60.602c10.436 0 20.254 2.639 28.827 7.284-13.448-13.152-31.84-21.269-52.135-21.269-41.193 0-74.586 33.394-74.586 74.586s33.394 74.586 74.586 74.586c20.295 0 38.687-8.117 52.135-21.269-8.572 4.647-18.391 7.286-28.827 7.286z" />
</g>
</SvgIcon>
);
});
Turkey.displayName = 'Turkey';
export { Turkey };

View file

@ -1,30 +0,0 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SvgIcon } from '../SvgIcon';
type Props = React.ComponentProps<typeof SvgIcon>;
const Ukraine = React.forwardRef(function Ukraine(props: Props, ref: React.Ref<SVGSVGElement>) {
const { t } = useTranslation();
return (
<SvgIcon viewBox="0 0 512 512" {...props} ref={ref} title={t('flag.ukraine')}>
<path
d="M0 248v121.6C0 396.8 21.6 416 48 416h400c26.4 0 48-19.2 48-46.4V248H0z"
fill="#fdce0c"
/>
<path d="M248 248l197.6 168c26.4 0 50.4-19.2 50.4-46.4V248H248z" fill="#f4ba00" />
<path
d="M448 80H48C21.6 80 0 99.2 0 126.4V248h496V126.4c0-27.2-21.6-46.4-48-46.4z"
fill="#44c1ef"
/>
<path d="M448 80H48l200 168h248V126.4c0-27.2-21.6-46.4-48-46.4z" fill="#18b4ea" />
<path d="M496 368.8c0 29.6-21.6 47.2-48 47.2H48c-26.4 0-48-20.8-48-48" fill="#f2a700" />
<path d="M48 80h400c26.4 0 48 19.2 48 46.4V216" fill="#10a2e2" />
</SvgIcon>
);
});
Ukraine.displayName = 'Ukraine';
export { Ukraine };

File diff suppressed because one or more lines are too long

View file

@ -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';

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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';

View file

@ -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';

View file

@ -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(

View file

@ -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"

View file

@ -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