sombochea/verdaccio-ui
1
0
Fork 1
mirror of https://github.com/SomboChea/ui synced 2026-01-19 09:36:30 +07:00
Code Issues Releases Wiki Activity

feat(i18n): added i18next for user interface translations (#432)

Browse Source
This commit is contained in:
Priscila Oliveira
2020-03-08 16:45:07 +01:00
committed by GitHub
parent 8d4b3cee7e
commit 7428384b55
76 changed files with 1114 additions and 720 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/App/App.tsx
View File

@@ -1,18 +1,22 @@
import React, { useState, useEffect } from 'react';
/* eslint-disable react/jsx-max-depth */
import React, { useState, useEffect, Suspense } from 'react';
import styled from '@emotion/styled';
import isNil from 'lodash/isNil';
import { Router } from 'react-router-dom';
import '../../i18n/config';
import storage from '../utils/storage';
import { isTokenExpire } from '../utils/login';
import Header from '../components/Header';
import Footer from '../components/Footer';
import Loading from '../components/Loading';
import Box from '../muiComponents/Box';
import StyleBaseline from '../design-tokens/StyleBaseline';
import { Theme } from '../design-tokens/theme';
import AppContextProvider from './AppContextProvider';
import AppRoute, { history } from './AppRoute';
import loadDayJSLocale from './load-dayjs-locale';
const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
backgroundColor: theme && theme.palette.white,
@@ -31,7 +35,6 @@ const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
/* eslint-disable react-hooks/exhaustive-deps */
const App: React.FC = () => {
const [user, setUser] = useState();
/**
* Logout user
* Required by: <Header />
@@ -57,10 +60,11 @@ const App: React.FC = () => {
useEffect(() => {
checkUserAlreadyLoggedIn();
loadDayJSLocale();
}, []);
return (
<>
<Suspense fallback={<Loading />}>
<StyleBaseline />
<StyledBox display="flex" flexDirection="column" height="100%">
<>
@@ -68,7 +72,6 @@ const App: React.FC = () => {
<AppContextProvider user={user}>
<Header />
<StyledBoxContent flexGrow={1}>
{/* eslint-disable-next-line react/jsx-max-depth */}
<AppRoute />
</StyledBoxContent>
</AppContextProvider>
@@ -76,7 +79,7 @@ const App: React.FC = () => {
<Footer />
</>
</StyledBox>
</>
</Suspense>
);
};

66
src/App/AppRoute.tsx
View File

@@ -1,8 +1,7 @@
import React, { lazy, useContext, Suspense } from 'react';
import React, { lazy, useContext } from 'react';
import { Route as ReactRouterDomRoute, Switch, Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import Loading from '../components/Loading';
import { useTranslation } from 'react-i18next';
import AppContext from './AppContext';
@@ -25,9 +24,10 @@ export const history = createBrowserHistory({
const AppRoute: React.FC = () => {
const appContext = useContext(AppContext);
const { t } = useTranslation();
if (!appContext) {
throw Error('The app Context was not correct used');
throw Error(t('app-context-not-correct-used'));
}
const { user } = appContext;
@@ -36,36 +36,34 @@ const AppRoute: React.FC = () => {
return (
<Router history={history}>
<Suspense fallback={<Loading />}>
<Switch>
<ReactRouterDomRoute exact={true} path={Route.ROOT}>
<HomePage isUserLoggedIn={!!isUserLoggedIn} />
</ReactRouterDomRoute>
<ReactRouterDomRoute exact={true} path={Route.PACKAGE}>
<VersionContextProvider>
<VersionPage />
</VersionContextProvider>
</ReactRouterDomRoute>
<ReactRouterDomRoute exact={true} path={Route.PACKAGE_VERSION}>
<VersionContextProvider>
<VersionPage />
</VersionContextProvider>
</ReactRouterDomRoute>
<ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE_VERSION}>
<VersionContextProvider>
<VersionPage />
</VersionContextProvider>
</ReactRouterDomRoute>
<ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE}>
<VersionContextProvider>
<VersionPage />
</VersionContextProvider>
</ReactRouterDomRoute>
<ReactRouterDomRoute>
<NotFound />
</ReactRouterDomRoute>
</Switch>
</Suspense>
<Switch>
<ReactRouterDomRoute exact={true} path={Route.ROOT}>
<HomePage isUserLoggedIn={!!isUserLoggedIn} />
</ReactRouterDomRoute>
<ReactRouterDomRoute exact={true} path={Route.PACKAGE}>
<VersionContextProvider>
<VersionPage />
</VersionContextProvider>
</ReactRouterDomRoute>
<ReactRouterDomRoute exact={true} path={Route.PACKAGE_VERSION}>
<VersionContextProvider>
<VersionPage />
</VersionContextProvider>
</ReactRouterDomRoute>
<ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE_VERSION}>
<VersionContextProvider>
<VersionPage />
</VersionContextProvider>
</ReactRouterDomRoute>
<ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE}>
<VersionContextProvider>
<VersionPage />
</VersionContextProvider>
</ReactRouterDomRoute>
<ReactRouterDomRoute>
<NotFound />
</ReactRouterDomRoute>
</Switch>
</Router>
);
};

263
src/App/__snapshots__/App.test.tsx.snap
View File

@@ -152,53 +152,6 @@ exports[`<App /> should display the Header component 1`] = `
}
}
.emotion-34 {
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
position: absolute;
}
.emotion-28 {
margin: 0 0 30px 0;
border-radius: 25px;
box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
background: #f7f8f6;
}
.emotion-26 {
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
background-position: center;
background-size: contain;
background-image: url([object Object]);
background-repeat: no-repeat;
width: 90px;
height: 90px;
}
.emotion-32 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.emotion-30 {
color: #4b5e40;
}
.emotion-76 {
background: #f9f9f9;
border-top: 1px solid #e3e3e3;
@@ -356,6 +309,53 @@ exports[`<App /> should display the Header component 1`] = `
height: auto;
}
.emotion-34 {
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
position: absolute;
}
.emotion-28 {
margin: 0 0 30px 0;
border-radius: 25px;
box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
background: #f7f8f6;
}
.emotion-26 {
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
background-position: center;
background-size: contain;
background-image: url([object Object]);
background-repeat: no-repeat;
width: 90px;
height: 90px;
}
.emotion-32 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.emotion-30 {
color: #4b5e40;
}
<div
class="MuiBox-root MuiBox-root-219 emotion-78 emotion-79"
>
@@ -545,6 +545,7 @@ exports[`<App /> should display the Header component 1`] = `
>
<div
class="container content"
data-testid="home-page-container"
>
<div
class="emotion-34 emotion-35"
@@ -592,13 +593,13 @@ exports[`<App /> should display the Header component 1`] = `
<div
class="emotion-65 emotion-66"
>
Made with
Made with
<span
class="emotion-38 emotion-39"
>
♥
</span>
on
on
<span
class="emotion-63 emotion-64"
>
@@ -700,7 +701,7 @@ exports[`<App /> should display the Header component 1`] = `
`;
exports[`<App /> should display the Loading component at the beginning 1`] = `
.emotion-78 {
.emotion-68 {
background-color: #fff;
}
@@ -843,7 +844,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
}
@media screen and (min-width:1240px) {
.emotion-36 {
.emotion-26 {
max-width: 1240px;
width: 100%;
margin-left: auto;
@@ -851,54 +852,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
}
}
.emotion-34 {
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
position: absolute;
}
.emotion-28 {
margin: 0 0 30px 0;
border-radius: 25px;
box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
background: #f7f8f6;
}
.emotion-26 {
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
background-position: center;
background-size: contain;
background-image: url([object Object]);
background-repeat: no-repeat;
width: 90px;
height: 90px;
}
.emotion-32 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.emotion-30 {
color: #4b5e40;
}
.emotion-76 {
.emotion-66 {
background: #f9f9f9;
border-top: 1px solid #e3e3e3;
color: #999999;
@@ -906,7 +860,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
padding: 20px;
}
.emotion-74 {
.emotion-64 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -923,7 +877,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
}
@media (min-width:768px) {
.emotion-74 {
.emotion-64 {
min-width: 400px;
max-width: 800px;
margin: auto;
@@ -935,12 +889,12 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
}
@media (min-width:1024px) {
.emotion-74 {
.emotion-64 {
max-width: 1240px;
}
}
.emotion-65 {
.emotion-55 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@@ -949,7 +903,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
}
@media (min-width:768px) {
.emotion-65 {
.emotion-55 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -957,21 +911,21 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
}
}
.emotion-38 {
.emotion-28 {
color: #e25555;
padding: 0 5px;
}
.emotion-63 {
.emotion-53 {
position: relative;
height: 18px;
}
.emotion-63:hover .emotion-62 {
.emotion-53:hover .emotion-52 {
visibility: visible;
}
.emotion-41 {
.emotion-31 {
box-sizing: initial;
display: inline-block;
cursor: default;
@@ -980,7 +934,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
padding: 0 10px;
}
.emotion-61 {
.emotion-51 {
position: absolute;
background: #d3dddd;
padding: 1px 4px;
@@ -998,7 +952,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
top: -2px;
}
.emotion-61:before {
.emotion-51:before {
content: '';
position: absolute;
top: 29%;
@@ -1011,7 +965,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
transform: rotate(90deg);
}
.emotion-44 {
.emotion-34 {
box-sizing: initial;
display: inline-block;
cursor: default;
@@ -1020,7 +974,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
padding: 0 5px;
}
.emotion-72 {
.emotion-62 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@@ -1033,7 +987,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
}
@media (min-width:768px) {
.emotion-72 {
.emotion-62 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -1041,7 +995,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
}
}
.emotion-70 {
.emotion-60 {
box-sizing: initial;
display: inline-block;
cursor: pointer;
@@ -1050,13 +1004,14 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
padding: 0 5px;
}
.emotion-67 {
.emotion-57 {
width: 100%;
height: auto;
}
<div
class="MuiBox-root MuiBox-root-2 emotion-78 emotion-79"
class="MuiBox-root MuiBox-root-2 emotion-68 emotion-69"
style="display: none;"
>
<header
class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-24 emotion-25 MuiAppBar-colorPrimary"
@@ -1240,65 +1195,29 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
</div>
</header>
<div
class="MuiBox-root MuiBox-root-195 emotion-36 emotion-37"
>
<div
class="emotion-34 emotion-35"
data-testid="loading"
>
<div
class="emotion-28 emotion-29"
>
<div
class="emotion-26 emotion-1"
/>
</div>
<div
class="emotion-32 emotion-33"
>
<div
class="MuiCircularProgress-root emotion-30 emotion-31 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
role="progressbar"
style="width: 50px; height: 50px;"
>
<svg
class="MuiCircularProgress-svg"
viewBox="22 22 44 44"
>
<circle
class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
cx="44"
cy="44"
fill="none"
r="20.2"
stroke-width="3.6"
/>
</svg>
</div>
</div>
</div>
</div>
class="MuiBox-root MuiBox-root-195 emotion-26 emotion-27"
/>
<div
class="emotion-76 emotion-77"
class="emotion-66 emotion-67"
>
<div
class="emotion-74 emotion-75"
class="emotion-64 emotion-65"
>
<div
class="emotion-65 emotion-66"
class="emotion-55 emotion-56"
>
Made with
Made with
<span
class="emotion-38 emotion-39"
class="emotion-28 emotion-29"
>
♥
</span>
on
on
<span
class="emotion-63 emotion-64"
class="emotion-53 emotion-54"
>
<svg
class="emotion-40 emotion-41 emotion-42"
class="emotion-30 emotion-31 emotion-32"
>
<title>
Earth
@@ -1308,10 +1227,10 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
/>
</svg>
<span
class="emotion-61 emotion-62"
class="emotion-51 emotion-52"
>
<svg
class="emotion-43 emotion-44 emotion-42"
class="emotion-33 emotion-34 emotion-32"
>
<title>
Spain
@@ -1321,7 +1240,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
/>
</svg>
<svg
class="emotion-43 emotion-44 emotion-42"
class="emotion-33 emotion-34 emotion-32"
>
<title>
Nicaragua
@@ -1331,7 +1250,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
/>
</svg>
<svg
class="emotion-43 emotion-44 emotion-42"
class="emotion-33 emotion-34 emotion-32"
>
<title>
India
@@ -1341,7 +1260,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
/>
</svg>
<svg
class="emotion-43 emotion-44 emotion-42"
class="emotion-33 emotion-34 emotion-32"
>
<title>
Brazil
@@ -1351,7 +1270,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
/>
</svg>
<svg
class="emotion-43 emotion-44 emotion-42"
class="emotion-33 emotion-34 emotion-32"
>
<title>
China
@@ -1361,7 +1280,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
/>
</svg>
<svg
class="emotion-43 emotion-44 emotion-42"
class="emotion-33 emotion-34 emotion-32"
>
<title>
Austria
@@ -1374,16 +1293,16 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
</span>
</div>
<div
class="emotion-72 emotion-73"
class="emotion-62 emotion-63"
>
Powered by
<span
class="emotion-43 emotion-70 emotion-71"
class="emotion-33 emotion-60 emotion-61"
title="Verdaccio"
>
<img
alt="Verdaccio"
class="emotion-67 emotion-68"
class="emotion-57 emotion-58"
src="[object Object]"
/>
</span>

40
src/App/load-dayjs-locale.ts Normal file
View File

@@ -0,0 +1,40 @@
import dayjs from 'dayjs';
import i18n from 'i18next';
function getFallFackLanguage(): string | undefined {
const fallbackLanguage = i18n.options.fallbackLng;
if (Array.isArray(fallbackLanguage)) {
return fallbackLanguage[0];
}
if (typeof fallbackLanguage === 'string') {
return fallbackLanguage;
}
return undefined;
}
function loadDayJSLocale() {
const fallbackLanguage = getFallFackLanguage();
const locale = i18n.language || fallbackLanguage;
// dayjs loades en-US by default
if (!locale || locale === 'en-US') {
return;
}
switch (locale.toLowerCase()) {
// At the moment we only support pt-BR, please see: i18n/translations/*
case 'pt-br':
{
require('dayjs/locale/pt-br');
dayjs.locale('pt-br');
}
break;
default:
break;
}
}
export default loadDayJSLocale;