@verdaccio/ui-components 4.0.0-next-8.2 → 4.0.0-next-8.3

package/build/utils/token.js

@@ -1,35 +1,28 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isTokenExpire = isTokenExpire;
-var _jsBase = require("js-base64");
-var _isNumber = _interopRequireDefault(require("lodash/isNumber"));
-var _isString = _interopRequireDefault(require("lodash/isString"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function isTokenExpire(token) {
-  if (!(0, _isString.default)(token)) {
+import { Base64 } from 'js-base64';
+import isNumber from 'lodash/isNumber';
+import isString from 'lodash/isString';
+export function isTokenExpire(token) {
+  if (!isString(token)) {
     return true;
   }
-  const [, payload] = token.split('.');
+  var [, payload] = token.split('.');
   if (!payload) {
     return true;
   }
-  let exp;
+  var exp;
   try {
-    exp = JSON.parse(_jsBase.Base64.decode(payload)).exp;
+    exp = JSON.parse(Base64.decode(payload)).exp;
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error('Invalid token:', error, token);
     return true;
   }
-  if (!exp || !(0, _isNumber.default)(exp)) {
+  if (!exp || !isNumber(exp)) {
     return true;
   }
   // Report as expire before (real expire time - 30s)
-  const jsTimestamp = exp * 1000 - 30000;
-  const expired = Date.now() >= jsTimestamp;
+  var jsTimestamp = exp * 1000 - 30000;
+  var expired = Date.now() >= jsTimestamp;
   return expired;
 }
 //# sourceMappingURL=token.js.map

package/build/utils/url.js

@@ -1,37 +1,27 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.downloadFile = downloadFile;
-exports.extractFileName = extractFileName;
-exports.isEmail = isEmail;
-exports.isURL = isURL;
-var _isEmail = _interopRequireDefault(require("validator/lib/isEmail"));
-var _isURL = _interopRequireDefault(require("validator/lib/isURL"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function isURL(url) {
-  return (0, _isURL.default)(url || '', {
+import isEmailValidator from 'validator/lib/isEmail';
+import isURLValidator from 'validator/lib/isURL';
+export function isURL(url) {
+  return isURLValidator(url || '', {
     protocols: ['http', 'https', 'git+https', 'git'],
     require_protocol: true,
     require_tld: false
   });
 }
-function isEmail(email) {
-  return (0, _isEmail.default)(email || '');
+export function isEmail(email) {
+  return isEmailValidator(email || '');
 }
-function extractFileName(url) {
+export function extractFileName(url) {
   return url.substring(url.lastIndexOf('/') + 1);
 }
 function blobToFile(blob, fileName) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const b = blob;
+  var b = blob;
   b.lastModified = Date.now();
   b.name = fileName;
   return b;
 }
-function downloadFile(fileStream, fileName) {
-  let file;
+export function downloadFile(fileStream, fileName) {
+  var 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
@@ -46,8 +36,8 @@ function downloadFile(fileStream, fileName) {
       lastModified: Date.now()
     });
   }
-  const objectURL = URL.createObjectURL(file);
-  const fileLink = document.createElement('a');
+  var objectURL = URL.createObjectURL(file);
+  var fileLink = document.createElement('a');
   fileLink.href = objectURL;
   fileLink.download = fileName;
 

package/build/utils/utils.js

@@ -1,27 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TIMEFORMAT = void 0;
-exports.fileSizeSI = fileSizeSI;
-exports.formatDate = formatDate;
-exports.formatDateDistance = formatDateDistance;
-exports.formatLicense = formatLicense;
-exports.formatRepository = formatRepository;
-exports.getAuthorName = getAuthorName;
-exports.getLastUpdatedPackageTime = getLastUpdatedPackageTime;
-exports.getRecentReleases = getRecentReleases;
-exports.getUplink = getUplink;
-var _dayjs = _interopRequireDefault(require("dayjs"));
-var _localizedFormat = _interopRequireDefault(require("dayjs/plugin/localizedFormat"));
-var _relativeTime = _interopRequireDefault(require("dayjs/plugin/relativeTime"));
-var _i18next = _interopRequireDefault(require("i18next"));
-var _isString = _interopRequireDefault(require("lodash/isString"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const TIMEFORMAT = exports.TIMEFORMAT = 'L LTS';
-_dayjs.default.extend(_relativeTime.default);
-_dayjs.default.extend(_localizedFormat.default);
+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';
+export var TIMEFORMAT = 'L LTS';
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
 
 /**
  * Formats license field for webui.
@@ -29,11 +13,11 @@ _dayjs.default.extend(_localizedFormat.default);
  */
 // 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 */
-function formatLicense(license) {
-  if ((0, _isString.default)(license)) {
+export function formatLicense(license) {
+  if (isString(license)) {
     return license;
   }
-  if (license?.type) {
+  if (license !== null && license !== void 0 && license.type) {
     return license.type;
   }
   return;
@@ -45,30 +29,31 @@ function formatLicense(license) {
 
 // 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 */
-function formatRepository(repository) {
-  if ((0, _isString.default)(repository)) {
+export function formatRepository(repository) {
+  if (isString(repository)) {
     return repository;
   }
-  if (repository?.url) {
+  if (repository !== null && repository !== void 0 && repository.url) {
     return repository.url;
   }
   return null;
 }
-function formatDate(lastUpdate) {
-  return (0, _dayjs.default)(new Date(lastUpdate)).format(TIMEFORMAT);
+export function formatDate(lastUpdate) {
+  return dayjs(new Date(lastUpdate)).format(TIMEFORMAT);
 }
-function formatDateDistance(lastUpdate) {
-  return (0, _dayjs.default)(new Date(lastUpdate)).fromNow();
+export function formatDateDistance(lastUpdate) {
+  return dayjs(new Date(lastUpdate)).fromNow();
 }
 
 /**
  * For <LastSync /> component
  * @param {array} uplinks
  */
-function getLastUpdatedPackageTime(uplinks = {}) {
-  let lastUpdate = 0;
+export function getLastUpdatedPackageTime() {
+  var uplinks = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var lastUpdate = 0;
   Object.keys(uplinks).forEach(function computeUplink(upLinkName) {
-    const status = uplinks[upLinkName];
+    var status = uplinks[upLinkName];
     if (status.fetched > lastUpdate) {
       lastUpdate = status.fetched;
     }
@@ -81,36 +66,37 @@ function getLastUpdatedPackageTime(uplinks = {}) {
  * @param {Object} time
  * @returns {Array} last 3 releases
  */
-function getRecentReleases(time = {}) {
-  const recent = Object.keys(time).map(version => ({
+export function getRecentReleases() {
+  var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var recent = Object.keys(time).map(version => ({
     version,
     time: formatDate(time[version])
   }));
   return recent.slice(recent.length - 3, recent.length).reverse();
 }
-function getAuthorName(authorName) {
+export function getAuthorName(authorName) {
   if (!authorName) {
-    return _i18next.default.t('author-unknown');
+    return i18next.t('author-unknown');
   }
   if (authorName.toLowerCase() === 'anonymous') {
-    return _i18next.default.t('author-anonymous');
+    return i18next.t('author-anonymous');
   }
   return authorName;
 }
-function getUplink(upLinkName, packageName) {
+export function getUplink(upLinkName, packageName) {
   // TODO: make this a config like "uplinks: npmjs: web: https://www.npmjs.com/package/"
   switch (upLinkName) {
     case 'npmjs':
-      return `https://www.npmjs.com/package/${packageName}`;
+      return "https://www.npmjs.com/package/".concat(packageName);
   }
   return null;
 }
-function fileSizeSI(a, b, c, d, e) {
+export function fileSizeSI(a, b, c, d, e) {
   b = Math;
   c = b.log;
   d = 1e3;
   e = c(a) / c(d) | 0;
-  let size = a / b.pow(d, e);
+  var size = a / b.pow(d, e);
   // no decimals for Bytes
   if (e === 0) {
     return Math.floor(size) + ' Bytes';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdaccio/ui-components",
-  "version": "4.0.0-next-8.2",
+  "version": "4.0.0-next-8.3",
   "description": "theme ui component",
   "author": "Juan Picado <juanpicado19@gmail.com>",
   "license": "MIT",
@@ -8,8 +8,8 @@
   "main": "./build/index.js",
   "types": "build/index.d.ts",
   "dependencies": {
-    "@emotion/react": "11.10.6",
-    "@emotion/styled": "11.10.6",
+    "@emotion/react": "11.11.4",
+    "@emotion/styled": "11.11.5",
     "@fontsource/material-icons": "^4.5.4",
     "@fontsource/roboto": "^4.5.8",
     "@microlink/react-json-view": "^1.23.3",
@@ -48,7 +48,6 @@
   "devDependencies": {
     "@babel/core": "7.24.9",
     "@emotion/babel-plugin": "11.12.0",
-    "@emotion/jest": "11.13.0",
     "@storybook/addon-actions": "^6.5.15",
     "@storybook/addon-essentials": "^6.5.15",
     "@storybook/addon-interactions": "^6.5.15",
@@ -56,25 +55,28 @@
     "@storybook/builder-webpack5": "^6.5.15",
     "@storybook/manager-webpack5": "^6.5.15",
     "@storybook/react": "^6.5.15",
-    "@storybook/testing-library": "^0.2.0",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.4.8",
     "@testing-library/react": "16.0.0",
     "@types/hast": "^2.0.0",
     "@types/react-router": "^5.1.20",
     "@types/unist": "^2.0.0",
-    "@verdaccio/types": "13.0.0-next-8.1",
+    "@verdaccio/types": "13.0.0-next-8.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^24.0.0",
     "babel-loader": "9.1.3",
     "mockdate": "3.0.5",
+    "mutationobserver-shim": "0.3.7",
     "msw": "0.49.3",
-    "typescript": "4.9.5"
+    "typescript": "4.9.5",
+    "vitest": "2.1.2",
+    "whatwg-fetch": "3.6.20"
   },
   "msw": {
     "workerDirectory": "public"
   },
   "scripts": {
-    "test": "cross-env TZ=UTC jest --config jest/jest.config.js",
-    "test:html": "cross-env TZ=UTC jest --config jest/jest.config.js --coverage-reporters=html",
+    "test": "cross-env TZ=UTC vitest run",
     "clean": "rimraf ./build",
     "type-check": "tsc --noEmit -p tsconfig.build.json",
     "build:types": "tsc --emitDeclarationOnly -p tsconfig.build.json",

package/src/AppTest/AppRoute.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router';
+import { vi } from 'vitest';
 
 import { store } from '../';
 import { act, renderWithStore, screen, waitFor } from '../test/test-react-testing-library';
@@ -7,8 +8,8 @@ import AppRoute from './AppRoute';
 
 // force the windows to expand to display items
 // https://github.com/bvaughn/react-virtualized/issues/493#issuecomment-640084107
-jest.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(600);
-jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(600);
+vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(600);
+vi.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(600);
 
 function appTest(path: string) {
   renderWithStore(
@@ -19,10 +20,10 @@ function appTest(path: string) {
   );
 }
 
-// See jest/server-handlers.ts for test routes
+// See vi/server-handlers.ts for test routes
 describe('AppRoute', () => {
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   test('renders Front component for ROOT path', async () => {

package/src/Theme/index.ts

@@ -1,4 +1,4 @@
 export * as colors from './colors';
 export { ThemeProvider, useCustomTheme } from './ThemeProvider';
 export { default as StyleBaseline } from './StyleBaseline';
-export { Theme, FontWeight } from './theme';
+export { Theme, FontWeight, getTheme } from './theme';

package/src/components/Author/Author.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { vi } from 'vitest';
 
 import { cleanup, render, screen } from '../../test/test-react-testing-library';
 import { PackageMetaInterface } from '../../types/packageMeta';
@@ -10,7 +11,7 @@ const withAuthorComponent = (packageMeta: PackageMetaInterface): JSX.Element =>
 
 describe('<Author /> component', () => {
   beforeEach(() => {
-    jest.resetAllMocks();
+    vi.resetAllMocks();
     cleanup();
   });
 

package/src/components/CopyClipboard/CopyToClipBoard.test.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
+import { vi } from 'vitest';
 
 import { fireEvent, render, screen } from '../../test/test-react-testing-library';
 import CopyToClipBoard from './CopyToClipBoard';
 
 Object.assign(navigator, {
-  clipboard: { writeText: jest.fn().mockImplementation(() => Promise.resolve()) },
+  clipboard: { writeText: vi.fn().mockImplementation(() => Promise.resolve()) },
 });
 
 describe('CopyToClipBoard component', () => {

package/src/components/Dependencies/Dependencies.test.tsx

@@ -1,9 +1,16 @@
 import React from 'react';
 import { HashRouter } from 'react-router-dom';
+import { vi } from 'vitest';
 
 import { render, screen } from '../../test/test-react-testing-library';
 import Dependencies from './Dependencies';
 
+const replaceMock = vi.fn(() => []);
+Object.defineProperty(window, 'location', {
+  writable: true,
+  value: { ...window.location, replace: replaceMock, href: '' },
+});
+
 describe('<Dependencies /> component', () => {
   test('Renders a message when there are no dependencies', () => {
     const packageMeta = {

package/src/components/Dependencies/DependencyBlock.test.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { MemoryRouter, Route } from 'react-router';
+import { vi } from 'vitest';
 
 import { fireEvent, render, screen } from '../../test/test-react-testing-library';
 import { DependencyBlock } from './DependencyBlock';
 
-const mockHistory = jest.fn();
+const mockHistory = vi.fn();
 
-jest.mock('react-router-dom', () => ({
+vi.mock('react-router-dom', () => ({
   useHistory: () => ({
     push: mockHistory,
   }),

package/src/components/Engines/Engines.test.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
+import { vi } from 'vitest';
 
 import { cleanup, render } from '../../test/test-react-testing-library';
 import { PackageMetaInterface } from '../../types/packageMeta';
 import Engine from './Engines';
 
-jest.mock('./img/node.png', () => '');
-jest.mock('../Install/img/npm.svg', () => '');
+vi.mock('./img/node.png', () => '');
+vi.mock('../Install/img/npm.svg', () => '');
 
 const mockPackageMeta = (
   engines?: PackageMetaInterface['latest']['engines']

package/src/components/ErrorBoundary/ErrorBoundary.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { vi } from 'vitest';
 
 import { render, screen } from '../../test/test-react-testing-library';
 import ErrorBoundary from './ErrorBoundary';
@@ -20,7 +21,7 @@ describe('ErrorBoundary component', () => {
     };
 
     // Suppress error messages for this test
-    const spy = jest.spyOn(console, 'error');
+    const spy = vi.spyOn(console, 'error');
     spy.mockImplementation(() => {});
 
     render(

package/src/components/Forbidden/Forbidden.test.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router';
+import { vi } from 'vitest';
 
 import { fireEvent, render, screen } from '../../test/test-react-testing-library';
 import Forbidden from './Forbidden';
 
-const mockHistory = jest.fn();
+const mockHistory = vi.fn();
 
-jest.mock('react-router-dom', () => ({
+vi.mock('react-router-dom', () => ({
   useHistory: () => ({
     push: mockHistory,
   }),

package/src/components/HeaderInfoDialog/HeaderInfoDialog.test.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
+import { vi } from 'vitest';
 
 import { fireEvent, render, screen } from '../../test/test-react-testing-library';
 import HeaderInfoDialog from './HeaderInfoDialog';
 
 describe('HeaderInfoDialog', () => {
-  const onCloseDialog = jest.fn();
+  const onCloseDialog = vi.fn();
 
   const tabs = [{ label: 'Tab 1' }, { label: 'Tab 2' }];
 

package/src/components/LoginDialog/LoginDialog.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { vi } from 'vitest';
 
 import { api, store } from '../../';
 import {
@@ -13,14 +14,14 @@ import LoginDialog from './LoginDialog';
 
 describe('<LoginDialog /> component', () => {
   beforeEach(() => {
-    jest.resetModules();
-    jest.resetAllMocks();
+    vi.resetModules();
+    vi.resetAllMocks();
     cleanup();
   });
 
   test('should render the component in default state', () => {
     const props = {
-      onClose: jest.fn(),
+      onClose: vi.fn(),
     };
     const { container } = renderWithStore(<LoginDialog onClose={props.onClose} />, store);
     expect(container.firstChild).toMatchSnapshot();
@@ -29,7 +30,7 @@ describe('<LoginDialog /> component', () => {
   test('should load the component with the open prop', async () => {
     const props = {
       open: true,
-      onClose: jest.fn(),
+      onClose: vi.fn(),
     };
 
     const { getByTestId } = renderWithStore(
@@ -44,7 +45,7 @@ describe('<LoginDialog /> component', () => {
   test('onClose: should close the login modal', async () => {
     const props = {
       open: true,
-      onClose: jest.fn(),
+      onClose: vi.fn(),
     };
 
     const { getByTestId } = renderWithStore(
@@ -65,10 +66,10 @@ describe('<LoginDialog /> component', () => {
   test('setCredentials - should set username and password in state', async () => {
     const props = {
       open: true,
-      onClose: jest.fn(),
+      onClose: vi.fn(),
     };
 
-    jest.spyOn(api, 'request').mockImplementation(() =>
+    vi.spyOn(api, 'request').mockImplementation(() =>
       Promise.resolve({
         username: 'xyz',
         token: 'djsadaskljd',

package/src/components/NotFound/Notfound.test.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router';
+import { vi } from 'vitest';
 
 import { fireEvent, render, screen } from '../../test/test-react-testing-library';
 import NotFound from './NotFound';
 
-const mockHistory = jest.fn();
+const mockHistory = vi.fn();
 
-jest.mock('react-router-dom', () => ({
+vi.mock('react-router-dom', () => ({
   useHistory: () => ({
     push: mockHistory,
   }),

package/src/components/PackageList/Packagelist.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
+import { vi } from 'vitest';
 
 import { store } from '../../store';
 import { cleanup, renderWithStore } from '../../test/test-react-testing-library';
@@ -18,7 +19,7 @@ describe('<PackageList /> component', () => {
 
   test('should load the component with packages', () => {
     // Mock <Autosizer /> width
-    jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(600);
+    vi.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(600);
 
     const props = {
       packages: [

package/src/components/Search/Search.test.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { vi } from 'vitest';
 
 import { api, store } from '../../';
 import { fireEvent, renderWithStore, screen, waitFor } from '../../test/test-react-testing-library';
 import Search from './Search';
 import { cleanDescription } from './utils';
 
-jest.mock('lodash/debounce', () =>
-  jest.fn((fn) => {
-    fn.cancel = jest.fn();
-    return fn;
-  })
-);
+vi.mock('lodash/debounce', () => ({
+  default: vi.fn((fn) => {
+    // Immediately execute the function for testing
+    return (...args: any[]) => fn(...args);
+  }),
+}));
 
 /* eslint-disable verdaccio/jsx-spread */
 const ComponentToBeRendered: React.FC = () => (
@@ -22,7 +23,7 @@ const ComponentToBeRendered: React.FC = () => (
 
 describe('<Search /> component', () => {
   beforeEach(() => {
-    jest.spyOn(api, 'request').mockImplementation(() =>
+    vi.spyOn(api, 'request').mockImplementation(() =>
       Promise.resolve([
         {
           name: 'verdaccio-ui/types',
@@ -37,7 +38,7 @@ describe('<Search /> component', () => {
   });
 
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   test('should load the component in default state', () => {

package/src/components/Versions/Versions.test.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable verdaccio/jsx-spread */
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
+import { vi } from 'vitest';
 
 import { fireEvent, render, screen } from '../../test/test-react-testing-library';
 import Versions, { Props } from './Versions';
@@ -13,16 +14,15 @@ const VersionsComponent: React.FC<Props> = (props) => (
   </MemoryRouter>
 );
 
-jest.mock('lodash/debounce', () =>
-  jest.fn((fn) => {
-    fn.cancel = jest.fn();
-    return fn;
-  })
-);
-
+vi.mock('lodash/debounce', () => ({
+  default: vi.fn((fn) => {
+    // Immediately execute the function for testing
+    return (...args: any[]) => fn(...args);
+  }),
+}));
 describe('<Version /> component', () => {
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   test('should render versions', () => {

package/src/providers/TranslatorProvider/TranslatorProvider.spec.tsx

@@ -3,6 +3,7 @@ import i18n from 'i18next';
 import React from 'react';
 import { initReactI18next } from 'react-i18next';
 import { useTranslation } from 'react-i18next';
+import { vi } from 'vitest';
 
 import TranslatorProvider, { useLanguage } from './TranslatorProvider';
 
@@ -41,7 +42,7 @@ const RandomComponent = () => {
 };
 
 test('should provide translation', () => {
-  const mount = jest.fn();
+  const mount = vi.fn();
   const { getByText } = render(
     <TranslatorProvider i18n={i18n} listLanguages={[]} onMount={mount}>
       <RandomComponent />