@bigbinary/neeto-github-frontend 1.0.26 → 1.0.28

package/dist/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useRef } from 'react';
-import classNames from 'classnames';
+import classnames from 'classnames';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import { Trans, useTranslation } from 'react-i18next';
@@ -8,9 +8,9 @@ import { useQuery } from 'react-query';
 import axios from 'axios';
 import { DEFAULT_STALE_TIME } from '@bigbinary/neeto-commons-frontend/constants';
 import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { Settings, Plus, Building, User, CannedResponses, Lock } from '@bigbinary/neeto-icons';
-import { Button, Typography, Pane } from '@bigbinary/neetoui';
 import { Github } from '@bigbinary/neeto-icons/misc';
+import { Typography, Button, Avatar, Pane } from '@bigbinary/neetoui';
+import { Settings, Plus, Building, Lock } from '@bigbinary/neeto-icons';
 import { isPresent, findBy, noop } from '@bigbinary/neeto-cist';
 import Search from '@bigbinary/neeto-molecules/Search';
 import DateFormat from '@bigbinary/neeto-molecules/DateFormat';
@@ -97,38 +97,45 @@ var useFetchGithubRepositories = function useFetchGithubRepositories(_ref) {
   }));
 };
 
+var Header = withT(function (_ref) {
+  var t = _ref.t;
+  return /*#__PURE__*/React.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.createElement(Github, {
+    size: 16
+  }), /*#__PURE__*/React.createElement(Typography, {
+    style: "h4"
+  }, t("neetoGithub.github")));
+});
+
 var Configure = withT(function (_ref) {
   var t = _ref.t,
     isConnected = _ref.isConnected,
     installationUrl = _ref.installationUrl;
   return /*#__PURE__*/React.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.createElement(Button, {
-    className: "mt-1 text-indigo-600 xl:mt-3",
     href: installationUrl,
     icon: isConnected ? Settings : Plus,
     iconPosition: "left",
     iconSize: 20,
     size: "small",
-    style: "text"
+    style: "link"
   }, isConnected ? t("neetoGithub.configureAccount") : t("neetoGithub.connectAccount")));
 });
 
-var Header = withT(function (_ref) {
-  var t = _ref.t;
-  return /*#__PURE__*/React.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.createElement(Github, {
-    size: 16
-  }), /*#__PURE__*/React.createElement(Typography, {
-    style: "h4"
-  }, t("neetoGithub.github")));
-});
-
 var List$1 = 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.createElement("div", {
+    className: classnames("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,
@@ -136,41 +143,40 @@ var List$1 = withT(function (_ref) {
       profileUrl = _ref2.profileUrl,
       count = _ref2.count;
     return /*#__PURE__*/React.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.createElement("div", {
+      className: "flex items-center gap-1"
     }, type === "Organization" ? /*#__PURE__*/React.createElement(Building, {
       className: "neeto-ui-text-gray-600",
-      size: 16
-    }) : /*#__PURE__*/React.createElement(User, {
-      className: "neeto-ui-text-gray-600",
-      size: 16
+      size: 24
+    }) : /*#__PURE__*/React.createElement(Avatar, {
+      size: "small",
+      user: {
+        imageUrl: avatarUrl
+      }
     }), /*#__PURE__*/React.createElement(Typography, {
-      className: "neeto-ui-text-gray-900",
+      className: "neeto-ui-text-gray-800",
       style: "body2"
-    }, "@", name), /*#__PURE__*/React.createElement("img", {
-      alt: name,
-      className: "neeto-ui-rounded-full h-4 w-4",
-      src: avatarUrl
-    }), /*#__PURE__*/React.createElement(Button, {
-      className: "text-indigo-600",
-      icon: CannedResponses,
-      iconPosition: "left",
-      iconSize: 16,
-      size: "small",
-      style: "text",
+    }, /*#__PURE__*/React.createElement(Button, {
+      className: "neeto-ui-text-gray-800",
+      label: "@".concat(name),
+      style: "link",
       onClick: function onClick() {
         return window.open(profileUrl, "_blank");
       }
+    }))), /*#__PURE__*/React.createElement("span", {
+      className: "neeto-ui-bg-gray-800 neeto-ui-rounded-full h-1 w-1"
     }), /*#__PURE__*/React.createElement(Typography, {
-      className: "neeto-ui-text-gray-900 mx-2 text-lg",
-      component: "span",
-      style: "h2"
-    }, "\u2022"), /*#__PURE__*/React.createElement(Typography, {
+      className: "neeto-ui-text-black",
       style: "body2"
     }, t("neetoGithub.countOf.repos", {
       count: count
     })));
-  });
+  }), /*#__PURE__*/React.createElement(Configure, {
+    installationUrl: installationUrl,
+    isConnected: isConnected
+  }));
 });
 
 var Accounts = function Accounts(_ref) {
@@ -180,18 +186,17 @@ var Accounts = function Accounts(_ref) {
     onConnect = _ref.onConnect,
     installationUrl = _ref.installationUrl;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames("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("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.createElement("div", {
     className: "mb-2"
   }, /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(List$1, {
     accounts: accounts,
-    isConnected: isConnected
-  }), /*#__PURE__*/React.createElement(Configure, {
     installationUrl: installationUrl,
     isConnected: isConnected,
+    isPane: isPane,
     onConnect: onConnect
   })));
 };
@@ -298,25 +303,26 @@ var RepositoryTile = function RepositoryTile(_ref) {
     isPrivate = repository.isPrivate,
     updatedAt = repository.updatedAt;
   return /*#__PURE__*/React.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.createElement("div", {
     className: "width-calc flex items-center space-x-2"
   }, /*#__PURE__*/React.createElement(Github, {
+    className: "flex-shrink-0",
     size: 16
   }), /*#__PURE__*/React.createElement(Typography, {
     style: "body2"
   }, fullName), isPrivate && /*#__PURE__*/React.createElement(Lock, {
+    className: "flex-shrink-0",
     size: 16
   }), /*#__PURE__*/React.createElement("div", {
-    className: "hidden md:inline-block"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-900 mr-2 text-lg",
-    component: "span",
-    style: "h2"
-  }, "\u2022"), /*#__PURE__*/React.createElement(DateFormat.FromNow, {
+    className: "hidden lg:inline-block"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "neeto-ui-bg-gray-800 neeto-ui-rounded-full h-1 w-1"
+  }), /*#__PURE__*/React.createElement(DateFormat.FromNow, {
     date: updatedAt
   }))), /*#__PURE__*/React.createElement(Button, {
+    className: "w-max",
     disabled: isConnecting,
     loading: isLoading,
     style: "primary",
@@ -340,9 +346,9 @@ var List = withT(function (_ref) {
     installationUrl = _ref.installationUrl,
     troubleshootUrl = _ref.troubleshootUrl;
   return /*#__PURE__*/React.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"
   }, isPresent(repositories) ? /*#__PURE__*/React.createElement("div", {
-    className: classNames("neeto-ui-border-gray-300 neeto-ui-rounded-md flex flex-col items-center justify-center border", {
+    className: classnames("neeto-ui-border-gray-300 neeto-ui-rounded-md flex flex-col items-center justify-center border", {
       "h-auto": isPresent(filteredRepositories),
       "h-full": !isPresent(filteredRepositories)
     })
@@ -410,7 +416,7 @@ var Private = function Private(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: "connect-repo flex h-full flex-col"
   }, isConnected ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "space-y-3 p-6"
+    className: "space-y-3 p-4 md:p-6"
   }, /*#__PURE__*/React.createElement(Typography, {
     className: "flex-shrink-0 text-lg font-medium",
     style: "h2"
@@ -447,9 +453,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.createElement("div", {
-    className: "neeto-ui-rounded-md neeto-ui-border-gray-300 h-full w-full space-y-6 border border-solid"
+    className: classnames("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.createElement(Private, {
     installationUrl: installationUrl,
     isConnected: isConnected,
@@ -500,23 +510,24 @@ var NeetoGithubNanoContainer = function NeetoGithubNanoContainer(_ref) {
     }));
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames("flex min-h-0 w-full flex-grow flex-col-reverse", {
-      "2xl:flex-row": isPane,
-      "xl:flex-row": !isPane
+    className: classnames("flex min-h-0 w-full flex-grow flex-col", {
+      "flex-col": isPane,
+      "gap-3 md:flex-row md:gap-6": !isPane
     })
-  }, /*#__PURE__*/React.createElement(Repositories, {
+  }, /*#__PURE__*/React.createElement(Accounts, {
+    accounts: accounts,
+    installationUrl: installationUrl,
+    isConnected: isConnected,
+    isPane: isPane,
+    onConnect: onConnect
+  }), /*#__PURE__*/React.createElement(Repositories, {
     installationUrl: installationUrl,
     isConnected: isConnected,
     isConnecting: isConnecting,
+    isPane: isPane,
     onConnect: onConnect,
     repositories: repositories,
     troubleshootUrl: troubleshootUrl
-  }), /*#__PURE__*/React.createElement(Accounts, {
-    accounts: accounts,
-    installationUrl: installationUrl,
-    isConnected: isConnected,
-    isPane: isPane,
-    onConnect: onConnect
   }));
 };
 
@@ -2833,7 +2844,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,{});
 
 export { NeetoGithubNanoContainer, NeetoGithubNanoPane };