forked from sombochea/verdaccio-ui
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",
|
"github-markdown-css": "3.0.1",
|
||||||
"html-webpack-plugin": "3.2.0",
|
"html-webpack-plugin": "3.2.0",
|
||||||
"husky": "3.1.0",
|
"husky": "3.1.0",
|
||||||
|
"i18next": "19.1.0",
|
||||||
"identity-obj-proxy": "3.0.0",
|
"identity-obj-proxy": "3.0.0",
|
||||||
"in-publish": "2.0.0",
|
"in-publish": "2.0.0",
|
||||||
"jest": "24.9.0",
|
"jest": "24.9.0",
|
||||||
@ -99,6 +100,7 @@
|
|||||||
"react-dom": "16.13.0",
|
"react-dom": "16.13.0",
|
||||||
"react-hook-form": "3.29.4",
|
"react-hook-form": "3.29.4",
|
||||||
"react-hot-loader": "4.12.18",
|
"react-hot-loader": "4.12.18",
|
||||||
|
"react-i18next": "11.3.1",
|
||||||
"react-router-dom": "5.1.2",
|
"react-router-dom": "5.1.2",
|
||||||
"request": "2.88.0",
|
"request": "2.88.0",
|
||||||
"resolve-url-loader": "3.1.1",
|
"resolve-url-loader": "3.1.1",
|
||||||
@ -138,7 +140,7 @@
|
|||||||
"bundlesize": [
|
"bundlesize": [
|
||||||
{
|
{
|
||||||
"path": "./static/vendors.*.js",
|
"path": "./static/vendors.*.js",
|
||||||
"maxSize": "185 kB"
|
"maxSize": "200 kB"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "./static/main.*.js",
|
"path": "./static/main.*.js",
|
||||||
|
|||||||
@ -4976,8 +4976,12 @@
|
|||||||
"_attachments": {
|
"_attachments": {
|
||||||
"jquery-1.5.1.tgz": {
|
"jquery-1.5.1.tgz": {
|
||||||
"shasum": "2ae2d661e906c1a01e044a71bb5b2743942183e5"
|
"shasum": "2ae2d661e906c1a01e044a71bb5b2743942183e5"
|
||||||
|
},
|
||||||
|
"jquery-3.3.1.tgz": {
|
||||||
|
"shasum": "958ce29e81c9790f31be7792df5d4d95fc57fbca"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"_rev": "60-fed4915c27b9c1e6",
|
"_rev": "61-e6be890a78963127",
|
||||||
"readme": "# jQuery\n\n> jQuery is a fast, small, and feature-rich JavaScript library.\n\nFor information on how to get started and how to use jQuery, please see [jQuery's documentation](http://api.jquery.com/).\nFor source files and issues, please visit the [jQuery repo](https://github.com/jquery/jquery).\n\nIf upgrading, please see the [blog post for 3.3.1](https://blog.jquery.com/2017/03/20/jquery-3.3.1-now-available/). This includes notable differences from the previous version and a more readable changelog.\n\n## Including jQuery\n\nBelow are some of the most common ways to include jQuery.\n\n### Browser\n\n#### Script tag\n\n```html\n<script src=\"https://code.jquery.com/jquery-3.3.1.min.js\"></script>\n```\n\n#### Babel\n\n[Babel](http://babeljs.io/) is a next generation JavaScript compiler. One of the features is the ability to use ES6/ES2015 modules now, even though browsers do not yet support this feature natively.\n\n```js\nimport $ from \"jquery\";\n```\n\n#### Browserify/Webpack\n\nThere are several ways to use [Browserify](http://browserify.org/) and [Webpack](https://webpack.github.io/). For more information on using these tools, please refer to the corresponding project's documention. In the script, including jQuery will usually look like this...\n\n```js\nvar $ = require(\"jquery\");\n```\n\n#### AMD (Asynchronous Module Definition)\n\nAMD is a module format built for the browser. For more information, we recommend [require.js' documentation](http://requirejs.org/docs/whyamd.html).\n\n```js\ndefine([\"jquery\"], function($) {\n\n});\n```\n\n### Node\n\nTo include jQuery in [Node](nodejs.org), first install with npm.\n\n```sh\nnpm install jquery\n```\n\nFor jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as [jsdom](https://github.com/tmpvar/jsdom). This can be useful for testing purposes.\n\n```js\nrequire(\"jsdom\").env(\"\", function(err, window) {\n\tif (err) {\n\t\tconsole.error(err);\n\t\treturn;\n\t}\n\n\tvar $ = require(\"jquery\")(window);\n});\n```"
|
"readme": "# jQuery\n\n> jQuery is a fast, small, and feature-rich JavaScript library.\n\nFor information on how to get started and how to use jQuery, please see [jQuery's documentation](http://api.jquery.com/).\nFor source files and issues, please visit the [jQuery repo](https://github.com/jquery/jquery).\n\nIf upgrading, please see the [blog post for 3.3.1](https://blog.jquery.com/2017/03/20/jquery-3.3.1-now-available/). This includes notable differences from the previous version and a more readable changelog.\n\n## Including jQuery\n\nBelow are some of the most common ways to include jQuery.\n\n### Browser\n\n#### Script tag\n\n```html\n<script src=\"https://code.jquery.com/jquery-3.3.1.min.js\"></script>\n```\n\n#### Babel\n\n[Babel](http://babeljs.io/) is a next generation JavaScript compiler. One of the features is the ability to use ES6/ES2015 modules now, even though browsers do not yet support this feature natively.\n\n```js\nimport $ from \"jquery\";\n```\n\n#### Browserify/Webpack\n\nThere are several ways to use [Browserify](http://browserify.org/) and [Webpack](https://webpack.github.io/). For more information on using these tools, please refer to the corresponding project's documention. In the script, including jQuery will usually look like this...\n\n```js\nvar $ = require(\"jquery\");\n```\n\n#### AMD (Asynchronous Module Definition)\n\nAMD is a module format built for the browser. For more information, we recommend [require.js' documentation](http://requirejs.org/docs/whyamd.html).\n\n```js\ndefine([\"jquery\"], function($) {\n\n});\n```\n\n### Node\n\nTo include jQuery in [Node](nodejs.org), first install with npm.\n\n```sh\nnpm install jquery\n```\n\nFor jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as [jsdom](https://github.com/tmpvar/jsdom). This can be useful for testing purposes.\n\n```js\nrequire(\"jsdom\").env(\"\", function(err, window) {\n\tif (err) {\n\t\tconsole.error(err);\n\t\treturn;\n\t}\n\n\tvar $ = require(\"jquery\")(window);\n});\n```",
|
||||||
|
"_id": "jquery"
|
||||||
}
|
}
|
||||||
@ -1,18 +1,22 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
/* eslint-disable react/jsx-max-depth */
|
||||||
|
import React, { useState, useEffect, Suspense } from 'react';
|
||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
import isNil from 'lodash/isNil';
|
import isNil from 'lodash/isNil';
|
||||||
import { Router } from 'react-router-dom';
|
import { Router } from 'react-router-dom';
|
||||||
|
|
||||||
|
import '../../i18n/config';
|
||||||
import storage from '../utils/storage';
|
import storage from '../utils/storage';
|
||||||
import { isTokenExpire } from '../utils/login';
|
import { isTokenExpire } from '../utils/login';
|
||||||
import Header from '../components/Header';
|
import Header from '../components/Header';
|
||||||
import Footer from '../components/Footer';
|
import Footer from '../components/Footer';
|
||||||
|
import Loading from '../components/Loading';
|
||||||
import Box from '../muiComponents/Box';
|
import Box from '../muiComponents/Box';
|
||||||
import StyleBaseline from '../design-tokens/StyleBaseline';
|
import StyleBaseline from '../design-tokens/StyleBaseline';
|
||||||
import { Theme } from '../design-tokens/theme';
|
import { Theme } from '../design-tokens/theme';
|
||||||
|
|
||||||
import AppContextProvider from './AppContextProvider';
|
import AppContextProvider from './AppContextProvider';
|
||||||
import AppRoute, { history } from './AppRoute';
|
import AppRoute, { history } from './AppRoute';
|
||||||
|
import loadDayJSLocale from './load-dayjs-locale';
|
||||||
|
|
||||||
const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
|
const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
|
||||||
backgroundColor: theme && theme.palette.white,
|
backgroundColor: theme && theme.palette.white,
|
||||||
@ -31,7 +35,6 @@ const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
|
|||||||
/* eslint-disable react-hooks/exhaustive-deps */
|
/* eslint-disable react-hooks/exhaustive-deps */
|
||||||
const App: React.FC = () => {
|
const App: React.FC = () => {
|
||||||
const [user, setUser] = useState();
|
const [user, setUser] = useState();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Logout user
|
* Logout user
|
||||||
* Required by: <Header />
|
* Required by: <Header />
|
||||||
@ -57,10 +60,11 @@ const App: React.FC = () => {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
checkUserAlreadyLoggedIn();
|
checkUserAlreadyLoggedIn();
|
||||||
|
loadDayJSLocale();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<Suspense fallback={<Loading />}>
|
||||||
<StyleBaseline />
|
<StyleBaseline />
|
||||||
<StyledBox display="flex" flexDirection="column" height="100%">
|
<StyledBox display="flex" flexDirection="column" height="100%">
|
||||||
<>
|
<>
|
||||||
@ -68,7 +72,6 @@ const App: React.FC = () => {
|
|||||||
<AppContextProvider user={user}>
|
<AppContextProvider user={user}>
|
||||||
<Header />
|
<Header />
|
||||||
<StyledBoxContent flexGrow={1}>
|
<StyledBoxContent flexGrow={1}>
|
||||||
{/* eslint-disable-next-line react/jsx-max-depth */}
|
|
||||||
<AppRoute />
|
<AppRoute />
|
||||||
</StyledBoxContent>
|
</StyledBoxContent>
|
||||||
</AppContextProvider>
|
</AppContextProvider>
|
||||||
@ -76,7 +79,7 @@ const App: React.FC = () => {
|
|||||||
<Footer />
|
<Footer />
|
||||||
</>
|
</>
|
||||||
</StyledBox>
|
</StyledBox>
|
||||||
</>
|
</Suspense>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,8 +1,7 @@
|
|||||||
import React, { lazy, useContext, Suspense } from 'react';
|
import React, { lazy, useContext } from 'react';
|
||||||
import { Route as ReactRouterDomRoute, Switch, Router } from 'react-router-dom';
|
import { Route as ReactRouterDomRoute, Switch, Router } from 'react-router-dom';
|
||||||
import { createBrowserHistory } from 'history';
|
import { createBrowserHistory } from 'history';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
import Loading from '../components/Loading';
|
|
||||||
|
|
||||||
import AppContext from './AppContext';
|
import AppContext from './AppContext';
|
||||||
|
|
||||||
@ -25,9 +24,10 @@ export const history = createBrowserHistory({
|
|||||||
|
|
||||||
const AppRoute: React.FC = () => {
|
const AppRoute: React.FC = () => {
|
||||||
const appContext = useContext(AppContext);
|
const appContext = useContext(AppContext);
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
if (!appContext) {
|
if (!appContext) {
|
||||||
throw Error('The app Context was not correct used');
|
throw Error(t('app-context-not-correct-used'));
|
||||||
}
|
}
|
||||||
|
|
||||||
const { user } = appContext;
|
const { user } = appContext;
|
||||||
@ -36,36 +36,34 @@ const AppRoute: React.FC = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Router history={history}>
|
<Router history={history}>
|
||||||
<Suspense fallback={<Loading />}>
|
<Switch>
|
||||||
<Switch>
|
<ReactRouterDomRoute exact={true} path={Route.ROOT}>
|
||||||
<ReactRouterDomRoute exact={true} path={Route.ROOT}>
|
<HomePage isUserLoggedIn={!!isUserLoggedIn} />
|
||||||
<HomePage isUserLoggedIn={!!isUserLoggedIn} />
|
</ReactRouterDomRoute>
|
||||||
</ReactRouterDomRoute>
|
<ReactRouterDomRoute exact={true} path={Route.PACKAGE}>
|
||||||
<ReactRouterDomRoute exact={true} path={Route.PACKAGE}>
|
<VersionContextProvider>
|
||||||
<VersionContextProvider>
|
<VersionPage />
|
||||||
<VersionPage />
|
</VersionContextProvider>
|
||||||
</VersionContextProvider>
|
</ReactRouterDomRoute>
|
||||||
</ReactRouterDomRoute>
|
<ReactRouterDomRoute exact={true} path={Route.PACKAGE_VERSION}>
|
||||||
<ReactRouterDomRoute exact={true} path={Route.PACKAGE_VERSION}>
|
<VersionContextProvider>
|
||||||
<VersionContextProvider>
|
<VersionPage />
|
||||||
<VersionPage />
|
</VersionContextProvider>
|
||||||
</VersionContextProvider>
|
</ReactRouterDomRoute>
|
||||||
</ReactRouterDomRoute>
|
<ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE_VERSION}>
|
||||||
<ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE_VERSION}>
|
<VersionContextProvider>
|
||||||
<VersionContextProvider>
|
<VersionPage />
|
||||||
<VersionPage />
|
</VersionContextProvider>
|
||||||
</VersionContextProvider>
|
</ReactRouterDomRoute>
|
||||||
</ReactRouterDomRoute>
|
<ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE}>
|
||||||
<ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE}>
|
<VersionContextProvider>
|
||||||
<VersionContextProvider>
|
<VersionPage />
|
||||||
<VersionPage />
|
</VersionContextProvider>
|
||||||
</VersionContextProvider>
|
</ReactRouterDomRoute>
|
||||||
</ReactRouterDomRoute>
|
<ReactRouterDomRoute>
|
||||||
<ReactRouterDomRoute>
|
<NotFound />
|
||||||
<NotFound />
|
</ReactRouterDomRoute>
|
||||||
</ReactRouterDomRoute>
|
</Switch>
|
||||||
</Switch>
|
|
||||||
</Suspense>
|
|
||||||
</Router>
|
</Router>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -152,53 +152,6 @@ exports[`<App /> should display the Header component 1`] = `
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-34 {
|
|
||||||
-webkit-transform: translate(-50%,-50%);
|
|
||||||
-ms-transform: translate(-50%,-50%);
|
|
||||||
transform: translate(-50%,-50%);
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emotion-28 {
|
|
||||||
margin: 0 0 30px 0;
|
|
||||||
border-radius: 25px;
|
|
||||||
box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
|
|
||||||
background: #f7f8f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emotion-26 {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background-position: center;
|
|
||||||
background-size: contain;
|
|
||||||
background-image: url([object Object]);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
width: 90px;
|
|
||||||
height: 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emotion-32 {
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-align-items: center;
|
|
||||||
-webkit-box-align: center;
|
|
||||||
-ms-flex-align: center;
|
|
||||||
align-items: center;
|
|
||||||
-webkit-box-pack: center;
|
|
||||||
-webkit-justify-content: center;
|
|
||||||
-ms-flex-pack: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emotion-30 {
|
|
||||||
color: #4b5e40;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emotion-76 {
|
.emotion-76 {
|
||||||
background: #f9f9f9;
|
background: #f9f9f9;
|
||||||
border-top: 1px solid #e3e3e3;
|
border-top: 1px solid #e3e3e3;
|
||||||
@ -356,6 +309,53 @@ exports[`<App /> should display the Header component 1`] = `
|
|||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.emotion-34 {
|
||||||
|
-webkit-transform: translate(-50%,-50%);
|
||||||
|
-ms-transform: translate(-50%,-50%);
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emotion-28 {
|
||||||
|
margin: 0 0 30px 0;
|
||||||
|
border-radius: 25px;
|
||||||
|
box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
|
||||||
|
background: #f7f8f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emotion-26 {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-position: center;
|
||||||
|
background-size: contain;
|
||||||
|
background-image: url([object Object]);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emotion-32 {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emotion-30 {
|
||||||
|
color: #4b5e40;
|
||||||
|
}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="MuiBox-root MuiBox-root-219 emotion-78 emotion-79"
|
class="MuiBox-root MuiBox-root-219 emotion-78 emotion-79"
|
||||||
>
|
>
|
||||||
@ -545,6 +545,7 @@ exports[`<App /> should display the Header component 1`] = `
|
|||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="container content"
|
class="container content"
|
||||||
|
data-testid="home-page-container"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="emotion-34 emotion-35"
|
class="emotion-34 emotion-35"
|
||||||
@ -592,13 +593,13 @@ exports[`<App /> should display the Header component 1`] = `
|
|||||||
<div
|
<div
|
||||||
class="emotion-65 emotion-66"
|
class="emotion-65 emotion-66"
|
||||||
>
|
>
|
||||||
Made with
|
Made with
|
||||||
<span
|
<span
|
||||||
class="emotion-38 emotion-39"
|
class="emotion-38 emotion-39"
|
||||||
>
|
>
|
||||||
♥
|
♥
|
||||||
</span>
|
</span>
|
||||||
on
|
on
|
||||||
<span
|
<span
|
||||||
class="emotion-63 emotion-64"
|
class="emotion-63 emotion-64"
|
||||||
>
|
>
|
||||||
@ -700,7 +701,7 @@ exports[`<App /> should display the Header component 1`] = `
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`<App /> should display the Loading component at the beginning 1`] = `
|
exports[`<App /> should display the Loading component at the beginning 1`] = `
|
||||||
.emotion-78 {
|
.emotion-68 {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -843,7 +844,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width:1240px) {
|
@media screen and (min-width:1240px) {
|
||||||
.emotion-36 {
|
.emotion-26 {
|
||||||
max-width: 1240px;
|
max-width: 1240px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
@ -851,54 +852,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-34 {
|
.emotion-66 {
|
||||||
-webkit-transform: translate(-50%,-50%);
|
|
||||||
-ms-transform: translate(-50%,-50%);
|
|
||||||
transform: translate(-50%,-50%);
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emotion-28 {
|
|
||||||
margin: 0 0 30px 0;
|
|
||||||
border-radius: 25px;
|
|
||||||
box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
|
|
||||||
background: #f7f8f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emotion-26 {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background-position: center;
|
|
||||||
background-size: contain;
|
|
||||||
background-image: url([object Object]);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
width: 90px;
|
|
||||||
height: 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emotion-32 {
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-align-items: center;
|
|
||||||
-webkit-box-align: center;
|
|
||||||
-ms-flex-align: center;
|
|
||||||
align-items: center;
|
|
||||||
-webkit-box-pack: center;
|
|
||||||
-webkit-justify-content: center;
|
|
||||||
-ms-flex-pack: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emotion-30 {
|
|
||||||
color: #4b5e40;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emotion-76 {
|
|
||||||
background: #f9f9f9;
|
background: #f9f9f9;
|
||||||
border-top: 1px solid #e3e3e3;
|
border-top: 1px solid #e3e3e3;
|
||||||
color: #999999;
|
color: #999999;
|
||||||
@ -906,7 +860,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-74 {
|
.emotion-64 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -923,7 +877,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width:768px) {
|
@media (min-width:768px) {
|
||||||
.emotion-74 {
|
.emotion-64 {
|
||||||
min-width: 400px;
|
min-width: 400px;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
@ -935,12 +889,12 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width:1024px) {
|
@media (min-width:1024px) {
|
||||||
.emotion-74 {
|
.emotion-64 {
|
||||||
max-width: 1240px;
|
max-width: 1240px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-65 {
|
.emotion-55 {
|
||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
@ -949,7 +903,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width:768px) {
|
@media (min-width:768px) {
|
||||||
.emotion-65 {
|
.emotion-55 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -957,21 +911,21 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-38 {
|
.emotion-28 {
|
||||||
color: #e25555;
|
color: #e25555;
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-63 {
|
.emotion-53 {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-63:hover .emotion-62 {
|
.emotion-53:hover .emotion-52 {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-41 {
|
.emotion-31 {
|
||||||
box-sizing: initial;
|
box-sizing: initial;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
@ -980,7 +934,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-61 {
|
.emotion-51 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: #d3dddd;
|
background: #d3dddd;
|
||||||
padding: 1px 4px;
|
padding: 1px 4px;
|
||||||
@ -998,7 +952,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
top: -2px;
|
top: -2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-61:before {
|
.emotion-51:before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 29%;
|
top: 29%;
|
||||||
@ -1011,7 +965,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-44 {
|
.emotion-34 {
|
||||||
box-sizing: initial;
|
box-sizing: initial;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
@ -1020,7 +974,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-72 {
|
.emotion-62 {
|
||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
@ -1033,7 +987,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width:768px) {
|
@media (min-width:768px) {
|
||||||
.emotion-72 {
|
.emotion-62 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -1041,7 +995,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-70 {
|
.emotion-60 {
|
||||||
box-sizing: initial;
|
box-sizing: initial;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -1050,13 +1004,14 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-67 {
|
.emotion-57 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="MuiBox-root MuiBox-root-2 emotion-78 emotion-79"
|
class="MuiBox-root MuiBox-root-2 emotion-68 emotion-69"
|
||||||
|
style="display: none;"
|
||||||
>
|
>
|
||||||
<header
|
<header
|
||||||
class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-24 emotion-25 MuiAppBar-colorPrimary"
|
class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-24 emotion-25 MuiAppBar-colorPrimary"
|
||||||
@ -1240,65 +1195,29 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div
|
<div
|
||||||
class="MuiBox-root MuiBox-root-195 emotion-36 emotion-37"
|
class="MuiBox-root MuiBox-root-195 emotion-26 emotion-27"
|
||||||
>
|
/>
|
||||||
<div
|
|
||||||
class="emotion-34 emotion-35"
|
|
||||||
data-testid="loading"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="emotion-28 emotion-29"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="emotion-26 emotion-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="emotion-32 emotion-33"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="MuiCircularProgress-root emotion-30 emotion-31 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
|
|
||||||
role="progressbar"
|
|
||||||
style="width: 50px; height: 50px;"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="MuiCircularProgress-svg"
|
|
||||||
viewBox="22 22 44 44"
|
|
||||||
>
|
|
||||||
<circle
|
|
||||||
class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
|
|
||||||
cx="44"
|
|
||||||
cy="44"
|
|
||||||
fill="none"
|
|
||||||
r="20.2"
|
|
||||||
stroke-width="3.6"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
class="emotion-76 emotion-77"
|
class="emotion-66 emotion-67"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="emotion-74 emotion-75"
|
class="emotion-64 emotion-65"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="emotion-65 emotion-66"
|
class="emotion-55 emotion-56"
|
||||||
>
|
>
|
||||||
Made with
|
Made with
|
||||||
<span
|
<span
|
||||||
class="emotion-38 emotion-39"
|
class="emotion-28 emotion-29"
|
||||||
>
|
>
|
||||||
♥
|
♥
|
||||||
</span>
|
</span>
|
||||||
on
|
on
|
||||||
<span
|
<span
|
||||||
class="emotion-63 emotion-64"
|
class="emotion-53 emotion-54"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
class="emotion-40 emotion-41 emotion-42"
|
class="emotion-30 emotion-31 emotion-32"
|
||||||
>
|
>
|
||||||
<title>
|
<title>
|
||||||
Earth
|
Earth
|
||||||
@ -1308,10 +1227,10 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<span
|
<span
|
||||||
class="emotion-61 emotion-62"
|
class="emotion-51 emotion-52"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
class="emotion-43 emotion-44 emotion-42"
|
class="emotion-33 emotion-34 emotion-32"
|
||||||
>
|
>
|
||||||
<title>
|
<title>
|
||||||
Spain
|
Spain
|
||||||
@ -1321,7 +1240,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<svg
|
<svg
|
||||||
class="emotion-43 emotion-44 emotion-42"
|
class="emotion-33 emotion-34 emotion-32"
|
||||||
>
|
>
|
||||||
<title>
|
<title>
|
||||||
Nicaragua
|
Nicaragua
|
||||||
@ -1331,7 +1250,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<svg
|
<svg
|
||||||
class="emotion-43 emotion-44 emotion-42"
|
class="emotion-33 emotion-34 emotion-32"
|
||||||
>
|
>
|
||||||
<title>
|
<title>
|
||||||
India
|
India
|
||||||
@ -1341,7 +1260,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<svg
|
<svg
|
||||||
class="emotion-43 emotion-44 emotion-42"
|
class="emotion-33 emotion-34 emotion-32"
|
||||||
>
|
>
|
||||||
<title>
|
<title>
|
||||||
Brazil
|
Brazil
|
||||||
@ -1351,7 +1270,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<svg
|
<svg
|
||||||
class="emotion-43 emotion-44 emotion-42"
|
class="emotion-33 emotion-34 emotion-32"
|
||||||
>
|
>
|
||||||
<title>
|
<title>
|
||||||
China
|
China
|
||||||
@ -1361,7 +1280,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<svg
|
<svg
|
||||||
class="emotion-43 emotion-44 emotion-42"
|
class="emotion-33 emotion-34 emotion-32"
|
||||||
>
|
>
|
||||||
<title>
|
<title>
|
||||||
Austria
|
Austria
|
||||||
@ -1374,16 +1293,16 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="emotion-72 emotion-73"
|
class="emotion-62 emotion-63"
|
||||||
>
|
>
|
||||||
Powered by
|
Powered by
|
||||||
<span
|
<span
|
||||||
class="emotion-43 emotion-70 emotion-71"
|
class="emotion-33 emotion-60 emotion-61"
|
||||||
title="Verdaccio"
|
title="Verdaccio"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
alt="Verdaccio"
|
alt="Verdaccio"
|
||||||
class="emotion-67 emotion-68"
|
class="emotion-57 emotion-58"
|
||||||
src="[object Object]"
|
src="[object Object]"
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
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 BugReportIcon from '@material-ui/icons/BugReport';
|
||||||
import DownloadIcon from '@material-ui/icons/CloudDownload';
|
import DownloadIcon from '@material-ui/icons/CloudDownload';
|
||||||
import HomeIcon from '@material-ui/icons/Home';
|
import HomeIcon from '@material-ui/icons/Home';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import Tooltip from '../../muiComponents/Tooltip';
|
import Tooltip from '../../muiComponents/Tooltip';
|
||||||
import Link from '../Link';
|
import Link from '../Link';
|
||||||
@ -26,10 +27,11 @@ export interface ActionBarActionProps {
|
|||||||
|
|
||||||
/* eslint-disable react/jsx-no-bind */
|
/* eslint-disable react/jsx-no-bind */
|
||||||
const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
|
const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'VISIT_HOMEPAGE':
|
case 'VISIT_HOMEPAGE':
|
||||||
return (
|
return (
|
||||||
<Tooltip title="Visit homepage">
|
<Tooltip title={t('action-bar-action.visit-home-page')}>
|
||||||
<Link external={true} to={link}>
|
<Link external={true} to={link}>
|
||||||
<Fab size="small">
|
<Fab size="small">
|
||||||
<HomeIcon />
|
<HomeIcon />
|
||||||
@ -39,7 +41,7 @@ const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
|
|||||||
);
|
);
|
||||||
case 'OPEN_AN_ISSUE':
|
case 'OPEN_AN_ISSUE':
|
||||||
return (
|
return (
|
||||||
<Tooltip title="Open an issue">
|
<Tooltip title={t('action-bar-action.open-an-issue')}>
|
||||||
<Link external={true} to={link}>
|
<Link external={true} to={link}>
|
||||||
<Fab size="small">
|
<Fab size="small">
|
||||||
<BugReportIcon />
|
<BugReportIcon />
|
||||||
@ -49,7 +51,7 @@ const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
|
|||||||
);
|
);
|
||||||
case 'DOWNLOAD_TARBALL':
|
case 'DOWNLOAD_TARBALL':
|
||||||
return (
|
return (
|
||||||
<Tooltip title="Download tarball">
|
<Tooltip title={t('action-bar-action.download-tarball')}>
|
||||||
<Fab data-testid="download-tarball-btn" onClick={downloadTarball(link)} size="small">
|
<Fab data-testid="download-tarball-btn" onClick={downloadTarball(link)} size="small">
|
||||||
<DownloadIcon />
|
<DownloadIcon />
|
||||||
</Fab>
|
</Fab>
|
||||||
|
|||||||
@ -1,14 +1,17 @@
|
|||||||
import React, { FC, useContext } from 'react';
|
import React, { FC, useContext } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import { DetailContext } from '../../pages/Version';
|
import { DetailContext } from '../../pages/Version';
|
||||||
import { isEmail } from '../../utils/url';
|
import { isEmail } from '../../utils/url';
|
||||||
import Avatar from '../../muiComponents/Avatar';
|
import Avatar from '../../muiComponents/Avatar';
|
||||||
import List from '../../muiComponents/List';
|
import List from '../../muiComponents/List';
|
||||||
|
import { getAuthorName } from '../../utils/package';
|
||||||
|
|
||||||
import { StyledText, AuthorListItem, AuthorListItemText } from './styles';
|
import { StyledText, AuthorListItem, AuthorListItemText } from './styles';
|
||||||
|
|
||||||
const Author: FC = () => {
|
const Author: FC = () => {
|
||||||
const { packageMeta } = useContext(DetailContext);
|
const { packageMeta } = useContext(DetailContext);
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
if (!packageMeta) {
|
if (!packageMeta) {
|
||||||
return null;
|
return null;
|
||||||
@ -25,7 +28,7 @@ const Author: FC = () => {
|
|||||||
const avatarComponent = <Avatar alt={author.name} src={author.avatar} />;
|
const avatarComponent = <Avatar alt={author.name} src={author.avatar} />;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<List subheader={<StyledText variant={'subtitle1'}>{'Author'}</StyledText>}>
|
<List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.author.title')}</StyledText>}>
|
||||||
<AuthorListItem button={true}>
|
<AuthorListItem button={true}>
|
||||||
{!email || !isEmail(email) ? (
|
{!email || !isEmail(email) ? (
|
||||||
avatarComponent
|
avatarComponent
|
||||||
@ -34,8 +37,7 @@ const Author: FC = () => {
|
|||||||
{avatarComponent}
|
{avatarComponent}
|
||||||
</a>
|
</a>
|
||||||
)}
|
)}
|
||||||
|
{name && <AuthorListItemText primary={getAuthorName(name)} />}
|
||||||
<AuthorListItemText primary={name} />
|
|
||||||
</AuthorListItem>
|
</AuthorListItem>
|
||||||
</List>
|
</List>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`<Author /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"mailto:verdaccio.user@verdaccio.org?subject=verdaccio@4.0.0\\" target=\\"_top\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div></a><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
exports[`<Author /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-5wp24z-StyledText e1xuehjw0 MuiTypography-subtitle1\\">sidebar.author.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"mailto:verdaccio.user@verdaccio.org?subject=verdaccio@4.0.0\\" target=\\"_top\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div></a><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
||||||
|
|
||||||
exports[`<Author /> component should render the component when there is no author email 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
exports[`<Author /> component should render the component when there is no author email 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-5wp24z-StyledText e1xuehjw0 MuiTypography-subtitle1\\">sidebar.author.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
||||||
|
|||||||
@ -7,7 +7,6 @@ import { Theme } from '../../design-tokens/theme';
|
|||||||
|
|
||||||
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
|
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
|
||||||
fontWeight: props.theme && props.theme.fontWeight.bold,
|
fontWeight: props.theme && props.theme.fontWeight.bold,
|
||||||
textTransform: 'capitalize',
|
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const AuthorListItem = styled(ListItem)({
|
export const AuthorListItem = styled(ListItem)({
|
||||||
|
|||||||
@ -3,6 +3,7 @@ import styled from '@emotion/styled';
|
|||||||
import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } from 'react-autosuggest';
|
import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } from 'react-autosuggest';
|
||||||
import match from 'autosuggest-highlight/match';
|
import match from 'autosuggest-highlight/match';
|
||||||
import parse from 'autosuggest-highlight/parse';
|
import parse from 'autosuggest-highlight/parse';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import MenuItem from '../../muiComponents/MenuItem';
|
import MenuItem from '../../muiComponents/MenuItem';
|
||||||
import { Theme } from '../../design-tokens/theme';
|
import { Theme } from '../../design-tokens/theme';
|
||||||
@ -83,12 +84,6 @@ const renderMessage = (message): JSX.Element => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const SUGGESTIONS_RESPONSE = {
|
|
||||||
LOADING: 'Loading...',
|
|
||||||
FAILURE: 'Something went wrong.',
|
|
||||||
NO_RESULT: 'No results found.',
|
|
||||||
};
|
|
||||||
|
|
||||||
const AutoComplete = memo(
|
const AutoComplete = memo(
|
||||||
({
|
({
|
||||||
suggestions,
|
suggestions,
|
||||||
@ -106,6 +101,8 @@ const AutoComplete = memo(
|
|||||||
suggestionsLoaded = false,
|
suggestionsLoaded = false,
|
||||||
suggestionsError = false,
|
suggestionsError = false,
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const autosuggestProps = {
|
const autosuggestProps = {
|
||||||
renderInputComponent,
|
renderInputComponent,
|
||||||
suggestions,
|
suggestions,
|
||||||
@ -130,9 +127,9 @@ const AutoComplete = memo(
|
|||||||
function renderSuggestionsContainer({ containerProps, children, query }): JSX.Element {
|
function renderSuggestionsContainer({ containerProps, children, query }): JSX.Element {
|
||||||
return (
|
return (
|
||||||
<SuggestionContainer {...containerProps} square={true}>
|
<SuggestionContainer {...containerProps} square={true}>
|
||||||
{suggestionsLoaded && children === null && query && renderMessage(SUGGESTIONS_RESPONSE.NO_RESULT)}
|
{suggestionsLoaded && children === null && query && renderMessage(t('auto-complete.no-results-found'))}
|
||||||
{suggestionsLoading && query && renderMessage(SUGGESTIONS_RESPONSE.LOADING)}
|
{suggestionsLoading && query && renderMessage(t('auto-complete.loading'))}
|
||||||
{suggestionsError && renderMessage(SUGGESTIONS_RESPONSE.FAILURE)}
|
{suggestionsError && renderMessage(t('error.unspecific'))}
|
||||||
{children}
|
{children}
|
||||||
</SuggestionContainer>
|
</SuggestionContainer>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
import FileCopy from '@material-ui/icons/FileCopy';
|
import FileCopy from '@material-ui/icons/FileCopy';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import { copyToClipBoardUtility } from '../../utils/cli-utils';
|
import { copyToClipBoardUtility } from '../../utils/cli-utils';
|
||||||
import { TEXT } from '../../utils/constants';
|
|
||||||
import Tooltip from '../../muiComponents/Tooltip';
|
import Tooltip from '../../muiComponents/Tooltip';
|
||||||
|
|
||||||
import { ClipBoardCopy, ClipBoardCopyText, CopyIcon } from './styles';
|
import { ClipBoardCopy, ClipBoardCopyText, CopyIcon } from './styles';
|
||||||
@ -20,19 +20,16 @@ const renderText = (text: string, children: React.ReactNode): JSX.Element => {
|
|||||||
return <ClipBoardCopyText>{text}</ClipBoardCopyText>;
|
return <ClipBoardCopyText>{text}</ClipBoardCopyText>;
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderToolTipFileCopy = (text: string): React.ReactElement<HTMLElement> => (
|
|
||||||
<Tooltip disableFocusListener={true} title={TEXT.CLIPBOARD_COPY}>
|
|
||||||
<CopyIcon onClick={copyToClipBoardUtility(text)}>
|
|
||||||
<FileCopy />
|
|
||||||
</CopyIcon>
|
|
||||||
</Tooltip>
|
|
||||||
);
|
|
||||||
|
|
||||||
const CopyToClipBoard: React.FC<Props> = ({ text, children }) => {
|
const CopyToClipBoard: React.FC<Props> = ({ text, children }) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
return (
|
return (
|
||||||
<ClipBoardCopy>
|
<ClipBoardCopy>
|
||||||
{renderText(text, children)}
|
{renderText(text, children)}
|
||||||
{renderToolTipFileCopy(text)}
|
<Tooltip disableFocusListener={true} title={t('copy-to-clipboard')}>
|
||||||
|
<CopyIcon onClick={copyToClipBoardUtility(text)}>
|
||||||
|
<FileCopy />
|
||||||
|
</CopyIcon>
|
||||||
|
</Tooltip>
|
||||||
</ClipBoardCopy>
|
</ClipBoardCopy>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,3 +1,3 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`<CopyToClipBoard /> component should load the component in default state 1`] = `"<div class=\\"css-1in239f-ClipBoardCopy eb8w2fo0\\"><span class=\\"css-7gar9h-ClipBoardCopyText eb8w2fo1\\">copy text</span><button class=\\"MuiButtonBase-root MuiIconButton-root css-1fs86cq-CopyIcon eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></div>"`;
|
exports[`<CopyToClipBoard /> component should load the component in default state 1`] = `"<div class=\\"css-1in239f-ClipBoardCopy eb8w2fo0\\"><span class=\\"css-7gar9h-ClipBoardCopyText eb8w2fo1\\">copy text</span><button class=\\"MuiButtonBase-root MuiIconButton-root css-1fs86cq-CopyIcon eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"copy-to-clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></div>"`;
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
import React, { useContext } from 'react';
|
import React, { useContext } from 'react';
|
||||||
import { useHistory } from 'react-router-dom';
|
import { useHistory } from 'react-router-dom';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import CardContent from '../../muiComponents/CardContent';
|
import CardContent from '../../muiComponents/CardContent';
|
||||||
import { PackageDependencies } from '../../../types/packageMeta';
|
import { PackageDependencies } from '../../../types/packageMeta';
|
||||||
@ -16,6 +17,7 @@ interface DependencyBlockProps {
|
|||||||
const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {
|
const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {
|
||||||
const { enableLoading } = useContext(DetailContext);
|
const { enableLoading } = useContext(DetailContext);
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const deps = Object.entries(dependencies);
|
const deps = Object.entries(dependencies);
|
||||||
|
|
||||||
@ -31,8 +33,14 @@ const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }
|
|||||||
<StyledText variant="subtitle1">{`${title} (${deps.length})`}</StyledText>
|
<StyledText variant="subtitle1">{`${title} (${deps.length})`}</StyledText>
|
||||||
<Tags>
|
<Tags>
|
||||||
{deps.map(([name, version]) => (
|
{deps.map(([name, version]) => (
|
||||||
// eslint-disable-next-line
|
<Tag
|
||||||
<Tag className={'dep-tag'} clickable={true} key={name} label={`${name}@${version}`} onClick={() => handleClick(name)} />
|
className={'dep-tag'}
|
||||||
|
clickable={true}
|
||||||
|
key={name}
|
||||||
|
label={t('dependencies.dependency-block', { package: name, version })}
|
||||||
|
// eslint-disable-next-line
|
||||||
|
onClick={() => handleClick(name)}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</Tags>
|
</Tags>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
@ -46,9 +54,10 @@ function hasKeys(object?: { [key: string]: any }): boolean {
|
|||||||
|
|
||||||
const Dependencies: React.FC<{}> = () => {
|
const Dependencies: React.FC<{}> = () => {
|
||||||
const { packageMeta } = useContext(DetailContext);
|
const { packageMeta } = useContext(DetailContext);
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
if (!packageMeta) {
|
if (!packageMeta) {
|
||||||
throw new Error('packageMeta is required at DetailContext');
|
throw new Error(t('error.package-meta-is-required-at-detail-context'));
|
||||||
}
|
}
|
||||||
|
|
||||||
const { latest } = packageMeta;
|
const { latest } = packageMeta;
|
||||||
@ -72,7 +81,7 @@ const Dependencies: React.FC<{}> = () => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return <NoItems className="no-dependencies" text={`${name} has no dependencies.`} />;
|
return <NoItems className="no-dependencies" text={t('dependencies.has-no-dependencies', { package: name })} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Dependencies;
|
export default Dependencies;
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React, { useCallback, useState, ChangeEvent, useContext } from 'react';
|
import React, { useState, useContext } from 'react';
|
||||||
|
|
||||||
import { DetailContext } from '../../pages/Version';
|
import { DetailContext } from '../../pages/Version';
|
||||||
import Box from '../../muiComponents/Box';
|
import Box from '../../muiComponents/Box';
|
||||||
@ -8,24 +8,19 @@ import DetailContainerContent from './DetailContainerContent';
|
|||||||
import { TabPosition } from './tabs';
|
import { TabPosition } from './tabs';
|
||||||
|
|
||||||
const DetailContainer: React.FC = () => {
|
const DetailContainer: React.FC = () => {
|
||||||
const [tabPosition, setTabPosition] = useState(TabPosition.README);
|
const tabs = Object.values(TabPosition);
|
||||||
|
const [tabPosition, setTabPosition] = useState(0);
|
||||||
const detailContext = useContext(DetailContext);
|
const detailContext = useContext(DetailContext);
|
||||||
const { readMe } = detailContext;
|
const { readMe } = detailContext;
|
||||||
|
|
||||||
const handleChangeTabPosition = useCallback(
|
const handleChange = (event, newValue) => {
|
||||||
(event: ChangeEvent<{}>) => {
|
setTabPosition(newValue);
|
||||||
event.preventDefault();
|
};
|
||||||
const eventTarget = event.target as HTMLSpanElement;
|
|
||||||
const chosentab = eventTarget.innerText as TabPosition;
|
|
||||||
setTabPosition(TabPosition[chosentab]);
|
|
||||||
},
|
|
||||||
[setTabPosition]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box component="div" display="flex" flexDirection="column" padding={2}>
|
<Box component="div" display="flex" flexDirection="column" padding={2}>
|
||||||
<DetailContainerTabs onChangeTabPosition={handleChangeTabPosition} tabPosition={tabPosition} />
|
<DetailContainerTabs onChange={handleChange} tabPosition={tabPosition} />
|
||||||
<DetailContainerContent readDescription={readMe} tabPosition={tabPosition} />
|
<DetailContainerContent readDescription={readMe} tabPosition={tabs[tabPosition]} />
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,44 +1,35 @@
|
|||||||
import React, { ChangeEvent, useState, useEffect } from 'react';
|
import React from 'react';
|
||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import { default as MuiTabs } from '../../muiComponents/Tabs';
|
import { default as MuiTabs } from '../../muiComponents/Tabs';
|
||||||
import Tab from '../../muiComponents/Tab';
|
import Tab from '../../muiComponents/Tab';
|
||||||
|
|
||||||
import { TabPosition } from './tabs';
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
tabPosition: TabPosition;
|
onChange: (event, newValue) => void;
|
||||||
onChangeTabPosition: (event: ChangeEvent<{}>) => void;
|
tabPosition: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Tabs = styled(MuiTabs)({
|
const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange }) => {
|
||||||
marginBottom: 16,
|
const { t } = useTranslation();
|
||||||
});
|
|
||||||
|
|
||||||
const getTabIndex = (tabPosition: TabPosition): number =>
|
|
||||||
Object.keys(TabPosition).findIndex(position => position === String(tabPosition).toUpperCase());
|
|
||||||
|
|
||||||
const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChangeTabPosition }) => {
|
|
||||||
const [tabPositionIndex, setTabPositionIndex] = useState(0);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const tabIndex = getTabIndex(tabPosition);
|
|
||||||
setTabPositionIndex(tabIndex);
|
|
||||||
}, [tabPosition]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tabs
|
<Tabs
|
||||||
indicatorColor={'primary'}
|
indicatorColor={'primary'}
|
||||||
onChange={onChangeTabPosition}
|
onChange={onChange}
|
||||||
textColor={'primary'}
|
textColor={'primary'}
|
||||||
value={tabPositionIndex}
|
value={tabPosition}
|
||||||
variant={'fullWidth'}>
|
variant={'fullWidth'}>
|
||||||
<Tab data-testid={'readme-tab'} id={'readme-tab'} label={TabPosition.README} />
|
<Tab data-testid={'readme-tab'} id={'readme-tab'} label={t('tab.readme')} />
|
||||||
<Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={TabPosition.DEPENDENCIES} />
|
<Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={t('tab.dependencies')} />
|
||||||
<Tab data-testid={'versions-tab'} id={'versions-tab'} label={TabPosition.VERSIONS} />
|
<Tab data-testid={'versions-tab'} id={'versions-tab'} label={t('tab.versions')} />
|
||||||
<Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={TabPosition.UPLINKS} />
|
<Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={t('tab.uplinks')} />
|
||||||
</Tabs>
|
</Tabs>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default DetailContainerTabs;
|
export default DetailContainerTabs;
|
||||||
|
|
||||||
|
const Tabs = styled(MuiTabs)({
|
||||||
|
marginBottom: 16,
|
||||||
|
});
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
export enum TabPosition {
|
export enum TabPosition {
|
||||||
README = 'Readme',
|
README = 'readme',
|
||||||
DEPENDENCIES = 'Dependencies',
|
DEPENDENCIES = 'dependencies',
|
||||||
VERSIONS = 'Versions',
|
VERSIONS = 'versions',
|
||||||
UPLINKS = 'Uplinks',
|
UPLINKS = 'uplinks',
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import React, { useContext } from 'react';
|
import React, { useContext } from 'react';
|
||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
import Favorite from '@material-ui/icons/Favorite';
|
import Favorite from '@material-ui/icons/Favorite';
|
||||||
|
import { Trans } from 'react-i18next';
|
||||||
|
|
||||||
import Button from '../../muiComponents/Button';
|
import Button from '../../muiComponents/Button';
|
||||||
import Link from '../Link';
|
import Link from '../Link';
|
||||||
@ -38,8 +39,7 @@ const DetailSidebarFundButton: React.FC = () => {
|
|||||||
return (
|
return (
|
||||||
<StyledLink external={true} to={fundingUrl}>
|
<StyledLink external={true} to={fundingUrl}>
|
||||||
<Button color="primary" fullWidth={true} startIcon={<StyledFavoriteIcon />} variant="outlined">
|
<Button color="primary" fullWidth={true} startIcon={<StyledFavoriteIcon />} variant="outlined">
|
||||||
<StyledFundStrong>{'Fund'}</StyledFundStrong>
|
<Trans components={[<StyledFundStrong key="fund" />]} i18nKey="button.fund-this-package" />
|
||||||
{'this package'}
|
|
||||||
</Button>
|
</Button>
|
||||||
</StyledLink>
|
</StyledLink>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import Box from '../../muiComponents/Box';
|
import Box from '../../muiComponents/Box';
|
||||||
import Heading from '../../muiComponents/Heading';
|
import Heading from '../../muiComponents/Heading';
|
||||||
@ -21,12 +22,17 @@ const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
|
|||||||
color: theme && theme.palette.text.secondary,
|
color: theme && theme.palette.text.secondary,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const DetailSidebarTitle: React.FC<Props> = ({ description, packageName, version, isLatest }) => (
|
const DetailSidebarTitle: React.FC<Props> = ({ description, packageName, version, isLatest }) => {
|
||||||
<Box className={'detail-info'} display="flex" flexDirection="column" marginBottom="8px">
|
const { t } = useTranslation();
|
||||||
<StyledHeading>{packageName}</StyledHeading>
|
return (
|
||||||
{description && <div>{description}</div>}
|
<Box className={'detail-info'} display="flex" flexDirection="column" marginBottom="8px">
|
||||||
<StyledBoxVersion>{`${isLatest ? 'Latest v' : 'v'}${version}`}</StyledBoxVersion>
|
<StyledHeading>{packageName}</StyledHeading>
|
||||||
</Box>
|
{description && <div>{description}</div>}
|
||||||
);
|
<StyledBoxVersion>
|
||||||
|
{isLatest ? t('sidebar.detail.latest-version', { version }) : t('sidebar.detail.version', { version })}
|
||||||
|
</StyledBoxVersion>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export default DetailSidebarTitle;
|
export default DetailSidebarTitle;
|
||||||
|
|||||||
@ -3,7 +3,8 @@ import React from 'react';
|
|||||||
import { mount } from '../../utils/test-enzyme';
|
import { mount } from '../../utils/test-enzyme';
|
||||||
import { DetailContextProvider } from '../../pages/Version';
|
import { DetailContextProvider } from '../../pages/Version';
|
||||||
|
|
||||||
import Developers, { DeveloperType, Fab } from './Developers';
|
import Developers, { Fab } from './Developers';
|
||||||
|
import { DeveloperType } from './types';
|
||||||
|
|
||||||
describe('test Developers', () => {
|
describe('test Developers', () => {
|
||||||
const packageMeta = {
|
const packageMeta = {
|
||||||
|
|||||||
@ -1,38 +1,29 @@
|
|||||||
import React, { useState, useCallback, useContext, useEffect, useMemo } from 'react';
|
import React, { useState, useCallback, useContext, useEffect, useMemo } from 'react';
|
||||||
import Add from '@material-ui/icons/Add';
|
import Add from '@material-ui/icons/Add';
|
||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import { DetailContext } from '../../pages/Version';
|
import { DetailContext } from '../../pages/Version';
|
||||||
import Tooltip from '../../muiComponents/Tooltip';
|
import Tooltip from '../../muiComponents/Tooltip';
|
||||||
import Avatar from '../../muiComponents/Avatar';
|
import Avatar from '../../muiComponents/Avatar';
|
||||||
import Box from '../../muiComponents/Box';
|
import Box from '../../muiComponents/Box';
|
||||||
import Text from '../../muiComponents/Text';
|
|
||||||
import FloatingActionButton from '../../muiComponents/FloatingActionButton';
|
import FloatingActionButton from '../../muiComponents/FloatingActionButton';
|
||||||
import { Theme } from '../../design-tokens/theme';
|
import { Theme } from '../../design-tokens/theme';
|
||||||
|
|
||||||
import getUniqueDeveloperValues from './get-unique-developer-values';
|
import getUniqueDeveloperValues from './get-unique-developer-values';
|
||||||
|
import DevelopersTitle from './DevelopersTitle';
|
||||||
|
import { DeveloperType } from './types';
|
||||||
|
|
||||||
export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({
|
export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({
|
||||||
backgroundColor: props.theme && props.theme.palette.primary.main,
|
backgroundColor: props.theme && props.theme.palette.primary.main,
|
||||||
color: props.theme && props.theme.palette.white,
|
color: props.theme && props.theme.palette.white,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export enum DeveloperType {
|
|
||||||
CONTRIBUTORS = 'contributors',
|
|
||||||
MAINTAINERS = 'maintainers',
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
type: DeveloperType;
|
type: DeveloperType;
|
||||||
visibleMax?: number;
|
visibleMax?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const StyledText = styled(Text)<{ theme?: Theme }>(({ theme }) => ({
|
|
||||||
fontWeight: theme && theme.fontWeight.bold,
|
|
||||||
marginBottom: '10px',
|
|
||||||
textTransform: 'capitalize',
|
|
||||||
}));
|
|
||||||
|
|
||||||
const StyledBox = styled(Box)({
|
const StyledBox = styled(Box)({
|
||||||
'> *': {
|
'> *': {
|
||||||
margin: 5,
|
margin: 5,
|
||||||
@ -43,9 +34,10 @@ export const VISIBLE_MAX = 6;
|
|||||||
|
|
||||||
const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {
|
const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {
|
||||||
const detailContext = useContext(DetailContext);
|
const detailContext = useContext(DetailContext);
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
if (!detailContext) {
|
if (!detailContext) {
|
||||||
throw Error("The app's detail Context was not correct used");
|
throw Error(t('app-context-not-correct-used'));
|
||||||
}
|
}
|
||||||
|
|
||||||
const developers = useMemo(() => getUniqueDeveloperValues(detailContext.packageMeta?.latest[type]), [
|
const developers = useMemo(() => getUniqueDeveloperValues(detailContext.packageMeta?.latest[type]), [
|
||||||
@ -69,7 +61,7 @@ const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<StyledText variant={'subtitle1'}>{type}</StyledText>
|
<DevelopersTitle type={type} />
|
||||||
<StyledBox display="flex" flexWrap="wrap" margin="10px 0 10px 0">
|
<StyledBox display="flex" flexWrap="wrap" margin="10px 0 10px 0">
|
||||||
{visibleDevelopers.map(visibleDeveloper => (
|
{visibleDevelopers.map(visibleDeveloper => (
|
||||||
<Tooltip key={visibleDeveloper.email} title={visibleDeveloper.name}>
|
<Tooltip key={visibleDeveloper.email} title={visibleDeveloper.name}>
|
||||||
|
|||||||
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 {
|
.emotion-0 {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
text-transform: capitalize;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-8 > * {
|
.emotion-8 > * {
|
||||||
@ -14,64 +13,68 @@ exports[`test Developers should render the component for contributors with items
|
|||||||
<Developers
|
<Developers
|
||||||
type="contributors"
|
type="contributors"
|
||||||
>
|
>
|
||||||
<StyledText
|
<DevelopersTitle
|
||||||
variant="subtitle1"
|
type="contributors"
|
||||||
>
|
>
|
||||||
<ForwardRef(Text)
|
<StyledText
|
||||||
className="emotion-0 emotion-1"
|
|
||||||
variant="subtitle1"
|
variant="subtitle1"
|
||||||
>
|
>
|
||||||
<WithStyles(ForwardRef(Typography))
|
<ForwardRef(Text)
|
||||||
className="emotion-0 emotion-1"
|
className="emotion-0 emotion-1"
|
||||||
variant="subtitle1"
|
variant="subtitle1"
|
||||||
>
|
>
|
||||||
<ForwardRef(Typography)
|
<WithStyles(ForwardRef(Typography))
|
||||||
className="emotion-0 emotion-1"
|
className="emotion-0 emotion-1"
|
||||||
classes={
|
|
||||||
Object {
|
|
||||||
"alignCenter": "MuiTypography-alignCenter",
|
|
||||||
"alignJustify": "MuiTypography-alignJustify",
|
|
||||||
"alignLeft": "MuiTypography-alignLeft",
|
|
||||||
"alignRight": "MuiTypography-alignRight",
|
|
||||||
"body1": "MuiTypography-body1",
|
|
||||||
"body2": "MuiTypography-body2",
|
|
||||||
"button": "MuiTypography-button",
|
|
||||||
"caption": "MuiTypography-caption",
|
|
||||||
"colorError": "MuiTypography-colorError",
|
|
||||||
"colorInherit": "MuiTypography-colorInherit",
|
|
||||||
"colorPrimary": "MuiTypography-colorPrimary",
|
|
||||||
"colorSecondary": "MuiTypography-colorSecondary",
|
|
||||||
"colorTextPrimary": "MuiTypography-colorTextPrimary",
|
|
||||||
"colorTextSecondary": "MuiTypography-colorTextSecondary",
|
|
||||||
"displayBlock": "MuiTypography-displayBlock",
|
|
||||||
"displayInline": "MuiTypography-displayInline",
|
|
||||||
"gutterBottom": "MuiTypography-gutterBottom",
|
|
||||||
"h1": "MuiTypography-h1",
|
|
||||||
"h2": "MuiTypography-h2",
|
|
||||||
"h3": "MuiTypography-h3",
|
|
||||||
"h4": "MuiTypography-h4",
|
|
||||||
"h5": "MuiTypography-h5",
|
|
||||||
"h6": "MuiTypography-h6",
|
|
||||||
"noWrap": "MuiTypography-noWrap",
|
|
||||||
"overline": "MuiTypography-overline",
|
|
||||||
"paragraph": "MuiTypography-paragraph",
|
|
||||||
"root": "MuiTypography-root",
|
|
||||||
"srOnly": "MuiTypography-srOnly",
|
|
||||||
"subtitle1": "MuiTypography-subtitle1",
|
|
||||||
"subtitle2": "MuiTypography-subtitle2",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
variant="subtitle1"
|
variant="subtitle1"
|
||||||
>
|
>
|
||||||
<h6
|
<ForwardRef(Typography)
|
||||||
className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
|
className="emotion-0 emotion-1"
|
||||||
|
classes={
|
||||||
|
Object {
|
||||||
|
"alignCenter": "MuiTypography-alignCenter",
|
||||||
|
"alignJustify": "MuiTypography-alignJustify",
|
||||||
|
"alignLeft": "MuiTypography-alignLeft",
|
||||||
|
"alignRight": "MuiTypography-alignRight",
|
||||||
|
"body1": "MuiTypography-body1",
|
||||||
|
"body2": "MuiTypography-body2",
|
||||||
|
"button": "MuiTypography-button",
|
||||||
|
"caption": "MuiTypography-caption",
|
||||||
|
"colorError": "MuiTypography-colorError",
|
||||||
|
"colorInherit": "MuiTypography-colorInherit",
|
||||||
|
"colorPrimary": "MuiTypography-colorPrimary",
|
||||||
|
"colorSecondary": "MuiTypography-colorSecondary",
|
||||||
|
"colorTextPrimary": "MuiTypography-colorTextPrimary",
|
||||||
|
"colorTextSecondary": "MuiTypography-colorTextSecondary",
|
||||||
|
"displayBlock": "MuiTypography-displayBlock",
|
||||||
|
"displayInline": "MuiTypography-displayInline",
|
||||||
|
"gutterBottom": "MuiTypography-gutterBottom",
|
||||||
|
"h1": "MuiTypography-h1",
|
||||||
|
"h2": "MuiTypography-h2",
|
||||||
|
"h3": "MuiTypography-h3",
|
||||||
|
"h4": "MuiTypography-h4",
|
||||||
|
"h5": "MuiTypography-h5",
|
||||||
|
"h6": "MuiTypography-h6",
|
||||||
|
"noWrap": "MuiTypography-noWrap",
|
||||||
|
"overline": "MuiTypography-overline",
|
||||||
|
"paragraph": "MuiTypography-paragraph",
|
||||||
|
"root": "MuiTypography-root",
|
||||||
|
"srOnly": "MuiTypography-srOnly",
|
||||||
|
"subtitle1": "MuiTypography-subtitle1",
|
||||||
|
"subtitle2": "MuiTypography-subtitle2",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
variant="subtitle1"
|
||||||
>
|
>
|
||||||
contributors
|
<h6
|
||||||
</h6>
|
className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
|
||||||
</ForwardRef(Typography)>
|
>
|
||||||
</WithStyles(ForwardRef(Typography))>
|
sidebar.contributors.title
|
||||||
</ForwardRef(Text)>
|
</h6>
|
||||||
</StyledText>
|
</ForwardRef(Typography)>
|
||||||
|
</WithStyles(ForwardRef(Typography))>
|
||||||
|
</ForwardRef(Text)>
|
||||||
|
</StyledText>
|
||||||
|
</DevelopersTitle>
|
||||||
<StyledBox
|
<StyledBox
|
||||||
display="flex"
|
display="flex"
|
||||||
flexWrap="wrap"
|
flexWrap="wrap"
|
||||||
@ -427,7 +430,6 @@ exports[`test Developers should render the component for maintainers with items
|
|||||||
.emotion-0 {
|
.emotion-0 {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
text-transform: capitalize;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-8 > * {
|
.emotion-8 > * {
|
||||||
@ -437,64 +439,68 @@ exports[`test Developers should render the component for maintainers with items
|
|||||||
<Developers
|
<Developers
|
||||||
type="maintainers"
|
type="maintainers"
|
||||||
>
|
>
|
||||||
<StyledText
|
<DevelopersTitle
|
||||||
variant="subtitle1"
|
type="maintainers"
|
||||||
>
|
>
|
||||||
<ForwardRef(Text)
|
<StyledText
|
||||||
className="emotion-0 emotion-1"
|
|
||||||
variant="subtitle1"
|
variant="subtitle1"
|
||||||
>
|
>
|
||||||
<WithStyles(ForwardRef(Typography))
|
<ForwardRef(Text)
|
||||||
className="emotion-0 emotion-1"
|
className="emotion-0 emotion-1"
|
||||||
variant="subtitle1"
|
variant="subtitle1"
|
||||||
>
|
>
|
||||||
<ForwardRef(Typography)
|
<WithStyles(ForwardRef(Typography))
|
||||||
className="emotion-0 emotion-1"
|
className="emotion-0 emotion-1"
|
||||||
classes={
|
|
||||||
Object {
|
|
||||||
"alignCenter": "MuiTypography-alignCenter",
|
|
||||||
"alignJustify": "MuiTypography-alignJustify",
|
|
||||||
"alignLeft": "MuiTypography-alignLeft",
|
|
||||||
"alignRight": "MuiTypography-alignRight",
|
|
||||||
"body1": "MuiTypography-body1",
|
|
||||||
"body2": "MuiTypography-body2",
|
|
||||||
"button": "MuiTypography-button",
|
|
||||||
"caption": "MuiTypography-caption",
|
|
||||||
"colorError": "MuiTypography-colorError",
|
|
||||||
"colorInherit": "MuiTypography-colorInherit",
|
|
||||||
"colorPrimary": "MuiTypography-colorPrimary",
|
|
||||||
"colorSecondary": "MuiTypography-colorSecondary",
|
|
||||||
"colorTextPrimary": "MuiTypography-colorTextPrimary",
|
|
||||||
"colorTextSecondary": "MuiTypography-colorTextSecondary",
|
|
||||||
"displayBlock": "MuiTypography-displayBlock",
|
|
||||||
"displayInline": "MuiTypography-displayInline",
|
|
||||||
"gutterBottom": "MuiTypography-gutterBottom",
|
|
||||||
"h1": "MuiTypography-h1",
|
|
||||||
"h2": "MuiTypography-h2",
|
|
||||||
"h3": "MuiTypography-h3",
|
|
||||||
"h4": "MuiTypography-h4",
|
|
||||||
"h5": "MuiTypography-h5",
|
|
||||||
"h6": "MuiTypography-h6",
|
|
||||||
"noWrap": "MuiTypography-noWrap",
|
|
||||||
"overline": "MuiTypography-overline",
|
|
||||||
"paragraph": "MuiTypography-paragraph",
|
|
||||||
"root": "MuiTypography-root",
|
|
||||||
"srOnly": "MuiTypography-srOnly",
|
|
||||||
"subtitle1": "MuiTypography-subtitle1",
|
|
||||||
"subtitle2": "MuiTypography-subtitle2",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
variant="subtitle1"
|
variant="subtitle1"
|
||||||
>
|
>
|
||||||
<h6
|
<ForwardRef(Typography)
|
||||||
className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
|
className="emotion-0 emotion-1"
|
||||||
|
classes={
|
||||||
|
Object {
|
||||||
|
"alignCenter": "MuiTypography-alignCenter",
|
||||||
|
"alignJustify": "MuiTypography-alignJustify",
|
||||||
|
"alignLeft": "MuiTypography-alignLeft",
|
||||||
|
"alignRight": "MuiTypography-alignRight",
|
||||||
|
"body1": "MuiTypography-body1",
|
||||||
|
"body2": "MuiTypography-body2",
|
||||||
|
"button": "MuiTypography-button",
|
||||||
|
"caption": "MuiTypography-caption",
|
||||||
|
"colorError": "MuiTypography-colorError",
|
||||||
|
"colorInherit": "MuiTypography-colorInherit",
|
||||||
|
"colorPrimary": "MuiTypography-colorPrimary",
|
||||||
|
"colorSecondary": "MuiTypography-colorSecondary",
|
||||||
|
"colorTextPrimary": "MuiTypography-colorTextPrimary",
|
||||||
|
"colorTextSecondary": "MuiTypography-colorTextSecondary",
|
||||||
|
"displayBlock": "MuiTypography-displayBlock",
|
||||||
|
"displayInline": "MuiTypography-displayInline",
|
||||||
|
"gutterBottom": "MuiTypography-gutterBottom",
|
||||||
|
"h1": "MuiTypography-h1",
|
||||||
|
"h2": "MuiTypography-h2",
|
||||||
|
"h3": "MuiTypography-h3",
|
||||||
|
"h4": "MuiTypography-h4",
|
||||||
|
"h5": "MuiTypography-h5",
|
||||||
|
"h6": "MuiTypography-h6",
|
||||||
|
"noWrap": "MuiTypography-noWrap",
|
||||||
|
"overline": "MuiTypography-overline",
|
||||||
|
"paragraph": "MuiTypography-paragraph",
|
||||||
|
"root": "MuiTypography-root",
|
||||||
|
"srOnly": "MuiTypography-srOnly",
|
||||||
|
"subtitle1": "MuiTypography-subtitle1",
|
||||||
|
"subtitle2": "MuiTypography-subtitle2",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
variant="subtitle1"
|
||||||
>
|
>
|
||||||
maintainers
|
<h6
|
||||||
</h6>
|
className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
|
||||||
</ForwardRef(Typography)>
|
>
|
||||||
</WithStyles(ForwardRef(Typography))>
|
sidebar.maintainers.title
|
||||||
</ForwardRef(Text)>
|
</h6>
|
||||||
</StyledText>
|
</ForwardRef(Typography)>
|
||||||
|
</WithStyles(ForwardRef(Typography))>
|
||||||
|
</ForwardRef(Text)>
|
||||||
|
</StyledText>
|
||||||
|
</DevelopersTitle>
|
||||||
<StyledBox
|
<StyledBox
|
||||||
display="flex"
|
display="flex"
|
||||||
flexWrap="wrap"
|
flexWrap="wrap"
|
||||||
|
|||||||
@ -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 React, { FC, useContext } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import { DetailContext } from '../../pages/Version';
|
import { DetailContext } from '../../pages/Version';
|
||||||
import fileSizeSI from '../../utils/file-size';
|
import fileSizeSI from '../../utils/file-size';
|
||||||
@ -22,6 +23,7 @@ const DistChip: FC<{ name: string }> = ({ name, children }) =>
|
|||||||
|
|
||||||
const Dist: FC = () => {
|
const Dist: FC = () => {
|
||||||
const { packageMeta } = useContext(DetailContext);
|
const { packageMeta } = useContext(DetailContext);
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
if (!packageMeta) {
|
if (!packageMeta) {
|
||||||
return null;
|
return null;
|
||||||
@ -30,11 +32,11 @@ const Dist: FC = () => {
|
|||||||
const { dist, license } = packageMeta && packageMeta.latest;
|
const { dist, license } = packageMeta && packageMeta.latest;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<List subheader={<StyledText variant="subtitle1">{'Latest Distribution'}</StyledText>}>
|
<List subheader={<StyledText variant="subtitle1">{t('sidebar.distribution.title')}</StyledText>}>
|
||||||
<DistListItem button={true}>
|
<DistListItem button={true}>
|
||||||
<DistChip name="file count">{dist.fileCount}</DistChip>
|
<DistChip name={t('sidebar.distribution.file-count')}>{dist.fileCount}</DistChip>
|
||||||
<DistChip name="size">{dist.unpackedSize && fileSizeSI(dist.unpackedSize)}</DistChip>
|
<DistChip name={t('sidebar.distribution.size')}>{dist.unpackedSize && fileSizeSI(dist.unpackedSize)}</DistChip>
|
||||||
<DistChip name="license">{formatLicense(license)}</DistChip>
|
<DistChip name={t('sidebar.distribution.license')}>{formatLicense(license)}</DistChip>
|
||||||
</DistListItem>
|
</DistListItem>
|
||||||
</List>
|
</List>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`<Dist /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
exports[`<Dist /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">sidebar.distribution.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.file-count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.size</b>: 10.00 Bytes</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
||||||
|
|
||||||
exports[`<Dist /> component should render the component with license as object 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
exports[`<Dist /> component should render the component with license as object 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">sidebar.distribution.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.file-count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
||||||
|
|
||||||
exports[`<Dist /> component should render the component with license as string 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
exports[`<Dist /> component should render the component with license as string 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">sidebar.distribution.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.file-count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
import React, { useContext } from 'react';
|
import React, { useContext } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import { DetailContext } from '../../pages/Version';
|
import { DetailContext } from '../../pages/Version';
|
||||||
import Avatar from '../../muiComponents/Avatar';
|
import Avatar from '../../muiComponents/Avatar';
|
||||||
@ -12,6 +13,7 @@ import node from './img/node.png';
|
|||||||
|
|
||||||
const Engine: React.FC = () => {
|
const Engine: React.FC = () => {
|
||||||
const { packageMeta } = useContext(DetailContext);
|
const { packageMeta } = useContext(DetailContext);
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const engines = packageMeta?.latest?.engines;
|
const engines = packageMeta?.latest?.engines;
|
||||||
|
|
||||||
@ -23,7 +25,7 @@ const Engine: React.FC = () => {
|
|||||||
<Grid container={true}>
|
<Grid container={true}>
|
||||||
{engines.node && (
|
{engines.node && (
|
||||||
<Grid item={true} xs={6}>
|
<Grid item={true} xs={6}>
|
||||||
<List subheader={<StyledText variant={'subtitle1'}>{'node JS'}</StyledText>}>
|
<List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.engines.node-js')}</StyledText>}>
|
||||||
<EngineListItem button={true}>
|
<EngineListItem button={true}>
|
||||||
<Avatar src={node} />
|
<Avatar src={node} />
|
||||||
<ListItemText primary={engines.node} />
|
<ListItemText primary={engines.node} />
|
||||||
@ -34,7 +36,7 @@ const Engine: React.FC = () => {
|
|||||||
|
|
||||||
{engines.npm && (
|
{engines.npm && (
|
||||||
<Grid item={true} xs={6}>
|
<Grid item={true} xs={6}>
|
||||||
<List subheader={<StyledText variant={'subtitle1'}>{'NPM version'}</StyledText>}>
|
<List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.engines.npm-version')}</StyledText>}>
|
||||||
<EngineListItem button={true}>
|
<EngineListItem button={true}>
|
||||||
<Avatar src={npm} />
|
<Avatar src={npm} />
|
||||||
<ListItemText primary={engines.npm} />
|
<ListItemText primary={engines.npm} />
|
||||||
|
|||||||
@ -1,3 +1,3 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`<Engines /> component should render the component in default state 1`] = `"<div class=\\"MuiGrid-root MuiGrid-container\\"><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText et66bt70 MuiTypography-subtitle1\\">node JS</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-18b06t0-EngineListItem et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault\\"><svg class=\\"MuiSvgIcon-root MuiAvatar-fallback\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\\"></path></svg></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">>= 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,53 +1,38 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { useTranslation, Trans } from 'react-i18next';
|
||||||
|
|
||||||
import { goToVerdaccioWebsite } from '../../utils/windows';
|
import { goToVerdaccioWebsite } from '../../utils/windows';
|
||||||
|
|
||||||
import { Wrapper, Left, Right, Earth, Flags, Love, Flag, Logo, Inner, ToolTip } from './styles';
|
import { Wrapper, Left, Right, Earth, Flags, Love, Flag, Logo, Inner, ToolTip } from './styles';
|
||||||
|
|
||||||
const renderTooltip = (): JSX.Element => (
|
/* eslint-disable react/jsx-key */
|
||||||
<ToolTip>
|
const Footer: React.FC = () => {
|
||||||
<Earth name="earth" size="md" />
|
const { t } = useTranslation();
|
||||||
<Flags>
|
|
||||||
<Flag name="spain" size="md" />
|
|
||||||
<Flag name="nicaragua" size="md" />
|
|
||||||
<Flag name="india" size="md" />
|
|
||||||
<Flag name="brazil" size="md" />
|
|
||||||
<Flag name="china" size="md" />
|
|
||||||
<Flag name="austria" size="md" />
|
|
||||||
</Flags>
|
|
||||||
</ToolTip>
|
|
||||||
);
|
|
||||||
const POWERED_LABEL = 'Powered by';
|
|
||||||
const MADEWITH_LABEL = ' Made with';
|
|
||||||
const ON_LABEL = 'on';
|
|
||||||
const HEARTH_EMOJI = '♥';
|
|
||||||
|
|
||||||
const renderRight = (version = window.VERDACCIO_VERSION): JSX.Element => {
|
|
||||||
return (
|
return (
|
||||||
<Right>
|
<Wrapper>
|
||||||
{POWERED_LABEL}
|
<Inner>
|
||||||
<Logo img={true} name="verdaccio" onClick={goToVerdaccioWebsite} pointer={true} size="md" />
|
<Left>
|
||||||
{`/ ${version}`}
|
<Trans components={[<Love />]} i18nKey="footer.made-with-love-on" />
|
||||||
</Right>
|
<ToolTip>
|
||||||
|
<Earth name="earth" size="md" />
|
||||||
|
<Flags>
|
||||||
|
<Flag name="spain" size="md" />
|
||||||
|
<Flag name="nicaragua" size="md" />
|
||||||
|
<Flag name="india" size="md" />
|
||||||
|
<Flag name="brazil" size="md" />
|
||||||
|
<Flag name="china" size="md" />
|
||||||
|
<Flag name="austria" size="md" />
|
||||||
|
</Flags>
|
||||||
|
</ToolTip>
|
||||||
|
</Left>
|
||||||
|
<Right>
|
||||||
|
{t('footer.powered-by')}
|
||||||
|
<Logo img={true} name="verdaccio" onClick={goToVerdaccioWebsite} pointer={true} size="md" />
|
||||||
|
{`/ ${window.VERDACCIO_VERSION}`}
|
||||||
|
</Right>
|
||||||
|
</Inner>
|
||||||
|
</Wrapper>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderLeft = (): JSX.Element => (
|
|
||||||
<Left>
|
|
||||||
{MADEWITH_LABEL}
|
|
||||||
<Love>{HEARTH_EMOJI}</Love>
|
|
||||||
{ON_LABEL}
|
|
||||||
{renderTooltip()}
|
|
||||||
</Left>
|
|
||||||
);
|
|
||||||
|
|
||||||
const Footer: React.FC = () => (
|
|
||||||
<Wrapper>
|
|
||||||
<Inner>
|
|
||||||
{renderLeft()}
|
|
||||||
{renderRight()}
|
|
||||||
</Inner>
|
|
||||||
</Wrapper>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default Footer;
|
export default Footer;
|
||||||
|
|||||||
@ -167,13 +167,13 @@ exports[`<Footer /> component should load the initial state of Footer component
|
|||||||
<div
|
<div
|
||||||
class="emotion-27 emotion-28"
|
class="emotion-27 emotion-28"
|
||||||
>
|
>
|
||||||
Made with
|
Made with
|
||||||
<span
|
<span
|
||||||
class="emotion-0 emotion-1"
|
class="emotion-0 emotion-1"
|
||||||
>
|
>
|
||||||
♥
|
♥
|
||||||
</span>
|
</span>
|
||||||
on
|
on
|
||||||
<span
|
<span
|
||||||
class="emotion-25 emotion-26"
|
class="emotion-25 emotion-26"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -3,6 +3,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
|
|||||||
|
|
||||||
import { render, fireEvent, waitForElement, waitForElementToBeRemoved } from '../../utils/test-react-testing-library';
|
import { render, fireEvent, waitForElement, waitForElementToBeRemoved } from '../../utils/test-react-testing-library';
|
||||||
import { AppContextProvider } from '../../App';
|
import { AppContextProvider } from '../../App';
|
||||||
|
import translationEN from '../../../i18n/translations/en-US.json';
|
||||||
|
|
||||||
import Header from './Header';
|
import Header from './Header';
|
||||||
|
|
||||||
@ -44,7 +45,7 @@ describe('<Header /> component with logged in state', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test('should open login dialog', async () => {
|
test('should open login dialog', async () => {
|
||||||
const { getByText } = render(
|
const { getByTestId } = render(
|
||||||
<Router>
|
<Router>
|
||||||
<AppContextProvider>
|
<AppContextProvider>
|
||||||
<Header />
|
<Header />
|
||||||
@ -52,9 +53,9 @@ describe('<Header /> component with logged in state', () => {
|
|||||||
</Router>
|
</Router>
|
||||||
);
|
);
|
||||||
|
|
||||||
const loginBtn = getByText('Login');
|
const loginBtn = getByTestId('header--button-login');
|
||||||
fireEvent.click(loginBtn);
|
fireEvent.click(loginBtn);
|
||||||
const loginDialog = await waitForElement(() => getByText('Sign in'));
|
const loginDialog = await waitForElement(() => getByTestId('login--dialog'));
|
||||||
expect(loginDialog).toBeTruthy();
|
expect(loginDialog).toBeTruthy();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -119,7 +120,7 @@ describe('<Header /> component with logged in state', () => {
|
|||||||
fireEvent.click(infoBtn);
|
fireEvent.click(infoBtn);
|
||||||
|
|
||||||
// wait for Close's button of registrationInfo modal appearance and return the element
|
// wait for Close's button of registrationInfo modal appearance and return the element
|
||||||
const closeBtn = await waitForElement(() => getByText('CLOSE'));
|
const closeBtn = await waitForElement(() => getByText(translationEN.button.close));
|
||||||
fireEvent.click(closeBtn);
|
fireEvent.click(closeBtn);
|
||||||
|
|
||||||
const hasRegistrationInfoModalBeenRemoved = await waitForElementToBeRemoved(() =>
|
const hasRegistrationInfoModalBeenRemoved = await waitForElementToBeRemoved(() =>
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
import React, { useState, useContext } from 'react';
|
import React, { useState, useContext } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import storage from '../../utils/storage';
|
import storage from '../../utils/storage';
|
||||||
import { getRegistryURL } from '../../utils/url';
|
import { getRegistryURL } from '../../utils/url';
|
||||||
@ -18,13 +19,14 @@ interface Props {
|
|||||||
|
|
||||||
/* eslint-disable react/jsx-no-bind*/
|
/* eslint-disable react/jsx-no-bind*/
|
||||||
const Header: React.FC<Props> = ({ withoutSearch }) => {
|
const Header: React.FC<Props> = ({ withoutSearch }) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
const appContext = useContext(AppContext);
|
const appContext = useContext(AppContext);
|
||||||
const [isInfoDialogOpen, setOpenInfoDialog] = useState();
|
const [isInfoDialogOpen, setOpenInfoDialog] = useState();
|
||||||
const [showMobileNavBar, setShowMobileNavBar] = useState();
|
const [showMobileNavBar, setShowMobileNavBar] = useState();
|
||||||
const [showLoginModal, setShowLoginModal] = useState(false);
|
const [showLoginModal, setShowLoginModal] = useState(false);
|
||||||
|
|
||||||
if (!appContext) {
|
if (!appContext) {
|
||||||
throw Error('The app Context was not correct used');
|
throw Error(t('app-context-not-correct-used'));
|
||||||
}
|
}
|
||||||
|
|
||||||
const { user, scope, setUser } = appContext;
|
const { user, scope, setUser } = appContext;
|
||||||
@ -67,7 +69,7 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
|
|||||||
<Search />
|
<Search />
|
||||||
</InnerMobileNavBar>
|
</InnerMobileNavBar>
|
||||||
<Button color="inherit" onClick={() => setShowMobileNavBar(false)}>
|
<Button color="inherit" onClick={() => setShowMobileNavBar(false)}>
|
||||||
{'Cancel'}
|
{t('button.cancel')}
|
||||||
</Button>
|
</Button>
|
||||||
</MobileNavBar>
|
</MobileNavBar>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import Label from '../Label';
|
import Label from '../Label';
|
||||||
|
|
||||||
@ -8,11 +9,14 @@ interface Props {
|
|||||||
username: string;
|
username: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const HeaderGreetings: React.FC<Props> = ({ username }) => (
|
const HeaderGreetings: React.FC<Props> = ({ username }) => {
|
||||||
<>
|
const { t } = useTranslation();
|
||||||
<Greetings>{'Hi,'}</Greetings>
|
return (
|
||||||
<Label capitalize={true} data-testid="greetings-label" text={username} weight="bold" />
|
<>
|
||||||
</>
|
<Greetings>{t('header.greetings')}</Greetings>
|
||||||
);
|
<Label capitalize={true} data-testid="greetings-label" text={username} weight="bold" />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export default HeaderGreetings;
|
export default HeaderGreetings;
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
import React, { MouseEvent } from 'react';
|
import React, { MouseEvent } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
import AccountCircle from '@material-ui/icons/AccountCircle';
|
import AccountCircle from '@material-ui/icons/AccountCircle';
|
||||||
|
|
||||||
import IconButton from '../../muiComponents/IconButton';
|
import IconButton from '../../muiComponents/IconButton';
|
||||||
@ -23,35 +24,38 @@ const HeaderMenu: React.FC<Props> = ({
|
|||||||
anchorEl,
|
anchorEl,
|
||||||
onLoggedInMenu,
|
onLoggedInMenu,
|
||||||
onLoggedInMenuClose,
|
onLoggedInMenuClose,
|
||||||
}) => (
|
}) => {
|
||||||
<>
|
const { t } = useTranslation();
|
||||||
<IconButton
|
return (
|
||||||
color="inherit"
|
<>
|
||||||
data-testid="header--menu-accountcircle"
|
<IconButton
|
||||||
id="header--button-account"
|
color="inherit"
|
||||||
onClick={onLoggedInMenu}>
|
data-testid="header--menu-accountcircle"
|
||||||
<AccountCircle />
|
id="header--button-account"
|
||||||
</IconButton>
|
onClick={onLoggedInMenu}>
|
||||||
<Menu
|
<AccountCircle />
|
||||||
anchorEl={anchorEl}
|
</IconButton>
|
||||||
anchorOrigin={{
|
<Menu
|
||||||
vertical: 'top',
|
anchorEl={anchorEl}
|
||||||
horizontal: 'right',
|
anchorOrigin={{
|
||||||
}}
|
vertical: 'top',
|
||||||
onClose={onLoggedInMenuClose}
|
horizontal: 'right',
|
||||||
open={isMenuOpen}
|
}}
|
||||||
transformOrigin={{
|
onClose={onLoggedInMenuClose}
|
||||||
vertical: 'top',
|
open={isMenuOpen}
|
||||||
horizontal: 'right',
|
transformOrigin={{
|
||||||
}}>
|
vertical: 'top',
|
||||||
<MenuItem disabled={true}>
|
horizontal: 'right',
|
||||||
<HeaderGreetings username={username} />
|
}}>
|
||||||
</MenuItem>
|
<MenuItem disabled={true}>
|
||||||
<MenuItem button={true} data-testid="header--button-logout" id="header--button-logout" onClick={onLogout}>
|
<HeaderGreetings username={username} />
|
||||||
{'Logout'}
|
</MenuItem>
|
||||||
</MenuItem>
|
<MenuItem button={true} data-testid="header--button-logout" id="header--button-logout" onClick={onLogout}>
|
||||||
</Menu>
|
{t('button.logout')}
|
||||||
</>
|
</MenuItem>
|
||||||
);
|
</Menu>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export default HeaderMenu;
|
export default HeaderMenu;
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
import React, { useState, useEffect, MouseEvent } from 'react';
|
import React, { useState, useEffect, MouseEvent } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import Button from '../../muiComponents/Button';
|
import Button from '../../muiComponents/Button';
|
||||||
|
|
||||||
@ -25,6 +26,7 @@ const HeaderRight: React.FC<Props> = ({
|
|||||||
}) => {
|
}) => {
|
||||||
const [anchorEl, setAnchorEl] = useState();
|
const [anchorEl, setAnchorEl] = useState();
|
||||||
const [isMenuOpen, setIsMenuOpen] = useState();
|
const [isMenuOpen, setIsMenuOpen] = useState();
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setIsMenuOpen(Boolean(anchorEl));
|
setIsMenuOpen(Boolean(anchorEl));
|
||||||
@ -55,10 +57,10 @@ const HeaderRight: React.FC<Props> = ({
|
|||||||
return (
|
return (
|
||||||
<RightSide data-testid="header-right">
|
<RightSide data-testid="header-right">
|
||||||
{!withoutSearch && (
|
{!withoutSearch && (
|
||||||
<HeaderToolTip onClick={onToggleMobileNav} title={'Search packages'} tooltipIconType={'search'} />
|
<HeaderToolTip onClick={onToggleMobileNav} title={t('search.packages')} tooltipIconType={'search'} />
|
||||||
)}
|
)}
|
||||||
<HeaderToolTip title={'Documentation'} tooltipIconType={'help'} />
|
<HeaderToolTip title={t('header.documentation')} tooltipIconType={'help'} />
|
||||||
<HeaderToolTip onClick={onOpenRegistryInfoDialog} title={'Registry Information'} tooltipIconType={'info'} />
|
<HeaderToolTip onClick={onOpenRegistryInfoDialog} title={t('header.registry-info')} tooltipIconType={'info'} />
|
||||||
{username ? (
|
{username ? (
|
||||||
<HeaderMenu
|
<HeaderMenu
|
||||||
anchorEl={anchorEl}
|
anchorEl={anchorEl}
|
||||||
@ -70,7 +72,7 @@ const HeaderRight: React.FC<Props> = ({
|
|||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Button color="inherit" data-testid="header--button-login" onClick={handleToggleLogin}>
|
<Button color="inherit" data-testid="header--button-login" onClick={handleToggleLogin}>
|
||||||
{'Login'}
|
{t('button.login')}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</RightSide>
|
</RightSide>
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
import React, { Fragment } from 'react';
|
import React, { Fragment } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import { getRegistryURL } from '../../utils/url';
|
import { getRegistryURL } from '../../utils/url';
|
||||||
import CopyToClipBoard from '../CopyToClipBoard';
|
import CopyToClipBoard from '../CopyToClipBoard';
|
||||||
@ -24,23 +25,24 @@ function renderHeadingClipboardSegments(title: string, text: string): React.Reac
|
|||||||
|
|
||||||
const Help: React.FC = () => {
|
const Help: React.FC = () => {
|
||||||
const registryUrl = getRegistryURL();
|
const registryUrl = getRegistryURL();
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card id="help-card">
|
<Card id="help-card">
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<Typography component="h2" gutterBottom={true} id={COMPONENT_HELP_ID} variant="h5">
|
<Typography component="h2" gutterBottom={true} id={COMPONENT_HELP_ID} variant="h5">
|
||||||
{HELP_TITLE}
|
{t('help.title')}
|
||||||
</Typography>
|
</Typography>
|
||||||
<HelpTitle color="textSecondary" gutterBottom={true}>
|
<HelpTitle color="textSecondary" gutterBottom={true}>
|
||||||
{'To publish your first package just:'}
|
{t('help.sub-title')}
|
||||||
</HelpTitle>
|
</HelpTitle>
|
||||||
{renderHeadingClipboardSegments('1. Login', `npm adduser --registry ${registryUrl}`)}
|
{renderHeadingClipboardSegments(t('help.first-step'), t('help.first-step-command-line', { registryUrl }))}
|
||||||
{renderHeadingClipboardSegments('2. Publish', `npm publish --registry ${registryUrl}`)}
|
{renderHeadingClipboardSegments(t('help.second-step'), t('help.second-step-command-line', { registryUrl }))}
|
||||||
<Text variant="body2">{'3. Refresh this page.'}</Text>
|
<Text variant="body2">{t('help.third-step')}</Text>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
<CardActions>
|
<CardActions>
|
||||||
<Button color="primary" href="https://verdaccio.org/docs/en/installation" size="small">
|
<Button color="primary" href="https://verdaccio.org/docs/en/installation" size="small">
|
||||||
{'Learn More'}
|
{t('button.learn-more')}
|
||||||
</Button>
|
</Button>
|
||||||
</CardActions>
|
</CardActions>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
@ -68,7 +68,7 @@ exports[`<Help /> component should load the component in default state 1`] = `
|
|||||||
<button
|
<button
|
||||||
class="MuiButtonBase-root MuiIconButton-root emotion-4 emotion-5"
|
class="MuiButtonBase-root MuiIconButton-root emotion-4 emotion-5"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
title="Copy to Clipboard"
|
title="Copy to clipboard"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
@ -107,7 +107,7 @@ exports[`<Help /> component should load the component in default state 1`] = `
|
|||||||
<button
|
<button
|
||||||
class="MuiButtonBase-root MuiIconButton-root emotion-4 emotion-5"
|
class="MuiButtonBase-root MuiIconButton-root emotion-4 emotion-5"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
title="Copy to Clipboard"
|
title="Copy to clipboard"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
import React, { useContext } from 'react';
|
import React, { useContext } from 'react';
|
||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import { DetailContext } from '../../pages/Version';
|
import { DetailContext } from '../../pages/Version';
|
||||||
import Text from '../../muiComponents/Text';
|
import Text from '../../muiComponents/Text';
|
||||||
@ -14,6 +15,7 @@ const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
|
|||||||
}));
|
}));
|
||||||
|
|
||||||
const Install: React.FC = () => {
|
const Install: React.FC = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
const detailContext = useContext(DetailContext);
|
const detailContext = useContext(DetailContext);
|
||||||
|
|
||||||
const { packageMeta, packageName } = detailContext;
|
const { packageMeta, packageName } = detailContext;
|
||||||
@ -23,7 +25,9 @@ const Install: React.FC = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<List data-testid={'installList'} subheader={<StyledText variant={'subtitle1'}>{'Installation'}</StyledText>}>
|
<List
|
||||||
|
data-testid={'installList'}
|
||||||
|
subheader={<StyledText variant={'subtitle1'}>{t('sidebar.installation.title')}</StyledText>}>
|
||||||
<InstallListItem dependencyManager={DependencyManager.NPM} packageName={packageName} />
|
<InstallListItem dependencyManager={DependencyManager.NPM} packageName={packageName} />
|
||||||
<InstallListItem dependencyManager={DependencyManager.YARN} packageName={packageName} />
|
<InstallListItem dependencyManager={DependencyManager.YARN} packageName={packageName} />
|
||||||
<InstallListItem dependencyManager={DependencyManager.PNPM} packageName={packageName} />
|
<InstallListItem dependencyManager={DependencyManager.PNPM} packageName={packageName} />
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import CopyToClipBoard from '../CopyToClipBoard';
|
import CopyToClipBoard from '../CopyToClipBoard';
|
||||||
import Avatar from '../../muiComponents/Avatar';
|
import Avatar from '../../muiComponents/Avatar';
|
||||||
@ -43,14 +44,16 @@ interface Interface {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }) => {
|
const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
switch (dependencyManager) {
|
switch (dependencyManager) {
|
||||||
case DependencyManager.NPM:
|
case DependencyManager.NPM:
|
||||||
return (
|
return (
|
||||||
<InstallItem button={true} data-testid={'installListItem-npm'}>
|
<InstallItem button={true} data-testid={'installListItem-npm'}>
|
||||||
<PackageMangerAvatar alt="npm" src={npmLogo} />
|
<PackageMangerAvatar alt="npm" src={npmLogo} />
|
||||||
<InstallListItemText
|
<InstallListItemText
|
||||||
primary={<CopyToClipBoard text={`npm install ${packageName}`} />}
|
primary={<CopyToClipBoard text={t('sidebar.installation.install-using-npm-command', { packageName })} />}
|
||||||
secondary={'Install using npm'}
|
secondary={t('sidebar.installation.install-using-npm')}
|
||||||
/>
|
/>
|
||||||
</InstallItem>
|
</InstallItem>
|
||||||
);
|
);
|
||||||
@ -59,8 +62,8 @@ const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }
|
|||||||
<InstallItem button={true} data-testid={'installListItem-yarn'}>
|
<InstallItem button={true} data-testid={'installListItem-yarn'}>
|
||||||
<PackageMangerAvatar alt="yarn" src={yarnLogo} />
|
<PackageMangerAvatar alt="yarn" src={yarnLogo} />
|
||||||
<InstallListItemText
|
<InstallListItemText
|
||||||
primary={<CopyToClipBoard text={`yarn add ${packageName}`} />}
|
primary={<CopyToClipBoard text={t('sidebar.installation.install-using-yarn-command', { packageName })} />}
|
||||||
secondary={'Install using yarn'}
|
secondary={t('sidebar.installation.install-using-yarn')}
|
||||||
/>
|
/>
|
||||||
</InstallItem>
|
</InstallItem>
|
||||||
);
|
);
|
||||||
@ -69,8 +72,8 @@ const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }
|
|||||||
<InstallItem button={true} data-testid={'installListItem-pnpm'}>
|
<InstallItem button={true} data-testid={'installListItem-pnpm'}>
|
||||||
<PackageMangerAvatar alt={'pnpm'} src={pnpmLogo} />
|
<PackageMangerAvatar alt={'pnpm'} src={pnpmLogo} />
|
||||||
<InstallListItemText
|
<InstallListItemText
|
||||||
primary={<CopyToClipBoard text={`pnpm install ${packageName}`} />}
|
primary={<CopyToClipBoard text={t('sidebar.installation.install-using-pnpm-command', { packageName })} />}
|
||||||
secondary={'Install using pnpm'}
|
secondary={t('sidebar.installation.install-using-pnpm')}
|
||||||
/>
|
/>
|
||||||
</InstallItem>
|
</InstallItem>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -94,7 +94,7 @@ exports[`<Install /> renders correctly 1`] = `
|
|||||||
<button
|
<button
|
||||||
class="MuiButtonBase-root MuiIconButton-root emotion-6 emotion-7"
|
class="MuiButtonBase-root MuiIconButton-root emotion-6 emotion-7"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
title="Copy to Clipboard"
|
title="Copy to clipboard"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
@ -161,7 +161,7 @@ exports[`<Install /> renders correctly 1`] = `
|
|||||||
<button
|
<button
|
||||||
class="MuiButtonBase-root MuiIconButton-root emotion-6 emotion-7"
|
class="MuiButtonBase-root MuiIconButton-root emotion-6 emotion-7"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
title="Copy to Clipboard"
|
title="Copy to clipboard"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
@ -228,7 +228,7 @@ exports[`<Install /> renders correctly 1`] = `
|
|||||||
<button
|
<button
|
||||||
class="MuiButtonBase-root MuiIconButton-root emotion-6 emotion-7"
|
class="MuiButtonBase-root MuiIconButton-root emotion-6 emotion-7"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
title="Copy to Clipboard"
|
title="Copy to clipboard"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React from 'react';
|
import React, { MouseEvent } from 'react';
|
||||||
import { Link as RouterLink } from 'react-router-dom';
|
import { Link as RouterLink } from 'react-router-dom';
|
||||||
|
|
||||||
import Text, { TextProps } from '../../muiComponents/Text';
|
import Text, { TextProps } from '../../muiComponents/Text';
|
||||||
@ -8,6 +8,7 @@ interface Props extends Pick<TextProps, 'variant'> {
|
|||||||
className?: string;
|
className?: string;
|
||||||
to: string;
|
to: string;
|
||||||
children?: React.ReactNode;
|
children?: React.ReactNode;
|
||||||
|
onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
type LinkRef = HTMLAnchorElement;
|
type LinkRef = HTMLAnchorElement;
|
||||||
|
|||||||
@ -1,8 +1,9 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import { render, waitForElement, fireEvent, waitForElementToBeRemoved } from '../../utils/test-react-testing-library';
|
import { render, waitForElement, fireEvent } from '../../utils/test-react-testing-library';
|
||||||
import AppContext, { AppContextProps } from '../../App/AppContext';
|
import AppContext, { AppContextProps } from '../../App/AppContext';
|
||||||
import api from '../../utils/api';
|
import api from '../../utils/api';
|
||||||
|
import translationEN from '../../../i18n/translations/en-US.json';
|
||||||
|
|
||||||
import LoginDialog from './LoginDialog';
|
import LoginDialog from './LoginDialog';
|
||||||
|
|
||||||
@ -35,13 +36,13 @@ describe('<LoginDialog /> component', () => {
|
|||||||
onClose: jest.fn(),
|
onClose: jest.fn(),
|
||||||
};
|
};
|
||||||
|
|
||||||
const { getByText } = render(
|
const { getByTestId } = render(
|
||||||
<AppContext.Provider value={appContextValue}>
|
<AppContext.Provider value={appContextValue}>
|
||||||
<LoginDialog onClose={props.onClose} open={props.open} />
|
<LoginDialog onClose={props.onClose} open={props.open} />
|
||||||
</AppContext.Provider>
|
</AppContext.Provider>
|
||||||
);
|
);
|
||||||
|
|
||||||
const loginDialogHeading = await waitForElement(() => getByText('Sign in'));
|
const loginDialogHeading = await waitForElement(() => getByTestId('login-dialog-form-login-button'));
|
||||||
expect(loginDialogHeading).toBeTruthy();
|
expect(loginDialogHeading).toBeTruthy();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
import React, { useState, useContext, useCallback } from 'react';
|
import React, { useState, useContext, useCallback } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import { makeLogin } from '../../utils/login';
|
import { makeLogin } from '../../utils/login';
|
||||||
import storage from '../../utils/storage';
|
import storage from '../../utils/storage';
|
||||||
@ -16,10 +17,11 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
|
const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
const appContext = useContext(AppContext);
|
const appContext = useContext(AppContext);
|
||||||
|
|
||||||
if (!appContext) {
|
if (!appContext) {
|
||||||
throw Error('The app Context was not correct used');
|
throw Error(t('app-context-not-correct-used'));
|
||||||
}
|
}
|
||||||
|
|
||||||
const [error, setError] = useState();
|
const [error, setError] = useState();
|
||||||
@ -43,7 +45,7 @@ const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog fullWidth={true} id="login--dialog" maxWidth="sm" onClose={onClose} open={open}>
|
<Dialog data-testid="login--dialog" fullWidth={true} id="login--dialog" maxWidth="sm" onClose={onClose} open={open}>
|
||||||
<LoginDialogCloseButton onClose={onClose} />
|
<LoginDialogCloseButton onClose={onClose} />
|
||||||
<DialogContent>
|
<DialogContent>
|
||||||
<LoginDialogHeader />
|
<LoginDialogHeader />
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
import CloseIcon from '@material-ui/icons/Close';
|
import CloseIcon from '@material-ui/icons/Close';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import DialogTitle from '../../muiComponents/DialogTitle';
|
import DialogTitle from '../../muiComponents/DialogTitle';
|
||||||
import IconButton from '../../muiComponents/IconButton';
|
import IconButton from '../../muiComponents/IconButton';
|
||||||
@ -17,12 +18,15 @@ interface Props {
|
|||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const LoginDialogCloseButton: React.FC<Props> = ({ onClose }) => (
|
const LoginDialogCloseButton: React.FC<Props> = ({ onClose }) => {
|
||||||
<DialogTitle>
|
const { t } = useTranslation();
|
||||||
<StyledIconButton data-testid="close-login-dialog-button" onClick={onClose}>
|
return (
|
||||||
<CloseIcon titleAccess="Close Dialog" />
|
<DialogTitle>
|
||||||
</StyledIconButton>
|
<StyledIconButton data-testid="close-login-dialog-button" onClick={onClose}>
|
||||||
</DialogTitle>
|
<CloseIcon titleAccess={t('button.close')} />
|
||||||
);
|
</StyledIconButton>
|
||||||
|
</DialogTitle>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export default LoginDialogCloseButton;
|
export default LoginDialogCloseButton;
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
import React, { memo } from 'react';
|
import React, { memo } from 'react';
|
||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
import useForm from 'react-hook-form/dist/react-hook-form.ie11';
|
import useForm from 'react-hook-form/dist/react-hook-form.ie11';
|
||||||
|
|
||||||
import TextField from '../../muiComponents/TextField';
|
import TextField from '../../muiComponents/TextField';
|
||||||
@ -28,6 +29,7 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
|
const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
errors,
|
errors,
|
||||||
@ -48,13 +50,13 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
|
|||||||
helperText={errors.username?.message}
|
helperText={errors.username?.message}
|
||||||
id="login--dialog-username"
|
id="login--dialog-username"
|
||||||
inputRef={register({
|
inputRef={register({
|
||||||
required: { value: true, message: 'This field is required' },
|
required: { value: true, message: t('form-validation.required-field') },
|
||||||
minLength: { value: 2, message: 'This field required the min length of 2' },
|
minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
|
||||||
})}
|
})}
|
||||||
label="Username"
|
label={t('form.username')}
|
||||||
margin="normal"
|
margin="normal"
|
||||||
name="username"
|
name="username"
|
||||||
placeholder="Your username"
|
placeholder={t('form-placeholder.username')}
|
||||||
required={true}
|
required={true}
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
/>
|
/>
|
||||||
@ -65,13 +67,13 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
|
|||||||
helperText={errors.password?.message}
|
helperText={errors.password?.message}
|
||||||
id="login--dialog-password"
|
id="login--dialog-password"
|
||||||
inputRef={register({
|
inputRef={register({
|
||||||
required: { value: true, message: 'This field is required' },
|
required: { value: true, message: t('form-validation.required-field') },
|
||||||
minLength: { value: 2, message: 'This field required the min length of 2' },
|
minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
|
||||||
})}
|
})}
|
||||||
label="Password"
|
label={t('form.password')}
|
||||||
margin="normal"
|
margin="normal"
|
||||||
name="password"
|
name="password"
|
||||||
placeholder="Your strong password"
|
placeholder={t('form-placeholder.password')}
|
||||||
required={true}
|
required={true}
|
||||||
type="password"
|
type="password"
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
@ -79,13 +81,14 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
|
|||||||
{error && <LoginDialogFormError error={error} />}
|
{error && <LoginDialogFormError error={error} />}
|
||||||
<StyledButton
|
<StyledButton
|
||||||
color="primary"
|
color="primary"
|
||||||
|
data-testid="login-dialog-form-login-button"
|
||||||
disabled={!isValid}
|
disabled={!isValid}
|
||||||
fullWidth={true}
|
fullWidth={true}
|
||||||
id="login--dialog-button-submit"
|
id="login--dialog-button-submit"
|
||||||
size="large"
|
size="large"
|
||||||
type="submit"
|
type="submit"
|
||||||
variant="contained">
|
variant="contained">
|
||||||
{'Sign In'}
|
{t('button.login')}
|
||||||
</StyledButton>
|
</StyledButton>
|
||||||
</StyledForm>
|
</StyledForm>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -2,6 +2,7 @@ import React from 'react';
|
|||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
import LockOutlined from '@material-ui/icons/LockOutlined';
|
import LockOutlined from '@material-ui/icons/LockOutlined';
|
||||||
import CloseIcon from '@material-ui/icons/Close';
|
import CloseIcon from '@material-ui/icons/Close';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import Heading from '../../muiComponents/Heading';
|
import Heading from '../../muiComponents/Heading';
|
||||||
import Avatar from '../../muiComponents/Avatar';
|
import Avatar from '../../muiComponents/Avatar';
|
||||||
@ -26,17 +27,19 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const LoginDialogHeader: React.FC<Props> = ({ onClose }) => {
|
const LoginDialogHeader: React.FC<Props> = ({ onClose }) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box alignItems="center" display="flex" flexDirection="column" position="relative">
|
<Box alignItems="center" display="flex" flexDirection="column" position="relative">
|
||||||
{onClose && (
|
{onClose && (
|
||||||
<StyledIconButton aria-label="Close" onClick={onClose}>
|
<StyledIconButton aria-label={t('button.close')} onClick={onClose}>
|
||||||
<CloseIcon />
|
<CloseIcon />
|
||||||
</StyledIconButton>
|
</StyledIconButton>
|
||||||
)}
|
)}
|
||||||
<StyledAvatar>
|
<StyledAvatar>
|
||||||
<LockOutlined />
|
<LockOutlined />
|
||||||
</StyledAvatar>
|
</StyledAvatar>
|
||||||
<Heading>{'Sign in'}</Heading>
|
<Heading>{t('button.login')}</Heading>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
import React, { useCallback } from 'react';
|
import React, { useCallback } from 'react';
|
||||||
import { useHistory } from 'react-router-dom';
|
import { useHistory } from 'react-router-dom';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import Box from '../../muiComponents/Box';
|
import Box from '../../muiComponents/Box';
|
||||||
import Button from '../../muiComponents/Button';
|
import Button from '../../muiComponents/Button';
|
||||||
@ -9,10 +10,6 @@ import { Theme } from '../../design-tokens/theme';
|
|||||||
|
|
||||||
import PackageImg from './img/package.svg';
|
import PackageImg from './img/package.svg';
|
||||||
|
|
||||||
export const NOT_FOUND_TEXT = "Sorry, we couldn't find it...";
|
|
||||||
export const LABEL_NOT_FOUND = "The page you're looking for doesn't exist.";
|
|
||||||
export const GO_TO_HOME_PAGE = 'Go to the home page';
|
|
||||||
|
|
||||||
const EmptyPackage = styled('img')({
|
const EmptyPackage = styled('img')({
|
||||||
width: '150px',
|
width: '150px',
|
||||||
margin: '0 auto',
|
margin: '0 auto',
|
||||||
@ -25,6 +22,7 @@ const StyledHeading = styled(Heading)<{ theme?: Theme }>(props => ({
|
|||||||
|
|
||||||
const NotFound: React.FC = () => {
|
const NotFound: React.FC = () => {
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const handleGoHome = useCallback(() => {
|
const handleGoHome = useCallback(() => {
|
||||||
history.push('/');
|
history.push('/');
|
||||||
@ -39,12 +37,12 @@ const NotFound: React.FC = () => {
|
|||||||
flexGrow={1}
|
flexGrow={1}
|
||||||
justifyContent="center"
|
justifyContent="center"
|
||||||
p={2}>
|
p={2}>
|
||||||
<EmptyPackage alt="404 - Page not found" src={PackageImg} />
|
<EmptyPackage alt={t('error.404.page-not-found')} src={PackageImg} />
|
||||||
<StyledHeading className="not-found-text" variant="h4">
|
<StyledHeading className="not-found-text" variant="h4">
|
||||||
{NOT_FOUND_TEXT}
|
{t('error.404.sorry-we-could-not-find-it')}
|
||||||
</StyledHeading>
|
</StyledHeading>
|
||||||
<Button onClick={handleGoHome} variant="contained">
|
<Button data-testid="not-found-go-to-home-button" onClick={handleGoHome} variant="contained">
|
||||||
{GO_TO_HOME_PAGE}
|
{t('button.go-to-the-home-page')}
|
||||||
</Button>
|
</Button>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
|
|||||||
|
|
||||||
import { render, fireEvent } from '../../utils/test-react-testing-library';
|
import { render, fireEvent } from '../../utils/test-react-testing-library';
|
||||||
|
|
||||||
import NotFound, { GO_TO_HOME_PAGE } from './NotFound';
|
import NotFound from './NotFound';
|
||||||
|
|
||||||
describe('<NotFound /> component', () => {
|
describe('<NotFound /> component', () => {
|
||||||
test('should load the component in default state', () => {
|
test('should load the component in default state', () => {
|
||||||
@ -14,17 +14,17 @@ describe('<NotFound /> component', () => {
|
|||||||
);
|
);
|
||||||
expect(container.firstChild).toMatchSnapshot();
|
expect(container.firstChild).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
test('go to Home Page button click', () => {
|
|
||||||
|
test('go to Home Page button click', async () => {
|
||||||
const spy = jest.spyOn(React, 'useCallback');
|
const spy = jest.spyOn(React, 'useCallback');
|
||||||
const { getByText } = render(
|
const { getByTestId } = render(
|
||||||
<Router>
|
<Router>
|
||||||
<NotFound />
|
<NotFound />
|
||||||
</Router>
|
</Router>
|
||||||
);
|
);
|
||||||
|
|
||||||
const node = getByText(GO_TO_HOME_PAGE);
|
const node = getByTestId('not-found-go-to-home-button');
|
||||||
fireEvent.click(node);
|
fireEvent.click(node);
|
||||||
|
|
||||||
expect(spy).toHaveBeenCalled();
|
expect(spy).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -27,6 +27,7 @@ exports[`<NotFound /> component should load the component in default state 1`] =
|
|||||||
</h4>
|
</h4>
|
||||||
<button
|
<button
|
||||||
class="MuiButtonBase-root MuiButton-root MuiButton-contained"
|
class="MuiButtonBase-root MuiButton-root MuiButton-contained"
|
||||||
|
data-testid="not-found-go-to-home-button"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -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 BugReport from '@material-ui/icons/BugReport';
|
||||||
import DownloadIcon from '@material-ui/icons/CloudDownload';
|
import DownloadIcon from '@material-ui/icons/CloudDownload';
|
||||||
import HomeIcon from '@material-ui/icons/Home';
|
import HomeIcon from '@material-ui/icons/Home';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import { PackageMetaInterface, Author as PackageAuthor } from '../../../types/packageMeta';
|
import { PackageMetaInterface, Author as PackageAuthor } from '../../../types/packageMeta';
|
||||||
import Tag from '../Tag';
|
import Tag from '../Tag';
|
||||||
import fileSizeSI from '../../utils/file-size';
|
import fileSizeSI from '../../utils/file-size';
|
||||||
import { formatDate, formatDateDistance } from '../../utils/package';
|
import { formatDate, formatDateDistance, getAuthorName } from '../../utils/package';
|
||||||
import Tooltip from '../../muiComponents/Tooltip';
|
import Tooltip from '../../muiComponents/Tooltip';
|
||||||
|
import Link from '../Link';
|
||||||
import { isURL } from '../../utils/url';
|
import { isURL } from '../../utils/url';
|
||||||
import { downloadTarball } from '../ActionBar';
|
import { downloadTarball } from '../ActionBar';
|
||||||
import ListItem from '../../muiComponents/ListItem';
|
import ListItem from '../../muiComponents/ListItem';
|
||||||
@ -64,11 +66,13 @@ const Package: React.FC<PackageInterface> = ({
|
|||||||
time,
|
time,
|
||||||
version,
|
version,
|
||||||
}) => {
|
}) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const renderVersionInfo = (): React.ReactNode =>
|
const renderVersionInfo = (): React.ReactNode =>
|
||||||
version && (
|
version && (
|
||||||
<OverviewItem>
|
<OverviewItem>
|
||||||
<Icon name={'version'} />
|
<Icon name={'version'} />
|
||||||
{`v${version}`}
|
{t('package.version', { version })}
|
||||||
</OverviewItem>
|
</OverviewItem>
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -77,7 +81,7 @@ const Package: React.FC<PackageInterface> = ({
|
|||||||
<Author>
|
<Author>
|
||||||
<Avatar alt={authorName} src={authorAvatar} />
|
<Avatar alt={authorName} src={authorAvatar} />
|
||||||
<Details>
|
<Details>
|
||||||
<Text text={authorName} />
|
<Text text={getAuthorName(authorName)} />
|
||||||
</Details>
|
</Details>
|
||||||
</Author>
|
</Author>
|
||||||
);
|
);
|
||||||
@ -103,7 +107,7 @@ const Package: React.FC<PackageInterface> = ({
|
|||||||
time && (
|
time && (
|
||||||
<OverviewItem>
|
<OverviewItem>
|
||||||
<Icon name="time" />
|
<Icon name="time" />
|
||||||
<Published>{`Published on ${formatDate(time)} •`}</Published>
|
<Published>{t('package.published-on', { time: formatDate(time) })}</Published>
|
||||||
{formatDateDistance(time)}
|
{formatDateDistance(time)}
|
||||||
</OverviewItem>
|
</OverviewItem>
|
||||||
);
|
);
|
||||||
@ -111,26 +115,26 @@ const Package: React.FC<PackageInterface> = ({
|
|||||||
const renderHomePageLink = (): React.ReactNode =>
|
const renderHomePageLink = (): React.ReactNode =>
|
||||||
homepage &&
|
homepage &&
|
||||||
isURL(homepage) && (
|
isURL(homepage) && (
|
||||||
<a href={homepage} target={'_blank'}>
|
<Link external={true} to={homepage}>
|
||||||
<Tooltip aria-label={'Homepage'} title={'Visit homepage'}>
|
<Tooltip aria-label={t('package.homepage')} title={t('package.visit-home-page')}>
|
||||||
<IconButton aria-label={'Homepage'}>
|
<IconButton aria-label={t('package.homepage')}>
|
||||||
<HomeIcon />
|
<HomeIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</a>
|
</Link>
|
||||||
);
|
);
|
||||||
|
|
||||||
const renderBugsLink = (): React.ReactNode =>
|
const renderBugsLink = (): React.ReactNode =>
|
||||||
bugs &&
|
bugs &&
|
||||||
bugs.url &&
|
bugs.url &&
|
||||||
isURL(bugs.url) && (
|
isURL(bugs.url) && (
|
||||||
<a href={bugs.url} target={'_blank'}>
|
<Link external={true} to={bugs.url}>
|
||||||
<Tooltip aria-label={'Bugs'} title={'Open an issue'}>
|
<Tooltip aria-label={t('package.bugs')} title={t('package.open-an-issue')}>
|
||||||
<IconButton aria-label={'Bugs'}>
|
<IconButton aria-label={t('package.bugs')}>
|
||||||
<BugReport />
|
<BugReport />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</a>
|
</Link>
|
||||||
);
|
);
|
||||||
|
|
||||||
const renderDownloadLink = (): React.ReactNode =>
|
const renderDownloadLink = (): React.ReactNode =>
|
||||||
@ -138,13 +142,13 @@ const Package: React.FC<PackageInterface> = ({
|
|||||||
dist.tarball &&
|
dist.tarball &&
|
||||||
isURL(dist.tarball) && (
|
isURL(dist.tarball) && (
|
||||||
// eslint-disable-next-line
|
// eslint-disable-next-line
|
||||||
<a onClick={downloadTarball(dist.tarball.replace(`https://registry.npmjs.org/`, window.location.href))} target={'_blank'}>
|
<Link to="#" external={true} onClick={downloadTarball(dist.tarball.replace(`https://registry.npmjs.org/`, window.location.href))}>
|
||||||
<Tooltip aria-label={'Download the tar file'} title={'Download tarball'}>
|
<Tooltip aria-label={t('package.download', { what: t('package.the-tar-file') })} title={t('package.tarball')}>
|
||||||
<IconButton aria-label={'Download'}>
|
<IconButton aria-label={t('package.download')}>
|
||||||
<DownloadIcon />
|
<DownloadIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</a>
|
</Link>
|
||||||
);
|
);
|
||||||
|
|
||||||
const renderPrimaryComponent = (): React.ReactNode => {
|
const renderPrimaryComponent = (): React.ReactNode => {
|
||||||
@ -155,7 +159,7 @@ const Package: React.FC<PackageInterface> = ({
|
|||||||
<PackageTitle className="package-title">{packageName}</PackageTitle>
|
<PackageTitle className="package-title">{packageName}</PackageTitle>
|
||||||
</WrapperLink>
|
</WrapperLink>
|
||||||
</Grid>
|
</Grid>
|
||||||
<GridRightAligned item={true} xs={true}>
|
<GridRightAligned alignItems="center" container={true} item={true} justify="flex-end" xs={true}>
|
||||||
{renderHomePageLink()}
|
{renderHomePageLink()}
|
||||||
{renderBugsLink()}
|
{renderBugsLink()}
|
||||||
{renderDownloadLink()}
|
{renderDownloadLink()}
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import Button from '../../muiComponents/Button';
|
import Button from '../../muiComponents/Button';
|
||||||
import Dialog from '../../muiComponents/Dialog';
|
import Dialog from '../../muiComponents/Dialog';
|
||||||
@ -7,18 +8,19 @@ import DialogActions from '../../muiComponents/DialogActions';
|
|||||||
import { Title, Content } from './styles';
|
import { Title, Content } from './styles';
|
||||||
import { Props } from './types';
|
import { Props } from './types';
|
||||||
|
|
||||||
const LABEL = 'CLOSE';
|
const RegistryInfoDialog: React.FC<Props> = ({ open = false, children, onClose }) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
const RegistryInfoDialog: React.FC<Props> = ({ open = false, children, onClose }) => (
|
return (
|
||||||
<Dialog data-testid={'registryInfo--dialog'} id="registryInfo--dialog-container" onClose={onClose} open={open}>
|
<Dialog data-testid={'registryInfo--dialog'} id="registryInfo--dialog-container" onClose={onClose} open={open}>
|
||||||
<Title disableTypography={true}>{'Register Info'}</Title>
|
<Title disableTypography={true}>{t('dialog.registry-info.title')}</Title>
|
||||||
<Content>{children}</Content>
|
<Content>{children}</Content>
|
||||||
<DialogActions>
|
<DialogActions>
|
||||||
<Button color="inherit" id="registryInfo--dialog-close" onClick={onClose}>
|
<Button color="inherit" id="registryInfo--dialog-close" onClick={onClose}>
|
||||||
{LABEL}
|
{t('button.close')}
|
||||||
</Button>
|
</Button>
|
||||||
</DialogActions>
|
</DialogActions>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export default RegistryInfoDialog;
|
export default RegistryInfoDialog;
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import Avatar from '../../muiComponents/Avatar';
|
import Avatar from '../../muiComponents/Avatar';
|
||||||
import Text from '../../muiComponents/Text';
|
import Text from '../../muiComponents/Text';
|
||||||
@ -44,6 +45,7 @@ const RepositoryAvatar = styled(Avatar)({
|
|||||||
|
|
||||||
const Repository: React.FC = () => {
|
const Repository: React.FC = () => {
|
||||||
const detailContext = React.useContext(DetailContext);
|
const detailContext = React.useContext(DetailContext);
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const { packageMeta } = detailContext;
|
const { packageMeta } = detailContext;
|
||||||
|
|
||||||
@ -64,7 +66,7 @@ const Repository: React.FC = () => {
|
|||||||
const repositoryURL = getCorrectRepositoryURL();
|
const repositoryURL = getCorrectRepositoryURL();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<List dense={true} subheader={<StyledText variant="subtitle1">{'Repository'}</StyledText>}>
|
<List dense={true} subheader={<StyledText variant="subtitle1">{t('sidebar.repository.title')}</StyledText>}>
|
||||||
<RepositoryListItem button={true}>
|
<RepositoryListItem button={true}>
|
||||||
<RepositoryAvatar src={git} />
|
<RepositoryAvatar src={git} />
|
||||||
<RepositoryListItemText
|
<RepositoryListItemText
|
||||||
|
|||||||
@ -2,6 +2,7 @@ import React, { useState, FormEvent, useCallback } from 'react';
|
|||||||
import debounce from 'lodash/debounce';
|
import debounce from 'lodash/debounce';
|
||||||
import { RouteComponentProps, withRouter } from 'react-router';
|
import { RouteComponentProps, withRouter } from 'react-router';
|
||||||
import { SuggestionSelectedEventData } from 'react-autosuggest';
|
import { SuggestionSelectedEventData } from 'react-autosuggest';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import AutoComplete from '../AutoComplete';
|
import AutoComplete from '../AutoComplete';
|
||||||
import { callSearch } from '../../utils/calls';
|
import { callSearch } from '../../utils/calls';
|
||||||
@ -10,11 +11,11 @@ import SearchAdornment from './SearchAdornment';
|
|||||||
|
|
||||||
const CONSTANTS = {
|
const CONSTANTS = {
|
||||||
API_DELAY: 300,
|
API_DELAY: 300,
|
||||||
PLACEHOLDER_TEXT: 'Search Packages',
|
|
||||||
ABORT_ERROR: 'AbortError',
|
ABORT_ERROR: 'AbortError',
|
||||||
};
|
};
|
||||||
|
|
||||||
const Search: React.FC<RouteComponentProps> = ({ history }) => {
|
const Search: React.FC<RouteComponentProps> = ({ history }) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
const [suggestions, setSuggestions] = useState([]);
|
const [suggestions, setSuggestions] = useState([]);
|
||||||
const [loaded, setLoaded] = useState(false);
|
const [loaded, setLoaded] = useState(false);
|
||||||
const [search, setSearch] = useState('');
|
const [search, setSearch] = useState('');
|
||||||
@ -141,7 +142,7 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
|
|||||||
onCleanSuggestions={handlePackagesClearRequested}
|
onCleanSuggestions={handlePackagesClearRequested}
|
||||||
onClick={handleClickSearch}
|
onClick={handleClickSearch}
|
||||||
onSuggestionsFetch={debounce(handleFetchPackages, CONSTANTS.API_DELAY)}
|
onSuggestionsFetch={debounce(handleFetchPackages, CONSTANTS.API_DELAY)}
|
||||||
placeholder={CONSTANTS.PLACEHOLDER_TEXT}
|
placeholder={t('search.packages')}
|
||||||
startAdornment={<SearchAdornment />}
|
startAdornment={<SearchAdornment />}
|
||||||
suggestions={suggestions}
|
suggestions={suggestions}
|
||||||
suggestionsError={error}
|
suggestionsError={error}
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
import React, { useContext } from 'react';
|
import React, { useContext } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import { DetailContext } from '../../pages/Version';
|
import { DetailContext } from '../../pages/Version';
|
||||||
import NoItems from '../NoItems';
|
import NoItems from '../NoItems';
|
||||||
@ -10,6 +11,7 @@ import { StyledText, Spacer, ListItemText } from './styles';
|
|||||||
|
|
||||||
const UpLinks: React.FC = () => {
|
const UpLinks: React.FC = () => {
|
||||||
const { packageMeta } = useContext(DetailContext);
|
const { packageMeta } = useContext(DetailContext);
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
if (!packageMeta || !packageMeta._uplinks || !packageMeta.latest) {
|
if (!packageMeta || !packageMeta._uplinks || !packageMeta.latest) {
|
||||||
return null;
|
return null;
|
||||||
@ -18,12 +20,12 @@ const UpLinks: React.FC = () => {
|
|||||||
const { _uplinks: uplinks, latest } = packageMeta;
|
const { _uplinks: uplinks, latest } = packageMeta;
|
||||||
|
|
||||||
if (Object.keys(uplinks).length === 0) {
|
if (Object.keys(uplinks).length === 0) {
|
||||||
return <NoItems text={`${latest.name} has no uplinks.`} />;
|
return <NoItems text={t('uplinks.no-items', { name: latest.name })} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<StyledText variant="subtitle1">{'Uplinks'}</StyledText>
|
<StyledText variant="subtitle1">{t('uplinks.title')}</StyledText>
|
||||||
<List>
|
<List>
|
||||||
{Object.keys(uplinks)
|
{Object.keys(uplinks)
|
||||||
.reverse()
|
.reverse()
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`<UpLinks /> component should render the component when there is no uplink 1`] = `"<h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom\\">verdaccio has no uplinks.</h6>"`;
|
exports[`<UpLinks /> component should render the component when there is no uplink 1`] = `"<h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom\\">uplinks.no-items</h6>"`;
|
||||||
|
|
||||||
exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-5wp24z-StyledText e14i1sy10 MuiTypography-subtitle1\\">Uplinks</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-t1rp47-Spacer e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">2 years ago</span></div></li></ul>"`;
|
exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-5wp24z-StyledText e14i1sy10 MuiTypography-subtitle1\\">uplinks.title</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-t1rp47-Spacer e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">2 years ago</span></div></li></ul>"`;
|
||||||
|
|||||||
@ -4,8 +4,9 @@ import { MemoryRouter } from 'react-router-dom';
|
|||||||
import { render, cleanup } from '../../utils/test-react-testing-library';
|
import { render, cleanup } from '../../utils/test-react-testing-library';
|
||||||
import { mount } from '../../utils/test-enzyme';
|
import { mount } from '../../utils/test-enzyme';
|
||||||
import { DetailContext, DetailContextProps } from '../../pages/Version';
|
import { DetailContext, DetailContextProps } from '../../pages/Version';
|
||||||
|
import translationEN from '../../../i18n/translations/en-US.json';
|
||||||
|
|
||||||
import Versions, { LABEL_CURRENT_TAGS, LABEL_VERSION_HISTORY } from './Versions';
|
import Versions from './Versions';
|
||||||
import data from './__partials__/data.json';
|
import data from './__partials__/data.json';
|
||||||
|
|
||||||
const detailContextValue: Partial<DetailContextProps> = {
|
const detailContextValue: Partial<DetailContextProps> = {
|
||||||
@ -35,8 +36,8 @@ describe('<Version /> component', () => {
|
|||||||
test('should render versions', () => {
|
test('should render versions', () => {
|
||||||
const { getByText } = render(<ComponentToBeRendered contextValue={detailContextValue} />);
|
const { getByText } = render(<ComponentToBeRendered contextValue={detailContextValue} />);
|
||||||
|
|
||||||
expect(getByText(LABEL_VERSION_HISTORY)).toBeTruthy();
|
expect(getByText(translationEN.versions['version-history'])).toBeTruthy();
|
||||||
expect(getByText(LABEL_CURRENT_TAGS)).toBeTruthy();
|
expect(getByText(translationEN.versions['current-tags'])).toBeTruthy();
|
||||||
|
|
||||||
// pick some versions
|
// pick some versions
|
||||||
expect(getByText('2.3.0')).toBeTruthy();
|
expect(getByText('2.3.0')).toBeTruthy();
|
||||||
@ -48,8 +49,8 @@ describe('<Version /> component', () => {
|
|||||||
<ComponentToBeRendered contextValue={{ packageName: detailContextValue.packageName }} />
|
<ComponentToBeRendered contextValue={{ packageName: detailContextValue.packageName }} />
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(queryByText(LABEL_VERSION_HISTORY)).toBeFalsy();
|
expect(queryByText(translationEN.versions['version-history'])).toBeFalsy();
|
||||||
expect(queryByText(LABEL_CURRENT_TAGS)).toBeFalsy();
|
expect(queryByText(translationEN.versions['current-tags'])).toBeFalsy();
|
||||||
});
|
});
|
||||||
|
|
||||||
test.todo('should click on version link');
|
test.todo('should click on version link');
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
import React, { useContext } from 'react';
|
import React, { useContext } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import { DetailContext } from '../../pages/Version';
|
import { DetailContext } from '../../pages/Version';
|
||||||
import { DIST_TAGS } from '../../../lib/constants';
|
import { DIST_TAGS } from '../../../lib/constants';
|
||||||
@ -6,13 +7,9 @@ import { DIST_TAGS } from '../../../lib/constants';
|
|||||||
import { StyledText } from './styles';
|
import { StyledText } from './styles';
|
||||||
import VersionsTagList from './VersionsTagList';
|
import VersionsTagList from './VersionsTagList';
|
||||||
import VersionsHistoryList from './VersionsHistoryList';
|
import VersionsHistoryList from './VersionsHistoryList';
|
||||||
|
|
||||||
export const NOT_AVAILABLE = 'Not available';
|
|
||||||
export const LABEL_CURRENT_TAGS = 'Current Tags';
|
|
||||||
export const LABEL_VERSION_HISTORY = 'Version History';
|
|
||||||
|
|
||||||
const Versions: React.FC = () => {
|
const Versions: React.FC = () => {
|
||||||
const detailContext = useContext(DetailContext);
|
const detailContext = useContext(DetailContext);
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const { packageMeta, packageName } = detailContext;
|
const { packageMeta, packageName } = detailContext;
|
||||||
|
|
||||||
@ -26,13 +23,13 @@ const Versions: React.FC = () => {
|
|||||||
<>
|
<>
|
||||||
{distTags && Object.keys(distTags).length > 0 && (
|
{distTags && Object.keys(distTags).length > 0 && (
|
||||||
<>
|
<>
|
||||||
<StyledText variant="subtitle1">{LABEL_CURRENT_TAGS}</StyledText>
|
<StyledText variant="subtitle1">{t('versions.current-tags')}</StyledText>
|
||||||
<VersionsTagList tags={distTags} />
|
<VersionsTagList tags={distTags} />
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
{versions && Object.keys(versions).length > 0 && packageName && (
|
{versions && Object.keys(versions).length > 0 && packageName && (
|
||||||
<>
|
<>
|
||||||
<StyledText variant="subtitle1">{LABEL_VERSION_HISTORY}</StyledText>
|
<StyledText variant="subtitle1">{t('versions.version-history')}</StyledText>
|
||||||
<VersionsHistoryList packageName={packageName} time={time} versions={versions} />
|
<VersionsHistoryList packageName={packageName} time={time} versions={versions} />
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import { Versions, Time } from '../../../types/packageMeta';
|
import { Versions, Time } from '../../../types/packageMeta';
|
||||||
import { formatDateDistance } from '../../utils/package';
|
import { formatDateDistance } from '../../utils/package';
|
||||||
@ -7,28 +8,32 @@ import ListItem from '../../muiComponents/ListItem';
|
|||||||
|
|
||||||
import { Spacer, ListItemText, StyledLink } from './styles';
|
import { Spacer, ListItemText, StyledLink } from './styles';
|
||||||
|
|
||||||
export const NOT_AVAILABLE = 'Not available';
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
versions: Versions;
|
versions: Versions;
|
||||||
packageName: string;
|
packageName: string;
|
||||||
time: Time;
|
time: Time;
|
||||||
}
|
}
|
||||||
|
|
||||||
const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) => (
|
const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) => {
|
||||||
<List dense={true}>
|
const { t } = useTranslation();
|
||||||
{Object.keys(versions)
|
|
||||||
.reverse()
|
return (
|
||||||
.map(version => (
|
<List dense={true}>
|
||||||
<ListItem className="version-item" key={version}>
|
{Object.keys(versions)
|
||||||
<StyledLink to={`/-/web/detail/${packageName}/v/${version}`}>
|
.reverse()
|
||||||
<ListItemText>{version}</ListItemText>
|
.map(version => (
|
||||||
</StyledLink>
|
<ListItem className="version-item" key={version}>
|
||||||
<Spacer />
|
<StyledLink to={`/-/web/detail/${packageName}/v/${version}`}>
|
||||||
<ListItemText>{time[version] ? formatDateDistance(time[version]) : NOT_AVAILABLE}</ListItemText>
|
<ListItemText>{version}</ListItemText>
|
||||||
</ListItem>
|
</StyledLink>
|
||||||
))}
|
<Spacer />
|
||||||
</List>
|
<ListItemText>
|
||||||
);
|
{time[version] ? formatDateDistance(time[version]) : t('versions.not-available')}
|
||||||
|
</ListItemText>
|
||||||
|
</ListItem>
|
||||||
|
))}
|
||||||
|
</List>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export default VersionsHistoryList;
|
export default VersionsHistoryList;
|
||||||
|
|||||||
@ -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 { waitForElement } from '@testing-library/dom';
|
||||||
|
|
||||||
import { render } from '../../utils/test-react-testing-library';
|
import { render } from '../../utils/test-react-testing-library';
|
||||||
import { NOT_FOUND_TEXT } from '../../components/NotFound';
|
import translationEN from '../../../i18n/translations/en-US.json';
|
||||||
|
|
||||||
import Version from './Version';
|
import Version from './Version';
|
||||||
import { DetailContext } from './context';
|
import { DetailContext } from './context';
|
||||||
@ -51,7 +51,9 @@ describe('test Version page', () => {
|
|||||||
</MemoryRouter>
|
</MemoryRouter>
|
||||||
);
|
);
|
||||||
// we wait fetch response (mocked above)
|
// we wait fetch response (mocked above)
|
||||||
const notFoundElement = await waitForElement(() => getByText(NOT_FOUND_TEXT));
|
const notFoundElement = await waitForElement(() =>
|
||||||
|
getByText(translationEN.error['404']['sorry-we-could-not-find-it'])
|
||||||
|
);
|
||||||
expect(notFoundElement).toBeTruthy();
|
expect(notFoundElement).toBeTruthy();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -29,7 +29,11 @@ const Home: React.FC<Props> = ({ isUserLoggedIn }) => {
|
|||||||
loadPackages().then();
|
loadPackages().then();
|
||||||
}, [isUserLoggedIn]);
|
}, [isUserLoggedIn]);
|
||||||
|
|
||||||
return <div className="container content">{isLoading ? <Loading /> : <PackageList packages={packages} />}</div>;
|
return (
|
||||||
|
<div className="container content" data-testid="home-page-container">
|
||||||
|
{isLoading ? <Loading /> : <PackageList packages={packages} />}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Home;
|
export default Home;
|
||||||
|
|||||||
@ -1,7 +1,3 @@
|
|||||||
export const TEXT = {
|
|
||||||
CLIPBOARD_COPY: 'Copy to Clipboard',
|
|
||||||
};
|
|
||||||
|
|
||||||
export const NODE_MANAGER = {
|
export const NODE_MANAGER = {
|
||||||
npm: 'npm',
|
npm: 'npm',
|
||||||
yarn: 'yarn',
|
yarn: 'yarn',
|
||||||
|
|||||||
@ -16,6 +16,22 @@ jest.mock('./api', () => ({
|
|||||||
request: require('../../jest/unit/components/__mocks__/api').default.request,
|
request: require('../../jest/unit/components/__mocks__/api').default.request,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
jest.mock('i18next', () => {
|
||||||
|
const translationEN = require('../../i18n/translations/en-US.json');
|
||||||
|
return {
|
||||||
|
t: (key: string) => {
|
||||||
|
const splittedKey = key.split('.');
|
||||||
|
let result = translationEN;
|
||||||
|
|
||||||
|
for (const element of splittedKey) {
|
||||||
|
result = result[element];
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
describe('isTokenExpire', (): void => {
|
describe('isTokenExpire', (): void => {
|
||||||
test('isTokenExpire - null is not a valid payload', (): void => {
|
test('isTokenExpire - null is not a valid payload', (): void => {
|
||||||
expect(isTokenExpire(null)).toBeTruthy();
|
expect(isTokenExpire(null)).toBeTruthy();
|
||||||
|
|||||||
@ -2,6 +2,7 @@ import isString from 'lodash/isString';
|
|||||||
import isNumber from 'lodash/isNumber';
|
import isNumber from 'lodash/isNumber';
|
||||||
import isEmpty from 'lodash/isEmpty';
|
import isEmpty from 'lodash/isEmpty';
|
||||||
import { Base64 } from 'js-base64';
|
import { Base64 } from 'js-base64';
|
||||||
|
import i18next from 'i18next';
|
||||||
|
|
||||||
import { HEADERS } from '../../lib/constants';
|
import { HEADERS } from '../../lib/constants';
|
||||||
|
|
||||||
@ -56,7 +57,7 @@ export async function makeLogin(username?: string, password?: string): Promise<L
|
|||||||
if (isEmpty(username) || isEmpty(password)) {
|
if (isEmpty(username) || isEmpty(password)) {
|
||||||
const error = {
|
const error = {
|
||||||
type: 'error',
|
type: 'error',
|
||||||
description: "Username or password can't be empty!",
|
description: i18next.t('form-validation.username-or-password-cant-be-empty'),
|
||||||
};
|
};
|
||||||
return { error };
|
return { error };
|
||||||
}
|
}
|
||||||
@ -78,7 +79,7 @@ export async function makeLogin(username?: string, password?: string): Promise<L
|
|||||||
console.error('login error', e.message);
|
console.error('login error', e.message);
|
||||||
const error = {
|
const error = {
|
||||||
type: 'error',
|
type: 'error',
|
||||||
description: 'Unable to sign in',
|
description: i18next.t('form-validation.unable-to-sign-in'),
|
||||||
};
|
};
|
||||||
return { error };
|
return { error };
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
import { isObject } from 'util';
|
import { isObject } from 'util';
|
||||||
|
|
||||||
|
import i18n from 'i18next';
|
||||||
import { UpLinks } from '@verdaccio/types';
|
import { UpLinks } from '@verdaccio/types';
|
||||||
import isString from 'lodash/isString';
|
import isString from 'lodash/isString';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
@ -90,3 +91,7 @@ export function getRecentReleases(time: Time = {}): Time[] {
|
|||||||
|
|
||||||
return recent.slice(recent.length - 3, recent.length).reverse();
|
return recent.slice(recent.length - 3, recent.length).reverse();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getAuthorName(authorName: string): string {
|
||||||
|
return authorName.toLowerCase() === 'anonymous' ? i18n.t('author-anonymous') : authorName;
|
||||||
|
}
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
import React from 'react';
|
||||||
import { mount, shallow } from 'enzyme';
|
import { mount, shallow } from 'enzyme';
|
||||||
|
|
||||||
import ThemeProvider from '../design-tokens/ThemeProvider';
|
import ThemeProvider from '../design-tokens/ThemeProvider';
|
||||||
|
|||||||
@ -1,10 +1,17 @@
|
|||||||
import { render } from '@testing-library/react';
|
import { render } from '@testing-library/react';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { I18nextProvider } from 'react-i18next';
|
||||||
|
|
||||||
|
import i18nConfig from '../../i18n/config';
|
||||||
import ThemeProvider from '../design-tokens/ThemeProvider';
|
import ThemeProvider from '../design-tokens/ThemeProvider';
|
||||||
|
|
||||||
const customRender = (node: React.ReactElement<any>, ...options: Array<any>) => {
|
const customRender = (node: React.ReactElement<any>, ...options: Array<any>) => {
|
||||||
return render(<ThemeProvider>{node}</ThemeProvider>, ...options);
|
return render(
|
||||||
|
<ThemeProvider>
|
||||||
|
<I18nextProvider i18n={i18nConfig}>{node}</I18nextProvider>
|
||||||
|
</ThemeProvider>,
|
||||||
|
...options
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export * from '@testing-library/react';
|
export * from '@testing-library/react';
|
||||||
|
|||||||
@ -17,7 +17,7 @@ compiler.hooks.done.tap('Verdaccio Dev Server', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
new WebpackDevServer(compiler, {
|
new WebpackDevServer(compiler, {
|
||||||
contentBase: `${env.DIST_PATH}`,
|
contentBase: env.DIST_PATH,
|
||||||
publicPath: config.output.publicPath,
|
publicPath: config.output.publicPath,
|
||||||
hot: true,
|
hot: true,
|
||||||
historyApiFallback: {
|
historyApiFallback: {
|
||||||
|
|||||||
@ -2,6 +2,7 @@
|
|||||||
export interface VerdaccioOptions {
|
export interface VerdaccioOptions {
|
||||||
url_prefix: string;
|
url_prefix: string;
|
||||||
base: string;
|
base: string;
|
||||||
|
language?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
|
|||||||
150
yarn.lock
150
yarn.lock
@ -1582,12 +1582,12 @@
|
|||||||
"@emotion/utils" "0.11.2"
|
"@emotion/utils" "0.11.2"
|
||||||
babel-plugin-emotion "^10.0.22"
|
babel-plugin-emotion "^10.0.22"
|
||||||
|
|
||||||
"@emotion/hash@0.7.3", "@emotion/hash@^0.7.1":
|
"@emotion/hash@0.7.3":
|
||||||
version "0.7.3"
|
version "0.7.3"
|
||||||
resolved "https://registry.verdaccio.org/@emotion%2fhash/-/hash-0.7.3.tgz#a166882c81c0c6040975dd30df24fae8549bd96f"
|
resolved "https://registry.verdaccio.org/@emotion%2fhash/-/hash-0.7.3.tgz#a166882c81c0c6040975dd30df24fae8549bd96f"
|
||||||
integrity sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw==
|
integrity sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw==
|
||||||
|
|
||||||
"@emotion/hash@0.7.4":
|
"@emotion/hash@0.7.4", "@emotion/hash@^0.7.4":
|
||||||
version "0.7.4"
|
version "0.7.4"
|
||||||
resolved "https://registry.verdaccio.org/@emotion%2fhash/-/hash-0.7.4.tgz#f14932887422c9056b15a8d222a9074a7dfa2831"
|
resolved "https://registry.verdaccio.org/@emotion%2fhash/-/hash-0.7.4.tgz#f14932887422c9056b15a8d222a9074a7dfa2831"
|
||||||
integrity sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A==
|
integrity sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A==
|
||||||
@ -2013,31 +2013,31 @@
|
|||||||
"@babel/runtime" "^7.4.4"
|
"@babel/runtime" "^7.4.4"
|
||||||
|
|
||||||
"@material-ui/styles@^4.7.1":
|
"@material-ui/styles@^4.7.1":
|
||||||
version "4.7.1"
|
version "4.9.0"
|
||||||
resolved "https://registry.verdaccio.org/@material-ui%2fstyles/-/styles-4.7.1.tgz#48fa70f06441c35e301a9c4b6c825526a97b7a29"
|
resolved "https://registry.verdaccio.org/@material-ui%2fstyles/-/styles-4.9.0.tgz#10c31859f6868cfa9d3adf6b6c3e32c9d676bc76"
|
||||||
integrity sha512-BBfxVThaPrglqHmKtSdrZJxnbFGJqKdZ5ZvDarj3HsmkteGCXsP1ohrDi5TWoa5JEJFo9S6q6NywqsENZn9rZA==
|
integrity sha512-nJHum4RqYBPWsjL/9JET8Z02FZ9gSizlg/7LWVFpIthNzpK6OQ5OSRR4T4x9/p+wK3t1qNn3b1uI4XpnZaPxOA==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/runtime" "^7.4.4"
|
"@babel/runtime" "^7.4.4"
|
||||||
"@emotion/hash" "^0.7.1"
|
"@emotion/hash" "^0.7.4"
|
||||||
"@material-ui/types" "^4.1.1"
|
"@material-ui/types" "^5.0.0"
|
||||||
"@material-ui/utils" "^4.7.1"
|
"@material-ui/utils" "^4.7.1"
|
||||||
clsx "^1.0.2"
|
clsx "^1.0.2"
|
||||||
csstype "^2.5.2"
|
csstype "^2.5.2"
|
||||||
hoist-non-react-statics "^3.2.1"
|
hoist-non-react-statics "^3.2.1"
|
||||||
jss "^10.0.0"
|
jss "^10.0.3"
|
||||||
jss-plugin-camel-case "^10.0.0"
|
jss-plugin-camel-case "^10.0.3"
|
||||||
jss-plugin-default-unit "^10.0.0"
|
jss-plugin-default-unit "^10.0.3"
|
||||||
jss-plugin-global "^10.0.0"
|
jss-plugin-global "^10.0.3"
|
||||||
jss-plugin-nested "^10.0.0"
|
jss-plugin-nested "^10.0.3"
|
||||||
jss-plugin-props-sort "^10.0.0"
|
jss-plugin-props-sort "^10.0.3"
|
||||||
jss-plugin-rule-value-function "^10.0.0"
|
jss-plugin-rule-value-function "^10.0.3"
|
||||||
jss-plugin-vendor-prefixer "^10.0.0"
|
jss-plugin-vendor-prefixer "^10.0.3"
|
||||||
prop-types "^15.7.2"
|
prop-types "^15.7.2"
|
||||||
|
|
||||||
"@material-ui/system@^4.7.1":
|
"@material-ui/system@^4.7.1":
|
||||||
version "4.7.1"
|
version "4.9.3"
|
||||||
resolved "https://registry.verdaccio.org/@material-ui%2fsystem/-/system-4.7.1.tgz#d928dacc0eeae6bea569ff3ee079f409efb3517d"
|
resolved "https://registry.verdaccio.org/@material-ui%2fsystem/-/system-4.9.3.tgz#ee48990d7941237fdaf21b7b399981d614bb0875"
|
||||||
integrity sha512-zH02p+FOimXLSKOW/OT2laYkl9bB3dD1AvnZqsHYoseUaq0aVrpbl2BGjQi+vJ5lg8w73uYlt9zOWzb3+1UdMQ==
|
integrity sha512-DBGsTKYrLlFpHG8BUp0X6ZpvaOzef+GhSwn/8DwVTXUdHitphaPQoL9xucrI8X9MTBo//El+7nylko7lo7eJIw==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/runtime" "^7.4.4"
|
"@babel/runtime" "^7.4.4"
|
||||||
"@material-ui/utils" "^4.7.1"
|
"@material-ui/utils" "^4.7.1"
|
||||||
@ -2050,6 +2050,11 @@
|
|||||||
dependencies:
|
dependencies:
|
||||||
"@types/react" "*"
|
"@types/react" "*"
|
||||||
|
|
||||||
|
"@material-ui/types@^5.0.0":
|
||||||
|
version "5.0.0"
|
||||||
|
resolved "https://registry.verdaccio.org/@material-ui%2ftypes/-/types-5.0.0.tgz#26d6259dc6b39f4c2e1e9aceff7a11e031941741"
|
||||||
|
integrity sha512-UeH2BuKkwDndtMSS0qgx1kCzSMw+ydtj0xx/XbFtxNSTlXydKwzs5gVW5ZKsFlAkwoOOQ9TIsyoCC8hq18tOwg==
|
||||||
|
|
||||||
"@material-ui/utils@^4.7.1":
|
"@material-ui/utils@^4.7.1":
|
||||||
version "4.7.1"
|
version "4.7.1"
|
||||||
resolved "https://registry.verdaccio.org/@material-ui%2futils/-/utils-4.7.1.tgz#dc16c7f0d2cd02fbcdd5cfe601fd6863ae3cc652"
|
resolved "https://registry.verdaccio.org/@material-ui%2futils/-/utils-4.7.1.tgz#dc16c7f0d2cd02fbcdd5cfe601fd6863ae3cc652"
|
||||||
@ -5212,7 +5217,7 @@ css-value@^0.0.1:
|
|||||||
resolved "https://registry.verdaccio.org/css-value/-/css-value-0.0.1.tgz#5efd6c2eea5ea1fd6b6ac57ec0427b18452424ea"
|
resolved "https://registry.verdaccio.org/css-value/-/css-value-0.0.1.tgz#5efd6c2eea5ea1fd6b6ac57ec0427b18452424ea"
|
||||||
integrity sha1-Xv1sLupeof1rasV+wEJ7GEUkJOo=
|
integrity sha1-Xv1sLupeof1rasV+wEJ7GEUkJOo=
|
||||||
|
|
||||||
css-vendor@^2.0.6:
|
css-vendor@^2.0.7:
|
||||||
version "2.0.7"
|
version "2.0.7"
|
||||||
resolved "https://registry.verdaccio.org/css-vendor/-/css-vendor-2.0.7.tgz#4e6d53d953c187981576d6a542acc9fb57174bda"
|
resolved "https://registry.verdaccio.org/css-vendor/-/css-vendor-2.0.7.tgz#4e6d53d953c187981576d6a542acc9fb57174bda"
|
||||||
integrity sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==
|
integrity sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==
|
||||||
@ -7799,6 +7804,13 @@ html-minifier@^3.2.3:
|
|||||||
relateurl "0.2.x"
|
relateurl "0.2.x"
|
||||||
uglify-js "3.4.x"
|
uglify-js "3.4.x"
|
||||||
|
|
||||||
|
html-parse-stringify2@2.0.1:
|
||||||
|
version "2.0.1"
|
||||||
|
resolved "https://registry.verdaccio.org/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
|
||||||
|
integrity sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=
|
||||||
|
dependencies:
|
||||||
|
void-elements "^2.0.1"
|
||||||
|
|
||||||
html-tags@^3.1.0:
|
html-tags@^3.1.0:
|
||||||
version "3.1.0"
|
version "3.1.0"
|
||||||
resolved "https://registry.verdaccio.org/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
|
resolved "https://registry.verdaccio.org/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
|
||||||
@ -7961,6 +7973,13 @@ hyphenate-style-name@^1.0.3:
|
|||||||
resolved "https://registry.verdaccio.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
|
resolved "https://registry.verdaccio.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
|
||||||
integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
|
integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
|
||||||
|
|
||||||
|
i18next@19.1.0:
|
||||||
|
version "19.1.0"
|
||||||
|
resolved "https://registry.verdaccio.org/i18next/-/i18next-19.1.0.tgz#fe1a1da3d208872946307c7d2d115da45d46159f"
|
||||||
|
integrity sha512-ISbmukX4L6Dz0QoH9+EW1AnBw7j+NRLoMu9uLPMaNSSTP9Eie9/oUL0dOyWX15baB3gYOpkHJpGZRHOqcnl0ew==
|
||||||
|
dependencies:
|
||||||
|
"@babel/runtime" "^7.3.1"
|
||||||
|
|
||||||
iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
|
iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
|
||||||
version "0.4.24"
|
version "0.4.24"
|
||||||
resolved "https://registry.verdaccio.org/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
|
resolved "https://registry.verdaccio.org/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
|
||||||
@ -9376,69 +9395,69 @@ jsprim@^1.2.2:
|
|||||||
json-schema "0.2.3"
|
json-schema "0.2.3"
|
||||||
verror "1.10.0"
|
verror "1.10.0"
|
||||||
|
|
||||||
jss-plugin-camel-case@^10.0.0:
|
jss-plugin-camel-case@^10.0.3:
|
||||||
version "10.0.0"
|
version "10.0.4"
|
||||||
resolved "https://registry.verdaccio.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0.tgz#d601bae2e8e2041cc526add289dcd7062db0a248"
|
resolved "https://registry.verdaccio.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.4.tgz#3dedecec1e5bba0bf6141c2c05e2ab11ea4b468d"
|
||||||
integrity sha512-yALDL00+pPR4FJh+k07A8FeDvfoPPuXU48HLy63enAubcVd3DnS+2rgqPXglHDGixIDVkCSXecl/l5GAMjzIbA==
|
integrity sha512-+wnqxJsyfUnOn0LxVg3GgZBSjfBCrjxwx7LFxwVTUih0ceGaXKZoieheNOaTo5EM4w8bt1nbb8XonpQCj67C6A==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/runtime" "^7.3.1"
|
"@babel/runtime" "^7.3.1"
|
||||||
hyphenate-style-name "^1.0.3"
|
hyphenate-style-name "^1.0.3"
|
||||||
jss "10.0.0"
|
jss "10.0.4"
|
||||||
|
|
||||||
jss-plugin-default-unit@^10.0.0:
|
jss-plugin-default-unit@^10.0.3:
|
||||||
version "10.0.0"
|
version "10.0.4"
|
||||||
resolved "https://registry.verdaccio.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0.tgz#601caf5f576fc0c66986fbe8a9aa37307a3a3ea3"
|
resolved "https://registry.verdaccio.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.4.tgz#df03885de20f20a1fc1c21bdb7c62e865ee400d9"
|
||||||
integrity sha512-sURozIOdCtGg9ap18erQ+ijndAfEGtTaetxfU3H4qwC18Bi+fdvjlY/ahKbuu0ASs7R/+WKCP7UaRZOjUDMcdQ==
|
integrity sha512-T0mhL/Ogp/quvod/jAHEqKvptLDxq7Cj3a+7zRuqK8HxUYkftptN89wJElZC3rshhNKiogkEYhCWenpJdFvTBg==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/runtime" "^7.3.1"
|
"@babel/runtime" "^7.3.1"
|
||||||
jss "10.0.0"
|
jss "10.0.4"
|
||||||
|
|
||||||
jss-plugin-global@^10.0.0:
|
jss-plugin-global@^10.0.3:
|
||||||
version "10.0.0"
|
version "10.0.4"
|
||||||
resolved "https://registry.verdaccio.org/jss-plugin-global/-/jss-plugin-global-10.0.0.tgz#0fed1b6461e0d57d6e394f877529009bc1cb3cb6"
|
resolved "https://registry.verdaccio.org/jss-plugin-global/-/jss-plugin-global-10.0.4.tgz#412245b56133cc88bec654a70d82d5922619f4c5"
|
||||||
integrity sha512-80ofWKSQUo62bxLtRoTNe0kFPtHgUbAJeOeR36WEGgWIBEsXLyXOnD5KNnjPqG4heuEkz9eSLccjYST50JnI7Q==
|
integrity sha512-N8n9/GHENZce+sqE4UYiZiJtI+t+erT/BypHOrNYAfIoNEj7OYsOEKfIo2P0GpLB3QyDAYf5eo9XNdZ8veEkUA==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/runtime" "^7.3.1"
|
"@babel/runtime" "^7.3.1"
|
||||||
jss "10.0.0"
|
jss "10.0.4"
|
||||||
|
|
||||||
jss-plugin-nested@^10.0.0:
|
jss-plugin-nested@^10.0.3:
|
||||||
version "10.0.0"
|
version "10.0.4"
|
||||||
resolved "https://registry.verdaccio.org/jss-plugin-nested/-/jss-plugin-nested-10.0.0.tgz#d37ecc013c3b0d0e4acc2b48f6b62da6ae53948b"
|
resolved "https://registry.verdaccio.org/jss-plugin-nested/-/jss-plugin-nested-10.0.4.tgz#4d15ad13995fb6e4125618006473a096d2475d75"
|
||||||
integrity sha512-waxxwl/po1hN3azTyixKnr8ReEqUv5WK7WsO+5AWB0bFndML5Yqnt8ARZ90HEg8/P6WlqE/AB2413TkCRZE8bA==
|
integrity sha512-QM21BKVt8LDeoRfowvAMh/s+/89VYrreIIE6ch4pvw0oAXDWw1iorUPlqLZ7uCO3UL0uFtQhJq3QMLN6Lr1v0A==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/runtime" "^7.3.1"
|
"@babel/runtime" "^7.3.1"
|
||||||
jss "10.0.0"
|
jss "10.0.4"
|
||||||
tiny-warning "^1.0.2"
|
tiny-warning "^1.0.2"
|
||||||
|
|
||||||
jss-plugin-props-sort@^10.0.0:
|
jss-plugin-props-sort@^10.0.3:
|
||||||
version "10.0.0"
|
version "10.0.4"
|
||||||
resolved "https://registry.verdaccio.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0.tgz#38a13407384c2a4a7c026659488350669b953b18"
|
resolved "https://registry.verdaccio.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.4.tgz#43c880ff8dfcf858f809f663ece5e65a1d945b5a"
|
||||||
integrity sha512-41mf22CImjwNdtOG3r+cdC8+RhwNm616sjHx5YlqTwtSJLyLFinbQC/a4PIFk8xqf1qpFH1kEAIw+yx9HaqZ3g==
|
integrity sha512-WoETdOCjGskuin/OMt2uEdDPLZF3vfQuHXF+XUHGJrq0BAapoyGQDcv37SeReDlkRAbVXkEZPsIMvYrgHSHFiA==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/runtime" "^7.3.1"
|
"@babel/runtime" "^7.3.1"
|
||||||
jss "10.0.0"
|
jss "10.0.4"
|
||||||
|
|
||||||
jss-plugin-rule-value-function@^10.0.0:
|
jss-plugin-rule-value-function@^10.0.3:
|
||||||
version "10.0.0"
|
version "10.0.4"
|
||||||
resolved "https://registry.verdaccio.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0.tgz#3ec1b781b7c86080136dbef6c36e91f20244b72e"
|
resolved "https://registry.verdaccio.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.4.tgz#2f4cf4a86ad3eba875bb48cb9f4a7ed35cb354e7"
|
||||||
integrity sha512-Jw+BZ8JIw1f12V0SERqGlBT1JEPWax3vuZpMym54NAXpPb7R1LYHiCTIlaJUyqvIfEy3kiHMtgI+r2whGgRIxQ==
|
integrity sha512-0hrzOSWRF5ABJGaHrlnHbYZjU877Ofzfh2id3uLtBvemGQLHI+ldoL8/+6iPSRa7M8z8Ngfg2vfYhKjUA5gA0g==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/runtime" "^7.3.1"
|
"@babel/runtime" "^7.3.1"
|
||||||
jss "10.0.0"
|
jss "10.0.4"
|
||||||
|
|
||||||
jss-plugin-vendor-prefixer@^10.0.0:
|
jss-plugin-vendor-prefixer@^10.0.3:
|
||||||
version "10.0.0"
|
version "10.0.4"
|
||||||
resolved "https://registry.verdaccio.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0.tgz#400280535b0f483a9c78105afe4eee61b70018eb"
|
resolved "https://registry.verdaccio.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.4.tgz#1626ef612a4541cff17cf96815e1740155214ed2"
|
||||||
integrity sha512-qslqvL0MUbWuzXJWdUxpj6mdNUX8jr4FFTo3aZnAT65nmzWL7g8oTr9ZxmTXXgdp7ANhS1QWE7036/Q2isFBpw==
|
integrity sha512-4JgEbcrdeMda1qvxTm1CnxFJAWVV++VLpP46HNTrfH7VhVlvUpihnUNs2gAlKuRT/XSBuiWeLAkrTqF4NVrPig==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/runtime" "^7.3.1"
|
"@babel/runtime" "^7.3.1"
|
||||||
css-vendor "^2.0.6"
|
css-vendor "^2.0.7"
|
||||||
jss "10.0.0"
|
jss "10.0.4"
|
||||||
|
|
||||||
jss@10.0.0, jss@^10.0.0:
|
jss@10.0.4, jss@^10.0.3:
|
||||||
version "10.0.0"
|
version "10.0.4"
|
||||||
resolved "https://registry.verdaccio.org/jss/-/jss-10.0.0.tgz#998d5026c02accae15708de83bd6ba57bac977d2"
|
resolved "https://registry.verdaccio.org/jss/-/jss-10.0.4.tgz#46ebdde1c40c9a079d64f3334cb88ae28fd90bfd"
|
||||||
integrity sha512-TPpDFsiBjuERiL+dFDq8QCdiF9oDasPcNqCKLGCo/qED3fNYOQ8PX2lZhknyTiAt3tZrfOFbb0lbQ9lTjPZxsQ==
|
integrity sha512-GqHmeDK83qbqMAVjxyPfN1qJVTKZne533a9bdCrllZukUM8npG/k+JumEPI86IIB5ifaZAHG2HAsUziyxOiooQ==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/runtime" "^7.3.1"
|
"@babel/runtime" "^7.3.1"
|
||||||
csstype "^2.6.5"
|
csstype "^2.6.5"
|
||||||
@ -12525,6 +12544,14 @@ react-hot-loader@4.12.18:
|
|||||||
shallowequal "^1.1.0"
|
shallowequal "^1.1.0"
|
||||||
source-map "^0.7.3"
|
source-map "^0.7.3"
|
||||||
|
|
||||||
|
react-i18next@11.3.1:
|
||||||
|
version "11.3.1"
|
||||||
|
resolved "https://registry.verdaccio.org/react-i18next/-/react-i18next-11.3.1.tgz#9269282c3f566015f0bdf8fdbf46782bbe50f5a7"
|
||||||
|
integrity sha512-S/CWHcnew1lXo8HeniGhBU5kTmPhZ4w4rtA4m/gDN07soCtKKYSAcLNm7zhwjI2OSR4Skd0vOtzNp/FzEEjxIw==
|
||||||
|
dependencies:
|
||||||
|
"@babel/runtime" "^7.3.1"
|
||||||
|
html-parse-stringify2 "2.0.1"
|
||||||
|
|
||||||
react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
|
react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
|
||||||
version "16.12.0"
|
version "16.12.0"
|
||||||
resolved "https://registry.verdaccio.org/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
|
resolved "https://registry.verdaccio.org/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
|
||||||
@ -15195,6 +15222,11 @@ vm-browserify@^1.0.1:
|
|||||||
resolved "https://registry.verdaccio.org/vm-browserify/-/vm-browserify-1.1.0.tgz#bd76d6a23323e2ca8ffa12028dc04559c75f9019"
|
resolved "https://registry.verdaccio.org/vm-browserify/-/vm-browserify-1.1.0.tgz#bd76d6a23323e2ca8ffa12028dc04559c75f9019"
|
||||||
integrity sha512-iq+S7vZJE60yejDYM0ek6zg308+UZsdtPExWP9VZoCFCz1zkJoXFnAX7aZfd/ZwrkidzdUZL0C/ryW+JwAiIGw==
|
integrity sha512-iq+S7vZJE60yejDYM0ek6zg308+UZsdtPExWP9VZoCFCz1zkJoXFnAX7aZfd/ZwrkidzdUZL0C/ryW+JwAiIGw==
|
||||||
|
|
||||||
|
void-elements@^2.0.1:
|
||||||
|
version "2.0.1"
|
||||||
|
resolved "https://registry.verdaccio.org/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
|
||||||
|
integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
|
||||||
|
|
||||||
w3c-hr-time@^1.0.1:
|
w3c-hr-time@^1.0.1:
|
||||||
version "1.0.1"
|
version "1.0.1"
|
||||||
resolved "https://registry.verdaccio.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"
|
resolved "https://registry.verdaccio.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user