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

This commit is contained in:
Priscila Oliveira 2020-03-08 16:45:07 +01:00 committed by GitHub
parent 8d4b3cee7e
commit 7428384b55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
76 changed files with 1114 additions and 720 deletions

32
i18n/config.ts Normal file
View File

@ -0,0 +1,32 @@
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import translationEN from './translations/en-US.json';
import translationPT from './translations/pt-BR.json';
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,
fallbackLng: 'en-US',
whitelist: ['en-US', 'pt-BR'],
load: 'currentOnly',
resources: {
'en-US': {
translation: translationEN,
},
'pt-BR': {
translation: translationPT,
},
},
debug: false,
interpolation: {
escapeValue: false, // react already safes from xss
},
});
export default i18n;

View File

@ -0,0 +1,138 @@
{
"copy-to-clipboard": "Copy to clipboard",
"author-anonymous": "Anonymous",
"action-bar-action": {
"visit-home-page": "Visit homepage",
"open-an-issue": "Open an issue",
"download-tarball": "Download tarball"
},
"dialog": {
"registry-info": {
"title": "Register Info"
}
},
"header": {
"documentation": "Documentation",
"registry-info": "Registry Information",
"greetings": "Hi "
},
"search": {
"packages": "Search Packages"
},
"auto-complete": {
"loading": "Loading...",
"no-results-found": "No results found."
},
"tab": {
"uplinks": "Uplinks",
"versions": "Versions",
"dependencies": "Dependencies",
"readme": "Readme"
},
"uplinks": {
"title": "Uplinks",
"no-items": "{{name}} has no uplinks."
},
"versions": {
"current-tags": "Current Tags",
"version-history": "Version history",
"not-available": "Not available"
},
"package": {
"published-on": "Published on {{time}} •",
"version": "v{{version}}",
"visit-home-page": "Visit homepage",
"homepage": "Homepage",
"open-an-issue": "Open an issue",
"bugs": "Bugs",
"download": "Download {{what}}",
"the-tar-file": "the tar file",
"tarball": "Tarball"
},
"dependencies": {
"has-no-dependencies": "{{package}} has no dependencies.",
"dependency-block": "{{package}}@{{version}}"
},
"form": {
"username": "Username",
"password": "Password"
},
"form-placeholder": {
"username": "Your username",
"password": "Your strong password"
},
"form-validation": {
"required-field": "This field is required",
"required-min-length": "This field required the min length of {{length}}",
"unable-to-sign-in": "Unable to sign in",
"username-or-password-cant-be-empty": "Username or password can't be empty!"
},
"help": {
"title": "No Package Published Yet.",
"sub-title": "To publish your first package just:",
"first-step": "1. Login",
"first-step-command-line": "npm adduser --registry {{registryUrl}}",
"second-step": "2. Publish",
"second-step-command-line": "npm publish --registry {{registryUrl}}",
"third-step": "3. Refresh this page."
},
"sidebar": {
"detail": {
"latest-version": "Latest v{{version}}",
"version": "v{{version}}"
},
"installation": {
"title": "Installation",
"install-using-yarn": "Install using yarn",
"install-using-yarn-command": "yarn add {{packageName}}",
"install-using-npm": "Install using npm",
"install-using-npm-command": "npm install {{packageName}}",
"install-using-pnpm": "Install using pnpm",
"install-using-pnpm-command": "pnpm install {{packageName}}"
},
"repository": {
"title": "Repository"
},
"author": {
"title": "Author"
},
"distribution": {
"title": "Latest Distribution",
"license": "License",
"size": "Size",
"file-count": "file count"
},
"maintainers": {
"title": "Maintainers"
},
"contributors": {
"title": "Contributors"
},
"engines": {
"npm-version": "NPM Version",
"node-js": "NODE JS"
}
},
"footer": {
"powered-by": "Powered by",
"made-with-love-on": "Made with <0>♥</0> on"
},
"button": {
"close": "Close",
"cancel": "Cancel",
"login": "Login",
"logout": "Logout",
"go-to-the-home-page": "Go to the home page",
"learn-more": "Learn More",
"fund-this-package": "<0>Fund</0> this package"
},
"error": {
"unspecific": "Something went wrong.",
"404": {
"page-not-found": "404 - Page not found",
"sorry-we-could-not-find-it": "Sorry, we couldn't find it..."
},
"app-context-not-correct-used": "The app context was not correct used",
"package-meta-is-required-at-detail-context": "packageMeta is required at DetailContext"
}
}

View File

@ -0,0 +1,138 @@
{
"copy-to-clipboard": "Copiar para área de transferência",
"author-anonymous": "Anônimo(a)",
"action-bar-action": {
"visit-home-page": "Visitar a página inicial",
"open-an-issue": "Criar um incidente",
"download-tarball": "Baixar Tarball"
},
"dialog": {
"registry-info": {
"title": "Informações do Registro"
}
},
"header": {
"documentation": "Documentação",
"registry-info": "Informações do Registro",
"greetings": "Oi "
},
"search": {
"packages": "Pesquisar Pacotes"
},
"auto-complete": {
"loading": "Carregando...",
"no-results-found": "Nenhum resultado encontrado."
},
"tab": {
"uplinks": "Uplinks",
"versions": "Versões",
"dependencies": "Dependências",
"readme": "Leia-me"
},
"uplinks": {
"title": "Uplinks",
"no-items": "{{name}} não tem uplinks."
},
"versions": {
"current-tags": "Tags atuais",
"version-history": "Histórico de versões",
"not-available": "Não disponível"
},
"package": {
"published-on": "Publicado em {{time}} •",
"version": "v{{version}}",
"visit-home-page": "Visitar a página inicial",
"homepage": "Página inicial",
"open-an-issue": "Criar um incidente",
"bugs": "Erros",
"download": "Baixar {{what}}",
"the-tar-file": "o arquivo tar",
"tarball": "Tarball"
},
"dependencies": {
"has-no-dependencies": "{{package}} não tem dependências.",
"dependency-block": "{{package}}@{{version}}"
},
"form": {
"username": "Nome do usuário",
"password": "Senha"
},
"form-placeholder": {
"username": "O seu nome",
"password": "A sua senha forte"
},
"form-validation": {
"required-field": "Este campo é obrigatório",
"required-min-length": "Este campo requer o mínimo de {{length}} caracteres",
"unable-to-sign-in": "Não foi possível fazer login",
"username-or-password-cant-be-empty": "Nome de usuário ou senha não podem estar vazios!"
},
"help": {
"title": "Nenhum pacote publicado ainda.",
"sub-title": "Para publicar seu primeiro pacote apenas:",
"first-step": "1. Faça login",
"first-step-command-line": "npm adduser --registry {{registryUrl}}",
"second-step": "2. Publique",
"second-step-command-line": "npm publish --registry {{registryUrl}}",
"third-step": "3. Atualize esta página."
},
"sidebar": {
"detail": {
"latest-version": "Última versão: v{{version}}",
"version": "v{{version}}"
},
"installation": {
"title": "Instalação",
"install-using-yarn": "Instale usando yarn",
"install-using-yarn-command": "yarn add {{packageName}}",
"install-using-npm": "Instale usando npm",
"install-using-npm-command": "npm install {{packageName}}",
"install-using-pnpm": "Instale usando pnpm",
"install-using-pnpm-command": "pnpm install {{packageName}}"
},
"repository": {
"title": "Repositório"
},
"author": {
"title": "Autor(a)"
},
"distribution": {
"title": "Distribuição mais recente",
"license": "Licença",
"size": "Tamanho",
"file-count": "Contagem de arquivos"
},
"maintainers": {
"title": "Mantenedores(as)"
},
"contributors": {
"title": "Contribuidores(as)"
},
"engines": {
"npm-version": "Versão NPM",
"node-js": "NODE JS"
}
},
"footer": {
"powered-by": "Distribuído por",
"made-with-love-on": "Feito com amor <0>♥</0> no(a)"
},
"button": {
"close": "Fechar",
"cancel": "Cancelar",
"login": "Conectar",
"logout": "Desconectar",
"go-to-the-home-page": "Ir para a página inicial",
"learn-more": "Leia mais",
"fund-this-package": "<0>Financie</0> este pacote"
},
"error": {
"unspecific": "Algo deu errado.",
"404": {
"page-not-found": "404 - Página não encontrada",
"sorry-we-could-not-find-it": "Desculpe, não conseguimos encontrar..."
},
"app-context-not-correct-used": "O contexto do aplicativo não foi usado corretamente",
"package-meta-is-required-at-detail-context": "packageMeta é requerido em DetailContext"
}
}

View File

@ -71,6 +71,7 @@
"github-markdown-css": "3.0.1", "github-markdown-css": "3.0.1",
"html-webpack-plugin": "3.2.0", "html-webpack-plugin": "3.2.0",
"husky": "3.1.0", "husky": "3.1.0",
"i18next": "19.1.0",
"identity-obj-proxy": "3.0.0", "identity-obj-proxy": "3.0.0",
"in-publish": "2.0.0", "in-publish": "2.0.0",
"jest": "24.9.0", "jest": "24.9.0",
@ -99,6 +100,7 @@
"react-dom": "16.13.0", "react-dom": "16.13.0",
"react-hook-form": "3.29.4", "react-hook-form": "3.29.4",
"react-hot-loader": "4.12.18", "react-hot-loader": "4.12.18",
"react-i18next": "11.3.1",
"react-router-dom": "5.1.2", "react-router-dom": "5.1.2",
"request": "2.88.0", "request": "2.88.0",
"resolve-url-loader": "3.1.1", "resolve-url-loader": "3.1.1",
@ -138,7 +140,7 @@
"bundlesize": [ "bundlesize": [
{ {
"path": "./static/vendors.*.js", "path": "./static/vendors.*.js",
"maxSize": "185 kB" "maxSize": "200 kB"
}, },
{ {
"path": "./static/main.*.js", "path": "./static/main.*.js",

View File

@ -4976,8 +4976,12 @@
"_attachments": { "_attachments": {
"jquery-1.5.1.tgz": { "jquery-1.5.1.tgz": {
"shasum": "2ae2d661e906c1a01e044a71bb5b2743942183e5" "shasum": "2ae2d661e906c1a01e044a71bb5b2743942183e5"
},
"jquery-3.3.1.tgz": {
"shasum": "958ce29e81c9790f31be7792df5d4d95fc57fbca"
} }
}, },
"_rev": "60-fed4915c27b9c1e6", "_rev": "61-e6be890a78963127",
"readme": "# jQuery\n\n> jQuery is a fast, small, and feature-rich JavaScript library.\n\nFor information on how to get started and how to use jQuery, please see [jQuery's documentation](http://api.jquery.com/).\nFor source files and issues, please visit the [jQuery repo](https://github.com/jquery/jquery).\n\nIf upgrading, please see the [blog post for 3.3.1](https://blog.jquery.com/2017/03/20/jquery-3.3.1-now-available/). This includes notable differences from the previous version and a more readable changelog.\n\n## Including jQuery\n\nBelow are some of the most common ways to include jQuery.\n\n### Browser\n\n#### Script tag\n\n```html\n<script src=\"https://code.jquery.com/jquery-3.3.1.min.js\"></script>\n```\n\n#### Babel\n\n[Babel](http://babeljs.io/) is a next generation JavaScript compiler. One of the features is the ability to use ES6/ES2015 modules now, even though browsers do not yet support this feature natively.\n\n```js\nimport $ from \"jquery\";\n```\n\n#### Browserify/Webpack\n\nThere are several ways to use [Browserify](http://browserify.org/) and [Webpack](https://webpack.github.io/). For more information on using these tools, please refer to the corresponding project's documention. In the script, including jQuery will usually look like this...\n\n```js\nvar $ = require(\"jquery\");\n```\n\n#### AMD (Asynchronous Module Definition)\n\nAMD is a module format built for the browser. For more information, we recommend [require.js' documentation](http://requirejs.org/docs/whyamd.html).\n\n```js\ndefine([\"jquery\"], function($) {\n\n});\n```\n\n### Node\n\nTo include jQuery in [Node](nodejs.org), first install with npm.\n\n```sh\nnpm install jquery\n```\n\nFor jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as [jsdom](https://github.com/tmpvar/jsdom). This can be useful for testing purposes.\n\n```js\nrequire(\"jsdom\").env(\"\", function(err, window) {\n\tif (err) {\n\t\tconsole.error(err);\n\t\treturn;\n\t}\n\n\tvar $ = require(\"jquery\")(window);\n});\n```" "readme": "# jQuery\n\n> jQuery is a fast, small, and feature-rich JavaScript library.\n\nFor information on how to get started and how to use jQuery, please see [jQuery's documentation](http://api.jquery.com/).\nFor source files and issues, please visit the [jQuery repo](https://github.com/jquery/jquery).\n\nIf upgrading, please see the [blog post for 3.3.1](https://blog.jquery.com/2017/03/20/jquery-3.3.1-now-available/). This includes notable differences from the previous version and a more readable changelog.\n\n## Including jQuery\n\nBelow are some of the most common ways to include jQuery.\n\n### Browser\n\n#### Script tag\n\n```html\n<script src=\"https://code.jquery.com/jquery-3.3.1.min.js\"></script>\n```\n\n#### Babel\n\n[Babel](http://babeljs.io/) is a next generation JavaScript compiler. One of the features is the ability to use ES6/ES2015 modules now, even though browsers do not yet support this feature natively.\n\n```js\nimport $ from \"jquery\";\n```\n\n#### Browserify/Webpack\n\nThere are several ways to use [Browserify](http://browserify.org/) and [Webpack](https://webpack.github.io/). For more information on using these tools, please refer to the corresponding project's documention. In the script, including jQuery will usually look like this...\n\n```js\nvar $ = require(\"jquery\");\n```\n\n#### AMD (Asynchronous Module Definition)\n\nAMD is a module format built for the browser. For more information, we recommend [require.js' documentation](http://requirejs.org/docs/whyamd.html).\n\n```js\ndefine([\"jquery\"], function($) {\n\n});\n```\n\n### Node\n\nTo include jQuery in [Node](nodejs.org), first install with npm.\n\n```sh\nnpm install jquery\n```\n\nFor jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as [jsdom](https://github.com/tmpvar/jsdom). This can be useful for testing purposes.\n\n```js\nrequire(\"jsdom\").env(\"\", function(err, window) {\n\tif (err) {\n\t\tconsole.error(err);\n\t\treturn;\n\t}\n\n\tvar $ = require(\"jquery\")(window);\n});\n```",
"_id": "jquery"
} }

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

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

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

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;

View File

@ -3,6 +3,7 @@ import styled from '@emotion/styled';
import BugReportIcon from '@material-ui/icons/BugReport'; import BugReportIcon from '@material-ui/icons/BugReport';
import DownloadIcon from '@material-ui/icons/CloudDownload'; import DownloadIcon from '@material-ui/icons/CloudDownload';
import HomeIcon from '@material-ui/icons/Home'; import HomeIcon from '@material-ui/icons/Home';
import { useTranslation } from 'react-i18next';
import Tooltip from '../../muiComponents/Tooltip'; import Tooltip from '../../muiComponents/Tooltip';
import Link from '../Link'; import Link from '../Link';
@ -26,10 +27,11 @@ export interface ActionBarActionProps {
/* eslint-disable react/jsx-no-bind */ /* eslint-disable react/jsx-no-bind */
const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => { const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
const { t } = useTranslation();
switch (type) { switch (type) {
case 'VISIT_HOMEPAGE': case 'VISIT_HOMEPAGE':
return ( return (
<Tooltip title="Visit homepage"> <Tooltip title={t('action-bar-action.visit-home-page')}>
<Link external={true} to={link}> <Link external={true} to={link}>
<Fab size="small"> <Fab size="small">
<HomeIcon /> <HomeIcon />
@ -39,7 +41,7 @@ const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
); );
case 'OPEN_AN_ISSUE': case 'OPEN_AN_ISSUE':
return ( return (
<Tooltip title="Open an issue"> <Tooltip title={t('action-bar-action.open-an-issue')}>
<Link external={true} to={link}> <Link external={true} to={link}>
<Fab size="small"> <Fab size="small">
<BugReportIcon /> <BugReportIcon />
@ -49,7 +51,7 @@ const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
); );
case 'DOWNLOAD_TARBALL': case 'DOWNLOAD_TARBALL':
return ( return (
<Tooltip title="Download tarball"> <Tooltip title={t('action-bar-action.download-tarball')}>
<Fab data-testid="download-tarball-btn" onClick={downloadTarball(link)} size="small"> <Fab data-testid="download-tarball-btn" onClick={downloadTarball(link)} size="small">
<DownloadIcon /> <DownloadIcon />
</Fab> </Fab>

View File

@ -1,14 +1,17 @@
import React, { FC, useContext } from 'react'; import React, { FC, useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { DetailContext } from '../../pages/Version'; import { DetailContext } from '../../pages/Version';
import { isEmail } from '../../utils/url'; import { isEmail } from '../../utils/url';
import Avatar from '../../muiComponents/Avatar'; import Avatar from '../../muiComponents/Avatar';
import List from '../../muiComponents/List'; import List from '../../muiComponents/List';
import { getAuthorName } from '../../utils/package';
import { StyledText, AuthorListItem, AuthorListItemText } from './styles'; import { StyledText, AuthorListItem, AuthorListItemText } from './styles';
const Author: FC = () => { const Author: FC = () => {
const { packageMeta } = useContext(DetailContext); const { packageMeta } = useContext(DetailContext);
const { t } = useTranslation();
if (!packageMeta) { if (!packageMeta) {
return null; return null;
@ -25,7 +28,7 @@ const Author: FC = () => {
const avatarComponent = <Avatar alt={author.name} src={author.avatar} />; const avatarComponent = <Avatar alt={author.name} src={author.avatar} />;
return ( return (
<List subheader={<StyledText variant={'subtitle1'}>{'Author'}</StyledText>}> <List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.author.title')}</StyledText>}>
<AuthorListItem button={true}> <AuthorListItem button={true}>
{!email || !isEmail(email) ? ( {!email || !isEmail(email) ? (
avatarComponent avatarComponent
@ -34,8 +37,7 @@ const Author: FC = () => {
{avatarComponent} {avatarComponent}
</a> </a>
)} )}
{name && <AuthorListItemText primary={getAuthorName(name)} />}
<AuthorListItemText primary={name} />
</AuthorListItem> </AuthorListItem>
</List> </List>
); );

View File

@ -1,5 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Author /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"mailto:verdaccio.user@verdaccio.org?subject=verdaccio@4.0.0\\" target=\\"_top\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div></a><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`; exports[`<Author /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-5wp24z-StyledText e1xuehjw0 MuiTypography-subtitle1\\">sidebar.author.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"mailto:verdaccio.user@verdaccio.org?subject=verdaccio@4.0.0\\" target=\\"_top\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div></a><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
exports[`<Author /> component should render the component when there is no author email 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`; exports[`<Author /> component should render the component when there is no author email 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-5wp24z-StyledText e1xuehjw0 MuiTypography-subtitle1\\">sidebar.author.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

View File

@ -7,7 +7,6 @@ import { Theme } from '../../design-tokens/theme';
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({ export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: props.theme && props.theme.fontWeight.bold, fontWeight: props.theme && props.theme.fontWeight.bold,
textTransform: 'capitalize',
})); }));
export const AuthorListItem = styled(ListItem)({ export const AuthorListItem = styled(ListItem)({

View File

@ -3,6 +3,7 @@ import styled from '@emotion/styled';
import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } from 'react-autosuggest'; import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } from 'react-autosuggest';
import match from 'autosuggest-highlight/match'; import match from 'autosuggest-highlight/match';
import parse from 'autosuggest-highlight/parse'; import parse from 'autosuggest-highlight/parse';
import { useTranslation } from 'react-i18next';
import MenuItem from '../../muiComponents/MenuItem'; import MenuItem from '../../muiComponents/MenuItem';
import { Theme } from '../../design-tokens/theme'; import { Theme } from '../../design-tokens/theme';
@ -83,12 +84,6 @@ const renderMessage = (message): JSX.Element => {
); );
}; };
const SUGGESTIONS_RESPONSE = {
LOADING: 'Loading...',
FAILURE: 'Something went wrong.',
NO_RESULT: 'No results found.',
};
const AutoComplete = memo( const AutoComplete = memo(
({ ({
suggestions, suggestions,
@ -106,6 +101,8 @@ const AutoComplete = memo(
suggestionsLoaded = false, suggestionsLoaded = false,
suggestionsError = false, suggestionsError = false,
}: Props) => { }: Props) => {
const { t } = useTranslation();
const autosuggestProps = { const autosuggestProps = {
renderInputComponent, renderInputComponent,
suggestions, suggestions,
@ -130,9 +127,9 @@ const AutoComplete = memo(
function renderSuggestionsContainer({ containerProps, children, query }): JSX.Element { function renderSuggestionsContainer({ containerProps, children, query }): JSX.Element {
return ( return (
<SuggestionContainer {...containerProps} square={true}> <SuggestionContainer {...containerProps} square={true}>
{suggestionsLoaded && children === null && query && renderMessage(SUGGESTIONS_RESPONSE.NO_RESULT)} {suggestionsLoaded && children === null && query && renderMessage(t('auto-complete.no-results-found'))}
{suggestionsLoading && query && renderMessage(SUGGESTIONS_RESPONSE.LOADING)} {suggestionsLoading && query && renderMessage(t('auto-complete.loading'))}
{suggestionsError && renderMessage(SUGGESTIONS_RESPONSE.FAILURE)} {suggestionsError && renderMessage(t('error.unspecific'))}
{children} {children}
</SuggestionContainer> </SuggestionContainer>
); );

View File

@ -1,8 +1,8 @@
import FileCopy from '@material-ui/icons/FileCopy'; import FileCopy from '@material-ui/icons/FileCopy';
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next';
import { copyToClipBoardUtility } from '../../utils/cli-utils'; import { copyToClipBoardUtility } from '../../utils/cli-utils';
import { TEXT } from '../../utils/constants';
import Tooltip from '../../muiComponents/Tooltip'; import Tooltip from '../../muiComponents/Tooltip';
import { ClipBoardCopy, ClipBoardCopyText, CopyIcon } from './styles'; import { ClipBoardCopy, ClipBoardCopyText, CopyIcon } from './styles';
@ -20,19 +20,16 @@ const renderText = (text: string, children: React.ReactNode): JSX.Element => {
return <ClipBoardCopyText>{text}</ClipBoardCopyText>; return <ClipBoardCopyText>{text}</ClipBoardCopyText>;
}; };
const renderToolTipFileCopy = (text: string): React.ReactElement<HTMLElement> => (
<Tooltip disableFocusListener={true} title={TEXT.CLIPBOARD_COPY}>
<CopyIcon onClick={copyToClipBoardUtility(text)}>
<FileCopy />
</CopyIcon>
</Tooltip>
);
const CopyToClipBoard: React.FC<Props> = ({ text, children }) => { const CopyToClipBoard: React.FC<Props> = ({ text, children }) => {
const { t } = useTranslation();
return ( return (
<ClipBoardCopy> <ClipBoardCopy>
{renderText(text, children)} {renderText(text, children)}
{renderToolTipFileCopy(text)} <Tooltip disableFocusListener={true} title={t('copy-to-clipboard')}>
<CopyIcon onClick={copyToClipBoardUtility(text)}>
<FileCopy />
</CopyIcon>
</Tooltip>
</ClipBoardCopy> </ClipBoardCopy>
); );
}; };

View File

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<CopyToClipBoard /> component should load the component in default state 1`] = `"<div class=\\"css-1in239f-ClipBoardCopy eb8w2fo0\\"><span class=\\"css-7gar9h-ClipBoardCopyText eb8w2fo1\\">copy text</span><button class=\\"MuiButtonBase-root MuiIconButton-root css-1fs86cq-CopyIcon eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></div>"`; exports[`<CopyToClipBoard /> component should load the component in default state 1`] = `"<div class=\\"css-1in239f-ClipBoardCopy eb8w2fo0\\"><span class=\\"css-7gar9h-ClipBoardCopyText eb8w2fo1\\">copy text</span><button class=\\"MuiButtonBase-root MuiIconButton-root css-1fs86cq-CopyIcon eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"copy-to-clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></div>"`;

View File

@ -1,5 +1,6 @@
import React, { useContext } from 'react'; import React, { useContext } from 'react';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import CardContent from '../../muiComponents/CardContent'; import CardContent from '../../muiComponents/CardContent';
import { PackageDependencies } from '../../../types/packageMeta'; import { PackageDependencies } from '../../../types/packageMeta';
@ -16,6 +17,7 @@ interface DependencyBlockProps {
const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => { const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {
const { enableLoading } = useContext(DetailContext); const { enableLoading } = useContext(DetailContext);
const history = useHistory(); const history = useHistory();
const { t } = useTranslation();
const deps = Object.entries(dependencies); const deps = Object.entries(dependencies);
@ -31,8 +33,14 @@ const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }
<StyledText variant="subtitle1">{`${title} (${deps.length})`}</StyledText> <StyledText variant="subtitle1">{`${title} (${deps.length})`}</StyledText>
<Tags> <Tags>
{deps.map(([name, version]) => ( {deps.map(([name, version]) => (
// eslint-disable-next-line <Tag
<Tag className={'dep-tag'} clickable={true} key={name} label={`${name}@${version}`} onClick={() => handleClick(name)} /> className={'dep-tag'}
clickable={true}
key={name}
label={t('dependencies.dependency-block', { package: name, version })}
// eslint-disable-next-line
onClick={() => handleClick(name)}
/>
))} ))}
</Tags> </Tags>
</CardContent> </CardContent>
@ -46,9 +54,10 @@ function hasKeys(object?: { [key: string]: any }): boolean {
const Dependencies: React.FC<{}> = () => { const Dependencies: React.FC<{}> = () => {
const { packageMeta } = useContext(DetailContext); const { packageMeta } = useContext(DetailContext);
const { t } = useTranslation();
if (!packageMeta) { if (!packageMeta) {
throw new Error('packageMeta is required at DetailContext'); throw new Error(t('error.package-meta-is-required-at-detail-context'));
} }
const { latest } = packageMeta; const { latest } = packageMeta;
@ -72,7 +81,7 @@ const Dependencies: React.FC<{}> = () => {
); );
} }
return <NoItems className="no-dependencies" text={`${name} has no dependencies.`} />; return <NoItems className="no-dependencies" text={t('dependencies.has-no-dependencies', { package: name })} />;
}; };
export default Dependencies; export default Dependencies;

View File

@ -1,4 +1,4 @@
import React, { useCallback, useState, ChangeEvent, useContext } from 'react'; import React, { useState, useContext } from 'react';
import { DetailContext } from '../../pages/Version'; import { DetailContext } from '../../pages/Version';
import Box from '../../muiComponents/Box'; import Box from '../../muiComponents/Box';
@ -8,24 +8,19 @@ import DetailContainerContent from './DetailContainerContent';
import { TabPosition } from './tabs'; import { TabPosition } from './tabs';
const DetailContainer: React.FC = () => { const DetailContainer: React.FC = () => {
const [tabPosition, setTabPosition] = useState(TabPosition.README); const tabs = Object.values(TabPosition);
const [tabPosition, setTabPosition] = useState(0);
const detailContext = useContext(DetailContext); const detailContext = useContext(DetailContext);
const { readMe } = detailContext; const { readMe } = detailContext;
const handleChangeTabPosition = useCallback( const handleChange = (event, newValue) => {
(event: ChangeEvent<{}>) => { setTabPosition(newValue);
event.preventDefault(); };
const eventTarget = event.target as HTMLSpanElement;
const chosentab = eventTarget.innerText as TabPosition;
setTabPosition(TabPosition[chosentab]);
},
[setTabPosition]
);
return ( return (
<Box component="div" display="flex" flexDirection="column" padding={2}> <Box component="div" display="flex" flexDirection="column" padding={2}>
<DetailContainerTabs onChangeTabPosition={handleChangeTabPosition} tabPosition={tabPosition} /> <DetailContainerTabs onChange={handleChange} tabPosition={tabPosition} />
<DetailContainerContent readDescription={readMe} tabPosition={tabPosition} /> <DetailContainerContent readDescription={readMe} tabPosition={tabs[tabPosition]} />
</Box> </Box>
); );
}; };

View File

@ -1,44 +1,35 @@
import React, { ChangeEvent, useState, useEffect } from 'react'; import React from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';
import { default as MuiTabs } from '../../muiComponents/Tabs'; import { default as MuiTabs } from '../../muiComponents/Tabs';
import Tab from '../../muiComponents/Tab'; import Tab from '../../muiComponents/Tab';
import { TabPosition } from './tabs';
interface Props { interface Props {
tabPosition: TabPosition; onChange: (event, newValue) => void;
onChangeTabPosition: (event: ChangeEvent<{}>) => void; tabPosition: number;
} }
const Tabs = styled(MuiTabs)({ const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange }) => {
marginBottom: 16, const { t } = useTranslation();
});
const getTabIndex = (tabPosition: TabPosition): number =>
Object.keys(TabPosition).findIndex(position => position === String(tabPosition).toUpperCase());
const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChangeTabPosition }) => {
const [tabPositionIndex, setTabPositionIndex] = useState(0);
useEffect(() => {
const tabIndex = getTabIndex(tabPosition);
setTabPositionIndex(tabIndex);
}, [tabPosition]);
return ( return (
<Tabs <Tabs
indicatorColor={'primary'} indicatorColor={'primary'}
onChange={onChangeTabPosition} onChange={onChange}
textColor={'primary'} textColor={'primary'}
value={tabPositionIndex} value={tabPosition}
variant={'fullWidth'}> variant={'fullWidth'}>
<Tab data-testid={'readme-tab'} id={'readme-tab'} label={TabPosition.README} /> <Tab data-testid={'readme-tab'} id={'readme-tab'} label={t('tab.readme')} />
<Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={TabPosition.DEPENDENCIES} /> <Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={t('tab.dependencies')} />
<Tab data-testid={'versions-tab'} id={'versions-tab'} label={TabPosition.VERSIONS} /> <Tab data-testid={'versions-tab'} id={'versions-tab'} label={t('tab.versions')} />
<Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={TabPosition.UPLINKS} /> <Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={t('tab.uplinks')} />
</Tabs> </Tabs>
); );
}; };
export default DetailContainerTabs; export default DetailContainerTabs;
const Tabs = styled(MuiTabs)({
marginBottom: 16,
});

View File

@ -1,6 +1,6 @@
export enum TabPosition { export enum TabPosition {
README = 'Readme', README = 'readme',
DEPENDENCIES = 'Dependencies', DEPENDENCIES = 'dependencies',
VERSIONS = 'Versions', VERSIONS = 'versions',
UPLINKS = 'Uplinks', UPLINKS = 'uplinks',
} }

View File

@ -1,6 +1,7 @@
import React, { useContext } from 'react'; import React, { useContext } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import Favorite from '@material-ui/icons/Favorite'; import Favorite from '@material-ui/icons/Favorite';
import { Trans } from 'react-i18next';
import Button from '../../muiComponents/Button'; import Button from '../../muiComponents/Button';
import Link from '../Link'; import Link from '../Link';
@ -38,8 +39,7 @@ const DetailSidebarFundButton: React.FC = () => {
return ( return (
<StyledLink external={true} to={fundingUrl}> <StyledLink external={true} to={fundingUrl}>
<Button color="primary" fullWidth={true} startIcon={<StyledFavoriteIcon />} variant="outlined"> <Button color="primary" fullWidth={true} startIcon={<StyledFavoriteIcon />} variant="outlined">
<StyledFundStrong>{'Fund'}</StyledFundStrong> <Trans components={[<StyledFundStrong key="fund" />]} i18nKey="button.fund-this-package" />
{'this package'}
</Button> </Button>
</StyledLink> </StyledLink>
); );

View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';
import Box from '../../muiComponents/Box'; import Box from '../../muiComponents/Box';
import Heading from '../../muiComponents/Heading'; import Heading from '../../muiComponents/Heading';
@ -21,12 +22,17 @@ const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
color: theme && theme.palette.text.secondary, color: theme && theme.palette.text.secondary,
})); }));
const DetailSidebarTitle: React.FC<Props> = ({ description, packageName, version, isLatest }) => ( const DetailSidebarTitle: React.FC<Props> = ({ description, packageName, version, isLatest }) => {
<Box className={'detail-info'} display="flex" flexDirection="column" marginBottom="8px"> const { t } = useTranslation();
<StyledHeading>{packageName}</StyledHeading> return (
{description && <div>{description}</div>} <Box className={'detail-info'} display="flex" flexDirection="column" marginBottom="8px">
<StyledBoxVersion>{`${isLatest ? 'Latest v' : 'v'}${version}`}</StyledBoxVersion> <StyledHeading>{packageName}</StyledHeading>
</Box> {description && <div>{description}</div>}
); <StyledBoxVersion>
{isLatest ? t('sidebar.detail.latest-version', { version }) : t('sidebar.detail.version', { version })}
</StyledBoxVersion>
</Box>
);
};
export default DetailSidebarTitle; export default DetailSidebarTitle;

View File

@ -3,7 +3,8 @@ import React from 'react';
import { mount } from '../../utils/test-enzyme'; import { mount } from '../../utils/test-enzyme';
import { DetailContextProvider } from '../../pages/Version'; import { DetailContextProvider } from '../../pages/Version';
import Developers, { DeveloperType, Fab } from './Developers'; import Developers, { Fab } from './Developers';
import { DeveloperType } from './types';
describe('test Developers', () => { describe('test Developers', () => {
const packageMeta = { const packageMeta = {

View File

@ -1,38 +1,29 @@
import React, { useState, useCallback, useContext, useEffect, useMemo } from 'react'; import React, { useState, useCallback, useContext, useEffect, useMemo } from 'react';
import Add from '@material-ui/icons/Add'; import Add from '@material-ui/icons/Add';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';
import { DetailContext } from '../../pages/Version'; import { DetailContext } from '../../pages/Version';
import Tooltip from '../../muiComponents/Tooltip'; import Tooltip from '../../muiComponents/Tooltip';
import Avatar from '../../muiComponents/Avatar'; import Avatar from '../../muiComponents/Avatar';
import Box from '../../muiComponents/Box'; import Box from '../../muiComponents/Box';
import Text from '../../muiComponents/Text';
import FloatingActionButton from '../../muiComponents/FloatingActionButton'; import FloatingActionButton from '../../muiComponents/FloatingActionButton';
import { Theme } from '../../design-tokens/theme'; import { Theme } from '../../design-tokens/theme';
import getUniqueDeveloperValues from './get-unique-developer-values'; import getUniqueDeveloperValues from './get-unique-developer-values';
import DevelopersTitle from './DevelopersTitle';
import { DeveloperType } from './types';
export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({ export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({
backgroundColor: props.theme && props.theme.palette.primary.main, backgroundColor: props.theme && props.theme.palette.primary.main,
color: props.theme && props.theme.palette.white, color: props.theme && props.theme.palette.white,
})); }));
export enum DeveloperType {
CONTRIBUTORS = 'contributors',
MAINTAINERS = 'maintainers',
}
interface Props { interface Props {
type: DeveloperType; type: DeveloperType;
visibleMax?: number; visibleMax?: number;
} }
export const StyledText = styled(Text)<{ theme?: Theme }>(({ theme }) => ({
fontWeight: theme && theme.fontWeight.bold,
marginBottom: '10px',
textTransform: 'capitalize',
}));
const StyledBox = styled(Box)({ const StyledBox = styled(Box)({
'> *': { '> *': {
margin: 5, margin: 5,
@ -43,9 +34,10 @@ export const VISIBLE_MAX = 6;
const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => { const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {
const detailContext = useContext(DetailContext); const detailContext = useContext(DetailContext);
const { t } = useTranslation();
if (!detailContext) { if (!detailContext) {
throw Error("The app's detail Context was not correct used"); throw Error(t('app-context-not-correct-used'));
} }
const developers = useMemo(() => getUniqueDeveloperValues(detailContext.packageMeta?.latest[type]), [ const developers = useMemo(() => getUniqueDeveloperValues(detailContext.packageMeta?.latest[type]), [
@ -69,7 +61,7 @@ const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {
return ( return (
<> <>
<StyledText variant={'subtitle1'}>{type}</StyledText> <DevelopersTitle type={type} />
<StyledBox display="flex" flexWrap="wrap" margin="10px 0 10px 0"> <StyledBox display="flex" flexWrap="wrap" margin="10px 0 10px 0">
{visibleDevelopers.map(visibleDeveloper => ( {visibleDevelopers.map(visibleDeveloper => (
<Tooltip key={visibleDeveloper.email} title={visibleDeveloper.name}> <Tooltip key={visibleDeveloper.email} title={visibleDeveloper.name}>

View File

@ -0,0 +1,30 @@
import React from 'react';
import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';
import Text from '../../muiComponents/Text';
import { Theme } from '../../design-tokens/theme';
import { DeveloperType } from './types';
interface Props {
type: DeveloperType;
}
const DevelopersTitle: React.FC<Props> = ({ type }) => {
const { t } = useTranslation();
switch (type) {
case DeveloperType.CONTRIBUTORS:
return <StyledText variant={'subtitle1'}>{t('sidebar.contributors.title')}</StyledText>;
case DeveloperType.MAINTAINERS:
return <StyledText variant={'subtitle1'}>{t('sidebar.maintainers.title')}</StyledText>;
return null;
}
};
export default DevelopersTitle;
const StyledText = styled(Text)<{ theme?: Theme }>(({ theme }) => ({
fontWeight: theme && theme.fontWeight.bold,
marginBottom: '10px',
}));

View File

@ -4,7 +4,6 @@ exports[`test Developers should render the component for contributors with items
.emotion-0 { .emotion-0 {
font-weight: 700; font-weight: 700;
margin-bottom: 10px; margin-bottom: 10px;
text-transform: capitalize;
} }
.emotion-8 > * { .emotion-8 > * {
@ -14,64 +13,68 @@ exports[`test Developers should render the component for contributors with items
<Developers <Developers
type="contributors" type="contributors"
> >
<StyledText <DevelopersTitle
variant="subtitle1" type="contributors"
> >
<ForwardRef(Text) <StyledText
className="emotion-0 emotion-1"
variant="subtitle1" variant="subtitle1"
> >
<WithStyles(ForwardRef(Typography)) <ForwardRef(Text)
className="emotion-0 emotion-1" className="emotion-0 emotion-1"
variant="subtitle1" variant="subtitle1"
> >
<ForwardRef(Typography) <WithStyles(ForwardRef(Typography))
className="emotion-0 emotion-1" className="emotion-0 emotion-1"
classes={
Object {
"alignCenter": "MuiTypography-alignCenter",
"alignJustify": "MuiTypography-alignJustify",
"alignLeft": "MuiTypography-alignLeft",
"alignRight": "MuiTypography-alignRight",
"body1": "MuiTypography-body1",
"body2": "MuiTypography-body2",
"button": "MuiTypography-button",
"caption": "MuiTypography-caption",
"colorError": "MuiTypography-colorError",
"colorInherit": "MuiTypography-colorInherit",
"colorPrimary": "MuiTypography-colorPrimary",
"colorSecondary": "MuiTypography-colorSecondary",
"colorTextPrimary": "MuiTypography-colorTextPrimary",
"colorTextSecondary": "MuiTypography-colorTextSecondary",
"displayBlock": "MuiTypography-displayBlock",
"displayInline": "MuiTypography-displayInline",
"gutterBottom": "MuiTypography-gutterBottom",
"h1": "MuiTypography-h1",
"h2": "MuiTypography-h2",
"h3": "MuiTypography-h3",
"h4": "MuiTypography-h4",
"h5": "MuiTypography-h5",
"h6": "MuiTypography-h6",
"noWrap": "MuiTypography-noWrap",
"overline": "MuiTypography-overline",
"paragraph": "MuiTypography-paragraph",
"root": "MuiTypography-root",
"srOnly": "MuiTypography-srOnly",
"subtitle1": "MuiTypography-subtitle1",
"subtitle2": "MuiTypography-subtitle2",
}
}
variant="subtitle1" variant="subtitle1"
> >
<h6 <ForwardRef(Typography)
className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1" className="emotion-0 emotion-1"
classes={
Object {
"alignCenter": "MuiTypography-alignCenter",
"alignJustify": "MuiTypography-alignJustify",
"alignLeft": "MuiTypography-alignLeft",
"alignRight": "MuiTypography-alignRight",
"body1": "MuiTypography-body1",
"body2": "MuiTypography-body2",
"button": "MuiTypography-button",
"caption": "MuiTypography-caption",
"colorError": "MuiTypography-colorError",
"colorInherit": "MuiTypography-colorInherit",
"colorPrimary": "MuiTypography-colorPrimary",
"colorSecondary": "MuiTypography-colorSecondary",
"colorTextPrimary": "MuiTypography-colorTextPrimary",
"colorTextSecondary": "MuiTypography-colorTextSecondary",
"displayBlock": "MuiTypography-displayBlock",
"displayInline": "MuiTypography-displayInline",
"gutterBottom": "MuiTypography-gutterBottom",
"h1": "MuiTypography-h1",
"h2": "MuiTypography-h2",
"h3": "MuiTypography-h3",
"h4": "MuiTypography-h4",
"h5": "MuiTypography-h5",
"h6": "MuiTypography-h6",
"noWrap": "MuiTypography-noWrap",
"overline": "MuiTypography-overline",
"paragraph": "MuiTypography-paragraph",
"root": "MuiTypography-root",
"srOnly": "MuiTypography-srOnly",
"subtitle1": "MuiTypography-subtitle1",
"subtitle2": "MuiTypography-subtitle2",
}
}
variant="subtitle1"
> >
contributors <h6
</h6> className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
</ForwardRef(Typography)> >
</WithStyles(ForwardRef(Typography))> sidebar.contributors.title
</ForwardRef(Text)> </h6>
</StyledText> </ForwardRef(Typography)>
</WithStyles(ForwardRef(Typography))>
</ForwardRef(Text)>
</StyledText>
</DevelopersTitle>
<StyledBox <StyledBox
display="flex" display="flex"
flexWrap="wrap" flexWrap="wrap"
@ -427,7 +430,6 @@ exports[`test Developers should render the component for maintainers with items
.emotion-0 { .emotion-0 {
font-weight: 700; font-weight: 700;
margin-bottom: 10px; margin-bottom: 10px;
text-transform: capitalize;
} }
.emotion-8 > * { .emotion-8 > * {
@ -437,64 +439,68 @@ exports[`test Developers should render the component for maintainers with items
<Developers <Developers
type="maintainers" type="maintainers"
> >
<StyledText <DevelopersTitle
variant="subtitle1" type="maintainers"
> >
<ForwardRef(Text) <StyledText
className="emotion-0 emotion-1"
variant="subtitle1" variant="subtitle1"
> >
<WithStyles(ForwardRef(Typography)) <ForwardRef(Text)
className="emotion-0 emotion-1" className="emotion-0 emotion-1"
variant="subtitle1" variant="subtitle1"
> >
<ForwardRef(Typography) <WithStyles(ForwardRef(Typography))
className="emotion-0 emotion-1" className="emotion-0 emotion-1"
classes={
Object {
"alignCenter": "MuiTypography-alignCenter",
"alignJustify": "MuiTypography-alignJustify",
"alignLeft": "MuiTypography-alignLeft",
"alignRight": "MuiTypography-alignRight",
"body1": "MuiTypography-body1",
"body2": "MuiTypography-body2",
"button": "MuiTypography-button",
"caption": "MuiTypography-caption",
"colorError": "MuiTypography-colorError",
"colorInherit": "MuiTypography-colorInherit",
"colorPrimary": "MuiTypography-colorPrimary",
"colorSecondary": "MuiTypography-colorSecondary",
"colorTextPrimary": "MuiTypography-colorTextPrimary",
"colorTextSecondary": "MuiTypography-colorTextSecondary",
"displayBlock": "MuiTypography-displayBlock",
"displayInline": "MuiTypography-displayInline",
"gutterBottom": "MuiTypography-gutterBottom",
"h1": "MuiTypography-h1",
"h2": "MuiTypography-h2",
"h3": "MuiTypography-h3",
"h4": "MuiTypography-h4",
"h5": "MuiTypography-h5",
"h6": "MuiTypography-h6",
"noWrap": "MuiTypography-noWrap",
"overline": "MuiTypography-overline",
"paragraph": "MuiTypography-paragraph",
"root": "MuiTypography-root",
"srOnly": "MuiTypography-srOnly",
"subtitle1": "MuiTypography-subtitle1",
"subtitle2": "MuiTypography-subtitle2",
}
}
variant="subtitle1" variant="subtitle1"
> >
<h6 <ForwardRef(Typography)
className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1" className="emotion-0 emotion-1"
classes={
Object {
"alignCenter": "MuiTypography-alignCenter",
"alignJustify": "MuiTypography-alignJustify",
"alignLeft": "MuiTypography-alignLeft",
"alignRight": "MuiTypography-alignRight",
"body1": "MuiTypography-body1",
"body2": "MuiTypography-body2",
"button": "MuiTypography-button",
"caption": "MuiTypography-caption",
"colorError": "MuiTypography-colorError",
"colorInherit": "MuiTypography-colorInherit",
"colorPrimary": "MuiTypography-colorPrimary",
"colorSecondary": "MuiTypography-colorSecondary",
"colorTextPrimary": "MuiTypography-colorTextPrimary",
"colorTextSecondary": "MuiTypography-colorTextSecondary",
"displayBlock": "MuiTypography-displayBlock",
"displayInline": "MuiTypography-displayInline",
"gutterBottom": "MuiTypography-gutterBottom",
"h1": "MuiTypography-h1",
"h2": "MuiTypography-h2",
"h3": "MuiTypography-h3",
"h4": "MuiTypography-h4",
"h5": "MuiTypography-h5",
"h6": "MuiTypography-h6",
"noWrap": "MuiTypography-noWrap",
"overline": "MuiTypography-overline",
"paragraph": "MuiTypography-paragraph",
"root": "MuiTypography-root",
"srOnly": "MuiTypography-srOnly",
"subtitle1": "MuiTypography-subtitle1",
"subtitle2": "MuiTypography-subtitle2",
}
}
variant="subtitle1"
> >
maintainers <h6
</h6> className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
</ForwardRef(Typography)> >
</WithStyles(ForwardRef(Typography))> sidebar.maintainers.title
</ForwardRef(Text)> </h6>
</StyledText> </ForwardRef(Typography)>
</WithStyles(ForwardRef(Typography))>
</ForwardRef(Text)>
</StyledText>
</DevelopersTitle>
<StyledBox <StyledBox
display="flex" display="flex"
flexWrap="wrap" flexWrap="wrap"

View File

@ -1 +1,2 @@
export { default, DeveloperType } from './Developers'; export { default } from './Developers';
export { DeveloperType } from './types';

View File

@ -0,0 +1,4 @@
export enum DeveloperType {
CONTRIBUTORS = 'contributors',
MAINTAINERS = 'maintainers',
}

View File

@ -1,4 +1,5 @@
import React, { FC, useContext } from 'react'; import React, { FC, useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { DetailContext } from '../../pages/Version'; import { DetailContext } from '../../pages/Version';
import fileSizeSI from '../../utils/file-size'; import fileSizeSI from '../../utils/file-size';
@ -22,6 +23,7 @@ const DistChip: FC<{ name: string }> = ({ name, children }) =>
const Dist: FC = () => { const Dist: FC = () => {
const { packageMeta } = useContext(DetailContext); const { packageMeta } = useContext(DetailContext);
const { t } = useTranslation();
if (!packageMeta) { if (!packageMeta) {
return null; return null;
@ -30,11 +32,11 @@ const Dist: FC = () => {
const { dist, license } = packageMeta && packageMeta.latest; const { dist, license } = packageMeta && packageMeta.latest;
return ( return (
<List subheader={<StyledText variant="subtitle1">{'Latest Distribution'}</StyledText>}> <List subheader={<StyledText variant="subtitle1">{t('sidebar.distribution.title')}</StyledText>}>
<DistListItem button={true}> <DistListItem button={true}>
<DistChip name="file count">{dist.fileCount}</DistChip> <DistChip name={t('sidebar.distribution.file-count')}>{dist.fileCount}</DistChip>
<DistChip name="size">{dist.unpackedSize && fileSizeSI(dist.unpackedSize)}</DistChip> <DistChip name={t('sidebar.distribution.size')}>{dist.unpackedSize && fileSizeSI(dist.unpackedSize)}</DistChip>
<DistChip name="license">{formatLicense(license)}</DistChip> <DistChip name={t('sidebar.distribution.license')}>{formatLicense(license)}</DistChip>
</DistListItem> </DistListItem>
</List> </List>
); );

View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Dist /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`; exports[`<Dist /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">sidebar.distribution.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.file-count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.size</b>: 10.00 Bytes</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
exports[`<Dist /> component should render the component with license as object 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`; exports[`<Dist /> component should render the component with license as object 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">sidebar.distribution.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.file-count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
exports[`<Dist /> component should render the component with license as string 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`; exports[`<Dist /> component should render the component with license as string 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">sidebar.distribution.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.file-count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

View File

@ -1,4 +1,5 @@
import React, { useContext } from 'react'; import React, { useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { DetailContext } from '../../pages/Version'; import { DetailContext } from '../../pages/Version';
import Avatar from '../../muiComponents/Avatar'; import Avatar from '../../muiComponents/Avatar';
@ -12,6 +13,7 @@ import node from './img/node.png';
const Engine: React.FC = () => { const Engine: React.FC = () => {
const { packageMeta } = useContext(DetailContext); const { packageMeta } = useContext(DetailContext);
const { t } = useTranslation();
const engines = packageMeta?.latest?.engines; const engines = packageMeta?.latest?.engines;
@ -23,7 +25,7 @@ const Engine: React.FC = () => {
<Grid container={true}> <Grid container={true}>
{engines.node && ( {engines.node && (
<Grid item={true} xs={6}> <Grid item={true} xs={6}>
<List subheader={<StyledText variant={'subtitle1'}>{'node JS'}</StyledText>}> <List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.engines.node-js')}</StyledText>}>
<EngineListItem button={true}> <EngineListItem button={true}>
<Avatar src={node} /> <Avatar src={node} />
<ListItemText primary={engines.node} /> <ListItemText primary={engines.node} />
@ -34,7 +36,7 @@ const Engine: React.FC = () => {
{engines.npm && ( {engines.npm && (
<Grid item={true} xs={6}> <Grid item={true} xs={6}>
<List subheader={<StyledText variant={'subtitle1'}>{'NPM version'}</StyledText>}> <List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.engines.npm-version')}</StyledText>}>
<EngineListItem button={true}> <EngineListItem button={true}>
<Avatar src={npm} /> <Avatar src={npm} />
<ListItemText primary={engines.npm} /> <ListItemText primary={engines.npm} />

View File

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Engines /> component should render the component in default state 1`] = `"<div class=\\"MuiGrid-root MuiGrid-container\\"><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText et66bt70 MuiTypography-subtitle1\\">node JS</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-18b06t0-EngineListItem et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault\\"><svg class=\\"MuiSvgIcon-root MuiAvatar-fallback\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\\"></path></svg></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;= 0.1.98</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText et66bt70 MuiTypography-subtitle1\\">NPM version</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-18b06t0-EngineListItem et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault\\"><svg class=\\"MuiSvgIcon-root MuiAvatar-fallback\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\\"></path></svg></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;3</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div></div>"`; exports[`<Engines /> component should render the component in default state 1`] = `"<div class=\\"MuiGrid-root MuiGrid-container\\"><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText et66bt70 MuiTypography-subtitle1\\">sidebar.engines.node-js</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-18b06t0-EngineListItem et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault\\"><svg class=\\"MuiSvgIcon-root MuiAvatar-fallback\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\\"></path></svg></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;= 0.1.98</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText et66bt70 MuiTypography-subtitle1\\">sidebar.engines.npm-version</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-18b06t0-EngineListItem et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault\\"><svg class=\\"MuiSvgIcon-root MuiAvatar-fallback\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\\"></path></svg></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;3</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div></div>"`;

View File

@ -1,53 +1,38 @@
import React from 'react'; import React from 'react';
import { useTranslation, Trans } from 'react-i18next';
import { goToVerdaccioWebsite } from '../../utils/windows'; import { goToVerdaccioWebsite } from '../../utils/windows';
import { Wrapper, Left, Right, Earth, Flags, Love, Flag, Logo, Inner, ToolTip } from './styles'; import { Wrapper, Left, Right, Earth, Flags, Love, Flag, Logo, Inner, ToolTip } from './styles';
const renderTooltip = (): JSX.Element => ( /* eslint-disable react/jsx-key */
<ToolTip> const Footer: React.FC = () => {
<Earth name="earth" size="md" /> const { t } = useTranslation();
<Flags>
<Flag name="spain" size="md" />
<Flag name="nicaragua" size="md" />
<Flag name="india" size="md" />
<Flag name="brazil" size="md" />
<Flag name="china" size="md" />
<Flag name="austria" size="md" />
</Flags>
</ToolTip>
);
const POWERED_LABEL = 'Powered by';
const MADEWITH_LABEL = ' Made with';
const ON_LABEL = 'on';
const HEARTH_EMOJI = '♥';
const renderRight = (version = window.VERDACCIO_VERSION): JSX.Element => {
return ( return (
<Right> <Wrapper>
{POWERED_LABEL} <Inner>
<Logo img={true} name="verdaccio" onClick={goToVerdaccioWebsite} pointer={true} size="md" /> <Left>
{`/ ${version}`} <Trans components={[<Love />]} i18nKey="footer.made-with-love-on" />
</Right> <ToolTip>
<Earth name="earth" size="md" />
<Flags>
<Flag name="spain" size="md" />
<Flag name="nicaragua" size="md" />
<Flag name="india" size="md" />
<Flag name="brazil" size="md" />
<Flag name="china" size="md" />
<Flag name="austria" size="md" />
</Flags>
</ToolTip>
</Left>
<Right>
{t('footer.powered-by')}
<Logo img={true} name="verdaccio" onClick={goToVerdaccioWebsite} pointer={true} size="md" />
{`/ ${window.VERDACCIO_VERSION}`}
</Right>
</Inner>
</Wrapper>
); );
}; };
const renderLeft = (): JSX.Element => (
<Left>
{MADEWITH_LABEL}
<Love>{HEARTH_EMOJI}</Love>
{ON_LABEL}
{renderTooltip()}
</Left>
);
const Footer: React.FC = () => (
<Wrapper>
<Inner>
{renderLeft()}
{renderRight()}
</Inner>
</Wrapper>
);
export default Footer; export default Footer;

View File

@ -167,13 +167,13 @@ exports[`<Footer /> component should load the initial state of Footer component
<div <div
class="emotion-27 emotion-28" class="emotion-27 emotion-28"
> >
Made with Made with
<span <span
class="emotion-0 emotion-1" class="emotion-0 emotion-1"
> >
</span> </span>
on on
<span <span
class="emotion-25 emotion-26" class="emotion-25 emotion-26"
> >

View File

@ -3,6 +3,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
import { render, fireEvent, waitForElement, waitForElementToBeRemoved } from '../../utils/test-react-testing-library'; import { render, fireEvent, waitForElement, waitForElementToBeRemoved } from '../../utils/test-react-testing-library';
import { AppContextProvider } from '../../App'; import { AppContextProvider } from '../../App';
import translationEN from '../../../i18n/translations/en-US.json';
import Header from './Header'; import Header from './Header';
@ -44,7 +45,7 @@ describe('<Header /> component with logged in state', () => {
}); });
test('should open login dialog', async () => { test('should open login dialog', async () => {
const { getByText } = render( const { getByTestId } = render(
<Router> <Router>
<AppContextProvider> <AppContextProvider>
<Header /> <Header />
@ -52,9 +53,9 @@ describe('<Header /> component with logged in state', () => {
</Router> </Router>
); );
const loginBtn = getByText('Login'); const loginBtn = getByTestId('header--button-login');
fireEvent.click(loginBtn); fireEvent.click(loginBtn);
const loginDialog = await waitForElement(() => getByText('Sign in')); const loginDialog = await waitForElement(() => getByTestId('login--dialog'));
expect(loginDialog).toBeTruthy(); expect(loginDialog).toBeTruthy();
}); });
@ -119,7 +120,7 @@ describe('<Header /> component with logged in state', () => {
fireEvent.click(infoBtn); fireEvent.click(infoBtn);
// wait for Close's button of registrationInfo modal appearance and return the element // wait for Close's button of registrationInfo modal appearance and return the element
const closeBtn = await waitForElement(() => getByText('CLOSE')); const closeBtn = await waitForElement(() => getByText(translationEN.button.close));
fireEvent.click(closeBtn); fireEvent.click(closeBtn);
const hasRegistrationInfoModalBeenRemoved = await waitForElementToBeRemoved(() => const hasRegistrationInfoModalBeenRemoved = await waitForElementToBeRemoved(() =>

View File

@ -1,4 +1,5 @@
import React, { useState, useContext } from 'react'; import React, { useState, useContext } from 'react';
import { useTranslation } from 'react-i18next';
import storage from '../../utils/storage'; import storage from '../../utils/storage';
import { getRegistryURL } from '../../utils/url'; import { getRegistryURL } from '../../utils/url';
@ -18,13 +19,14 @@ interface Props {
/* eslint-disable react/jsx-no-bind*/ /* eslint-disable react/jsx-no-bind*/
const Header: React.FC<Props> = ({ withoutSearch }) => { const Header: React.FC<Props> = ({ withoutSearch }) => {
const { t } = useTranslation();
const appContext = useContext(AppContext); const appContext = useContext(AppContext);
const [isInfoDialogOpen, setOpenInfoDialog] = useState(); const [isInfoDialogOpen, setOpenInfoDialog] = useState();
const [showMobileNavBar, setShowMobileNavBar] = useState(); const [showMobileNavBar, setShowMobileNavBar] = useState();
const [showLoginModal, setShowLoginModal] = useState(false); const [showLoginModal, setShowLoginModal] = useState(false);
if (!appContext) { if (!appContext) {
throw Error('The app Context was not correct used'); throw Error(t('app-context-not-correct-used'));
} }
const { user, scope, setUser } = appContext; const { user, scope, setUser } = appContext;
@ -67,7 +69,7 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
<Search /> <Search />
</InnerMobileNavBar> </InnerMobileNavBar>
<Button color="inherit" onClick={() => setShowMobileNavBar(false)}> <Button color="inherit" onClick={() => setShowMobileNavBar(false)}>
{'Cancel'} {t('button.cancel')}
</Button> </Button>
</MobileNavBar> </MobileNavBar>
)} )}

View File

@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next';
import Label from '../Label'; import Label from '../Label';
@ -8,11 +9,14 @@ interface Props {
username: string; username: string;
} }
const HeaderGreetings: React.FC<Props> = ({ username }) => ( const HeaderGreetings: React.FC<Props> = ({ username }) => {
<> const { t } = useTranslation();
<Greetings>{'Hi,'}</Greetings> return (
<Label capitalize={true} data-testid="greetings-label" text={username} weight="bold" /> <>
</> <Greetings>{t('header.greetings')}</Greetings>
); <Label capitalize={true} data-testid="greetings-label" text={username} weight="bold" />
</>
);
};
export default HeaderGreetings; export default HeaderGreetings;

View File

@ -1,4 +1,5 @@
import React, { MouseEvent } from 'react'; import React, { MouseEvent } from 'react';
import { useTranslation } from 'react-i18next';
import AccountCircle from '@material-ui/icons/AccountCircle'; import AccountCircle from '@material-ui/icons/AccountCircle';
import IconButton from '../../muiComponents/IconButton'; import IconButton from '../../muiComponents/IconButton';
@ -23,35 +24,38 @@ const HeaderMenu: React.FC<Props> = ({
anchorEl, anchorEl,
onLoggedInMenu, onLoggedInMenu,
onLoggedInMenuClose, onLoggedInMenuClose,
}) => ( }) => {
<> const { t } = useTranslation();
<IconButton return (
color="inherit" <>
data-testid="header--menu-accountcircle" <IconButton
id="header--button-account" color="inherit"
onClick={onLoggedInMenu}> data-testid="header--menu-accountcircle"
<AccountCircle /> id="header--button-account"
</IconButton> onClick={onLoggedInMenu}>
<Menu <AccountCircle />
anchorEl={anchorEl} </IconButton>
anchorOrigin={{ <Menu
vertical: 'top', anchorEl={anchorEl}
horizontal: 'right', anchorOrigin={{
}} vertical: 'top',
onClose={onLoggedInMenuClose} horizontal: 'right',
open={isMenuOpen} }}
transformOrigin={{ onClose={onLoggedInMenuClose}
vertical: 'top', open={isMenuOpen}
horizontal: 'right', transformOrigin={{
}}> vertical: 'top',
<MenuItem disabled={true}> horizontal: 'right',
<HeaderGreetings username={username} /> }}>
</MenuItem> <MenuItem disabled={true}>
<MenuItem button={true} data-testid="header--button-logout" id="header--button-logout" onClick={onLogout}> <HeaderGreetings username={username} />
{'Logout'} </MenuItem>
</MenuItem> <MenuItem button={true} data-testid="header--button-logout" id="header--button-logout" onClick={onLogout}>
</Menu> {t('button.logout')}
</> </MenuItem>
); </Menu>
</>
);
};
export default HeaderMenu; export default HeaderMenu;

View File

@ -1,4 +1,5 @@
import React, { useState, useEffect, MouseEvent } from 'react'; import React, { useState, useEffect, MouseEvent } from 'react';
import { useTranslation } from 'react-i18next';
import Button from '../../muiComponents/Button'; import Button from '../../muiComponents/Button';
@ -25,6 +26,7 @@ const HeaderRight: React.FC<Props> = ({
}) => { }) => {
const [anchorEl, setAnchorEl] = useState(); const [anchorEl, setAnchorEl] = useState();
const [isMenuOpen, setIsMenuOpen] = useState(); const [isMenuOpen, setIsMenuOpen] = useState();
const { t } = useTranslation();
useEffect(() => { useEffect(() => {
setIsMenuOpen(Boolean(anchorEl)); setIsMenuOpen(Boolean(anchorEl));
@ -55,10 +57,10 @@ const HeaderRight: React.FC<Props> = ({
return ( return (
<RightSide data-testid="header-right"> <RightSide data-testid="header-right">
{!withoutSearch && ( {!withoutSearch && (
<HeaderToolTip onClick={onToggleMobileNav} title={'Search packages'} tooltipIconType={'search'} /> <HeaderToolTip onClick={onToggleMobileNav} title={t('search.packages')} tooltipIconType={'search'} />
)} )}
<HeaderToolTip title={'Documentation'} tooltipIconType={'help'} /> <HeaderToolTip title={t('header.documentation')} tooltipIconType={'help'} />
<HeaderToolTip onClick={onOpenRegistryInfoDialog} title={'Registry Information'} tooltipIconType={'info'} /> <HeaderToolTip onClick={onOpenRegistryInfoDialog} title={t('header.registry-info')} tooltipIconType={'info'} />
{username ? ( {username ? (
<HeaderMenu <HeaderMenu
anchorEl={anchorEl} anchorEl={anchorEl}
@ -70,7 +72,7 @@ const HeaderRight: React.FC<Props> = ({
/> />
) : ( ) : (
<Button color="inherit" data-testid="header--button-login" onClick={handleToggleLogin}> <Button color="inherit" data-testid="header--button-login" onClick={handleToggleLogin}>
{'Login'} {t('button.login')}
</Button> </Button>
)} )}
</RightSide> </RightSide>

View File

@ -1,4 +1,5 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { useTranslation } from 'react-i18next';
import { getRegistryURL } from '../../utils/url'; import { getRegistryURL } from '../../utils/url';
import CopyToClipBoard from '../CopyToClipBoard'; import CopyToClipBoard from '../CopyToClipBoard';
@ -24,23 +25,24 @@ function renderHeadingClipboardSegments(title: string, text: string): React.Reac
const Help: React.FC = () => { const Help: React.FC = () => {
const registryUrl = getRegistryURL(); const registryUrl = getRegistryURL();
const { t } = useTranslation();
return ( return (
<Card id="help-card"> <Card id="help-card">
<CardContent> <CardContent>
<Typography component="h2" gutterBottom={true} id={COMPONENT_HELP_ID} variant="h5"> <Typography component="h2" gutterBottom={true} id={COMPONENT_HELP_ID} variant="h5">
{HELP_TITLE} {t('help.title')}
</Typography> </Typography>
<HelpTitle color="textSecondary" gutterBottom={true}> <HelpTitle color="textSecondary" gutterBottom={true}>
{'To publish your first package just:'} {t('help.sub-title')}
</HelpTitle> </HelpTitle>
{renderHeadingClipboardSegments('1. Login', `npm adduser --registry ${registryUrl}`)} {renderHeadingClipboardSegments(t('help.first-step'), t('help.first-step-command-line', { registryUrl }))}
{renderHeadingClipboardSegments('2. Publish', `npm publish --registry ${registryUrl}`)} {renderHeadingClipboardSegments(t('help.second-step'), t('help.second-step-command-line', { registryUrl }))}
<Text variant="body2">{'3. Refresh this page.'}</Text> <Text variant="body2">{t('help.third-step')}</Text>
</CardContent> </CardContent>
<CardActions> <CardActions>
<Button color="primary" href="https://verdaccio.org/docs/en/installation" size="small"> <Button color="primary" href="https://verdaccio.org/docs/en/installation" size="small">
{'Learn More'} {t('button.learn-more')}
</Button> </Button>
</CardActions> </CardActions>
</Card> </Card>

View File

@ -68,7 +68,7 @@ exports[`<Help /> component should load the component in default state 1`] = `
<button <button
class="MuiButtonBase-root MuiIconButton-root emotion-4 emotion-5" class="MuiButtonBase-root MuiIconButton-root emotion-4 emotion-5"
tabindex="0" tabindex="0"
title="Copy to Clipboard" title="Copy to clipboard"
type="button" type="button"
> >
<span <span
@ -107,7 +107,7 @@ exports[`<Help /> component should load the component in default state 1`] = `
<button <button
class="MuiButtonBase-root MuiIconButton-root emotion-4 emotion-5" class="MuiButtonBase-root MuiIconButton-root emotion-4 emotion-5"
tabindex="0" tabindex="0"
title="Copy to Clipboard" title="Copy to clipboard"
type="button" type="button"
> >
<span <span

View File

@ -1,5 +1,6 @@
import React, { useContext } from 'react'; import React, { useContext } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';
import { DetailContext } from '../../pages/Version'; import { DetailContext } from '../../pages/Version';
import Text from '../../muiComponents/Text'; import Text from '../../muiComponents/Text';
@ -14,6 +15,7 @@ const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
})); }));
const Install: React.FC = () => { const Install: React.FC = () => {
const { t } = useTranslation();
const detailContext = useContext(DetailContext); const detailContext = useContext(DetailContext);
const { packageMeta, packageName } = detailContext; const { packageMeta, packageName } = detailContext;
@ -23,7 +25,9 @@ const Install: React.FC = () => {
} }
return ( return (
<List data-testid={'installList'} subheader={<StyledText variant={'subtitle1'}>{'Installation'}</StyledText>}> <List
data-testid={'installList'}
subheader={<StyledText variant={'subtitle1'}>{t('sidebar.installation.title')}</StyledText>}>
<InstallListItem dependencyManager={DependencyManager.NPM} packageName={packageName} /> <InstallListItem dependencyManager={DependencyManager.NPM} packageName={packageName} />
<InstallListItem dependencyManager={DependencyManager.YARN} packageName={packageName} /> <InstallListItem dependencyManager={DependencyManager.YARN} packageName={packageName} />
<InstallListItem dependencyManager={DependencyManager.PNPM} packageName={packageName} /> <InstallListItem dependencyManager={DependencyManager.PNPM} packageName={packageName} />

View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';
import CopyToClipBoard from '../CopyToClipBoard'; import CopyToClipBoard from '../CopyToClipBoard';
import Avatar from '../../muiComponents/Avatar'; import Avatar from '../../muiComponents/Avatar';
@ -43,14 +44,16 @@ interface Interface {
} }
const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }) => { const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }) => {
const { t } = useTranslation();
switch (dependencyManager) { switch (dependencyManager) {
case DependencyManager.NPM: case DependencyManager.NPM:
return ( return (
<InstallItem button={true} data-testid={'installListItem-npm'}> <InstallItem button={true} data-testid={'installListItem-npm'}>
<PackageMangerAvatar alt="npm" src={npmLogo} /> <PackageMangerAvatar alt="npm" src={npmLogo} />
<InstallListItemText <InstallListItemText
primary={<CopyToClipBoard text={`npm install ${packageName}`} />} primary={<CopyToClipBoard text={t('sidebar.installation.install-using-npm-command', { packageName })} />}
secondary={'Install using npm'} secondary={t('sidebar.installation.install-using-npm')}
/> />
</InstallItem> </InstallItem>
); );
@ -59,8 +62,8 @@ const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }
<InstallItem button={true} data-testid={'installListItem-yarn'}> <InstallItem button={true} data-testid={'installListItem-yarn'}>
<PackageMangerAvatar alt="yarn" src={yarnLogo} /> <PackageMangerAvatar alt="yarn" src={yarnLogo} />
<InstallListItemText <InstallListItemText
primary={<CopyToClipBoard text={`yarn add ${packageName}`} />} primary={<CopyToClipBoard text={t('sidebar.installation.install-using-yarn-command', { packageName })} />}
secondary={'Install using yarn'} secondary={t('sidebar.installation.install-using-yarn')}
/> />
</InstallItem> </InstallItem>
); );
@ -69,8 +72,8 @@ const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }
<InstallItem button={true} data-testid={'installListItem-pnpm'}> <InstallItem button={true} data-testid={'installListItem-pnpm'}>
<PackageMangerAvatar alt={'pnpm'} src={pnpmLogo} /> <PackageMangerAvatar alt={'pnpm'} src={pnpmLogo} />
<InstallListItemText <InstallListItemText
primary={<CopyToClipBoard text={`pnpm install ${packageName}`} />} primary={<CopyToClipBoard text={t('sidebar.installation.install-using-pnpm-command', { packageName })} />}
secondary={'Install using pnpm'} secondary={t('sidebar.installation.install-using-pnpm')}
/> />
</InstallItem> </InstallItem>
); );

View File

@ -94,7 +94,7 @@ exports[`<Install /> renders correctly 1`] = `
<button <button
class="MuiButtonBase-root MuiIconButton-root emotion-6 emotion-7" class="MuiButtonBase-root MuiIconButton-root emotion-6 emotion-7"
tabindex="0" tabindex="0"
title="Copy to Clipboard" title="Copy to clipboard"
type="button" type="button"
> >
<span <span
@ -161,7 +161,7 @@ exports[`<Install /> renders correctly 1`] = `
<button <button
class="MuiButtonBase-root MuiIconButton-root emotion-6 emotion-7" class="MuiButtonBase-root MuiIconButton-root emotion-6 emotion-7"
tabindex="0" tabindex="0"
title="Copy to Clipboard" title="Copy to clipboard"
type="button" type="button"
> >
<span <span
@ -228,7 +228,7 @@ exports[`<Install /> renders correctly 1`] = `
<button <button
class="MuiButtonBase-root MuiIconButton-root emotion-6 emotion-7" class="MuiButtonBase-root MuiIconButton-root emotion-6 emotion-7"
tabindex="0" tabindex="0"
title="Copy to Clipboard" title="Copy to clipboard"
type="button" type="button"
> >
<span <span

View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { MouseEvent } from 'react';
import { Link as RouterLink } from 'react-router-dom'; import { Link as RouterLink } from 'react-router-dom';
import Text, { TextProps } from '../../muiComponents/Text'; import Text, { TextProps } from '../../muiComponents/Text';
@ -8,6 +8,7 @@ interface Props extends Pick<TextProps, 'variant'> {
className?: string; className?: string;
to: string; to: string;
children?: React.ReactNode; children?: React.ReactNode;
onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
} }
type LinkRef = HTMLAnchorElement; type LinkRef = HTMLAnchorElement;

View File

@ -1,8 +1,9 @@
import React from 'react'; import React from 'react';
import { render, waitForElement, fireEvent, waitForElementToBeRemoved } from '../../utils/test-react-testing-library'; import { render, waitForElement, fireEvent } from '../../utils/test-react-testing-library';
import AppContext, { AppContextProps } from '../../App/AppContext'; import AppContext, { AppContextProps } from '../../App/AppContext';
import api from '../../utils/api'; import api from '../../utils/api';
import translationEN from '../../../i18n/translations/en-US.json';
import LoginDialog from './LoginDialog'; import LoginDialog from './LoginDialog';
@ -35,13 +36,13 @@ describe('<LoginDialog /> component', () => {
onClose: jest.fn(), onClose: jest.fn(),
}; };
const { getByText } = render( const { getByTestId } = render(
<AppContext.Provider value={appContextValue}> <AppContext.Provider value={appContextValue}>
<LoginDialog onClose={props.onClose} open={props.open} /> <LoginDialog onClose={props.onClose} open={props.open} />
</AppContext.Provider> </AppContext.Provider>
); );
const loginDialogHeading = await waitForElement(() => getByText('Sign in')); const loginDialogHeading = await waitForElement(() => getByTestId('login-dialog-form-login-button'));
expect(loginDialogHeading).toBeTruthy(); expect(loginDialogHeading).toBeTruthy();
}); });

View File

@ -1,4 +1,5 @@
import React, { useState, useContext, useCallback } from 'react'; import React, { useState, useContext, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { makeLogin } from '../../utils/login'; import { makeLogin } from '../../utils/login';
import storage from '../../utils/storage'; import storage from '../../utils/storage';
@ -16,10 +17,11 @@ interface Props {
} }
const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => { const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
const { t } = useTranslation();
const appContext = useContext(AppContext); const appContext = useContext(AppContext);
if (!appContext) { if (!appContext) {
throw Error('The app Context was not correct used'); throw Error(t('app-context-not-correct-used'));
} }
const [error, setError] = useState(); const [error, setError] = useState();
@ -43,7 +45,7 @@ const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
); );
return ( return (
<Dialog fullWidth={true} id="login--dialog" maxWidth="sm" onClose={onClose} open={open}> <Dialog data-testid="login--dialog" fullWidth={true} id="login--dialog" maxWidth="sm" onClose={onClose} open={open}>
<LoginDialogCloseButton onClose={onClose} /> <LoginDialogCloseButton onClose={onClose} />
<DialogContent> <DialogContent>
<LoginDialogHeader /> <LoginDialogHeader />

View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import CloseIcon from '@material-ui/icons/Close'; import CloseIcon from '@material-ui/icons/Close';
import { useTranslation } from 'react-i18next';
import DialogTitle from '../../muiComponents/DialogTitle'; import DialogTitle from '../../muiComponents/DialogTitle';
import IconButton from '../../muiComponents/IconButton'; import IconButton from '../../muiComponents/IconButton';
@ -17,12 +18,15 @@ interface Props {
onClose: () => void; onClose: () => void;
} }
const LoginDialogCloseButton: React.FC<Props> = ({ onClose }) => ( const LoginDialogCloseButton: React.FC<Props> = ({ onClose }) => {
<DialogTitle> const { t } = useTranslation();
<StyledIconButton data-testid="close-login-dialog-button" onClick={onClose}> return (
<CloseIcon titleAccess="Close Dialog" /> <DialogTitle>
</StyledIconButton> <StyledIconButton data-testid="close-login-dialog-button" onClick={onClose}>
</DialogTitle> <CloseIcon titleAccess={t('button.close')} />
); </StyledIconButton>
</DialogTitle>
);
};
export default LoginDialogCloseButton; export default LoginDialogCloseButton;

View File

@ -1,5 +1,6 @@
import React, { memo } from 'react'; import React, { memo } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';
import useForm from 'react-hook-form/dist/react-hook-form.ie11'; import useForm from 'react-hook-form/dist/react-hook-form.ie11';
import TextField from '../../muiComponents/TextField'; import TextField from '../../muiComponents/TextField';
@ -28,6 +29,7 @@ interface Props {
} }
const LoginDialogForm = memo(({ onSubmit, error }: Props) => { const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
const { t } = useTranslation();
const { const {
register, register,
errors, errors,
@ -48,13 +50,13 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
helperText={errors.username?.message} helperText={errors.username?.message}
id="login--dialog-username" id="login--dialog-username"
inputRef={register({ inputRef={register({
required: { value: true, message: 'This field is required' }, required: { value: true, message: t('form-validation.required-field') },
minLength: { value: 2, message: 'This field required the min length of 2' }, minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
})} })}
label="Username" label={t('form.username')}
margin="normal" margin="normal"
name="username" name="username"
placeholder="Your username" placeholder={t('form-placeholder.username')}
required={true} required={true}
variant="outlined" variant="outlined"
/> />
@ -65,13 +67,13 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
helperText={errors.password?.message} helperText={errors.password?.message}
id="login--dialog-password" id="login--dialog-password"
inputRef={register({ inputRef={register({
required: { value: true, message: 'This field is required' }, required: { value: true, message: t('form-validation.required-field') },
minLength: { value: 2, message: 'This field required the min length of 2' }, minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
})} })}
label="Password" label={t('form.password')}
margin="normal" margin="normal"
name="password" name="password"
placeholder="Your strong password" placeholder={t('form-placeholder.password')}
required={true} required={true}
type="password" type="password"
variant="outlined" variant="outlined"
@ -79,13 +81,14 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
{error && <LoginDialogFormError error={error} />} {error && <LoginDialogFormError error={error} />}
<StyledButton <StyledButton
color="primary" color="primary"
data-testid="login-dialog-form-login-button"
disabled={!isValid} disabled={!isValid}
fullWidth={true} fullWidth={true}
id="login--dialog-button-submit" id="login--dialog-button-submit"
size="large" size="large"
type="submit" type="submit"
variant="contained"> variant="contained">
{'Sign In'} {t('button.login')}
</StyledButton> </StyledButton>
</StyledForm> </StyledForm>
); );

View File

@ -2,6 +2,7 @@ import React from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import LockOutlined from '@material-ui/icons/LockOutlined'; import LockOutlined from '@material-ui/icons/LockOutlined';
import CloseIcon from '@material-ui/icons/Close'; import CloseIcon from '@material-ui/icons/Close';
import { useTranslation } from 'react-i18next';
import Heading from '../../muiComponents/Heading'; import Heading from '../../muiComponents/Heading';
import Avatar from '../../muiComponents/Avatar'; import Avatar from '../../muiComponents/Avatar';
@ -26,17 +27,19 @@ interface Props {
} }
const LoginDialogHeader: React.FC<Props> = ({ onClose }) => { const LoginDialogHeader: React.FC<Props> = ({ onClose }) => {
const { t } = useTranslation();
return ( return (
<Box alignItems="center" display="flex" flexDirection="column" position="relative"> <Box alignItems="center" display="flex" flexDirection="column" position="relative">
{onClose && ( {onClose && (
<StyledIconButton aria-label="Close" onClick={onClose}> <StyledIconButton aria-label={t('button.close')} onClick={onClose}>
<CloseIcon /> <CloseIcon />
</StyledIconButton> </StyledIconButton>
)} )}
<StyledAvatar> <StyledAvatar>
<LockOutlined /> <LockOutlined />
</StyledAvatar> </StyledAvatar>
<Heading>{'Sign in'}</Heading> <Heading>{t('button.login')}</Heading>
</Box> </Box>
); );
}; };

View File

@ -1,6 +1,7 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import Box from '../../muiComponents/Box'; import Box from '../../muiComponents/Box';
import Button from '../../muiComponents/Button'; import Button from '../../muiComponents/Button';
@ -9,10 +10,6 @@ import { Theme } from '../../design-tokens/theme';
import PackageImg from './img/package.svg'; import PackageImg from './img/package.svg';
export const NOT_FOUND_TEXT = "Sorry, we couldn't find it...";
export const LABEL_NOT_FOUND = "The page you're looking for doesn't exist.";
export const GO_TO_HOME_PAGE = 'Go to the home page';
const EmptyPackage = styled('img')({ const EmptyPackage = styled('img')({
width: '150px', width: '150px',
margin: '0 auto', margin: '0 auto',
@ -25,6 +22,7 @@ const StyledHeading = styled(Heading)<{ theme?: Theme }>(props => ({
const NotFound: React.FC = () => { const NotFound: React.FC = () => {
const history = useHistory(); const history = useHistory();
const { t } = useTranslation();
const handleGoHome = useCallback(() => { const handleGoHome = useCallback(() => {
history.push('/'); history.push('/');
@ -39,12 +37,12 @@ const NotFound: React.FC = () => {
flexGrow={1} flexGrow={1}
justifyContent="center" justifyContent="center"
p={2}> p={2}>
<EmptyPackage alt="404 - Page not found" src={PackageImg} /> <EmptyPackage alt={t('error.404.page-not-found')} src={PackageImg} />
<StyledHeading className="not-found-text" variant="h4"> <StyledHeading className="not-found-text" variant="h4">
{NOT_FOUND_TEXT} {t('error.404.sorry-we-could-not-find-it')}
</StyledHeading> </StyledHeading>
<Button onClick={handleGoHome} variant="contained"> <Button data-testid="not-found-go-to-home-button" onClick={handleGoHome} variant="contained">
{GO_TO_HOME_PAGE} {t('button.go-to-the-home-page')}
</Button> </Button>
</Box> </Box>
); );

View File

@ -3,7 +3,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
import { render, fireEvent } from '../../utils/test-react-testing-library'; import { render, fireEvent } from '../../utils/test-react-testing-library';
import NotFound, { GO_TO_HOME_PAGE } from './NotFound'; import NotFound from './NotFound';
describe('<NotFound /> component', () => { describe('<NotFound /> component', () => {
test('should load the component in default state', () => { test('should load the component in default state', () => {
@ -14,17 +14,17 @@ describe('<NotFound /> component', () => {
); );
expect(container.firstChild).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
test('go to Home Page button click', () => {
test('go to Home Page button click', async () => {
const spy = jest.spyOn(React, 'useCallback'); const spy = jest.spyOn(React, 'useCallback');
const { getByText } = render( const { getByTestId } = render(
<Router> <Router>
<NotFound /> <NotFound />
</Router> </Router>
); );
const node = getByText(GO_TO_HOME_PAGE); const node = getByTestId('not-found-go-to-home-button');
fireEvent.click(node); fireEvent.click(node);
expect(spy).toHaveBeenCalled(); expect(spy).toHaveBeenCalled();
}); });
}); });

View File

@ -27,6 +27,7 @@ exports[`<NotFound /> component should load the component in default state 1`] =
</h4> </h4>
<button <button
class="MuiButtonBase-root MuiButton-root MuiButton-contained" class="MuiButtonBase-root MuiButton-root MuiButton-contained"
data-testid="not-found-go-to-home-button"
tabindex="0" tabindex="0"
type="button" type="button"
> >

View File

@ -1 +1 @@
export { default, NOT_FOUND_TEXT } from './NotFound'; export { default } from './NotFound';

View File

@ -2,12 +2,14 @@ import React from 'react';
import BugReport from '@material-ui/icons/BugReport'; import BugReport from '@material-ui/icons/BugReport';
import DownloadIcon from '@material-ui/icons/CloudDownload'; import DownloadIcon from '@material-ui/icons/CloudDownload';
import HomeIcon from '@material-ui/icons/Home'; import HomeIcon from '@material-ui/icons/Home';
import { useTranslation } from 'react-i18next';
import { PackageMetaInterface, Author as PackageAuthor } from '../../../types/packageMeta'; import { PackageMetaInterface, Author as PackageAuthor } from '../../../types/packageMeta';
import Tag from '../Tag'; import Tag from '../Tag';
import fileSizeSI from '../../utils/file-size'; import fileSizeSI from '../../utils/file-size';
import { formatDate, formatDateDistance } from '../../utils/package'; import { formatDate, formatDateDistance, getAuthorName } from '../../utils/package';
import Tooltip from '../../muiComponents/Tooltip'; import Tooltip from '../../muiComponents/Tooltip';
import Link from '../Link';
import { isURL } from '../../utils/url'; import { isURL } from '../../utils/url';
import { downloadTarball } from '../ActionBar'; import { downloadTarball } from '../ActionBar';
import ListItem from '../../muiComponents/ListItem'; import ListItem from '../../muiComponents/ListItem';
@ -64,11 +66,13 @@ const Package: React.FC<PackageInterface> = ({
time, time,
version, version,
}) => { }) => {
const { t } = useTranslation();
const renderVersionInfo = (): React.ReactNode => const renderVersionInfo = (): React.ReactNode =>
version && ( version && (
<OverviewItem> <OverviewItem>
<Icon name={'version'} /> <Icon name={'version'} />
{`v${version}`} {t('package.version', { version })}
</OverviewItem> </OverviewItem>
); );
@ -77,7 +81,7 @@ const Package: React.FC<PackageInterface> = ({
<Author> <Author>
<Avatar alt={authorName} src={authorAvatar} /> <Avatar alt={authorName} src={authorAvatar} />
<Details> <Details>
<Text text={authorName} /> <Text text={getAuthorName(authorName)} />
</Details> </Details>
</Author> </Author>
); );
@ -103,7 +107,7 @@ const Package: React.FC<PackageInterface> = ({
time && ( time && (
<OverviewItem> <OverviewItem>
<Icon name="time" /> <Icon name="time" />
<Published>{`Published on ${formatDate(time)}`}</Published> <Published>{t('package.published-on', { time: formatDate(time) })}</Published>
{formatDateDistance(time)} {formatDateDistance(time)}
</OverviewItem> </OverviewItem>
); );
@ -111,26 +115,26 @@ const Package: React.FC<PackageInterface> = ({
const renderHomePageLink = (): React.ReactNode => const renderHomePageLink = (): React.ReactNode =>
homepage && homepage &&
isURL(homepage) && ( isURL(homepage) && (
<a href={homepage} target={'_blank'}> <Link external={true} to={homepage}>
<Tooltip aria-label={'Homepage'} title={'Visit homepage'}> <Tooltip aria-label={t('package.homepage')} title={t('package.visit-home-page')}>
<IconButton aria-label={'Homepage'}> <IconButton aria-label={t('package.homepage')}>
<HomeIcon /> <HomeIcon />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</a> </Link>
); );
const renderBugsLink = (): React.ReactNode => const renderBugsLink = (): React.ReactNode =>
bugs && bugs &&
bugs.url && bugs.url &&
isURL(bugs.url) && ( isURL(bugs.url) && (
<a href={bugs.url} target={'_blank'}> <Link external={true} to={bugs.url}>
<Tooltip aria-label={'Bugs'} title={'Open an issue'}> <Tooltip aria-label={t('package.bugs')} title={t('package.open-an-issue')}>
<IconButton aria-label={'Bugs'}> <IconButton aria-label={t('package.bugs')}>
<BugReport /> <BugReport />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</a> </Link>
); );
const renderDownloadLink = (): React.ReactNode => const renderDownloadLink = (): React.ReactNode =>
@ -138,13 +142,13 @@ const Package: React.FC<PackageInterface> = ({
dist.tarball && dist.tarball &&
isURL(dist.tarball) && ( isURL(dist.tarball) && (
// eslint-disable-next-line // eslint-disable-next-line
<a onClick={downloadTarball(dist.tarball.replace(`https://registry.npmjs.org/`, window.location.href))} target={'_blank'}> <Link to="#" external={true} onClick={downloadTarball(dist.tarball.replace(`https://registry.npmjs.org/`, window.location.href))}>
<Tooltip aria-label={'Download the tar file'} title={'Download tarball'}> <Tooltip aria-label={t('package.download', { what: t('package.the-tar-file') })} title={t('package.tarball')}>
<IconButton aria-label={'Download'}> <IconButton aria-label={t('package.download')}>
<DownloadIcon /> <DownloadIcon />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</a> </Link>
); );
const renderPrimaryComponent = (): React.ReactNode => { const renderPrimaryComponent = (): React.ReactNode => {
@ -155,7 +159,7 @@ const Package: React.FC<PackageInterface> = ({
<PackageTitle className="package-title">{packageName}</PackageTitle> <PackageTitle className="package-title">{packageName}</PackageTitle>
</WrapperLink> </WrapperLink>
</Grid> </Grid>
<GridRightAligned item={true} xs={true}> <GridRightAligned alignItems="center" container={true} item={true} justify="flex-end" xs={true}>
{renderHomePageLink()} {renderHomePageLink()}
{renderBugsLink()} {renderBugsLink()}
{renderDownloadLink()} {renderDownloadLink()}

View File

@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next';
import Button from '../../muiComponents/Button'; import Button from '../../muiComponents/Button';
import Dialog from '../../muiComponents/Dialog'; import Dialog from '../../muiComponents/Dialog';
@ -7,18 +8,19 @@ import DialogActions from '../../muiComponents/DialogActions';
import { Title, Content } from './styles'; import { Title, Content } from './styles';
import { Props } from './types'; import { Props } from './types';
const LABEL = 'CLOSE'; const RegistryInfoDialog: React.FC<Props> = ({ open = false, children, onClose }) => {
const { t } = useTranslation();
const RegistryInfoDialog: React.FC<Props> = ({ open = false, children, onClose }) => ( return (
<Dialog data-testid={'registryInfo--dialog'} id="registryInfo--dialog-container" onClose={onClose} open={open}> <Dialog data-testid={'registryInfo--dialog'} id="registryInfo--dialog-container" onClose={onClose} open={open}>
<Title disableTypography={true}>{'Register Info'}</Title> <Title disableTypography={true}>{t('dialog.registry-info.title')}</Title>
<Content>{children}</Content> <Content>{children}</Content>
<DialogActions> <DialogActions>
<Button color="inherit" id="registryInfo--dialog-close" onClick={onClose}> <Button color="inherit" id="registryInfo--dialog-close" onClick={onClose}>
{LABEL} {t('button.close')}
</Button> </Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
); );
};
export default RegistryInfoDialog; export default RegistryInfoDialog;

View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';
import Avatar from '../../muiComponents/Avatar'; import Avatar from '../../muiComponents/Avatar';
import Text from '../../muiComponents/Text'; import Text from '../../muiComponents/Text';
@ -44,6 +45,7 @@ const RepositoryAvatar = styled(Avatar)({
const Repository: React.FC = () => { const Repository: React.FC = () => {
const detailContext = React.useContext(DetailContext); const detailContext = React.useContext(DetailContext);
const { t } = useTranslation();
const { packageMeta } = detailContext; const { packageMeta } = detailContext;
@ -64,7 +66,7 @@ const Repository: React.FC = () => {
const repositoryURL = getCorrectRepositoryURL(); const repositoryURL = getCorrectRepositoryURL();
return ( return (
<List dense={true} subheader={<StyledText variant="subtitle1">{'Repository'}</StyledText>}> <List dense={true} subheader={<StyledText variant="subtitle1">{t('sidebar.repository.title')}</StyledText>}>
<RepositoryListItem button={true}> <RepositoryListItem button={true}>
<RepositoryAvatar src={git} /> <RepositoryAvatar src={git} />
<RepositoryListItemText <RepositoryListItemText

View File

@ -2,6 +2,7 @@ import React, { useState, FormEvent, useCallback } from 'react';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import { RouteComponentProps, withRouter } from 'react-router'; import { RouteComponentProps, withRouter } from 'react-router';
import { SuggestionSelectedEventData } from 'react-autosuggest'; import { SuggestionSelectedEventData } from 'react-autosuggest';
import { useTranslation } from 'react-i18next';
import AutoComplete from '../AutoComplete'; import AutoComplete from '../AutoComplete';
import { callSearch } from '../../utils/calls'; import { callSearch } from '../../utils/calls';
@ -10,11 +11,11 @@ import SearchAdornment from './SearchAdornment';
const CONSTANTS = { const CONSTANTS = {
API_DELAY: 300, API_DELAY: 300,
PLACEHOLDER_TEXT: 'Search Packages',
ABORT_ERROR: 'AbortError', ABORT_ERROR: 'AbortError',
}; };
const Search: React.FC<RouteComponentProps> = ({ history }) => { const Search: React.FC<RouteComponentProps> = ({ history }) => {
const { t } = useTranslation();
const [suggestions, setSuggestions] = useState([]); const [suggestions, setSuggestions] = useState([]);
const [loaded, setLoaded] = useState(false); const [loaded, setLoaded] = useState(false);
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
@ -141,7 +142,7 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
onCleanSuggestions={handlePackagesClearRequested} onCleanSuggestions={handlePackagesClearRequested}
onClick={handleClickSearch} onClick={handleClickSearch}
onSuggestionsFetch={debounce(handleFetchPackages, CONSTANTS.API_DELAY)} onSuggestionsFetch={debounce(handleFetchPackages, CONSTANTS.API_DELAY)}
placeholder={CONSTANTS.PLACEHOLDER_TEXT} placeholder={t('search.packages')}
startAdornment={<SearchAdornment />} startAdornment={<SearchAdornment />}
suggestions={suggestions} suggestions={suggestions}
suggestionsError={error} suggestionsError={error}

View File

@ -1,4 +1,5 @@
import React, { useContext } from 'react'; import React, { useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { DetailContext } from '../../pages/Version'; import { DetailContext } from '../../pages/Version';
import NoItems from '../NoItems'; import NoItems from '../NoItems';
@ -10,6 +11,7 @@ import { StyledText, Spacer, ListItemText } from './styles';
const UpLinks: React.FC = () => { const UpLinks: React.FC = () => {
const { packageMeta } = useContext(DetailContext); const { packageMeta } = useContext(DetailContext);
const { t } = useTranslation();
if (!packageMeta || !packageMeta._uplinks || !packageMeta.latest) { if (!packageMeta || !packageMeta._uplinks || !packageMeta.latest) {
return null; return null;
@ -18,12 +20,12 @@ const UpLinks: React.FC = () => {
const { _uplinks: uplinks, latest } = packageMeta; const { _uplinks: uplinks, latest } = packageMeta;
if (Object.keys(uplinks).length === 0) { if (Object.keys(uplinks).length === 0) {
return <NoItems text={`${latest.name} has no uplinks.`} />; return <NoItems text={t('uplinks.no-items', { name: latest.name })} />;
} }
return ( return (
<> <>
<StyledText variant="subtitle1">{'Uplinks'}</StyledText> <StyledText variant="subtitle1">{t('uplinks.title')}</StyledText>
<List> <List>
{Object.keys(uplinks) {Object.keys(uplinks)
.reverse() .reverse()

View File

@ -1,5 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<UpLinks /> component should render the component when there is no uplink 1`] = `"<h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom\\">verdaccio has no uplinks.</h6>"`; exports[`<UpLinks /> component should render the component when there is no uplink 1`] = `"<h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom\\">uplinks.no-items</h6>"`;
exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-5wp24z-StyledText e14i1sy10 MuiTypography-subtitle1\\">Uplinks</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-t1rp47-Spacer e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">2 years ago</span></div></li></ul>"`; exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-5wp24z-StyledText e14i1sy10 MuiTypography-subtitle1\\">uplinks.title</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-t1rp47-Spacer e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">2 years ago</span></div></li></ul>"`;

View File

@ -4,8 +4,9 @@ import { MemoryRouter } from 'react-router-dom';
import { render, cleanup } from '../../utils/test-react-testing-library'; import { render, cleanup } from '../../utils/test-react-testing-library';
import { mount } from '../../utils/test-enzyme'; import { mount } from '../../utils/test-enzyme';
import { DetailContext, DetailContextProps } from '../../pages/Version'; import { DetailContext, DetailContextProps } from '../../pages/Version';
import translationEN from '../../../i18n/translations/en-US.json';
import Versions, { LABEL_CURRENT_TAGS, LABEL_VERSION_HISTORY } from './Versions'; import Versions from './Versions';
import data from './__partials__/data.json'; import data from './__partials__/data.json';
const detailContextValue: Partial<DetailContextProps> = { const detailContextValue: Partial<DetailContextProps> = {
@ -35,8 +36,8 @@ describe('<Version /> component', () => {
test('should render versions', () => { test('should render versions', () => {
const { getByText } = render(<ComponentToBeRendered contextValue={detailContextValue} />); const { getByText } = render(<ComponentToBeRendered contextValue={detailContextValue} />);
expect(getByText(LABEL_VERSION_HISTORY)).toBeTruthy(); expect(getByText(translationEN.versions['version-history'])).toBeTruthy();
expect(getByText(LABEL_CURRENT_TAGS)).toBeTruthy(); expect(getByText(translationEN.versions['current-tags'])).toBeTruthy();
// pick some versions // pick some versions
expect(getByText('2.3.0')).toBeTruthy(); expect(getByText('2.3.0')).toBeTruthy();
@ -48,8 +49,8 @@ describe('<Version /> component', () => {
<ComponentToBeRendered contextValue={{ packageName: detailContextValue.packageName }} /> <ComponentToBeRendered contextValue={{ packageName: detailContextValue.packageName }} />
); );
expect(queryByText(LABEL_VERSION_HISTORY)).toBeFalsy(); expect(queryByText(translationEN.versions['version-history'])).toBeFalsy();
expect(queryByText(LABEL_CURRENT_TAGS)).toBeFalsy(); expect(queryByText(translationEN.versions['current-tags'])).toBeFalsy();
}); });
test.todo('should click on version link'); test.todo('should click on version link');

View File

@ -1,4 +1,5 @@
import React, { useContext } from 'react'; import React, { useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { DetailContext } from '../../pages/Version'; import { DetailContext } from '../../pages/Version';
import { DIST_TAGS } from '../../../lib/constants'; import { DIST_TAGS } from '../../../lib/constants';
@ -6,13 +7,9 @@ import { DIST_TAGS } from '../../../lib/constants';
import { StyledText } from './styles'; import { StyledText } from './styles';
import VersionsTagList from './VersionsTagList'; import VersionsTagList from './VersionsTagList';
import VersionsHistoryList from './VersionsHistoryList'; import VersionsHistoryList from './VersionsHistoryList';
export const NOT_AVAILABLE = 'Not available';
export const LABEL_CURRENT_TAGS = 'Current Tags';
export const LABEL_VERSION_HISTORY = 'Version History';
const Versions: React.FC = () => { const Versions: React.FC = () => {
const detailContext = useContext(DetailContext); const detailContext = useContext(DetailContext);
const { t } = useTranslation();
const { packageMeta, packageName } = detailContext; const { packageMeta, packageName } = detailContext;
@ -26,13 +23,13 @@ const Versions: React.FC = () => {
<> <>
{distTags && Object.keys(distTags).length > 0 && ( {distTags && Object.keys(distTags).length > 0 && (
<> <>
<StyledText variant="subtitle1">{LABEL_CURRENT_TAGS}</StyledText> <StyledText variant="subtitle1">{t('versions.current-tags')}</StyledText>
<VersionsTagList tags={distTags} /> <VersionsTagList tags={distTags} />
</> </>
)} )}
{versions && Object.keys(versions).length > 0 && packageName && ( {versions && Object.keys(versions).length > 0 && packageName && (
<> <>
<StyledText variant="subtitle1">{LABEL_VERSION_HISTORY}</StyledText> <StyledText variant="subtitle1">{t('versions.version-history')}</StyledText>
<VersionsHistoryList packageName={packageName} time={time} versions={versions} /> <VersionsHistoryList packageName={packageName} time={time} versions={versions} />
</> </>
)} )}

View File

@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next';
import { Versions, Time } from '../../../types/packageMeta'; import { Versions, Time } from '../../../types/packageMeta';
import { formatDateDistance } from '../../utils/package'; import { formatDateDistance } from '../../utils/package';
@ -7,28 +8,32 @@ import ListItem from '../../muiComponents/ListItem';
import { Spacer, ListItemText, StyledLink } from './styles'; import { Spacer, ListItemText, StyledLink } from './styles';
export const NOT_AVAILABLE = 'Not available';
interface Props { interface Props {
versions: Versions; versions: Versions;
packageName: string; packageName: string;
time: Time; time: Time;
} }
const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) => ( const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) => {
<List dense={true}> const { t } = useTranslation();
{Object.keys(versions)
.reverse() return (
.map(version => ( <List dense={true}>
<ListItem className="version-item" key={version}> {Object.keys(versions)
<StyledLink to={`/-/web/detail/${packageName}/v/${version}`}> .reverse()
<ListItemText>{version}</ListItemText> .map(version => (
</StyledLink> <ListItem className="version-item" key={version}>
<Spacer /> <StyledLink to={`/-/web/detail/${packageName}/v/${version}`}>
<ListItemText>{time[version] ? formatDateDistance(time[version]) : NOT_AVAILABLE}</ListItemText> <ListItemText>{version}</ListItemText>
</ListItem> </StyledLink>
))} <Spacer />
</List> <ListItemText>
); {time[version] ? formatDateDistance(time[version]) : t('versions.not-available')}
</ListItemText>
</ListItem>
))}
</List>
);
};
export default VersionsHistoryList; export default VersionsHistoryList;

View File

@ -1,14 +0,0 @@
/* eslint-disable max-len */
/* eslint-disable react/jsx-curly-brace-presence */
import React from 'react';
import SvgIcon from '../muiComponents/SvgIcon';
const GitHub: React.FC = props => (
<SvgIcon {...props}>
<path d="M12.007 0C6.12 0 1.1 4.27.157 10.08c-.944 5.813 2.468 11.45 8.054 13.312.19.064.397.033.555-.084.16-.117.25-.304.244-.5v-2.042c-3.33.735-4.037-1.56-4.037-1.56-.22-.726-.694-1.35-1.334-1.756-1.096-.75.074-.735.074-.735.773.103 1.454.557 1.846 1.23.694 1.21 2.23 1.638 3.45.96.056-.61.327-1.178.766-1.605-2.67-.3-5.462-1.335-5.462-6.002-.02-1.193.42-2.35 1.23-3.226-.327-1.015-.27-2.116.166-3.09 0 0 1.006-.33 3.3 1.23 1.966-.538 4.04-.538 6.003 0 2.295-1.5 3.3-1.23 3.3-1.23.445 1.006.49 2.144.12 3.18.81.877 1.25 2.033 1.23 3.226 0 4.607-2.805 5.627-5.476 5.927.578.583.88 1.386.825 2.206v3.29c-.005.2.092.393.26.507.164.115.377.14.565.063 5.568-1.88 8.956-7.514 8.007-13.313C22.892 4.267 17.884.007 12.008 0z" />
</SvgIcon>
);
export default GitHub;

View File

@ -1 +0,0 @@
export { default } from './GitHub';

View File

@ -3,7 +3,7 @@ import { MemoryRouter } from 'react-router';
import { waitForElement } from '@testing-library/dom'; import { waitForElement } from '@testing-library/dom';
import { render } from '../../utils/test-react-testing-library'; import { render } from '../../utils/test-react-testing-library';
import { NOT_FOUND_TEXT } from '../../components/NotFound'; import translationEN from '../../../i18n/translations/en-US.json';
import Version from './Version'; import Version from './Version';
import { DetailContext } from './context'; import { DetailContext } from './context';
@ -51,7 +51,9 @@ describe('test Version page', () => {
</MemoryRouter> </MemoryRouter>
); );
// we wait fetch response (mocked above) // we wait fetch response (mocked above)
const notFoundElement = await waitForElement(() => getByText(NOT_FOUND_TEXT)); const notFoundElement = await waitForElement(() =>
getByText(translationEN.error['404']['sorry-we-could-not-find-it'])
);
expect(notFoundElement).toBeTruthy(); expect(notFoundElement).toBeTruthy();
}); });

View File

@ -29,7 +29,11 @@ const Home: React.FC<Props> = ({ isUserLoggedIn }) => {
loadPackages().then(); loadPackages().then();
}, [isUserLoggedIn]); }, [isUserLoggedIn]);
return <div className="container content">{isLoading ? <Loading /> : <PackageList packages={packages} />}</div>; return (
<div className="container content" data-testid="home-page-container">
{isLoading ? <Loading /> : <PackageList packages={packages} />}
</div>
);
}; };
export default Home; export default Home;

View File

@ -1,7 +1,3 @@
export const TEXT = {
CLIPBOARD_COPY: 'Copy to Clipboard',
};
export const NODE_MANAGER = { export const NODE_MANAGER = {
npm: 'npm', npm: 'npm',
yarn: 'yarn', yarn: 'yarn',

View File

@ -16,6 +16,22 @@ jest.mock('./api', () => ({
request: require('../../jest/unit/components/__mocks__/api').default.request, request: require('../../jest/unit/components/__mocks__/api').default.request,
})); }));
jest.mock('i18next', () => {
const translationEN = require('../../i18n/translations/en-US.json');
return {
t: (key: string) => {
const splittedKey = key.split('.');
let result = translationEN;
for (const element of splittedKey) {
result = result[element];
}
return result;
},
};
});
describe('isTokenExpire', (): void => { describe('isTokenExpire', (): void => {
test('isTokenExpire - null is not a valid payload', (): void => { test('isTokenExpire - null is not a valid payload', (): void => {
expect(isTokenExpire(null)).toBeTruthy(); expect(isTokenExpire(null)).toBeTruthy();

View File

@ -2,6 +2,7 @@ import isString from 'lodash/isString';
import isNumber from 'lodash/isNumber'; import isNumber from 'lodash/isNumber';
import isEmpty from 'lodash/isEmpty'; import isEmpty from 'lodash/isEmpty';
import { Base64 } from 'js-base64'; import { Base64 } from 'js-base64';
import i18next from 'i18next';
import { HEADERS } from '../../lib/constants'; import { HEADERS } from '../../lib/constants';
@ -56,7 +57,7 @@ export async function makeLogin(username?: string, password?: string): Promise<L
if (isEmpty(username) || isEmpty(password)) { if (isEmpty(username) || isEmpty(password)) {
const error = { const error = {
type: 'error', type: 'error',
description: "Username or password can't be empty!", description: i18next.t('form-validation.username-or-password-cant-be-empty'),
}; };
return { error }; return { error };
} }
@ -78,7 +79,7 @@ export async function makeLogin(username?: string, password?: string): Promise<L
console.error('login error', e.message); console.error('login error', e.message);
const error = { const error = {
type: 'error', type: 'error',
description: 'Unable to sign in', description: i18next.t('form-validation.unable-to-sign-in'),
}; };
return { error }; return { error };
} }

View File

@ -1,5 +1,6 @@
import { isObject } from 'util'; import { isObject } from 'util';
import i18n from 'i18next';
import { UpLinks } from '@verdaccio/types'; import { UpLinks } from '@verdaccio/types';
import isString from 'lodash/isString'; import isString from 'lodash/isString';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
@ -90,3 +91,7 @@ export function getRecentReleases(time: Time = {}): Time[] {
return recent.slice(recent.length - 3, recent.length).reverse(); return recent.slice(recent.length - 3, recent.length).reverse();
} }
export function getAuthorName(authorName: string): string {
return authorName.toLowerCase() === 'anonymous' ? i18n.t('author-anonymous') : authorName;
}

View File

@ -1,3 +1,4 @@
import React from 'react';
import { mount, shallow } from 'enzyme'; import { mount, shallow } from 'enzyme';
import ThemeProvider from '../design-tokens/ThemeProvider'; import ThemeProvider from '../design-tokens/ThemeProvider';

View File

@ -1,10 +1,17 @@
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import React from 'react'; import React from 'react';
import { I18nextProvider } from 'react-i18next';
import i18nConfig from '../../i18n/config';
import ThemeProvider from '../design-tokens/ThemeProvider'; import ThemeProvider from '../design-tokens/ThemeProvider';
const customRender = (node: React.ReactElement<any>, ...options: Array<any>) => { const customRender = (node: React.ReactElement<any>, ...options: Array<any>) => {
return render(<ThemeProvider>{node}</ThemeProvider>, ...options); return render(
<ThemeProvider>
<I18nextProvider i18n={i18nConfig}>{node}</I18nextProvider>
</ThemeProvider>,
...options
);
}; };
export * from '@testing-library/react'; export * from '@testing-library/react';

View File

@ -17,7 +17,7 @@ compiler.hooks.done.tap('Verdaccio Dev Server', () => {
}); });
new WebpackDevServer(compiler, { new WebpackDevServer(compiler, {
contentBase: `${env.DIST_PATH}`, contentBase: env.DIST_PATH,
publicPath: config.output.publicPath, publicPath: config.output.publicPath,
hot: true, hot: true,
historyApiFallback: { historyApiFallback: {

View File

@ -2,6 +2,7 @@
export interface VerdaccioOptions { export interface VerdaccioOptions {
url_prefix: string; url_prefix: string;
base: string; base: string;
language?: string;
} }
declare global { declare global {

150
yarn.lock
View File

@ -1582,12 +1582,12 @@
"@emotion/utils" "0.11.2" "@emotion/utils" "0.11.2"
babel-plugin-emotion "^10.0.22" babel-plugin-emotion "^10.0.22"
"@emotion/hash@0.7.3", "@emotion/hash@^0.7.1": "@emotion/hash@0.7.3":
version "0.7.3" version "0.7.3"
resolved "https://registry.verdaccio.org/@emotion%2fhash/-/hash-0.7.3.tgz#a166882c81c0c6040975dd30df24fae8549bd96f" resolved "https://registry.verdaccio.org/@emotion%2fhash/-/hash-0.7.3.tgz#a166882c81c0c6040975dd30df24fae8549bd96f"
integrity sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw== integrity sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw==
"@emotion/hash@0.7.4": "@emotion/hash@0.7.4", "@emotion/hash@^0.7.4":
version "0.7.4" version "0.7.4"
resolved "https://registry.verdaccio.org/@emotion%2fhash/-/hash-0.7.4.tgz#f14932887422c9056b15a8d222a9074a7dfa2831" resolved "https://registry.verdaccio.org/@emotion%2fhash/-/hash-0.7.4.tgz#f14932887422c9056b15a8d222a9074a7dfa2831"
integrity sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A== integrity sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A==
@ -2013,31 +2013,31 @@
"@babel/runtime" "^7.4.4" "@babel/runtime" "^7.4.4"
"@material-ui/styles@^4.7.1": "@material-ui/styles@^4.7.1":
version "4.7.1" version "4.9.0"
resolved "https://registry.verdaccio.org/@material-ui%2fstyles/-/styles-4.7.1.tgz#48fa70f06441c35e301a9c4b6c825526a97b7a29" resolved "https://registry.verdaccio.org/@material-ui%2fstyles/-/styles-4.9.0.tgz#10c31859f6868cfa9d3adf6b6c3e32c9d676bc76"
integrity sha512-BBfxVThaPrglqHmKtSdrZJxnbFGJqKdZ5ZvDarj3HsmkteGCXsP1ohrDi5TWoa5JEJFo9S6q6NywqsENZn9rZA== integrity sha512-nJHum4RqYBPWsjL/9JET8Z02FZ9gSizlg/7LWVFpIthNzpK6OQ5OSRR4T4x9/p+wK3t1qNn3b1uI4XpnZaPxOA==
dependencies: dependencies:
"@babel/runtime" "^7.4.4" "@babel/runtime" "^7.4.4"
"@emotion/hash" "^0.7.1" "@emotion/hash" "^0.7.4"
"@material-ui/types" "^4.1.1" "@material-ui/types" "^5.0.0"
"@material-ui/utils" "^4.7.1" "@material-ui/utils" "^4.7.1"
clsx "^1.0.2" clsx "^1.0.2"
csstype "^2.5.2" csstype "^2.5.2"
hoist-non-react-statics "^3.2.1" hoist-non-react-statics "^3.2.1"
jss "^10.0.0" jss "^10.0.3"
jss-plugin-camel-case "^10.0.0" jss-plugin-camel-case "^10.0.3"
jss-plugin-default-unit "^10.0.0" jss-plugin-default-unit "^10.0.3"
jss-plugin-global "^10.0.0" jss-plugin-global "^10.0.3"
jss-plugin-nested "^10.0.0" jss-plugin-nested "^10.0.3"
jss-plugin-props-sort "^10.0.0" jss-plugin-props-sort "^10.0.3"
jss-plugin-rule-value-function "^10.0.0" jss-plugin-rule-value-function "^10.0.3"
jss-plugin-vendor-prefixer "^10.0.0" jss-plugin-vendor-prefixer "^10.0.3"
prop-types "^15.7.2" prop-types "^15.7.2"
"@material-ui/system@^4.7.1": "@material-ui/system@^4.7.1":
version "4.7.1" version "4.9.3"
resolved "https://registry.verdaccio.org/@material-ui%2fsystem/-/system-4.7.1.tgz#d928dacc0eeae6bea569ff3ee079f409efb3517d" resolved "https://registry.verdaccio.org/@material-ui%2fsystem/-/system-4.9.3.tgz#ee48990d7941237fdaf21b7b399981d614bb0875"
integrity sha512-zH02p+FOimXLSKOW/OT2laYkl9bB3dD1AvnZqsHYoseUaq0aVrpbl2BGjQi+vJ5lg8w73uYlt9zOWzb3+1UdMQ== integrity sha512-DBGsTKYrLlFpHG8BUp0X6ZpvaOzef+GhSwn/8DwVTXUdHitphaPQoL9xucrI8X9MTBo//El+7nylko7lo7eJIw==
dependencies: dependencies:
"@babel/runtime" "^7.4.4" "@babel/runtime" "^7.4.4"
"@material-ui/utils" "^4.7.1" "@material-ui/utils" "^4.7.1"
@ -2050,6 +2050,11 @@
dependencies: dependencies:
"@types/react" "*" "@types/react" "*"
"@material-ui/types@^5.0.0":
version "5.0.0"
resolved "https://registry.verdaccio.org/@material-ui%2ftypes/-/types-5.0.0.tgz#26d6259dc6b39f4c2e1e9aceff7a11e031941741"
integrity sha512-UeH2BuKkwDndtMSS0qgx1kCzSMw+ydtj0xx/XbFtxNSTlXydKwzs5gVW5ZKsFlAkwoOOQ9TIsyoCC8hq18tOwg==
"@material-ui/utils@^4.7.1": "@material-ui/utils@^4.7.1":
version "4.7.1" version "4.7.1"
resolved "https://registry.verdaccio.org/@material-ui%2futils/-/utils-4.7.1.tgz#dc16c7f0d2cd02fbcdd5cfe601fd6863ae3cc652" resolved "https://registry.verdaccio.org/@material-ui%2futils/-/utils-4.7.1.tgz#dc16c7f0d2cd02fbcdd5cfe601fd6863ae3cc652"
@ -5212,7 +5217,7 @@ css-value@^0.0.1:
resolved "https://registry.verdaccio.org/css-value/-/css-value-0.0.1.tgz#5efd6c2eea5ea1fd6b6ac57ec0427b18452424ea" resolved "https://registry.verdaccio.org/css-value/-/css-value-0.0.1.tgz#5efd6c2eea5ea1fd6b6ac57ec0427b18452424ea"
integrity sha1-Xv1sLupeof1rasV+wEJ7GEUkJOo= integrity sha1-Xv1sLupeof1rasV+wEJ7GEUkJOo=
css-vendor@^2.0.6: css-vendor@^2.0.7:
version "2.0.7" version "2.0.7"
resolved "https://registry.verdaccio.org/css-vendor/-/css-vendor-2.0.7.tgz#4e6d53d953c187981576d6a542acc9fb57174bda" resolved "https://registry.verdaccio.org/css-vendor/-/css-vendor-2.0.7.tgz#4e6d53d953c187981576d6a542acc9fb57174bda"
integrity sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg== integrity sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==
@ -7799,6 +7804,13 @@ html-minifier@^3.2.3:
relateurl "0.2.x" relateurl "0.2.x"
uglify-js "3.4.x" uglify-js "3.4.x"
html-parse-stringify2@2.0.1:
version "2.0.1"
resolved "https://registry.verdaccio.org/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
integrity sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=
dependencies:
void-elements "^2.0.1"
html-tags@^3.1.0: html-tags@^3.1.0:
version "3.1.0" version "3.1.0"
resolved "https://registry.verdaccio.org/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140" resolved "https://registry.verdaccio.org/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
@ -7961,6 +7973,13 @@ hyphenate-style-name@^1.0.3:
resolved "https://registry.verdaccio.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48" resolved "https://registry.verdaccio.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ== integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
i18next@19.1.0:
version "19.1.0"
resolved "https://registry.verdaccio.org/i18next/-/i18next-19.1.0.tgz#fe1a1da3d208872946307c7d2d115da45d46159f"
integrity sha512-ISbmukX4L6Dz0QoH9+EW1AnBw7j+NRLoMu9uLPMaNSSTP9Eie9/oUL0dOyWX15baB3gYOpkHJpGZRHOqcnl0ew==
dependencies:
"@babel/runtime" "^7.3.1"
iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4: iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
version "0.4.24" version "0.4.24"
resolved "https://registry.verdaccio.org/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" resolved "https://registry.verdaccio.org/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@ -9376,69 +9395,69 @@ jsprim@^1.2.2:
json-schema "0.2.3" json-schema "0.2.3"
verror "1.10.0" verror "1.10.0"
jss-plugin-camel-case@^10.0.0: jss-plugin-camel-case@^10.0.3:
version "10.0.0" version "10.0.4"
resolved "https://registry.verdaccio.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0.tgz#d601bae2e8e2041cc526add289dcd7062db0a248" resolved "https://registry.verdaccio.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.4.tgz#3dedecec1e5bba0bf6141c2c05e2ab11ea4b468d"
integrity sha512-yALDL00+pPR4FJh+k07A8FeDvfoPPuXU48HLy63enAubcVd3DnS+2rgqPXglHDGixIDVkCSXecl/l5GAMjzIbA== integrity sha512-+wnqxJsyfUnOn0LxVg3GgZBSjfBCrjxwx7LFxwVTUih0ceGaXKZoieheNOaTo5EM4w8bt1nbb8XonpQCj67C6A==
dependencies: dependencies:
"@babel/runtime" "^7.3.1" "@babel/runtime" "^7.3.1"
hyphenate-style-name "^1.0.3" hyphenate-style-name "^1.0.3"
jss "10.0.0" jss "10.0.4"
jss-plugin-default-unit@^10.0.0: jss-plugin-default-unit@^10.0.3:
version "10.0.0" version "10.0.4"
resolved "https://registry.verdaccio.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0.tgz#601caf5f576fc0c66986fbe8a9aa37307a3a3ea3" resolved "https://registry.verdaccio.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.4.tgz#df03885de20f20a1fc1c21bdb7c62e865ee400d9"
integrity sha512-sURozIOdCtGg9ap18erQ+ijndAfEGtTaetxfU3H4qwC18Bi+fdvjlY/ahKbuu0ASs7R/+WKCP7UaRZOjUDMcdQ== integrity sha512-T0mhL/Ogp/quvod/jAHEqKvptLDxq7Cj3a+7zRuqK8HxUYkftptN89wJElZC3rshhNKiogkEYhCWenpJdFvTBg==
dependencies: dependencies:
"@babel/runtime" "^7.3.1" "@babel/runtime" "^7.3.1"
jss "10.0.0" jss "10.0.4"
jss-plugin-global@^10.0.0: jss-plugin-global@^10.0.3:
version "10.0.0" version "10.0.4"
resolved "https://registry.verdaccio.org/jss-plugin-global/-/jss-plugin-global-10.0.0.tgz#0fed1b6461e0d57d6e394f877529009bc1cb3cb6" resolved "https://registry.verdaccio.org/jss-plugin-global/-/jss-plugin-global-10.0.4.tgz#412245b56133cc88bec654a70d82d5922619f4c5"
integrity sha512-80ofWKSQUo62bxLtRoTNe0kFPtHgUbAJeOeR36WEGgWIBEsXLyXOnD5KNnjPqG4heuEkz9eSLccjYST50JnI7Q== integrity sha512-N8n9/GHENZce+sqE4UYiZiJtI+t+erT/BypHOrNYAfIoNEj7OYsOEKfIo2P0GpLB3QyDAYf5eo9XNdZ8veEkUA==
dependencies: dependencies:
"@babel/runtime" "^7.3.1" "@babel/runtime" "^7.3.1"
jss "10.0.0" jss "10.0.4"
jss-plugin-nested@^10.0.0: jss-plugin-nested@^10.0.3:
version "10.0.0" version "10.0.4"
resolved "https://registry.verdaccio.org/jss-plugin-nested/-/jss-plugin-nested-10.0.0.tgz#d37ecc013c3b0d0e4acc2b48f6b62da6ae53948b" resolved "https://registry.verdaccio.org/jss-plugin-nested/-/jss-plugin-nested-10.0.4.tgz#4d15ad13995fb6e4125618006473a096d2475d75"
integrity sha512-waxxwl/po1hN3azTyixKnr8ReEqUv5WK7WsO+5AWB0bFndML5Yqnt8ARZ90HEg8/P6WlqE/AB2413TkCRZE8bA== integrity sha512-QM21BKVt8LDeoRfowvAMh/s+/89VYrreIIE6ch4pvw0oAXDWw1iorUPlqLZ7uCO3UL0uFtQhJq3QMLN6Lr1v0A==
dependencies: dependencies:
"@babel/runtime" "^7.3.1" "@babel/runtime" "^7.3.1"
jss "10.0.0" jss "10.0.4"
tiny-warning "^1.0.2" tiny-warning "^1.0.2"
jss-plugin-props-sort@^10.0.0: jss-plugin-props-sort@^10.0.3:
version "10.0.0" version "10.0.4"
resolved "https://registry.verdaccio.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0.tgz#38a13407384c2a4a7c026659488350669b953b18" resolved "https://registry.verdaccio.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.4.tgz#43c880ff8dfcf858f809f663ece5e65a1d945b5a"
integrity sha512-41mf22CImjwNdtOG3r+cdC8+RhwNm616sjHx5YlqTwtSJLyLFinbQC/a4PIFk8xqf1qpFH1kEAIw+yx9HaqZ3g== integrity sha512-WoETdOCjGskuin/OMt2uEdDPLZF3vfQuHXF+XUHGJrq0BAapoyGQDcv37SeReDlkRAbVXkEZPsIMvYrgHSHFiA==
dependencies: dependencies:
"@babel/runtime" "^7.3.1" "@babel/runtime" "^7.3.1"
jss "10.0.0" jss "10.0.4"
jss-plugin-rule-value-function@^10.0.0: jss-plugin-rule-value-function@^10.0.3:
version "10.0.0" version "10.0.4"
resolved "https://registry.verdaccio.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0.tgz#3ec1b781b7c86080136dbef6c36e91f20244b72e" resolved "https://registry.verdaccio.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.4.tgz#2f4cf4a86ad3eba875bb48cb9f4a7ed35cb354e7"
integrity sha512-Jw+BZ8JIw1f12V0SERqGlBT1JEPWax3vuZpMym54NAXpPb7R1LYHiCTIlaJUyqvIfEy3kiHMtgI+r2whGgRIxQ== integrity sha512-0hrzOSWRF5ABJGaHrlnHbYZjU877Ofzfh2id3uLtBvemGQLHI+ldoL8/+6iPSRa7M8z8Ngfg2vfYhKjUA5gA0g==
dependencies: dependencies:
"@babel/runtime" "^7.3.1" "@babel/runtime" "^7.3.1"
jss "10.0.0" jss "10.0.4"
jss-plugin-vendor-prefixer@^10.0.0: jss-plugin-vendor-prefixer@^10.0.3:
version "10.0.0" version "10.0.4"
resolved "https://registry.verdaccio.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0.tgz#400280535b0f483a9c78105afe4eee61b70018eb" resolved "https://registry.verdaccio.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.4.tgz#1626ef612a4541cff17cf96815e1740155214ed2"
integrity sha512-qslqvL0MUbWuzXJWdUxpj6mdNUX8jr4FFTo3aZnAT65nmzWL7g8oTr9ZxmTXXgdp7ANhS1QWE7036/Q2isFBpw== integrity sha512-4JgEbcrdeMda1qvxTm1CnxFJAWVV++VLpP46HNTrfH7VhVlvUpihnUNs2gAlKuRT/XSBuiWeLAkrTqF4NVrPig==
dependencies: dependencies:
"@babel/runtime" "^7.3.1" "@babel/runtime" "^7.3.1"
css-vendor "^2.0.6" css-vendor "^2.0.7"
jss "10.0.0" jss "10.0.4"
jss@10.0.0, jss@^10.0.0: jss@10.0.4, jss@^10.0.3:
version "10.0.0" version "10.0.4"
resolved "https://registry.verdaccio.org/jss/-/jss-10.0.0.tgz#998d5026c02accae15708de83bd6ba57bac977d2" resolved "https://registry.verdaccio.org/jss/-/jss-10.0.4.tgz#46ebdde1c40c9a079d64f3334cb88ae28fd90bfd"
integrity sha512-TPpDFsiBjuERiL+dFDq8QCdiF9oDasPcNqCKLGCo/qED3fNYOQ8PX2lZhknyTiAt3tZrfOFbb0lbQ9lTjPZxsQ== integrity sha512-GqHmeDK83qbqMAVjxyPfN1qJVTKZne533a9bdCrllZukUM8npG/k+JumEPI86IIB5ifaZAHG2HAsUziyxOiooQ==
dependencies: dependencies:
"@babel/runtime" "^7.3.1" "@babel/runtime" "^7.3.1"
csstype "^2.6.5" csstype "^2.6.5"
@ -12525,6 +12544,14 @@ react-hot-loader@4.12.18:
shallowequal "^1.1.0" shallowequal "^1.1.0"
source-map "^0.7.3" source-map "^0.7.3"
react-i18next@11.3.1:
version "11.3.1"
resolved "https://registry.verdaccio.org/react-i18next/-/react-i18next-11.3.1.tgz#9269282c3f566015f0bdf8fdbf46782bbe50f5a7"
integrity sha512-S/CWHcnew1lXo8HeniGhBU5kTmPhZ4w4rtA4m/gDN07soCtKKYSAcLNm7zhwjI2OSR4Skd0vOtzNp/FzEEjxIw==
dependencies:
"@babel/runtime" "^7.3.1"
html-parse-stringify2 "2.0.1"
react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0: react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
version "16.12.0" version "16.12.0"
resolved "https://registry.verdaccio.org/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c" resolved "https://registry.verdaccio.org/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
@ -15195,6 +15222,11 @@ vm-browserify@^1.0.1:
resolved "https://registry.verdaccio.org/vm-browserify/-/vm-browserify-1.1.0.tgz#bd76d6a23323e2ca8ffa12028dc04559c75f9019" resolved "https://registry.verdaccio.org/vm-browserify/-/vm-browserify-1.1.0.tgz#bd76d6a23323e2ca8ffa12028dc04559c75f9019"
integrity sha512-iq+S7vZJE60yejDYM0ek6zg308+UZsdtPExWP9VZoCFCz1zkJoXFnAX7aZfd/ZwrkidzdUZL0C/ryW+JwAiIGw== integrity sha512-iq+S7vZJE60yejDYM0ek6zg308+UZsdtPExWP9VZoCFCz1zkJoXFnAX7aZfd/ZwrkidzdUZL0C/ryW+JwAiIGw==
void-elements@^2.0.1:
version "2.0.1"
resolved "https://registry.verdaccio.org/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
w3c-hr-time@^1.0.1: w3c-hr-time@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.verdaccio.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045" resolved "https://registry.verdaccio.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"