@verdaccio/ui-components 2.0.0-6-next.10 → 3.0.0-next-7.3

package/build/src/sections/Footer/Footer.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const Footer: () => JSX.Element;
+import React from 'react';
+declare const Footer: () => React.JSX.Element;
 export default Footer;

package/build/src/sections/Header/HeaderMenu.d.ts

@@ -2,7 +2,7 @@ import React, { MouseEvent } from 'react';
 interface Props {
     username: string;
     isMenuOpen: boolean;
-    anchorEl?: Element | ((element: Element) => Element) | null | undefined;
+    anchorEl?: Element | null | undefined;
     onLogout: () => void;
     onLoggedInMenu: (event: MouseEvent<HTMLButtonElement>) => void;
     onLoggedInMenuClose: () => void;

package/build/src/sections/Header/LanguageSwitch.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
 export declare const CardSelected: import("@emotion/styled").StyledComponent<any, {}, {}>;
 export declare const CardUnSelected: import("@emotion/styled").StyledComponent<any, {}, {}>;
-declare const LanguageSwitch: () => JSX.Element;
+declare const LanguageSwitch: () => React.JSX.Element;
 export default LanguageSwitch;

package/build/src/sections/Header/styles.d.ts

@@ -27,7 +27,7 @@ export declare const SearchWrapper: import("@emotion/styled").StyledComponent<{
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const NavBar: import("@emotion/styled").StyledComponent<any, {}, {}>;
-export declare const StyledLink: import("@emotion/styled").StyledComponent<Pick<any, string | number | symbol> & import("react").RefAttributes<HTMLAnchorElement> & {
+export declare const StyledLink: import("@emotion/styled").StyledComponent<Omit<any, "ref"> & import("react").RefAttributes<HTMLAnchorElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
     theme?: import("@mui/material").Theme | undefined;

package/build/src/store/models/login.d.ts

@@ -13,6 +13,7 @@ export type LoginResponse = {
 export type LoginBody = {
     error?: LoginError;
 } & LoginResponse;
+export declare function getDefaultUserState(): LoginBody;
 /**
  *
  * @category Model

package/build/src/types/packageMeta.d.ts

@@ -71,6 +71,7 @@ export interface Version {
     license?: string;
     main?: string;
     keywords?: string[];
+    deprecated?: string;
 }
 export interface Author {
     name?: string;

package/build/src/utils/__partials__/packageMeta.d.ts

@@ -154,7 +154,6 @@ export declare const packageMeta: {
             'flow-runtime': string;
             'friendly-errors-webpack-plugin': string;
             'fs-extra': string;
-            'github-markdown-css': string;
             'html-webpack-plugin': string;
             'in-publish': string;
             'localstorage-memory': string;

package/build/src/utils/index.d.ts

@@ -3,3 +3,4 @@ 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/build/src/utils/loadable.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 /**
  *  With the combination of a bundler, enable to code split a package.
  *
@@ -8,5 +8,5 @@
    ```
    @category HOC
  */
-declare const _default: (importCallback: any) => (props: any) => JSX.Element;
+declare const _default: (importCallback: any) => (props: any) => React.JSX.Element;
 export default _default;

package/build/src/utils/token.d.ts

@@ -0,0 +1 @@
+export declare function isTokenExpire(token: string | null): boolean;

package/build/store/api.js

@@ -65,6 +65,5 @@ class API {
     });
   }
 }
-var _default = new API();
-exports.default = _default;
+var _default = exports.default = new API();
 //# sourceMappingURL=api.js.map

package/build/store/models/configuration.js

@@ -22,8 +22,8 @@ const defaultValues = {
   title: 'Verdaccio'
 };
 function getConfiguration() {
-  var _window;
-  const uiConfiguration = ((_window = window) === null || _window === void 0 ? void 0 : _window.__VERDACCIO_BASENAME_UI_OPTIONS) ?? defaultValues;
+  var _window$__VERDACCIO_B, _window;
+  const uiConfiguration = (_window$__VERDACCIO_B = (_window = window) === null || _window === void 0 ? void 0 : _window.__VERDACCIO_BASENAME_UI_OPTIONS) !== null && _window$__VERDACCIO_B !== void 0 ? _window$__VERDACCIO_B : defaultValues;
   if ((0, _isNil.default)(uiConfiguration.primaryColor) || (0, _isEmpty.default)(uiConfiguration.primaryColor)) {
     uiConfiguration.primaryColor = _Theme.colors.PRIMARY_COLOR;
   }
@@ -34,7 +34,7 @@ function getConfiguration() {
  *
  * @category Model
  */
-const configuration = (0, _core.createModel)()({
+const configuration = exports.configuration = (0, _core.createModel)()({
   state: {
     config: getConfiguration()
   },
@@ -45,5 +45,4 @@ const configuration = (0, _core.createModel)()({
     }
   })
 });
-exports.configuration = configuration;
 //# sourceMappingURL=configuration.js.map

package/build/store/models/download.js

@@ -12,14 +12,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  *
  * @category Model
  */
-const download = (0, _core.createModel)()({
+const download = exports.download = (0, _core.createModel)()({
   state: {},
   reducers: {},
   effects: () => ({
     async getTarball({
       link
     }) {
-      // const basePath = state.configuration.config.base;
       try {
         const fileStream = await _api.default.request(link, 'GET', {
           headers: {
@@ -37,5 +36,4 @@ const download = (0, _core.createModel)()({
     }
   })
 });
-exports.download = download;
 //# sourceMappingURL=download.js.map

package/build/store/models/index.js

@@ -10,7 +10,7 @@ var _login = require("./login");
 var _manifest = require("./manifest");
 var _packages = require("./packages");
 var _search = require("./search");
-const models = {
+const models = exports.models = {
   packages: _packages.packages,
   configuration: _configuration.configuration,
   search: _search.search,
@@ -18,5 +18,4 @@ const models = {
   login: _login.login,
   manifest: _manifest.manifest
 };
-exports.models = models;
 //# sourceMappingURL=index.js.map

package/build/store/models/login.js

@@ -3,28 +3,37 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.login = exports.HEADERS = void 0;
+exports.HEADERS = void 0;
+exports.getDefaultUserState = getDefaultUserState;
+exports.login = void 0;
 var _core = require("@rematch/core");
 var _i18next = _interopRequireDefault(require("i18next"));
+var _utils = require("../../utils");
 var _api = _interopRequireDefault(require("../api"));
 var _storage = _interopRequireDefault(require("../storage"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const HEADERS = {
+const HEADERS = exports.HEADERS = {
   JSON: 'application/json'
 };
-exports.HEADERS = HEADERS;
-const token = _storage.default.getItem('token');
-const username = _storage.default.getItem('username');
-const defaultUserState = {
-  token,
-  username
-};
+function getDefaultUserState() {
+  const token = _storage.default.getItem('token');
+  const username = _storage.default.getItem('username');
+  const defaultUserState = (0, _utils.isTokenExpire)(token) ? {
+    token: null,
+    username: null
+  } : {
+    token,
+    username
+  };
+  return defaultUserState;
+}
+const defaultUserState = getDefaultUserState();
 
 /**
  *
  * @category Model
  */
-const login = (0, _core.createModel)()({
+const login = exports.login = (0, _core.createModel)()({
   state: {
     username: defaultUserState.username,
     token: defaultUserState.token
@@ -90,5 +99,4 @@ const login = (0, _core.createModel)()({
     }
   })
 });
-exports.login = login;
 //# sourceMappingURL=login.js.map

package/build/store/models/manifest.js

@@ -22,7 +22,7 @@ function isPackageVersionValid(packageMeta, packageVersion) {
  *
  * @category Model
  */
-const manifest = (0, _core.createModel)()({
+const manifest = exports.manifest = (0, _core.createModel)()({
   state: {},
   reducers: {
     notFound(state) {
@@ -95,5 +95,4 @@ const manifest = (0, _core.createModel)()({
     }
   })
 });
-exports.manifest = manifest;
 //# sourceMappingURL=manifest.js.map

package/build/store/models/packages.js

@@ -11,7 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  *
  * @category Model
  */
-const packages = (0, _core.createModel)()({
+const packages = exports.packages = (0, _core.createModel)()({
   state: {
     response: []
   },
@@ -40,5 +40,4 @@ const packages = (0, _core.createModel)()({
     }
   })
 });
-exports.packages = packages;
 //# sourceMappingURL=packages.js.map

package/build/store/models/search.js

@@ -12,7 +12,7 @@ const CONSTANTS = {
   API_DELAY: 300,
   ABORT_ERROR: 'AbortError'
 };
-const search = (0, _core.createModel)()({
+const search = exports.search = (0, _core.createModel)()({
   state: {
     suggestions: [],
     controller: []
@@ -86,5 +86,4 @@ const search = (0, _core.createModel)()({
     }
   })
 });
-exports.search = search;
 //# sourceMappingURL=search.js.map

package/build/store/storage.js

@@ -14,6 +14,5 @@ try {
 } catch (err) {
   storage = _localstorageMemory.default;
 }
-var _default = storage;
-exports.default = _default;
+var _default = exports.default = storage;
 //# sourceMappingURL=storage.js.map

package/build/store/store.js

@@ -8,9 +8,8 @@ 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)({
+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

@@ -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/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

@@ -3,6 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  url: true,
+  utils: true,
+  getCLIChangePassword: true,
+  getCLISBerryYamlRegistry: true,
+  getCLISetConfigRegistry: true,
+  getCLISetRegistry: true,
+  loadable: true,
+  Route: true
+};
 Object.defineProperty(exports, "Route", {
   enumerable: true,
   get: function () {
@@ -47,7 +57,19 @@ exports.utils = _utils;
 var _cliUtils = require("./cli-utils");
 var _loadable = _interopRequireDefault(require("./loadable"));
 var _routes = require("./routes");
+var _token = require("./token");
+Object.keys(_token).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _token[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _token[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 _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 && Object.prototype.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 && Object.prototype.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,7 +4,7 @@ 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["SCOPE_PACKAGE"] = "/-/web/detail/@:scope/:package";
   Route["SCOPE_PACKAGE_VERSION"] = "/-/web/detail/@:scope/:package/v/:version";
@@ -12,5 +12,4 @@ let Route = /*#__PURE__*/function (Route) {
   Route["PACKAGE_VERSION"] = "/-/web/detail/:package/v/:version";
   return Route;
 }({});
-exports.Route = Route;
 //# sourceMappingURL=routes.js.map

package/build/utils/token.js

@@ -0,0 +1,35 @@
+"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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function isTokenExpire(token) {
+  if (!(0, _isString.default)(token)) {
+    return true;
+  }
+  const [, payload] = token.split('.');
+  if (!payload) {
+    return true;
+  }
+  let exp;
+  try {
+    exp = JSON.parse(_jsBase.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)) {
+    return true;
+  }
+  // Report as expire before (real expire time - 30s)
+  const jsTimestamp = exp * 1000 - 30000;
+  const expired = Date.now() >= jsTimestamp;
+  return expired;
+}
+//# sourceMappingURL=token.js.map

package/build/utils/utils.js

@@ -18,8 +18,7 @@ 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;
+const TIMEFORMAT = exports.TIMEFORMAT = 'L LTS';
 _dayjs.default.extend(_relativeTime.default);
 _dayjs.default.extend(_localizedFormat.default);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdaccio/ui-components",
-  "version": "2.0.0-6-next.10",
+  "version": "3.0.0-next-7.3",
   "description": "theme ui component",
   "author": "Juan Picado <juanpicado19@gmail.com>",
   "license": "MIT",
@@ -12,42 +12,43 @@
     "@emotion/styled": "^11.10.6",
     "@fontsource/material-icons": "^4.5.4",
     "@fontsource/roboto": "^4.5.8",
-    "@mui/icons-material": "5.11.16",
-    "@mui/material": "5.12.0",
-    "@mui/styles": "5.12.0",
-    "@mui/system": "5.12.0",
+    "@mui/icons-material": "5.15.6",
+    "@mui/material": "5.15.6",
+    "@mui/styles": "5.15.6",
+    "@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",
-    "github-markdown-css": "5.1.0",
-    "highlight.js": "11.7.0",
+    "country-flag-icons": "1.5.9",
+    "dayjs": "1.11.10",
+    "dompurify": "3.0.8",
+    "highlight.js": "11.9.0",
     "history": "4.10.1",
     "i18next": "20.6.1",
+    "js-base64": "3.7.6",
     "localstorage-memory": "1.0.3",
     "lodash": "4.17.21",
-    "marked": "4.3.0",
+    "marked": "11.1.1",
+    "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.49.3",
+    "react-i18next": "13.5.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"
+    "validator": "13.11.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.7",
+    "@babel/core": "^7.23.0",
     "@emotion/babel-plugin": "11.10.6",
-    "@emotion/jest": "11.10.5",
+    "@emotion/jest": "11.11.0",
     "@storybook/addon-actions": "^6.5.15",
     "@storybook/addon-essentials": "^6.5.15",
     "@storybook/addon-interactions": "^6.5.15",
@@ -55,17 +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": "8.19.1",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "13.4.0",
+    "@storybook/testing-library": "^0.2.0",
+    "@testing-library/dom": "9.3.4",
+    "@testing-library/jest-dom": "6.3.0",
+    "@testing-library/react": "14.1.2",
     "@types/hast": "^2.0.0",
     "@types/react-router": "^5.1.20",
     "@types/unist": "^2.0.0",
-    "@verdaccio/types": "11.0.0-6-next.25",
+    "@verdaccio/types": "12.0.0-next.2",
     "babel-loader": "^8.3.0",
     "mockdate": "3.0.5",
-    "msw": "0.49.2"
+    "msw": "0.49.3",
+    "typescript": "4.9.5"
   },
   "msw": {
     "workerDirectory": "public"
@@ -77,6 +79,7 @@
     "type-check": "tsc --noEmit -p tsconfig.build.json",
     "build:types": "tsc --emitDeclarationOnly -p tsconfig.build.json",
     "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",
     "start": "start-storybook -p 6006 -s ./public",
     "build-storybook": "build-storybook"

package/src/Theme/theme.ts

@@ -25,7 +25,7 @@ const colors = {
   nobel02: '#9f9f9f',
   primary: PRIMARY_COLOR,
   secondary: '#20232a',
-  background: '#fff',
+  background: '#f4f4f4',
   dodgerBlue: '#1ba1f2',
   cyanBlue: '#253341',
 };
@@ -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.stories.tsx

@@ -20,7 +20,7 @@ const packageMeta = {
     dist: {
       fileCount: 0,
       unpackedSize: 0,
-      tarball: 'https://registry.verdaccio.org/storybook/-/storybook-0.2.0.tgz',
+      tarball: 'https://registry.npmjs.org/verdaccio/-/verdaccio-5.26.0.tgz',
     },
     homepage: 'https://verdaccio.org',
     bugs: {

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

@@ -1,7 +1,13 @@
 import React from 'react';
 
 import { store } from '../../store/store';
-import { cleanup, fireEvent, renderWithStore, screen } from '../../test/test-react-testing-library';
+import {
+  cleanup,
+  fireEvent,
+  renderWithStore,
+  screen,
+  waitFor,
+} from '../../test/test-react-testing-library';
 import ActionBar from './ActionBar';
 
 const defaultPackageMeta = {
@@ -27,8 +33,10 @@ describe('<ActionBar /> component', () => {
   });
 
   test('should render the component in default state', () => {
-    const { container } = renderWithStore(<ActionBar packageMeta={defaultPackageMeta} />, store);
-    expect(container.firstChild).toMatchSnapshot();
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} />, store);
+    expect(screen.getByTestId('download-tarball-btn')).toBeInTheDocument();
+    expect(screen.getByTestId('BugReportIcon')).toBeInTheDocument();
+    expect(screen.getByTestId('HomeIcon')).toBeInTheDocument();
   });
 
   test('when there is no action bar data', () => {
@@ -45,8 +53,10 @@ describe('<ActionBar /> component', () => {
       },
     };
 
-    const { container } = renderWithStore(<ActionBar packageMeta={packageMeta} />, store);
-    expect(container.firstChild).toMatchSnapshot();
+    renderWithStore(<ActionBar packageMeta={packageMeta} />, store);
+    expect(screen.queryByTestId('download-tarball-btn')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('BugReportIcon')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('HomeIcon')).not.toBeInTheDocument();
   });
 
   test('when there is a button to download a tarball', () => {
@@ -59,11 +69,10 @@ describe('<ActionBar /> component', () => {
     expect(screen.getByLabelText('action-bar-action.raw')).toBeTruthy();
   });
 
-  test('when click button to raw manifest open a dialog with viewver', () => {
+  test('when click button to raw manifest open a dialog with viewer', async () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={true} />, store);
     fireEvent.click(screen.getByLabelText('action-bar-action.raw'));
-    // TODO: fix this part
-    // expect(screen.getByTestId('raw-viewver-dialog')).toBeInTheDocument();
+    await waitFor(() => expect(screen.getByTestId('rawViewer--dialog')).toBeInTheDocument());
   });
 
   test('should not display download tarball button', () => {
@@ -78,8 +87,6 @@ describe('<ActionBar /> component', () => {
 
   test('when there is a button to open an issue', () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} />, store);
-    // TODO: should be visible by text
-    // expect(screen.getByLabelText('action-bar-action.open-an-issue')).toBeTruthy();
     expect(screen.getByTestId('BugReportIcon')).toBeInTheDocument();
   });
 });