1
0
mirror of https://github.com/SomboChea/ui synced 2024-11-28 00:44:30 +07:00

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

View File

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

View File

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

View File

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

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

View File

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

View File

@ -1,5 +1,5 @@
// 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 => ({
fontWeight: props.theme && props.theme.fontWeight.bold,
textTransform: 'capitalize',
}));
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 match from 'autosuggest-highlight/match';
import parse from 'autosuggest-highlight/parse';
import { useTranslation } from 'react-i18next';
import MenuItem from '../../muiComponents/MenuItem';
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(
({
suggestions,
@ -106,6 +101,8 @@ const AutoComplete = memo(
suggestionsLoaded = false,
suggestionsError = false,
}: Props) => {
const { t } = useTranslation();
const autosuggestProps = {
renderInputComponent,
suggestions,
@ -130,9 +127,9 @@ const AutoComplete = memo(
function renderSuggestionsContainer({ containerProps, children, query }): JSX.Element {
return (
<SuggestionContainer {...containerProps} square={true}>
{suggestionsLoaded && children === null && query && renderMessage(SUGGESTIONS_RESPONSE.NO_RESULT)}
{suggestionsLoading && query && renderMessage(SUGGESTIONS_RESPONSE.LOADING)}
{suggestionsError && renderMessage(SUGGESTIONS_RESPONSE.FAILURE)}
{suggestionsLoaded && children === null && query && renderMessage(t('auto-complete.no-results-found'))}
{suggestionsLoading && query && renderMessage(t('auto-complete.loading'))}
{suggestionsError && renderMessage(t('error.unspecific'))}
{children}
</SuggestionContainer>
);

View File

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

View File

@ -1,3 +1,3 @@
// 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 { useHistory } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import CardContent from '../../muiComponents/CardContent';
import { PackageDependencies } from '../../../types/packageMeta';
@ -16,6 +17,7 @@ interface DependencyBlockProps {
const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {
const { enableLoading } = useContext(DetailContext);
const history = useHistory();
const { t } = useTranslation();
const deps = Object.entries(dependencies);
@ -31,8 +33,14 @@ const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }
<StyledText variant="subtitle1">{`${title} (${deps.length})`}</StyledText>
<Tags>
{deps.map(([name, version]) => (
// eslint-disable-next-line
<Tag className={'dep-tag'} clickable={true} key={name} label={`${name}@${version}`} onClick={() => handleClick(name)} />
<Tag
className={'dep-tag'}
clickable={true}
key={name}
label={t('dependencies.dependency-block', { package: name, version })}
// eslint-disable-next-line
onClick={() => handleClick(name)}
/>
))}
</Tags>
</CardContent>
@ -46,9 +54,10 @@ function hasKeys(object?: { [key: string]: any }): boolean {
const Dependencies: React.FC<{}> = () => {
const { packageMeta } = useContext(DetailContext);
const { t } = useTranslation();
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;
@ -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;

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 Box from '../../muiComponents/Box';
@ -8,24 +8,19 @@ import DetailContainerContent from './DetailContainerContent';
import { TabPosition } from './tabs';
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 { readMe } = detailContext;
const handleChangeTabPosition = useCallback(
(event: ChangeEvent<{}>) => {
event.preventDefault();
const eventTarget = event.target as HTMLSpanElement;
const chosentab = eventTarget.innerText as TabPosition;
setTabPosition(TabPosition[chosentab]);
},
[setTabPosition]
);
const handleChange = (event, newValue) => {
setTabPosition(newValue);
};
return (
<Box component="div" display="flex" flexDirection="column" padding={2}>
<DetailContainerTabs onChangeTabPosition={handleChangeTabPosition} tabPosition={tabPosition} />
<DetailContainerContent readDescription={readMe} tabPosition={tabPosition} />
<DetailContainerTabs onChange={handleChange} tabPosition={tabPosition} />
<DetailContainerContent readDescription={readMe} tabPosition={tabs[tabPosition]} />
</Box>
);
};

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,38 +1,29 @@
import React, { useState, useCallback, useContext, useEffect, useMemo } from 'react';
import Add from '@material-ui/icons/Add';
import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';
import { DetailContext } from '../../pages/Version';
import Tooltip from '../../muiComponents/Tooltip';
import Avatar from '../../muiComponents/Avatar';
import Box from '../../muiComponents/Box';
import Text from '../../muiComponents/Text';
import FloatingActionButton from '../../muiComponents/FloatingActionButton';
import { Theme } from '../../design-tokens/theme';
import getUniqueDeveloperValues from './get-unique-developer-values';
import DevelopersTitle from './DevelopersTitle';
import { DeveloperType } from './types';
export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({
backgroundColor: props.theme && props.theme.palette.primary.main,
color: props.theme && props.theme.palette.white,
}));
export enum DeveloperType {
CONTRIBUTORS = 'contributors',
MAINTAINERS = 'maintainers',
}
interface Props {
type: DeveloperType;
visibleMax?: number;
}
export const StyledText = styled(Text)<{ theme?: Theme }>(({ theme }) => ({
fontWeight: theme && theme.fontWeight.bold,
marginBottom: '10px',
textTransform: 'capitalize',
}));
const StyledBox = styled(Box)({
'> *': {
margin: 5,
@ -43,9 +34,10 @@ export const VISIBLE_MAX = 6;
const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {
const detailContext = useContext(DetailContext);
const { t } = useTranslation();
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]), [
@ -69,7 +61,7 @@ const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {
return (
<>
<StyledText variant={'subtitle1'}>{type}</StyledText>
<DevelopersTitle type={type} />
<StyledBox display="flex" flexWrap="wrap" margin="10px 0 10px 0">
{visibleDevelopers.map(visibleDeveloper => (
<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 {
font-weight: 700;
margin-bottom: 10px;
text-transform: capitalize;
}
.emotion-8 > * {
@ -14,64 +13,68 @@ exports[`test Developers should render the component for contributors with items
<Developers
type="contributors"
>
<StyledText
variant="subtitle1"
<DevelopersTitle
type="contributors"
>
<ForwardRef(Text)
className="emotion-0 emotion-1"
<StyledText
variant="subtitle1"
>
<WithStyles(ForwardRef(Typography))
<ForwardRef(Text)
className="emotion-0 emotion-1"
variant="subtitle1"
>
<ForwardRef(Typography)
<WithStyles(ForwardRef(Typography))
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"
>
<h6
className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
<ForwardRef(Typography)
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>
</ForwardRef(Typography)>
</WithStyles(ForwardRef(Typography))>
</ForwardRef(Text)>
</StyledText>
<h6
className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
>
sidebar.contributors.title
</h6>
</ForwardRef(Typography)>
</WithStyles(ForwardRef(Typography))>
</ForwardRef(Text)>
</StyledText>
</DevelopersTitle>
<StyledBox
display="flex"
flexWrap="wrap"
@ -427,7 +430,6 @@ exports[`test Developers should render the component for maintainers with items
.emotion-0 {
font-weight: 700;
margin-bottom: 10px;
text-transform: capitalize;
}
.emotion-8 > * {
@ -437,64 +439,68 @@ exports[`test Developers should render the component for maintainers with items
<Developers
type="maintainers"
>
<StyledText
variant="subtitle1"
<DevelopersTitle
type="maintainers"
>
<ForwardRef(Text)
className="emotion-0 emotion-1"
<StyledText
variant="subtitle1"
>
<WithStyles(ForwardRef(Typography))
<ForwardRef(Text)
className="emotion-0 emotion-1"
variant="subtitle1"
>
<ForwardRef(Typography)
<WithStyles(ForwardRef(Typography))
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"
>
<h6
className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
<ForwardRef(Typography)
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>
</ForwardRef(Typography)>
</WithStyles(ForwardRef(Typography))>
</ForwardRef(Text)>
</StyledText>
<h6
className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
>
sidebar.maintainers.title
</h6>
</ForwardRef(Typography)>
</WithStyles(ForwardRef(Typography))>
</ForwardRef(Text)>
</StyledText>
</DevelopersTitle>
<StyledBox
display="flex"
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 { useTranslation } from 'react-i18next';
import { DetailContext } from '../../pages/Version';
import fileSizeSI from '../../utils/file-size';
@ -22,6 +23,7 @@ const DistChip: FC<{ name: string }> = ({ name, children }) =>
const Dist: FC = () => {
const { packageMeta } = useContext(DetailContext);
const { t } = useTranslation();
if (!packageMeta) {
return null;
@ -30,11 +32,11 @@ const Dist: FC = () => {
const { dist, license } = packageMeta && packageMeta.latest;
return (
<List subheader={<StyledText variant="subtitle1">{'Latest Distribution'}</StyledText>}>
<List subheader={<StyledText variant="subtitle1">{t('sidebar.distribution.title')}</StyledText>}>
<DistListItem button={true}>
<DistChip name="file count">{dist.fileCount}</DistChip>
<DistChip name="size">{dist.unpackedSize && fileSizeSI(dist.unpackedSize)}</DistChip>
<DistChip name="license">{formatLicense(license)}</DistChip>
<DistChip name={t('sidebar.distribution.file-count')}>{dist.fileCount}</DistChip>
<DistChip name={t('sidebar.distribution.size')}>{dist.unpackedSize && fileSizeSI(dist.unpackedSize)}</DistChip>
<DistChip name={t('sidebar.distribution.license')}>{formatLicense(license)}</DistChip>
</DistListItem>
</List>
);

View File

@ -1,7 +1,7 @@
// 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 { useTranslation } from 'react-i18next';
import { DetailContext } from '../../pages/Version';
import Avatar from '../../muiComponents/Avatar';
@ -12,6 +13,7 @@ import node from './img/node.png';
const Engine: React.FC = () => {
const { packageMeta } = useContext(DetailContext);
const { t } = useTranslation();
const engines = packageMeta?.latest?.engines;
@ -23,7 +25,7 @@ const Engine: React.FC = () => {
<Grid container={true}>
{engines.node && (
<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}>
<Avatar src={node} />
<ListItemText primary={engines.node} />
@ -34,7 +36,7 @@ const Engine: React.FC = () => {
{engines.npm && (
<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}>
<Avatar src={npm} />
<ListItemText primary={engines.npm} />

View File

@ -1,3 +1,3 @@
// 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 { useTranslation, Trans } from 'react-i18next';
import { goToVerdaccioWebsite } from '../../utils/windows';
import { Wrapper, Left, Right, Earth, Flags, Love, Flag, Logo, Inner, ToolTip } from './styles';
const renderTooltip = (): JSX.Element => (
<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>
);
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 => {
/* eslint-disable react/jsx-key */
const Footer: React.FC = () => {
const { t } = useTranslation();
return (
<Right>
{POWERED_LABEL}
<Logo img={true} name="verdaccio" onClick={goToVerdaccioWebsite} pointer={true} size="md" />
{`/ ${version}`}
</Right>
<Wrapper>
<Inner>
<Left>
<Trans components={[<Love />]} i18nKey="footer.made-with-love-on" />
<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;

View File

@ -167,13 +167,13 @@ exports[`<Footer /> component should load the initial state of Footer component
<div
class="emotion-27 emotion-28"
>
Made with
Made with
<span
class="emotion-0 emotion-1"
>
</span>
on
on
<span
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 { AppContextProvider } from '../../App';
import translationEN from '../../../i18n/translations/en-US.json';
import Header from './Header';
@ -44,7 +45,7 @@ describe('<Header /> component with logged in state', () => {
});
test('should open login dialog', async () => {
const { getByText } = render(
const { getByTestId } = render(
<Router>
<AppContextProvider>
<Header />
@ -52,9 +53,9 @@ describe('<Header /> component with logged in state', () => {
</Router>
);
const loginBtn = getByText('Login');
const loginBtn = getByTestId('header--button-login');
fireEvent.click(loginBtn);
const loginDialog = await waitForElement(() => getByText('Sign in'));
const loginDialog = await waitForElement(() => getByTestId('login--dialog'));
expect(loginDialog).toBeTruthy();
});
@ -119,7 +120,7 @@ describe('<Header /> component with logged in state', () => {
fireEvent.click(infoBtn);
// 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);
const hasRegistrationInfoModalBeenRemoved = await waitForElementToBeRemoved(() =>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,5 +1,6 @@
import React, { useContext } from 'react';
import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';
import { DetailContext } from '../../pages/Version';
import Text from '../../muiComponents/Text';
@ -14,6 +15,7 @@ const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
}));
const Install: React.FC = () => {
const { t } = useTranslation();
const detailContext = useContext(DetailContext);
const { packageMeta, packageName } = detailContext;
@ -23,7 +25,9 @@ const Install: React.FC = () => {
}
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.YARN} packageName={packageName} />
<InstallListItem dependencyManager={DependencyManager.PNPM} packageName={packageName} />

View File

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

View File

@ -94,7 +94,7 @@ exports[`<Install /> renders correctly 1`] = `
<button
class="MuiButtonBase-root MuiIconButton-root emotion-6 emotion-7"
tabindex="0"
title="Copy to Clipboard"
title="Copy to clipboard"
type="button"
>
<span
@ -161,7 +161,7 @@ exports[`<Install /> renders correctly 1`] = `
<button
class="MuiButtonBase-root MuiIconButton-root emotion-6 emotion-7"
tabindex="0"
title="Copy to Clipboard"
title="Copy to clipboard"
type="button"
>
<span
@ -228,7 +228,7 @@ exports[`<Install /> renders correctly 1`] = `
<button
class="MuiButtonBase-root MuiIconButton-root emotion-6 emotion-7"
tabindex="0"
title="Copy to Clipboard"
title="Copy to clipboard"
type="button"
>
<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 Text, { TextProps } from '../../muiComponents/Text';
@ -8,6 +8,7 @@ interface Props extends Pick<TextProps, 'variant'> {
className?: string;
to: string;
children?: React.ReactNode;
onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
}
type LinkRef = HTMLAnchorElement;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,6 +1,7 @@
import styled from '@emotion/styled';
import React, { useCallback } from 'react';
import { useHistory } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import Box from '../../muiComponents/Box';
import Button from '../../muiComponents/Button';
@ -9,10 +10,6 @@ import { Theme } from '../../design-tokens/theme';
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')({
width: '150px',
margin: '0 auto',
@ -25,6 +22,7 @@ const StyledHeading = styled(Heading)<{ theme?: Theme }>(props => ({
const NotFound: React.FC = () => {
const history = useHistory();
const { t } = useTranslation();
const handleGoHome = useCallback(() => {
history.push('/');
@ -39,12 +37,12 @@ const NotFound: React.FC = () => {
flexGrow={1}
justifyContent="center"
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">
{NOT_FOUND_TEXT}
{t('error.404.sorry-we-could-not-find-it')}
</StyledHeading>
<Button onClick={handleGoHome} variant="contained">
{GO_TO_HOME_PAGE}
<Button data-testid="not-found-go-to-home-button" onClick={handleGoHome} variant="contained">
{t('button.go-to-the-home-page')}
</Button>
</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 NotFound, { GO_TO_HOME_PAGE } from './NotFound';
import NotFound from './NotFound';
describe('<NotFound /> component', () => {
test('should load the component in default state', () => {
@ -14,17 +14,17 @@ describe('<NotFound /> component', () => {
);
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 { getByText } = render(
const { getByTestId } = render(
<Router>
<NotFound />
</Router>
);
const node = getByText(GO_TO_HOME_PAGE);
const node = getByTestId('not-found-go-to-home-button');
fireEvent.click(node);
expect(spy).toHaveBeenCalled();
});
});

View File

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

View File

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

View File

@ -1,5 +1,6 @@
import React from 'react';
import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';
import Avatar from '../../muiComponents/Avatar';
import Text from '../../muiComponents/Text';
@ -44,6 +45,7 @@ const RepositoryAvatar = styled(Avatar)({
const Repository: React.FC = () => {
const detailContext = React.useContext(DetailContext);
const { t } = useTranslation();
const { packageMeta } = detailContext;
@ -64,7 +66,7 @@ const Repository: React.FC = () => {
const repositoryURL = getCorrectRepositoryURL();
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}>
<RepositoryAvatar src={git} />
<RepositoryListItemText

View File

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

View File

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

View File

@ -1,5 +1,5 @@
// 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 { mount } from '../../utils/test-enzyme';
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';
const detailContextValue: Partial<DetailContextProps> = {
@ -35,8 +36,8 @@ describe('<Version /> component', () => {
test('should render versions', () => {
const { getByText } = render(<ComponentToBeRendered contextValue={detailContextValue} />);
expect(getByText(LABEL_VERSION_HISTORY)).toBeTruthy();
expect(getByText(LABEL_CURRENT_TAGS)).toBeTruthy();
expect(getByText(translationEN.versions['version-history'])).toBeTruthy();
expect(getByText(translationEN.versions['current-tags'])).toBeTruthy();
// pick some versions
expect(getByText('2.3.0')).toBeTruthy();
@ -48,8 +49,8 @@ describe('<Version /> component', () => {
<ComponentToBeRendered contextValue={{ packageName: detailContextValue.packageName }} />
);
expect(queryByText(LABEL_VERSION_HISTORY)).toBeFalsy();
expect(queryByText(LABEL_CURRENT_TAGS)).toBeFalsy();
expect(queryByText(translationEN.versions['version-history'])).toBeFalsy();
expect(queryByText(translationEN.versions['current-tags'])).toBeFalsy();
});
test.todo('should click on version link');

View File

@ -1,4 +1,5 @@
import React, { useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { DetailContext } from '../../pages/Version';
import { DIST_TAGS } from '../../../lib/constants';
@ -6,13 +7,9 @@ import { DIST_TAGS } from '../../../lib/constants';
import { StyledText } from './styles';
import VersionsTagList from './VersionsTagList';
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 detailContext = useContext(DetailContext);
const { t } = useTranslation();
const { packageMeta, packageName } = detailContext;
@ -26,13 +23,13 @@ const Versions: React.FC = () => {
<>
{distTags && Object.keys(distTags).length > 0 && (
<>
<StyledText variant="subtitle1">{LABEL_CURRENT_TAGS}</StyledText>
<StyledText variant="subtitle1">{t('versions.current-tags')}</StyledText>
<VersionsTagList tags={distTags} />
</>
)}
{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} />
</>
)}

View File

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

View File

@ -29,7 +29,11 @@ const Home: React.FC<Props> = ({ isUserLoggedIn }) => {
loadPackages().then();
}, [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;

View File

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

View File

@ -16,6 +16,22 @@ jest.mock('./api', () => ({
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 => {
test('isTokenExpire - null is not a valid payload', (): void => {
expect(isTokenExpire(null)).toBeTruthy();

View File

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

View File

@ -1,5 +1,6 @@
import { isObject } from 'util';
import i18n from 'i18next';
import { UpLinks } from '@verdaccio/types';
import isString from 'lodash/isString';
import dayjs from 'dayjs';
@ -90,3 +91,7 @@ export function getRecentReleases(time: Time = {}): Time[] {
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 ThemeProvider from '../design-tokens/ThemeProvider';

View File

@ -1,10 +1,17 @@
import { render } from '@testing-library/react';
import React from 'react';
import { I18nextProvider } from 'react-i18next';
import i18nConfig from '../../i18n/config';
import ThemeProvider from '../design-tokens/ThemeProvider';
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';

View File

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

View File

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

150
yarn.lock
View File

@ -1582,12 +1582,12 @@
"@emotion/utils" "0.11.2"
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"
resolved "https://registry.verdaccio.org/@emotion%2fhash/-/hash-0.7.3.tgz#a166882c81c0c6040975dd30df24fae8549bd96f"
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"
resolved "https://registry.verdaccio.org/@emotion%2fhash/-/hash-0.7.4.tgz#f14932887422c9056b15a8d222a9074a7dfa2831"
integrity sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A==
@ -2013,31 +2013,31 @@
"@babel/runtime" "^7.4.4"
"@material-ui/styles@^4.7.1":
version "4.7.1"
resolved "https://registry.verdaccio.org/@material-ui%2fstyles/-/styles-4.7.1.tgz#48fa70f06441c35e301a9c4b6c825526a97b7a29"
integrity sha512-BBfxVThaPrglqHmKtSdrZJxnbFGJqKdZ5ZvDarj3HsmkteGCXsP1ohrDi5TWoa5JEJFo9S6q6NywqsENZn9rZA==
version "4.9.0"
resolved "https://registry.verdaccio.org/@material-ui%2fstyles/-/styles-4.9.0.tgz#10c31859f6868cfa9d3adf6b6c3e32c9d676bc76"
integrity sha512-nJHum4RqYBPWsjL/9JET8Z02FZ9gSizlg/7LWVFpIthNzpK6OQ5OSRR4T4x9/p+wK3t1qNn3b1uI4XpnZaPxOA==
dependencies:
"@babel/runtime" "^7.4.4"
"@emotion/hash" "^0.7.1"
"@material-ui/types" "^4.1.1"
"@emotion/hash" "^0.7.4"
"@material-ui/types" "^5.0.0"
"@material-ui/utils" "^4.7.1"
clsx "^1.0.2"
csstype "^2.5.2"
hoist-non-react-statics "^3.2.1"
jss "^10.0.0"
jss-plugin-camel-case "^10.0.0"
jss-plugin-default-unit "^10.0.0"
jss-plugin-global "^10.0.0"
jss-plugin-nested "^10.0.0"
jss-plugin-props-sort "^10.0.0"
jss-plugin-rule-value-function "^10.0.0"
jss-plugin-vendor-prefixer "^10.0.0"
jss "^10.0.3"
jss-plugin-camel-case "^10.0.3"
jss-plugin-default-unit "^10.0.3"
jss-plugin-global "^10.0.3"
jss-plugin-nested "^10.0.3"
jss-plugin-props-sort "^10.0.3"
jss-plugin-rule-value-function "^10.0.3"
jss-plugin-vendor-prefixer "^10.0.3"
prop-types "^15.7.2"
"@material-ui/system@^4.7.1":
version "4.7.1"
resolved "https://registry.verdaccio.org/@material-ui%2fsystem/-/system-4.7.1.tgz#d928dacc0eeae6bea569ff3ee079f409efb3517d"
integrity sha512-zH02p+FOimXLSKOW/OT2laYkl9bB3dD1AvnZqsHYoseUaq0aVrpbl2BGjQi+vJ5lg8w73uYlt9zOWzb3+1UdMQ==
version "4.9.3"
resolved "https://registry.verdaccio.org/@material-ui%2fsystem/-/system-4.9.3.tgz#ee48990d7941237fdaf21b7b399981d614bb0875"
integrity sha512-DBGsTKYrLlFpHG8BUp0X6ZpvaOzef+GhSwn/8DwVTXUdHitphaPQoL9xucrI8X9MTBo//El+7nylko7lo7eJIw==
dependencies:
"@babel/runtime" "^7.4.4"
"@material-ui/utils" "^4.7.1"
@ -2050,6 +2050,11 @@
dependencies:
"@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":
version "4.7.1"
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"
integrity sha1-Xv1sLupeof1rasV+wEJ7GEUkJOo=
css-vendor@^2.0.6:
css-vendor@^2.0.7:
version "2.0.7"
resolved "https://registry.verdaccio.org/css-vendor/-/css-vendor-2.0.7.tgz#4e6d53d953c187981576d6a542acc9fb57174bda"
integrity sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==
@ -7799,6 +7804,13 @@ html-minifier@^3.2.3:
relateurl "0.2.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:
version "3.1.0"
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"
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:
version "0.4.24"
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"
verror "1.10.0"
jss-plugin-camel-case@^10.0.0:
version "10.0.0"
resolved "https://registry.verdaccio.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0.tgz#d601bae2e8e2041cc526add289dcd7062db0a248"
integrity sha512-yALDL00+pPR4FJh+k07A8FeDvfoPPuXU48HLy63enAubcVd3DnS+2rgqPXglHDGixIDVkCSXecl/l5GAMjzIbA==
jss-plugin-camel-case@^10.0.3:
version "10.0.4"
resolved "https://registry.verdaccio.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.4.tgz#3dedecec1e5bba0bf6141c2c05e2ab11ea4b468d"
integrity sha512-+wnqxJsyfUnOn0LxVg3GgZBSjfBCrjxwx7LFxwVTUih0ceGaXKZoieheNOaTo5EM4w8bt1nbb8XonpQCj67C6A==
dependencies:
"@babel/runtime" "^7.3.1"
hyphenate-style-name "^1.0.3"
jss "10.0.0"
jss "10.0.4"
jss-plugin-default-unit@^10.0.0:
version "10.0.0"
resolved "https://registry.verdaccio.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0.tgz#601caf5f576fc0c66986fbe8a9aa37307a3a3ea3"
integrity sha512-sURozIOdCtGg9ap18erQ+ijndAfEGtTaetxfU3H4qwC18Bi+fdvjlY/ahKbuu0ASs7R/+WKCP7UaRZOjUDMcdQ==
jss-plugin-default-unit@^10.0.3:
version "10.0.4"
resolved "https://registry.verdaccio.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.4.tgz#df03885de20f20a1fc1c21bdb7c62e865ee400d9"
integrity sha512-T0mhL/Ogp/quvod/jAHEqKvptLDxq7Cj3a+7zRuqK8HxUYkftptN89wJElZC3rshhNKiogkEYhCWenpJdFvTBg==
dependencies:
"@babel/runtime" "^7.3.1"
jss "10.0.0"
jss "10.0.4"
jss-plugin-global@^10.0.0:
version "10.0.0"
resolved "https://registry.verdaccio.org/jss-plugin-global/-/jss-plugin-global-10.0.0.tgz#0fed1b6461e0d57d6e394f877529009bc1cb3cb6"
integrity sha512-80ofWKSQUo62bxLtRoTNe0kFPtHgUbAJeOeR36WEGgWIBEsXLyXOnD5KNnjPqG4heuEkz9eSLccjYST50JnI7Q==
jss-plugin-global@^10.0.3:
version "10.0.4"
resolved "https://registry.verdaccio.org/jss-plugin-global/-/jss-plugin-global-10.0.4.tgz#412245b56133cc88bec654a70d82d5922619f4c5"
integrity sha512-N8n9/GHENZce+sqE4UYiZiJtI+t+erT/BypHOrNYAfIoNEj7OYsOEKfIo2P0GpLB3QyDAYf5eo9XNdZ8veEkUA==
dependencies:
"@babel/runtime" "^7.3.1"
jss "10.0.0"
jss "10.0.4"
jss-plugin-nested@^10.0.0:
version "10.0.0"
resolved "https://registry.verdaccio.org/jss-plugin-nested/-/jss-plugin-nested-10.0.0.tgz#d37ecc013c3b0d0e4acc2b48f6b62da6ae53948b"
integrity sha512-waxxwl/po1hN3azTyixKnr8ReEqUv5WK7WsO+5AWB0bFndML5Yqnt8ARZ90HEg8/P6WlqE/AB2413TkCRZE8bA==
jss-plugin-nested@^10.0.3:
version "10.0.4"
resolved "https://registry.verdaccio.org/jss-plugin-nested/-/jss-plugin-nested-10.0.4.tgz#4d15ad13995fb6e4125618006473a096d2475d75"
integrity sha512-QM21BKVt8LDeoRfowvAMh/s+/89VYrreIIE6ch4pvw0oAXDWw1iorUPlqLZ7uCO3UL0uFtQhJq3QMLN6Lr1v0A==
dependencies:
"@babel/runtime" "^7.3.1"
jss "10.0.0"
jss "10.0.4"
tiny-warning "^1.0.2"
jss-plugin-props-sort@^10.0.0:
version "10.0.0"
resolved "https://registry.verdaccio.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0.tgz#38a13407384c2a4a7c026659488350669b953b18"
integrity sha512-41mf22CImjwNdtOG3r+cdC8+RhwNm616sjHx5YlqTwtSJLyLFinbQC/a4PIFk8xqf1qpFH1kEAIw+yx9HaqZ3g==
jss-plugin-props-sort@^10.0.3:
version "10.0.4"
resolved "https://registry.verdaccio.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.4.tgz#43c880ff8dfcf858f809f663ece5e65a1d945b5a"
integrity sha512-WoETdOCjGskuin/OMt2uEdDPLZF3vfQuHXF+XUHGJrq0BAapoyGQDcv37SeReDlkRAbVXkEZPsIMvYrgHSHFiA==
dependencies:
"@babel/runtime" "^7.3.1"
jss "10.0.0"
jss "10.0.4"
jss-plugin-rule-value-function@^10.0.0:
version "10.0.0"
resolved "https://registry.verdaccio.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0.tgz#3ec1b781b7c86080136dbef6c36e91f20244b72e"
integrity sha512-Jw+BZ8JIw1f12V0SERqGlBT1JEPWax3vuZpMym54NAXpPb7R1LYHiCTIlaJUyqvIfEy3kiHMtgI+r2whGgRIxQ==
jss-plugin-rule-value-function@^10.0.3:
version "10.0.4"
resolved "https://registry.verdaccio.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.4.tgz#2f4cf4a86ad3eba875bb48cb9f4a7ed35cb354e7"
integrity sha512-0hrzOSWRF5ABJGaHrlnHbYZjU877Ofzfh2id3uLtBvemGQLHI+ldoL8/+6iPSRa7M8z8Ngfg2vfYhKjUA5gA0g==
dependencies:
"@babel/runtime" "^7.3.1"
jss "10.0.0"
jss "10.0.4"
jss-plugin-vendor-prefixer@^10.0.0:
version "10.0.0"
resolved "https://registry.verdaccio.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0.tgz#400280535b0f483a9c78105afe4eee61b70018eb"
integrity sha512-qslqvL0MUbWuzXJWdUxpj6mdNUX8jr4FFTo3aZnAT65nmzWL7g8oTr9ZxmTXXgdp7ANhS1QWE7036/Q2isFBpw==
jss-plugin-vendor-prefixer@^10.0.3:
version "10.0.4"
resolved "https://registry.verdaccio.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.4.tgz#1626ef612a4541cff17cf96815e1740155214ed2"
integrity sha512-4JgEbcrdeMda1qvxTm1CnxFJAWVV++VLpP46HNTrfH7VhVlvUpihnUNs2gAlKuRT/XSBuiWeLAkrTqF4NVrPig==
dependencies:
"@babel/runtime" "^7.3.1"
css-vendor "^2.0.6"
jss "10.0.0"
css-vendor "^2.0.7"
jss "10.0.4"
jss@10.0.0, jss@^10.0.0:
version "10.0.0"
resolved "https://registry.verdaccio.org/jss/-/jss-10.0.0.tgz#998d5026c02accae15708de83bd6ba57bac977d2"
integrity sha512-TPpDFsiBjuERiL+dFDq8QCdiF9oDasPcNqCKLGCo/qED3fNYOQ8PX2lZhknyTiAt3tZrfOFbb0lbQ9lTjPZxsQ==
jss@10.0.4, jss@^10.0.3:
version "10.0.4"
resolved "https://registry.verdaccio.org/jss/-/jss-10.0.4.tgz#46ebdde1c40c9a079d64f3334cb88ae28fd90bfd"
integrity sha512-GqHmeDK83qbqMAVjxyPfN1qJVTKZne533a9bdCrllZukUM8npG/k+JumEPI86IIB5ifaZAHG2HAsUziyxOiooQ==
dependencies:
"@babel/runtime" "^7.3.1"
csstype "^2.6.5"
@ -12525,6 +12544,14 @@ react-hot-loader@4.12.18:
shallowequal "^1.1.0"
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:
version "16.12.0"
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"
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:
version "1.0.1"
resolved "https://registry.verdaccio.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"