@verdaccio/ui-theme 3.1.0 → 6.0.0-6-next.11

package/src/i18n/deprecated_translations_dont_use/zh-CN.json

@@ -0,0 +1,168 @@
+{
+  "copy-to-clipboard": "复制到粘贴板",
+  "author-anonymous": "匿名",
+  "author-unknown": "未知",
+  "action-bar-action": {
+    "visit-home-page": "访问主页",
+    "open-an-issue": "提交问题",
+    "download-tarball": "下载压缩包"
+  },
+  "dialog": {
+    "registry-info": {
+      "title": "注册信息"
+    }
+  },
+  "header": {
+    "documentation": "文档",
+    "registry-info": "登记信息",
+    "greetings": "您好 "
+  },
+  "search": {
+    "packages": "查找Packages"
+  },
+  "autoComplete": {
+    "loading": "加载中...",
+    "no-results-found": "没有找到结果",
+    "clear": "清除",
+    "expand": "展开",
+    "collapse": "收回"
+  },
+  "tab": {
+    "uplinks": "Uplinks",
+    "versions": "版本",
+    "dependencies": "依赖",
+    "readme": "Readme"
+  },
+  "uplinks": {
+    "title": "Uplinks",
+    "no-items": "{{name}} 没有 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": "压缩包"
+  },
+  "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": "许可",
+      "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>捐助</0>这个 package"
+  },
+  "error": {
+    "unspecific": "发生了一些错误",
+    "404": {
+      "page-not-found": "404 - 页面不存在",
+      "sorry-we-could-not-find-it": "对不起, 我们没有找到..."
+    },
+    "app-context-not-correct-used": "app context 没有被正确使用",
+    "theme-context-not-correct-used": "theme context 没有被正确使用",
+    "package-meta-is-required-at-detail-context": "packageMeta 在 DetailContext 上是必需的"
+  },
+  "lng": {
+    "english": "英语",
+    "czech": "捷克語",
+    "japanese": "日语",
+    "portuguese": "葡萄牙语",
+    "spanish": "西班牙语",
+    "german": "德语",
+    "chinese": "中文",
+    "chineseTraditional": "正体中文",
+    "french": "法语",
+    "russian": "俄语",
+    "turkish": "土耳其",
+    "ukraine": "乌克兰",
+    "khmer": "高棉语"
+  },
+  "flag": {
+    "austria": "奥地利",
+    "brazil": "巴西",
+    "spain": "西班牙",
+    "nicaragua": "尼加拉瓜",
+    "india": "印度",
+    "china": "中国",
+    "germany": "德国",
+    "taiwan": "台湾"
+  }
+}

package/src/i18n/deprecated_translations_dont_use/zh-TW.json

@@ -0,0 +1,165 @@
+{
+  "copy-to-clipboard": "複製到剪貼簿",
+  "author-anonymous": "匿名",
+  "author-unknown": "未知",
+  "action-bar-action": {
+    "visit-home-page": "瀏覽首頁",
+    "open-an-issue": "提交問題",
+    "download-tarball": "下載 tarball"
+  },
+  "dialog": {
+    "registry-info": {
+      "title": "註冊資訊"
+    }
+  },
+  "header": {
+    "documentation": "文件",
+    "registry-info": "註冊資訊",
+    "greetings": "你好 "
+  },
+  "search": {
+    "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": "許可",
+      "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": "app context 没有被正確使用",
+    "theme-context-not-correct-used": "theme context 没有被正確使用",
+    "package-meta-is-required-at-detail-context": "packageMeta is required at DetailContext"
+  },
+  "lng": {
+    "english": "英文",
+    "czech": "捷克文",
+    "japanese": "日文",
+    "portuguese": "葡萄牙文",
+    "spanish": "西班牙文",
+    "german": "德文",
+    "chinese": "簡體中文",
+    "chineseTraditional": "正體中文",
+    "french": "法文",
+    "russian": "俄文",
+    "turkish": "土耳其",
+    "ukraine": "烏克蘭文",
+    "khmer": "高棉文"
+  },
+  "flag": {
+    "austria": "奧地利",
+    "brazil": "巴西",
+    "spain": "西班牙",
+    "nicaragua": "尼加拉瓜",
+    "india": "印度",
+    "china": "中國  ",
+    "germany": "德國",
+    "taiwan": "台灣"
+  }
+}

package/src/i18n/enabledLanguages.ts

@@ -0,0 +1,35 @@
+import Flags from 'country-flag-icons/react/3x2';
+import React from 'react';
+
+export const DEFAULT_LANGUAGE = 'en-US';
+
+export type LanguageConfiguration = {
+  lng: string;
+  menuKey: string;
+  icon: React.ReactElement;
+};
+
+export const listLanguages: LanguageConfiguration[] = [
+  { lng: DEFAULT_LANGUAGE, icon: Flags.US, menuKey: 'lng.english' },
+  { lng: 'cs-CZ', icon: Flags.CZ, menuKey: 'lng.czech' },
+  { lng: 'pt-BR', icon: Flags.BR, menuKey: 'lng.portuguese' },
+  { lng: 'es-ES', icon: Flags.ES, menuKey: 'lng.spanish' },
+  { lng: 'de-DE', icon: Flags.DE, menuKey: 'lng.german' },
+  { lng: 'fr-FR', icon: Flags.FR, menuKey: 'lng.french' },
+  { lng: 'zh-CN', icon: Flags.CN, menuKey: 'lng.chinese' },
+  { lng: 'ja-JP', icon: Flags.JP, menuKey: 'lng.japanese' },
+  { lng: 'ru-RU', icon: Flags.RU, menuKey: 'lng.russian' },
+  { lng: 'tr-TR', icon: Flags.TR, menuKey: 'lng.turkish' },
+  { lng: 'uk-UA', icon: Flags.UA, menuKey: 'lng.ukraine' },
+  { lng: 'km-KH', icon: Flags.KH, menuKey: 'lng.khme' },
+  { lng: 'zh-TW', icon: Flags.TW, menuKey: 'lng.chineseTraditional' },
+];
+
+const languages = listLanguages.reduce((acc, item: LanguageConfiguration) => {
+  acc.push(item.lng);
+  return acc;
+}, [] as string[]);
+
+export const listLanguagesAsString = languages;
+
+export type Language = keyof typeof listLanguagesAsString;

package/src/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { AppContainer } from 'react-hot-loader';
+import { Provider } from 'react-redux';
+
+import AppConfigurationContext from 'verdaccio-ui/providers/config';
+
+import App from './App';
+import StyleBaseline from './design-tokens/StyleBaseline';
+import ThemeProvider from './design-tokens/ThemeProvider';
+import { store } from './store';
+
+const rootNode = document.getElementById('root');
+const renderApp = (Component: React.ElementType): void => {
+  ReactDOM.render(
+    <Provider store={store}>
+      <AppContainer>
+        <AppConfigurationContext>
+          <ThemeProvider>
+            <StyleBaseline />
+            <Component />
+          </ThemeProvider>
+        </AppConfigurationContext>
+      </AppContainer>
+    </Provider>,
+    rootNode
+  );
+};
+
+renderApp(App);
+
+if (module.hot) {
+  module.hot.accept('./App', () => {
+    renderApp(App);
+  });
+}

package/src/lib/constants.ts

@@ -0,0 +1,9 @@
+export const DIST_TAGS = 'dist-tags';
+
+export const HEADERS = {
+  JSON: 'application/json',
+};
+
+export const API_ERROR = {
+  BAD_USERNAME_PASSWORD: 'bad username/password, access denied',
+};

package/src/pages/Version/DetailContainer/Dependencies/Dependencies.test.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { HashRouter } from 'react-router-dom';
+
+import { render } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import { DetailContextProvider } from '../../context';
+
+import Dependencies from './Dependencies';
+
+describe('<Dependencies /> component', () => {
+  test('Renders a message when there are no dependencies', () => {
+    // Given
+    const packageMeta = {
+      latest: {
+        name: 'verdaccio',
+        version: '4.0.0',
+        author: {
+          name: 'verdaccio user',
+          email: 'verdaccio.user@verdaccio.org',
+          url: '',
+          avatar: 'https://www.gravatar.com/avatar/000000',
+        },
+        dist: { fileCount: 0, unpackedSize: 0 },
+        dependencies: {},
+        devDependencies: {},
+        peerDependencies: {},
+      },
+      _uplinks: {},
+    };
+
+    // When
+    const { getByText } = render(
+      <DetailContextProvider value={{ packageMeta }}>
+        <Dependencies />
+      </DetailContextProvider>
+    );
+
+    // Then
+    expect(getByText('verdaccio has no dependencies.')).toBeDefined();
+  });
+
+  test('Renders a link to each dependency', () => {
+    // Given
+    const packageMeta = {
+      latest: {
+        name: 'verdaccio',
+        version: '4.0.0',
+        author: {
+          name: 'verdaccio user',
+          email: 'verdaccio.user@verdaccio.org',
+          url: '',
+          avatar: 'https://www.gravatar.com/avatar/000000',
+        },
+        dist: { fileCount: 0, unpackedSize: 0 },
+        dependencies: {
+          react: '16.9.0',
+          'react-dom': '16.9.0',
+        },
+        devDependencies: {
+          'babel-core': '7.0.0-beta6',
+        },
+        peerDependencies: {
+          'styled-components': '5.0.0',
+        },
+      },
+      _uplinks: {},
+    };
+
+    // When
+    const { getByText } = render(
+      <HashRouter>
+        <DetailContextProvider value={{ packageMeta }}>
+          <Dependencies />
+        </DetailContextProvider>
+      </HashRouter>
+    );
+
+    // Then
+    // FIXME: currently MaterialUI chips do not support the children
+    // prop, therefore it is impossible to use proper links for
+    // dependencies. Those are for now clickable spans
+
+    expect(getByText('dependencies (2)')).toBeDefined();
+    expect(getByText('react@16.9.0').tagName).toBe('SPAN');
+    expect(getByText('react-dom@16.9.0').tagName).toBe('SPAN');
+
+    expect(getByText('devDependencies (1)')).toBeDefined();
+    expect(getByText('babel-core@7.0.0-beta6').tagName).toBe('SPAN');
+
+    expect(getByText('peerDependencies (1)')).toBeDefined();
+    expect(getByText('styled-components@5.0.0').tagName).toBe('SPAN');
+  });
+});

package/src/pages/Version/DetailContainer/Dependencies/Dependencies.tsx

@@ -0,0 +1,100 @@
+import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
+
+import CardContent from 'verdaccio-ui/components/CardContent';
+
+import { PackageDependencies } from '../../../../../types/packageMeta';
+import { DetailContext } from '../../context';
+import NoItems from '../NoItems';
+
+import { CardWrap, StyledText, Tags, Tag } from './styles';
+
+interface DependencyBlockProps {
+  title: string;
+  dependencies: PackageDependencies;
+}
+
+const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {
+  const { enableLoading } = useContext(DetailContext);
+  const history = useHistory();
+  const { t } = useTranslation();
+
+  const deps = Object.entries(dependencies);
+
+  function handleClick(name: string): void {
+    enableLoading?.();
+
+    history.push(`/-/web/detail/${name}`);
+  }
+
+  return (
+    <CardWrap>
+      <CardContent>
+        <StyledText variant="subtitle1">{`${title} (${deps.length})`}</StyledText>
+        <Tags>
+          {deps.map(([name, version]) => (
+            <Tag
+              className={'dep-tag'}
+              clickable={true}
+              key={name}
+              label={t('dependencies.dependency-block', { package: name, version })}
+              // eslint-disable-next-line
+              onClick={() => handleClick(name)}
+            />
+          ))}
+        </Tags>
+      </CardContent>
+    </CardWrap>
+  );
+};
+
+function hasKeys(object?: { [key: string]: any }): boolean {
+  return !!object && Object.keys(object).length > 0;
+}
+
+const Dependencies: React.FC<{}> = () => {
+  const { packageMeta } = useContext(DetailContext);
+  const { t } = useTranslation();
+
+  if (!packageMeta) {
+    throw new Error(t('error.package-meta-is-required-at-detail-context'));
+  }
+
+  const { latest } = packageMeta;
+  // FIXME: add dependencies to package meta type
+  // @ts-ignore
+  const { dependencies, devDependencies, peerDependencies, name } = latest;
+  const dependencyMap = { dependencies, devDependencies, peerDependencies };
+  const hasDependencies =
+    hasKeys(dependencies) || hasKeys(devDependencies) || hasKeys(peerDependencies);
+
+  if (hasDependencies) {
+    return (
+      <>
+        {Object.entries(dependencyMap).map(([dependencyType, dependencies]) => {
+          if (!dependencies || Object.keys(dependencies).length === 0) {
+            return null;
+          }
+
+          return (
+            <DependencyBlock
+              dependencies={dependencies}
+              key={dependencyType}
+              title={dependencyType}
+            />
+          );
+        })}
+      </>
+    );
+  }
+
+  return (
+    <NoItems
+      className="no-dependencies"
+      text={t('dependencies.has-no-dependencies', { package: name })}
+    />
+  );
+};
+
+export default Dependencies;

package/src/pages/Version/DetailContainer/Dependencies/index.ts

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

package/src/pages/Version/DetailContainer/Dependencies/styles.ts

@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+
+import Card from 'verdaccio-ui/components/Card';
+import Chip from 'verdaccio-ui/components/Chip';
+import Text from 'verdaccio-ui/components/Text';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+export const CardWrap = styled(Card)({
+  margin: '0 0 16px',
+});
+
+export const StyledText = styled(Text)<{ theme?: Theme }>((props) => ({
+  fontWeight: props.theme && props.theme.fontWeight.bold,
+  textTransform: 'capitalize',
+}));
+
+export const Tags = styled('div')({
+  display: 'flex',
+  justifyContent: 'start',
+  flexWrap: 'wrap',
+  margin: '0 -5px',
+});
+
+export const Tag = styled(Chip)({
+  margin: '5px',
+});

package/src/pages/Version/DetailContainer/Dependencies/types.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+export interface Props {
+  children: ReactNode;
+  open: boolean;
+  onClose: () => void;
+}

package/src/pages/Version/DetailContainer/Deprecated/Deprecated.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { render, cleanup, screen } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import { DetailContextProvider } from '../../context';
+
+import Deprecated from './Deprecated';
+
+describe('test Deprecated', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  const packageMeta = {
+    latest: {
+      packageName: 'foo',
+      version: '1.0.0',
+      deprecated: 'duuuude, this is deprecated',
+      maintainers: [],
+      contributors: [],
+    },
+  };
+
+  test('should render the deprecated message', () => {
+    render(
+      // @ts-ignore
+      <DetailContextProvider value={{ packageMeta }}>
+        <Deprecated message={packageMeta.latest.deprecated} />
+      </DetailContextProvider>
+    );
+
+    expect(screen.getByText('duuuude, this is deprecated')).toBeInTheDocument();
+  });
+});