@verdaccio/ui-components 3.0.0-next.2 → 4.0.0-next-8.0

package/build/store/store.js

@@ -7,10 +7,9 @@ exports.store = void 0;
 var _core = require("@rematch/core");
 var _loading = _interopRequireDefault(require("@rematch/loading"));
 var _models = require("./models");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const store = (0, _core.init)({
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const store = exports.store = (0, _core.init)({
   models: _models.models,
   plugins: [(0, _loading.default)()]
 });
-exports.store = store;
 //# sourceMappingURL=store.js.map

package/build/test/i18n-config.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _i18next = _interopRequireDefault(require("i18next"));
 var _reactI18next = require("react-i18next");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 _i18next.default.use(_reactI18next.initReactI18next).init({
   lng: 'en-US',
   whitelist: ['en-US'],
@@ -21,6 +21,5 @@ _i18next.default.use(_reactI18next.initReactI18next).init({
     escapeValue: false // react already safes from xss
   }
 });
-var _default = _i18next.default;
-exports.default = _default;
+var _default = exports.default = _i18next.default;
 //# sourceMappingURL=i18n-config.js.map

package/build/test/test-react-testing-library.js

@@ -29,7 +29,7 @@ var _Theme = require("../Theme");
 var _AppConfigurationProvider = _interopRequireDefault(require("../providers/AppConfigurationProvider"));
 var _PersistenceSettingProvider = _interopRequireDefault(require("../providers/PersistenceSettingProvider"));
 var _i18nConfig = _interopRequireDefault(require("./i18n-config"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const renderWithStore = (ui, store) => (0, _react.render)(ui, {
   wrapper: ({
     children

package/build/utils/__partials__/packageMeta.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.packageMeta = void 0;
-const packageMeta = {
+const packageMeta = exports.packageMeta = {
   name: 'verdaccio',
   'dist-tags': {
     latest: '2.7.1',
@@ -160,7 +160,6 @@ const packageMeta = {
       'flow-runtime': '0.13.0',
       'friendly-errors-webpack-plugin': '1.6.1',
       'fs-extra': '4.0.1',
-      'github-markdown-css': '2.8.0',
       'html-webpack-plugin': '2.29.0',
       'in-publish': '2.0.0',
       'localstorage-memory': '1.0.2',
@@ -532,5 +531,4 @@ const packageMeta = {
     }
   }
 };
-exports.packageMeta = packageMeta;
 //# sourceMappingURL=packageMeta.js.map

package/build/utils/index.js

@@ -69,7 +69,7 @@ Object.keys(_token).forEach(function (key) {
     }
   });
 });
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 //# sourceMappingURL=index.js.map

package/build/utils/loadable.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /* eslint-disable verdaccio/jsx-spread */
 /**
  *  With the combination of a bundler, enable to code split a package.

package/build/utils/routes.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Route = void 0;
-let Route = /*#__PURE__*/function (Route) {
+let Route = exports.Route = /*#__PURE__*/function (Route) {
   Route["ROOT"] = "/";
+  Route["DETAIL"] = "/-/web/detail/";
   Route["SCOPE_PACKAGE"] = "/-/web/detail/@:scope/:package";
   Route["SCOPE_PACKAGE_VERSION"] = "/-/web/detail/@:scope/:package/v/:version";
   Route["PACKAGE"] = "/-/web/detail/:package";
   Route["PACKAGE_VERSION"] = "/-/web/detail/:package/v/:version";
   return Route;
 }({});
-exports.Route = Route;
 //# sourceMappingURL=routes.js.map

package/build/utils/token.js

@@ -7,7 +7,7 @@ exports.isTokenExpire = isTokenExpire;
 var _jsBase = require("js-base64");
 var _isNumber = _interopRequireDefault(require("lodash/isNumber"));
 var _isString = _interopRequireDefault(require("lodash/isString"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function isTokenExpire(token) {
   if (!(0, _isString.default)(token)) {
     return true;

package/build/utils/url.js

@@ -9,7 +9,7 @@ exports.isEmail = isEmail;
 exports.isURL = isURL;
 var _isEmail = _interopRequireDefault(require("validator/lib/isEmail"));
 var _isURL = _interopRequireDefault(require("validator/lib/isURL"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function isURL(url) {
   return (0, _isURL.default)(url || '', {
     protocols: ['http', 'https', 'git+https', 'git'],

package/build/utils/utils.js

@@ -12,14 +12,14 @@ 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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const TIMEFORMAT = 'L LTS';
-exports.TIMEFORMAT = TIMEFORMAT;
+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);
 
@@ -97,7 +97,25 @@ function getAuthorName(authorName) {
   }
   return authorName;
 }
+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 null;
+}
 function fileSizeSI(a, b, c, d, e) {
-  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');
+  b = Math;
+  c = b.log;
+  d = 1e3;
+  e = c(a) / c(d) | 0;
+  let size = a / b.pow(d, e);
+  // no decimals for Bytes
+  if (e === 0) {
+    return Math.floor(size) + ' Bytes';
+  } else {
+    return size.toFixed(1) + ' ' + 'kMGTPEZY'[--e] + 'B';
+  }
 }
 //# sourceMappingURL=utils.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdaccio/ui-components",
-  "version": "3.0.0-next.2",
+  "version": "4.0.0-next-8.0",
   "description": "theme ui component",
   "author": "Juan Picado <juanpicado19@gmail.com>",
   "license": "MIT",
@@ -8,47 +8,47 @@
   "main": "./build/index.js",
   "types": "build/index.d.ts",
   "dependencies": {
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
+    "@emotion/react": "11.10.6",
+    "@emotion/styled": "11.10.6",
     "@fontsource/material-icons": "^4.5.4",
     "@fontsource/roboto": "^4.5.8",
-    "@mui/icons-material": "5.14.13",
-    "@mui/material": "5.14.13",
-    "@mui/styles": "5.14.13",
-    "@mui/system": "5.14.13",
+    "@mui/icons-material": "5.16.5",
+    "@mui/material": "5.16.5",
+    "@mui/styles": "5.16.5",
+    "@mui/system": "5.15.6",
     "@rematch/core": "2.2.0",
     "@rematch/loading": "2.1.2",
     "@rematch/persist": "2.1.2",
-    "country-flag-icons": "1.5.5",
-    "dayjs": "1.11.7",
-    "dompurify": "2.4.5",
-    "highlight.js": "11.7.0",
+    "country-flag-icons": "1.5.9",
+    "dayjs": "1.11.13",
+    "dompurify": "3.1.6",
+    "highlight.js": "11.10.0",
     "history": "4.10.1",
-    "classnames": "2.3.2",
     "i18next": "20.6.1",
-    "js-base64": "3.7.5",
+    "js-base64": "3.7.7",
     "localstorage-memory": "1.0.3",
     "lodash": "4.17.21",
-    "marked": "4.3.0",
+    "marked": "11.2.0",
+    "marked-highlight": "2.1.0",
     "normalize.css": "8.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "7.41.1",
-    "react-i18next": "12.1.1",
+    "react-hook-form": "7.52.1",
+    "react-i18next": "15.0.0",
     "react-json-view": "1.21.3",
-    "react-markdown": "8.0.5",
-    "react-redux": "7.2.9",
+    "react-markdown": "9.0.1",
+    "react-redux": "8.1.3",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
-    "react-virtualized": "9.22.3",
+    "react-virtualized": "9.22.5",
     "redux": "4.2.1",
-    "remark-gfm": "3.0.1",
-    "validator": "13.9.0"
+    "semver": "7.6.3",
+    "validator": "13.12.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.0",
-    "@emotion/babel-plugin": "11.10.6",
-    "@emotion/jest": "11.10.5",
+    "@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,18 +56,18 @@
     "@storybook/builder-webpack5": "^6.5.15",
     "@storybook/manager-webpack5": "^6.5.15",
     "@storybook/react": "^6.5.15",
-    "@storybook/testing-library": "^0.0.13",
-    "@testing-library/dom": "9.3.3",
-    "@testing-library/jest-dom": "6.1.3",
-    "@testing-library/react": "14.0.0",
+    "@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": "12.0.0-next.1",
-    "babel-loader": "^8.3.0",
+    "@verdaccio/types": "13.0.0-next-8.0",
+    "babel-loader": "9.1.3",
     "mockdate": "3.0.5",
-    "typescript": "4.9.4",
-    "msw": "0.49.3"
+    "msw": "0.49.3",
+    "typescript": "4.9.5"
   },
   "msw": {
     "workerDirectory": "public"
@@ -81,6 +81,7 @@
     "build:js": "babel src/ --out-dir build/ --copy-files --no-copy-ignored --extensions \".ts,.tsx\" --source-maps --ignore \"src/**/*.stories.tsx\" --ignore \"src/**/*.test.tsx\" --ignore \"src/**/*.test.ts\"",
     "watch": "babel src/ --out-dir build/ --watch --copy-files --no-copy-ignored --extensions \".ts,.tsx\" --source-maps --ignore \"src/**/*.stories.tsx\" --ignore \"src/**/*.test.tsx\" --ignore \"src/**/*.test.ts\"",
     "build": "pnpm run build:js && pnpm run build:types",
+    "netlify:ui:deploy": "npx netlify-cli deploy --dir=./packages/ui-components/storybook-static --prod",
     "start": "start-storybook -p 6006 -s ./public",
     "build-storybook": "build-storybook"
   }

package/src/AppTest/App.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import AppRoute from './AppRoute';
+
+export default {
+  title: 'App/Main',
+};
+
+export const ApplicationStoryBook: any = () => (
+  <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
+    <AppRoute />
+  </MemoryRouter>
+);
+
+export const ApplicationjQuery: any = () => (
+  <MemoryRouter initialEntries={[`/-/web/detail/jquery`]}>
+    <AppRoute />
+  </MemoryRouter>
+);
+
+export const ApplicationForbidden: any = () => (
+  <MemoryRouter initialEntries={[`/-/web/detail/JSONStream`]}>
+    <AppRoute />
+  </MemoryRouter>
+);
+
+export const ApplicationNotFound: any = () => (
+  <MemoryRouter initialEntries={[`/-/web/detail/kleur`]}>
+    <AppRoute />
+  </MemoryRouter>
+);

package/src/AppTest/AppRoute.test.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import { store } from '../';
+import { act, renderWithStore, screen, waitFor } from '../test/test-react-testing-library';
+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);
+
+function appTest(path: string) {
+  renderWithStore(
+    <MemoryRouter initialEntries={[path]}>
+      <AppRoute />
+    </MemoryRouter>,
+    store
+  );
+}
+
+// See jest/server-handlers.ts for test routes
+describe('AppRoute', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders Front component for ROOT path', async () => {
+    act(() => appTest('/'));
+    await waitFor(() => expect(screen.getByTestId('loading')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getAllByTestId('package-item-list')).toHaveLength(5));
+  });
+
+  test('renders VersionPage component for PACKAGE path', async () => {
+    act(() => appTest('/-/web/detail/jquery'));
+    await waitFor(() => screen.getByTestId('readme-tab'));
+    expect(screen.getByTestId('sidebar')).toBeInTheDocument();
+  });
+
+  test('renders VersionPage component for PACKAGE VERSION path', async () => {
+    act(() => appTest('/-/web/detail/jquery/v/3.6.3'));
+    await waitFor(() => screen.getByTestId('readme-tab'));
+    expect(screen.getByTestId('sidebar')).toBeInTheDocument();
+  });
+
+  test('renders Forbidden component for not allowed PACKAGE', async () => {
+    act(() => appTest('/-/web/detail/JSONstream'));
+    await waitFor(() => screen.getByTestId('not-found-go-to-home-button'));
+  });
+
+  test('renders NotFound component for missing PACKAGE', async () => {
+    act(() => appTest('/-/web/detail/kleur'));
+    await waitFor(() => screen.getByTestId('not-found-go-to-home-button'));
+  });
+
+  test('renders NotFound component for non-existing PACKAGE VERSION', async () => {
+    act(() => appTest('/-/web/detail/jquery/v/0.9.9'));
+    await waitFor(() => screen.getByTestId('not-found-go-to-home-button'));
+  });
+
+  test('renders NotFound component for non-matching path', async () => {
+    act(() => appTest('/oiccadrev'));
+    await waitFor(() => screen.getByTestId('not-found-go-to-home-button'));
+  });
+});

package/src/AppTest/AppRoute.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Route as ReactRouterDomRoute, Switch } from 'react-router-dom';
+
+import { NotFound, Route, VersionProvider, loadable } from '../index';
+
+const VersionPage = loadable(() => import(/* webpackChunkName: "Version" */ './pages/Version'));
+const Front = loadable(() => import(/* webpackChunkName: "Home" */ './pages/Front'));
+
+const AppRoute: React.FC = () => {
+  return (
+    <Switch>
+      <ReactRouterDomRoute exact={true} path={Route.ROOT}>
+        <Front />
+      </ReactRouterDomRoute>
+      <ReactRouterDomRoute exact={true} path={Route.PACKAGE}>
+        <VersionProvider>
+          <VersionPage />
+        </VersionProvider>
+      </ReactRouterDomRoute>
+      <ReactRouterDomRoute exact={true} path={Route.PACKAGE_VERSION}>
+        <VersionProvider>
+          <VersionPage />
+        </VersionProvider>
+      </ReactRouterDomRoute>
+      <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE_VERSION}>
+        <VersionProvider>
+          <VersionPage />
+        </VersionProvider>
+      </ReactRouterDomRoute>
+      <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE}>
+        <VersionProvider>
+          <VersionPage />
+        </VersionProvider>
+      </ReactRouterDomRoute>
+      <ReactRouterDomRoute>
+        <NotFound />
+      </ReactRouterDomRoute>
+    </Switch>
+  );
+};
+
+export default AppRoute;

package/src/AppTest/pages/Front/Home.ts

@@ -0,0 +1,3 @@
+import { Home } from '../../../index';
+
+export default Home;

package/src/AppTest/pages/Front/index.ts

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

package/src/AppTest/pages/Version/Version.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import Forbidden from '../../../components/Forbidden';
+import { Loading, NotFound, RootState, VersionLayout } from '../../../index';
+
+const Version: React.FC = () => {
+  const manifestStore = useSelector((state: RootState) => state.manifest);
+  const isLoading = useSelector((state: RootState) => state?.loading?.models.manifest);
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  // @ts-expect-error
+  if (manifestStore.forbidden) {
+    return <Forbidden />;
+  }
+
+  // @ts-expect-error
+  if (manifestStore.hasNotBeenFound) {
+    return <NotFound />;
+  }
+
+  return <VersionLayout />;
+};
+
+export default Version;

package/src/AppTest/pages/Version/index.ts

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

package/src/Theme/ThemeProvider.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import {
+  AppConfigurationProvider,
+  PersistenceSettingProvider,
+  StyleBaseline,
+  ThemeProvider,
+} from '../';
+
+const AppContainer = () => (
+  <AppConfigurationProvider>
+    <ThemeProvider>
+      <StyleBaseline />
+      <PersistenceSettingProvider>
+        <div>{'Theme'}</div>
+      </PersistenceSettingProvider>
+    </ThemeProvider>
+  </AppConfigurationProvider>
+);
+
+describe('ThemeProvider', () => {
+  test('should render with theme', async () => {
+    render(<AppContainer />);
+    await screen.findByText('Theme');
+  });
+});

package/src/Theme/theme.ts

@@ -6,11 +6,11 @@ const colors = {
   black: '#000',
   white: '#fff',
   red: '#d32f2f',
-  orange: '#CD4000',
+  orange: '#cd4000',
   greySuperLight: '#f5f5f5',
   greyLight: '#d3d3d3',
   greyLight2: '#908ba1',
-  greyLight3: '#f3f4f240',
+  greyLight3: '#f3f4f2',
   greyDark: '#a9a9a9',
   greyDark2: '#586069',
   greyChateau: '#95989a',
@@ -25,7 +25,7 @@ const colors = {
   nobel02: '#9f9f9f',
   primary: PRIMARY_COLOR,
   secondary: '#20232a',
-  background: '#fff',
+  background: '#f4f4f4',
   dodgerBlue: '#1ba1f2',
   cyanBlue: '#253341',
 };
@@ -36,9 +36,9 @@ const themeModes = {
   },
   dark: {
     ...colors,
-    primary: '#24394e',
+    primary: '#ffffff',
     secondary: '#424242',
-    background: '#1A202C',
+    background: '#1a202c',
   },
 };
 
@@ -114,6 +114,13 @@ export const getTheme = (themeMode: ThemeMode, primaryColor: string) => {
         default: palette.background,
       },
     },
+    // Looks better in darkmode without background opacity
+    // https://mui.com/material-ui/migration/v5-component-changes/#change-dark-mode-background-opacity
+    components: {
+      MuiPaper: {
+        styleOverrides: { root: { backgroundImage: 'unset' } },
+      },
+    },
     ...customizedTheme,
   });
 };

package/src/components/ActionBar/ActionBar.test.tsx

@@ -1,28 +1,22 @@
 import React from 'react';
 
 import { store } from '../../store/store';
-import {
-  cleanup,
-  fireEvent,
-  renderWithStore,
-  screen,
-  waitFor,
-} from '../../test/test-react-testing-library';
+import { cleanup, fireEvent, renderWithStore, screen } from '../../test/test-react-testing-library';
 import ActionBar from './ActionBar';
 
 const defaultPackageMeta = {
   _uplinks: {},
   latest: {
-    name: 'verdaccio-ui/local-storage',
-    version: '8.0.1-next.1',
+    name: 'verdaccio',
+    version: '1.0.0',
     dist: {
-      fileCount: 0,
-      unpackedSize: 0,
-      tarball: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz',
+      fileCount: 1,
+      unpackedSize: 171,
+      tarball: 'http://localhost:9000/verdaccio/-/verdaccio-1.0.0.tgz',
     },
     homepage: 'https://verdaccio.org',
     bugs: {
-      url: 'https://github.com/verdaccio/monorepo/issues',
+      url: 'https://github.com/verdaccio/verdaccio/issues',
     },
   },
 };
@@ -39,6 +33,12 @@ describe('<ActionBar /> component', () => {
     expect(screen.getByTestId('HomeIcon')).toBeInTheDocument();
   });
 
+  test('should not render if data is missing', () => {
+    // @ts-ignore - testing with missing data
+    renderWithStore(<ActionBar packageMeta={undefined} />, store);
+    expect(screen.queryByTestId('HomeIcon')).toBeNull();
+  });
+
   test('when there is no action bar data', () => {
     const packageMeta = {
       ...defaultPackageMeta,
@@ -64,6 +64,14 @@ describe('<ActionBar /> component', () => {
     expect(screen.getByLabelText('action-bar-action.download-tarball')).toBeTruthy();
   });
 
+  test('when button to download is disabled', () => {
+    renderWithStore(
+      <ActionBar packageMeta={defaultPackageMeta} showDownloadTarball={false} />,
+      store
+    );
+    expect(screen.queryByTestId('download-tarball-btn')).not.toBeInTheDocument();
+  });
+
   test('when there is a button to raw manifest', () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={true} />, store);
     expect(screen.getByLabelText('action-bar-action.raw')).toBeTruthy();
@@ -71,15 +79,28 @@ describe('<ActionBar /> component', () => {
 
   test('when click button to raw manifest open a dialog with viewer', async () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={true} />, store);
+    expect(screen.queryByTestId('rawViewer--dialog')).toBeFalsy();
+
     fireEvent.click(screen.getByLabelText('action-bar-action.raw'));
-    await waitFor(() => expect(screen.getByTestId('rawViewer--dialog')).toBeInTheDocument());
+    await screen.findByTestId('rawViewer--dialog');
+
+    fireEvent.click(screen.getByTestId('close-raw-viewer'));
+    await screen.getByLabelText('action-bar-action.raw');
+
+    expect(screen.queryByTestId('rawViewer--dialog')).toBeFalsy();
   });
 
   test('should not display download tarball button', () => {
-    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={true} />, store);
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={false} />, store);
     expect(screen.queryByLabelText('Download tarball')).toBeFalsy();
   });
 
+  test('when click button to download ', async () => {
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={false} />, store);
+    fireEvent.click(screen.getByTestId('download-tarball-btn'));
+    await store.getState().loading.models.download;
+  });
+
   test('should not display show raw button', () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={false} />, store);
     expect(screen.queryByLabelText('action-bar-action.raw')).toBeFalsy();