forked from sombochea/verdaccio-ui
Compare commits
1 Commits
master
...
feat-dark-
| Author | SHA1 | Date | |
|---|---|---|---|
|
f761e36669 |
@ -3,7 +3,7 @@
|
|||||||
"files": null,
|
"files": null,
|
||||||
"lines": null
|
"lines": null
|
||||||
},
|
},
|
||||||
"generated_at": "2020-05-05T12:14:08Z",
|
"generated_at": "2019-09-29T18:19:50Z",
|
||||||
"plugins_used": [
|
"plugins_used": [
|
||||||
{
|
{
|
||||||
"name": "AWSKeyDetector"
|
"name": "AWSKeyDetector"
|
||||||
@ -23,7 +23,6 @@
|
|||||||
"name": "HexHighEntropyString"
|
"name": "HexHighEntropyString"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"keyword_exclude": null,
|
|
||||||
"name": "KeywordDetector"
|
"name": "KeywordDetector"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -37,9 +36,5 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"results": {},
|
"results": {},
|
||||||
"version": "0.13.0",
|
"version": "0.12.4"
|
||||||
"word_list": {
|
|
||||||
"file": null,
|
|
||||||
"hash": null
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
88
CHANGELOG.md
88
CHANGELOG.md
@ -2,94 +2,6 @@
|
|||||||
|
|
||||||
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
||||||
|
|
||||||
### [1.7.1](https://github.com/verdaccio/ui/compare/v1.7.0...v1.7.1) (2020-04-27)
|
|
||||||
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
* **i18n:** fixed current locale ([#462](https://github.com/verdaccio/ui/issues/462)) ([f44abd7](https://github.com/verdaccio/ui/commit/f44abd7dd08a8d68b1bfc2bf0c053f3e80a343d0))
|
|
||||||
|
|
||||||
## [1.7.0](https://github.com/verdaccio/ui/compare/v1.6.0...v1.7.0) (2020-04-24)
|
|
||||||
|
|
||||||
|
|
||||||
### Features
|
|
||||||
|
|
||||||
* add japanese translations ([#460](https://github.com/verdaccio/ui/issues/460)) ([25def6c](https://github.com/verdaccio/ui/commit/25def6ccd5a42d43af1c33e7ace4bd7fdbec0e64))
|
|
||||||
|
|
||||||
## [1.6.0](https://github.com/verdaccio/ui/compare/v1.5.0...v1.6.0) (2020-04-23)
|
|
||||||
|
|
||||||
|
|
||||||
### Features
|
|
||||||
|
|
||||||
* **lng:** Added change language on the fly ([#456](https://github.com/verdaccio/ui/issues/456)) ([675ee98](https://github.com/verdaccio/ui/commit/675ee980ee2c4c789e52d38553f751bb219d1270))
|
|
||||||
* Add french language + minor english language fix ([#459](https://github.com/verdaccio/ui/issues/459)) ([b173684](https://github.com/verdaccio/ui/commit/b17368470d63878292aca3e6d2f9adc97748ebac))
|
|
||||||
|
|
||||||
## [1.5.0](https://github.com/verdaccio/ui/compare/v1.4.0...v1.5.0) (2020-04-08)
|
|
||||||
|
|
||||||
|
|
||||||
### Features
|
|
||||||
|
|
||||||
* **flag:** Added Germany flag ([#454](https://github.com/verdaccio/ui/issues/454)) ([07620e5](https://github.com/verdaccio/ui/commit/07620e5d4b1ed54bae2266d936af5306bfbe2d8b))
|
|
||||||
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
* **styles:** Updated dark colors ([#455](https://github.com/verdaccio/ui/issues/455)) ([d29aa05](https://github.com/verdaccio/ui/commit/d29aa05cc6ef31cb871e79de10c1b1ddd74f023e))
|
|
||||||
|
|
||||||
## [1.4.0](https://github.com/verdaccio/ui/compare/v1.3.0...v1.4.0) (2020-04-02)
|
|
||||||
|
|
||||||
|
|
||||||
### Features
|
|
||||||
|
|
||||||
* added zh-CN translations to the UI ([#448](https://github.com/verdaccio/ui/issues/448)) ([03114a8](https://github.com/verdaccio/ui/commit/03114a842b88ae0f482f389e7ae91af62e00bca4))
|
|
||||||
|
|
||||||
## [1.3.0](https://github.com/verdaccio/ui/compare/v1.0.4...v1.3.0) (2020-04-01)
|
|
||||||
|
|
||||||
|
|
||||||
### Features
|
|
||||||
|
|
||||||
* **style:** added dark mode ([#446](https://github.com/verdaccio/ui/issues/446)) ([cdad5cf](https://github.com/verdaccio/ui/commit/cdad5cf70d69b7bb045fce461a32108def81721d))
|
|
||||||
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
* **chore:** droped release ([#449](https://github.com/verdaccio/ui/issues/449)) ([f321f7b](https://github.com/verdaccio/ui/commit/f321f7b6fe1ac44897753f0bfdbbaa6ca7eca515))
|
|
||||||
|
|
||||||
## [1.2.0](https://github.com/verdaccio/ui/compare/v1.0.4...v1.2.0) (2020-04-01)
|
|
||||||
|
|
||||||
|
|
||||||
### Features
|
|
||||||
|
|
||||||
* **style:** added dark mode ([#446](https://github.com/verdaccio/ui/issues/446)) ([cdad5cf](https://github.com/verdaccio/ui/commit/cdad5cf70d69b7bb045fce461a32108def81721d))
|
|
||||||
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
* **chore:** droped release ([#449](https://github.com/verdaccio/ui/issues/449)) ([f321f7b](https://github.com/verdaccio/ui/commit/f321f7b6fe1ac44897753f0bfdbbaa6ca7eca515))
|
|
||||||
|
|
||||||
## [1.1.0](https://github.com/verdaccio/ui/compare/v1.0.4...v1.1.0) (2020-04-01)
|
|
||||||
|
|
||||||
|
|
||||||
### Features
|
|
||||||
|
|
||||||
* **style:** added dark mode ([#446](https://github.com/verdaccio/ui/issues/446)) ([cdad5cf](https://github.com/verdaccio/ui/commit/cdad5cf70d69b7bb045fce461a32108def81721d))
|
|
||||||
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
* **chore:** droped release ([#449](https://github.com/verdaccio/ui/issues/449)) ([f321f7b](https://github.com/verdaccio/ui/commit/f321f7b6fe1ac44897753f0bfdbbaa6ca7eca515))
|
|
||||||
|
|
||||||
### [1.0.4](https://github.com/verdaccio/ui/compare/v1.0.0...v1.0.4) (2020-03-17)
|
|
||||||
|
|
||||||
## [1.0.0](https://github.com/verdaccio/ui/compare/v0.3.13...v1.0.0) (2020-03-13)
|
|
||||||
|
|
||||||
|
|
||||||
### Features
|
|
||||||
|
|
||||||
* **de-translations:** added de-DE translations to the UI ([#441](https://github.com/verdaccio/ui/issues/441)) ([e27d59b](https://github.com/verdaccio/ui/commit/e27d59bff7039473e566090fa0f825f7e462aa4e))
|
|
||||||
* spanish translations to UI ([#440](https://github.com/verdaccio/ui/issues/440)) ([0abe1ef](https://github.com/verdaccio/ui/commit/0abe1ef41ca93b900ddda72e2d873ee52078221c))
|
|
||||||
* **i18n:** added i18next for user interface translations ([#432](https://github.com/verdaccio/ui/issues/432)) ([7428384](https://github.com/verdaccio/ui/commit/7428384b55e6089dbe45e6b216eee0b670dff576))
|
|
||||||
|
|
||||||
### [0.3.13](https://github.com/verdaccio/ui/compare/v0.3.12...v0.3.13) (2020-02-02)
|
### [0.3.13](https://github.com/verdaccio/ui/compare/v0.3.12...v0.3.13) (2020-02-02)
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
28
README.md
28
README.md
@ -93,7 +93,7 @@ If you have any issue you can try the following options, do no desist to ask or
|
|||||||
|
|
||||||
* [Blog](https://medium.com/verdaccio)
|
* [Blog](https://medium.com/verdaccio)
|
||||||
* [Donations](https://opencollective.com/verdaccio)
|
* [Donations](https://opencollective.com/verdaccio)
|
||||||
* [Roadmaps](https://github.com/verdaccio/ui/projects)
|
* [Roadmaps](https://github.com/verdaccio/verdaccio/projects)
|
||||||
* [Reporting an issue](https://github.com/verdaccio/verdaccio/blob/master/CONTRIBUTING.md#reporting-a-bug)
|
* [Reporting an issue](https://github.com/verdaccio/verdaccio/blob/master/CONTRIBUTING.md#reporting-a-bug)
|
||||||
* [Running discussions](https://github.com/verdaccio/verdaccio/issues?q=is%3Aissue+is%3Aopen+label%3Adiscuss)
|
* [Running discussions](https://github.com/verdaccio/verdaccio/issues?q=is%3Aissue+is%3Aopen+label%3Adiscuss)
|
||||||
* [Chat](http://chat.verdaccio.org/)
|
* [Chat](http://chat.verdaccio.org/)
|
||||||
@ -101,32 +101,6 @@ If you have any issue you can try the following options, do no desist to ask or
|
|||||||
* [FAQ](https://github.com/verdaccio/verdaccio/issues?utf8=%E2%9C%93&q=is%3Aissue%20label%3Aquestion%20)
|
* [FAQ](https://github.com/verdaccio/verdaccio/issues?utf8=%E2%9C%93&q=is%3Aissue%20label%3Aquestion%20)
|
||||||
* [Docker Examples](https://github.com/verdaccio/docker-examples)
|
* [Docker Examples](https://github.com/verdaccio/docker-examples)
|
||||||
|
|
||||||
### Translations
|
|
||||||
|
|
||||||
Translations are handled locally. I18n files can be found in the folder ```i18n/translations/*``` of this repository. We would love to provide translations from other languages, embracing all our users, but unfortunately we cannot do this without your help. Would you like to help us? Please feel **super welcome** to add a locale by opening a pull request.
|
|
||||||
|
|
||||||
Your PR should contain:
|
|
||||||
|
|
||||||
1 - A json file in the folder ```i18n/translations/*``` with the translations. The file must be named according to the new added language
|
|
||||||
|
|
||||||
2 - The files ```i18n/config.ts``` and ```LanguageSwitch.tsx``` updated with the new language. Please see the current structure
|
|
||||||
|
|
||||||
3 - The other translations containing the new language in the language of the file. Example:
|
|
||||||
|
|
||||||
New language: ```cs_CZ ```
|
|
||||||
|
|
||||||
The file ```pt-BR ``` should contain:
|
|
||||||
```
|
|
||||||
"lng": {
|
|
||||||
...,
|
|
||||||
"czech": "Tcheco"
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
4 - A SVG flag of the new translated language in the the folder ```src/components/Icon/img/*```. You maybe want to compress the svg file using https://jakearchibald.github.io/svgomg/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### License
|
### License
|
||||||
|
|
||||||
Verdaccio is [MIT licensed](https://github.com/verdaccio/verdaccio/blob/master/LICENSE)
|
Verdaccio is [MIT licensed](https://github.com/verdaccio/verdaccio/blob/master/LICENSE)
|
||||||
|
|||||||
@ -1,65 +0,0 @@
|
|||||||
import i18n from 'i18next';
|
|
||||||
import { initReactI18next } from 'react-i18next';
|
|
||||||
|
|
||||||
import translationEN from './translations/en-US.json';
|
|
||||||
import translationPT from './translations/pt-BR.json';
|
|
||||||
import translationES from './translations/es-ES.json';
|
|
||||||
import translationDE from './translations/de-DE.json';
|
|
||||||
import translationFR from './translations/fr-FR.json';
|
|
||||||
import translationCN from './translations/zh-CN.json';
|
|
||||||
import translationJP from './translations/ja-JP.json';
|
|
||||||
import translationUA from './translations/uk-UA.json';
|
|
||||||
import translationKM from './translations/km-KH.json';
|
|
||||||
|
|
||||||
const languages = {
|
|
||||||
'en-US': {
|
|
||||||
translation: translationEN,
|
|
||||||
},
|
|
||||||
'pt-BR': {
|
|
||||||
translation: translationPT,
|
|
||||||
},
|
|
||||||
'es-ES': {
|
|
||||||
translation: translationES,
|
|
||||||
},
|
|
||||||
'de-DE': {
|
|
||||||
translation: translationDE,
|
|
||||||
},
|
|
||||||
'fr-FR': {
|
|
||||||
translation: translationFR,
|
|
||||||
},
|
|
||||||
'zh-CN': {
|
|
||||||
translation: translationCN,
|
|
||||||
},
|
|
||||||
'ja-JP': {
|
|
||||||
translation: translationJP,
|
|
||||||
},
|
|
||||||
'uk-UA': {
|
|
||||||
translation: translationUA,
|
|
||||||
},
|
|
||||||
'km-KH': {
|
|
||||||
translation: translationKM,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
type Language = keyof typeof languages;
|
|
||||||
|
|
||||||
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', 'es-ES', 'de-DE', 'fr-FR', 'zh-CN', 'ja-JP', 'uk-UA', 'km-KH'],
|
|
||||||
load: 'currentOnly',
|
|
||||||
resources: languages,
|
|
||||||
debug: false,
|
|
||||||
interpolation: {
|
|
||||||
escapeValue: false, // react already safes from xss
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export default i18n;
|
|
||||||
export { Language };
|
|
||||||
@ -1,152 +0,0 @@
|
|||||||
{
|
|
||||||
"copy-to-clipboard": "In die Zwischenablage kopieren",
|
|
||||||
"author-anonymous": "Anonymus",
|
|
||||||
"action-bar-action": {
|
|
||||||
"visit-home-page": "Zur Homepage",
|
|
||||||
"open-an-issue": "Einen Fehler melden",
|
|
||||||
"download-tarball": "Archiv (Tarball) herunterladen"
|
|
||||||
},
|
|
||||||
"dialog": {
|
|
||||||
"registry-info": {
|
|
||||||
"title": "Registrierungsinformationen"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"header": {
|
|
||||||
"documentation": "Dokumentation",
|
|
||||||
"registry-info": "Registrierungsinformationen",
|
|
||||||
"greetings": "Hallo "
|
|
||||||
},
|
|
||||||
"search": {
|
|
||||||
"packages": "Pakete suchen"
|
|
||||||
},
|
|
||||||
"auto-complete": {
|
|
||||||
"loading": "wird geladen...",
|
|
||||||
"no-results-found": "Kein Ergebnis gefunden"
|
|
||||||
},
|
|
||||||
"tab": {
|
|
||||||
"uplinks": "Uplinks",
|
|
||||||
"versions": "Versionen",
|
|
||||||
"dependencies": "Abhängigkeiten",
|
|
||||||
"readme": "Liesmich"
|
|
||||||
},
|
|
||||||
"uplinks": {
|
|
||||||
"title": "Uplinks",
|
|
||||||
"no-items": "{{name}} hat keine Uplinks."
|
|
||||||
},
|
|
||||||
"versions": {
|
|
||||||
"current-tags": "Aktuelle Tags",
|
|
||||||
"version-history": "Versionsgeschichte",
|
|
||||||
"not-available": "Nicht verfügbar"
|
|
||||||
},
|
|
||||||
"package": {
|
|
||||||
"published-on": "Veröffentlicht am {{time}} •",
|
|
||||||
"version": "v{{version}}",
|
|
||||||
"visit-home-page": "Zur Homepage",
|
|
||||||
"homepage": "Homepage",
|
|
||||||
"open-an-issue": "Einen Fehler melden",
|
|
||||||
"bugs": "Fehler",
|
|
||||||
"download": "{{what}} herunterladen",
|
|
||||||
"the-tar-file": "die tar-Datei",
|
|
||||||
"tarball": "Archiv (Tarball)"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"has-no-dependencies": "{{package}} hat keine Abhängigkeiten",
|
|
||||||
"dependency-block": "{{package}}@{{version}}"
|
|
||||||
},
|
|
||||||
"form": {
|
|
||||||
"username": "Benutzername",
|
|
||||||
"password": "Passwort"
|
|
||||||
},
|
|
||||||
"form-placeholder": {
|
|
||||||
"username": "Dein Benutzername",
|
|
||||||
"password": "Dein sicheres Passwort"
|
|
||||||
},
|
|
||||||
"form-validation": {
|
|
||||||
"required-field": "Dieses Feld ist erforderlich",
|
|
||||||
"required-min-length": "Dieses Feld erfordert eine Mindestlänge von {{length}}",
|
|
||||||
"unable-to-sign-in": "Anmeldung nicht möglich",
|
|
||||||
"username-or-password-cant-be-empty": "Benutzername und Passwort dürfen nicht leer sein!"
|
|
||||||
},
|
|
||||||
"help": {
|
|
||||||
"title": "Noch kein Paket publiziert.",
|
|
||||||
"sub-title": "Um dein erstes Paket einfach zu publizieren:",
|
|
||||||
"first-step": "1. Einloggen",
|
|
||||||
"first-step-command-line": "npm adduser --registry {{registryUrl}}",
|
|
||||||
"second-step": "2. Publizieren",
|
|
||||||
"second-step-command-line": "npm publish --registry {{registryUrl}}",
|
|
||||||
"third-step": "3. Diese Seite aktualisieren."
|
|
||||||
},
|
|
||||||
"sidebar": {
|
|
||||||
"detail": {
|
|
||||||
"latest-version": "Letzte v{{version}}",
|
|
||||||
"version": "v{{version}}"
|
|
||||||
},
|
|
||||||
"installation": {
|
|
||||||
"title": "Installierung",
|
|
||||||
"install-using-yarn": "Mit yarn installieren",
|
|
||||||
"install-using-yarn-command": "yarn add {{packageName}}",
|
|
||||||
"install-using-npm": "Mit npm installieren",
|
|
||||||
"install-using-npm-command": "npm install {{packageName}}",
|
|
||||||
"install-using-pnpm": "Mit pnpm installieren",
|
|
||||||
"install-using-pnpm-command": "pnpm install {{packageName}}"
|
|
||||||
},
|
|
||||||
"repository": {
|
|
||||||
"title": "Repository"
|
|
||||||
},
|
|
||||||
"author": {
|
|
||||||
"title": "Autor(in)"
|
|
||||||
},
|
|
||||||
"distribution": {
|
|
||||||
"title": "Neueste Distribution",
|
|
||||||
"license": "Lizenz",
|
|
||||||
"size": "Größe",
|
|
||||||
"file-count": "Anzahl der Dateien"
|
|
||||||
},
|
|
||||||
"maintainers": {
|
|
||||||
"title": "Maintainer"
|
|
||||||
},
|
|
||||||
"contributors": {
|
|
||||||
"title": "Contributor"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"npm-version": "NPM Version",
|
|
||||||
"node-js": "NODE JS"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"footer": {
|
|
||||||
"powered-by": "Unterstützt von",
|
|
||||||
"made-with-love-on": "Gemacht mit <0>♥</0> in"
|
|
||||||
},
|
|
||||||
"button": {
|
|
||||||
"close": "Schließen",
|
|
||||||
"cancel": "Abbrechen",
|
|
||||||
"login": "Einloggen",
|
|
||||||
"logout": "Ausloggen",
|
|
||||||
"go-to-the-home-page": "Zur Homepage",
|
|
||||||
"learn-more": "Mehr erfahren",
|
|
||||||
"fund-this-package": "Dieses Paket <0>finanzieren</0>"
|
|
||||||
},
|
|
||||||
"error": {
|
|
||||||
"unspecific": "Etwas ist schief gelaufen.",
|
|
||||||
"404": {
|
|
||||||
"page-not-found": "404 - Seite nicht gefunden",
|
|
||||||
"sorry-we-could-not-find-it": "Entschuldigung, wir konnten es nicht finden..."
|
|
||||||
},
|
|
||||||
"app-context-not-correct-used": "Der App-Kontext wurde nicht korrekt verwendet",
|
|
||||||
"theme-context-not-correct-used": "Der Theme-Kontext wurde nicht korrekt verwendet",
|
|
||||||
"package-meta-is-required-at-detail-context": "packageMeta wird bei DetailContext benötigt"
|
|
||||||
},
|
|
||||||
"lng": {
|
|
||||||
"english": "Englisch",
|
|
||||||
"japanese": "Japanisch",
|
|
||||||
"portuguese": "Portugiesisch",
|
|
||||||
"spanish": "Spanisch",
|
|
||||||
"german": "Deutsch",
|
|
||||||
"chinese": "Chinesisch",
|
|
||||||
"french": "Französisch",
|
|
||||||
"ukraine": "Ukrainisch",
|
|
||||||
"khmer": "Khmer"
|
|
||||||
},
|
|
||||||
"help-to-translate": "Hilfe beim Übersetzen",
|
|
||||||
"change-language": "Sprache ändern"
|
|
||||||
}
|
|
||||||
@ -1,152 +0,0 @@
|
|||||||
{
|
|
||||||
"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": "Registry 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 used correctly",
|
|
||||||
"theme-context-not-correct-used": "The theme context was not used correctly",
|
|
||||||
"package-meta-is-required-at-detail-context": "packageMeta is required at DetailContext"
|
|
||||||
},
|
|
||||||
"lng": {
|
|
||||||
"english": "English",
|
|
||||||
"japanese": "Japanese",
|
|
||||||
"portuguese": "Portuguese",
|
|
||||||
"spanish": "Spanish",
|
|
||||||
"german": "German",
|
|
||||||
"chinese": "Chinese",
|
|
||||||
"french": "French",
|
|
||||||
"ukraine": "Ukraine",
|
|
||||||
"khmer": "Khmer"
|
|
||||||
},
|
|
||||||
"help-to-translate": "Help to translate",
|
|
||||||
"change-language": "Change language"
|
|
||||||
}
|
|
||||||
@ -1,152 +0,0 @@
|
|||||||
{
|
|
||||||
"copy-to-clipboard": "Copiar al portapapeles",
|
|
||||||
"author-anonymous": "Anónimo",
|
|
||||||
"action-bar-action": {
|
|
||||||
"visit-home-page": "Visitar página principal",
|
|
||||||
"open-an-issue": "Reportar un error",
|
|
||||||
"download-tarball": "Descargar libreria"
|
|
||||||
},
|
|
||||||
"dialog": {
|
|
||||||
"registry-info": {
|
|
||||||
"title": "Información del Registro"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"header": {
|
|
||||||
"documentation": "Documentación",
|
|
||||||
"registry-info": "Información del Registro",
|
|
||||||
"greetings": "Hola "
|
|
||||||
},
|
|
||||||
"search": {
|
|
||||||
"packages": "Buscar paquetes"
|
|
||||||
},
|
|
||||||
"auto-complete": {
|
|
||||||
"loading": "Cargando...",
|
|
||||||
"no-results-found": "Sin resultados encontrados"
|
|
||||||
},
|
|
||||||
"tab": {
|
|
||||||
"uplinks": "Remoto",
|
|
||||||
"versions": "Versiones",
|
|
||||||
"dependencies": "Dependencias",
|
|
||||||
"readme": "Léeme"
|
|
||||||
},
|
|
||||||
"uplinks": {
|
|
||||||
"title": "Remoto",
|
|
||||||
"no-items": "{{name}} not tiene remotos."
|
|
||||||
},
|
|
||||||
"versions": {
|
|
||||||
"current-tags": "Etiquetas actuales",
|
|
||||||
"version-history": "Historial de versiones",
|
|
||||||
"not-available": "No disponible"
|
|
||||||
},
|
|
||||||
"package": {
|
|
||||||
"published-on": "Publicado en {{time}} •",
|
|
||||||
"version": "v{{version}}",
|
|
||||||
"visit-home-page": "Ir a la página principal",
|
|
||||||
"homepage": "Página pricinpal",
|
|
||||||
"open-an-issue": "Reportar un problema",
|
|
||||||
"bugs": "Errores",
|
|
||||||
"download": "Descargar {{what}}",
|
|
||||||
"the-tar-file": "el archivo tar",
|
|
||||||
"tarball": "Libreria"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"has-no-dependencies": "{{package}} no tiene dependencias.",
|
|
||||||
"dependency-block": "{{package}}@{{version}}"
|
|
||||||
},
|
|
||||||
"form": {
|
|
||||||
"username": "Usuario",
|
|
||||||
"password": "Contraseña"
|
|
||||||
},
|
|
||||||
"form-placeholder": {
|
|
||||||
"username": "Tu usuario",
|
|
||||||
"password": "Tu fuerte conntraseña"
|
|
||||||
},
|
|
||||||
"form-validation": {
|
|
||||||
"required-field": "Este campo es requerido",
|
|
||||||
"required-min-length": "Este campo es requerido y la mínima longitud es {{length}}",
|
|
||||||
"unable-to-sign-in": "No se ha podido iniciar sesión",
|
|
||||||
"username-or-password-cant-be-empty": "Nombre de usuario o contraseña no puede estar vacio!"
|
|
||||||
},
|
|
||||||
"help": {
|
|
||||||
"title": "Ningún paquete ha sido publicado aun.",
|
|
||||||
"sub-title": "Para publicar tu primer paquete:",
|
|
||||||
"first-step": "1. Inicia sesión",
|
|
||||||
"first-step-command-line": "npm adduser --registry {{registryUrl}}",
|
|
||||||
"second-step": "2. Publica",
|
|
||||||
"second-step-command-line": "npm publish --registry {{registryUrl}}",
|
|
||||||
"third-step": "3. Refresca la página."
|
|
||||||
},
|
|
||||||
"sidebar": {
|
|
||||||
"detail": {
|
|
||||||
"latest-version": "Última v{{version}}",
|
|
||||||
"version": "v{{version}}"
|
|
||||||
},
|
|
||||||
"installation": {
|
|
||||||
"title": "Instalación",
|
|
||||||
"install-using-yarn": "Instala usando yarn",
|
|
||||||
"install-using-yarn-command": "yarn add {{packageName}}",
|
|
||||||
"install-using-npm": "Instala usando npm",
|
|
||||||
"install-using-npm-command": "npm install {{packageName}}",
|
|
||||||
"install-using-pnpm": "Instala usando pnpm",
|
|
||||||
"install-using-pnpm-command": "pnpm install {{packageName}}"
|
|
||||||
},
|
|
||||||
"repository": {
|
|
||||||
"title": "Repositorio"
|
|
||||||
},
|
|
||||||
"author": {
|
|
||||||
"title": "Autor"
|
|
||||||
},
|
|
||||||
"distribution": {
|
|
||||||
"title": "Última distribución",
|
|
||||||
"license": "Licencia",
|
|
||||||
"size": "Tamaño",
|
|
||||||
"file-count": "archivo cuenta"
|
|
||||||
},
|
|
||||||
"maintainers": {
|
|
||||||
"title": "Mantenedores"
|
|
||||||
},
|
|
||||||
"contributors": {
|
|
||||||
"title": "Colaboradores"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"npm-version": "Version NPM",
|
|
||||||
"node-js": "NODE JS"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"footer": {
|
|
||||||
"powered-by": "Hecho con",
|
|
||||||
"made-with-love-on": "Hecho con <0>♥</0> on"
|
|
||||||
},
|
|
||||||
"button": {
|
|
||||||
"close": "Cerrar",
|
|
||||||
"cancel": "Cancelar",
|
|
||||||
"login": "Iniciar sesión",
|
|
||||||
"logout": "Cerrar sesión",
|
|
||||||
"go-to-the-home-page": "Ir a la página principal",
|
|
||||||
"learn-more": "Aprender más",
|
|
||||||
"fund-this-package": "<0>Donar</0> a este paquete"
|
|
||||||
},
|
|
||||||
"error": {
|
|
||||||
"unspecific": "Algo ha salido mal.",
|
|
||||||
"404": {
|
|
||||||
"page-not-found": "404 - Paquete no encontrado",
|
|
||||||
"sorry-we-could-not-find-it": "Lo siento, no hemos podido encontrarlo..."
|
|
||||||
},
|
|
||||||
"app-context-not-correct-used": "El contexto de la aplicación no fue correctamente usado",
|
|
||||||
"theme-context-not-correct-used": "El contexto del tema no fue correctamente usado",
|
|
||||||
"package-meta-is-required-at-detail-context": "packageMeta es requerido en DetailContext"
|
|
||||||
},
|
|
||||||
"lng": {
|
|
||||||
"english": "Inglés",
|
|
||||||
"japanese": "Japonés",
|
|
||||||
"portuguese": "Portugués",
|
|
||||||
"spanish": "Español",
|
|
||||||
"german": "Alemán",
|
|
||||||
"chinese": "Chino",
|
|
||||||
"french": "Francés",
|
|
||||||
"ukraine": "Ucraniano",
|
|
||||||
"khmer": "Khmer"
|
|
||||||
},
|
|
||||||
"help-to-translate": "Ayuda a traducir",
|
|
||||||
"change-language": "Cambiar idioma"
|
|
||||||
}
|
|
||||||
@ -1,152 +0,0 @@
|
|||||||
{
|
|
||||||
"copy-to-clipboard": "Copier dans le presse-papier",
|
|
||||||
"author-anonymous": "Anonyme",
|
|
||||||
"action-bar-action": {
|
|
||||||
"visit-home-page": "Visiter la page d'accueil",
|
|
||||||
"open-an-issue": "Ouvrir un ticket",
|
|
||||||
"download-tarball": "Télécharger l'archive"
|
|
||||||
},
|
|
||||||
"dialog": {
|
|
||||||
"registry-info": {
|
|
||||||
"title": "Informations du Registry"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"header": {
|
|
||||||
"documentation": "Documentation",
|
|
||||||
"registry-info": "Informations du Registry",
|
|
||||||
"greetings": "Bonjour "
|
|
||||||
},
|
|
||||||
"search": {
|
|
||||||
"packages": "Rechercher des paquets"
|
|
||||||
},
|
|
||||||
"auto-complete": {
|
|
||||||
"loading": "En cours de chargement...",
|
|
||||||
"no-results-found": "Aucun resultat trouvé"
|
|
||||||
},
|
|
||||||
"tab": {
|
|
||||||
"uplinks": "Uplinks",
|
|
||||||
"versions": "Versions",
|
|
||||||
"dependencies": "Dépendances",
|
|
||||||
"readme": "Readme"
|
|
||||||
},
|
|
||||||
"uplinks": {
|
|
||||||
"title": "Uplinks",
|
|
||||||
"no-items": "{{name}} n'a pas de uplink."
|
|
||||||
},
|
|
||||||
"versions": {
|
|
||||||
"current-tags": "Tags courants",
|
|
||||||
"version-history": "Historique de version",
|
|
||||||
"not-available": "Non disponible"
|
|
||||||
},
|
|
||||||
"package": {
|
|
||||||
"published-on": "Publié le {{time}} •",
|
|
||||||
"version": "v{{version}}",
|
|
||||||
"visit-home-page": "Visiter la page d'accueil",
|
|
||||||
"homepage": "Page d'accueil",
|
|
||||||
"open-an-issue": "Ouvrir un ticket",
|
|
||||||
"bugs": "Bugs",
|
|
||||||
"download": "Télécharger {{what}}",
|
|
||||||
"the-tar-file": "le fichier tar",
|
|
||||||
"tarball": "Archive"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"has-no-dependencies": "{{package}} n'a aucune dépendance.",
|
|
||||||
"dependency-block": "{{package}}@{{version}}"
|
|
||||||
},
|
|
||||||
"form": {
|
|
||||||
"username": "Nom d'utilisateur",
|
|
||||||
"password": "Mot de passe"
|
|
||||||
},
|
|
||||||
"form-placeholder": {
|
|
||||||
"username": "Votre nom d'utilisateur",
|
|
||||||
"password": "Votre mot de passe"
|
|
||||||
},
|
|
||||||
"form-validation": {
|
|
||||||
"required-field": "Ce champ est obligatoire",
|
|
||||||
"required-min-length": "Ce champ doit faire au moins {{length}} caractères",
|
|
||||||
"unable-to-sign-in": "Connexion impossible",
|
|
||||||
"username-or-password-cant-be-empty": "Le nom d'utilisateur ou mot de passe ne peut pas être vide!"
|
|
||||||
},
|
|
||||||
"help": {
|
|
||||||
"title": "Aucun paquet publié pour l'instant.",
|
|
||||||
"sub-title": "Pour publier votre premier paquet:",
|
|
||||||
"first-step": "1. Se connecter",
|
|
||||||
"first-step-command-line": "npm adduser --registry {{registryUrl}}",
|
|
||||||
"second-step": "2. Publier",
|
|
||||||
"second-step-command-line": "npm publish --registry {{registryUrl}}",
|
|
||||||
"third-step": "3. Recharger cette page."
|
|
||||||
},
|
|
||||||
"sidebar": {
|
|
||||||
"detail": {
|
|
||||||
"latest-version": "Dernière v{{version}}",
|
|
||||||
"version": "v{{version}}"
|
|
||||||
},
|
|
||||||
"installation": {
|
|
||||||
"title": "Installation",
|
|
||||||
"install-using-yarn": "Installer avec yarn",
|
|
||||||
"install-using-yarn-command": "yarn add {{packageName}}",
|
|
||||||
"install-using-npm": "Installer avec npm",
|
|
||||||
"install-using-npm-command": "npm install {{packageName}}",
|
|
||||||
"install-using-pnpm": "Installer avec pnpm",
|
|
||||||
"install-using-pnpm-command": "pnpm install {{packageName}}"
|
|
||||||
},
|
|
||||||
"repository": {
|
|
||||||
"title": "Dépôt"
|
|
||||||
},
|
|
||||||
"author": {
|
|
||||||
"title": "Auteur"
|
|
||||||
},
|
|
||||||
"distribution": {
|
|
||||||
"title": "Dernière distribution",
|
|
||||||
"license": "Licence",
|
|
||||||
"size": "Taille",
|
|
||||||
"file-count": "nombre de fichiers"
|
|
||||||
},
|
|
||||||
"maintainers": {
|
|
||||||
"title": "Mainteneurs"
|
|
||||||
},
|
|
||||||
"contributors": {
|
|
||||||
"title": "Contributeurs"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"npm-version": "Version NPM",
|
|
||||||
"node-js": "NODE JS"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"footer": {
|
|
||||||
"powered-by": "Propulsé par",
|
|
||||||
"made-with-love-on": "Fait avec <0>♥</0> sur"
|
|
||||||
},
|
|
||||||
"button": {
|
|
||||||
"close": "Fermer",
|
|
||||||
"cancel": "Annuler",
|
|
||||||
"login": "Se connecter",
|
|
||||||
"logout": "Se déconnecter",
|
|
||||||
"go-to-the-home-page": "Aller à la page d'accueil",
|
|
||||||
"learn-more": "En savoir plus",
|
|
||||||
"fund-this-package": "<0>Financer</0> ce paquet"
|
|
||||||
},
|
|
||||||
"error": {
|
|
||||||
"unspecific": "Quelque chose a mal tourné.",
|
|
||||||
"404": {
|
|
||||||
"page-not-found": "404 - Page non trouvée",
|
|
||||||
"sorry-we-could-not-find-it": "Desolé, nous n'avons rien retrouvé..."
|
|
||||||
},
|
|
||||||
"app-context-not-correct-used": "Le contexte de l'application n'a pas été utilisé correctement",
|
|
||||||
"theme-context-not-correct-used": "Le contexte du thème n'a pas été utilisé correctement",
|
|
||||||
"package-meta-is-required-at-detail-context": "packageMeta est obligatoire à DetailContext"
|
|
||||||
},
|
|
||||||
"lng": {
|
|
||||||
"english": "Anglais",
|
|
||||||
"japanese": "Japonais",
|
|
||||||
"portuguese": "Portugais",
|
|
||||||
"spanish": "Espagnol",
|
|
||||||
"german": "Allemand",
|
|
||||||
"chinese": "Chinois",
|
|
||||||
"french": "Français",
|
|
||||||
"ukraine": "Ukrainien",
|
|
||||||
"khmer": "Khmer"
|
|
||||||
},
|
|
||||||
"help-to-translate": "Aide à la traduction",
|
|
||||||
"change-language": "Changer la langue"
|
|
||||||
}
|
|
||||||
@ -1,152 +0,0 @@
|
|||||||
{
|
|
||||||
"copy-to-clipboard": "クリップボードにコピー",
|
|
||||||
"author-anonymous": "匿名",
|
|
||||||
"action-bar-action": {
|
|
||||||
"visit-home-page": "ホームページへ移動",
|
|
||||||
"open-an-issue": "課題を開く",
|
|
||||||
"download-tarball": "tar形式でダウンロード"
|
|
||||||
},
|
|
||||||
"dialog": {
|
|
||||||
"registry-info": {
|
|
||||||
"title": "レジストリの設定方法"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"header": {
|
|
||||||
"documentation": "ドキュメント",
|
|
||||||
"registry-info": "レジストリ情報",
|
|
||||||
"greetings": "こんにちは、"
|
|
||||||
},
|
|
||||||
"search": {
|
|
||||||
"packages": "パッケージを検索"
|
|
||||||
},
|
|
||||||
"auto-complete": {
|
|
||||||
"loading": "ロード中...",
|
|
||||||
"no-results-found": "パッケージが見つかりませんでした"
|
|
||||||
},
|
|
||||||
"tab": {
|
|
||||||
"uplinks": "アップリンク",
|
|
||||||
"versions": "バージョン情報",
|
|
||||||
"dependencies": "依存パッケージ",
|
|
||||||
"readme": "Readme"
|
|
||||||
},
|
|
||||||
"uplinks": {
|
|
||||||
"title": "アップリンク",
|
|
||||||
"no-items": "{{name}}にアップリンクはありません"
|
|
||||||
},
|
|
||||||
"versions": {
|
|
||||||
"current-tags": "タグ一覧",
|
|
||||||
"version-history": "バージョン履歴",
|
|
||||||
"not-available": "利用できません"
|
|
||||||
},
|
|
||||||
"package": {
|
|
||||||
"published-on": "{{time}}に更新されました •",
|
|
||||||
"version": "v{{version}}",
|
|
||||||
"visit-home-page": "ホームページへ移動",
|
|
||||||
"homepage": "ホームページ",
|
|
||||||
"open-an-issue": "課題を開く",
|
|
||||||
"bugs": "バグ",
|
|
||||||
"download": "{{what}}ダウンロード",
|
|
||||||
"the-tar-file": "tar形式のファイル",
|
|
||||||
"tarball": "tar形式でダウンロード"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"has-no-dependencies": "{{package}}に依存パッケージはありません",
|
|
||||||
"dependency-block": "{{package}}@{{version}}"
|
|
||||||
},
|
|
||||||
"form": {
|
|
||||||
"username": "ユーザ名",
|
|
||||||
"password": "パスワード"
|
|
||||||
},
|
|
||||||
"form-placeholder": {
|
|
||||||
"username": "あなたのユーザ名",
|
|
||||||
"password": "あなたのパスワード"
|
|
||||||
},
|
|
||||||
"form-validation": {
|
|
||||||
"required-field": "この項目は必ず入力して下さい",
|
|
||||||
"required-min-length": "この項目は{{length}}文字以上入力して下さい",
|
|
||||||
"unable-to-sign-in": "サインインできません",
|
|
||||||
"username-or-password-cant-be-empty": "ユーザ名とパスワードは空にできません"
|
|
||||||
},
|
|
||||||
"help": {
|
|
||||||
"title": "まだパッケージが登録されていません",
|
|
||||||
"sub-title": "以下の手順で最初のパッケージを登録しましょう",
|
|
||||||
"first-step": "1. ログイン",
|
|
||||||
"first-step-command-line": "npm adduser --registry {{registryUrl}}",
|
|
||||||
"second-step": "2. 登録",
|
|
||||||
"second-step-command-line": "npm publish --registry {{registryUrl}}",
|
|
||||||
"third-step": "3. このページを再読み込みして下さい"
|
|
||||||
},
|
|
||||||
"sidebar": {
|
|
||||||
"detail": {
|
|
||||||
"latest-version": "最新バージョンは{{version}}です",
|
|
||||||
"version": "v{{version}}"
|
|
||||||
},
|
|
||||||
"installation": {
|
|
||||||
"title": "インストール方法",
|
|
||||||
"install-using-yarn": "yarnでインストール",
|
|
||||||
"install-using-yarn-command": "yarn add {{packageName}}",
|
|
||||||
"install-using-npm": "npmでインストール",
|
|
||||||
"install-using-npm-command": "npm install {{packageName}}",
|
|
||||||
"install-using-pnpm": "pnpmでインストール",
|
|
||||||
"install-using-pnpm-command": "pnpm install {{packageName}}"
|
|
||||||
},
|
|
||||||
"repository": {
|
|
||||||
"title": "リポジトリ"
|
|
||||||
},
|
|
||||||
"author": {
|
|
||||||
"title": "作者"
|
|
||||||
},
|
|
||||||
"distribution": {
|
|
||||||
"title": "最新の配信内容",
|
|
||||||
"license": "ライセンス",
|
|
||||||
"size": "サイズ",
|
|
||||||
"file-count": "ファイル数"
|
|
||||||
},
|
|
||||||
"maintainers": {
|
|
||||||
"title": "パッケージメンテナ"
|
|
||||||
},
|
|
||||||
"contributors": {
|
|
||||||
"title": "コントリビューター"
|
|
||||||
},
|
|
||||||
"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": "閉じる",
|
|
||||||
"cancel": "キャンセル",
|
|
||||||
"login": "ログイン",
|
|
||||||
"logout": "ログアウト",
|
|
||||||
"go-to-the-home-page": "トップページに戻る",
|
|
||||||
"learn-more": "もっと知る",
|
|
||||||
"fund-this-package": "このパッケージに<0>投資</0>"
|
|
||||||
},
|
|
||||||
"error": {
|
|
||||||
"unspecific": "何か問題が発生したようです。",
|
|
||||||
"404": {
|
|
||||||
"page-not-found": "404 - Page not found",
|
|
||||||
"sorry-we-could-not-find-it": "残念ながら、ご指定のページはありませんでした…。"
|
|
||||||
},
|
|
||||||
"app-context-not-correct-used": "AppContextが正しく使用されませんでした",
|
|
||||||
"theme-context-not-correct-used": "ThemeContextが正しく使用されませんでした",
|
|
||||||
"package-meta-is-required-at-detail-context": "DetailContextではpackageMetaが必要です"
|
|
||||||
},
|
|
||||||
"lng": {
|
|
||||||
"english": "英語",
|
|
||||||
"japanese": "日本語",
|
|
||||||
"portuguese": "ポルトガル語",
|
|
||||||
"spanish": "スペイン語",
|
|
||||||
"german": "ドイツ語",
|
|
||||||
"chinese": "中国語",
|
|
||||||
"french": "フランス語",
|
|
||||||
"ukraine": "ウクライナ",
|
|
||||||
"khmer": "Khmer"
|
|
||||||
},
|
|
||||||
"help-to-translate": "翻訳を助ける",
|
|
||||||
"change-language": "言語を変更"
|
|
||||||
}
|
|
||||||
@ -1,152 +0,0 @@
|
|||||||
{
|
|
||||||
"copy-to-clipboard": "ចម្លងទៅក្ដារតម្បៀតខ្ទាស់",
|
|
||||||
"author-anonymous": "គ្មានអត្តសញ្ញាណ",
|
|
||||||
"action-bar-action": {
|
|
||||||
"visit-home-page": "ទស្សនាគេហទំព័រ",
|
|
||||||
"open-an-issue": "បើកកិច្ចការ",
|
|
||||||
"download-tarball": "ទាញយកកញ្ចប់ឯកសារ"
|
|
||||||
},
|
|
||||||
"dialog": {
|
|
||||||
"registry-info": {
|
|
||||||
"title": "ព័ត៌មានការចុះឈ្មោះ"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"header": {
|
|
||||||
"documentation": "ឯកសារ",
|
|
||||||
"registry-info": "ព័ត៌មានការចុះឈ្មោះ",
|
|
||||||
"greetings": "សួស្តី"
|
|
||||||
},
|
|
||||||
"search": {
|
|
||||||
"packages": "ស្វែងរកកញ្ចប់"
|
|
||||||
},
|
|
||||||
"auto-complete": {
|
|
||||||
"loading": "កំពុងផ្ទុក...",
|
|
||||||
"no-results-found": "រកមិនឃើញលទ្ធផល"
|
|
||||||
},
|
|
||||||
"tab": {
|
|
||||||
"uplinks": "ភ្ជាប់តំណទៅ",
|
|
||||||
"versions": "កំណែ",
|
|
||||||
"dependencies": "អាស្រ័យលើ",
|
|
||||||
"readme": "អានខ្ញុំជាមុនសិន"
|
|
||||||
},
|
|
||||||
"uplinks": {
|
|
||||||
"title": "ភ្ជាប់តំណទៅ",
|
|
||||||
"no-items": "{{name}} គ្មានភ្ជាប់តំណទៅ។"
|
|
||||||
},
|
|
||||||
"versions": {
|
|
||||||
"current-tags": "ស្លាកបច្ចុប្បន្ន",
|
|
||||||
"version-history": "ប្រវត្តិសាស្រ្តជំនាន់",
|
|
||||||
"not-available": "Not available"
|
|
||||||
},
|
|
||||||
"package": {
|
|
||||||
"published-on": "បោះពុម្ភផ្សាយ {{time}}។",
|
|
||||||
"version": "v{{version}}",
|
|
||||||
"visit-home-page": "ទស្សនាគេហទំព័រ",
|
|
||||||
"homepage": "គេហទំព័រ",
|
|
||||||
"open-an-issue": "បើកកិច្ចការ",
|
|
||||||
"bugs": "កំហុស",
|
|
||||||
"download": "ទាញយក {{what}}",
|
|
||||||
"the-tar-file": "ឯកសាជា tar",
|
|
||||||
"tarball": "ឯកសារ Tarball"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"has-no-dependencies": "{{package}} មិនមានភាពអាស្រ័យ។",
|
|
||||||
"dependency-block": "{{package}}@{{version}}"
|
|
||||||
},
|
|
||||||
"form": {
|
|
||||||
"username": "ឈ្មោះអ្នកប្រើប្រាស់",
|
|
||||||
"password": "ពាក្យសម្ងាត់"
|
|
||||||
},
|
|
||||||
"form-placeholder": {
|
|
||||||
"username": "ឈ្មោះអ្នកប្រើរបស់អ្នក",
|
|
||||||
"password": "ពាក្យសម្ងាត់ខ្លាំងរបស់អ្នក"
|
|
||||||
},
|
|
||||||
"form-validation": {
|
|
||||||
"required-field": "ចន្លោះនេះត្រូវតែំពេញ",
|
|
||||||
"required-min-length": "ប្រអប់នេះទាមទារប្រវែងអប្បបរមា {{length}}",
|
|
||||||
"unable-to-sign-in": "មិនអាចចូលបានទេ",
|
|
||||||
"username-or-password-cant-be-empty": "ឈ្មោះអ្នកប្រើឬពាក្យសម្ងាត់មិនអាចទទេ!"
|
|
||||||
},
|
|
||||||
"help": {
|
|
||||||
"title": "មិនទាន់មានការបោះពុម្ពផ្សាយកញ្ចប់នៅឡើយទេ។",
|
|
||||||
"sub-title": "ដើម្បីផ្សព្វផ្សាយកញ្ចប់ដំបូងរបស់អ្នកគ្រាន់តែ៖",
|
|
||||||
"first-step": "1. ចូល",
|
|
||||||
"first-step-command-line": "npm adduser --registry {{registryUrl}}",
|
|
||||||
"second-step": "2. ផ្សព្វផ្សាយ",
|
|
||||||
"second-step-command-line": "npm publish --registry {{registryUrl}}",
|
|
||||||
"third-step": "ផ្ទុកទំព័រនេះឡើងវិញ។"
|
|
||||||
},
|
|
||||||
"sidebar": {
|
|
||||||
"detail": {
|
|
||||||
"latest-version": "ចុងក្រោយ v{{version}}",
|
|
||||||
"version": "v{{version}}"
|
|
||||||
},
|
|
||||||
"installation": {
|
|
||||||
"title": "ការដំឡើង",
|
|
||||||
"install-using-yarn": "ដំឡើងដោយប្រើ yarn",
|
|
||||||
"install-using-yarn-command": "yarn add {{packageName}}",
|
|
||||||
"install-using-npm": "ដំឡើងដោយប្រើ npm",
|
|
||||||
"install-using-npm-command": "npm install {{packageName}}",
|
|
||||||
"install-using-pnpm": "ដំឡើងដោយប្រើ pnpm",
|
|
||||||
"install-using-pnpm-command": "pnpm install {{packageName}}"
|
|
||||||
},
|
|
||||||
"repository": {
|
|
||||||
"title": "ឃ្លាំង"
|
|
||||||
},
|
|
||||||
"author": {
|
|
||||||
"title": "អ្នកនិពន្ធ"
|
|
||||||
},
|
|
||||||
"distribution": {
|
|
||||||
"title": "ការចែកចាយចុងក្រោយ",
|
|
||||||
"license": "អាជ្ញាប័ណ្ណ",
|
|
||||||
"size": "ទំហំ",
|
|
||||||
"file-count": "រាប់ឯកសារ"
|
|
||||||
},
|
|
||||||
"maintainers": {
|
|
||||||
"title": "អ្នកថែរក្សា"
|
|
||||||
},
|
|
||||||
"contributors": {
|
|
||||||
"title": "អ្នកចូលរួមអភិវឌ្ឍ"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"npm-version": "NPM កំណែ",
|
|
||||||
"node-js": "NODE JS"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"footer": {
|
|
||||||
"powered-by": "ឧបត្ថម្ភដោយ",
|
|
||||||
"made-with-love-on": "ផលិតជាមួយ <0>♥</0> លើ"
|
|
||||||
},
|
|
||||||
"button": {
|
|
||||||
"close": "បិទ",
|
|
||||||
"cancel": "បោះបង់",
|
|
||||||
"login": "ចូល",
|
|
||||||
"logout": "ចាកចេញ",
|
|
||||||
"go-to-the-home-page": "ទៅទំព័រដើម",
|
|
||||||
"learn-more": "ស្វែងយល់បន្ថែម",
|
|
||||||
"fund-this-package": "<0>Fund</0> កញ្ចប់នេះ"
|
|
||||||
},
|
|
||||||
"error": {
|
|
||||||
"unspecific": "មានអ្វីមួយមិនប្រក្រតី។",
|
|
||||||
"404": {
|
|
||||||
"page-not-found": "៤០៤ - រកមិនឃើញទំព័រ",
|
|
||||||
"sorry-we-could-not-find-it": "សូមទោសយើងមិនអាចរកវាឃើញទេ..."
|
|
||||||
},
|
|
||||||
"app-context-not-correct-used": "បរិបទកម្មវិធីមិនត្រូវបានប្រើត្រឹមត្រូវទេ",
|
|
||||||
"theme-context-not-correct-used": "បរិបទទម្រង់មិនត្រូវបានប្រើត្រឹមត្រូវទេ",
|
|
||||||
"package-meta-is-required-at-detail-context": "packageMeta ត្រូវបានទាមទារនៅ DetailContext"
|
|
||||||
},
|
|
||||||
"lng": {
|
|
||||||
"english": "អង់គ្លេស",
|
|
||||||
"japanese": "ជប៉ុន",
|
|
||||||
"portuguese": "ព័រទុយហ្កាល់",
|
|
||||||
"spanish": "អេស្ប៉ាញ",
|
|
||||||
"german": "អាឡឺម៉ង់",
|
|
||||||
"chinese": "ចិន",
|
|
||||||
"french": "បារាំង",
|
|
||||||
"ukraine": "អ៊ុយក្រែន",
|
|
||||||
"khmer": "ខ្មែរ"
|
|
||||||
},
|
|
||||||
"help-to-translate": "ជួយបកប្រែ",
|
|
||||||
"change-language": "ប្ដូរភាសា"
|
|
||||||
}
|
|
||||||
@ -1,152 +0,0 @@
|
|||||||
{
|
|
||||||
"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": "Feito 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",
|
|
||||||
"theme-context-not-correct-used": "O contexto do tema não foi usado corretamente",
|
|
||||||
"package-meta-is-required-at-detail-context": "packageMeta é requerido em DetailContext"
|
|
||||||
},
|
|
||||||
"lng": {
|
|
||||||
"english": "Inglês",
|
|
||||||
"japanese": "Japonês",
|
|
||||||
"portuguese": "Português",
|
|
||||||
"spanish": "Espanhol",
|
|
||||||
"german": "Alemão",
|
|
||||||
"chinese": "Chinês",
|
|
||||||
"french": "Francês",
|
|
||||||
"ukraine": "Ucraniano",
|
|
||||||
"khmer": "Khmer"
|
|
||||||
},
|
|
||||||
"help-to-translate": "Ajude a traduzir",
|
|
||||||
"change-language": "Mudar idioma"
|
|
||||||
}
|
|
||||||
@ -1,152 +0,0 @@
|
|||||||
{
|
|
||||||
"copy-to-clipboard": "Копіювати в буфер обміну",
|
|
||||||
"author-anonymous": "Анонімний",
|
|
||||||
"action-bar-action": {
|
|
||||||
"visit-home-page": "Відвідати домашню сторінку",
|
|
||||||
"open-an-issue": "Відкрити питання, проблему, ...",
|
|
||||||
"download-tarball": "Завантажити архів"
|
|
||||||
},
|
|
||||||
"dialog": {
|
|
||||||
"registry-info": {
|
|
||||||
"title": "Інформація про реєстр"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"header": {
|
|
||||||
"documentation": "Документація",
|
|
||||||
"registry-info": "Інформація про реєстр",
|
|
||||||
"greetings": "Привіт "
|
|
||||||
},
|
|
||||||
"search": {
|
|
||||||
"packages": "Пошук пакетів"
|
|
||||||
},
|
|
||||||
"auto-complete": {
|
|
||||||
"loading": "Завантаження...",
|
|
||||||
"no-results-found": "Нічого не знайдено"
|
|
||||||
},
|
|
||||||
"tab": {
|
|
||||||
"uplinks": "Публікації",
|
|
||||||
"versions": "Версії",
|
|
||||||
"dependencies": "Залежності",
|
|
||||||
"readme": "Опис"
|
|
||||||
},
|
|
||||||
"uplinks": {
|
|
||||||
"title": "Публікації",
|
|
||||||
"no-items": "{{name}} не опубліковано."
|
|
||||||
},
|
|
||||||
"versions": {
|
|
||||||
"current-tags": "Поточні теги",
|
|
||||||
"version-history": "Історія версій",
|
|
||||||
"not-available": "Недоступний"
|
|
||||||
},
|
|
||||||
"package": {
|
|
||||||
"published-on": "Опубліковано {{time}} •",
|
|
||||||
"version": "v{{version}}",
|
|
||||||
"visit-home-page": "Відвідати домашню сторінку",
|
|
||||||
"homepage": "Домашня сторінка",
|
|
||||||
"open-an-issue": "Відкрити питання, проблему, ...",
|
|
||||||
"bugs": "Помилки",
|
|
||||||
"download": "Завантажити {{what}}",
|
|
||||||
"the-tar-file": "файл tar",
|
|
||||||
"tarball": "Завантажити"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"has-no-dependencies": "{{package}} не має залежностей.",
|
|
||||||
"dependency-block": "{{package}}@{{version}}"
|
|
||||||
},
|
|
||||||
"form": {
|
|
||||||
"username": "Ім'я користувача",
|
|
||||||
"password": "Пароль"
|
|
||||||
},
|
|
||||||
"form-placeholder": {
|
|
||||||
"username": "Ваше ім'я користувача",
|
|
||||||
"password": "Ваш надійний пароль"
|
|
||||||
},
|
|
||||||
"form-validation": {
|
|
||||||
"required-field": "Це поле є обов'язковим",
|
|
||||||
"required-min-length": "Для цього поля потрібна мінімальна довжина {{length}}",
|
|
||||||
"unable-to-sign-in": "Неможливо ввійти",
|
|
||||||
"username-or-password-cant-be-empty": "Ім'я користувача або пароль не можуть бути порожніми !"
|
|
||||||
},
|
|
||||||
"help": {
|
|
||||||
"title": "Пакети ще не опубліковані",
|
|
||||||
"sub-title": "Опублікувати свій перший пакет просто:",
|
|
||||||
"first-step": "1. Підключіться",
|
|
||||||
"first-step-command-line": "npm adduser --registry {{registryUrl}}",
|
|
||||||
"second-step": "2. Опублікуйте",
|
|
||||||
"second-step-command-line": "npm publish --registry {{registryUrl}}",
|
|
||||||
"third-step": "3. Оновіть цю сторінку."
|
|
||||||
},
|
|
||||||
"sidebar": {
|
|
||||||
"detail": {
|
|
||||||
"latest-version": "Остання версія v{{version}}",
|
|
||||||
"version": "v{{version}}"
|
|
||||||
},
|
|
||||||
"installation": {
|
|
||||||
"title": "Встановлення",
|
|
||||||
"install-using-yarn": "Встановлення за допомогою yarn",
|
|
||||||
"install-using-yarn-command": "yarn add {{packageName}}",
|
|
||||||
"install-using-npm": "Встановлення за допомогою npm",
|
|
||||||
"install-using-npm-command": "npm install {{packageName}}",
|
|
||||||
"install-using-pnpm": "Встановлення за допомогою pnpm",
|
|
||||||
"install-using-pnpm-command": "pnpm install {{packageName}}"
|
|
||||||
},
|
|
||||||
"repository": {
|
|
||||||
"title": "Сховище"
|
|
||||||
},
|
|
||||||
"author": {
|
|
||||||
"title": "Автор"
|
|
||||||
},
|
|
||||||
"distribution": {
|
|
||||||
"title": "Умови поширення",
|
|
||||||
"license": "Ліцензія",
|
|
||||||
"size": "Розмір",
|
|
||||||
"file-count": "кількість файлів"
|
|
||||||
},
|
|
||||||
"maintainers": {
|
|
||||||
"title": "Технічне супроводження"
|
|
||||||
},
|
|
||||||
"contributors": {
|
|
||||||
"title": "Автори"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"npm-version": "NPM версія",
|
|
||||||
"node-js": "NODE JS"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"footer": {
|
|
||||||
"powered-by": "Працює на",
|
|
||||||
"made-with-love-on": "Зроблено з <0> ♥ </0> на"
|
|
||||||
},
|
|
||||||
"button": {
|
|
||||||
"close": "Закрити",
|
|
||||||
"cancel": "Скасувати",
|
|
||||||
"login": "Вхід",
|
|
||||||
"logout": "Вийти",
|
|
||||||
"go-to-the-home-page": "Перейдіть на головну сторінку",
|
|
||||||
"learn-more": "Вивчайте більше",
|
|
||||||
"fund-this-package": "<0>Фінансувати</0> цей пакет"
|
|
||||||
},
|
|
||||||
"error": {
|
|
||||||
"unspecific": "Щось пішло не так.",
|
|
||||||
"404": {
|
|
||||||
"page-not-found": "404 - Сторінку не знайдено",
|
|
||||||
"sorry-we-could-not-find-it": "На жаль, ми не змогли його знайти ..."
|
|
||||||
},
|
|
||||||
"app-context-not-correct-used": "Контекст програми не використовувався правильно",
|
|
||||||
"theme-context-not-correct-used": "Контекст теми використано неправильно",
|
|
||||||
"package-meta-is-required-at-detail-context": "packageMeta is required at DetailContext"
|
|
||||||
},
|
|
||||||
"lng": {
|
|
||||||
"english": "Англійська",
|
|
||||||
"japanese": "Японська",
|
|
||||||
"portuguese": "Португальська",
|
|
||||||
"spanish": "Іспанська",
|
|
||||||
"german": "Німецька",
|
|
||||||
"chinese": "Китайська",
|
|
||||||
"french": "Французька",
|
|
||||||
"ukraine": "Українська",
|
|
||||||
"khmer": "Khmer"
|
|
||||||
},
|
|
||||||
"help-to-translate": "Допоможіть перекласти",
|
|
||||||
"change-language": "Змінити мову"
|
|
||||||
}
|
|
||||||
@ -1,151 +0,0 @@
|
|||||||
{
|
|
||||||
"copy-to-clipboard": "复制到粘贴板",
|
|
||||||
"author-anonymous": "匿名",
|
|
||||||
"action-bar-action": {
|
|
||||||
"visit-home-page": "访问主页",
|
|
||||||
"open-an-issue": "提交问题",
|
|
||||||
"download-tarball": "下载 tarball"
|
|
||||||
},
|
|
||||||
"dialog": {
|
|
||||||
"registry-info": {
|
|
||||||
"title": "注册信息"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"header": {
|
|
||||||
"documentation": "文档",
|
|
||||||
"registry-info": "登记信息",
|
|
||||||
"greetings": "您好 "
|
|
||||||
},
|
|
||||||
"search": {
|
|
||||||
"packages": "查找Packages"
|
|
||||||
},
|
|
||||||
"auto-complete": {
|
|
||||||
"loading": "加载中...",
|
|
||||||
"no-results-found": "没有找到结果"
|
|
||||||
},
|
|
||||||
"tab": {
|
|
||||||
"uplinks": "Uplinks",
|
|
||||||
"versions": "版本",
|
|
||||||
"dependencies": "依赖",
|
|
||||||
"readme": "Readme"
|
|
||||||
},
|
|
||||||
"uplinks": {
|
|
||||||
"title": "Uplinks",
|
|
||||||
"no-items": "{{name}} has no uplinks."
|
|
||||||
},
|
|
||||||
"versions": {
|
|
||||||
"current-tags": "当前标签",
|
|
||||||
"version-history": "历史版本",
|
|
||||||
"not-available": "不可用"
|
|
||||||
},
|
|
||||||
"package": {
|
|
||||||
"published-on": "发表于 {{time}} •",
|
|
||||||
"version": "v{{version}}",
|
|
||||||
"visit-home-page": "访问主页",
|
|
||||||
"homepage": "主页",
|
|
||||||
"open-an-issue": "提交问题",
|
|
||||||
"bugs": "Bugs",
|
|
||||||
"download": "下载 {{what}}",
|
|
||||||
"the-tar-file": "tar 文件",
|
|
||||||
"tarball": "Tarball"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"has-no-dependencies": "{{package}} 没有依赖包.",
|
|
||||||
"dependency-block": "{{package}}@{{version}}"
|
|
||||||
},
|
|
||||||
"form": {
|
|
||||||
"username": "用户名",
|
|
||||||
"password": "密码"
|
|
||||||
},
|
|
||||||
"form-placeholder": {
|
|
||||||
"username": "您的用户名",
|
|
||||||
"password": "您的密码"
|
|
||||||
},
|
|
||||||
"form-validation": {
|
|
||||||
"required-field": "必填项",
|
|
||||||
"required-min-length": "长度不能小于{{length}}",
|
|
||||||
"unable-to-sign-in": "登录失败",
|
|
||||||
"username-or-password-cant-be-empty": "用户名或密码不能为空!"
|
|
||||||
},
|
|
||||||
"help": {
|
|
||||||
"title": "还没有发布任何NPM包.",
|
|
||||||
"sub-title": "发布第一个NPM包:",
|
|
||||||
"first-step": "1. 登录",
|
|
||||||
"first-step-command-line": "npm adduser --registry {{registryUrl}}",
|
|
||||||
"second-step": "2. 发布",
|
|
||||||
"second-step-command-line": "npm publish --registry {{registryUrl}}",
|
|
||||||
"third-step": "3. 刷新当前页面."
|
|
||||||
},
|
|
||||||
"sidebar": {
|
|
||||||
"detail": {
|
|
||||||
"latest-version": "最新版本 v{{version}}",
|
|
||||||
"version": "v{{version}}"
|
|
||||||
},
|
|
||||||
"installation": {
|
|
||||||
"title": "安装",
|
|
||||||
"install-using-yarn": "使用yarn安装",
|
|
||||||
"install-using-yarn-command": "yarn add {{packageName}}",
|
|
||||||
"install-using-npm": "使用npm安装",
|
|
||||||
"install-using-npm-command": "npm install {{packageName}}",
|
|
||||||
"install-using-pnpm": "使用pnpm安装",
|
|
||||||
"install-using-pnpm-command": "pnpm install {{packageName}}"
|
|
||||||
},
|
|
||||||
"repository": {
|
|
||||||
"title": "库"
|
|
||||||
},
|
|
||||||
"author": {
|
|
||||||
"title": "作者"
|
|
||||||
},
|
|
||||||
"distribution": {
|
|
||||||
"title": "最后发布",
|
|
||||||
"license": "License",
|
|
||||||
"size": "大小",
|
|
||||||
"file-count": "文件数量"
|
|
||||||
},
|
|
||||||
"maintainers": {
|
|
||||||
"title": "维护人"
|
|
||||||
},
|
|
||||||
"contributors": {
|
|
||||||
"title": "贡献者"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"npm-version": "NPM版本",
|
|
||||||
"node-js": "NODE JS"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"footer": {
|
|
||||||
"powered-by": "Powered by",
|
|
||||||
"made-with-love-on": "Made with <0>♥</0> on"
|
|
||||||
},
|
|
||||||
"button": {
|
|
||||||
"close": "关闭",
|
|
||||||
"cancel": "取消",
|
|
||||||
"login": "登录",
|
|
||||||
"logout": "注销",
|
|
||||||
"go-to-the-home-page": "跳转到主页",
|
|
||||||
"learn-more": "了解更多",
|
|
||||||
"fund-this-package": "<0>Fund</0> this package"
|
|
||||||
},
|
|
||||||
"error": {
|
|
||||||
"unspecific": "发生错误.",
|
|
||||||
"404": {
|
|
||||||
"page-not-found": "404 - 页面不存在",
|
|
||||||
"sorry-we-could-not-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"
|
|
||||||
},
|
|
||||||
"lng": {
|
|
||||||
"english": "英语",
|
|
||||||
"japanese": "日语",
|
|
||||||
"portuguese": "葡萄牙语",
|
|
||||||
"spanish": "西班牙语",
|
|
||||||
"german": "德语",
|
|
||||||
"chinese": "中文",
|
|
||||||
"french": "法语",
|
|
||||||
"ukraine": "烏克蘭",
|
|
||||||
"khmer": "Khmer"
|
|
||||||
},
|
|
||||||
"help-to-translate": "幫助翻译",
|
|
||||||
"change-language": "改变语言"
|
|
||||||
}
|
|
||||||
16
package.json
16
package.json
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@verdaccio/ui-theme",
|
"name": "@verdaccio/ui-theme",
|
||||||
"version": "1.7.1",
|
"version": "0.3.13",
|
||||||
"description": "Verdaccio User Interface",
|
"description": "Verdaccio User Interface",
|
||||||
"author": {
|
"author": {
|
||||||
"name": "Verdaccio Core Team",
|
"name": "Verdaccio Core Team",
|
||||||
@ -15,7 +15,7 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/plugin-proposal-nullish-coalescing-operator": "7.8.0",
|
"@babel/plugin-proposal-nullish-coalescing-operator": "7.8.0",
|
||||||
"@babel/plugin-proposal-optional-chaining": "7.8.0",
|
"@babel/plugin-proposal-optional-chaining": "7.8.0",
|
||||||
"@commitlint/cli": "8.3.5",
|
"@commitlint/cli": "8.3.4",
|
||||||
"@commitlint/config-conventional": "8.3.4",
|
"@commitlint/config-conventional": "8.3.4",
|
||||||
"@emotion/core": "10.0.22",
|
"@emotion/core": "10.0.22",
|
||||||
"@emotion/styled": "10.0.23",
|
"@emotion/styled": "10.0.23",
|
||||||
@ -26,7 +26,7 @@
|
|||||||
"@testing-library/react": "9.4.0",
|
"@testing-library/react": "9.4.0",
|
||||||
"@types/autosuggest-highlight": "3.1.0",
|
"@types/autosuggest-highlight": "3.1.0",
|
||||||
"@types/enzyme": "3.10.4",
|
"@types/enzyme": "3.10.4",
|
||||||
"@types/jest": "25.1.4",
|
"@types/jest": "24.0.24",
|
||||||
"@types/js-base64": "2.3.1",
|
"@types/js-base64": "2.3.1",
|
||||||
"@types/lodash": "4.14.149",
|
"@types/lodash": "4.14.149",
|
||||||
"@types/node": "13.1.6",
|
"@types/node": "13.1.6",
|
||||||
@ -71,9 +71,8 @@
|
|||||||
"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.1",
|
"in-publish": "2.0.0",
|
||||||
"jest": "24.9.0",
|
"jest": "24.9.0",
|
||||||
"jest-emotion": "10.0.27",
|
"jest-emotion": "10.0.27",
|
||||||
"jest-environment-jsdom": "24.9.0",
|
"jest-environment-jsdom": "24.9.0",
|
||||||
@ -97,10 +96,9 @@
|
|||||||
"puppeteer": "2.0.0",
|
"puppeteer": "2.0.0",
|
||||||
"react": "16.12.0",
|
"react": "16.12.0",
|
||||||
"react-autosuggest": "9.4.3",
|
"react-autosuggest": "9.4.3",
|
||||||
"react-dom": "16.13.0",
|
"react-dom": "16.12.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",
|
||||||
@ -140,11 +138,11 @@
|
|||||||
"bundlesize": [
|
"bundlesize": [
|
||||||
{
|
{
|
||||||
"path": "./static/vendors.*.js",
|
"path": "./static/vendors.*.js",
|
||||||
"maxSize": "210 kB"
|
"maxSize": "185 kB"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "./static/main.*.js",
|
"path": "./static/main.*.js",
|
||||||
"maxSize": "35 kB"
|
"maxSize": "30 kB"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "./static/[0-9].*.{js,css}",
|
"path": "./static/[0-9].*.{js,css}",
|
||||||
|
|||||||
@ -4976,12 +4976,8 @@
|
|||||||
"_attachments": {
|
"_attachments": {
|
||||||
"jquery-1.5.1.tgz": {
|
"jquery-1.5.1.tgz": {
|
||||||
"shasum": "2ae2d661e906c1a01e044a71bb5b2743942183e5"
|
"shasum": "2ae2d661e906c1a01e044a71bb5b2743942183e5"
|
||||||
},
|
|
||||||
"jquery-3.3.1.tgz": {
|
|
||||||
"shasum": "958ce29e81c9790f31be7792df5d4d95fc57fbca"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"_rev": "61-e6be890a78963127",
|
"_rev": "60-fed4915c27b9c1e6",
|
||||||
"readme": "# jQuery\n\n> jQuery is a fast, small, and feature-rich JavaScript library.\n\nFor information on how to get started and how to use jQuery, please see [jQuery's documentation](http://api.jquery.com/).\nFor source files and issues, please visit the [jQuery repo](https://github.com/jquery/jquery).\n\nIf upgrading, please see the [blog post for 3.3.1](https://blog.jquery.com/2017/03/20/jquery-3.3.1-now-available/). This includes notable differences from the previous version and a more readable changelog.\n\n## Including jQuery\n\nBelow are some of the most common ways to include jQuery.\n\n### Browser\n\n#### Script tag\n\n```html\n<script src=\"https://code.jquery.com/jquery-3.3.1.min.js\"></script>\n```\n\n#### Babel\n\n[Babel](http://babeljs.io/) is a next generation JavaScript compiler. One of the features is the ability to use ES6/ES2015 modules now, even though browsers do not yet support this feature natively.\n\n```js\nimport $ from \"jquery\";\n```\n\n#### Browserify/Webpack\n\nThere are several ways to use [Browserify](http://browserify.org/) and [Webpack](https://webpack.github.io/). For more information on using these tools, please refer to the corresponding project's documention. In the script, including jQuery will usually look like this...\n\n```js\nvar $ = require(\"jquery\");\n```\n\n#### AMD (Asynchronous Module Definition)\n\nAMD is a module format built for the browser. For more information, we recommend [require.js' documentation](http://requirejs.org/docs/whyamd.html).\n\n```js\ndefine([\"jquery\"], function($) {\n\n});\n```\n\n### Node\n\nTo include jQuery in [Node](nodejs.org), first install with npm.\n\n```sh\nnpm install jquery\n```\n\nFor jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as [jsdom](https://github.com/tmpvar/jsdom). This can be useful for testing purposes.\n\n```js\nrequire(\"jsdom\").env(\"\", function(err, window) {\n\tif (err) {\n\t\tconsole.error(err);\n\t\treturn;\n\t}\n\n\tvar $ = require(\"jquery\")(window);\n});\n```",
|
"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"
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -17,7 +17,7 @@ getStdin()
|
|||||||
repo: repoName,
|
repo: repoName,
|
||||||
tag_name: tag,
|
tag_name: tag,
|
||||||
body: changelog,
|
body: changelog,
|
||||||
draft: false,
|
draft: true,
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
|
|||||||
@ -1,25 +1,21 @@
|
|||||||
/* eslint-disable react/jsx-max-depth */
|
import React, { useState, useEffect } from 'react';
|
||||||
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 loadDayJSLocale from '../design-tokens/load-dayjs-locale';
|
|
||||||
|
|
||||||
import AppContextProvider from './AppContextProvider';
|
import AppContextProvider from './AppContextProvider';
|
||||||
import AppRoute, { history } from './AppRoute';
|
import AppRoute, { history } from './AppRoute';
|
||||||
|
|
||||||
const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
|
const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
|
||||||
backgroundColor: theme?.palette.background.default,
|
backgroundColor: theme && theme.palette.backgroundBody,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
|
const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
|
||||||
@ -35,6 +31,7 @@ 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 />
|
||||||
@ -60,11 +57,10 @@ 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%">
|
||||||
<>
|
<>
|
||||||
@ -72,6 +68,7 @@ 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>
|
||||||
@ -79,7 +76,7 @@ const App: React.FC = () => {
|
|||||||
<Footer />
|
<Footer />
|
||||||
</>
|
</>
|
||||||
</StyledBox>
|
</StyledBox>
|
||||||
</Suspense>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
import React, { lazy, useContext } from 'react';
|
import React, { lazy, useContext, Suspense } 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';
|
||||||
|
|
||||||
@ -24,10 +25,9 @@ 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(t('app-context-not-correct-used'));
|
throw Error('The app Context was not correct used');
|
||||||
}
|
}
|
||||||
|
|
||||||
const { user } = appContext;
|
const { user } = appContext;
|
||||||
@ -36,6 +36,7 @@ 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} />
|
||||||
@ -64,6 +65,7 @@ const AppRoute: React.FC = () => {
|
|||||||
<NotFound />
|
<NotFound />
|
||||||
</ReactRouterDomRoute>
|
</ReactRouterDomRoute>
|
||||||
</Switch>
|
</Switch>
|
||||||
|
</Suspense>
|
||||||
</Router>
|
</Router>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -3,7 +3,6 @@ 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';
|
||||||
@ -12,14 +11,10 @@ import { Theme } from '../../design-tokens/theme';
|
|||||||
|
|
||||||
import downloadTarball from './download-tarball';
|
import downloadTarball from './download-tarball';
|
||||||
|
|
||||||
export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(({ theme }) => ({
|
export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({
|
||||||
backgroundColor: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
|
backgroundColor: props.theme && props.theme.palette.primary.main,
|
||||||
color: theme?.palette.white,
|
color: props.theme && props.theme.palette.white,
|
||||||
marginRight: 10,
|
marginRight: 10,
|
||||||
':hover': {
|
|
||||||
color: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
|
|
||||||
background: theme?.palette.white,
|
|
||||||
},
|
|
||||||
}));
|
}));
|
||||||
|
|
||||||
type ActionType = 'VISIT_HOMEPAGE' | 'OPEN_AN_ISSUE' | 'DOWNLOAD_TARBALL';
|
type ActionType = 'VISIT_HOMEPAGE' | 'OPEN_AN_ISSUE' | 'DOWNLOAD_TARBALL';
|
||||||
@ -31,11 +26,10 @@ 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={t('action-bar-action.visit-home-page')}>
|
<Tooltip title="Visit homepage">
|
||||||
<Link external={true} to={link}>
|
<Link external={true} to={link}>
|
||||||
<Fab size="small">
|
<Fab size="small">
|
||||||
<HomeIcon />
|
<HomeIcon />
|
||||||
@ -45,7 +39,7 @@ const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
|
|||||||
);
|
);
|
||||||
case 'OPEN_AN_ISSUE':
|
case 'OPEN_AN_ISSUE':
|
||||||
return (
|
return (
|
||||||
<Tooltip title={t('action-bar-action.open-an-issue')}>
|
<Tooltip title="Open an issue">
|
||||||
<Link external={true} to={link}>
|
<Link external={true} to={link}>
|
||||||
<Fab size="small">
|
<Fab size="small">
|
||||||
<BugReportIcon />
|
<BugReportIcon />
|
||||||
@ -55,7 +49,7 @@ const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
|
|||||||
);
|
);
|
||||||
case 'DOWNLOAD_TARBALL':
|
case 'DOWNLOAD_TARBALL':
|
||||||
return (
|
return (
|
||||||
<Tooltip title={t('action-bar-action.download-tarball')}>
|
<Tooltip title="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>
|
||||||
|
|||||||
@ -7,11 +7,6 @@ exports[`<ActionBar /> component should render the component in default state 1`
|
|||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-0:hover {
|
|
||||||
color: #4b5e40;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="MuiBox-root MuiBox-root-2"
|
class="MuiBox-root MuiBox-root-2"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -1,17 +1,14 @@
|
|||||||
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;
|
||||||
@ -28,7 +25,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'}>{t('sidebar.author.title')}</StyledText>}>
|
<List subheader={<StyledText variant={'subtitle1'}>{'Author'}</StyledText>}>
|
||||||
<AuthorListItem button={true}>
|
<AuthorListItem button={true}>
|
||||||
{!email || !isEmail(email) ? (
|
{!email || !isEmail(email) ? (
|
||||||
avatarComponent
|
avatarComponent
|
||||||
@ -37,7 +34,8 @@ 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-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 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 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>"`;
|
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>"`;
|
||||||
|
|||||||
@ -7,6 +7,7 @@ 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,7 +3,6 @@ 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';
|
||||||
@ -84,6 +83,12 @@ 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,
|
||||||
@ -101,8 +106,6 @@ const AutoComplete = memo(
|
|||||||
suggestionsLoaded = false,
|
suggestionsLoaded = false,
|
||||||
suggestionsError = false,
|
suggestionsError = false,
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
const autosuggestProps = {
|
const autosuggestProps = {
|
||||||
renderInputComponent,
|
renderInputComponent,
|
||||||
suggestions,
|
suggestions,
|
||||||
@ -127,9 +130,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(t('auto-complete.no-results-found'))}
|
{suggestionsLoaded && children === null && query && renderMessage(SUGGESTIONS_RESPONSE.NO_RESULT)}
|
||||||
{suggestionsLoading && query && renderMessage(t('auto-complete.loading'))}
|
{suggestionsLoading && query && renderMessage(SUGGESTIONS_RESPONSE.LOADING)}
|
||||||
{suggestionsError && renderMessage(t('error.unspecific'))}
|
{suggestionsError && renderMessage(SUGGESTIONS_RESPONSE.FAILURE)}
|
||||||
{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,16 +20,19 @@ const renderText = (text: string, children: React.ReactNode): JSX.Element => {
|
|||||||
return <ClipBoardCopyText>{text}</ClipBoardCopyText>;
|
return <ClipBoardCopyText>{text}</ClipBoardCopyText>;
|
||||||
};
|
};
|
||||||
|
|
||||||
const CopyToClipBoard: React.FC<Props> = ({ text, children }) => {
|
const renderToolTipFileCopy = (text: string): React.ReactElement<HTMLElement> => (
|
||||||
const { t } = useTranslation();
|
<Tooltip disableFocusListener={true} title={TEXT.CLIPBOARD_COPY}>
|
||||||
return (
|
|
||||||
<ClipBoardCopy>
|
|
||||||
{renderText(text, children)}
|
|
||||||
<Tooltip disableFocusListener={true} title={t('copy-to-clipboard')}>
|
|
||||||
<CopyIcon onClick={copyToClipBoardUtility(text)}>
|
<CopyIcon onClick={copyToClipBoardUtility(text)}>
|
||||||
<FileCopy />
|
<FileCopy />
|
||||||
</CopyIcon>
|
</CopyIcon>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
);
|
||||||
|
|
||||||
|
const CopyToClipBoard: React.FC<Props> = ({ text, children }) => {
|
||||||
|
return (
|
||||||
|
<ClipBoardCopy>
|
||||||
|
{renderText(text, children)}
|
||||||
|
{renderToolTipFileCopy(text)}
|
||||||
</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,6 +1,5 @@
|
|||||||
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';
|
||||||
@ -17,7 +16,6 @@ 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);
|
||||||
|
|
||||||
@ -33,14 +31,8 @@ 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]) => (
|
||||||
<Tag
|
|
||||||
className={'dep-tag'}
|
|
||||||
clickable={true}
|
|
||||||
key={name}
|
|
||||||
label={t('dependencies.dependency-block', { package: name, version })}
|
|
||||||
// eslint-disable-next-line
|
// eslint-disable-next-line
|
||||||
onClick={() => handleClick(name)}
|
<Tag className={'dep-tag'} clickable={true} key={name} label={`${name}@${version}`} onClick={() => handleClick(name)} />
|
||||||
/>
|
|
||||||
))}
|
))}
|
||||||
</Tags>
|
</Tags>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
@ -54,10 +46,9 @@ 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(t('error.package-meta-is-required-at-detail-context'));
|
throw new Error('packageMeta is required at DetailContext');
|
||||||
}
|
}
|
||||||
|
|
||||||
const { latest } = packageMeta;
|
const { latest } = packageMeta;
|
||||||
@ -81,7 +72,7 @@ const Dependencies: React.FC<{}> = () => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return <NoItems className="no-dependencies" text={t('dependencies.has-no-dependencies', { package: name })} />;
|
return <NoItems className="no-dependencies" text={`${name} has no dependencies.`} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Dependencies;
|
export default Dependencies;
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React, { useState, useContext } from 'react';
|
import React, { useCallback, useState, ChangeEvent, useContext } from 'react';
|
||||||
|
|
||||||
import { DetailContext } from '../../pages/Version';
|
import { DetailContext } from '../../pages/Version';
|
||||||
import Box from '../../muiComponents/Box';
|
import Box from '../../muiComponents/Box';
|
||||||
@ -6,21 +6,29 @@ import Box from '../../muiComponents/Box';
|
|||||||
import DetailContainerTabs from './DetailContainerTabs';
|
import DetailContainerTabs from './DetailContainerTabs';
|
||||||
import DetailContainerContent from './DetailContainerContent';
|
import DetailContainerContent from './DetailContainerContent';
|
||||||
import { TabPosition } from './tabs';
|
import { TabPosition } from './tabs';
|
||||||
|
import { DetailTheme } from './styles';
|
||||||
|
|
||||||
const DetailContainer: React.FC = () => {
|
const DetailContainer: React.FC = () => {
|
||||||
const tabs = Object.values(TabPosition);
|
const [tabPosition, setTabPosition] = useState(TabPosition.README);
|
||||||
const [tabPosition, setTabPosition] = useState(0);
|
|
||||||
const detailContext = useContext(DetailContext);
|
const detailContext = useContext(DetailContext);
|
||||||
const { readMe } = detailContext;
|
const { readMe } = detailContext;
|
||||||
|
|
||||||
const handleChange = (event, newValue) => {
|
const handleChangeTabPosition = useCallback(
|
||||||
setTabPosition(newValue);
|
(event: ChangeEvent<{}>) => {
|
||||||
};
|
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">
|
||||||
<DetailContainerTabs onChange={handleChange} tabPosition={tabPosition} />
|
<DetailContainerTabs onChangeTabPosition={handleChangeTabPosition} tabPosition={tabPosition} />
|
||||||
<DetailContainerContent readDescription={readMe} tabPosition={tabs[tabPosition]} />
|
<DetailTheme>
|
||||||
|
<DetailContainerContent readDescription={readMe} tabPosition={tabPosition} />
|
||||||
|
</DetailTheme>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -2,15 +2,18 @@ import React from 'react';
|
|||||||
|
|
||||||
import { preventXSS } from '../../utils/sec-utils';
|
import { preventXSS } from '../../utils/sec-utils';
|
||||||
import Readme from '../Readme';
|
import Readme from '../Readme';
|
||||||
|
import { ReadmeSpacing } from './styles';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
description?: string;
|
description?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const DetailContainerContentReadme: React.FC<Props> = ({ description }) => {
|
const DetailContainerContentReadme: React.FC<Props> = ({ description }) => {
|
||||||
if (!description) return null;
|
if (!description) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
const encodedReadme = preventXSS(description);
|
const encodedReadme = preventXSS(description);
|
||||||
return <Readme description={encodedReadme} />;
|
return <ReadmeSpacing><Readme description={encodedReadme} /></ReadmeSpacing>;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default DetailContainerContentReadme;
|
export default DetailContainerContentReadme;
|
||||||
|
|||||||
@ -1,31 +1,44 @@
|
|||||||
import React from 'react';
|
import React, { ChangeEvent, useState, useEffect } 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 { Theme } from '../../design-tokens/theme';
|
|
||||||
|
import { TabPosition } from './tabs';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
onChange: (event, newValue) => void;
|
tabPosition: TabPosition;
|
||||||
tabPosition: number;
|
onChangeTabPosition: (event: ChangeEvent<{}>) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange }) => {
|
const Tabs = styled(MuiTabs)({
|
||||||
const { t } = useTranslation();
|
marginBottom: 16,
|
||||||
|
});
|
||||||
|
|
||||||
|
const getTabIndex = (tabPosition: TabPosition): number =>
|
||||||
|
Object.keys(TabPosition).findIndex(position => position === String(tabPosition).toUpperCase());
|
||||||
|
|
||||||
|
const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChangeTabPosition }) => {
|
||||||
|
const [tabPositionIndex, setTabPositionIndex] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const tabIndex = getTabIndex(tabPosition);
|
||||||
|
setTabPositionIndex(tabIndex);
|
||||||
|
}, [tabPosition]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tabs color={'primary'} indicatorColor={'primary'} onChange={onChange} value={tabPosition} variant={'fullWidth'}>
|
<Tabs
|
||||||
<Tab data-testid={'readme-tab'} id={'readme-tab'} label={t('tab.readme')} />
|
indicatorColor={'secondary'}
|
||||||
<Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={t('tab.dependencies')} />
|
onChange={onChangeTabPosition}
|
||||||
<Tab data-testid={'versions-tab'} id={'versions-tab'} label={t('tab.versions')} />
|
textColor={'secondary'}
|
||||||
<Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={t('tab.uplinks')} />
|
value={tabPositionIndex}
|
||||||
|
variant={'fullWidth'}>
|
||||||
|
<Tab data-testid={'readme-tab'} id={'readme-tab'} label={TabPosition.README} />
|
||||||
|
<Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={TabPosition.DEPENDENCIES} />
|
||||||
|
<Tab data-testid={'versions-tab'} id={'versions-tab'} label={TabPosition.VERSIONS} />
|
||||||
|
<Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={TabPosition.UPLINKS} />
|
||||||
</Tabs>
|
</Tabs>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default DetailContainerTabs;
|
export default DetailContainerTabs;
|
||||||
|
|
||||||
const Tabs = styled(MuiTabs)<{ theme?: Theme }>({
|
|
||||||
marginBottom: 16,
|
|
||||||
});
|
|
||||||
|
|||||||
@ -10,7 +10,6 @@ exports[`DetailContainer renders correctly 1`] = `
|
|||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="MuiTabs-root emotion-0 emotion-1"
|
class="MuiTabs-root emotion-0 emotion-1"
|
||||||
color="primary"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="MuiTabs-scroller MuiTabs-fixed"
|
class="MuiTabs-scroller MuiTabs-fixed"
|
||||||
@ -22,7 +21,7 @@ exports[`DetailContainer renders correctly 1`] = `
|
|||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
aria-selected="true"
|
aria-selected="true"
|
||||||
class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit Mui-selected MuiTab-fullWidth"
|
class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected MuiTab-fullWidth"
|
||||||
data-testid="readme-tab"
|
data-testid="readme-tab"
|
||||||
id="readme-tab"
|
id="readme-tab"
|
||||||
role="tab"
|
role="tab"
|
||||||
@ -40,7 +39,7 @@ exports[`DetailContainer renders correctly 1`] = `
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
aria-selected="false"
|
aria-selected="false"
|
||||||
class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-fullWidth"
|
class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth"
|
||||||
data-testid="dependencies-tab"
|
data-testid="dependencies-tab"
|
||||||
id="dependencies-tab"
|
id="dependencies-tab"
|
||||||
role="tab"
|
role="tab"
|
||||||
@ -58,7 +57,7 @@ exports[`DetailContainer renders correctly 1`] = `
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
aria-selected="false"
|
aria-selected="false"
|
||||||
class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-fullWidth"
|
class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth"
|
||||||
data-testid="versions-tab"
|
data-testid="versions-tab"
|
||||||
id="versions-tab"
|
id="versions-tab"
|
||||||
role="tab"
|
role="tab"
|
||||||
@ -76,7 +75,7 @@ exports[`DetailContainer renders correctly 1`] = `
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
aria-selected="false"
|
aria-selected="false"
|
||||||
class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-fullWidth"
|
class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth"
|
||||||
data-testid="uplinks-tab"
|
data-testid="uplinks-tab"
|
||||||
id="uplinks-tab"
|
id="uplinks-tab"
|
||||||
role="tab"
|
role="tab"
|
||||||
|
|||||||
11
src/components/DetailContainer/styles.ts
Normal file
11
src/components/DetailContainer/styles.ts
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import styled from '@emotion/styled';
|
||||||
|
|
||||||
|
import { Theme } from '../../design-tokens/theme';
|
||||||
|
|
||||||
|
export const DetailTheme = styled('div')<{ theme?: Theme }>(props => ({
|
||||||
|
backgroundColor: props?.theme?.palette.readmeBackgroundColor,
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const ReadmeSpacing = styled('div')<{ theme?: Theme }>(props => ({
|
||||||
|
padding: '20px',
|
||||||
|
}));
|
||||||
@ -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',
|
||||||
}
|
}
|
||||||
|
|||||||
@ -15,6 +15,10 @@ import { Theme } from '../../design-tokens/theme';
|
|||||||
import DetailSidebarTitle from './DetailSidebarTitle';
|
import DetailSidebarTitle from './DetailSidebarTitle';
|
||||||
import DetailSidebarFundButton from './DetailSidebarFundButton';
|
import DetailSidebarFundButton from './DetailSidebarFundButton';
|
||||||
|
|
||||||
|
const StyledPaper = styled(Paper)<{ theme?: Theme }>(({ theme }) => ({
|
||||||
|
padding: theme.spacing(3, 2),
|
||||||
|
}));
|
||||||
|
|
||||||
const DetailSidebar: React.FC = () => {
|
const DetailSidebar: React.FC = () => {
|
||||||
const detailContext = useContext(DetailContext);
|
const detailContext = useContext(DetailContext);
|
||||||
|
|
||||||
@ -46,7 +50,3 @@ const DetailSidebar: React.FC = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default DetailSidebar;
|
export default DetailSidebar;
|
||||||
|
|
||||||
const StyledPaper = styled(Paper)<{ theme?: Theme }>(({ theme }) => ({
|
|
||||||
padding: theme?.spacing(3, 2),
|
|
||||||
}));
|
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
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';
|
||||||
@ -9,6 +8,21 @@ import { isURL } from '../../utils/url';
|
|||||||
import { Theme } from '../../design-tokens/theme';
|
import { Theme } from '../../design-tokens/theme';
|
||||||
import { DetailContext } from '../../pages/Version';
|
import { DetailContext } from '../../pages/Version';
|
||||||
|
|
||||||
|
const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
|
||||||
|
marginTop: theme && theme.spacing(1),
|
||||||
|
marginBottom: theme && theme.spacing(1),
|
||||||
|
textDecoration: 'none',
|
||||||
|
display: 'block',
|
||||||
|
}));
|
||||||
|
|
||||||
|
const StyledFavoriteIcon = styled(Favorite)<{ theme?: Theme }>(({ theme }) => ({
|
||||||
|
color: theme && theme.palette.orange,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const StyledFundStrong = styled('strong')({
|
||||||
|
marginRight: 3,
|
||||||
|
});
|
||||||
|
|
||||||
/* eslint-disable react/jsx-no-bind */
|
/* eslint-disable react/jsx-no-bind */
|
||||||
const DetailSidebarFundButton: React.FC = () => {
|
const DetailSidebarFundButton: React.FC = () => {
|
||||||
const detailContext = useContext(DetailContext);
|
const detailContext = useContext(DetailContext);
|
||||||
@ -24,25 +38,11 @@ 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">
|
||||||
<Trans components={[<StyledFundStrong key="fund" />]} i18nKey="button.fund-this-package" />
|
<StyledFundStrong>{'Fund'}</StyledFundStrong>
|
||||||
|
{'this package'}
|
||||||
</Button>
|
</Button>
|
||||||
</StyledLink>
|
</StyledLink>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default DetailSidebarFundButton;
|
export default DetailSidebarFundButton;
|
||||||
|
|
||||||
const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
|
|
||||||
marginTop: theme?.spacing(1),
|
|
||||||
marginBottom: theme?.spacing(1),
|
|
||||||
textDecoration: 'none',
|
|
||||||
display: 'block',
|
|
||||||
}));
|
|
||||||
|
|
||||||
const StyledFavoriteIcon = styled(Favorite)<{ theme?: Theme }>(({ theme }) => ({
|
|
||||||
color: theme?.palette.orange,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const StyledFundStrong = styled('strong')({
|
|
||||||
marginRight: 3,
|
|
||||||
});
|
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
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';
|
||||||
@ -13,21 +12,6 @@ interface Props {
|
|||||||
isLatest: boolean;
|
isLatest: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const DetailSidebarTitle: React.FC<Props> = ({ description, packageName, version, isLatest }) => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
return (
|
|
||||||
<Box className={'detail-info'} display="flex" flexDirection="column" marginBottom="8px">
|
|
||||||
<StyledHeading>{packageName}</StyledHeading>
|
|
||||||
{description && <div>{description}</div>}
|
|
||||||
<StyledBoxVersion>
|
|
||||||
{isLatest ? t('sidebar.detail.latest-version', { version }) : t('sidebar.detail.version', { version })}
|
|
||||||
</StyledBoxVersion>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DetailSidebarTitle;
|
|
||||||
|
|
||||||
const StyledHeading = styled(Heading)({
|
const StyledHeading = styled(Heading)({
|
||||||
fontSize: '1rem',
|
fontSize: '1rem',
|
||||||
fontWeight: 700,
|
fontWeight: 700,
|
||||||
@ -36,3 +20,13 @@ const StyledHeading = styled(Heading)({
|
|||||||
const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
|
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 }) => (
|
||||||
|
<Box className={'detail-info'} display="flex" flexDirection="column" marginBottom="8px">
|
||||||
|
<StyledHeading>{packageName}</StyledHeading>
|
||||||
|
{description && <div>{description}</div>}
|
||||||
|
<StyledBoxVersion>{`${isLatest ? 'Latest v' : 'v'}${version}`}</StyledBoxVersion>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default DetailSidebarTitle;
|
||||||
|
|||||||
@ -3,8 +3,7 @@ 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, { Fab } from './Developers';
|
import Developers, { DeveloperType, Fab } from './Developers';
|
||||||
import { DeveloperType } from './types';
|
|
||||||
|
|
||||||
describe('test Developers', () => {
|
describe('test Developers', () => {
|
||||||
const packageMeta = {
|
const packageMeta = {
|
||||||
|
|||||||
@ -1,29 +1,38 @@
|
|||||||
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,
|
||||||
@ -34,10 +43,9 @@ 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(t('app-context-not-correct-used'));
|
throw Error("The app's detail Context was not correct used");
|
||||||
}
|
}
|
||||||
|
|
||||||
const developers = useMemo(() => getUniqueDeveloperValues(detailContext.packageMeta?.latest[type]), [
|
const developers = useMemo(() => getUniqueDeveloperValues(detailContext.packageMeta?.latest[type]), [
|
||||||
@ -61,7 +69,7 @@ const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<DevelopersTitle type={type} />
|
<StyledText variant={'subtitle1'}>{type}</StyledText>
|
||||||
<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}>
|
||||||
|
|||||||
@ -1,30 +0,0 @@
|
|||||||
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,6 +4,7 @@ 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 > * {
|
||||||
@ -13,9 +14,6 @@ exports[`test Developers should render the component for contributors with items
|
|||||||
<Developers
|
<Developers
|
||||||
type="contributors"
|
type="contributors"
|
||||||
>
|
>
|
||||||
<DevelopersTitle
|
|
||||||
type="contributors"
|
|
||||||
>
|
|
||||||
<StyledText
|
<StyledText
|
||||||
variant="subtitle1"
|
variant="subtitle1"
|
||||||
>
|
>
|
||||||
@ -68,13 +66,12 @@ exports[`test Developers should render the component for contributors with items
|
|||||||
<h6
|
<h6
|
||||||
className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
|
className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
|
||||||
>
|
>
|
||||||
sidebar.contributors.title
|
contributors
|
||||||
</h6>
|
</h6>
|
||||||
</ForwardRef(Typography)>
|
</ForwardRef(Typography)>
|
||||||
</WithStyles(ForwardRef(Typography))>
|
</WithStyles(ForwardRef(Typography))>
|
||||||
</ForwardRef(Text)>
|
</ForwardRef(Text)>
|
||||||
</StyledText>
|
</StyledText>
|
||||||
</DevelopersTitle>
|
|
||||||
<StyledBox
|
<StyledBox
|
||||||
display="flex"
|
display="flex"
|
||||||
flexWrap="wrap"
|
flexWrap="wrap"
|
||||||
@ -93,7 +90,7 @@ exports[`test Developers should render the component for contributors with items
|
|||||||
margin="10px 0 10px 0"
|
margin="10px 0 10px 0"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="MuiBox-root MuiBox-root-91 emotion-8 emotion-9"
|
className="MuiBox-root MuiBox-root-60 emotion-8 emotion-9"
|
||||||
>
|
>
|
||||||
<ForwardRef(ToolTip)
|
<ForwardRef(ToolTip)
|
||||||
key="dave.methvin@gmail.com"
|
key="dave.methvin@gmail.com"
|
||||||
@ -430,6 +427,7 @@ 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 > * {
|
||||||
@ -439,9 +437,6 @@ exports[`test Developers should render the component for maintainers with items
|
|||||||
<Developers
|
<Developers
|
||||||
type="maintainers"
|
type="maintainers"
|
||||||
>
|
>
|
||||||
<DevelopersTitle
|
|
||||||
type="maintainers"
|
|
||||||
>
|
|
||||||
<StyledText
|
<StyledText
|
||||||
variant="subtitle1"
|
variant="subtitle1"
|
||||||
>
|
>
|
||||||
@ -494,13 +489,12 @@ exports[`test Developers should render the component for maintainers with items
|
|||||||
<h6
|
<h6
|
||||||
className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
|
className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
|
||||||
>
|
>
|
||||||
sidebar.maintainers.title
|
maintainers
|
||||||
</h6>
|
</h6>
|
||||||
</ForwardRef(Typography)>
|
</ForwardRef(Typography)>
|
||||||
</WithStyles(ForwardRef(Typography))>
|
</WithStyles(ForwardRef(Typography))>
|
||||||
</ForwardRef(Text)>
|
</ForwardRef(Text)>
|
||||||
</StyledText>
|
</StyledText>
|
||||||
</DevelopersTitle>
|
|
||||||
<StyledBox
|
<StyledBox
|
||||||
display="flex"
|
display="flex"
|
||||||
flexWrap="wrap"
|
flexWrap="wrap"
|
||||||
|
|||||||
@ -1,2 +1 @@
|
|||||||
export { default } from './Developers';
|
export { default, DeveloperType } from './Developers';
|
||||||
export { DeveloperType } from './types';
|
|
||||||
|
|||||||
@ -1,4 +0,0 @@
|
|||||||
export enum DeveloperType {
|
|
||||||
CONTRIBUTORS = 'contributors',
|
|
||||||
MAINTAINERS = 'maintainers',
|
|
||||||
}
|
|
||||||
@ -1,5 +1,4 @@
|
|||||||
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';
|
||||||
@ -23,7 +22,6 @@ 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;
|
||||||
@ -32,11 +30,11 @@ const Dist: FC = () => {
|
|||||||
const { dist, license } = packageMeta && packageMeta.latest;
|
const { dist, license } = packageMeta && packageMeta.latest;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<List subheader={<StyledText variant="subtitle1">{t('sidebar.distribution.title')}</StyledText>}>
|
<List subheader={<StyledText variant="subtitle1">{'Latest Distribution'}</StyledText>}>
|
||||||
<DistListItem button={true}>
|
<DistListItem button={true}>
|
||||||
<DistChip name={t('sidebar.distribution.file-count')}>{dist.fileCount}</DistChip>
|
<DistChip name="file count">{dist.fileCount}</DistChip>
|
||||||
<DistChip name={t('sidebar.distribution.size')}>{dist.unpackedSize && fileSizeSI(dist.unpackedSize)}</DistChip>
|
<DistChip name="size">{dist.unpackedSize && fileSizeSI(dist.unpackedSize)}</DistChip>
|
||||||
<DistChip name={t('sidebar.distribution.license')}>{formatLicense(license)}</DistChip>
|
<DistChip name="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\\">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 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 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 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 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>"`;
|
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>"`;
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
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';
|
||||||
@ -13,7 +12,6 @@ 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;
|
||||||
|
|
||||||
@ -25,7 +23,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'}>{t('sidebar.engines.node-js')}</StyledText>}>
|
<List subheader={<StyledText variant={'subtitle1'}>{'node JS'}</StyledText>}>
|
||||||
<EngineListItem button={true}>
|
<EngineListItem button={true}>
|
||||||
<Avatar src={node} />
|
<Avatar src={node} />
|
||||||
<ListItemText primary={engines.node} />
|
<ListItemText primary={engines.node} />
|
||||||
@ -36,7 +34,7 @@ const Engine: React.FC = () => {
|
|||||||
|
|
||||||
{engines.npm && (
|
{engines.npm && (
|
||||||
<Grid item={true} xs={6}>
|
<Grid item={true} xs={6}>
|
||||||
<List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.engines.npm-version')}</StyledText>}>
|
<List subheader={<StyledText variant={'subtitle1'}>{'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\\">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>"`;
|
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>"`;
|
||||||
|
|||||||
@ -1,18 +1,10 @@
|
|||||||
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';
|
||||||
|
|
||||||
/* eslint-disable react/jsx-key */
|
const renderTooltip = (): JSX.Element => (
|
||||||
const Footer: React.FC = () => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
return (
|
|
||||||
<Wrapper>
|
|
||||||
<Inner>
|
|
||||||
<Left>
|
|
||||||
<Trans components={[<Love />]} i18nKey="footer.made-with-love-on" />
|
|
||||||
<ToolTip>
|
<ToolTip>
|
||||||
<Earth name="earth" size="md" />
|
<Earth name="earth" size="md" />
|
||||||
<Flags>
|
<Flags>
|
||||||
@ -22,18 +14,40 @@ const Footer: React.FC = () => {
|
|||||||
<Flag name="brazil" size="md" />
|
<Flag name="brazil" size="md" />
|
||||||
<Flag name="china" size="md" />
|
<Flag name="china" size="md" />
|
||||||
<Flag name="austria" size="md" />
|
<Flag name="austria" size="md" />
|
||||||
<Flag name="germany" size="md" />
|
|
||||||
</Flags>
|
</Flags>
|
||||||
</ToolTip>
|
</ToolTip>
|
||||||
</Left>
|
);
|
||||||
|
const POWERED_LABEL = 'Powered by';
|
||||||
|
const MADEWITH_LABEL = ' Made with';
|
||||||
|
const ON_LABEL = 'on';
|
||||||
|
const HEARTH_EMOJI = '♥';
|
||||||
|
|
||||||
|
const renderRight = (version = window.VERDACCIO_VERSION): JSX.Element => {
|
||||||
|
return (
|
||||||
<Right>
|
<Right>
|
||||||
{t('footer.powered-by')}
|
{POWERED_LABEL}
|
||||||
<Logo img={true} name="verdaccio" onClick={goToVerdaccioWebsite} pointer={true} size="md" />
|
<Logo img={true} name="verdaccio" onClick={goToVerdaccioWebsite} pointer={true} size="md" />
|
||||||
{`/ ${window.VERDACCIO_VERSION}`}
|
{`/ ${version}`}
|
||||||
</Right>
|
</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;
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`<Footer /> component should load the initial state of Footer component 1`] = `
|
exports[`<Footer /> component should load the initial state of Footer component 1`] = `
|
||||||
.emotion-41 {
|
.emotion-38 {
|
||||||
background: #f9f9f9;
|
background: #f9f9f9;
|
||||||
border-top: 1px solid #e3e3e3;
|
border-top: 1px solid #e3e3e3;
|
||||||
color: #999999;
|
color: #999999;
|
||||||
@ -9,7 +9,7 @@ exports[`<Footer /> component should load the initial state of Footer component
|
|||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-39 {
|
.emotion-36 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -26,7 +26,7 @@ exports[`<Footer /> component should load the initial state of Footer component
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width:768px) {
|
@media (min-width:768px) {
|
||||||
.emotion-39 {
|
.emotion-36 {
|
||||||
min-width: 400px;
|
min-width: 400px;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
@ -38,12 +38,12 @@ exports[`<Footer /> component should load the initial state of Footer component
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width:1024px) {
|
@media (min-width:1024px) {
|
||||||
.emotion-39 {
|
.emotion-36 {
|
||||||
max-width: 1240px;
|
max-width: 1240px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-30 {
|
.emotion-27 {
|
||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
@ -52,7 +52,7 @@ exports[`<Footer /> component should load the initial state of Footer component
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width:768px) {
|
@media (min-width:768px) {
|
||||||
.emotion-30 {
|
.emotion-27 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -65,12 +65,12 @@ exports[`<Footer /> component should load the initial state of Footer component
|
|||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-28 {
|
.emotion-25 {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-28:hover .emotion-27 {
|
.emotion-25:hover .emotion-24 {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -83,7 +83,7 @@ exports[`<Footer /> component should load the initial state of Footer component
|
|||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-26 {
|
.emotion-23 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: #d3dddd;
|
background: #d3dddd;
|
||||||
padding: 1px 4px;
|
padding: 1px 4px;
|
||||||
@ -101,7 +101,7 @@ exports[`<Footer /> component should load the initial state of Footer component
|
|||||||
top: -2px;
|
top: -2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-26:before {
|
.emotion-23:before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 29%;
|
top: 29%;
|
||||||
@ -123,7 +123,7 @@ exports[`<Footer /> component should load the initial state of Footer component
|
|||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-37 {
|
.emotion-34 {
|
||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
@ -136,7 +136,7 @@ exports[`<Footer /> component should load the initial state of Footer component
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width:768px) {
|
@media (min-width:768px) {
|
||||||
.emotion-37 {
|
.emotion-34 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -144,7 +144,7 @@ exports[`<Footer /> component should load the initial state of Footer component
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-35 {
|
.emotion-32 {
|
||||||
box-sizing: initial;
|
box-sizing: initial;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -153,19 +153,19 @@ exports[`<Footer /> component should load the initial state of Footer component
|
|||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-32 {
|
.emotion-29 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="emotion-41 emotion-42"
|
class="emotion-38 emotion-39"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="emotion-39 emotion-40"
|
class="emotion-36 emotion-37"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="emotion-30 emotion-31"
|
class="emotion-27 emotion-28"
|
||||||
>
|
>
|
||||||
Made with
|
Made with
|
||||||
<span
|
<span
|
||||||
@ -175,7 +175,7 @@ exports[`<Footer /> component should load the initial state of Footer component
|
|||||||
</span>
|
</span>
|
||||||
on
|
on
|
||||||
<span
|
<span
|
||||||
class="emotion-28 emotion-29"
|
class="emotion-25 emotion-26"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
class="emotion-2 emotion-3 emotion-4"
|
class="emotion-2 emotion-3 emotion-4"
|
||||||
@ -188,7 +188,7 @@ exports[`<Footer /> component should load the initial state of Footer component
|
|||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<span
|
<span
|
||||||
class="emotion-26 emotion-27"
|
class="emotion-23 emotion-24"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
class="emotion-5 emotion-6 emotion-4"
|
class="emotion-5 emotion-6 emotion-4"
|
||||||
@ -250,30 +250,20 @@ exports[`<Footer /> component should load the initial state of Footer component
|
|||||||
xlink:href="[object Object]#austria"
|
xlink:href="[object Object]#austria"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<svg
|
|
||||||
class="emotion-5 emotion-6 emotion-4"
|
|
||||||
>
|
|
||||||
<title>
|
|
||||||
Germany
|
|
||||||
</title>
|
|
||||||
<use
|
|
||||||
xlink:href="[object Object]#germany"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="emotion-37 emotion-38"
|
class="emotion-34 emotion-35"
|
||||||
>
|
>
|
||||||
Powered by
|
Powered by
|
||||||
<span
|
<span
|
||||||
class="emotion-5 emotion-35 emotion-36"
|
class="emotion-5 emotion-32 emotion-33"
|
||||||
title="Verdaccio"
|
title="Verdaccio"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
alt="Verdaccio"
|
alt="Verdaccio"
|
||||||
class="emotion-32 emotion-33"
|
class="emotion-29 emotion-30"
|
||||||
src="[object Object]"
|
src="[object Object]"
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@ -3,10 +3,10 @@ import styled from '@emotion/styled';
|
|||||||
import Icon from '../Icon/Icon';
|
import Icon from '../Icon/Icon';
|
||||||
import { Theme } from '../../design-tokens/theme';
|
import { Theme } from '../../design-tokens/theme';
|
||||||
|
|
||||||
export const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
|
export const Wrapper = styled('div')<{ theme?: Theme }>(props => ({
|
||||||
background: theme?.palette.type === 'light' ? theme?.palette.snow : theme?.palette.cyanBlue,
|
background: props.theme && props.theme.palette.snow,
|
||||||
borderTop: `1px solid ${theme?.palette.greyGainsboro}`,
|
borderTop: `1px solid ${props.theme && props.theme.palette.greyGainsboro}`,
|
||||||
color: theme?.palette.type === 'dark' ? theme?.palette.white : theme?.palette.nobel01,
|
color: props.theme && props.theme.palette.nobel01,
|
||||||
fontSize: '14px',
|
fontSize: '14px',
|
||||||
padding: '20px',
|
padding: '20px',
|
||||||
}));
|
}));
|
||||||
@ -16,13 +16,13 @@ export const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({
|
|||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'flex-end',
|
justifyContent: 'flex-end',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
[`@media (min-width: ${theme?.breakPoints.medium}px)`]: {
|
[`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: {
|
||||||
minWidth: 400,
|
minWidth: 400,
|
||||||
maxWidth: 800,
|
maxWidth: 800,
|
||||||
margin: 'auto',
|
margin: 'auto',
|
||||||
justifyContent: 'space-between',
|
justifyContent: 'space-between',
|
||||||
},
|
},
|
||||||
[`@media (min-width: ${theme?.breakPoints.large}px)`]: {
|
[`@media (min-width: ${theme && theme.breakPoints.large}px)`]: {
|
||||||
maxWidth: 1240,
|
maxWidth: 1240,
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
@ -30,7 +30,7 @@ export const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({
|
|||||||
export const Left = styled('div')<{ theme?: Theme }>(({ theme }) => ({
|
export const Left = styled('div')<{ theme?: Theme }>(({ theme }) => ({
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
display: 'none',
|
display: 'none',
|
||||||
[`@media (min-width: ${theme?.breakPoints.medium}px)`]: {
|
[`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
@ -43,9 +43,9 @@ export const Earth = styled(Icon)({
|
|||||||
padding: '0 10px',
|
padding: '0 10px',
|
||||||
});
|
});
|
||||||
|
|
||||||
export const Flags = styled('span')<{ theme?: Theme }>(({ theme }) => ({
|
export const Flags = styled('span')<{ theme?: Theme }>(props => ({
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
background: theme?.palette.greyAthens,
|
background: props.theme && props.theme.palette.greyAthens,
|
||||||
padding: '1px 4px',
|
padding: '1px 4px',
|
||||||
borderRadius: 3,
|
borderRadius: 3,
|
||||||
height: 20,
|
height: 20,
|
||||||
@ -60,7 +60,7 @@ export const Flags = styled('span')<{ theme?: Theme }>(({ theme }) => ({
|
|||||||
left: -4,
|
left: -4,
|
||||||
marginLeft: -5,
|
marginLeft: -5,
|
||||||
border: '5px solid',
|
border: '5px solid',
|
||||||
borderColor: `${theme?.palette.greyAthens} transparent transparent transparent`,
|
borderColor: `${props.theme && props.theme.palette.greyAthens} transparent transparent transparent`,
|
||||||
transform: 'rotate(90deg)',
|
transform: 'rotate(90deg)',
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
@ -75,8 +75,8 @@ export const ToolTip = styled('span')({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export const Love = styled('span')<{ theme?: Theme }>(({ theme }) => ({
|
export const Love = styled('span')<{ theme?: Theme }>(props => ({
|
||||||
color: theme?.palette.love,
|
color: props.theme && props.theme.palette.love,
|
||||||
padding: '0 5px',
|
padding: '0 5px',
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|||||||
@ -3,7 +3,6 @@ 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';
|
||||||
|
|
||||||
@ -45,7 +44,7 @@ describe('<Header /> component with logged in state', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test('should open login dialog', async () => {
|
test('should open login dialog', async () => {
|
||||||
const { getByTestId } = render(
|
const { getByText } = render(
|
||||||
<Router>
|
<Router>
|
||||||
<AppContextProvider>
|
<AppContextProvider>
|
||||||
<Header />
|
<Header />
|
||||||
@ -53,9 +52,9 @@ describe('<Header /> component with logged in state', () => {
|
|||||||
</Router>
|
</Router>
|
||||||
);
|
);
|
||||||
|
|
||||||
const loginBtn = getByTestId('header--button-login');
|
const loginBtn = getByText('Login');
|
||||||
fireEvent.click(loginBtn);
|
fireEvent.click(loginBtn);
|
||||||
const loginDialog = await waitForElement(() => getByTestId('login--dialog'));
|
const loginDialog = await waitForElement(() => getByText('Sign in'));
|
||||||
expect(loginDialog).toBeTruthy();
|
expect(loginDialog).toBeTruthy();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -120,7 +119,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(translationEN.button.close));
|
const closeBtn = await waitForElement(() => getByText('CLOSE'));
|
||||||
fireEvent.click(closeBtn);
|
fireEvent.click(closeBtn);
|
||||||
|
|
||||||
const hasRegistrationInfoModalBeenRemoved = await waitForElementToBeRemoved(() =>
|
const hasRegistrationInfoModalBeenRemoved = await waitForElementToBeRemoved(() =>
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
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';
|
||||||
@ -19,17 +18,17 @@ 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(t('app-context-not-correct-used'));
|
throw Error('The app Context was not correct used');
|
||||||
}
|
}
|
||||||
|
|
||||||
const { user, scope, setUser } = appContext;
|
const { user, scope, setUser } = appContext;
|
||||||
|
const logo = window.VERDACCIO_LOGO;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Logouts user
|
* Logouts user
|
||||||
@ -45,7 +44,7 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
|
|||||||
<>
|
<>
|
||||||
<NavBar data-testid="header" position="static">
|
<NavBar data-testid="header" position="static">
|
||||||
<InnerNavBar>
|
<InnerNavBar>
|
||||||
<HeaderLeft />
|
<HeaderLeft logo={logo} />
|
||||||
<HeaderRight
|
<HeaderRight
|
||||||
onLogout={handleLogout}
|
onLogout={handleLogout}
|
||||||
onOpenRegistryInfoDialog={() => setOpenInfoDialog(true)}
|
onOpenRegistryInfoDialog={() => setOpenInfoDialog(true)}
|
||||||
@ -68,7 +67,7 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
|
|||||||
<Search />
|
<Search />
|
||||||
</InnerMobileNavBar>
|
</InnerMobileNavBar>
|
||||||
<Button color="inherit" onClick={() => setShowMobileNavBar(false)}>
|
<Button color="inherit" onClick={() => setShowMobileNavBar(false)}>
|
||||||
{t('button.cancel')}
|
{'Cancel'}
|
||||||
</Button>
|
</Button>
|
||||||
</MobileNavBar>
|
</MobileNavBar>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
import Label from '../Label';
|
import Label from '../Label';
|
||||||
|
|
||||||
@ -9,14 +8,11 @@ interface Props {
|
|||||||
username: string;
|
username: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const HeaderGreetings: React.FC<Props> = ({ username }) => {
|
const HeaderGreetings: React.FC<Props> = ({ username }) => (
|
||||||
const { t } = useTranslation();
|
|
||||||
return (
|
|
||||||
<>
|
<>
|
||||||
<Greetings>{t('header.greetings')}</Greetings>
|
<Greetings>{'Hi,'}</Greetings>
|
||||||
<Label capitalize={true} data-testid="greetings-label" text={username} weight="bold" />
|
<Label capitalize={true} data-testid="greetings-label" text={username} weight="bold" />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
export default HeaderGreetings;
|
export default HeaderGreetings;
|
||||||
|
|||||||
@ -3,22 +3,23 @@ import styled from '@emotion/styled';
|
|||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
import Search from '../Search/';
|
import Search from '../Search/';
|
||||||
import Logo from '../Logo';
|
|
||||||
|
|
||||||
|
import HeaderLogo from './HeaderLogo';
|
||||||
import { LeftSide, SearchWrapper } from './styles';
|
import { LeftSide, SearchWrapper } from './styles';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
withoutSearch?: boolean;
|
withoutSearch?: boolean;
|
||||||
|
logo?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const StyledLink = styled(Link)({
|
const StyledLink = styled(Link)({
|
||||||
marginRight: '1em',
|
marginRight: '1em',
|
||||||
});
|
});
|
||||||
|
|
||||||
const HeaderLeft: React.FC<Props> = ({ withoutSearch = false }) => (
|
const HeaderLeft: React.FC<Props> = ({ withoutSearch = false, logo }) => (
|
||||||
<LeftSide>
|
<LeftSide>
|
||||||
<StyledLink to={'/'}>
|
<StyledLink to={'/'}>
|
||||||
<Logo />
|
<HeaderLogo logo={logo} />
|
||||||
</StyledLink>
|
</StyledLink>
|
||||||
{!withoutSearch && (
|
{!withoutSearch && (
|
||||||
<SearchWrapper>
|
<SearchWrapper>
|
||||||
|
|||||||
25
src/components/Header/HeaderLogo.tsx
Normal file
25
src/components/Header/HeaderLogo.tsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import styled from '@emotion/styled';
|
||||||
|
|
||||||
|
import Logo from '../Logo';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
logo?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const HeaderLogo: React.FC<Props> = ({ logo }) => {
|
||||||
|
if (logo) {
|
||||||
|
const Wrapper = styled('div')({
|
||||||
|
fontSize: 0,
|
||||||
|
});
|
||||||
|
return (
|
||||||
|
<Wrapper>
|
||||||
|
<img alt="logo" height="40px" src={logo} />
|
||||||
|
</Wrapper>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <Logo />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HeaderLogo;
|
||||||
@ -1,5 +1,4 @@
|
|||||||
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';
|
||||||
@ -24,9 +23,7 @@ const HeaderMenu: React.FC<Props> = ({
|
|||||||
anchorEl,
|
anchorEl,
|
||||||
onLoggedInMenu,
|
onLoggedInMenu,
|
||||||
onLoggedInMenuClose,
|
onLoggedInMenuClose,
|
||||||
}) => {
|
}) => (
|
||||||
const { t } = useTranslation();
|
|
||||||
return (
|
|
||||||
<>
|
<>
|
||||||
<IconButton
|
<IconButton
|
||||||
color="inherit"
|
color="inherit"
|
||||||
@ -47,15 +44,14 @@ const HeaderMenu: React.FC<Props> = ({
|
|||||||
vertical: 'top',
|
vertical: 'top',
|
||||||
horizontal: 'right',
|
horizontal: 'right',
|
||||||
}}>
|
}}>
|
||||||
<MenuItem>
|
<MenuItem disabled={true}>
|
||||||
<HeaderGreetings username={username} />
|
<HeaderGreetings username={username} />
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem button={true} data-testid="header--button-logout" id="header--button-logout" onClick={onLogout}>
|
<MenuItem button={true} data-testid="header--button-logout" id="header--button-logout" onClick={onLogout}>
|
||||||
{t('button.logout')}
|
{'Logout'}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
</Menu>
|
</Menu>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
export default HeaderMenu;
|
export default HeaderMenu;
|
||||||
|
|||||||
@ -1,9 +1,6 @@
|
|||||||
import React, { useState, useEffect, useContext, 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';
|
||||||
import ThemeContext from '../../design-tokens/ThemeContext';
|
|
||||||
import LanguageSwitch from '../LanguageSwitch';
|
|
||||||
|
|
||||||
import { RightSide } from './styles';
|
import { RightSide } from './styles';
|
||||||
import HeaderToolTip from './HeaderToolTip';
|
import HeaderToolTip from './HeaderToolTip';
|
||||||
@ -26,16 +23,9 @@ const HeaderRight: React.FC<Props> = ({
|
|||||||
onToggleMobileNav,
|
onToggleMobileNav,
|
||||||
onOpenRegistryInfoDialog,
|
onOpenRegistryInfoDialog,
|
||||||
}) => {
|
}) => {
|
||||||
const themeContext = useContext(ThemeContext);
|
|
||||||
const [anchorEl, setAnchorEl] = useState();
|
const [anchorEl, setAnchorEl] = useState();
|
||||||
const [isMenuOpen, setIsMenuOpen] = useState();
|
const [isMenuOpen, setIsMenuOpen] = useState();
|
||||||
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
if (!themeContext) {
|
|
||||||
throw Error(t('theme-context-not-correct-used'));
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setIsMenuOpen(Boolean(anchorEl));
|
setIsMenuOpen(Boolean(anchorEl));
|
||||||
}, [anchorEl]);
|
}, [anchorEl]);
|
||||||
@ -62,26 +52,13 @@ const HeaderRight: React.FC<Props> = ({
|
|||||||
onToggleLogin();
|
onToggleLogin();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleToggleDarkLightMode = () => {
|
|
||||||
setTimeout(() => {
|
|
||||||
themeContext.setIsDarkMode(!themeContext.isDarkMode);
|
|
||||||
}, 300);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<RightSide data-testid="header-right">
|
<RightSide data-testid="header-right">
|
||||||
{!withoutSearch && (
|
{!withoutSearch && (
|
||||||
<HeaderToolTip onClick={onToggleMobileNav} title={t('search.packages')} tooltipIconType={'search'} />
|
<HeaderToolTip onClick={onToggleMobileNav} title={'Search packages'} tooltipIconType={'search'} />
|
||||||
)}
|
)}
|
||||||
<LanguageSwitch />
|
<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'} />
|
|
||||||
<HeaderToolTip
|
|
||||||
onClick={handleToggleDarkLightMode}
|
|
||||||
title={t('header.documentation')}
|
|
||||||
tooltipIconType={themeContext.isDarkMode ? 'dark-mode' : 'light-mode'}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{username ? (
|
{username ? (
|
||||||
<HeaderMenu
|
<HeaderMenu
|
||||||
anchorEl={anchorEl}
|
anchorEl={anchorEl}
|
||||||
@ -93,7 +70,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}>
|
||||||
{t('button.login')}
|
{'Login'}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</RightSide>
|
</RightSide>
|
||||||
|
|||||||
@ -2,14 +2,12 @@ import React, { forwardRef } from 'react';
|
|||||||
import Info from '@material-ui/icons/Info';
|
import Info from '@material-ui/icons/Info';
|
||||||
import Help from '@material-ui/icons/Help';
|
import Help from '@material-ui/icons/Help';
|
||||||
import Search from '@material-ui/icons/Search';
|
import Search from '@material-ui/icons/Search';
|
||||||
import NightsStay from '@material-ui/icons/NightsStay';
|
|
||||||
import WbSunny from '@material-ui/icons/WbSunny';
|
|
||||||
|
|
||||||
import IconButton from '../../muiComponents/IconButton';
|
import IconButton from '../../muiComponents/IconButton';
|
||||||
|
|
||||||
import { IconSearchButton, StyledLink } from './styles';
|
import { IconSearchButton, StyledLink } from './styles';
|
||||||
|
|
||||||
export type TooltipIconType = 'search' | 'help' | 'info' | 'dark-mode' | 'light-mode';
|
export type TooltipIconType = 'search' | 'help' | 'info';
|
||||||
interface Props {
|
interface Props {
|
||||||
tooltipIconType: TooltipIconType;
|
tooltipIconType: TooltipIconType;
|
||||||
onClick?: () => void;
|
onClick?: () => void;
|
||||||
@ -52,21 +50,6 @@ const HeaderToolTipIcon = forwardRef<HeaderToolTipIconRef, Props>(function Heade
|
|||||||
<Search />
|
<Search />
|
||||||
</IconSearchButton>
|
</IconSearchButton>
|
||||||
);
|
);
|
||||||
case 'dark-mode':
|
|
||||||
// todo(Priscila): Add Zoom transition effect
|
|
||||||
return (
|
|
||||||
<IconButton color="inherit" onClick={onClick} ref={ref}>
|
|
||||||
<NightsStay />
|
|
||||||
</IconButton>
|
|
||||||
);
|
|
||||||
|
|
||||||
case 'light-mode':
|
|
||||||
// todo(Priscila): Add Zoom transition effect
|
|
||||||
return (
|
|
||||||
<IconButton color="inherit" onClick={onClick} ref={ref}>
|
|
||||||
<WbSunny />
|
|
||||||
</IconButton>
|
|
||||||
);
|
|
||||||
default:
|
default:
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,9 +1,8 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`<Header /> component with logged in state should load the component in logged in state 1`] = `
|
exports[`<Header /> component with logged in state should load the component in logged in state 1`] = `
|
||||||
.emotion-28 {
|
.emotion-24 {
|
||||||
background-color: #4b5e40;
|
background-color: #4b5e40;
|
||||||
color: #fff;
|
|
||||||
min-height: 60px;
|
min-height: 60px;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
@ -16,29 +15,29 @@ exports[`<Header /> component with logged in state should load the component in
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width:768px) {
|
@media (min-width:768px) {
|
||||||
.emotion-28 .emotion-13 {
|
.emotion-24 .emotion-13 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-28 .emotion-17 {
|
.emotion-24 .emotion-17 {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-28 .e1jf5lit4 {
|
.emotion-24 .e1jf5lit4 {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width:1024px) {
|
@media (min-width:1024px) {
|
||||||
.emotion-28 .emotion-27 {
|
.emotion-24 .emotion-23 {
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width:1275px) {
|
@media (min-width:1275px) {
|
||||||
.emotion-28 .emotion-27 {
|
.emotion-24 .emotion-23 {
|
||||||
max-width: 1240px;
|
max-width: 1240px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@ -46,7 +45,7 @@ exports[`<Header /> component with logged in state should load the component in
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-26 {
|
.emotion-22 {
|
||||||
-webkit-box-pack: justify;
|
-webkit-box-pack: justify;
|
||||||
-webkit-justify-content: space-between;
|
-webkit-justify-content: space-between;
|
||||||
-ms-flex-pack: justify;
|
-ms-flex-pack: justify;
|
||||||
@ -124,7 +123,7 @@ exports[`<Header /> component with logged in state should load the component in
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-24 {
|
.emotion-20 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -136,36 +135,16 @@ exports[`<Header /> component with logged in state should load the component in
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-20 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width:768px) {
|
|
||||||
.emotion-20 {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emotion-18 {
|
.emotion-18 {
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width:768px) {
|
|
||||||
.emotion-18 {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emotion-22 {
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
<header
|
<header
|
||||||
class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-28 emotion-29 MuiAppBar-colorPrimary"
|
class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-24 emotion-25 MuiAppBar-colorPrimary"
|
||||||
data-testid="header"
|
data-testid="header"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="MuiToolbar-root MuiToolbar-regular emotion-26 emotion-27 MuiToolbar-gutters"
|
class="MuiToolbar-root MuiToolbar-regular emotion-22 emotion-23 MuiToolbar-gutters"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="MuiToolbar-root MuiToolbar-regular emotion-14 emotion-15 MuiToolbar-gutters"
|
class="MuiToolbar-root MuiToolbar-regular emotion-14 emotion-15 MuiToolbar-gutters"
|
||||||
@ -234,7 +213,7 @@ exports[`<Header /> component with logged in state should load the component in
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="MuiToolbar-root MuiToolbar-regular emotion-24 emotion-25 MuiToolbar-gutters"
|
class="MuiToolbar-root MuiToolbar-regular emotion-20 emotion-21 MuiToolbar-gutters"
|
||||||
data-testid="header-right"
|
data-testid="header-right"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
@ -261,53 +240,8 @@ exports[`<Header /> component with logged in state should load the component in
|
|||||||
class="MuiTouchRipple-root"
|
class="MuiTouchRipple-root"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
<div
|
|
||||||
class="emotion-20 emotion-21"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
|
|
||||||
tabindex="0"
|
|
||||||
title="Change language"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="MuiButton-label ForwardRef(Button)-label-322"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root"
|
|
||||||
focusable="false"
|
|
||||||
role="presentation"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span
|
|
||||||
class="emotion-18 emotion-19"
|
|
||||||
>
|
|
||||||
English
|
|
||||||
</span>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall"
|
|
||||||
focusable="false"
|
|
||||||
role="presentation"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="MuiTouchRipple-root"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<a
|
<a
|
||||||
class="emotion-22 emotion-23"
|
class="emotion-18 emotion-19"
|
||||||
data-testid="header--tooltip-documentation"
|
data-testid="header--tooltip-documentation"
|
||||||
href="https://verdaccio.org/docs/en/installation"
|
href="https://verdaccio.org/docs/en/installation"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
@ -368,30 +302,6 @@ exports[`<Header /> component with logged in state should load the component in
|
|||||||
class="MuiTouchRipple-root"
|
class="MuiTouchRipple-root"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
<button
|
|
||||||
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
|
|
||||||
tabindex="0"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="MuiIconButton-label"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root"
|
|
||||||
focusable="false"
|
|
||||||
role="presentation"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="MuiTouchRipple-root"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
<button
|
<button
|
||||||
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
|
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
|
||||||
data-testid="header--menu-accountcircle"
|
data-testid="header--menu-accountcircle"
|
||||||
@ -424,9 +334,8 @@ exports[`<Header /> component with logged in state should load the component in
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`<Header /> component with logged in state should load the component in logged out state 1`] = `
|
exports[`<Header /> component with logged in state should load the component in logged out state 1`] = `
|
||||||
.emotion-28 {
|
.emotion-24 {
|
||||||
background-color: #4b5e40;
|
background-color: #4b5e40;
|
||||||
color: #fff;
|
|
||||||
min-height: 60px;
|
min-height: 60px;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
@ -439,29 +348,29 @@ exports[`<Header /> component with logged in state should load the component in
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width:768px) {
|
@media (min-width:768px) {
|
||||||
.emotion-28 .emotion-13 {
|
.emotion-24 .emotion-13 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-28 .emotion-17 {
|
.emotion-24 .emotion-17 {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-28 .e1jf5lit4 {
|
.emotion-24 .e1jf5lit4 {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width:1024px) {
|
@media (min-width:1024px) {
|
||||||
.emotion-28 .emotion-27 {
|
.emotion-24 .emotion-23 {
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width:1275px) {
|
@media (min-width:1275px) {
|
||||||
.emotion-28 .emotion-27 {
|
.emotion-24 .emotion-23 {
|
||||||
max-width: 1240px;
|
max-width: 1240px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@ -469,7 +378,7 @@ exports[`<Header /> component with logged in state should load the component in
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-26 {
|
.emotion-22 {
|
||||||
-webkit-box-pack: justify;
|
-webkit-box-pack: justify;
|
||||||
-webkit-justify-content: space-between;
|
-webkit-justify-content: space-between;
|
||||||
-ms-flex-pack: justify;
|
-ms-flex-pack: justify;
|
||||||
@ -547,7 +456,7 @@ exports[`<Header /> component with logged in state should load the component in
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-24 {
|
.emotion-20 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -559,36 +468,16 @@ exports[`<Header /> component with logged in state should load the component in
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emotion-20 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width:768px) {
|
|
||||||
.emotion-20 {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emotion-18 {
|
.emotion-18 {
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width:768px) {
|
|
||||||
.emotion-18 {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emotion-22 {
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
<header
|
<header
|
||||||
class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-28 emotion-29 MuiAppBar-colorPrimary"
|
class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-24 emotion-25 MuiAppBar-colorPrimary"
|
||||||
data-testid="header"
|
data-testid="header"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="MuiToolbar-root MuiToolbar-regular emotion-26 emotion-27 MuiToolbar-gutters"
|
class="MuiToolbar-root MuiToolbar-regular emotion-22 emotion-23 MuiToolbar-gutters"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="MuiToolbar-root MuiToolbar-regular emotion-14 emotion-15 MuiToolbar-gutters"
|
class="MuiToolbar-root MuiToolbar-regular emotion-14 emotion-15 MuiToolbar-gutters"
|
||||||
@ -657,7 +546,7 @@ exports[`<Header /> component with logged in state should load the component in
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="MuiToolbar-root MuiToolbar-regular emotion-24 emotion-25 MuiToolbar-gutters"
|
class="MuiToolbar-root MuiToolbar-regular emotion-20 emotion-21 MuiToolbar-gutters"
|
||||||
data-testid="header-right"
|
data-testid="header-right"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
@ -684,53 +573,8 @@ exports[`<Header /> component with logged in state should load the component in
|
|||||||
class="MuiTouchRipple-root"
|
class="MuiTouchRipple-root"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
<div
|
|
||||||
class="emotion-20 emotion-21"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
|
|
||||||
tabindex="0"
|
|
||||||
title="Change language"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="MuiButton-label ForwardRef(Button)-label-119"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root"
|
|
||||||
focusable="false"
|
|
||||||
role="presentation"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span
|
|
||||||
class="emotion-18 emotion-19"
|
|
||||||
>
|
|
||||||
English
|
|
||||||
</span>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall"
|
|
||||||
focusable="false"
|
|
||||||
role="presentation"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="MuiTouchRipple-root"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<a
|
<a
|
||||||
class="emotion-22 emotion-23"
|
class="emotion-18 emotion-19"
|
||||||
data-testid="header--tooltip-documentation"
|
data-testid="header--tooltip-documentation"
|
||||||
href="https://verdaccio.org/docs/en/installation"
|
href="https://verdaccio.org/docs/en/installation"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
@ -791,30 +635,6 @@ exports[`<Header /> component with logged in state should load the component in
|
|||||||
class="MuiTouchRipple-root"
|
class="MuiTouchRipple-root"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
<button
|
|
||||||
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
|
|
||||||
tabindex="0"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="MuiIconButton-label"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root"
|
|
||||||
focusable="false"
|
|
||||||
role="presentation"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="MuiTouchRipple-root"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
<button
|
<button
|
||||||
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
|
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
|
||||||
data-testid="header--button-login"
|
data-testid="header--button-login"
|
||||||
|
|||||||
@ -54,12 +54,11 @@ export const SearchWrapper = styled('div')({
|
|||||||
});
|
});
|
||||||
|
|
||||||
export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
|
export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
|
||||||
backgroundColor: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
|
backgroundColor: theme && theme.palette.primary.main,
|
||||||
color: theme?.palette.white,
|
|
||||||
minHeight: 60,
|
minHeight: 60,
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
[`@media (min-width: ${theme?.breakPoints.medium}px)`]: css`
|
[`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: css`
|
||||||
${SearchWrapper} {
|
${SearchWrapper} {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
@ -70,12 +69,12 @@ export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
[`@media (min-width: ${theme?.breakPoints.large}px)`]: css`
|
[`@media (min-width: ${theme && theme.breakPoints.large}px)`]: css`
|
||||||
${InnerNavBar} {
|
${InnerNavBar} {
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
[`@media (min-width: ${theme?.breakPoints.xlarge}px)`]: css`
|
[`@media (min-width: ${theme && theme.breakPoints.xlarge}px)`]: css`
|
||||||
${InnerNavBar} {
|
${InnerNavBar} {
|
||||||
max-width: 1240px;
|
max-width: 1240px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -84,6 +83,6 @@ export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
|
|||||||
`,
|
`,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
|
export const StyledLink = styled(Link)<{ theme?: Theme }>(props => ({
|
||||||
color: theme?.palette.white,
|
color: props.theme && props.theme.palette.white,
|
||||||
}));
|
}));
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
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';
|
||||||
@ -25,24 +24,23 @@ 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">
|
||||||
{t('help.title')}
|
{HELP_TITLE}
|
||||||
</Typography>
|
</Typography>
|
||||||
<HelpTitle color="textSecondary" gutterBottom={true}>
|
<HelpTitle color="textSecondary" gutterBottom={true}>
|
||||||
{t('help.sub-title')}
|
{'To publish your first package just:'}
|
||||||
</HelpTitle>
|
</HelpTitle>
|
||||||
{renderHeadingClipboardSegments(t('help.first-step'), t('help.first-step-command-line', { registryUrl }))}
|
{renderHeadingClipboardSegments('1. Login', `npm adduser --registry ${registryUrl}`)}
|
||||||
{renderHeadingClipboardSegments(t('help.second-step'), t('help.second-step-command-line', { registryUrl }))}
|
{renderHeadingClipboardSegments('2. Publish', `npm publish --registry ${registryUrl}`)}
|
||||||
<Text variant="body2">{t('help.third-step')}</Text>
|
<Text variant="body2">{'3. Refresh this page.'}</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">
|
||||||
{t('button.learn-more')}
|
{'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
|
||||||
|
|||||||
@ -6,16 +6,10 @@ import { Svg, Img, ImgWrapper } from './styles';
|
|||||||
import brazil from './img/brazil.svg';
|
import brazil from './img/brazil.svg';
|
||||||
import china from './img/china.svg';
|
import china from './img/china.svg';
|
||||||
import india from './img/india.svg';
|
import india from './img/india.svg';
|
||||||
import germany from './img/germany.svg';
|
|
||||||
import nicaragua from './img/nicaragua.svg';
|
import nicaragua from './img/nicaragua.svg';
|
||||||
import pakistan from './img/pakistan.svg';
|
import pakistan from './img/pakistan.svg';
|
||||||
import austria from './img/austria.svg';
|
import austria from './img/austria.svg';
|
||||||
import spain from './img/spain.svg';
|
import spain from './img/spain.svg';
|
||||||
import usa from './img/usa.svg';
|
|
||||||
import france from './img/france.svg';
|
|
||||||
import japan from './img/japan.svg';
|
|
||||||
import ukraine from './img/ukraine.svg';
|
|
||||||
import khmer from './img/khmer.svg';
|
|
||||||
import earth from './img/earth.svg';
|
import earth from './img/earth.svg';
|
||||||
import verdaccio from './img/verdaccio.svg';
|
import verdaccio from './img/verdaccio.svg';
|
||||||
import filebinary from './img/filebinary.svg';
|
import filebinary from './img/filebinary.svg';
|
||||||
@ -28,16 +22,10 @@ export interface IconsMap {
|
|||||||
brazil: string;
|
brazil: string;
|
||||||
spain: string;
|
spain: string;
|
||||||
china: string;
|
china: string;
|
||||||
usa: string;
|
|
||||||
nicaragua: string;
|
nicaragua: string;
|
||||||
pakistan: string;
|
pakistan: string;
|
||||||
austria: string;
|
austria: string;
|
||||||
france: string;
|
|
||||||
germany: string;
|
|
||||||
india: string;
|
india: string;
|
||||||
japan: string;
|
|
||||||
ukraine: string;
|
|
||||||
khmer: string;
|
|
||||||
earth: string;
|
earth: string;
|
||||||
verdaccio: string;
|
verdaccio: string;
|
||||||
license: string;
|
license: string;
|
||||||
@ -63,12 +51,6 @@ export const Icons: IconsMap = {
|
|||||||
license,
|
license,
|
||||||
time,
|
time,
|
||||||
version,
|
version,
|
||||||
germany,
|
|
||||||
usa,
|
|
||||||
france,
|
|
||||||
japan,
|
|
||||||
ukraine,
|
|
||||||
khmer,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
|
|||||||
@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="france"><path d="M38.345 88.273C17.167 88.273 0 105.44 0 126.618v258.759c0 21.177 17.167 38.345 38.345 38.345h132.322V88.273H38.345z" fill="#41479b"/><path fill="#f5f5f5" d="M170.67 88.277h170.67v335.45H170.67z"/><path d="M473.655 88.273H341.333v335.448h132.322c21.177 0 38.345-17.167 38.345-38.345V126.618c0-21.178-17.167-38.345-38.345-38.345z" fill="#ff4b55"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 434 B |
@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="germany"><path d="M473.655 88.276H38.345C17.167 88.276 0 105.443 0 126.621v73.471h512v-73.471c0-21.178-17.167-38.345-38.345-38.345z" fill="#464655"/><path d="M0 385.379c0 21.177 17.167 38.345 38.345 38.345h435.31c21.177 0 38.345-17.167 38.345-38.345v-73.471H0v73.471z" fill="#ffe15a"/><path fill="#ff4b55" d="M0 200.09h512V311.9H0z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 407 B |
@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="japan"><path d="M473.655 88.275H38.345C17.167 88.275 0 105.442 0 126.62v258.76c0 21.177 17.167 38.345 38.345 38.345h435.31c21.177 0 38.345-17.167 38.345-38.345V126.62c0-21.178-17.167-38.345-38.345-38.345z" fill="#f5f5f5"/><circle cx="256" cy="255.999" r="97.1" fill="#ff4b55"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 350 B |
@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="khmer"><g fill="#032ea1"><path d="M0 304.8v64.8a48.3 48.3 0 0048 48.8h400c26.4 0 48-21.6 48-48.8v-64.8H0zM448 77.6H48c-26.4 0-48 21.6-48 48.8v64.8h496v-64.8a48.3 48.3 0 00-48-48.8z"/></g><path fill="#e00025" d="M0 189.6h496v116H0z"/><g fill="#042a7f"><path d="M448 418.4c26.4 0 48-21.6 48-48.8v-64.8H315.2L448 418.4zM448 77.6H48l132.8 113.6H496v-64.8a48.3 48.3 0 00-48-48.8z"/></g><path fill="#b50030" d="M316 306.4h180V189.6H180z"/><path fill="#002566" d="M448 77.6H48l370.4 113.6H496v-64.8a48.3 48.3 0 00-48-48.8z"/><path fill="#8c002b" d="M496 214.4v-24.8h-81.6z"/><path fill="#002566" d="M496 369.6a48.3 48.3 0 01-48 48.8H48c-26.4 0-48-21.6-48-48.8"/><g fill="#fff"><path d="M249.6 200s0-2.4-1.6-2.4-1.6 2.4-1.6 2.4h3.2zM321.6 290.4v-7.2h-24 20v-6.4h-4V272h-16H312v-4h-3.2c-.8-.8-2.4-1.6-2.4-3.2v-12c.8-1.6 1.6-3.2 2.4-3.2v-11.2c-1.6 0-2.4 1.6-2.4 1.6v-4.8h-1.6v9.6-6.4h-2.4 2.4v-1.6h-2.4v-5.6c-.8 0-.8 2.4-2.4 2.4-.8 0-.8-.8 0-1.6s.8-1.6 0-4c-.8 1.6-1.6 1.6-1.6.8.8-1.6 1.6-1.6.8-4 0 2.4-1.6 2.4-1.6.8 0-1.6.8-1.6 0-4-.8 2.4-1.6 2.4-1.6.8 0-2.4 0-4-2.4-4.8 0 0 0-1.6-.8-1.6s-.8 1.6-.8 1.6c-2.4.8-2.4 3.2-2.4 4.8s-.8 1.6-1.6-.8c-.8 1.6 0 2.4 0 4s-.8 1.6-1.6-.8c-.8 2.4 0 2.4.8 4 0 .8-.8.8-1.6-.8-.8 1.6 0 3.2 0 4 .8.8.8 1.6 0 1.6-1.6 0-1.6-2.4-2.4-2.4v9.6H280v-.8h-1.6v.8H264V232c-1.6.8-1.6 1.6-1.6 1.6v7.2-5.6h-1.6s-.8 0-.8-1.6.8-2.4 1.6-2.4V228s-3.2 0-3.2 4v-3.2c-.8 0-.8.8-.8 4h-2.4 1.6v-3.2c0-1.6 1.6-1.6 1.6-3.2V224c-.8 2.4-1.6 1.6-1.6.8s.8-1.6 2.4-4c.8-.8 0-2.4-.8-3.2 0 1.6-.8 2.4-1.6 2.4s-.8 0-.8-1.6c0-.8.8-1.6.8-3.2.8-1.6 0-2.4-.8-3.2 0 1.6 0 2.4-.8 2.4-1.6-.8 0-3.2 0-3.2 0-.8-.8-2.4-.8-2.4-.8 1.6-.8 1.6-1.6 1.6s-.8-1.6 0-2.4c.8-.8.8-1.6 0-1.6-.8 1.6-1.6.8-1.6 0l.8-2.4h-10.4l.8 2.4c0 .8-.8.8-1.6 0-.8.8-.8 1.6 0 1.6.8.8.8 1.6 0 2.4-.8 0-.8 0-1.6-1.6 0 0-.8 1.6-.8 2.4 0 .8 1.6 3.2 0 3.2-.8 0-.8-.8-.8-2.4-.8.8-.8 1.6-.8 3.2 0 .8.8 1.6.8 3.2 0 .8-.8 1.6-.8 1.6-.8 0-.8-.8-1.6-2.4-.8.8-.8 3.2-.8 3.2 1.6 2.4 2.4 3.2 2.4 4s-.8 1.6-1.6-.8c-.8.8 0 2.4 0 2.4 0 1.6 1.6 1.6 1.6 3.2v3.2h1.6-2.4c0-3.2 0-4-.8-4v3.2c0-3.2-3.2-3.2-3.2-3.2v3.2c.8 0 1.6.8 1.6 2.4s-.8 1.6-.8 1.6h-1.6v5.6-7.2s0-1.6-1.6-1.6v8.8h-14.4V240h-1.6v.8h-3.2v-9.6c-.8 0-.8 2.4-2.4 2.4-.8 0-.8-.8 0-1.6s.8-1.6 0-4c-.8 1.6-1.6 1.6-1.6.8.8-1.6 1.6-1.6.8-4 0 2.4-1.6 2.4-1.6.8 0-1.6.8-1.6 0-4-.8 2.4-1.6 2.4-1.6.8 0-2.4 0-4-2.4-4.8 0 0 0-1.6-.8-1.6s-.8 1.6-.8 1.6c-2.4.8-2.4 3.2-2.4 4.8s-.8 1.6-1.6-.8c-.8 1.6 0 2.4 0 4s-.8 1.6-1.6-.8c-.8 2.4 0 2.4.8 4 0 .8-.8.8-1.6-.8-.8 1.6 0 3.2 0 4 .8.8.8 1.6 0 1.6-1.6 0-1.6-2.4-2.4-2.4v5.6h-2.4v-.8h-1.6v4s-.8-1.6-2.4-1.6v12c.8 0 2.4 1.6 2.4 3.2v12c0 1.6-1.6 2.4-2.4 3.2h-.8v3.2h13.6-16v4.8h-4v6.4h20-24v7.2h-4v7.2h156v-7.2h-4zm-16.8-25.6zm-2.4-17.6v.8-.8zm-3.2.8h4-4zm-105.6-9.6h-2.4 2.4zm3.2 10.4h-3.2 3.2zm12-.8h4-4zm-.8 24h35.2H208zm35.2 11.2H208h35.2zm.8-50.4zm8 0zm32 15.2h3.2-3.2c-.8.8-.8 0 0 0zm4 35.2h-36 36zm0-11.2h-36 36z"/><path d="M252.8 205.6v-2.4h-9.6v2.4zM252 203.2v-1.6h-8v1.6zM250.4 201.6V200h-4.8v1.6z"/></g><g fill="#cecece"><path d="M231.2 232v2.4l1.6 1.6v-1.6c0-.8 0-2.4-1.6-2.4z"/><path d="M321.6 283.2h-24 20v-6.4h-4V272h-16H312v-4h-3.2c-.8-.8-2.4-1.6-2.4-3.2v-12c.8-1.6 1.6-3.2 2.4-3.2v-11.2c-1.6 0-2.4 1.6-2.4 1.6v-4.8h-1.6v9.6-6.4h-2.4 2.4v-1.6h-2.4v-5.6c-.8 0-.8 2.4-2.4 2.4-.8 0-.8-.8 0-1.6s.8-1.6 0-4c-.8 1.6-1.6 1.6-1.6.8.8-1.6 1.6-1.6.8-4 0 2.4-1.6 2.4-1.6.8 0-1.6.8-1.6 0-4-.8 2.4-1.6 2.4-1.6.8 0-2.4 0-4-2.4-4.8 0 0 0-1.6-.8-1.6s-.8 1.6-.8 1.6c-2.4.8-2.4 3.2-2.4 4.8s-.8 1.6-1.6-.8c-.8 1.6 0 2.4 0 4s-.8 1.6-1.6-.8c-.8 2.4 0 2.4.8 4 0 .8-.8.8-1.6-.8-.8 1.6 0 3.2 0 4 .8.8.8 1.6 0 1.6-1.6 0-1.6-2.4-2.4-2.4v9.6H280v-.8h-1.6v.8H264V232c-1.6.8-1.6 1.6-1.6 1.6v7.2-5.6h-1.6s-.8 0-.8-1.6.8-2.4 1.6-2.4V228s-3.2 0-3.2 4v-3.2c-.8 0-.8.8-.8 4h-.8v-3.2c0-1.6 1.6-1.6 1.6-3.2V224c-.8 2.4-1.6 1.6-1.6.8s.8-1.6 2.4-4c.8-.8 0-2.4-.8-3.2 0 1.6-.8 2.4-1.6 2.4s-.8 0-.8-1.6c0-.8.8-1.6.8-3.2.8-1.6 0-2.4-.8-3.2 0 1.6 0 2.4-.8 2.4-1.6-.8 0-3.2 0-3.2 0-.8-.8-2.4-.8-2.4-.8 1.6-.8 1.6-1.6 1.6s-.8-1.6 0-2.4c.8-.8.8-1.6 0-1.6-.8 1.6-1.6.8-1.6 0l.8-2.4h-10.4l.8 2.4c0 .8-.8.8-1.6 0-.8.8-.8 1.6 0 1.6.8.8.8 1.6 0 2.4-.8 0-.8 0-1.6-1.6 0 0-.8 1.6-.8 2.4 0 .8 1.6 3.2 0 3.2-.8 0-.8-.8-.8-2.4-.8.8-.8 1.6-.8 3.2 0 .8.8 1.6.8 3.2 0 .8-.8 1.6-.8 1.6-.8 0-.8-.8-1.6-2.4-.8.8-.8 3.2-.8 3.2 1.6 2.4 2.4 3.2 2.4 4s-.8 1.6-1.6-.8c-.8.8 0 2.4 0 2.4 0 1.6 1.6 1.6 1.6 3.2v3.2h-.8c0-3.2 0-4-.8-4v3.2c0-3.2-3.2-3.2-3.2-3.2v3.2c.8 0 1.6.8 1.6 2.4s-.8 1.6-.8 1.6h-1.6l42.4 36.8H288h-12l31.2 26.4h19.2V292h-4v-8.8h-.8zm-19.2-36v.8-.8zm-3.2.8h4-4zm-12 .8h-4 4zM248 197.6c-1.6 0-1.6 2.4-1.6 2.4h2.4c.8 0 .8-2.4-.8-2.4z"/><path d="M243.2 203.2v2.4h9.6v-2.4zM252 203.2v-1.6h-8v1.6zM250.4 201.6V200h-4.8v1.6z"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 4.6 KiB |
@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="ukraine"><path d="M0 248v121.6C0 396.8 21.6 416 48 416h400c26.4 0 48-19.2 48-46.4V248H0z" fill="#fdce0c"/><path d="M248 248l197.6 168c26.4 0 50.4-19.2 50.4-46.4V248H248z" fill="#f4ba00"/><path d="M448 80H48C21.6 80 0 99.2 0 126.4V248h496V126.4c0-27.2-21.6-46.4-48-46.4z" fill="#44c1ef"/><path d="M448 80H48l200 168h248V126.4c0-27.2-21.6-46.4-48-46.4z" fill="#18b4ea"/><path d="M496 368.8c0 29.6-21.6 47.2-48 47.2H48c-26.4 0-48-20.8-48-48" fill="#f2a700"/><path d="M48 80h400c26.4 0 48 19.2 48 46.4V216" fill="#10a2e2"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 593 B |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 12 KiB |
@ -20,7 +20,6 @@ interface CommonStyleProps {
|
|||||||
size: Breakpoint;
|
size: Breakpoint;
|
||||||
pointer?: boolean;
|
pointer?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const commonStyle = ({ size = 'sm', pointer }: CommonStyleProps): object => ({
|
const commonStyle = ({ size = 'sm', pointer }: CommonStyleProps): object => ({
|
||||||
display: 'inline-block',
|
display: 'inline-block',
|
||||||
cursor: pointer ? 'pointer' : 'default',
|
cursor: pointer ? 'pointer' : 'default',
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
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';
|
||||||
@ -15,7 +14,6 @@ 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;
|
||||||
@ -25,9 +23,7 @@ const Install: React.FC = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<List
|
<List data-testid={'installList'} subheader={<StyledText variant={'subtitle1'}>{'Installation'}</StyledText>}>
|
||||||
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,6 +1,5 @@
|
|||||||
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';
|
||||||
@ -44,16 +43,14 @@ 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={t('sidebar.installation.install-using-npm-command', { packageName })} />}
|
primary={<CopyToClipBoard text={`npm install ${packageName}`} />}
|
||||||
secondary={t('sidebar.installation.install-using-npm')}
|
secondary={'Install using npm'}
|
||||||
/>
|
/>
|
||||||
</InstallItem>
|
</InstallItem>
|
||||||
);
|
);
|
||||||
@ -62,8 +59,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={t('sidebar.installation.install-using-yarn-command', { packageName })} />}
|
primary={<CopyToClipBoard text={`yarn add ${packageName}`} />}
|
||||||
secondary={t('sidebar.installation.install-using-yarn')}
|
secondary={'Install using yarn'}
|
||||||
/>
|
/>
|
||||||
</InstallItem>
|
</InstallItem>
|
||||||
);
|
);
|
||||||
@ -72,8 +69,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={t('sidebar.installation.install-using-pnpm-command', { packageName })} />}
|
primary={<CopyToClipBoard text={`pnpm install ${packageName}`} />}
|
||||||
secondary={t('sidebar.installation.install-using-pnpm')}
|
secondary={'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,227 +0,0 @@
|
|||||||
import React, { MouseEvent, useCallback, useState, useRef, useContext } from 'react';
|
|
||||||
import LanguageIcon from '@material-ui/icons/Language';
|
|
||||||
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
|
|
||||||
import i18next, { TFunction } from 'i18next';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { withStyles } from '@material-ui/core/styles';
|
|
||||||
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
|
|
||||||
import Grow from '@material-ui/core/Grow';
|
|
||||||
import Popper from '@material-ui/core/Popper';
|
|
||||||
import MenuList from '@material-ui/core/MenuList';
|
|
||||||
import styled from '@emotion/styled';
|
|
||||||
|
|
||||||
import { Language } from '../../../i18n/config';
|
|
||||||
import ThemeContext from '../../design-tokens/ThemeContext';
|
|
||||||
import Paper from '../../muiComponents/Paper';
|
|
||||||
import MenuItem from '../../muiComponents/MenuItem';
|
|
||||||
import Button from '../../muiComponents/Button';
|
|
||||||
import Tooltip from '../../muiComponents/Tooltip';
|
|
||||||
import Divider from '../../muiComponents/Divider';
|
|
||||||
import Box from '../../muiComponents/Box';
|
|
||||||
import { Theme } from '../../design-tokens/theme';
|
|
||||||
import Link from '../Link';
|
|
||||||
import Icon from '../Icon';
|
|
||||||
|
|
||||||
const VERDACCIO_UI_GITHUB_REPOSITORY = 'https://github.com/verdaccio/ui';
|
|
||||||
|
|
||||||
const getTranslatedCurrentLanguageDetails = (
|
|
||||||
t: TFunction,
|
|
||||||
currentLanguage: string
|
|
||||||
): { translation: string; icon: React.ComponentProps<typeof Icon>['name'] } => {
|
|
||||||
switch (currentLanguage) {
|
|
||||||
case 'fr-FR':
|
|
||||||
return {
|
|
||||||
translation: t('lng.french'),
|
|
||||||
icon: 'france',
|
|
||||||
};
|
|
||||||
case 'pt-BR':
|
|
||||||
return {
|
|
||||||
translation: t('lng.portuguese'),
|
|
||||||
icon: 'brazil',
|
|
||||||
};
|
|
||||||
case 'de-DE':
|
|
||||||
return {
|
|
||||||
translation: t('lng.german'),
|
|
||||||
icon: 'germany',
|
|
||||||
};
|
|
||||||
case 'es-ES':
|
|
||||||
return {
|
|
||||||
translation: t('lng.spanish'),
|
|
||||||
icon: 'spain',
|
|
||||||
};
|
|
||||||
case 'zh-CN':
|
|
||||||
return {
|
|
||||||
translation: t('lng.chinese'),
|
|
||||||
icon: 'china',
|
|
||||||
};
|
|
||||||
case 'ja-JP':
|
|
||||||
return {
|
|
||||||
translation: t('lng.japanese'),
|
|
||||||
icon: 'japan',
|
|
||||||
};
|
|
||||||
case 'uk-UA':
|
|
||||||
return {
|
|
||||||
translation: t('lng.ukraine'),
|
|
||||||
icon: 'ukraine',
|
|
||||||
};
|
|
||||||
case 'km-KH':
|
|
||||||
return {
|
|
||||||
translation: t('lng.khmer'),
|
|
||||||
icon: 'khmer',
|
|
||||||
};
|
|
||||||
default:
|
|
||||||
return {
|
|
||||||
translation: t('lng.english'),
|
|
||||||
icon: 'usa',
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const LanguageSwitch = () => {
|
|
||||||
const themeContext = useContext(ThemeContext);
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const [open, setOpen] = useState(false);
|
|
||||||
const anchorRef = useRef<HTMLButtonElement>(null);
|
|
||||||
|
|
||||||
if (!themeContext) {
|
|
||||||
throw Error(t('theme-context-not-correct-used'));
|
|
||||||
}
|
|
||||||
|
|
||||||
const languages = (i18next.options.resources ? Object.keys(i18next.options.resources) : []) as Array<Language>;
|
|
||||||
const currentLanguage = themeContext.language;
|
|
||||||
|
|
||||||
const { translation: userLanguage } = getTranslatedCurrentLanguageDetails(t, currentLanguage);
|
|
||||||
|
|
||||||
const handleToggle = useCallback(() => {
|
|
||||||
setOpen(prevOpen => !prevOpen);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleClose = useCallback(
|
|
||||||
(event: MouseEvent<HTMLLIElement | Document | HTMLAnchorElement>) => {
|
|
||||||
if (anchorRef.current) {
|
|
||||||
if (anchorRef.current.contains(event.currentTarget)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setOpen(false);
|
|
||||||
},
|
|
||||||
[setOpen]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleSwitchLanguage = useCallback(
|
|
||||||
(language: Language) => (event: MouseEvent<HTMLLIElement>) => {
|
|
||||||
themeContext.setLanguage(language);
|
|
||||||
handleClose(event);
|
|
||||||
},
|
|
||||||
[handleClose, themeContext]
|
|
||||||
);
|
|
||||||
|
|
||||||
// return focus to the button when we transitioned from !open -> open
|
|
||||||
const prevOpen = React.useRef(open);
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (prevOpen.current === true && open === false) {
|
|
||||||
if (anchorRef.current) {
|
|
||||||
anchorRef.current.focus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
prevOpen.current = open;
|
|
||||||
}, [open]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Wrapper>
|
|
||||||
<Tooltip enterDelay={300} title={t('change-language')}>
|
|
||||||
<SwitchButton color="inherit" onClick={handleToggle} ref={anchorRef}>
|
|
||||||
<LanguageIcon />
|
|
||||||
<UserLanguage>{userLanguage}</UserLanguage>
|
|
||||||
<ExpandMoreIcon fontSize="small" />
|
|
||||||
</SwitchButton>
|
|
||||||
</Tooltip>
|
|
||||||
<Popper anchorEl={anchorRef.current} disablePortal={true} open={open} role={undefined} transition={true}>
|
|
||||||
{({ TransitionProps }) => (
|
|
||||||
<Grow {...TransitionProps}>
|
|
||||||
<StyledPaper>
|
|
||||||
<ClickAwayListener onClickAway={handleClose}>
|
|
||||||
<MenuList>
|
|
||||||
{languages
|
|
||||||
.filter(language => language !== currentLanguage)
|
|
||||||
.map(language => {
|
|
||||||
const { icon, translation } = getTranslatedCurrentLanguageDetails(t, language);
|
|
||||||
return (
|
|
||||||
<StyledMenuItem
|
|
||||||
key={language}
|
|
||||||
onClick={handleSwitchLanguage(language)}
|
|
||||||
selected={userLanguage === translation}>
|
|
||||||
<Icon name={icon} size="md" />
|
|
||||||
{translation}
|
|
||||||
</StyledMenuItem>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<Box my={1}>
|
|
||||||
<Divider />
|
|
||||||
</Box>
|
|
||||||
<MenuItem button={true}>
|
|
||||||
<StyledLink external={true} onClick={handleClose} to={VERDACCIO_UI_GITHUB_REPOSITORY}>
|
|
||||||
{`${t('help-to-translate')}`}
|
|
||||||
</StyledLink>
|
|
||||||
</MenuItem>
|
|
||||||
</MenuList>
|
|
||||||
</ClickAwayListener>
|
|
||||||
</StyledPaper>
|
|
||||||
</Grow>
|
|
||||||
)}
|
|
||||||
</Popper>
|
|
||||||
</Wrapper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default LanguageSwitch;
|
|
||||||
|
|
||||||
const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
|
|
||||||
display: 'none',
|
|
||||||
[`@media screen and (min-width: ${theme && theme.breakPoints.medium}px)`]: {
|
|
||||||
display: 'inline-block',
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
const UserLanguage = styled('span')<{ theme?: Theme }>(({ theme }) => ({
|
|
||||||
display: 'none',
|
|
||||||
[`@media screen and (min-width: ${theme && theme.breakPoints.medium}px)`]: {
|
|
||||||
display: 'inline-block',
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
const SwitchButton = withStyles((theme: Theme) => ({
|
|
||||||
label: {
|
|
||||||
display: 'grid',
|
|
||||||
gridGap: theme?.spacing(1),
|
|
||||||
gridTemplateColumns: '24px 20px',
|
|
||||||
[`@media screen and (min-width: ${theme && theme.breakPoints.medium}px)`]: {
|
|
||||||
gridTemplateColumns: '24px 1fr 20px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}))(Button);
|
|
||||||
|
|
||||||
const StyledMenuItem = withStyles((theme: Theme) => ({
|
|
||||||
root: {
|
|
||||||
display: 'grid',
|
|
||||||
cursor: 'pointer',
|
|
||||||
gridGap: theme?.spacing(0.5),
|
|
||||||
gridTemplateColumns: '20px 1fr',
|
|
||||||
alignItems: 'center',
|
|
||||||
'&:first-child': {
|
|
||||||
borderTopLeftRadius: 4,
|
|
||||||
borderTopRightRadius: 4,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}))(MenuItem);
|
|
||||||
|
|
||||||
const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
|
|
||||||
color: theme?.palette.type === 'dark' ? theme?.palette.white : theme?.palette.text.primary,
|
|
||||||
textDecoration: 'none',
|
|
||||||
}));
|
|
||||||
|
|
||||||
const StyledPaper = styled(Paper)<{ theme?: Theme }>(({ theme }) => ({
|
|
||||||
backgroundColor: theme?.palette.type === 'dark' ? theme?.palette.cyanBlue : theme?.palette.white,
|
|
||||||
}));
|
|
||||||
@ -1 +0,0 @@
|
|||||||
export { default } from './LanguageSwitch';
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import React, { MouseEvent } from 'react';
|
import React 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,7 +8,6 @@ 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,7 +1,5 @@
|
|||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
|
|
||||||
import { Theme } from '../../design-tokens/theme';
|
|
||||||
|
|
||||||
export const Wrapper = styled('div')({
|
export const Wrapper = styled('div')({
|
||||||
transform: 'translate(-50%, -50%)',
|
transform: 'translate(-50%, -50%)',
|
||||||
top: '50%',
|
top: '50%',
|
||||||
@ -9,9 +7,9 @@ export const Wrapper = styled('div')({
|
|||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
});
|
});
|
||||||
|
|
||||||
export const Badge = styled('div')<{ theme?: Theme }>(({ theme }) => ({
|
export const Badge = styled('div')({
|
||||||
margin: '0 0 30px 0',
|
margin: '0 0 30px 0',
|
||||||
borderRadius: 25,
|
borderRadius: 25,
|
||||||
boxShadow: '0 10px 20px 0 rgba(69, 58, 100, 0.2)',
|
boxShadow: '0 10px 20px 0 rgba(69, 58, 100, 0.2)',
|
||||||
background: theme?.palette.type === 'dark' ? theme?.palette.black : '#f7f8f6',
|
background: '#f7f8f6',
|
||||||
}));
|
});
|
||||||
|
|||||||
@ -1,9 +1,8 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import { render, waitForElement, fireEvent } from '../../utils/test-react-testing-library';
|
import { render, waitForElement, fireEvent, waitForElementToBeRemoved } 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';
|
||||||
|
|
||||||
@ -36,13 +35,13 @@ describe('<LoginDialog /> component', () => {
|
|||||||
onClose: jest.fn(),
|
onClose: jest.fn(),
|
||||||
};
|
};
|
||||||
|
|
||||||
const { getByTestId } = render(
|
const { getByText } = 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(() => getByTestId('login-dialog-form-login-button'));
|
const loginDialogHeading = await waitForElement(() => getByText('Sign in'));
|
||||||
expect(loginDialogHeading).toBeTruthy();
|
expect(loginDialogHeading).toBeTruthy();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
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';
|
||||||
@ -17,11 +16,10 @@ 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(t('app-context-not-correct-used'));
|
throw Error('The app Context was not correct used');
|
||||||
}
|
}
|
||||||
|
|
||||||
const [error, setError] = useState();
|
const [error, setError] = useState();
|
||||||
@ -45,7 +43,7 @@ const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog data-testid="login--dialog" fullWidth={true} id="login--dialog" maxWidth="sm" onClose={onClose} open={open}>
|
<Dialog fullWidth={true} id="login--dialog" maxWidth="sm" onClose={onClose} open={open}>
|
||||||
<LoginDialogCloseButton onClose={onClose} />
|
<LoginDialogCloseButton onClose={onClose} />
|
||||||
<DialogContent>
|
<DialogContent>
|
||||||
<LoginDialogHeader />
|
<LoginDialogHeader />
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
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';
|
||||||
@ -18,15 +17,12 @@ interface Props {
|
|||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const LoginDialogCloseButton: React.FC<Props> = ({ onClose }) => {
|
const LoginDialogCloseButton: React.FC<Props> = ({ onClose }) => (
|
||||||
const { t } = useTranslation();
|
|
||||||
return (
|
|
||||||
<DialogTitle>
|
<DialogTitle>
|
||||||
<StyledIconButton data-testid="close-login-dialog-button" onClick={onClose}>
|
<StyledIconButton data-testid="close-login-dialog-button" onClick={onClose}>
|
||||||
<CloseIcon titleAccess={t('button.close')} />
|
<CloseIcon titleAccess="Close Dialog" />
|
||||||
</StyledIconButton>
|
</StyledIconButton>
|
||||||
</DialogTitle>
|
</DialogTitle>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
export default LoginDialogCloseButton;
|
export default LoginDialogCloseButton;
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
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';
|
||||||
@ -29,7 +28,6 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
|
const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
|
||||||
const { t } = useTranslation();
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
errors,
|
errors,
|
||||||
@ -50,13 +48,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: t('form-validation.required-field') },
|
required: { value: true, message: 'This field is required' },
|
||||||
minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
|
minLength: { value: 2, message: 'This field required the min length of 2' },
|
||||||
})}
|
})}
|
||||||
label={t('form.username')}
|
label="Username"
|
||||||
margin="normal"
|
margin="normal"
|
||||||
name="username"
|
name="username"
|
||||||
placeholder={t('form-placeholder.username')}
|
placeholder="Your username"
|
||||||
required={true}
|
required={true}
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
/>
|
/>
|
||||||
@ -67,13 +65,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: t('form-validation.required-field') },
|
required: { value: true, message: 'This field is required' },
|
||||||
minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
|
minLength: { value: 2, message: 'This field required the min length of 2' },
|
||||||
})}
|
})}
|
||||||
label={t('form.password')}
|
label="Password"
|
||||||
margin="normal"
|
margin="normal"
|
||||||
name="password"
|
name="password"
|
||||||
placeholder={t('form-placeholder.password')}
|
placeholder="Your strong password"
|
||||||
required={true}
|
required={true}
|
||||||
type="password"
|
type="password"
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
@ -81,14 +79,13 @@ 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">
|
||||||
{t('button.login')}
|
{'Sign In'}
|
||||||
</StyledButton>
|
</StyledButton>
|
||||||
</StyledForm>
|
</StyledForm>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -8,14 +8,13 @@ import { Theme } from '../../design-tokens/theme';
|
|||||||
import { LoginError } from '../../utils/login';
|
import { LoginError } from '../../utils/login';
|
||||||
|
|
||||||
const StyledSnackbarContent = styled(SnackbarContent)<{ theme?: Theme }>(({ theme }) => ({
|
const StyledSnackbarContent = styled(SnackbarContent)<{ theme?: Theme }>(({ theme }) => ({
|
||||||
backgroundColor: theme?.palette.error.dark,
|
backgroundColor: theme.palette.error.dark,
|
||||||
color: theme?.palette.white,
|
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const StyledErrorIcon = styled(Error)<{ theme?: Theme }>(({ theme }) => ({
|
const StyledErrorIcon = styled(Error)<{ theme?: Theme }>(({ theme }) => ({
|
||||||
fontSize: 20,
|
fontSize: 20,
|
||||||
opacity: 0.9,
|
opacity: 0.9,
|
||||||
marginRight: theme?.spacing(1),
|
marginRight: theme.spacing(1),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export interface FormValues {
|
export interface FormValues {
|
||||||
|
|||||||
@ -2,46 +2,43 @@ 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';
|
||||||
import Box from '../../muiComponents/Box';
|
import Box from '../../muiComponents/Box';
|
||||||
import IconButton from '../../muiComponents/IconButton';
|
import IconButton from '../../muiComponents/IconButton';
|
||||||
import { Theme } from '../../design-tokens/theme';
|
import { Theme } from '../../design-tokens/theme';
|
||||||
|
|
||||||
|
const StyledAvatar = styled(Avatar)<{ theme?: Theme }>(({ theme }) => ({
|
||||||
|
margin: theme.spacing(1),
|
||||||
|
backgroundColor: theme.palette.primary.main,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({
|
||||||
|
position: 'absolute',
|
||||||
|
right: theme.spacing() / 2,
|
||||||
|
top: theme.spacing() / 2,
|
||||||
|
color: theme.palette.grey[500],
|
||||||
|
}));
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
onClose?: () => void;
|
onClose?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
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={t('button.close')} onClick={onClose}>
|
<StyledIconButton aria-label="Close" onClick={onClose}>
|
||||||
<CloseIcon />
|
<CloseIcon />
|
||||||
</StyledIconButton>
|
</StyledIconButton>
|
||||||
)}
|
)}
|
||||||
<StyledAvatar>
|
<StyledAvatar>
|
||||||
<LockOutlined />
|
<LockOutlined />
|
||||||
</StyledAvatar>
|
</StyledAvatar>
|
||||||
<Heading>{t('button.login')}</Heading>
|
<Heading>{'Sign in'}</Heading>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default LoginDialogHeader;
|
export default LoginDialogHeader;
|
||||||
|
|
||||||
const StyledAvatar = styled(Avatar)<{ theme?: Theme }>(({ theme }) => ({
|
|
||||||
margin: theme?.spacing(1),
|
|
||||||
backgroundColor: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
|
|
||||||
color: theme?.palette.white,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({
|
|
||||||
position: 'absolute',
|
|
||||||
right: theme?.spacing() / 2,
|
|
||||||
top: theme?.spacing() / 2,
|
|
||||||
color: theme?.palette.grey[500],
|
|
||||||
}));
|
|
||||||
|
|||||||
@ -1,52 +1,32 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
|
|
||||||
import { Theme } from '../../design-tokens/theme';
|
import logo from './img/verdaccio-blackwhite.svg';
|
||||||
|
|
||||||
import defaultLogo from './img/logo.svg';
|
|
||||||
import blackAndWithLogo from './img/logo-black-and-white.svg';
|
|
||||||
|
|
||||||
export enum Size {
|
export enum Size {
|
||||||
|
Tiny = '20px',
|
||||||
Small = '40px',
|
Small = '40px',
|
||||||
Big = '90px',
|
Big = '90px',
|
||||||
}
|
}
|
||||||
|
|
||||||
const logos = {
|
|
||||||
light: defaultLogo,
|
|
||||||
dark: blackAndWithLogo,
|
|
||||||
};
|
|
||||||
|
|
||||||
const logo = window.VERDACCIO_LOGO;
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
size?: Size;
|
size?: Size;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Logo: React.FC<Props> = ({ size = Size.Small }) => {
|
const StyledLogo = styled('div')<Props>(props => ({
|
||||||
if (logo) {
|
|
||||||
return (
|
|
||||||
<ImageLogo>
|
|
||||||
<img alt="logo" height="40px" src={logo} />
|
|
||||||
</ImageLogo>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return <StyledLogo size={size} />;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Logo;
|
|
||||||
|
|
||||||
const ImageLogo = styled('div')({
|
|
||||||
fontSize: 0,
|
|
||||||
});
|
|
||||||
|
|
||||||
const StyledLogo = styled('div')<Props & { theme?: Theme }>(({ size, theme }) => ({
|
|
||||||
display: 'inline-block',
|
display: 'inline-block',
|
||||||
verticalAlign: 'middle',
|
verticalAlign: 'middle',
|
||||||
boxSizing: 'border-box',
|
boxSizing: 'border-box',
|
||||||
backgroundPosition: 'center',
|
backgroundPosition: 'center',
|
||||||
backgroundSize: 'contain',
|
backgroundSize: 'contain',
|
||||||
backgroundImage: `url(${logos[theme?.palette.type]})`,
|
backgroundImage: `url(${logo})`,
|
||||||
backgroundRepeat: ' no-repeat',
|
backgroundRepeat: ' no-repeat',
|
||||||
width: size,
|
width: props.size,
|
||||||
height: size,
|
height: props.size,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
const Logo: React.FC<Props> = ({ size = Size.Small }) => {
|
||||||
|
return <StyledLogo size={size} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Logo;
|
||||||
|
|||||||
@ -1 +0,0 @@
|
|||||||
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-19.8%" y="-11.7%" width="139.6%" height="140.4%" filterUnits="objectBoundingBox" id="a"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter><filter x="-33.9%" y="-50%" width="167.9%" height="272.7%" filterUnits="objectBoundingBox" id="c"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter><path id="b" d="M48 16.729L32.672 47h-8.874L0 0h15.328l12.907 25.492 4.437-8.763H48z"/><path d="M35.2 11H28V8.643h8.4l1.2-2.357H32V3.929h6.8l.8-1.572H36V0h20l-5.6 11H35.2z" id="d"/></defs><g fill="none" fill-rule="evenodd"><rect fill="#000" width="100" height="100" rx="37"/><g transform="translate(22 30)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill-opacity=".6" fill="#FFF" xlink:href="#b"/></g><g transform="translate(22 30)"><use fill="#000" filter="url(#c)" xlink:href="#d"/><use fill="#FFF" xlink:href="#d"/></g><path fill="#FFF" d="M54.785 77H45.88L22 30h15.38L58 70.718z"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
@ -1 +0,0 @@
|
|||||||
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="verdaccio"><Title>Verdaccio</Title><defs><path id="b" d="M48 17.6L32.8 48H24L.4.8h15.2l12.8 25.6 4.4-8.8H48z"/><filter x="-20%" y="-11.7%" width="139.9%" height="140.3%" filterUnits="objectBoundingBox" id="a"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter><path id="d" d="M50.8 12H35.6L41.2.8h15.2L50.8 12z"/><filter x="-45.7%" y="-49.1%" width="191.3%" height="269.6%" filterUnits="objectBoundingBox" id="c"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter></defs><g fill="none" fill-rule="evenodd"><rect fill="#F7F8F6" width="100" height="100" rx="37"/><g transform="translate(22 29)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><path stroke="#405236" stroke-width="2.4" d="M46.058 18.8H33.542L28.4 29.083 14.858 2H2.342l22.4 44.8h7.316l14-28z" stroke-linejoin="square" fill="#405236"/></g><g transform="translate(22 29)"><use fill="#000" filter="url(#c)" xlink:href="#d"/><path stroke="#CD4000" stroke-width="2.4" d="M50.058 10.8l4.4-8.8H41.942l-4.4 8.8h12.516z" stroke-linejoin="square" fill="#CD4000"/></g><path d="M54.06 75.8l2.575-5.112L36.857 31H24.342l22.4 44.8h7.319z" stroke="#405236" stroke-width="2.4" fill="#4A5E3F"/><path d="M59.6 31h15.221M55.6 35h15.221M51.6 39.8h15.221" stroke="#CD4000" stroke-width="2.4" stroke-linecap="square"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.9 KiB |
31
src/components/Logo/img/verdaccio-blackwhite.svg
Normal file
31
src/components/Logo/img/verdaccio-blackwhite.svg
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" id="verdaccio">
|
||||||
|
<Title>Verdaccio</Title>
|
||||||
|
<rect width="100" height="100" rx="37" fill="black" />
|
||||||
|
<g filter="url(#filter0_d)">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M70 46.7288L54.6723 77H45.7983L22 30L37.3277 30L50.2353 55.4915L54.6723 46.7288H70Z" fill="white" fill-opacity="0.6" />
|
||||||
|
</g>
|
||||||
|
<g filter="url(#filter1_d)">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M67.621 41H72.4L78 30H75.621H62.8H58V32.3571H61.6L60.8 33.9286H54V36.2857H59.6L58.4 38.6429H50V41H57.2H67.621Z" fill="white" />
|
||||||
|
</g>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M54.785 77H45.8804L22 30H37.3806L58 70.7175L54.785 77Z" fill="white" />
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_d" x="17" y="29" width="58" height="57" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
|
||||||
|
<feOffset dy="4" />
|
||||||
|
<feGaussianBlur stdDeviation="2.5" />
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646 0" />
|
||||||
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
|
||||||
|
</filter>
|
||||||
|
<filter id="filter1_d" x="45" y="29" width="38" height="21" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
|
||||||
|
<feOffset dy="4" />
|
||||||
|
<feGaussianBlur stdDeviation="2.5" />
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646 0" />
|
||||||
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
32
src/components/Logo/img/verdaccio.svg
Normal file
32
src/components/Logo/img/verdaccio.svg
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="verdaccio">
|
||||||
|
<Title>Verdaccio</Title>
|
||||||
|
<defs>
|
||||||
|
<path id="b" d="M48 17.6L32.8 48H24L.4.8h15.2l12.8 25.6 4.4-8.8H48z" />
|
||||||
|
<filter x="-20%" y="-11.7%" width="139.9%" height="140.3%" filterUnits="objectBoundingBox" id="a">
|
||||||
|
<feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1" />
|
||||||
|
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
|
||||||
|
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1" />
|
||||||
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1" />
|
||||||
|
</filter>
|
||||||
|
<path id="d" d="M50.8 12H35.6L41.2.8h15.2L50.8 12z" />
|
||||||
|
<filter x="-45.7%" y="-49.1%" width="191.3%" height="269.6%" filterUnits="objectBoundingBox" id="c">
|
||||||
|
<feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1" />
|
||||||
|
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
|
||||||
|
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1" />
|
||||||
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1" />
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<g fill="none" fill-rule="evenodd">
|
||||||
|
<rect fill="#F7F8F6" width="100" height="100" rx="37" />
|
||||||
|
<g transform="translate(22 29)">
|
||||||
|
<use fill="#000" filter="url(#a)" xlink:href="#b" />
|
||||||
|
<path stroke="#405236" stroke-width="2.4" d="M46.058 18.8H33.542L28.4 29.083 14.858 2H2.342l22.4 44.8h7.316l14-28z" stroke-linejoin="square" fill="#405236" />
|
||||||
|
</g>
|
||||||
|
<g transform="translate(22 29)">
|
||||||
|
<use fill="#000" filter="url(#c)" xlink:href="#d" />
|
||||||
|
<path stroke="#CD4000" stroke-width="2.4" d="M50.058 10.8l4.4-8.8H41.942l-4.4 8.8h12.516z" stroke-linejoin="square" fill="#CD4000" />
|
||||||
|
</g>
|
||||||
|
<path d="M54.06 75.8l2.575-5.112L36.857 31H24.342l22.4 44.8h7.319z" stroke="#405236" stroke-width="2.4" fill="#4A5E3F" />
|
||||||
|
<path d="M59.6 31h15.221M55.6 35h15.221M51.6 39.8h15.221" stroke="#CD4000" stroke-width="2.4" stroke-linecap="square" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
@ -1,7 +1,6 @@
|
|||||||
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';
|
||||||
@ -10,9 +9,22 @@ 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')({
|
||||||
|
width: '150px',
|
||||||
|
margin: '0 auto',
|
||||||
|
});
|
||||||
|
|
||||||
|
const StyledHeading = styled(Heading)<{ theme?: Theme }>(props => ({
|
||||||
|
color: props.theme && props.theme.palette.primary.main,
|
||||||
|
marginBottom: 16,
|
||||||
|
}));
|
||||||
|
|
||||||
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('/');
|
||||||
@ -27,25 +39,15 @@ const NotFound: React.FC = () => {
|
|||||||
flexGrow={1}
|
flexGrow={1}
|
||||||
justifyContent="center"
|
justifyContent="center"
|
||||||
p={2}>
|
p={2}>
|
||||||
<EmptyPackage alt={t('error.404.page-not-found')} src={PackageImg} />
|
<EmptyPackage alt="404 - Page not found" src={PackageImg} />
|
||||||
<StyledHeading className="not-found-text" variant="h4">
|
<StyledHeading className="not-found-text" variant="h4">
|
||||||
{t('error.404.sorry-we-could-not-find-it')}
|
{NOT_FOUND_TEXT}
|
||||||
</StyledHeading>
|
</StyledHeading>
|
||||||
<Button data-testid="not-found-go-to-home-button" onClick={handleGoHome} variant="contained">
|
<Button onClick={handleGoHome} variant="contained">
|
||||||
{t('button.go-to-the-home-page')}
|
{GO_TO_HOME_PAGE}
|
||||||
</Button>
|
</Button>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default NotFound;
|
export default NotFound;
|
||||||
|
|
||||||
const EmptyPackage = styled('img')({
|
|
||||||
width: '150px',
|
|
||||||
margin: '0 auto',
|
|
||||||
});
|
|
||||||
|
|
||||||
const StyledHeading = styled(Heading)<{ theme?: Theme }>(({ theme }) => ({
|
|
||||||
color: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.white,
|
|
||||||
marginBottom: 16,
|
|
||||||
}));
|
|
||||||
|
|||||||
@ -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 from './NotFound';
|
import NotFound, { GO_TO_HOME_PAGE } 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 { getByTestId } = render(
|
const { getByText } = render(
|
||||||
<Router>
|
<Router>
|
||||||
<NotFound />
|
<NotFound />
|
||||||
</Router>
|
</Router>
|
||||||
);
|
);
|
||||||
|
|
||||||
const node = getByTestId('not-found-go-to-home-button');
|
const node = getByText(GO_TO_HOME_PAGE);
|
||||||
fireEvent.click(node);
|
fireEvent.click(node);
|
||||||
|
|
||||||
expect(spy).toHaveBeenCalled();
|
expect(spy).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -27,7 +27,6 @@ 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 } from './NotFound';
|
export { default, NOT_FOUND_TEXT } from './NotFound';
|
||||||
|
|||||||
@ -2,14 +2,12 @@ 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, getAuthorName } from '../../utils/package';
|
import { formatDate, formatDateDistance } 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';
|
||||||
@ -66,13 +64,11 @@ 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'} />
|
||||||
{t('package.version', { version })}
|
{`v${version}`}
|
||||||
</OverviewItem>
|
</OverviewItem>
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -81,7 +77,7 @@ const Package: React.FC<PackageInterface> = ({
|
|||||||
<Author>
|
<Author>
|
||||||
<Avatar alt={authorName} src={authorAvatar} />
|
<Avatar alt={authorName} src={authorAvatar} />
|
||||||
<Details>
|
<Details>
|
||||||
<Text text={getAuthorName(authorName)} />
|
<Text text={authorName} />
|
||||||
</Details>
|
</Details>
|
||||||
</Author>
|
</Author>
|
||||||
);
|
);
|
||||||
@ -107,7 +103,7 @@ const Package: React.FC<PackageInterface> = ({
|
|||||||
time && (
|
time && (
|
||||||
<OverviewItem>
|
<OverviewItem>
|
||||||
<Icon name="time" />
|
<Icon name="time" />
|
||||||
<Published>{t('package.published-on', { time: formatDate(time) })}</Published>
|
<Published>{`Published on ${formatDate(time)} •`}</Published>
|
||||||
{formatDateDistance(time)}
|
{formatDateDistance(time)}
|
||||||
</OverviewItem>
|
</OverviewItem>
|
||||||
);
|
);
|
||||||
@ -115,26 +111,26 @@ const Package: React.FC<PackageInterface> = ({
|
|||||||
const renderHomePageLink = (): React.ReactNode =>
|
const renderHomePageLink = (): React.ReactNode =>
|
||||||
homepage &&
|
homepage &&
|
||||||
isURL(homepage) && (
|
isURL(homepage) && (
|
||||||
<Link external={true} to={homepage}>
|
<a href={homepage} target={'_blank'}>
|
||||||
<Tooltip aria-label={t('package.homepage')} title={t('package.visit-home-page')}>
|
<Tooltip aria-label={'Homepage'} title={'Visit homepage'}>
|
||||||
<IconButton aria-label={t('package.homepage')}>
|
<IconButton aria-label={'Homepage'}>
|
||||||
<HomeIcon />
|
<HomeIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</Link>
|
</a>
|
||||||
);
|
);
|
||||||
|
|
||||||
const renderBugsLink = (): React.ReactNode =>
|
const renderBugsLink = (): React.ReactNode =>
|
||||||
bugs &&
|
bugs &&
|
||||||
bugs.url &&
|
bugs.url &&
|
||||||
isURL(bugs.url) && (
|
isURL(bugs.url) && (
|
||||||
<Link external={true} to={bugs.url}>
|
<a href={bugs.url} target={'_blank'}>
|
||||||
<Tooltip aria-label={t('package.bugs')} title={t('package.open-an-issue')}>
|
<Tooltip aria-label={'Bugs'} title={'Open an issue'}>
|
||||||
<IconButton aria-label={t('package.bugs')}>
|
<IconButton aria-label={'Bugs'}>
|
||||||
<BugReport />
|
<BugReport />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</Link>
|
</a>
|
||||||
);
|
);
|
||||||
|
|
||||||
const renderDownloadLink = (): React.ReactNode =>
|
const renderDownloadLink = (): React.ReactNode =>
|
||||||
@ -142,13 +138,13 @@ const Package: React.FC<PackageInterface> = ({
|
|||||||
dist.tarball &&
|
dist.tarball &&
|
||||||
isURL(dist.tarball) && (
|
isURL(dist.tarball) && (
|
||||||
// eslint-disable-next-line
|
// eslint-disable-next-line
|
||||||
<Link to="#" external={true} onClick={downloadTarball(dist.tarball.replace(`https://registry.npmjs.org/`, window.location.href))}>
|
<a onClick={downloadTarball(dist.tarball.replace(`https://registry.npmjs.org/`, window.location.href))} target={'_blank'}>
|
||||||
<Tooltip aria-label={t('package.download', { what: t('package.the-tar-file') })} title={t('package.tarball')}>
|
<Tooltip aria-label={'Download the tar file'} title={'Download tarball'}>
|
||||||
<IconButton aria-label={t('package.download')}>
|
<IconButton aria-label={'Download'}>
|
||||||
<DownloadIcon />
|
<DownloadIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</Link>
|
</a>
|
||||||
);
|
);
|
||||||
|
|
||||||
const renderPrimaryComponent = (): React.ReactNode => {
|
const renderPrimaryComponent = (): React.ReactNode => {
|
||||||
@ -159,7 +155,7 @@ const Package: React.FC<PackageInterface> = ({
|
|||||||
<PackageTitle className="package-title">{packageName}</PackageTitle>
|
<PackageTitle className="package-title">{packageName}</PackageTitle>
|
||||||
</WrapperLink>
|
</WrapperLink>
|
||||||
</Grid>
|
</Grid>
|
||||||
<GridRightAligned alignItems="center" container={true} item={true} justify="flex-end" xs={true}>
|
<GridRightAligned item={true} xs={true}>
|
||||||
{renderHomePageLink()}
|
{renderHomePageLink()}
|
||||||
{renderBugsLink()}
|
{renderBugsLink()}
|
||||||
{renderDownloadLink()}
|
{renderDownloadLink()}
|
||||||
|
|||||||
@ -15,7 +15,7 @@ export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({
|
|||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
margin: '0 0 0 16px',
|
margin: '0 0 0 16px',
|
||||||
color: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
|
color: theme && theme.palette.greyLight2,
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
[`@media (max-width: ${theme && theme.breakPoints.medium}px)`]: {
|
[`@media (max-width: ${theme && theme.breakPoints.medium}px)`]: {
|
||||||
':nth-of-type(3)': {
|
':nth-of-type(3)': {
|
||||||
@ -29,20 +29,20 @@ export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({
|
|||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const Icon = styled(Ico)<{ theme?: Theme }>(({ theme }) => ({
|
export const Icon = styled(Ico)<{ theme?: Theme }>(props => ({
|
||||||
margin: '2px 10px 0 0',
|
margin: '2px 10px 0 0',
|
||||||
fill: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
|
fill: props.theme && props.theme.palette.greyLight2,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const Published = styled('span')<{ theme?: Theme }>(({ theme }) => ({
|
export const Published = styled('span')<{ theme?: Theme }>(props => ({
|
||||||
color: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
|
color: props.theme && props.theme.palette.greyLight2,
|
||||||
margin: '0 5px 0 0',
|
margin: '0 5px 0 0',
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const Text = styled(Label)<{ theme?: Theme }>(({ theme }) => ({
|
export const Text = styled(Label)<{ theme?: Theme }>(props => ({
|
||||||
fontSize: '12px',
|
fontSize: '12px',
|
||||||
fontWeight: theme?.fontWeight.semiBold,
|
fontWeight: props.theme && props.theme.fontWeight.semiBold,
|
||||||
color: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
|
color: props.theme && props.theme.palette.greyLight2,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const Details = styled('span')({
|
export const Details = styled('span')({
|
||||||
@ -71,8 +71,11 @@ export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({
|
|||||||
fontSize: 20,
|
fontSize: 20,
|
||||||
display: 'block',
|
display: 'block',
|
||||||
marginBottom: 12,
|
marginBottom: 12,
|
||||||
color: theme?.palette.type == 'dark' ? theme?.palette.dodgerBlue : theme?.palette.eclipse,
|
color: theme?.palette?.eclipse,
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
|
':hover': {
|
||||||
|
color: theme && theme.palette.black,
|
||||||
|
},
|
||||||
[`@media (max-width: ${theme && theme.breakPoints.small}px)`]: {
|
[`@media (max-width: ${theme && theme.breakPoints.small}px)`]: {
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
marginBottom: 8,
|
marginBottom: 8,
|
||||||
@ -83,15 +86,14 @@ export const GridRightAligned = styled(Grid)({
|
|||||||
textAlign: 'right',
|
textAlign: 'right',
|
||||||
});
|
});
|
||||||
|
|
||||||
export const PackageList = styled(List)<{ theme?: Theme }>(({ theme }) => ({
|
export const PackageList = styled(List)<{ theme?: Theme }>(props => ({
|
||||||
padding: '12px 0 12px 0',
|
padding: '12px 0 12px 0',
|
||||||
':hover': {
|
':hover': {
|
||||||
backgroundColor: theme?.palette?.type == 'dark' ? theme?.palette?.secondary.main : theme?.palette?.greyLight3,
|
backgroundColor: props.theme && props.theme.palette.greyLight3,
|
||||||
},
|
},
|
||||||
'> :last-child': {
|
'> :last-child': {
|
||||||
paddingTop: 0,
|
paddingTop: 0,
|
||||||
},
|
},
|
||||||
borderRadius: 4,
|
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const IconButton = styled(MuiIconButton)({
|
export const IconButton = styled(MuiIconButton)({
|
||||||
@ -104,8 +106,7 @@ export const IconButton = styled(MuiIconButton)({
|
|||||||
export const TagContainer = styled('span')<{ theme?: Theme }>(({ theme }) => ({
|
export const TagContainer = styled('span')<{ theme?: Theme }>(({ theme }) => ({
|
||||||
marginTop: 8,
|
marginTop: 8,
|
||||||
marginBottom: 12,
|
marginBottom: 12,
|
||||||
display: 'flex',
|
display: 'block',
|
||||||
flexWrap: 'wrap',
|
|
||||||
[`@media (max-width: ${theme && theme.breakPoints.medium}px)`]: {
|
[`@media (max-width: ${theme && theme.breakPoints.medium}px)`]: {
|
||||||
display: 'none',
|
display: 'none',
|
||||||
},
|
},
|
||||||
@ -115,8 +116,8 @@ export const PackageListItemText = styled(ListItemText)({
|
|||||||
paddingRight: 0,
|
paddingRight: 0,
|
||||||
});
|
});
|
||||||
|
|
||||||
export const Description = styled(Typography)<{ theme?: Theme }>(({ theme }) => ({
|
export const Description = styled(Typography)<{ theme?: Theme }>(props => ({
|
||||||
color: theme?.palette.type === 'light' ? theme?.palette.greyDark2 : theme?.palette.white,
|
color: props?.theme?.palette.greyDark2,
|
||||||
fontSize: '14px',
|
fontSize: '14px',
|
||||||
paddingRight: 0,
|
paddingRight: 0,
|
||||||
}));
|
}));
|
||||||
|
|||||||
@ -12,9 +12,7 @@ describe('<Readme /> component', () => {
|
|||||||
|
|
||||||
test('should dangerously set html', () => {
|
test('should dangerously set html', () => {
|
||||||
const wrapper = mount(<Readme description="<h1>This is a test string</h1>" />);
|
const wrapper = mount(<Readme description="<h1>This is a test string</h1>" />);
|
||||||
expect(wrapper.html()).toEqual(
|
expect(wrapper.html()).toEqual('<div class="markdown-body"><h1>This is a test string</h1></div>');
|
||||||
'<div class="markdown-body css-beaqbv-Wrapper ecnabbe0"><h1>This is a test string</h1></div>'
|
|
||||||
);
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,19 +1,10 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import 'github-markdown-css';
|
import 'github-markdown-css';
|
||||||
import styled from '@emotion/styled';
|
|
||||||
|
|
||||||
import { Theme } from '../../design-tokens/theme';
|
|
||||||
|
|
||||||
import { Props } from './types';
|
import { Props } from './types';
|
||||||
|
|
||||||
const Readme: React.FC<Props> = ({ description }) => (
|
const Readme: React.FC<Props> = ({ description }) => (
|
||||||
<Wrapper className="markdown-body" dangerouslySetInnerHTML={{ __html: description }} />
|
<div className="markdown-body" dangerouslySetInnerHTML={{ __html: description }} />
|
||||||
);
|
);
|
||||||
|
|
||||||
export default Readme;
|
export default Readme;
|
||||||
|
|
||||||
const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
|
|
||||||
background: theme?.palette.white,
|
|
||||||
color: theme?.palette.black,
|
|
||||||
padding: theme?.spacing(2, 3),
|
|
||||||
}));
|
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`<Readme /> component should dangerously set html 1`] = `"<div class=\\"markdown-body css-beaqbv-Wrapper ecnabbe0\\"><h1>This is a test string</h1></div>"`;
|
exports[`<Readme /> component should dangerously set html 1`] = `"<div class=\\"markdown-body\\"><h1>This is a test string</h1></div>"`;
|
||||||
|
|
||||||
exports[`<Readme /> component should load the component in default state 1`] = `"<div class=\\"markdown-body css-beaqbv-Wrapper ecnabbe0\\">test</div>"`;
|
exports[`<Readme /> component should load the component in default state 1`] = `"<div class=\\"markdown-body\\">test</div>"`;
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
import { css } from '@emotion/core';
|
||||||
|
|
||||||
import CopyToClipBoard from '../CopyToClipBoard';
|
import CopyToClipBoard from '../CopyToClipBoard';
|
||||||
import { getCLISetRegistry, getCLIChangePassword, getCLISetConfigRegistry } from '../../utils/cli-utils';
|
import { getCLISetRegistry, getCLIChangePassword, getCLISetConfigRegistry } from '../../utils/cli-utils';
|
||||||
@ -47,10 +48,10 @@ const RegistryInfoContent: React.FC<Props> = props => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Tabs
|
<Tabs
|
||||||
color={'primary'}
|
|
||||||
data-testid={'tabs-el'}
|
data-testid={'tabs-el'}
|
||||||
indicatorColor={'primary'}
|
indicatorColor="primary"
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
|
textColor="primary"
|
||||||
value={tabPosition}
|
value={tabPosition}
|
||||||
variant="fullWidth">
|
variant="fullWidth">
|
||||||
<Tab data-testid={'npm-tab'} label={NODE_MANAGER.npm} />
|
<Tab data-testid={'npm-tab'} label={NODE_MANAGER.npm} />
|
||||||
@ -68,7 +69,14 @@ const RegistryInfoContent: React.FC<Props> = props => {
|
|||||||
const TabContainer = ({ children }): JSX.Element => {
|
const TabContainer = ({ children }): JSX.Element => {
|
||||||
return (
|
return (
|
||||||
<CommandContainer>
|
<CommandContainer>
|
||||||
<Typography component="div">{children}</Typography>
|
<Typography
|
||||||
|
// className={css`
|
||||||
|
// padding: 0;
|
||||||
|
// min-height: 170;
|
||||||
|
// `}
|
||||||
|
component="div">
|
||||||
|
{children}
|
||||||
|
</Typography>
|
||||||
</CommandContainer>
|
</CommandContainer>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
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';
|
||||||
@ -8,19 +7,18 @@ import DialogActions from '../../muiComponents/DialogActions';
|
|||||||
import { Title, Content } from './styles';
|
import { Title, Content } from './styles';
|
||||||
import { Props } from './types';
|
import { Props } from './types';
|
||||||
|
|
||||||
const RegistryInfoDialog: React.FC<Props> = ({ open = false, children, onClose }) => {
|
const LABEL = 'CLOSE';
|
||||||
const { t } = useTranslation();
|
|
||||||
return (
|
const RegistryInfoDialog: React.FC<Props> = ({ open = false, children, onClose }) => (
|
||||||
<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}>{t('dialog.registry-info.title')}</Title>
|
<Title disableTypography={true}>{'Register Info'}</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}>
|
||||||
{t('button.close')}
|
{LABEL}
|
||||||
</Button>
|
</Button>
|
||||||
</DialogActions>
|
</DialogActions>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
export default RegistryInfoDialog;
|
export default RegistryInfoDialog;
|
||||||
|
|||||||
@ -10,7 +10,6 @@ export const Title = styled(DialogTitle)<{ theme?: Theme }>(props => ({
|
|||||||
fontSize: props.theme && props.theme.fontSize.lg,
|
fontSize: props.theme && props.theme.fontSize.lg,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const Content = styled(DialogContent)<{ theme?: Theme }>(({ theme }) => ({
|
export const Content = styled(DialogContent)({
|
||||||
padding: '0 24px',
|
padding: '0 24px',
|
||||||
backgroundColor: theme?.palette.background.default,
|
});
|
||||||
}));
|
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user