@verdaccio/ui-components 2.0.0-alpha.0 → 3.0.0-next-7.3

package/src/utils/cli-utils.ts

@@ -0,0 +1,53 @@
+import { SyntheticEvent } from 'react';
+
+export const copyToClipBoardUtility =
+  (str: string): ((e: SyntheticEvent<HTMLElement>) => void) =>
+  (event: SyntheticEvent<HTMLElement>): void => {
+    event.preventDefault();
+
+    const node = document.createElement('div');
+    node.innerText = str;
+    if (document.body) {
+      document.body.appendChild(node);
+
+      const range = document.createRange();
+      const selection = window.getSelection() as Selection;
+      range.selectNodeContents(node);
+      selection.removeAllRanges();
+      selection.addRange(range);
+      document.execCommand('copy');
+      document.body.removeChild(node);
+    }
+  };
+
+export function getCLISetConfigRegistry(
+  command: string,
+  scope: string | undefined,
+  registryUrl: string
+): string {
+  // if there is a scope defined there needs to be a ":" separator between the scope and the registry
+  return `${command} ${scope ? `${scope}:` : ''}registry ${registryUrl}`;
+}
+
+export function getCLISetRegistry(command: string, registryUrl: string): string {
+  return `${command} --registry ${registryUrl}`;
+}
+
+export function getCLIChangePassword(command: string, registryUrl: string): string {
+  return `${command} profile set password --registry ${registryUrl}`;
+}
+
+export function getCLISBerryYamlRegistry(scope: string | undefined, registryUrl: string): string {
+  return !scope
+    ? `// .yarnrc.yml    
+npmRegistryServer: "${registryUrl}"
+unsafeHttpWhitelist:
+  - ${new URL(registryUrl).host}`
+    : `
+// .yarnrc.yml
+npmRegistryServer: "${registryUrl}"
+npmScopes:
+  ${scope.replace('@', '')}:
+    npmRegistryServer: ${registryUrl}
+    npmPublishRegistry: ${registryUrl}`;
+}

package/src/utils/index.ts

@@ -0,0 +1,11 @@
+export * as url from './url';
+export * as utils from './utils';
+export {
+  getCLIChangePassword,
+  getCLISBerryYamlRegistry,
+  getCLISetConfigRegistry,
+  getCLISetRegistry,
+} from './cli-utils';
+export { default as loadable } from './loadable';
+export { Route } from './routes';
+export * from './token';

package/src/utils/loadable.tsx

@@ -0,0 +1,20 @@
+/* eslint-disable verdaccio/jsx-spread */
+import React, { Suspense, lazy } from 'react';
+
+/**
+ *  With the combination of a bundler, enable to code split a package.
+ * 
+ *  @example
+    ```jsx
+    const VersionPage = loadable(() => import(/'../pages/Version'));
+   ```
+   @category HOC
+ */
+export default (importCallback: any) => {
+  const TargetComponent = lazy(importCallback);
+  return (props: any) => (
+    <Suspense fallback={null}>
+      <TargetComponent {...props} />
+    </Suspense>
+  );
+};

package/src/utils/routes.ts

@@ -0,0 +1,7 @@
+export enum Route {
+  ROOT = '/',
+  SCOPE_PACKAGE = '/-/web/detail/@:scope/:package',
+  SCOPE_PACKAGE_VERSION = '/-/web/detail/@:scope/:package/v/:version',
+  PACKAGE = '/-/web/detail/:package',
+  PACKAGE_VERSION = '/-/web/detail/:package/v/:version',
+}

package/src/utils/token.test.ts

@@ -0,0 +1,54 @@
+// eslint-disable-next-line jest/no-mocks-import
+import {
+  generateInvalidToken,
+  generateTokenWithExpirationAsString,
+  generateTokenWithOutExpiration,
+  generateTokenWithTimeRange,
+} from '../../jest/unit/components/__mocks__/token';
+import { isTokenExpire } from './token';
+
+/* eslint-disable no-console */
+console.error = jest.fn();
+
+describe('isTokenExpire', (): void => {
+  test('isTokenExpire - null is not a valid payload', (): void => {
+    expect(isTokenExpire(null)).toBeTruthy();
+  });
+
+  test('isTokenExpire - token is not a valid payload', (): void => {
+    expect(isTokenExpire('not_a_valid_token')).toBeTruthy();
+  });
+
+  test('isTokenExpire - token should not expire in 24 hrs range', (): void => {
+    const token = generateTokenWithTimeRange(24);
+    expect(isTokenExpire(token)).toBeFalsy();
+  });
+
+  test('isTokenExpire - token should expire for current time', (): void => {
+    const token = generateTokenWithTimeRange();
+    expect(isTokenExpire(token)).toBeTruthy();
+  });
+
+  test('isTokenExpire - token expiration is not available', (): void => {
+    const token = generateTokenWithOutExpiration();
+    expect(isTokenExpire(token)).toBeTruthy();
+  });
+
+  test('isTokenExpire - token is not a valid json token', (): void => {
+    const NODE_MAJOR_VERSION = +process.versions.node.split('.')[0];
+    const errorToken = new SyntaxError(
+      NODE_MAJOR_VERSION >= 20
+        ? 'Unexpected token \'i\', "invalidtoken" is not valid JSON'
+        : 'Unexpected token i in JSON at position 0'
+    );
+    const token = generateInvalidToken();
+    const result = ['Invalid token:', errorToken, 'xxxxxx.aW52YWxpZHRva2Vu.xxxxxx'];
+    expect(isTokenExpire(token)).toBeTruthy();
+    expect(console.error).toHaveBeenCalledWith(...result);
+  });
+
+  test('isTokenExpire - token expiration is not a number', (): void => {
+    const token = generateTokenWithExpirationAsString();
+    expect(isTokenExpire(token)).toBeTruthy();
+  });
+});

package/src/utils/token.ts

@@ -0,0 +1,33 @@
+import { Base64 } from 'js-base64';
+import isNumber from 'lodash/isNumber';
+import isString from 'lodash/isString';
+
+export function isTokenExpire(token: string | null): boolean {
+  if (!isString(token)) {
+    return true;
+  }
+
+  const [, payload] = token.split('.');
+
+  if (!payload) {
+    return true;
+  }
+
+  let exp: number;
+  try {
+    exp = JSON.parse(Base64.decode(payload)).exp;
+  } catch (error: any) {
+    // eslint-disable-next-line no-console
+    console.error('Invalid token:', error, token);
+    return true;
+  }
+
+  if (!exp || !isNumber(exp)) {
+    return true;
+  }
+  // Report as expire before (real expire time - 30s)
+  const jsTimestamp = exp * 1000 - 30000;
+  const expired = Date.now() >= jsTimestamp;
+
+  return expired;
+}

package/src/utils/url.test.ts

@@ -0,0 +1,32 @@
+import { extractFileName, isEmail, isURL } 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();
+    });
+
+    test('git repo is valid', () => {
+      expect(isURL('git://github.com/verdaccio/ui.git')).toBeTruthy();
+    });
+  });
+
+  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,57 @@
+import isEmailValidator from 'validator/lib/isEmail';
+import isURLValidator from 'validator/lib/isURL';
+
+export function isURL(url: string): boolean {
+  return isURLValidator(url || '', {
+    protocols: ['http', 'https', 'git+https', 'git'],
+    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/utils.test.ts

@@ -0,0 +1,113 @@
+import MockDate from 'mockdate';
+
+import { packageMeta } from './__partials__/packageMeta';
+import {
+  formatDate,
+  formatDateDistance,
+  formatLicense,
+  formatRepository,
+  getLastUpdatedPackageTime,
+  getRecentReleases,
+} from './utils';
+
+// jest.useFakeTimers().setSystemTime(new Date('2020-01-01'));
+// Date.now = jest.fn(() => 1487076708000);
+
+describe('formatLicense', (): void => {
+  beforeEach(() => {
+    MockDate.set(new Date());
+  });
+
+  afterEach(() => {
+    MockDate.reset();
+  });
+
+  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/utils.ts

@@ -0,0 +1,120 @@
+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 { UpLinks } from '@verdaccio/types';
+
+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;
+}
+
+export function fileSizeSI(
+  a: number,
+  b?: typeof Math,
+  c?: (p: number) => number,
+  d?: number,
+  e?: number
+): string {
+  return (
+    ((b = Math), (c = b.log), (d = 1e3), (e = (c(a) / c(d)) | 0), a / b.pow(d, e)).toFixed(2) +
+    ' ' +
+    (e ? 'kMGTPEZY'[--e] + 'B' : 'Bytes')
+  );
+}

package/tsconfig.build.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "sourceMap": true,
+    "preserveSymlinks": true,
+    "rootDir": ".",
+    "outDir": "./build",
+    "skipLibCheck": true,
+    "jsx": "react"
+  },
+  "include": ["src/**/*", "./src/types/index.d.ts"],
+  "types": ["node", "jest", "@testing-library/jest-dom"],
+  "typedocOptions": {
+    "categoryOrder": ["Model", "Component", "Provider", "*"],
+    "defaultCategory": "Component",
+    "categorizeByGroup": "false"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../../tsconfig.reference.json",
+  "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "sourceMap": true,
+    "rootDir": ".",
+    "outDir": "./build",
+    "preserveSymlinks": true,
+    "jsx": "react",
+    "allowJs": true
+  },
+  "types": ["node", "jest", "@testing-library/jest-dom"],
+  "references": [
+    {
+      "path": "../core/types"
+    }
+  ]
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021 Verdaccio contributors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.