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

package/src/utils/package.test.ts

@@ -0,0 +1,101 @@
+import { packageMeta } from '../../jest/unit/components/store/packageMeta';
+
+import {
+  formatLicense,
+  formatRepository,
+  formatDate,
+  formatDateDistance,
+  getLastUpdatedPackageTime,
+  getRecentReleases,
+} from './package';
+
+describe('formatLicense', (): void => {
+  test('should check license field different values', (): void => {
+    expect(formatLicense('MIT')).toEqual('MIT');
+  });
+
+  test('should check license field for object value', (): void => {
+    const license = { type: 'ISC', url: 'https://opensource.org/licenses/ISC' };
+    expect(formatLicense(license)).toEqual('ISC');
+  });
+
+  test('should check license field for other value', (): void => {
+    expect(formatLicense(null)).toBeUndefined();
+    expect(formatLicense({})).toBeUndefined();
+    expect(formatLicense([])).toBeUndefined();
+  });
+});
+
+describe('formatRepository', (): void => {
+  test('should check repository field different values', (): void => {
+    const repository = 'https://github.com/verdaccio/verdaccio';
+    expect(formatRepository(repository)).toEqual(repository);
+  });
+
+  test('should check repository field for object value', (): void => {
+    const license = {
+      type: 'git',
+      url: 'https://github.com/verdaccio/verdaccio',
+    };
+    expect(formatRepository(license)).toEqual(license.url);
+  });
+
+  test('should check repository field for other value', (): void => {
+    expect(formatRepository(null)).toBeNull();
+    expect(formatRepository({})).toBeNull();
+    expect(formatRepository([])).toBeNull();
+  });
+});
+
+describe('formatDate', (): void => {
+  test('should format the date', (): void => {
+    const date = 1532211072138;
+    expect(formatDate(date)).toEqual('07/21/2018 10:11:12 PM');
+  });
+});
+
+describe('formatDateDistance', (): void => {
+  test('should calculate the distance', (): void => {
+    // const dateAboutTwoMonthsAgo = () => {
+    //   const date = new Date();
+    //   date.setMonth(date.getMonth() - 1);
+    //   date.setDate(date.getDay() - 20);
+    //   return date;
+    // };
+    const dateTwoMonthsAgo = (): Date => {
+      const date = new Date();
+      date.setMonth(date.getMonth() - 2);
+      return date;
+    };
+    // const date1 = dateAboutTwoMonthsAgo();
+    const date2 = dateTwoMonthsAgo();
+    // FIXME: we need to review this expect, fails every x time.
+    // expect(formatDateDistance(date1)).toEqual('about 2 months');
+    expect(formatDateDistance(date2)).toEqual('2 months ago');
+  });
+});
+
+describe('getLastUpdatedPackageTime', (): void => {
+  test('should get the last update time', (): void => {
+    const lastUpdated = packageMeta._uplinks;
+    expect(getLastUpdatedPackageTime(lastUpdated)).toEqual('07/22/2018 10:11:12 PM');
+  });
+
+  test('should get the last update time for blank uplink', (): void => {
+    const lastUpdated = {};
+    expect(getLastUpdatedPackageTime(lastUpdated)).toEqual('');
+  });
+});
+
+describe('getRecentReleases', (): void => {
+  test('should get the recent releases', (): void => {
+    const { time } = packageMeta;
+    const result = [
+      { time: '12/14/2017 3:43:27 PM', version: '2.7.1' },
+      { time: '12/05/2017 11:25:06 PM', version: '2.7.0' },
+      { time: '11/08/2017 10:47:16 PM', version: '2.6.6' },
+    ];
+    expect(getRecentReleases(time)).toEqual(result);
+    expect(getRecentReleases()).toEqual([]);
+  });
+});

package/src/utils/package.ts

@@ -0,0 +1,105 @@
+import { UpLinks } from '@verdaccio/types';
+import dayjs from 'dayjs';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import i18next from 'i18next';
+import isString from 'lodash/isString';
+
+import { Time } from '../../types/packageMeta';
+
+export const TIMEFORMAT = 'L LTS';
+
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+
+/**
+ * Formats license field for webui.
+ * @see https://docs.npmjs.com/files/package.json#license
+ */
+// License should use type License defined above, but conflicts with the unit test that provide array or empty object
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export function formatLicense(license: any): string | undefined {
+  if (isString(license)) {
+    return license;
+  }
+
+  if (license?.type) {
+    return license.type;
+  }
+
+  return;
+}
+
+export interface Repository {
+  type: string;
+  url: string;
+}
+
+/**
+ * Formats repository field for webui.
+ * @see https://docs.npmjs.com/files/package.json#repository
+ */
+
+// Repository should use type Repository defined above, but conflicts with the unit test that provide array or empty object
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export function formatRepository(repository: any): string | null {
+  if (isString(repository)) {
+    return repository;
+  }
+
+  if (repository?.url) {
+    return repository.url;
+  }
+
+  return null;
+}
+
+export function formatDate(lastUpdate: string | number): string {
+  return dayjs(new Date(lastUpdate)).format(TIMEFORMAT);
+}
+
+export function formatDateDistance(lastUpdate: Date | string | number): string {
+  return dayjs(new Date(lastUpdate)).fromNow();
+}
+
+/**
+ * For <LastSync /> component
+ * @param {array} uplinks
+ */
+export function getLastUpdatedPackageTime(uplinks: UpLinks = {}): string {
+  let lastUpdate = 0;
+  Object.keys(uplinks).forEach(function computeUplink(upLinkName): void {
+    const status = uplinks[upLinkName];
+    if (status.fetched > lastUpdate) {
+      lastUpdate = status.fetched;
+    }
+  });
+
+  return lastUpdate ? formatDate(lastUpdate) : '';
+}
+
+/**
+ * For <LastSync /> component
+ * @param {Object} time
+ * @returns {Array} last 3 releases
+ */
+export function getRecentReleases(time: Time = {}): Time[] {
+  const recent = Object.keys(time).map((version) => ({
+    version,
+    time: formatDate(time[version]),
+  }));
+
+  return recent.slice(recent.length - 3, recent.length).reverse();
+}
+
+export function getAuthorName(authorName?: string): string {
+  if (!authorName) {
+    return i18next.t('author-unknown');
+  }
+
+  if (authorName.toLowerCase() === 'anonymous') {
+    return i18next.t('author-anonymous');
+  }
+
+  return authorName;
+}

package/src/utils/sec-utils.ts

@@ -0,0 +1,15 @@
+import { filterXSS, escapeAttrValue } from 'xss';
+
+const xssOpts = {
+  onIgnoreTagAttr: function (tag: string, name: string, value: string) {
+    if (tag.match(/^h[0-9]$/) && name === 'id') {
+      return name + '="' + escapeAttrValue(value) + '"';
+    }
+  },
+};
+
+export function preventXSS(text: string): string {
+  const encodedText = filterXSS(text, xssOpts);
+
+  return encodedText;
+}

package/src/utils/storage.ts

@@ -0,0 +1,12 @@
+import memoryStorage from 'localstorage-memory';
+
+let storage: Storage;
+try {
+  localStorage.setItem('__TEST__', '');
+  localStorage.removeItem('__TEST__');
+  storage = localStorage;
+} catch (err: any) {
+  storage = memoryStorage;
+}
+
+export default storage;

package/src/utils/test-react-testing-library.tsx

@@ -0,0 +1,38 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+
+import ThemeProvider from 'verdaccio-ui/design-tokens/ThemeProvider';
+import AppConfigurationProvider from 'verdaccio-ui/providers/config';
+
+import i18nConfig from '../i18n/config';
+
+const renderWithStore = (ui, store) =>
+  render(ui, {
+    wrapper: ({ children }) => (
+      <Provider store={store}>
+        <AppConfigurationProvider>
+          <ThemeProvider>
+            <I18nextProvider i18n={i18nConfig}>{children}</I18nextProvider>
+          </ThemeProvider>
+        </AppConfigurationProvider>
+      </Provider>
+    ),
+  });
+
+const customRender = (node: React.ReactElement, ...options: any) => {
+  return render(
+    <AppConfigurationProvider>
+      <ThemeProvider>
+        <I18nextProvider i18n={i18nConfig}>{node}</I18nextProvider>
+      </ThemeProvider>
+    </AppConfigurationProvider>,
+    ...options
+  );
+};
+
+export * from '@testing-library/react';
+// FIXME: rename all references with customRemder
+export { customRender as render };
+export { customRender, renderWithStore };

package/src/utils/url.test.ts

@@ -0,0 +1,28 @@
+import { isURL, isEmail, extractFileName } from './url';
+
+describe('utils', () => {
+  describe('url', () => {
+    test('isURL() - should return true for localhost', () => {
+      expect(isURL('http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz')).toBeTruthy();
+    });
+
+    test('isURL() - should return false when protocol is missing', () => {
+      expect(isURL('localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz')).toBeFalsy();
+    });
+
+    test('isEmail() - should return true if valid', () => {
+      expect(isEmail('email@domain.com')).toBeTruthy();
+    });
+    test('isEmail() - should return false if invalid', () => {
+      expect(isEmail('')).toBeFalsy();
+    });
+  });
+
+  describe('extractFileName', () => {
+    test('should return the file name', () => {
+      expect(extractFileName('http://localhost:4872/juan_test_webpack1/-/test-10.0.0.tgz')).toBe(
+        'test-10.0.0.tgz'
+      );
+    });
+  });
+});

package/src/utils/url.ts

@@ -0,0 +1,58 @@
+import isEmailValidator from 'validator/lib/isEmail';
+import isURLValidator from 'validator/lib/isURL';
+import '../../types';
+
+export function isURL(url: string): boolean {
+  return isURLValidator(url || '', {
+    protocols: ['http', 'https', 'git+https'],
+    require_protocol: true,
+    require_tld: false,
+  });
+}
+
+export function isEmail(email: string): boolean {
+  return isEmailValidator(email || '');
+}
+
+export function extractFileName(url: string): string {
+  return url.substring(url.lastIndexOf('/') + 1);
+}
+
+function blobToFile(blob: Blob, fileName: string): File {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const b: any = blob;
+  b.lastModified = Date.now();
+  b.name = fileName;
+  return b as File;
+}
+
+export function downloadFile(fileStream: Blob, fileName: string): void {
+  let file: File;
+  // File constructor is not supported by Edge
+  // https://developer.mozilla.org/en-US/docs/Web/API/File#Browser_compatibility
+  // @ts-ignore. Please see: https://github.com/microsoft/TypeScript/issues/33792
+  if (navigator.msSaveBlob) {
+    // Detect if Edge
+    file = blobToFile(new Blob([fileStream], { type: 'application/octet-stream' }), fileName);
+  } else {
+    file = new File([fileStream], fileName, {
+      type: 'application/octet-stream',
+      lastModified: Date.now(),
+    });
+  }
+
+  const objectURL = URL.createObjectURL(file);
+  const fileLink = document.createElement('a');
+  fileLink.href = objectURL;
+  fileLink.download = fileName;
+
+  // Without appending to an HTML Element, download dialog does not show up on Firefox
+  // https://github.com/verdaccio/ui/issues/119
+  document.documentElement.appendChild(fileLink);
+  fileLink.click();
+  // firefox requires remove the object url
+  setTimeout(() => {
+    URL.revokeObjectURL(objectURL);
+    document.documentElement.removeChild(fileLink);
+  }, 150);
+}

package/src/utils/windows.ts

@@ -0,0 +1,3 @@
+export function goToVerdaccioWebsite(): void {
+  window.open('https://verdaccio.org', '_blank');
+}

package/static/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-us">
+
+<head>
+    <meta charset="utf-8">
+    <title>
+        ToReplaceByTitle
+    </title>
+    <base href=""> 
+    <link rel="icon" type="image/png" href="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script>
+        window.__VERDACCIO_BASENAME_UI_OPTIONS = JSON.parse('ToReplaceByVerdaccioUI');
+    </script>
+<link rel="icon" href="-/static/favicon.ico"><script defer src="-/static/runtime.c57129036f278d0c7acf.js"></script><script defer src="-/static/vendors.c57129036f278d0c7acf.js"></script><script defer src="-/static/main.c57129036f278d0c7acf.js"></script></head>
+
+<body class="body">
+    <div id="root"></div>
+</body>
+
+</html>