@verdaccio/ui-components 3.0.0-next-7.4 → 3.0.0-next-7.6

package/build/components/Versions/HistoryList.js

@@ -41,28 +41,32 @@ const VersionsHistoryList = ({
   const listVersions = hideDeprecatedVersions ? filterDeprecated(versions) : versions;
   return /*#__PURE__*/_react.default.createElement(_List.default, {
     dense: true
-  }, Object.keys(listVersions).reverse().map(version => /*#__PURE__*/_react.default.createElement(_ListItem.default, {
-    className: "version-item",
-    "data-testid": `version-${version}`,
-    key: version
-  }, /*#__PURE__*/_react.default.createElement(_Link.Link, {
-    to: `/-/web/detail/${packageName}/v/${version}`,
-    variant: "caption"
-  }, /*#__PURE__*/_react.default.createElement(_styles2.ListItemText, {
-    disableTypography: false,
-    primary: version
-  })), typeof versions[version].deprecated === 'string' ? /*#__PURE__*/_react.default.createElement(_Chip.default, {
-    color: "warning",
-    "data-testid": "deprecated-badge",
-    label: t('versions.deprecated'),
-    size: "small",
-    sx: {
-      marginLeft: theme.spacing(1)
-    },
-    variant: "outlined"
-  }) : null, /*#__PURE__*/_react.default.createElement(_styles2.Spacer, null), /*#__PURE__*/_react.default.createElement(_styles2.ListItemText, {
-    title: _utils.utils.formatDate(time[version])
-  }, time[version] ? _utils.utils.formatDateDistance(time[version]) : t('versions.not-available')))));
+  }, Object.keys(listVersions).reverse().map(version => {
+    var _versions$version;
+    return /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+      className: "version-item",
+      "data-testid": `version-${version}`,
+      key: version
+    }, /*#__PURE__*/_react.default.createElement(_Link.Link, {
+      to: `/-/web/detail/${packageName}/v/${version}`,
+      variant: "caption"
+    }, /*#__PURE__*/_react.default.createElement(_styles2.ListItemText, {
+      disableTypography: false,
+      primary: version
+    })), typeof ((_versions$version = versions[version]) === null || _versions$version === void 0 ? void 0 : _versions$version.deprecated) === 'string' ? /*#__PURE__*/_react.default.createElement(_Chip.default, {
+      color: "warning",
+      "data-testid": "deprecated-badge",
+      label: t('versions.deprecated'),
+      size: "small",
+      sx: {
+        marginLeft: theme.spacing(1)
+      },
+      variant: "outlined"
+    }) : null, /*#__PURE__*/_react.default.createElement(_styles2.Spacer, null), /*#__PURE__*/_react.default.createElement(_styles2.ListItemText, {
+      "data-testid": `version-list-text`,
+      title: _utils.utils.formatDate(time[version])
+    }, time[version] ? _utils.utils.formatDateDistance(time[version]) : t('versions.not-available')));
+  }));
 };
 var _default = exports.default = VersionsHistoryList;
 //# sourceMappingURL=HistoryList.js.map

package/build/components/Versions/Versions.js

@@ -5,13 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _Alert = _interopRequireDefault(require("@mui/material/Alert"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _styles = require("@mui/styles");
-var _react = _interopRequireDefault(require("react"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
+var _semver = _interopRequireDefault(require("semver"));
 var _providers = require("../../providers");
 var _HistoryList = _interopRequireDefault(require("./HistoryList"));
 var _TagList = _interopRequireDefault(require("./TagList"));
+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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const Versions = ({
   packageMeta,
@@ -24,26 +29,52 @@ const Versions = ({
     configOptions
   } = (0, _providers.useConfig)();
   const theme = (0, _styles.useTheme)();
-  if (!packageMeta) {
-    return null;
-  }
   const {
     versions = {},
     time = {},
     ['dist-tags']: distTags = {}
   } = packageMeta;
-  const hasDistTags = distTags && Object.keys(distTags).length > 0 && packageName;
-  const hasVersionHistory = versions && Object.keys(versions).length > 0 && packageName;
+  const [packageVersions, setPackageVersions] = (0, _react.useState)(versions);
+  if (!packageMeta || Object.keys(packageMeta).length === 0) {
+    return null;
+  }
   const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;
+  const hasDistTags = distTags && Object.keys(distTags).length > 0 && packageName;
+  const hasVersionHistory = packageVersions && Object.keys(packageVersions).length > 0 && packageName;
+  const filterVersions = textSearch => {
+    const filteredVersions = Object.keys(versions).reduce((acc, version) => {
+      if (textSearch !== '') {
+        if (typeof versions[version] !== 'undefined') {
+          if (_semver.default.satisfies(version, textSearch, {
+            includePrerelease: true,
+            loose: true
+          })) {
+            acc[version] = versions[version];
+          }
+        }
+      } else {
+        acc[version] = versions[version];
+      }
+      return acc;
+    }, {});
+    setPackageVersions(filteredVersions);
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hasDistTags ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     variant: "subtitle1"
   }, t('versions.current-tags')), /*#__PURE__*/_react.default.createElement(_TagList.default, {
     packageName: packageName,
     tags: distTags,
     time: time
-  })) : null, hasVersionHistory ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  })) : null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     variant: "subtitle1"
-  }, t('versions.version-history')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hideDeprecatedVersions && /*#__PURE__*/_react.default.createElement(_Alert.default, {
+  }, t('versions.version-history')), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    helperText: t('versions.search.placeholder'),
+    onChange: (0, _debounce.default)(e => {
+      filterVersions(e.target.value);
+    }, 200),
+    size: "small",
+    variant: "standard"
+  })), hasVersionHistory ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hideDeprecatedVersions === true && /*#__PURE__*/_react.default.createElement(_Alert.default, {
     severity: "info",
     sx: {
       marginTop: theme.spacing(1),
@@ -52,8 +83,8 @@ const Versions = ({
   }, t('versions.hide-deprecated')), /*#__PURE__*/_react.default.createElement(_HistoryList.default, {
     packageName: packageName,
     time: time,
-    versions: versions
-  }))) : null);
+    versions: packageVersions
+  })) : null);
 };
 var _default = exports.default = Versions;
 //# sourceMappingURL=Versions.js.map

package/build/index.js

@@ -28,6 +28,7 @@ var _exportNames = {
   Logo: true,
   MenuItem: true,
   NotFound: true,
+  Forbidden: true,
   LoginDialog: true,
   Search: true,
   HeaderInfoDialog: true,
@@ -136,6 +137,12 @@ Object.defineProperty(exports, "Footer", {
     return _Footer.default;
   }
 });
+Object.defineProperty(exports, "Forbidden", {
+  enumerable: true,
+  get: function () {
+    return _Forbidden.default;
+  }
+});
 Object.defineProperty(exports, "FundButton", {
   enumerable: true,
   get: function () {
@@ -406,6 +413,7 @@ var _Label = _interopRequireDefault(require("./components/Label"));
 var _Logo = _interopRequireDefault(require("./components/Logo"));
 var _MenuItem = _interopRequireDefault(require("./components/MenuItem"));
 var _NotFound = _interopRequireDefault(require("./components/NotFound"));
+var _Forbidden = _interopRequireDefault(require("./components/Forbidden"));
 var _LoginDialog = _interopRequireDefault(require("./components/LoginDialog"));
 var _Search = _interopRequireDefault(require("./components/Search"));
 var _HeaderInfoDialog = _interopRequireDefault(require("./components/HeaderInfoDialog"));

package/build/sections/Detail/Tabs.js

@@ -19,8 +19,6 @@ const DetailContainerTabs = ({
     t
   } = (0, _reactI18next.useTranslation)();
   return /*#__PURE__*/_react.default.createElement(Tabs, {
-    color: 'primary',
-    indicatorColor: 'primary',
     onChange: onChange,
     value: tabPosition,
     variant: 'fullWidth'
@@ -54,7 +52,7 @@ const Tabs = /*#__PURE__*/(0, _base.default)(_Tabs.default, process.env.NODE_ENV
 } : {
   name: "18uqayh",
   styles: "margin-bottom:16px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zZWN0aW9ucy9EZXRhaWwvVGFicy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNhIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9zZWN0aW9ucy9EZXRhaWwvVGFicy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgVGFiIGZyb20gJ0BtdWkvbWF0ZXJpYWwvVGFiJztcbmltcG9ydCB7IGRlZmF1bHQgYXMgTXVpVGFicyB9IGZyb20gJ0BtdWkvbWF0ZXJpYWwvVGFicyc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcblxuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICcuLi8uLi9UaGVtZSc7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIG9uQ2hhbmdlOiAoZXZlbnQ6IFJlYWN0LkNoYW5nZUV2ZW50PHt9PiwgbmV3VmFsdWU6IG51bWJlcikgPT4gdm9pZDtcbiAgdGFiUG9zaXRpb246IG51bWJlcjtcbn1cblxuY29uc3QgRGV0YWlsQ29udGFpbmVyVGFiczogUmVhY3QuRkM8UHJvcHM+ID0gKHsgdGFiUG9zaXRpb24sIG9uQ2hhbmdlIH0pID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxUYWJzXG4gICAgICBjb2xvcj17J3ByaW1hcnknfVxuICAgICAgaW5kaWNhdG9yQ29sb3I9eydwcmltYXJ5J31cbiAgICAgIG9uQ2hhbmdlPXtvbkNoYW5nZX1cbiAgICAgIHZhbHVlPXt0YWJQb3NpdGlvbn1cbiAgICAgIHZhcmlhbnQ9eydmdWxsV2lkdGgnfVxuICAgID5cbiAgICAgIDxUYWIgZGF0YS10ZXN0aWQ9eydyZWFkbWUtdGFiJ30gaWQ9eydyZWFkbWUtdGFiJ30gbGFiZWw9e3QoJ3RhYi5yZWFkbWUnKX0gLz5cbiAgICAgIDxUYWIgZGF0YS10ZXN0aWQ9eydkZXBlbmRlbmNpZXMtdGFiJ30gaWQ9eydkZXBlbmRlbmNpZXMtdGFiJ30gbGFiZWw9e3QoJ3RhYi5kZXBlbmRlbmNpZXMnKX0gLz5cbiAgICAgIDxUYWIgZGF0YS10ZXN0aWQ9eyd2ZXJzaW9ucy10YWInfSBpZD17J3ZlcnNpb25zLXRhYid9IGxhYmVsPXt0KCd0YWIudmVyc2lvbnMnKX0gLz5cbiAgICAgIDxUYWIgZGF0YS10ZXN0aWQ9eyd1cGxpbmtzLXRhYid9IGlkPXsndXBsaW5rcy10YWInfSBsYWJlbD17dCgndGFiLnVwbGlua3MnKX0gLz5cbiAgICA8L1RhYnM+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBEZXRhaWxDb250YWluZXJUYWJzO1xuXG5jb25zdCBUYWJzID0gc3R5bGVkKE11aVRhYnMpPHsgdGhlbWU/OiBUaGVtZSB9Pih7XG4gIG1hcmdpbkJvdHRvbTogMTYsXG59KTtcbiJdfQ== */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zZWN0aW9ucy9EZXRhaWwvVGFicy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkJhIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9zZWN0aW9ucy9EZXRhaWwvVGFicy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgVGFiIGZyb20gJ0BtdWkvbWF0ZXJpYWwvVGFiJztcbmltcG9ydCB7IGRlZmF1bHQgYXMgTXVpVGFicyB9IGZyb20gJ0BtdWkvbWF0ZXJpYWwvVGFicyc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcblxuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICcuLi8uLi9UaGVtZSc7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIG9uQ2hhbmdlOiAoZXZlbnQ6IFJlYWN0LkNoYW5nZUV2ZW50PHt9PiwgbmV3VmFsdWU6IG51bWJlcikgPT4gdm9pZDtcbiAgdGFiUG9zaXRpb246IG51bWJlcjtcbn1cblxuY29uc3QgRGV0YWlsQ29udGFpbmVyVGFiczogUmVhY3QuRkM8UHJvcHM+ID0gKHsgdGFiUG9zaXRpb24sIG9uQ2hhbmdlIH0pID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxUYWJzIG9uQ2hhbmdlPXtvbkNoYW5nZX0gdmFsdWU9e3RhYlBvc2l0aW9ufSB2YXJpYW50PXsnZnVsbFdpZHRoJ30+XG4gICAgICA8VGFiIGRhdGEtdGVzdGlkPXsncmVhZG1lLXRhYid9IGlkPXsncmVhZG1lLXRhYid9IGxhYmVsPXt0KCd0YWIucmVhZG1lJyl9IC8+XG4gICAgICA8VGFiIGRhdGEtdGVzdGlkPXsnZGVwZW5kZW5jaWVzLXRhYid9IGlkPXsnZGVwZW5kZW5jaWVzLXRhYid9IGxhYmVsPXt0KCd0YWIuZGVwZW5kZW5jaWVzJyl9IC8+XG4gICAgICA8VGFiIGRhdGEtdGVzdGlkPXsndmVyc2lvbnMtdGFiJ30gaWQ9eyd2ZXJzaW9ucy10YWInfSBsYWJlbD17dCgndGFiLnZlcnNpb25zJyl9IC8+XG4gICAgICA8VGFiIGRhdGEtdGVzdGlkPXsndXBsaW5rcy10YWInfSBpZD17J3VwbGlua3MtdGFiJ30gbGFiZWw9e3QoJ3RhYi51cGxpbmtzJyl9IC8+XG4gICAgPC9UYWJzPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRGV0YWlsQ29udGFpbmVyVGFicztcblxuY29uc3QgVGFicyA9IHN0eWxlZChNdWlUYWJzKTx7IHRoZW1lPzogVGhlbWUgfT4oe1xuICBtYXJnaW5Cb3R0b206IDE2LFxufSk7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 //# sourceMappingURL=Tabs.js.map

package/build/src/AppTest/App.stories.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const ApplicationStoryBook: any;
+export declare const ApplicationjQuery: any;
+export declare const ApplicationForbidden: any;
+export declare const ApplicationNotFound: any;

package/build/src/AppTest/AppRoute.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AppRoute: React.FC;
+export default AppRoute;

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

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

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

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

package/build/src/AppTest/pages/Version/Version.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Version: React.FC;
+export default Version;

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

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

package/build/src/components/Forbidden/Forbidden.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Foebidden: React.FC;
+export default Foebidden;

package/build/src/components/Forbidden/Forbidden.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/src/components/Forbidden/index.d.ts

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

package/build/src/index.d.ts

@@ -22,6 +22,7 @@ export { default as Label } from './components/Label';
 export { default as Logo } from './components/Logo';
 export { default as MenuItem } from './components/MenuItem';
 export { default as NotFound } from './components/NotFound';
+export { default as Forbidden } from './components/Forbidden';
 export { default as LoginDialog } from './components/LoginDialog';
 export { default as Search } from './components/Search';
 export { default as HeaderInfoDialog } from './components/HeaderInfoDialog';

package/build/src/sections/Detail/Detail.stories.d.ts

@@ -4,3 +4,4 @@ declare const _default: {
 export default _default;
 export declare const DetailStorybook: any;
 export declare const DetailJquery: any;
+export declare const DetailForbidden: any;

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

@@ -13,6 +13,15 @@ export declare const manifest: {
 } & {
     reducers: {
         notFound(state: {}): {
+            hasNotBeenFound: boolean;
+            forbidden: boolean;
+            manifest: undefined;
+            packageName: undefined;
+            packageVersion: undefined;
+            readme: undefined;
+        };
+        forbidden(state: {}): {
+            forbidden: boolean;
             hasNotBeenFound: boolean;
             manifest: undefined;
             packageName: undefined;
@@ -25,6 +34,7 @@ export declare const manifest: {
         isError(state: {}): {
             isError: boolean;
             hasNotBeenFound: boolean;
+            forbidden: boolean;
             manifest: undefined;
             packageName: undefined;
             packageVersion: undefined;
@@ -36,6 +46,7 @@ export declare const manifest: {
             packageVersion: any;
             readme: any;
             hasNotBeenFound: boolean;
+            forbidden: boolean;
         };
     };
 } & ({} | {

package/build/store/api.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 exports.handleResponseType = handleResponseType;
 var _storage = _interopRequireDefault(require("./storage"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+class CustomError extends Error {}
+
 /**
  * Handles response according to content type
  * @param {object} response
@@ -31,7 +33,9 @@ function handleResponseType(response) {
       return Promise.all([response.ok, response.blob()]);
     }
   }
-  return Promise.all([response.ok, response.text()]);
+
+  // error handling
+  return Promise.all([response.ok, response]);
 }
 const AuthHeader = 'Authorization';
 class API {
@@ -52,12 +56,14 @@ class API {
         signal: options.signal,
         ...options
       }).then(handleResponseType).then(response => {
-        if (response[0]) {
-          resolve(response[1]);
+        const [ok, data] = response;
+        if (ok === true) {
+          resolve(data);
         } else {
-          // eslint-disable-next-line no-console
-          console.error(response);
-          reject(new Error('something went wrong'));
+          var _data$statusText, _data$status;
+          const error = new CustomError((_data$statusText = data === null || data === void 0 ? void 0 : data.statusText) !== null && _data$statusText !== void 0 ? _data$statusText : 'Unknown error');
+          error.code = (_data$status = data === null || data === void 0 ? void 0 : data.status) !== null && _data$status !== void 0 ? _data$status : 500;
+          reject(error);
         }
       }).catch(error => {
         reject(error);

package/build/store/models/manifest.js

@@ -29,6 +29,18 @@ const manifest = exports.manifest = (0, _core.createModel)()({
       return {
         ...state,
         hasNotBeenFound: true,
+        forbidden: false,
+        manifest: undefined,
+        packageName: undefined,
+        packageVersion: undefined,
+        readme: undefined
+      };
+    },
+    forbidden(state) {
+      return {
+        ...state,
+        forbidden: true,
+        hasNotBeenFound: false,
         manifest: undefined,
         packageName: undefined,
         packageVersion: undefined,
@@ -46,6 +58,7 @@ const manifest = exports.manifest = (0, _core.createModel)()({
         ...state,
         isError: true,
         hasNotBeenFound: false,
+        forbidden: false,
         manifest: undefined,
         packageName: undefined,
         packageVersion: undefined,
@@ -64,7 +77,8 @@ const manifest = exports.manifest = (0, _core.createModel)()({
         packageName,
         packageVersion,
         readme,
-        hasNotBeenFound: false
+        hasNotBeenFound: false,
+        forbidden: false
       };
     }
   },
@@ -90,7 +104,11 @@ const manifest = exports.manifest = (0, _core.createModel)()({
           readme
         });
       } catch (error) {
-        dispatch.manifest.notFound();
+        if (error.code === 404) {
+          dispatch.manifest.notFound();
+        } else {
+          dispatch.manifest.forbidden();
+        }
       }
     }
   })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdaccio/ui-components",
-  "version": "3.0.0-next-7.4",
+  "version": "3.0.0-next-7.6",
   "description": "theme ui component",
   "author": "Juan Picado <juanpicado19@gmail.com>",
   "license": "MIT",
@@ -40,6 +40,7 @@
     "react-redux": "8.1.3",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
+    "semver": "7.6.0",
     "react-virtualized": "9.22.5",
     "redux": "4.2.1",
     "validator": "13.11.0"
@@ -80,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.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/theme.ts

@@ -36,7 +36,7 @@ const themeModes = {
   },
   dark: {
     ...colors,
-    primary: '#24394e',
+    primary: '#ffffff',
     secondary: '#424242',
     background: '#1A202C',
   },

package/src/components/Engines/Engines.tsx

@@ -23,7 +23,7 @@ const EngineItem: FC<EngineItemProps> = ({ title, element, engineText }) => (
   <Grid item={true} xs={6}>
     <List subheader={<StyledText variant={'subtitle1'}>{title}</StyledText>}>
       <EngineListItem>
-        <Avatar sx={{ bgcolor: '#FFF' }}>{element}</Avatar>
+        <Avatar sx={{ bgcolor: 'transparent' }}>{element}</Avatar>
         <Typography variant="subtitle2">{engineText}</Typography>
       </EngineListItem>
     </List>

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import { fireEvent, render, screen } from '../../test/test-react-testing-library';
+import Forbidden from './Forbidden';
+
+const mockHistory = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  useHistory: () => ({
+    push: mockHistory,
+  }),
+}));
+
+describe('<Forbidden /> component', () => {
+  test('should load the component in default state', () => {
+    render(
+      <MemoryRouter>
+        <Forbidden />
+      </MemoryRouter>
+    );
+    expect(screen.getByTestId('LockIcon')).toBeInTheDocument();
+    expect(screen.getByText('error.401.sorry-no-access')).toBeInTheDocument();
+    expect(screen.getByText('button.go-to-the-home-page')).toBeInTheDocument();
+  });
+
+  test('go to Home Page button click', async () => {
+    const { getByTestId } = render(
+      <MemoryRouter>
+        <Forbidden />
+      </MemoryRouter>
+    );
+
+    const node = getByTestId('not-found-go-to-home-button');
+    fireEvent.click(node);
+    expect(mockHistory).toHaveBeenCalled();
+  });
+});

package/src/components/Forbidden/Forbidden.tsx

@@ -0,0 +1,56 @@
+/* eslint-disable react/forbid-component-props */
+
+/* eslint-disable verdaccio/jsx-no-style */
+import styled from '@emotion/styled';
+import LockIcon from '@mui/icons-material/Lock';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
+
+import { Theme } from '../..';
+import Heading from '../Heading';
+
+const Foebidden: React.FC = () => {
+  const history = useHistory();
+
+  const { t } = useTranslation();
+
+  const handleGoHome = useCallback(() => {
+    history.push('/');
+  }, [history]);
+
+  return (
+    <Box
+      alignItems="center"
+      data-testid="404"
+      display="flex"
+      flexDirection="column"
+      flexGrow={1}
+      justifyContent="center"
+      p={2}
+    >
+      <Container>
+        <LockIcon color="primary" style={{ fontSize: 236 }} />
+      </Container>
+      <StyledHeading className="not-found-text" variant="h4">
+        {t('error.401.sorry-no-access')}
+      </StyledHeading>
+      <Button data-testid="not-found-go-to-home-button" onClick={handleGoHome} variant="contained">
+        {t('button.go-to-the-home-page')}
+      </Button>
+    </Box>
+  );
+};
+
+export default Foebidden;
+
+const Container = styled('div')({
+  margin: '0 auto',
+});
+
+const StyledHeading = styled(Heading)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.white,
+  marginBottom: 16,
+}));

package/src/components/Forbidden/index.ts

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

package/src/components/Install/InstallListItem.tsx

@@ -23,6 +23,7 @@ const InstallListItemText = styled(ListItemText)({
 
 const PackageMangerAvatar = styled(Avatar)({
   borderRadius: '0px',
+  backgroundColor: 'transparent',
   padding: 0,
 });