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

package/build/sections/SideBar/Sidebar.js

@@ -10,17 +10,16 @@ var _react = _interopRequireDefault(require("react"));
 var _ActionBar = _interopRequireDefault(require("../../components/ActionBar"));
 var _Author = _interopRequireDefault(require("../../components/Author"));
 var _Developers = _interopRequireWildcard(require("../../components/Developers"));
+var _Distribution = _interopRequireDefault(require("../../components/Distribution"));
+var _Engines = _interopRequireDefault(require("../../components/Engines"));
 var _FundButton = _interopRequireDefault(require("../../components/FundButton"));
-var _SideBarTittle = _interopRequireDefault(require("../../components/SideBarTittle"));
+var _Install = _interopRequireDefault(require("../../components/Install"));
+var _Repository = _interopRequireDefault(require("../../components/Repository"));
+var _SideBarTitle = _interopRequireDefault(require("../../components/SideBarTitle"));
 var _providers = require("../../providers");
-var _loadable = _interopRequireDefault(require("../../utils/loadable"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
-const Engines = (0, _loadable.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require( /* webpackChunkName: "Engines" */'../../components/Engines'))));
-const Dist = (0, _loadable.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require( /* webpackChunkName: "Distribution" */'../../components/Distribution'))));
-const Install = (0, _loadable.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require( /* webpackChunkName: "Install" */'../../components/Install'))));
-const Repository = (0, _loadable.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require( /* webpackChunkName: "Repository" */'../../components/Repository'))));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const getModuleType = manifest => {
   if (manifest.latest.main) {
     return 'commonjs';
@@ -49,7 +48,7 @@ const DetailSidebar = () => {
       position: 'sticky',
       top: 0
     }
-  }, /*#__PURE__*/_react.default.createElement(_SideBarTittle.default, {
+  }, /*#__PURE__*/_react.default.createElement(_SideBarTitle.default, {
     description: (_packageMeta$latest = packageMeta.latest) === null || _packageMeta$latest === void 0 ? void 0 : _packageMeta$latest.description,
     hasTypes: typeof ((_packageMeta$latest2 = packageMeta.latest) === null || _packageMeta$latest2 === void 0 ? void 0 : _packageMeta$latest2.types) === 'string',
     isLatest: typeof packageVersion === 'undefined',
@@ -61,17 +60,17 @@ const DetailSidebar = () => {
     packageMeta: packageMeta,
     showDownloadTarball: configOptions.showDownloadTarball,
     showRaw: configOptions.showRaw
-  }), /*#__PURE__*/_react.default.createElement(Install, {
+  }), /*#__PURE__*/_react.default.createElement(_Install.default, {
     configOptions: configOptions,
     packageMeta: packageMeta,
     packageName: packageName
   }), /*#__PURE__*/_react.default.createElement(_FundButton.default, {
     packageMeta: packageMeta
-  }), /*#__PURE__*/_react.default.createElement(Repository, {
+  }), /*#__PURE__*/_react.default.createElement(_Repository.default, {
     packageMeta: packageMeta
-  }), /*#__PURE__*/_react.default.createElement(Engines, {
+  }), /*#__PURE__*/_react.default.createElement(_Engines.default, {
     packageMeta: packageMeta
-  }), /*#__PURE__*/_react.default.createElement(Dist, {
+  }), /*#__PURE__*/_react.default.createElement(_Distribution.default, {
     packageMeta: packageMeta
   }), /*#__PURE__*/_react.default.createElement(_Author.default, {
     packageMeta: packageMeta
@@ -93,5 +92,5 @@ const StyledPaper = /*#__PURE__*/(0, _base.default)(_Paper.default, process.env.
   theme
 }) => ({
   padding: theme === null || theme === void 0 ? void 0 : theme.spacing(3, 2)
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zZWN0aW9ucy9TaWRlQmFyL1NpZGViYXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZFb0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3NlY3Rpb25zL1NpZGVCYXIvU2lkZWJhci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUGFwZXIgZnJvbSAnQG11aS9tYXRlcmlhbC9QYXBlcic7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4uLy4uL1RoZW1lJztcbmltcG9ydCBBY3Rpb25CYXIgZnJvbSAnLi4vLi4vY29tcG9uZW50cy9BY3Rpb25CYXInO1xuaW1wb3J0IEF1dGhvciBmcm9tICcuLi8uLi9jb21wb25lbnRzL0F1dGhvcic7XG5pbXBvcnQgRGV2ZWxvcGVycywgeyBEZXZlbG9wZXJUeXBlIH0gZnJvbSAnLi4vLi4vY29tcG9uZW50cy9EZXZlbG9wZXJzJztcbmltcG9ydCBGdW5kQnV0dG9uIGZyb20gJy4uLy4uL2NvbXBvbmVudHMvRnVuZEJ1dHRvbic7XG5pbXBvcnQgU2lkZUJhclRpdHRsZSBmcm9tICcuLi8uLi9jb21wb25lbnRzL1NpZGVCYXJUaXR0bGUnO1xuaW1wb3J0IHsgdXNlQ29uZmlnIH0gZnJvbSAnLi4vLi4vcHJvdmlkZXJzJztcbmltcG9ydCB7IHVzZVZlcnNpb24gfSBmcm9tICcuLi8uLi9wcm92aWRlcnMnO1xuaW1wb3J0IHsgUGFja2FnZU1ldGFJbnRlcmZhY2UgfSBmcm9tICcuLi8uLi90eXBlcy9wYWNrYWdlTWV0YSc7XG5pbXBvcnQgbG9hZGFibGUgZnJvbSAnLi4vLi4vdXRpbHMvbG9hZGFibGUnO1xuXG5jb25zdCBFbmdpbmVzID0gbG9hZGFibGUoXG4gICgpID0+IGltcG9ydCgvKiB3ZWJwYWNrQ2h1bmtOYW1lOiBcIkVuZ2luZXNcIiAqLyAnLi4vLi4vY29tcG9uZW50cy9FbmdpbmVzJylcbik7XG5jb25zdCBEaXN0ID0gbG9hZGFibGUoXG4gICgpID0+IGltcG9ydCgvKiB3ZWJwYWNrQ2h1bmtOYW1lOiBcIkRpc3RyaWJ1dGlvblwiICovICcuLi8uLi9jb21wb25lbnRzL0Rpc3RyaWJ1dGlvbicpXG4pO1xuY29uc3QgSW5zdGFsbCA9IGxvYWRhYmxlKFxuICAoKSA9PiBpbXBvcnQoLyogd2VicGFja0NodW5rTmFtZTogXCJJbnN0YWxsXCIgKi8gJy4uLy4uL2NvbXBvbmVudHMvSW5zdGFsbCcpXG4pO1xuY29uc3QgUmVwb3NpdG9yeSA9IGxvYWRhYmxlKFxuICAoKSA9PiBpbXBvcnQoLyogd2VicGFja0NodW5rTmFtZTogXCJSZXBvc2l0b3J5XCIgKi8gJy4uLy4uL2NvbXBvbmVudHMvUmVwb3NpdG9yeScpXG4pO1xuXG5jb25zdCBnZXRNb2R1bGVUeXBlID0gKG1hbmlmZXN0OiBQYWNrYWdlTWV0YUludGVyZmFjZSkgPT4ge1xuICBpZiAobWFuaWZlc3QubGF0ZXN0Lm1haW4pIHtcbiAgICByZXR1cm4gJ2NvbW1vbmpzJztcbiAgfSBlbHNlIGlmIChtYW5pZmVzdC5sYXRlc3QudHlwZSkge1xuICAgIHJldHVybiBtYW5pZmVzdC5sYXRlc3QudHlwZTtcbiAgfVxuICByZXR1cm47XG59O1xuXG5jb25zdCBEZXRhaWxTaWRlYmFyOiBSZWFjdC5GQyA9ICgpID0+IHtcbiAgY29uc3QgeyBwYWNrYWdlTWV0YSwgcGFja2FnZU5hbWUsIHBhY2thZ2VWZXJzaW9uIH0gPSB1c2VWZXJzaW9uKCk7XG4gIGNvbnN0IHsgY29uZmlnT3B0aW9ucyB9ID0gdXNlQ29uZmlnKCk7XG4gIGNvbnN0IHZlcnNpb24gPSBwYWNrYWdlVmVyc2lvbiB8fCBwYWNrYWdlTWV0YT8ubGF0ZXN0LnZlcnNpb24gfHwgJyc7XG4gIGNvbnN0IHRpbWUgPSBwYWNrYWdlTWV0YT8udGltZSA/IHBhY2thZ2VNZXRhLnRpbWVbdmVyc2lvbl0gOiAnJztcblxuICBpZiAoIXBhY2thZ2VNZXRhIHx8ICFwYWNrYWdlTmFtZSkge1xuICAgIHJldHVybiBudWxsO1xuICB9XG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkUGFwZXIgc3g9e3sgcG9zaXRpb246ICdzdGlja3knLCB0b3A6IDAgfX0+XG4gICAgICA8U2lkZUJhclRpdHRsZVxuICAgICAgICBkZXNjcmlwdGlvbj17cGFja2FnZU1ldGEubGF0ZXN0Py5kZXNjcmlwdGlvbn1cbiAgICAgICAgaGFzVHlwZXM9e3R5cGVvZiBwYWNrYWdlTWV0YS5sYXRlc3Q/LnR5cGVzID09PSAnc3RyaW5nJ31cbiAgICAgICAgaXNMYXRlc3Q9e3R5cGVvZiBwYWNrYWdlVmVyc2lvbiA9PT0gJ3VuZGVmaW5lZCd9XG4gICAgICAgIG1vZHVsZVR5cGU9e2dldE1vZHVsZVR5cGUocGFja2FnZU1ldGEpfVxuICAgICAgICBwYWNrYWdlTmFtZT17cGFja2FnZU5hbWV9XG4gICAgICAgIHRpbWU9e3RpbWV9XG4gICAgICAgIHZlcnNpb249e3ZlcnNpb259XG4gICAgICAvPlxuICAgICAgPEFjdGlvbkJhclxuICAgICAgICBwYWNrYWdlTWV0YT17cGFja2FnZU1ldGF9XG4gICAgICAgIHNob3dEb3dubG9hZFRhcmJhbGw9e2NvbmZpZ09wdGlvbnMuc2hvd0Rvd25sb2FkVGFyYmFsbH1cbiAgICAgICAgc2hvd1Jhdz17Y29uZmlnT3B0aW9ucy5zaG93UmF3fVxuICAgICAgLz5cbiAgICAgIDxJbnN0YWxsIGNvbmZpZ09wdGlvbnM9e2NvbmZpZ09wdGlvbnN9IHBhY2thZ2VNZXRhPXtwYWNrYWdlTWV0YX0gcGFja2FnZU5hbWU9e3BhY2thZ2VOYW1lfSAvPlxuICAgICAgPEZ1bmRCdXR0b24gcGFja2FnZU1ldGE9e3BhY2thZ2VNZXRhfSAvPlxuICAgICAgPFJlcG9zaXRvcnkgcGFja2FnZU1ldGE9e3BhY2thZ2VNZXRhfSAvPlxuICAgICAgPEVuZ2luZXMgcGFja2FnZU1ldGE9e3BhY2thZ2VNZXRhfSAvPlxuICAgICAgPERpc3QgcGFja2FnZU1ldGE9e3BhY2thZ2VNZXRhfSAvPlxuICAgICAgPEF1dGhvciBwYWNrYWdlTWV0YT17cGFja2FnZU1ldGF9IC8+XG4gICAgICA8RGV2ZWxvcGVycyBwYWNrYWdlTWV0YT17cGFja2FnZU1ldGF9IHR5cGU9e0RldmVsb3BlclR5cGUuTUFJTlRBSU5FUlN9IC8+XG4gICAgICA8RGV2ZWxvcGVycyBwYWNrYWdlTWV0YT17cGFja2FnZU1ldGF9IHR5cGU9e0RldmVsb3BlclR5cGUuQ09OVFJJQlVUT1JTfSAvPlxuICAgIDwvU3R5bGVkUGFwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBEZXRhaWxTaWRlYmFyO1xuXG5jb25zdCBTdHlsZWRQYXBlciA9IHN0eWxlZChQYXBlcik8eyB0aGVtZT86IFRoZW1lIH0+KCh7IHRoZW1lIH0pID0+ICh7XG4gIHBhZGRpbmc6IHRoZW1lPy5zcGFjaW5nKDMsIDIpLFxufSkpO1xuIl19 */");
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zZWN0aW9ucy9TaWRlQmFyL1NpZGViYXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtFb0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3NlY3Rpb25zL1NpZGVCYXIvU2lkZWJhci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUGFwZXIgZnJvbSAnQG11aS9tYXRlcmlhbC9QYXBlcic7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4uLy4uL1RoZW1lJztcbmltcG9ydCBBY3Rpb25CYXIgZnJvbSAnLi4vLi4vY29tcG9uZW50cy9BY3Rpb25CYXInO1xuaW1wb3J0IEF1dGhvciBmcm9tICcuLi8uLi9jb21wb25lbnRzL0F1dGhvcic7XG5pbXBvcnQgRGV2ZWxvcGVycywgeyBEZXZlbG9wZXJUeXBlIH0gZnJvbSAnLi4vLi4vY29tcG9uZW50cy9EZXZlbG9wZXJzJztcbmltcG9ydCBEaXN0IGZyb20gJy4uLy4uL2NvbXBvbmVudHMvRGlzdHJpYnV0aW9uJztcbmltcG9ydCBFbmdpbmVzIGZyb20gJy4uLy4uL2NvbXBvbmVudHMvRW5naW5lcyc7XG5pbXBvcnQgRnVuZEJ1dHRvbiBmcm9tICcuLi8uLi9jb21wb25lbnRzL0Z1bmRCdXR0b24nO1xuaW1wb3J0IEluc3RhbGwgZnJvbSAnLi4vLi4vY29tcG9uZW50cy9JbnN0YWxsJztcbmltcG9ydCBSZXBvc2l0b3J5IGZyb20gJy4uLy4uL2NvbXBvbmVudHMvUmVwb3NpdG9yeSc7XG5pbXBvcnQgU2lkZUJhclRpdGxlIGZyb20gJy4uLy4uL2NvbXBvbmVudHMvU2lkZUJhclRpdGxlJztcbmltcG9ydCB7IHVzZUNvbmZpZyB9IGZyb20gJy4uLy4uL3Byb3ZpZGVycyc7XG5pbXBvcnQgeyB1c2VWZXJzaW9uIH0gZnJvbSAnLi4vLi4vcHJvdmlkZXJzJztcbmltcG9ydCB7IFBhY2thZ2VNZXRhSW50ZXJmYWNlIH0gZnJvbSAnLi4vLi4vdHlwZXMvcGFja2FnZU1ldGEnO1xuXG5jb25zdCBnZXRNb2R1bGVUeXBlID0gKG1hbmlmZXN0OiBQYWNrYWdlTWV0YUludGVyZmFjZSkgPT4ge1xuICBpZiAobWFuaWZlc3QubGF0ZXN0Lm1haW4pIHtcbiAgICByZXR1cm4gJ2NvbW1vbmpzJztcbiAgfSBlbHNlIGlmIChtYW5pZmVzdC5sYXRlc3QudHlwZSkge1xuICAgIHJldHVybiBtYW5pZmVzdC5sYXRlc3QudHlwZTtcbiAgfVxuICByZXR1cm47XG59O1xuXG5jb25zdCBEZXRhaWxTaWRlYmFyOiBSZWFjdC5GQyA9ICgpID0+IHtcbiAgY29uc3QgeyBwYWNrYWdlTWV0YSwgcGFja2FnZU5hbWUsIHBhY2thZ2VWZXJzaW9uIH0gPSB1c2VWZXJzaW9uKCk7XG4gIGNvbnN0IHsgY29uZmlnT3B0aW9ucyB9ID0gdXNlQ29uZmlnKCk7XG4gIGNvbnN0IHZlcnNpb24gPSBwYWNrYWdlVmVyc2lvbiB8fCBwYWNrYWdlTWV0YT8ubGF0ZXN0LnZlcnNpb24gfHwgJyc7XG4gIGNvbnN0IHRpbWUgPSBwYWNrYWdlTWV0YT8udGltZSA/IHBhY2thZ2VNZXRhLnRpbWVbdmVyc2lvbl0gOiAnJztcbiAgaWYgKCFwYWNrYWdlTWV0YSB8fCAhcGFja2FnZU5hbWUpIHtcbiAgICByZXR1cm4gbnVsbDtcbiAgfVxuXG4gIHJldHVybiAoXG4gICAgPFN0eWxlZFBhcGVyIHN4PXt7IHBvc2l0aW9uOiAnc3RpY2t5JywgdG9wOiAwIH19PlxuICAgICAgPFNpZGVCYXJUaXRsZVxuICAgICAgICBkZXNjcmlwdGlvbj17cGFja2FnZU1ldGEubGF0ZXN0Py5kZXNjcmlwdGlvbn1cbiAgICAgICAgaGFzVHlwZXM9e3R5cGVvZiBwYWNrYWdlTWV0YS5sYXRlc3Q/LnR5cGVzID09PSAnc3RyaW5nJ31cbiAgICAgICAgaXNMYXRlc3Q9e3R5cGVvZiBwYWNrYWdlVmVyc2lvbiA9PT0gJ3VuZGVmaW5lZCd9XG4gICAgICAgIG1vZHVsZVR5cGU9e2dldE1vZHVsZVR5cGUocGFja2FnZU1ldGEpfVxuICAgICAgICBwYWNrYWdlTmFtZT17cGFja2FnZU5hbWV9XG4gICAgICAgIHRpbWU9e3RpbWV9XG4gICAgICAgIHZlcnNpb249e3ZlcnNpb259XG4gICAgICAvPlxuICAgICAgPEFjdGlvbkJhclxuICAgICAgICBwYWNrYWdlTWV0YT17cGFja2FnZU1ldGF9XG4gICAgICAgIHNob3dEb3dubG9hZFRhcmJhbGw9e2NvbmZpZ09wdGlvbnMuc2hvd0Rvd25sb2FkVGFyYmFsbH1cbiAgICAgICAgc2hvd1Jhdz17Y29uZmlnT3B0aW9ucy5zaG93UmF3fVxuICAgICAgLz5cbiAgICAgIDxJbnN0YWxsIGNvbmZpZ09wdGlvbnM9e2NvbmZpZ09wdGlvbnN9IHBhY2thZ2VNZXRhPXtwYWNrYWdlTWV0YX0gcGFja2FnZU5hbWU9e3BhY2thZ2VOYW1lfSAvPlxuICAgICAgPEZ1bmRCdXR0b24gcGFja2FnZU1ldGE9e3BhY2thZ2VNZXRhfSAvPlxuICAgICAgPFJlcG9zaXRvcnkgcGFja2FnZU1ldGE9e3BhY2thZ2VNZXRhfSAvPlxuICAgICAgPEVuZ2luZXMgcGFja2FnZU1ldGE9e3BhY2thZ2VNZXRhfSAvPlxuICAgICAgPERpc3QgcGFja2FnZU1ldGE9e3BhY2thZ2VNZXRhfSAvPlxuICAgICAgPEF1dGhvciBwYWNrYWdlTWV0YT17cGFja2FnZU1ldGF9IC8+XG4gICAgICA8RGV2ZWxvcGVycyBwYWNrYWdlTWV0YT17cGFja2FnZU1ldGF9IHR5cGU9e0RldmVsb3BlclR5cGUuTUFJTlRBSU5FUlN9IC8+XG4gICAgICA8RGV2ZWxvcGVycyBwYWNrYWdlTWV0YT17cGFja2FnZU1ldGF9IHR5cGU9e0RldmVsb3BlclR5cGUuQ09OVFJJQlVUT1JTfSAvPlxuICAgIDwvU3R5bGVkUGFwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBEZXRhaWxTaWRlYmFyO1xuXG5jb25zdCBTdHlsZWRQYXBlciA9IHN0eWxlZChQYXBlcik8eyB0aGVtZT86IFRoZW1lIH0+KCh7IHRoZW1lIH0pID0+ICh7XG4gIHBhZGRpbmc6IHRoZW1lPy5zcGFjaW5nKDMsIDIpLFxufSkpO1xuIl19 */");
 //# sourceMappingURL=Sidebar.js.map

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

@@ -1,4 +1,5 @@
 import React from 'react';
+export declare const CardWrap: import("@emotion/styled").StyledComponent<any, {}, {}>;
 declare const Dependencies: React.FC<{
     packageMeta: any;
 }>;

package/build/src/components/Dependencies/DependencyBlock.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { PackageDependencies } from '../../types/packageMeta';
+interface DependencyBlockProps {
+    title: string;
+    dependencies: PackageDependencies;
+}
+export declare const StyledText: import("@emotion/styled").StyledComponent<any, {}, {}>;
+export declare const Tags: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & {
+    theme?: import("@mui/material").Theme | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Tag: import("@emotion/styled").StyledComponent<any, {}, {}>;
+export declare const DependencyBlock: React.FC<DependencyBlockProps>;
+export {};

package/build/src/components/Dependencies/DependencyBlock.test.d.ts

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

package/build/src/components/Dependencies/utits.d.ts

@@ -0,0 +1,3 @@
+export declare function hasKeys(object?: {
+    [key: string]: any;
+}): boolean;

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

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

package/build/src/index.d.ts

@@ -14,7 +14,7 @@ export * as Icons from './components/Icons';
 export { default as Install } from './components/Install';
 export { default as RawViewer } from './components/RawViewer';
 export { default as Readme } from './components/Readme';
-export { default as SideBarTitle } from './components/SideBarTittle';
+export { default as SideBarTitle } from './components/SideBarTitle';
 export { default as UpLinks } from './components/UpLinks';
 export { default as Versions } from './components/Versions';
 export { default as TextField } from './components/TextField';

package/build/src/sections/Home/Home.test.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdaccio/ui-components",
-  "version": "3.0.0-next-7.3",
+  "version": "3.0.0-next-7.4",
   "description": "theme ui component",
   "author": "Juan Picado <juanpicado19@gmail.com>",
   "license": "MIT",
@@ -42,7 +42,6 @@
     "react-router-dom": "5.3.4",
     "react-virtualized": "9.22.5",
     "redux": "4.2.1",
-    "remark-gfm": "3.0.1",
     "validator": "13.11.0"
   },
   "devDependencies": {

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

@@ -6,7 +6,6 @@ import Dependencies from './Dependencies';
 
 describe('<Dependencies /> component', () => {
   test('Renders a message when there are no dependencies', () => {
-    // Given
     const packageMeta = {
       latest: {
         name: 'verdaccio',
@@ -25,15 +24,12 @@ describe('<Dependencies /> component', () => {
       _uplinks: {},
     };
 
-    // When
     const { getByText } = render(<Dependencies packageMeta={packageMeta} />);
 
-    // Then
     expect(getByText('dependencies.has-no-dependencies')).toBeDefined();
   });
 
-  test('Renders a link to each dependency', () => {
-    // Given
+  test('renders a link to each dependency', () => {
     const packageMeta = {
       latest: {
         name: 'verdaccio',
@@ -59,18 +55,12 @@ describe('<Dependencies /> component', () => {
       _uplinks: {},
     };
 
-    // When
     const { getByText } = render(
       <HashRouter>
         <Dependencies packageMeta={packageMeta} />
       </HashRouter>
     );
 
-    // Then
-    // FIXME: currently MaterialUI chips do not support the children
-    // prop, therefore it is impossible to use proper links for
-    // dependencies. Those are for now clickable spans
-
     expect(getByText('dependencies (2)')).toBeDefined();
     expect(getByText('devDependencies (1)')).toBeDefined();
     expect(getByText('peerDependencies (1)')).toBeDefined();

package/src/components/Dependencies/Dependencies.tsx

@@ -1,63 +1,21 @@
-import Box from '@mui/material/Box';
+import styled from '@emotion/styled';
+import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
-import { useTheme } from '@mui/styles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useHistory } from 'react-router-dom';
 
-import { PackageDependencies } from '../../types/packageMeta';
+import { Theme } from '../../Theme';
 import NoItems from '../NoItems';
-import { CardWrap, StyledText, Tag, Tags } from './styles';
+import { DependencyBlock } from './DependencyBlock';
+import { hasKeys } from './utits';
 
-interface DependencyBlockProps {
-  title: string;
-  dependencies: PackageDependencies;
-}
-
-const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {
-  const history = useHistory();
-  const { t } = useTranslation();
-  const theme = useTheme();
-
-  const deps = Object.entries(dependencies);
-
-  function handleClick(name: string): void {
-    history.push(`/-/web/detail/${name}`);
-  }
-
-  return (
-    <Box data-testid={title} sx={{ margin: theme.spacing(2) }}>
-      <StyledText sx={{ marginBottom: theme.spacing(1) }} variant="subtitle1">
-        {`${title} (${deps.length})`}
-      </StyledText>
-      <Tags>
-        {deps.map(([name, version]) => (
-          <Tag
-            className={'dep-tag'}
-            clickable={true}
-            data-testid={name}
-            key={name}
-            label={t('dependencies.dependency-block', { package: name, version })}
-            // eslint-disable-next-line
-            onClick={() => handleClick(name)}
-          />
-        ))}
-      </Tags>
-    </Box>
-  );
-};
-
-function hasKeys(object?: { [key: string]: any }): boolean {
-  return !!object && Object.keys(object).length > 0;
-}
+export const CardWrap = styled(Card)<{ theme?: Theme }>((props) => ({
+  marginBottom: props.theme.spacing(2),
+}));
 
 const Dependencies: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
   const { t } = useTranslation();
 
-  if (!packageMeta) {
-    throw new Error(t('error.package-meta-is-required-at-detail-context'));
-  }
-
   const { latest } = packageMeta;
   // FIXME: add dependencies to package meta type
   // @ts-ignore

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

@@ -0,0 +1,33 @@
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { MemoryRouter, Route } from 'react-router';
+
+import { render, screen } from '../../test/test-react-testing-library';
+import { DependencyBlock } from './DependencyBlock';
+
+describe('<DependencyBlock /> component', () => {
+  test('renders dependency block', () => {
+    render(<DependencyBlock dependencies={{ jquery: '1.0.0' }} title="foo" />);
+
+    expect(screen.getByText('foo (1)')).toBeInTheDocument();
+    expect(screen.getByText('dependencies.dependency-block')).toBeInTheDocument();
+
+    userEvent.click(screen.getByText('dependencies.dependency-block'));
+  });
+
+  test.todo('test the click event');
+  test.skip('handle change route handler', () => {
+    render(
+      <MemoryRouter
+        initialEntries={[`/-/web/detail/some-dep`, `/-/web/detail/jquery`]}
+        initialIndex={0}
+      >
+        <Route exact={true} path="/-/web/detail/:package">
+          <DependencyBlock dependencies={{ jquery: '1.0.0' }} title="foo" />
+        </Route>
+      </MemoryRouter>
+    );
+
+    userEvent.click(screen.getByTestId('jquery'));
+  });
+});

package/src/components/Dependencies/DependencyBlock.tsx

@@ -0,0 +1,69 @@
+import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/styles';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
+
+import { Theme } from '../../Theme';
+import { PackageDependencies } from '../../types/packageMeta';
+
+interface DependencyBlockProps {
+  title: string;
+  dependencies: PackageDependencies;
+}
+
+export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
+  fontWeight: props.theme && props.theme.fontWeight.bold,
+  textTransform: 'capitalize',
+}));
+
+export const Tags = styled('div')<{ theme?: Theme }>((props) => ({
+  display: 'flex',
+  justifyContent: 'start',
+  flexWrap: 'wrap',
+  // force title to be on the same line as the title
+  // could be better to avoid margin on the first element
+  // but it is a bit tricky to do with flexbox
+  marginLeft: props.theme.spacing(-0.6),
+}));
+
+export const Tag = styled(Chip)<{ theme?: Theme }>((props) => ({
+  margin: props.theme.spacing(0.6),
+}));
+
+export const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {
+  const history = useHistory();
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const deps = Object.entries(dependencies);
+
+  function handleClick(name: string): void {
+    history.push(`/-/web/detail/${name}`);
+  }
+
+  return (
+    <Box data-testid={title} sx={{ margin: theme.spacing(2) }}>
+      <StyledText sx={{ marginBottom: theme.spacing(1) }} variant="subtitle1">
+        {`${title} (${deps.length})`}
+      </StyledText>
+      <Tags>
+        {deps.map(([name, version]) => (
+          <Tag
+            className={'dep-tag'}
+            clickable={true}
+            data-testid={name}
+            key={name}
+            label={t('dependencies.dependency-block', { package: name, version })}
+            // eslint-disable-next-line
+            onClick={() => {
+              handleClick(name);
+            }}
+          />
+        ))}
+      </Tags>
+    </Box>
+  );
+};

package/src/components/Dependencies/utits.ts

@@ -0,0 +1,3 @@
+export function hasKeys(object?: { [key: string]: any }): boolean {
+  return !!object && Object.keys(object).length > 0;
+}

package/src/components/Loading/Loading.test.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 
-import { render } from '../../test/test-react-testing-library';
+import { render, screen } from '../../test/test-react-testing-library';
 import Loading from './Loading';
 
 describe('<Loading /> component', () => {
   test('should render the component in default state', () => {
-    const { container } = render(<Loading />);
-    expect(container.firstChild).toMatchSnapshot();
+    render(<Loading />);
+    screen.debug();
+    expect(screen.getByTestId('loading')).toBeInTheDocument();
   });
 });

package/src/components/SideBarTitle/index.ts

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

package/src/index.ts

@@ -14,7 +14,7 @@ export * as Icons from './components/Icons';
 export { default as Install } from './components/Install';
 export { default as RawViewer } from './components/RawViewer';
 export { default as Readme } from './components/Readme';
-export { default as SideBarTitle } from './components/SideBarTittle';
+export { default as SideBarTitle } from './components/SideBarTitle';
 export { default as UpLinks } from './components/UpLinks';
 export { default as Versions } from './components/Versions';
 export { default as TextField } from './components/TextField';

package/src/sections/Header/HeaderSettingsDialog.tsx

@@ -7,7 +7,6 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import { useSelector } from 'react-redux';
-import remarkGfm from 'remark-gfm';
 
 import { RootState, Theme } from '../../';
 import LanguageSwitch from './LanguageSwitch';
@@ -71,7 +70,7 @@ const HeaderSettingsDialog: React.FC<Props> = ({ onCloseDialog, isOpen }) => {
         <TabPanel index={1} value={value}>
           <TextContent>{t('language.description')}</TextContent>
           <LanguageSwitch />
-          <ReactMarkdown remarkPlugins={[remarkGfm]}>{t('language.contribute')}</ReactMarkdown>
+          <ReactMarkdown>{t('language.contribute')}</ReactMarkdown>
         </TabPanel>
       </Box>
     </RegistryInfoDialog>

package/src/sections/Header/RegistryInfoContent/RegistryInfoContent.tsx

@@ -10,7 +10,6 @@ import makeStyles from '@mui/styles/makeStyles';
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
 
 import {
   CopyClipboard,
@@ -150,17 +149,13 @@ const RegistryInfoContent: FC<Props> = ({ scope, registryUrl }) => {
           </AccordionSummary>
           <AccordionDetails>
             <Description>
-              <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                {t('packageManagers.yarnclassicDetails')}
-              </ReactMarkdown>
+              <ReactMarkdown>{t('packageManagers.yarnclassicDetails')}</ReactMarkdown>
             </Description>
             <CommandContainer data-testid={'tab-content'}>
               {renderYarnTab(scope, registryUrl)}
             </CommandContainer>
             <Description>
-              <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                {t('packageManagers.yarnBerryDetails')}
-              </ReactMarkdown>
+              <ReactMarkdown>{t('packageManagers.yarnBerryDetails')}</ReactMarkdown>
             </Description>
             <CommandContainer data-testid={'tab-content'}>
               {renderYarnBerryTab(scope, registryUrl)}

package/src/sections/Home/Home.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import { store } from '../../store';
+import { renderWithStore, screen, waitFor } from '../../test/test-react-testing-library';
+import Home from './Home';
+
+// 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);
+
+const ComponentSideBar: React.FC = () => (
+  <MemoryRouter>
+    <Home />
+  </MemoryRouter>
+);
+
+describe('Home', () => {
+  test('should render titles', async () => {
+    renderWithStore(<ComponentSideBar />, store);
+    await waitFor(() => expect(screen.getAllByTestId('package-item-list')).toHaveLength(5));
+  });
+
+  test('should render loading', async () => {
+    renderWithStore(<ComponentSideBar />, store);
+    await waitFor(() => expect(screen.getByTestId('loading')).toBeInTheDocument());
+  });
+});

package/src/sections/Home/Home.tsx

@@ -11,7 +11,6 @@ const Home: React.FC = () => {
     // @ts-ignore
     dispatch.packages.getPackages();
   }, [dispatch]);
-
   return (
     <div className="container content" data-testid="home-page-container">
       {isLoading ? <Loading /> : <PackageList packages={packages} />}

package/src/sections/SideBar/Sidebar.test.tsx

@@ -1,110 +1,67 @@
-import { rest } from 'msw';
 import React from 'react';
 import { MemoryRouter } from 'react-router';
 
-import { server } from '../../../jest/server';
 import { VersionProvider } from '../../providers';
 import { store } from '../../store';
 import { renderWithStore, screen, waitFor } from '../../test/test-react-testing-library';
-import DetailSidebar from './Sidebar';
+import Sidebar from './Sidebar';
 
-jest.mock('marked');
 jest.mock('marked');
 jest.mock('marked-highlight');
 
-const ComponentToBeRendered: React.FC = () => (
+const ComponentSideBar: React.FC = () => (
   <MemoryRouter>
     <VersionProvider>
-      <DetailSidebar />
+      <Sidebar />
     </VersionProvider>
   </MemoryRouter>
 );
 
-// https://stackoverflow.com/a/54010619/308341
-jest.mock('react', () => {
-  const React = jest.requireActual('react');
-  React.Suspense = ({ children }) => children;
-  return React;
-});
-
-const 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',
-    },
-  },
-};
-
-// const detailContextValue = {
-//   packageName: 'foo',
-//   readMe: 'test',
-//   isLoading: false,
-//   hasNotBeenFound: false,
-//   packageMeta: ,
-// };
+const mockPkgName = jest.fn().mockReturnValue('jquery');
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'), // use actual for all non-hook parts
   useParams: () => ({
-    package: 'jquery',
+    package: mockPkgName(),
   }),
 }));
 
-server.use(
-  ...[
-    rest.get('http://localhost:9000/-/verdaccio/data/sidebar/jquery', (req, res, ctx) => {
-      return res(ctx.json(packageMeta));
-    }),
-    rest.get('http://localhost:9000/-/verdaccio/data/package/readme/jquery', (req, res, ctx) => {
-      return res(ctx.text('foo readme'));
-    }),
-  ]
-);
-// describe('DetailSidebar', () => {
-test.skip('should render commonjs module icon', async () => {
-  const { getByText } = renderWithStore(<ComponentToBeRendered />, store);
-  screen.debug();
-  await waitFor(() => expect(getByText('jquery')).toBeInTheDocument());
-});
+describe('Sidebar', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  test('should render titles', async () => {
+    renderWithStore(<ComponentSideBar />, store);
+    await waitFor(() => expect(screen.getByText('jquery')).toBeInTheDocument());
 
-//   test('should render ts module icon', () => {
-//     renderWithStore(
-//       <ComponentToBeRendered
-//         contextValue={_.merge(detailContextValue, {
-//           packageMeta: {
-//             latest: {
-//               types: './src/index.d.ts',
-//             },
-//           },
-//         })}
-//       />,
-//       store
-//     );
-//     expect(screen.getByAltText('typescript')).toBeInTheDocument();
-//   });
+    expect(screen.getByText(`jquery`)).toBeInTheDocument();
+    expect(screen.getByText(`sidebar.detail.latest-version`, { exact: false })).toBeInTheDocument();
+    expect(
+      screen.getByText(`sidebar.detail.published a year ago`, { exact: false })
+    ).toBeInTheDocument();
+    expect(screen.getByText(`sidebar.installation.title`, { exact: false })).toBeInTheDocument();
+  });
 
-//   test('should render es6 module icon', () => {
-//     renderWithStore(
-//       <ComponentToBeRendered
-//         contextValue={_.merge(detailContextValue, {
-//           packageMeta: {
-//             latest: {
-//               type: 'module',
-//             },
-//           },
-//         })}
-//       />,
-//       store
-//     );
-//     expect(screen.getByAltText('es6 modules')).toBeInTheDocument();
-//   });
-// });
+  test('should render commonJS', async () => {
+    renderWithStore(<ComponentSideBar />, store);
+
+    await waitFor(() => expect(screen.getByText('jquery')).toBeInTheDocument());
+    expect(screen.getByAltText('commonjs')).toBeInTheDocument();
+  });
+
+  test('should render typescript', async () => {
+    mockPkgName.mockReturnValue('glob');
+    renderWithStore(<ComponentSideBar />, store);
+
+    await waitFor(() => expect(screen.getByText('glob')).toBeInTheDocument());
+    expect(screen.getByAltText('typescript')).toBeInTheDocument();
+  });
+
+  test('should render es modules', async () => {
+    mockPkgName.mockReturnValue('got');
+    renderWithStore(<ComponentSideBar />, store);
+
+    await waitFor(() => expect(screen.getByText('got')).toBeInTheDocument());
+    expect(screen.getByAltText('es6 modules')).toBeInTheDocument();
+  });
+});