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

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

@@ -17,7 +17,7 @@ Object.keys(_react).forEach(function (key) {
   if (key in exports && exports[key] === _react[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
-    get: function get() {
+    get: function () {
       return _react[key];
     }
   });
@@ -27,32 +27,27 @@ var _reactI18next = require("react-i18next");
 var _reactRedux = require("react-redux");
 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 }; }
-var renderWithStore = function renderWithStore(ui, store) {
-  return (0, _react.render)(ui, {
-    wrapper: function wrapper(_ref) {
-      var children = _ref.children;
-      return /*#__PURE__*/_react2["default"].createElement(_reactRedux.Provider, {
-        store: store
-      }, /*#__PURE__*/_react2["default"].createElement(_AppConfigurationProvider["default"], null, /*#__PURE__*/_react2["default"].createElement(_styles.StyledEngineProvider, {
-        injectFirst: true
-      }, /*#__PURE__*/_react2["default"].createElement(_Theme.ThemeProvider, null, /*#__PURE__*/_react2["default"].createElement(_reactI18next.I18nextProvider, {
-        i18n: _i18nConfig["default"]
-      }, children)))));
-    }
-  });
-};
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const renderWithStore = (ui, store) => (0, _react.render)(ui, {
+  wrapper: ({
+    children
+  }) => /*#__PURE__*/_react2.default.createElement(_reactRedux.Provider, {
+    store: store
+  }, /*#__PURE__*/_react2.default.createElement(_PersistenceSettingProvider.default, null, /*#__PURE__*/_react2.default.createElement(_AppConfigurationProvider.default, null, /*#__PURE__*/_react2.default.createElement(_styles.StyledEngineProvider, {
+    injectFirst: true
+  }, /*#__PURE__*/_react2.default.createElement(_Theme.ThemeProvider, null, /*#__PURE__*/_react2.default.createElement(_reactI18next.I18nextProvider, {
+    i18n: _i18nConfig.default
+  }, children))))))
+});
 exports.renderWithStore = renderWithStore;
-var customRender = function customRender(node) {
-  for (var _len = arguments.length, options = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    options[_key - 1] = arguments[_key];
-  }
-  return _react.render.apply(void 0, [/*#__PURE__*/_react2["default"].createElement(_AppConfigurationProvider["default"], null, /*#__PURE__*/_react2["default"].createElement(_styles.StyledEngineProvider, {
+const customRender = (node, ...options) => {
+  return (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_AppConfigurationProvider.default, null, /*#__PURE__*/_react2.default.createElement(_PersistenceSettingProvider.default, null, /*#__PURE__*/_react2.default.createElement(_styles.StyledEngineProvider, {
     injectFirst: true
-  }, /*#__PURE__*/_react2["default"].createElement(_Theme.ThemeProvider, null, /*#__PURE__*/_react2["default"].createElement(_reactI18next.I18nextProvider, {
-    i18n: _i18nConfig["default"]
-  }, node))))].concat(options));
+  }, /*#__PURE__*/_react2.default.createElement(_Theme.ThemeProvider, null, /*#__PURE__*/_react2.default.createElement(_reactI18next.I18nextProvider, {
+    i18n: _i18nConfig.default
+  }, node))))), ...options);
 };
 exports.customRender = exports.render = customRender;
 //# sourceMappingURL=test-react-testing-library.js.map

package/build/utils/__partials__/packageMeta.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.packageMeta = void 0;
-var packageMeta = {
+const packageMeta = {
   name: 'verdaccio',
   'dist-tags': {
     latest: '2.7.1',

package/build/utils/cli-utils.js

@@ -8,35 +8,42 @@ exports.getCLIChangePassword = getCLIChangePassword;
 exports.getCLISBerryYamlRegistry = getCLISBerryYamlRegistry;
 exports.getCLISetConfigRegistry = getCLISetConfigRegistry;
 exports.getCLISetRegistry = getCLISetRegistry;
-var copyToClipBoardUtility = function copyToClipBoardUtility(str) {
-  return function (event) {
-    event.preventDefault();
-    var node = document.createElement('div');
-    node.innerText = str;
-    if (document.body) {
-      document.body.appendChild(node);
-      var range = document.createRange();
-      var selection = window.getSelection();
-      range.selectNodeContents(node);
-      selection.removeAllRanges();
-      selection.addRange(range);
-      document.execCommand('copy');
-      document.body.removeChild(node);
-    }
-  };
+const copyToClipBoardUtility = str => event => {
+  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();
+    range.selectNodeContents(node);
+    selection.removeAllRanges();
+    selection.addRange(range);
+    document.execCommand('copy');
+    document.body.removeChild(node);
+  }
 };
 exports.copyToClipBoardUtility = copyToClipBoardUtility;
 function getCLISetConfigRegistry(command, scope, registryUrl) {
   // if there is a scope defined there needs to be a ":" separator between the scope and the registry
-  return "".concat(command, " ").concat(scope ? "".concat(scope, ":") : '', "registry ").concat(registryUrl);
+  return `${command} ${scope ? `${scope}:` : ''}registry ${registryUrl}`;
 }
 function getCLISetRegistry(command, registryUrl) {
-  return "".concat(command, " --registry ").concat(registryUrl);
+  return `${command} --registry ${registryUrl}`;
 }
 function getCLIChangePassword(command, registryUrl) {
-  return "".concat(command, " profile set password --registry ").concat(registryUrl);
+  return `${command} profile set password --registry ${registryUrl}`;
 }
 function getCLISBerryYamlRegistry(scope, registryUrl) {
-  return !scope ? "// .yarnrc.yml    \nnpmRegistryServer: \"".concat(registryUrl, "\"\nunsafeHttpWhitelist:\n  - ").concat(new URL(registryUrl).host) : "\n// .yarnrc.yml\nnpmRegistryServer: \"".concat(registryUrl, "\"\nnpmScopes:\n  ").concat(scope.replace('@', ''), ":\n    npmRegistryServer: ").concat(registryUrl, "\n    npmPublishRegistry: ").concat(registryUrl);
+  return !scope ? `// .yarnrc.yml    
+npmRegistryServer: "${registryUrl}"
+unsafeHttpWhitelist:
+  - ${new URL(registryUrl).host}` : `
+// .yarnrc.yml
+npmRegistryServer: "${registryUrl}"
+npmScopes:
+  ${scope.replace('@', '')}:
+    npmRegistryServer: ${registryUrl}
+    npmPublishRegistry: ${registryUrl}`;
 }
 //# sourceMappingURL=cli-utils.js.map

package/build/utils/index.js

@@ -1,43 +1,42 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "Route", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _routes.Route;
   }
 });
 Object.defineProperty(exports, "getCLIChangePassword", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _cliUtils.getCLIChangePassword;
   }
 });
 Object.defineProperty(exports, "getCLISBerryYamlRegistry", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _cliUtils.getCLISBerryYamlRegistry;
   }
 });
 Object.defineProperty(exports, "getCLISetConfigRegistry", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _cliUtils.getCLISetConfigRegistry;
   }
 });
 Object.defineProperty(exports, "getCLISetRegistry", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _cliUtils.getCLISetRegistry;
   }
 });
 Object.defineProperty(exports, "loadable", {
   enumerable: true,
-  get: function get() {
-    return _loadable["default"];
+  get: function () {
+    return _loadable.default;
   }
 });
 exports.utils = exports.url = void 0;
@@ -48,7 +47,7 @@ exports.utils = _utils;
 var _cliUtils = require("./cli-utils");
 var _loadable = _interopRequireDefault(require("./loadable"));
 var _routes = require("./routes");
-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 _getRequireWildcardCache(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(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; }
 //# sourceMappingURL=index.js.map

package/build/utils/loadable.js

@@ -1,13 +1,12 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+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 _getRequireWildcardCache(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(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; }
 /* eslint-disable verdaccio/jsx-spread */
 /**
  *  With the combination of a bundler, enable to code split a package.
@@ -18,13 +17,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
    ```
    @category HOC
  */
-var _default = function _default(importCallback) {
-  var TargetComponent = /*#__PURE__*/(0, _react.lazy)(importCallback);
-  return function (props) {
-    return /*#__PURE__*/_react["default"].createElement(_react.Suspense, {
-      fallback: null
-    }, /*#__PURE__*/_react["default"].createElement(TargetComponent, props));
-  };
+var _default = importCallback => {
+  const TargetComponent = /*#__PURE__*/(0, _react.lazy)(importCallback);
+  return props => /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/_react.default.createElement(TargetComponent, props));
 };
-exports["default"] = _default;
+exports.default = _default;
 //# sourceMappingURL=loadable.js.map

package/build/utils/routes.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Route = void 0;
-var Route;
-exports.Route = Route;
-(function (Route) {
+let Route = /*#__PURE__*/function (Route) {
   Route["ROOT"] = "/";
   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";
-})(Route || (exports.Route = Route = {}));
+  return Route;
+}({});
+exports.Route = Route;
 //# sourceMappingURL=routes.js.map

package/build/utils/url.js

@@ -9,29 +9,29 @@ 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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function isURL(url) {
-  return (0, _isURL["default"])(url || '', {
-    protocols: ['http', 'https', 'git+https'],
+  return (0, _isURL.default)(url || '', {
+    protocols: ['http', 'https', 'git+https', 'git'],
     require_protocol: true,
     require_tld: false
   });
 }
 function isEmail(email) {
-  return (0, _isEmail["default"])(email || '');
+  return (0, _isEmail.default)(email || '');
 }
 function extractFileName(url) {
   return url.substring(url.lastIndexOf('/') + 1);
 }
 function blobToFile(blob, fileName) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  var b = blob;
+  const b = blob;
   b.lastModified = Date.now();
   b.name = fileName;
   return b;
 }
 function downloadFile(fileStream, fileName) {
-  var file;
+  let 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 +46,8 @@ function downloadFile(fileStream, fileName) {
       lastModified: Date.now()
     });
   }
-  var objectURL = URL.createObjectURL(file);
-  var fileLink = document.createElement('a');
+  const objectURL = URL.createObjectURL(file);
+  const fileLink = document.createElement('a');
   fileLink.href = objectURL;
   fileLink.download = fileName;
 
@@ -56,7 +56,7 @@ function downloadFile(fileStream, fileName) {
   document.documentElement.appendChild(fileLink);
   fileLink.click();
   // firefox requires remove the object url
-  setTimeout(function () {
+  setTimeout(() => {
     URL.revokeObjectURL(objectURL);
     document.documentElement.removeChild(fileLink);
   }, 150);

package/build/utils/utils.js

@@ -17,11 +17,11 @@ var _localizedFormat = _interopRequireDefault(require("dayjs/plugin/localizedFor
 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 }; }
-var TIMEFORMAT = 'L LTS';
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const TIMEFORMAT = 'L LTS';
 exports.TIMEFORMAT = TIMEFORMAT;
-_dayjs["default"].extend(_relativeTime["default"]);
-_dayjs["default"].extend(_localizedFormat["default"]);
+_dayjs.default.extend(_relativeTime.default);
+_dayjs.default.extend(_localizedFormat.default);
 
 /**
  * Formats license field for webui.
@@ -30,7 +30,7 @@ _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)) {
+  if ((0, _isString.default)(license)) {
     return license;
   }
   if (license !== null && license !== void 0 && license.type) {
@@ -46,7 +46,7 @@ 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)) {
+  if ((0, _isString.default)(repository)) {
     return repository;
   }
   if (repository !== null && repository !== void 0 && repository.url) {
@@ -55,21 +55,20 @@ function formatRepository(repository) {
   return null;
 }
 function formatDate(lastUpdate) {
-  return (0, _dayjs["default"])(new Date(lastUpdate)).format(TIMEFORMAT);
+  return (0, _dayjs.default)(new Date(lastUpdate)).format(TIMEFORMAT);
 }
 function formatDateDistance(lastUpdate) {
-  return (0, _dayjs["default"])(new Date(lastUpdate)).fromNow();
+  return (0, _dayjs.default)(new Date(lastUpdate)).fromNow();
 }
 
 /**
  * For <LastSync /> component
  * @param {array} uplinks
  */
-function getLastUpdatedPackageTime() {
-  var uplinks = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var lastUpdate = 0;
+function getLastUpdatedPackageTime(uplinks = {}) {
+  let lastUpdate = 0;
   Object.keys(uplinks).forEach(function computeUplink(upLinkName) {
-    var status = uplinks[upLinkName];
+    const status = uplinks[upLinkName];
     if (status.fetched > lastUpdate) {
       lastUpdate = status.fetched;
     }
@@ -82,22 +81,19 @@ function getLastUpdatedPackageTime() {
  * @param {Object} time
  * @returns {Array} last 3 releases
  */
-function getRecentReleases() {
-  var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var recent = Object.keys(time).map(function (version) {
-    return {
-      version: version,
-      time: formatDate(time[version])
-    };
-  });
+function getRecentReleases(time = {}) {
+  const recent = Object.keys(time).map(version => ({
+    version,
+    time: formatDate(time[version])
+  }));
   return recent.slice(recent.length - 3, recent.length).reverse();
 }
 function getAuthorName(authorName) {
   if (!authorName) {
-    return _i18next["default"].t('author-unknown');
+    return _i18next.default.t('author-unknown');
   }
   if (authorName.toLowerCase() === 'anonymous') {
-    return _i18next["default"].t('author-anonymous');
+    return _i18next.default.t('author-anonymous');
   }
   return authorName;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdaccio/ui-components",
-  "version": "2.0.0-6-next.8",
+  "version": "2.0.0-6-next.10",
   "description": "theme ui component",
   "author": "Juan Picado <juanpicado19@gmail.com>",
   "license": "MIT",
@@ -8,46 +8,46 @@
   "main": "./build/index.js",
   "types": "build/index.d.ts",
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@mui/icons-material": "5.11.9",
-    "@mui/material": "5.11.9",
-    "@mui/styles": "5.11.9",
+    "@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.11.16",
+    "@mui/material": "5.12.0",
+    "@mui/styles": "5.12.0",
+    "@mui/system": "5.12.0",
     "@rematch/core": "2.2.0",
     "@rematch/loading": "2.1.2",
     "@rematch/persist": "2.1.2",
-    "@verdaccio/types": "11.0.0-6-next.25",
+    "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",
+    "history": "4.10.1",
     "i18next": "20.6.1",
     "localstorage-memory": "1.0.3",
     "lodash": "4.17.21",
-    "marked": "4.2.12",
+    "marked": "4.3.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-json-view": "1.21.3",
+    "react-markdown": "8.0.5",
     "react-redux": "7.2.9",
-    "react-hook-form": "7.41.1",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
     "react-virtualized": "9.22.3",
-    "country-flag-icons": "1.5.5",
-    "history": "4.10.1",
-    "react-markdown": "8.0.5",
-    "remark-gfm": "3.0.1",
     "redux": "4.2.1",
+    "remark-gfm": "3.0.1",
     "validator": "13.9.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.7",
-    "@emotion/babel-plugin": "11.10.5",
+    "@emotion/babel-plugin": "11.10.6",
     "@emotion/jest": "11.10.5",
-    "@fontsource/material-icons": "^4.5.4",
-    "@fontsource/roboto": "^4.5.8",
     "@storybook/addon-actions": "^6.5.15",
     "@storybook/addon-essentials": "^6.5.15",
     "@storybook/addon-interactions": "^6.5.15",
@@ -59,6 +59,10 @@
     "@testing-library/dom": "8.19.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
+    "@types/hast": "^2.0.0",
+    "@types/react-router": "^5.1.20",
+    "@types/unist": "^2.0.0",
+    "@verdaccio/types": "11.0.0-6-next.25",
     "babel-loader": "^8.3.0",
     "mockdate": "3.0.5",
     "msw": "0.49.2"
@@ -74,8 +78,7 @@
     "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\"",
     "build": "pnpm run build:js && pnpm run build:types",
-    "storybook": "start-storybook -p 6006 -s ./public",
+    "start": "start-storybook -p 6006 -s ./public",
     "build-storybook": "build-storybook"
-  },
-  "readme": "# UI Components\n\nA collection of components ready to use for building complex user interfaces.\n\n- `components`: Independent components to use to build different layouts, all components are based on [MUI (Material UI)](https://mui.com/).\n- `providers`: Providers are useful components that uses the React [`Context`](https://reactjs.org/docs/context.html), for instance, the `VersionProvider` connects the Redux store with independent components. The `AppConfigurationProvider` is able to read the\n- `store`: The Redux store powered by [`Rematch`](https://rematchjs.org), could be used with the global object `__VERDACCIO_BASENAME_UI_OPTIONS` that verdaccio uses to provide the UI configuration.\n- `theme`: The `ThemeProvider` is an abstraction of the _material-ui_ theme provider.\n- `sections`: A group of components to setup quickly sections of the application, like the sidebar, header of footer.\n- `layouts`: Are the combination of one or more sections ready to use.\n- `hooks`: A collection of useful React hooks.\n\n```bash\nnpm i -D @verdaccio/ui-components@6-next\n```\n\n## Requirements\n\nThe set of components requires libraries available in a project:\n\n- React >17\n- Material UI >5.x\n- Redux >4.x\n- Emotion >11\n- i18next >20.x\n- TypeScript is optional but recommended.\n\n### The store\n\nAll components assume there is a Redux storage, thus a `<Provider/>` wrap is the required that wrap the application.\n\n```jsx\nimport { store } from '@verdaccio/ui-components';\n\n<Provider store={store}>....APP</Provider>;\n```\n\nThe default storage is powered by Rematch and contains the required `dispatch` to fetch data from the registry.\n\n- Fetch all private packages\n\n```jsx\nimport { useDispatch, useSelector } from 'react-redux';\n\nconst packages = useSelector((state: RootState) => state.packages.response);\nuseEffect(() => {\n  dispatch.packages.getPackages();\n}, [dispatch]);\n```\n\n## How to use it\n\n```jsx\nimport React from 'react';\nimport { Route, Router, Switch } from 'react-router-dom';\nimport { Provider } from 'react-redux';\nimport {\n  Home,\n  store,\n  Loading,\n  NotFound,\n  Route as Routes,\n  TranslatorProvider,\n  VersionProvider,\n  loadable,\n} from '@verdaccio/ui-components';\n\n// to enable webpack code splitting\nconst VersionPage = loadable(() => import('../pages/Version'));\n\nconst App: React.FC = () => {\n  // configuration from config.yaml\n  const { configOptions } = useConfig();\n  const listLanguages = [{lng: 'en-US', icon: <someSVGIcon>, menuKey: 'lng.english'}];\n  return (\n      <Provider store={store}>\n        <AppConfigurationProvider>\n          <ThemeProvider>\n            <TranslatorProvider i18n={i18n} listLanguages={listLanguages} onMount={() => {}}>\n              <Suspense fallback={<Loading />}>\n                <Router history={history}>\n                  <Header HeaderInfoDialog={CustomInfoDialog} />\n                    <Switch>\n                      <Route exact={true} path={Routes.ROOT}>\n                        <Home />\n                      </Route>\n                      <Route exact={true} path={Routes.SCOPE_PACKAGE}>\n                        <VersionProvider>\n                          <VersionPage />\n                        </VersionProvider>\n                      </Route>\n                    </Switch>\n                </Router>\n                {configOptions.showFooter && <Footer />}\n              </Suspense>\n            </TranslatorProvider>\n          </ThemeProvider>\n        </AppConfigurationProvider>\n      </Provider>\n  );\n};\n``\n```\n"
+  }
 }

package/src/Theme/ThemeProvider.tsx

@@ -30,7 +30,6 @@ const ThemeProvider: React.FC<{ children: any }> = ({ children }) => {
   const themeMode: ThemeMode = isDarkMode ? 'dark' : 'light';
 
   const currentTheme = getTheme(themeMode, configOptions.primaryColor);
-
   return (
     <ThemeContext.Provider value={{ isDarkMode, setIsDarkMode }}>
       <StyledEngineProvider injectFirst={true}>

package/src/components/ActionBar/ActionBar.stories.tsx

@@ -1,50 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { clone, merge } from 'lodash';
 import React from 'react';
 
 import { default as ActionBar } from '.';
 
-export default {
-  title: 'ActionBar  ',
-};
-
-export const ActionBarAll: any = () => (
-  <ActionBar
-    packageMeta={{
-      _uplinks: {},
-      latest: {
-        name: 'verdaccio-ui/local-storage',
-        version: '8.0.1-next.1',
-        dist: {
-          fileCount: 0,
-          unpackedSize: 0,
-          tarball: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz',
-        },
-        homepage: 'https://verdaccio.org',
-        bugs: {
-          url: 'https://github.com/verdaccio/monorepo/issues',
-        },
-      },
-    }}
-  />
-);
-
-export const RawViewer: any = () => (
-  <ActionBar
-    packageMeta={{
-      _uplinks: {},
-      latest: {
-        name: 'verdaccio-ui/local-storage',
-        version: '8.0.1-next.1',
-        dist: {
-          fileCount: 0,
-          unpackedSize: 0,
-          tarball: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz',
-        },
-        homepage: 'https://verdaccio.org',
-        bugs: {
-          url: 'https://github.com/verdaccio/monorepo/issues',
-        },
-      },
-    }}
-    showRaw={true}
-  />
-);
+const meta: Meta<typeof ActionBar> = {
+  title: 'Components/Sidebar/ActionBar',
+  component: ActionBar,
+};
+
+export default meta;
+type Story = StoryObj<typeof ActionBar>;
+
+const packageMeta = {
+  _uplinks: {},
+  latest: {
+    name: 'verdaccio-ui/local-storage',
+    version: '8.0.1-next.1',
+    dist: {
+      fileCount: 0,
+      unpackedSize: 0,
+      tarball: 'https://registry.verdaccio.org/storybook/-/storybook-0.2.0.tgz',
+    },
+    homepage: 'https://verdaccio.org',
+    bugs: {
+      url: 'https://github.com/verdaccio/monorepo/issues',
+    },
+  },
+};
+
+export const Primary: Story = {
+  name: 'Default',
+  render: () => <ActionBar packageMeta={packageMeta} />,
+};
+
+export const Raw: Story = {
+  name: 'Raw viewer',
+  render: () => <ActionBar packageMeta={packageMeta} showRaw={true} />,
+};
+
+export const NoLatest: Story = {
+  name: 'No latest (empty)',
+  render: () => <ActionBar packageMeta={{}} showRaw={true} />,
+};
+
+export const Download: Story = {
+  name: 'No show download',
+  render: () => <ActionBar packageMeta={{ ...clone(packageMeta) }} showDownloadTarball={false} />,
+};
+
+export const Home: Story = {
+  name: 'No home',
+  render: () => (
+    <ActionBar packageMeta={{ ...merge(clone(packageMeta), { latest: { homepage: null } }) }} />
+  ),
+};
+
+export const Bugs: Story = {
+  name: 'No bugs',
+  render: () => (
+    <ActionBar packageMeta={{ ...merge(clone(packageMeta), { latest: { bugs: null } }) }} />
+  ),
+};

package/src/components/Author/Author.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { default as Author } from '.';
 
 export default {
-  title: 'Author  ',
+  title: 'Components/Sidebar/Author',
 };
 
 export const AuthorAll: any = () => (