mirror of
https://github.com/SomboChea/ui
synced 2024-11-24 06:54:27 +07:00
feat(i18n): added i18next for user interface translations (#432)
This commit is contained in:
Priscila Oliveira
GitHub
parent
8d4b3cee7e
commit
7428384b55
32
i18n/config.ts
Normal file
32
i18n/config.ts
Normal 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;
|
||||
138
i18n/translations/en-US.json
Normal file
138
i18n/translations/en-US.json
Normal 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"
|
||||
}
|
||||
}
|
||||
138
i18n/translations/pt-BR.json
Normal file
138
i18n/translations/pt-BR.json
Normal 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"
|
||||
}
|
||||
}
|
||||
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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,7 +36,6 @@ const AppRoute: React.FC = () => {
|
||||
|
||||
return (
|
||||
<Router history={history}>
|
||||
<Suspense fallback={<Loading />}>
|
||||
<Switch>
|
||||
<ReactRouterDomRoute exact={true} path={Route.ROOT}>
|
||||
<HomePage isUserLoggedIn={!!isUserLoggedIn} />
|
||||
@ -65,7 +64,6 @@ const AppRoute: React.FC = () => {
|
||||
<NotFound />
|
||||
</ReactRouterDomRoute>
|
||||
</Switch>
|
||||
</Suspense>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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"
|
||||
@ -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"
|
||||
class="MuiBox-root MuiBox-root-195 emotion-26 emotion-27"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="emotion-32 emotion-33"
|
||||
class="emotion-66 emotion-67"
|
||||
>
|
||||
<div
|
||||
class="MuiCircularProgress-root emotion-30 emotion-31 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
|
||||
role="progressbar"
|
||||
style="width: 50px; height: 50px;"
|
||||
>
|
||||
<svg
|
||||
class="MuiCircularProgress-svg"
|
||||
viewBox="22 22 44 44"
|
||||
>
|
||||
<circle
|
||||
class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
|
||||
cx="44"
|
||||
cy="44"
|
||||
fill="none"
|
||||
r="20.2"
|
||||
stroke-width="3.6"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="emotion-76 emotion-77"
|
||||
class="emotion-64 emotion-65"
|
||||
>
|
||||
<div
|
||||
class="emotion-74 emotion-75"
|
||||
>
|
||||
<div
|
||||
class="emotion-65 emotion-66"
|
||||
class="emotion-55 emotion-56"
|
||||
>
|
||||
Made with
|
||||
<span
|
||||
class="emotion-38 emotion-39"
|
||||
class="emotion-28 emotion-29"
|
||||
>
|
||||
♥
|
||||
</span>
|
||||
on
|
||||
<span
|
||||
class="emotion-63 emotion-64"
|
||||
class="emotion-53 emotion-54"
|
||||
>
|
||||
<svg
|
||||
class="emotion-40 emotion-41 emotion-42"
|
||||
class="emotion-30 emotion-31 emotion-32"
|
||||
>
|
||||
<title>
|
||||
Earth
|
||||
@ -1308,10 +1227,10 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="emotion-61 emotion-62"
|
||||
class="emotion-51 emotion-52"
|
||||
>
|
||||
<svg
|
||||
class="emotion-43 emotion-44 emotion-42"
|
||||
class="emotion-33 emotion-34 emotion-32"
|
||||
>
|
||||
<title>
|
||||
Spain
|
||||
@ -1321,7 +1240,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
class="emotion-43 emotion-44 emotion-42"
|
||||
class="emotion-33 emotion-34 emotion-32"
|
||||
>
|
||||
<title>
|
||||
Nicaragua
|
||||
@ -1331,7 +1250,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
class="emotion-43 emotion-44 emotion-42"
|
||||
class="emotion-33 emotion-34 emotion-32"
|
||||
>
|
||||
<title>
|
||||
India
|
||||
@ -1341,7 +1260,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
class="emotion-43 emotion-44 emotion-42"
|
||||
class="emotion-33 emotion-34 emotion-32"
|
||||
>
|
||||
<title>
|
||||
Brazil
|
||||
@ -1351,7 +1270,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
class="emotion-43 emotion-44 emotion-42"
|
||||
class="emotion-33 emotion-34 emotion-32"
|
||||
>
|
||||
<title>
|
||||
China
|
||||
@ -1361,7 +1280,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
class="emotion-43 emotion-44 emotion-42"
|
||||
class="emotion-33 emotion-34 emotion-32"
|
||||
>
|
||||
<title>
|
||||
Austria
|
||||
@ -1374,16 +1293,16 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="emotion-72 emotion-73"
|
||||
class="emotion-62 emotion-63"
|
||||
>
|
||||
Powered by
|
||||
<span
|
||||
class="emotion-43 emotion-70 emotion-71"
|
||||
class="emotion-33 emotion-60 emotion-61"
|
||||
title="Verdaccio"
|
||||
>
|
||||
<img
|
||||
alt="Verdaccio"
|
||||
class="emotion-67 emotion-68"
|
||||
class="emotion-57 emotion-58"
|
||||
src="[object Object]"
|
||||
/>
|
||||
</span>
|
||||
|
||||
40
src/App/load-dayjs-locale.ts
Normal file
40
src/App/load-dayjs-locale.ts
Normal 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;
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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>"`;
|
||||
|
||||
@ -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)({
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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}>
|
||||
const CopyToClipBoard: React.FC<Props> = ({ text, children }) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<ClipBoardCopy>
|
||||
{renderText(text, children)}
|
||||
<Tooltip disableFocusListener={true} title={t('copy-to-clipboard')}>
|
||||
<CopyIcon onClick={copyToClipBoardUtility(text)}>
|
||||
<FileCopy />
|
||||
</CopyIcon>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
const CopyToClipBoard: React.FC<Props> = ({ text, children }) => {
|
||||
return (
|
||||
<ClipBoardCopy>
|
||||
{renderText(text, children)}
|
||||
{renderToolTipFileCopy(text)}
|
||||
</ClipBoardCopy>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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>"`;
|
||||
|
||||
@ -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]) => (
|
||||
<Tag
|
||||
className={'dep-tag'}
|
||||
clickable={true}
|
||||
key={name}
|
||||
label={t('dependencies.dependency-block', { package: name, version })}
|
||||
// eslint-disable-next-line
|
||||
<Tag className={'dep-tag'} clickable={true} key={name} label={`${name}@${version}`} onClick={() => handleClick(name)} />
|
||||
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;
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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,
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
export enum TabPosition {
|
||||
README = 'Readme',
|
||||
DEPENDENCIES = 'Dependencies',
|
||||
VERSIONS = 'Versions',
|
||||
UPLINKS = 'Uplinks',
|
||||
README = 'readme',
|
||||
DEPENDENCIES = 'dependencies',
|
||||
VERSIONS = 'versions',
|
||||
UPLINKS = 'uplinks',
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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 }) => (
|
||||
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 ? 'Latest v' : 'v'}${version}`}</StyledBoxVersion>
|
||||
<StyledBoxVersion>
|
||||
{isLatest ? t('sidebar.detail.latest-version', { version }) : t('sidebar.detail.version', { version })}
|
||||
</StyledBoxVersion>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailSidebarTitle;
|
||||
|
||||
@ -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 = {
|
||||
|
||||
@ -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}>
|
||||
|
||||
30
src/components/Developers/DevelopersTitle.tsx
Normal file
30
src/components/Developers/DevelopersTitle.tsx
Normal 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',
|
||||
}));
|
||||
@ -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 > * {
|
||||
@ -13,6 +12,9 @@ exports[`test Developers should render the component for contributors with items
|
||||
|
||||
<Developers
|
||||
type="contributors"
|
||||
>
|
||||
<DevelopersTitle
|
||||
type="contributors"
|
||||
>
|
||||
<StyledText
|
||||
variant="subtitle1"
|
||||
@ -66,12 +68,13 @@ exports[`test Developers should render the component for contributors with items
|
||||
<h6
|
||||
className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
|
||||
>
|
||||
contributors
|
||||
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 > * {
|
||||
@ -436,6 +438,9 @@ exports[`test Developers should render the component for maintainers with items
|
||||
|
||||
<Developers
|
||||
type="maintainers"
|
||||
>
|
||||
<DevelopersTitle
|
||||
type="maintainers"
|
||||
>
|
||||
<StyledText
|
||||
variant="subtitle1"
|
||||
@ -489,12 +494,13 @@ exports[`test Developers should render the component for maintainers with items
|
||||
<h6
|
||||
className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
|
||||
>
|
||||
maintainers
|
||||
sidebar.maintainers.title
|
||||
</h6>
|
||||
</ForwardRef(Typography)>
|
||||
</WithStyles(ForwardRef(Typography))>
|
||||
</ForwardRef(Text)>
|
||||
</StyledText>
|
||||
</DevelopersTitle>
|
||||
<StyledBox
|
||||
display="flex"
|
||||
flexWrap="wrap"
|
||||
|
||||
@ -1 +1,2 @@
|
||||
export { default, DeveloperType } from './Developers';
|
||||
export { default } from './Developers';
|
||||
export { DeveloperType } from './types';
|
||||
|
||||
4
src/components/Developers/types.ts
Normal file
4
src/components/Developers/types.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export enum DeveloperType {
|
||||
CONTRIBUTORS = 'contributors',
|
||||
MAINTAINERS = 'maintainers',
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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>"`;
|
||||
|
||||
@ -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} />
|
||||
|
||||
@ -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\\">>= 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\\">>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\\">>= 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\\">>3</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div></div>"`;
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
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 => (
|
||||
/* eslint-disable react/jsx-key */
|
||||
const Footer: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Wrapper>
|
||||
<Inner>
|
||||
<Left>
|
||||
<Trans components={[<Love />]} i18nKey="footer.made-with-love-on" />
|
||||
<ToolTip>
|
||||
<Earth name="earth" size="md" />
|
||||
<Flags>
|
||||
@ -16,38 +24,15 @@ const renderTooltip = (): JSX.Element => (
|
||||
<Flag name="austria" size="md" />
|
||||
</Flags>
|
||||
</ToolTip>
|
||||
);
|
||||
const POWERED_LABEL = 'Powered by';
|
||||
const MADEWITH_LABEL = ' Made with';
|
||||
const ON_LABEL = 'on';
|
||||
const HEARTH_EMOJI = '♥';
|
||||
|
||||
const renderRight = (version = window.VERDACCIO_VERSION): JSX.Element => {
|
||||
return (
|
||||
<Right>
|
||||
{POWERED_LABEL}
|
||||
<Logo img={true} name="verdaccio" onClick={goToVerdaccioWebsite} pointer={true} size="md" />
|
||||
{`/ ${version}`}
|
||||
</Right>
|
||||
);
|
||||
};
|
||||
|
||||
const renderLeft = (): JSX.Element => (
|
||||
<Left>
|
||||
{MADEWITH_LABEL}
|
||||
<Love>{HEARTH_EMOJI}</Love>
|
||||
{ON_LABEL}
|
||||
{renderTooltip()}
|
||||
</Left>
|
||||
);
|
||||
|
||||
const Footer: React.FC = () => (
|
||||
<Wrapper>
|
||||
<Inner>
|
||||
{renderLeft()}
|
||||
{renderRight()}
|
||||
<Right>
|
||||
{t('footer.powered-by')}
|
||||
<Logo img={true} name="verdaccio" onClick={goToVerdaccioWebsite} pointer={true} size="md" />
|
||||
{`/ ${window.VERDACCIO_VERSION}`}
|
||||
</Right>
|
||||
</Inner>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
|
||||
@ -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(() =>
|
||||
|
||||
@ -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>
|
||||
)}
|
||||
|
||||
@ -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 }) => (
|
||||
const HeaderGreetings: React.FC<Props> = ({ username }) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
<Greetings>{'Hi,'}</Greetings>
|
||||
<Greetings>{t('header.greetings')}</Greetings>
|
||||
<Label capitalize={true} data-testid="greetings-label" text={username} weight="bold" />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderGreetings;
|
||||
|
||||
@ -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,7 +24,9 @@ const HeaderMenu: React.FC<Props> = ({
|
||||
anchorEl,
|
||||
onLoggedInMenu,
|
||||
onLoggedInMenuClose,
|
||||
}) => (
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
@ -48,10 +51,11 @@ const HeaderMenu: React.FC<Props> = ({
|
||||
<HeaderGreetings username={username} />
|
||||
</MenuItem>
|
||||
<MenuItem button={true} data-testid="header--button-logout" id="header--button-logout" onClick={onLogout}>
|
||||
{'Logout'}
|
||||
{t('button.logout')}
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderMenu;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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} />
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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();
|
||||
});
|
||||
|
||||
|
||||
@ -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 />
|
||||
|
||||
@ -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 }) => (
|
||||
const LoginDialogCloseButton: React.FC<Props> = ({ onClose }) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<DialogTitle>
|
||||
<StyledIconButton data-testid="close-login-dialog-button" onClick={onClose}>
|
||||
<CloseIcon titleAccess="Close Dialog" />
|
||||
<CloseIcon titleAccess={t('button.close')} />
|
||||
</StyledIconButton>
|
||||
</DialogTitle>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginDialogCloseButton;
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
@ -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"
|
||||
>
|
||||
|
||||
@ -1 +1 @@
|
||||
export { default, NOT_FOUND_TEXT } from './NotFound';
|
||||
export { default } from './NotFound';
|
||||
|
||||
@ -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()}
|
||||
|
||||
@ -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 }) => (
|
||||
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}>{'Register Info'}</Title>
|
||||
<Title disableTypography={true}>{t('dialog.registry-info.title')}</Title>
|
||||
<Content>{children}</Content>
|
||||
<DialogActions>
|
||||
<Button color="inherit" id="registryInfo--dialog-close" onClick={onClose}>
|
||||
{LABEL}
|
||||
{t('button.close')}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default RegistryInfoDialog;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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()
|
||||
|
||||
@ -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>"`;
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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} />
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -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,15 +8,16 @@ 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 }) => (
|
||||
const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<List dense={true}>
|
||||
{Object.keys(versions)
|
||||
.reverse()
|
||||
@ -25,10 +27,13 @@ const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) =
|
||||
<ListItemText>{version}</ListItemText>
|
||||
</StyledLink>
|
||||
<Spacer />
|
||||
<ListItemText>{time[version] ? formatDateDistance(time[version]) : NOT_AVAILABLE}</ListItemText>
|
||||
<ListItemText>
|
||||
{time[version] ? formatDateDistance(time[version]) : t('versions.not-available')}
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
);
|
||||
};
|
||||
|
||||
export default VersionsHistoryList;
|
||||
|
||||
@ -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;
|
||||
@ -1 +0,0 @@
|
||||
export { default } from './GitHub';
|
||||
@ -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();
|
||||
});
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
export const TEXT = {
|
||||
CLIPBOARD_COPY: 'Copy to Clipboard',
|
||||
};
|
||||
|
||||
export const NODE_MANAGER = {
|
||||
npm: 'npm',
|
||||
yarn: 'yarn',
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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 };
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import React from 'react';
|
||||
import { mount, shallow } from 'enzyme';
|
||||
|
||||
import ThemeProvider from '../design-tokens/ThemeProvider';
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
export interface VerdaccioOptions {
|
||||
url_prefix: string;
|
||||
base: string;
|
||||
language?: string;
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
||||
150
yarn.lock
150
yarn.lock
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user