@bigbinary/neeto-github-frontend 1.0.26 → 1.0.28

package/dist/index.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var classNames = require('classnames');
+var classnames = require('classnames');
 var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var reactI18next = require('react-i18next');
@@ -12,9 +12,9 @@ var reactQuery = require('react-query');
 var axios = require('axios');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
-var neetoIcons = require('@bigbinary/neeto-icons');
-var neetoui = require('@bigbinary/neetoui');
 var misc = require('@bigbinary/neeto-icons/misc');
+var neetoui = require('@bigbinary/neetoui');
+var neetoIcons = require('@bigbinary/neeto-icons');
 var neetoCist = require('@bigbinary/neeto-cist');
 var Search = require('@bigbinary/neeto-molecules/Search');
 var DateFormat = require('@bigbinary/neeto-molecules/DateFormat');
@@ -23,7 +23,7 @@ var require$$0 = require('util');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var Search__default = /*#__PURE__*/_interopDefaultLegacy(Search);
@@ -111,38 +111,45 @@ var useFetchGithubRepositories = function useFetchGithubRepositories(_ref) {
   }));
 };
 
+var Header = reactUtils.withT(function (_ref) {
+  var t = _ref.t;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-text-gray-800 mb-1 flex w-full flex-row items-center space-x-2 font-sans text-lg font-medium leading-6 antialiased"
+  }, /*#__PURE__*/React__default["default"].createElement(misc.Github, {
+    size: 16
+  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    style: "h4"
+  }, t("neetoGithub.github")));
+});
+
 var Configure = reactUtils.withT(function (_ref) {
   var t = _ref.t,
     isConnected = _ref.isConnected,
     installationUrl = _ref.installationUrl;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-text-gray-900 font-sans text-sm font-normal leading-6 antialiased"
+    className: "neeto-ui-text-gray-900 flex-shrink-0 font-sans text-sm font-normal leading-6 antialiased"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    className: "mt-1 text-indigo-600 xl:mt-3",
     href: installationUrl,
     icon: isConnected ? neetoIcons.Settings : neetoIcons.Plus,
     iconPosition: "left",
     iconSize: 20,
     size: "small",
-    style: "text"
+    style: "link"
   }, isConnected ? t("neetoGithub.configureAccount") : t("neetoGithub.connectAccount")));
 });
 
-var Header = reactUtils.withT(function (_ref) {
-  var t = _ref.t;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-text-gray-800 mb-1 flex w-full flex-row items-center space-x-2 font-sans text-lg font-medium leading-6 antialiased"
-  }, /*#__PURE__*/React__default["default"].createElement(misc.Github, {
-    size: 16
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h4"
-  }, t("neetoGithub.github")));
-});
-
 var List$1 = reactUtils.withT(function (_ref) {
   var t = _ref.t,
-    accounts = _ref.accounts;
-  return accounts.map(function (_ref2) {
+    accounts = _ref.accounts,
+    isConnected = _ref.isConnected,
+    installationUrl = _ref.installationUrl,
+    isPane = _ref.isPane;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classnames__default["default"]("neeto-ui-border-gray-300 flex justify-between gap-3 border-b pb-4 pt-2", {
+      "flex-col md:flex-row": isPane,
+      "flex-col": !isPane
+    })
+  }, accounts.map(function (_ref2) {
     var id = _ref2.id,
       name = _ref2.name,
       avatarUrl = _ref2.avatarUrl,
@@ -150,41 +157,40 @@ var List$1 = reactUtils.withT(function (_ref) {
       profileUrl = _ref2.profileUrl,
       count = _ref2.count;
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "neeto-ui-border-gray-300 flex w-full items-center space-x-2 border-b border-l-0 border-r-0 border-t-0 border-solid p-2",
+      className: "flex w-full items-center space-x-2",
       key: id
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex items-center gap-1"
     }, type === "Organization" ? /*#__PURE__*/React__default["default"].createElement(neetoIcons.Building, {
       className: "neeto-ui-text-gray-600",
-      size: 16
-    }) : /*#__PURE__*/React__default["default"].createElement(neetoIcons.User, {
-      className: "neeto-ui-text-gray-600",
-      size: 16
+      size: 24
+    }) : /*#__PURE__*/React__default["default"].createElement(neetoui.Avatar, {
+      size: "small",
+      user: {
+        imageUrl: avatarUrl
+      }
     }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-      className: "neeto-ui-text-gray-900",
+      className: "neeto-ui-text-gray-800",
       style: "body2"
-    }, "@", name), /*#__PURE__*/React__default["default"].createElement("img", {
-      alt: name,
-      className: "neeto-ui-rounded-full h-4 w-4",
-      src: avatarUrl
-    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      className: "text-indigo-600",
-      icon: neetoIcons.CannedResponses,
-      iconPosition: "left",
-      iconSize: 16,
-      size: "small",
-      style: "text",
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      className: "neeto-ui-text-gray-800",
+      label: "@".concat(name),
+      style: "link",
       onClick: function onClick() {
         return window.open(profileUrl, "_blank");
       }
+    }))), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "neeto-ui-bg-gray-800 neeto-ui-rounded-full h-1 w-1"
     }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-      className: "neeto-ui-text-gray-900 mx-2 text-lg",
-      component: "span",
-      style: "h2"
-    }, "\u2022"), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      className: "neeto-ui-text-black",
       style: "body2"
     }, t("neetoGithub.countOf.repos", {
       count: count
     })));
-  });
+  }), /*#__PURE__*/React__default["default"].createElement(Configure, {
+    installationUrl: installationUrl,
+    isConnected: isConnected
+  }));
 });
 
 var Accounts = function Accounts(_ref) {
@@ -194,18 +200,17 @@ var Accounts = function Accounts(_ref) {
     onConnect = _ref.onConnect,
     installationUrl = _ref.installationUrl;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]("flex w-full flex-col border border-solid border-transparent px-0 py-2", {
-      "2xl:max-w-sm 2xl:px-8": isPane,
-      "xl:max-w-sm xl:px-8": !isPane
+    className: classnames__default["default"]("flex w-full flex-col border border-solid border-transparent px-0 py-2", {
+      "order-1": isPane,
+      "md:order-2 md:max-w-72 lg:max-w-sm lg:px-6": !isPane
     })
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "mb-2"
   }, /*#__PURE__*/React__default["default"].createElement(Header, null), /*#__PURE__*/React__default["default"].createElement(List$1, {
     accounts: accounts,
-    isConnected: isConnected
-  }), /*#__PURE__*/React__default["default"].createElement(Configure, {
     installationUrl: installationUrl,
     isConnected: isConnected,
+    isPane: isPane,
     onConnect: onConnect
   })));
 };
@@ -312,25 +317,26 @@ var RepositoryTile = function RepositoryTile(_ref) {
     isPrivate = repository.isPrivate,
     updatedAt = repository.updatedAt;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-border-gray-300 flex items-center justify-between border-b border-solid py-3 pl-5 pr-3 last:border-b-0",
+    className: "neeto-ui-border-gray-300 flex flex-col justify-between gap-3 border-b border-solid py-3 pl-3 pr-3 last:border-b-0 md:flex-row md:items-center md:pl-5",
     key: id
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "width-calc flex items-center space-x-2"
   }, /*#__PURE__*/React__default["default"].createElement(misc.Github, {
+    className: "flex-shrink-0",
     size: 16
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "body2"
   }, fullName), isPrivate && /*#__PURE__*/React__default["default"].createElement(neetoIcons.Lock, {
+    className: "flex-shrink-0",
     size: 16
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "hidden md:inline-block"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-900 mr-2 text-lg",
-    component: "span",
-    style: "h2"
-  }, "\u2022"), /*#__PURE__*/React__default["default"].createElement(DateFormat__default["default"].FromNow, {
+    className: "hidden lg:inline-block"
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "neeto-ui-bg-gray-800 neeto-ui-rounded-full h-1 w-1"
+  }), /*#__PURE__*/React__default["default"].createElement(DateFormat__default["default"].FromNow, {
     date: updatedAt
   }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    className: "w-max",
     disabled: isConnecting,
     loading: isLoading,
     style: "primary",
@@ -354,9 +360,9 @@ var List = reactUtils.withT(function (_ref) {
     installationUrl = _ref.installationUrl,
     troubleshootUrl = _ref.troubleshootUrl;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "h-full overflow-y-scroll px-6 pb-6"
+    className: "h-full overflow-y-scroll px-4 pb-4 md:px-6 md:pb-6"
   }, neetoCist.isPresent(repositories) ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]("neeto-ui-border-gray-300 neeto-ui-rounded-md flex flex-col items-center justify-center border", {
+    className: classnames__default["default"]("neeto-ui-border-gray-300 neeto-ui-rounded-md flex flex-col items-center justify-center border", {
       "h-auto": neetoCist.isPresent(filteredRepositories),
       "h-full": !neetoCist.isPresent(filteredRepositories)
     })
@@ -424,7 +430,7 @@ var Private = function Private(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "connect-repo flex h-full flex-col"
   }, isConnected ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "space-y-3 p-6"
+    className: "space-y-3 p-4 md:p-6"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     className: "flex-shrink-0 text-lg font-medium",
     style: "h2"
@@ -461,9 +467,13 @@ var Repositories = function Repositories(_ref) {
     repositories = _ref.repositories,
     onConnect = _ref.onConnect,
     installationUrl = _ref.installationUrl,
-    troubleshootUrl = _ref.troubleshootUrl;
+    troubleshootUrl = _ref.troubleshootUrl,
+    isPane = _ref.isPane;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-rounded-md neeto-ui-border-gray-300 h-full w-full space-y-6 border border-solid"
+    className: classnames__default["default"]("neeto-ui-rounded-md neeto-ui-border-gray-300 h-full w-full space-y-6 border border-solid", {
+      "order-2": isPane,
+      "order-1": !isPane
+    })
   }, /*#__PURE__*/React__default["default"].createElement(Private, {
     installationUrl: installationUrl,
     isConnected: isConnected,
@@ -514,23 +524,24 @@ var NeetoGithubNanoContainer = function NeetoGithubNanoContainer(_ref) {
     }));
   }
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]("flex min-h-0 w-full flex-grow flex-col-reverse", {
-      "2xl:flex-row": isPane,
-      "xl:flex-row": !isPane
+    className: classnames__default["default"]("flex min-h-0 w-full flex-grow flex-col", {
+      "flex-col": isPane,
+      "gap-3 md:flex-row md:gap-6": !isPane
     })
-  }, /*#__PURE__*/React__default["default"].createElement(Repositories, {
+  }, /*#__PURE__*/React__default["default"].createElement(Accounts, {
+    accounts: accounts,
+    installationUrl: installationUrl,
+    isConnected: isConnected,
+    isPane: isPane,
+    onConnect: onConnect
+  }), /*#__PURE__*/React__default["default"].createElement(Repositories, {
     installationUrl: installationUrl,
     isConnected: isConnected,
     isConnecting: isConnecting,
+    isPane: isPane,
     onConnect: onConnect,
     repositories: repositories,
     troubleshootUrl: troubleshootUrl
-  }), /*#__PURE__*/React__default["default"].createElement(Accounts, {
-    accounts: accounts,
-    installationUrl: installationUrl,
-    isConnected: isConnected,
-    isPane: isPane,
-    onConnect: onConnect
   }));
 };
 
@@ -2847,7 +2858,7 @@ var NeetoGithubNanoPane = function NeetoGithubNanoPane(_ref) {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ".width-calc{width:calc(100% - 82px)}.neeto-github-modal-pane-wrapper{width:min(75%,1280px)}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3JlcG9zaXRvcnktdGlsZS5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyIsImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3BhbmUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxZQUNFLHVCQ0NGLENDRkEsaUNBQ0UscUJES0YiLCJzb3VyY2VzQ29udGVudCI6WyIud2lkdGgtY2FsYyB7XG4gIHdpZHRoOiBjYWxjKDEwMCUgLSA4MnB4KTtcbn1cbiIsIi53aWR0aC1jYWxjIHtcbiAgd2lkdGg6IGNhbGMoMTAwJSAtIDgycHgpO1xufVxuXG4ubmVldG8tZ2l0aHViLW1vZGFsLXBhbmUtd3JhcHBlciB7XG4gIHdpZHRoOiBtaW4oNzUlLCAxMjgwcHgpO1xufSIsIi5uZWV0by1naXRodWItbW9kYWwtcGFuZS13cmFwcGVyIHtcbiAgd2lkdGg6IG1pbig3NSUsIDEyODBweCk7XG59XG4iXX0= */";
+var css = ".width-calc{width:100%}@media (min-width:768px){.width-calc{width:calc(100% - 82px)}}.neeto-github-modal-pane-wrapper{width:min(100%,1280px)}@media (min-width:768px){.neeto-github-modal-pane-wrapper{width:min(90%,1280px)}}@media (min-width:1024px){.neeto-github-modal-pane-wrapper{width:min(60%,1280px)}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3JlcG9zaXRvcnktdGlsZS5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyIsImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3BhbmUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxZQUNFLFVDQ0YsQ0RDRSx5QkFIRixZQUlJLHVCQ0VGLENBQ0YsQ0NQQSxpQ0FDRSxzQkRVRixDQ1JFLHlCQUhGLGlDQUlJLHFCRFdGLENBQ0YsQ0NURSwwQkFQRixpQ0FRSSxxQkRZRixDQUNGIiwic291cmNlc0NvbnRlbnQiOlsiLndpZHRoLWNhbGMge1xuICB3aWR0aDogMTAwJTtcblxuICBAc2NyZWVuIG1kIHtcbiAgICB3aWR0aDogY2FsYygxMDAlIC0gODJweCk7XG4gIH1cbn1cbiIsIi53aWR0aC1jYWxjIHtcbiAgd2lkdGg6IDEwMCU7XG59XG5Ac2NyZWVuIG1kIHtcbiAgLndpZHRoLWNhbGMge1xuICAgIHdpZHRoOiBjYWxjKDEwMCUgLSA4MnB4KTtcbiAgfVxufVxuXG4ubmVldG8tZ2l0aHViLW1vZGFsLXBhbmUtd3JhcHBlciB7XG4gIHdpZHRoOiBtaW4oMTAwJSwgMTI4MHB4KTtcbn1cbkBzY3JlZW4gbWQge1xuICAubmVldG8tZ2l0aHViLW1vZGFsLXBhbmUtd3JhcHBlciB7XG4gICAgd2lkdGg6IG1pbig5MCUsIDEyODBweCk7XG4gIH1cbn1cbkBzY3JlZW4gbGcge1xuICAubmVldG8tZ2l0aHViLW1vZGFsLXBhbmUtd3JhcHBlciB7XG4gICAgd2lkdGg6IG1pbig2MCUsIDEyODBweCk7XG4gIH1cbn0iLCIubmVldG8tZ2l0aHViLW1vZGFsLXBhbmUtd3JhcHBlciB7XG4gIHdpZHRoOiBtaW4oMTAwJSwgMTI4MHB4KTtcblxuICBAc2NyZWVuIG1kIHtcbiAgICB3aWR0aDogbWluKDkwJSwgMTI4MHB4KTtcbiAgfVxuXG4gIEBzY3JlZW4gbGcge1xuICAgIHdpZHRoOiBtaW4oNjAlLCAxMjgwcHgpO1xuICB9XG59XG4iXX0= */";
 n(css,{});
 
 exports.NeetoGithubNanoContainer = NeetoGithubNanoContainer;