@sqrzro/admin 1.0.0-beta.1 → 1.0.0-beta.4

package/dist/index.css

@@ -554,9 +554,16 @@
     border-color: #ee3768;
     border-color: var(--clr-danger);
     color: #ee3768;
-    color: var(--clr-danger);
+    color: var(--clr-danger)
 }
 
+.Button-module_rootBorderedDanger__fKfsW:hover {
+        background-color: #d3184a;
+        background-color: var(--clr-danger-dark);
+        border-color: #d3184a;
+        border-color: var(--clr-danger-dark);
+    }
+
 .Button-module_rootIsDisabled__sPT9k {
     background-color: #cbd5e0;
     background-color: var(--clr-grey400);
@@ -1372,10 +1379,15 @@ html {
 }
 
 body {
+    background-color: #edf2f7;
     background-color: var(--clr-grey200);
+    color: #2d3748;
     color: var(--clr-grey800);
+    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     font-family: var(--ff-body);
+    font-size: 1.4rem;
     font-size: var(--fs-med);
+    line-height: 1.5;
     line-height: var(--lh-body);
     overflow-y: scroll;
 }
@@ -1404,13 +1416,16 @@ dd {
 }
 
 a {
+    color: #0074d9;
     color: var(--clr-link);
     cursor: pointer;
+    font-weight: 600;
     font-weight: var(--fw-bold);
     text-decoration: none
 }
 
 a:hover {
+        color: #1e40af;
         color: var(--clr-link-hover);
     }
 
@@ -1422,6 +1437,7 @@ fieldset {
 
 hr {
     border: 0;
+    border-top: .1rem #e2e8f0 solid;
     border-top: .1rem var(--clr-grey300) solid;
     margin: 3rem 0;
 }
@@ -3103,8 +3119,11 @@ tr:nth-child(2n - 1) .TableCell-module_root__m8YZV {
 }
 
 .FormRepeater-module_root__Bh4KC {
-    margin-bottom: 3rem;
+    margin-bottom: 3rem
 }
+.FormRepeater-module_root__Bh4KC:last-child {
+        margin-bottom: .5rem;
+    }
 
 .ImageInput-module_root__E-IKb {
     background-color: #fff;

package/dist/index.js

@@ -2,7 +2,7 @@
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@sqrzro/utility'), require('classnames'), require('deepmerge'), require('prop-types'), require('next/link'), require('next/router'), require('date-fns'), require('use-deep-compare-effect'), require('next/head'), require('next/document')) :
   typeof define === 'function' && define.amd ? define(['exports', 'react', '@sqrzro/utility', 'classnames', 'deepmerge', 'prop-types', 'next/link', 'next/router', 'date-fns', 'use-deep-compare-effect', 'next/head', 'next/document'], factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["squarezero-admin"] = {}, global.React, global["@sqrzro/utility"], global.classNames, global.deepmerge, global.PropTypes, global.NextLink, global.NextRouter, global.dateFns, global.useDeepCompareEffect, global.NextHead, global.NextDocument));
-})(this, (function (exports, React, utility, classNames, merge, PropTypes, NextLink, router, dateFns, useDeepCompareEffect, Head, NextDocument) { 'use strict';
+})(this, (function (exports, React, utility, classNames, merge, PropTypes, NextLink, router, dateFns, useDeepCompareEffect, Head, document$1) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -32,7 +32,6 @@
   var NextLink__default = /*#__PURE__*/_interopDefaultLegacy(NextLink);
   var useDeepCompareEffect__default = /*#__PURE__*/_interopDefaultLegacy(useDeepCompareEffect);
   var Head__default = /*#__PURE__*/_interopDefaultLegacy(Head);
-  var NextDocument__default = /*#__PURE__*/_interopDefaultLegacy(NextDocument);
 
   /**
    * Copyright (c) 2014-present, Facebook, Inc.
@@ -927,7 +926,7 @@
           Logo: PropTypes__default["default"].func,
           me: PropTypes__default["default"].shape({
               name: PropTypes__default["default"].string.isRequired
-          }).isRequired,
+          }),
           name: PropTypes__default["default"].string.isRequired,
           navigation: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([
               PropTypes__default["default"].shape({
@@ -1779,21 +1778,22 @@
   var AUTH_ROUTE$1 = '/auth/';
   /* eslint-disable @typescript-eslint/naming-convention */
   var App = function (_a) {
-      var Component = _a.Component, config = _a.config, Logo = _a.Logo, router = _a.router, pageProps = __rest(_a, ["Component", "config", "Logo", "router"]);
+      var Component = _a.Component, config = _a.config, router = _a.router, pageProps = __rest(_a, ["Component", "config", "router"]);
       var _b = React.useState(), me = _b[0], setMe = _b[1];
       var getMe = function () { return __awaiter(void 0, void 0, void 0, function () {
           var response;
-          return __generator(this, function (_a) {
-              switch (_a.label) {
+          var _a;
+          return __generator(this, function (_b) {
+              switch (_b.label) {
                   case 0:
-                      _a.trys.push([0, 2, , 3]);
-                      return [4 /*yield*/, utility.ApiService.get('me')];
+                      _b.trys.push([0, 2, , 3]);
+                      return [4 /*yield*/, utility.ApiService.get(((_a = config === null || config === void 0 ? void 0 : config.auth) === null || _a === void 0 ? void 0 : _a.meUrl) || 'me')];
                   case 1:
-                      response = _a.sent();
-                      setMe(__assign({ name: '' }, response.data));
+                      response = _b.sent();
+                      setMe(response.data);
                       return [3 /*break*/, 3];
                   case 2:
-                      _a.sent();
+                      _b.sent();
                       return [3 /*break*/, 3];
                   case 3: return [2 /*return*/];
               }
@@ -1808,12 +1808,12 @@
       }
       var _c = config.style || {}, brand = _c.brand, layout = _c.layout;
       if (Component.hasLayout === false) {
-          return (React__default["default"].createElement(AppContextProvider, { value: __assign(__assign({}, config), { Logo: Logo, me: me }) },
+          return (React__default["default"].createElement(AppContextProvider, { value: __assign(__assign({}, config), { me: me }) },
               typeof brand !== 'undefined' && (React__default["default"].createElement("style", { "data-testid": "app-brand" }, ":root { --clr-brand: ".concat(brand, " }"))),
               React__default["default"].createElement(Component, __assign({ router: router }, pageProps)),
               React__default["default"].createElement(Toast, null)));
       }
-      return (React__default["default"].createElement(AppContextProvider, { value: __assign(__assign({}, config), { Logo: Logo, me: me }) },
+      return (React__default["default"].createElement(AppContextProvider, { value: __assign(__assign({}, config), { me: me }) },
           typeof brand !== 'undefined' && (React__default["default"].createElement("style", { "data-testid": "app-brand" }, ":root { --clr-brand: ".concat(brand, " }"))),
           React__default["default"].createElement("div", { className: styles$T.root },
               React__default["default"].createElement(Banner, null),
@@ -1831,8 +1831,8 @@
       utility.ApiService.registerConfig({ path: (_a = config.paths) === null || _a === void 0 ? void 0 : _a.api });
       /* eslint-disable @typescript-eslint/naming-convention */
       var AdminApp = function (_a) {
-          var Component = _a.Component, Logo = _a.Logo, router = _a.router;
-          return (React__default["default"].createElement(App, { Component: Component, Logo: Logo, config: config, router: router }));
+          var Component = _a.Component, router = _a.router;
+          return (React__default["default"].createElement(App, { Component: Component, config: config, router: router }));
       };
       /* eslint-enable */
       AdminApp.propTypes = AppPropTypes;
@@ -2166,7 +2166,7 @@
                           })];
                   case 2:
                       response = _a.sent();
-                      setSuggestions(response.data.data);
+                      setSuggestions(response.data);
                       return [3 /*break*/, 4];
                   case 3:
                       _a.sent();
@@ -2340,21 +2340,43 @@
       return "".concat(formatted, ",").concat(formatted);
   };
   var getQuickDates = function () {
-      var dates = {
-          Today: getToday(),
-          Yesterday: getYesterday(),
-          'Last 7 Days': getLast7Days(),
-          'Last 30 Days': getLast30Days(),
-          'This Month': getThisMonth(),
-          'Last Month': getLastMonth()
-      };
-      return Object.entries(dates).map(function (_a) {
-          var key = _a[0], value = _a[1];
-          return ({
-              id: getQuickDateId(value),
-              name: key
+      var today = new Date();
+      var dates = [
+          {
+              id: getToday(),
+              name: 'Today'
+          },
+          {
+              id: getYesterday(),
+              name: 'Yesterday'
+          },
+          {
+              id: getLast7Days(),
+              name: 'Last 7 Days'
+          },
+          {
+              id: getLast30Days(),
+              name: 'Last 30 Days'
+          },
+      ];
+      /*
+       * If the date is the 8th or 31st of the month, it matches up with last 7 days or last 30 days,
+       * respectively, and causes duplicate key errors. So best just leave it out in these cases.
+       */
+      if (today.getDate() !== DAYS_IN_WEEK$2 + 1 && today.getDate() !== DAYS_IN_MONTH) {
+          dates.push({
+              id: getThisMonth(),
+              name: 'This Month'
           });
+      }
+      dates.push({
+          id: getLastMonth(),
+          name: 'Last Month'
       });
+      return dates.map(function (item) { return ({
+          id: getQuickDateId(item.id),
+          name: item.name
+      }); });
   };
   var DateService = {
       addMonths: addMonths,
@@ -2883,7 +2905,7 @@
                       return [4 /*yield*/, utility.ApiService.get(parseRemote$2(remote))];
                   case 1:
                       response = _a.sent();
-                      setData(response.data.data);
+                      setData(response.data);
                       return [3 /*break*/, 3];
                   case 2:
                       _a.sent();
@@ -2998,10 +3020,11 @@
    * component to be used for any situation where a standout message is required.
    */
   var EmptyMessage = function (_a) {
-      var description = _a.description, title = _a.title;
+      var action = _a.action, description = _a.description, title = _a.title;
       return (React__default["default"].createElement("section", { className: styles$z.root },
           React__default["default"].createElement("h1", { className: styles$z.title }, title || DEFAULT_TITLE),
-          React__default["default"].createElement("p", { className: styles$z.description }, description || DEFAULT_DESCRIPTION)));
+          React__default["default"].createElement("p", { className: styles$z.description }, description || DEFAULT_DESCRIPTION),
+          action ? (React__default["default"].createElement(Button, { isDisabled: action.isDisabled, onClick: action.onClick, variant: action.variant }, action.label)) : null));
   };
   EmptyMessage.propTypes = {
       description: PropTypes__default["default"].string,
@@ -3070,7 +3093,7 @@
                       return [4 /*yield*/, utility.ApiService.get(parseRemote$1(remote))];
                   case 1:
                       response = _a.sent();
-                      setRemoteData(response.data.data);
+                      setRemoteData(response.data);
                       setIsDisabled(false);
                       return [2 /*return*/];
               }
@@ -3300,7 +3323,7 @@
       var _j = React.useState([]), remoteSummary = _j[0], setRemoteSummary = _j[1];
       var toggleIsSummaryOpen = function () { return setIsSummaryOpen(!isSummaryOpen); };
       var getData = function () { return __awaiter(void 0, void 0, void 0, function () {
-          var response, err_1;
+          var response, meta, err_1;
           return __generator(this, function (_a) {
               switch (_a.label) {
                   case 0:
@@ -3316,13 +3339,14 @@
                       response = _a.sent();
                       setIsLoading(false);
                       setIsRefreshing(false);
-                      setData(response.data.data);
-                      setTotals(response.data.totals);
-                      if (response.data.summary) {
-                          setRemoteSummary(parseSummary(summary || [], response.data.summary));
+                      setData(response.data);
+                      meta = response.meta;
+                      setTotals(meta.totals);
+                      if (meta.summary) {
+                          setRemoteSummary(parseSummary(summary || [], meta.summary));
                       }
-                      if (response.data.meta) {
-                          setPagination(transformPagination(response.data.meta));
+                      if (meta.page) {
+                          setPagination(transformPagination(meta.page));
                       }
                       return [3 /*break*/, 4];
                   case 3:
@@ -3338,7 +3362,7 @@
       }); };
       React.useEffect(function () {
           if (setFunctions) {
-              var functions = { reloadList: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+              var functions = { reloadData: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
                       return [2 /*return*/, getData()];
                   }); }); } };
               setFunctions(functions);
@@ -3618,9 +3642,9 @@
    * If there is no data, an `EmptyMessage` is displayed.
    */
   var List = function (_a) {
-      var data = _a.data, pagination = _a.pagination, transformer = _a.transformer, isDisabled = _a.isDisabled;
+      var data = _a.data, empty = _a.empty, pagination = _a.pagination, transformer = _a.transformer, isDisabled = _a.isDisabled;
       if (!data || !data.length) {
-          return React__default["default"].createElement(EmptyMessage, null);
+          return React__default["default"].createElement(EmptyMessage, __assign({}, empty));
       }
       var transformed = transformData$1(data, transformer || DEFAULT_TRANSFORMER$1);
       return (React__default["default"].createElement(React.Fragment, null,
@@ -3925,9 +3949,9 @@
   };
   var Table = function (_a) {
       var _b;
-      var columns = _a.columns, data = _a.data, isDisabled = _a.isDisabled, pagination = _a.pagination, totals = _a.totals, transformer = _a.transformer;
+      var columns = _a.columns, data = _a.data, empty = _a.empty, isDisabled = _a.isDisabled, pagination = _a.pagination, totals = _a.totals, transformer = _a.transformer;
       if (!data || !data.length) {
-          return React__default["default"].createElement(EmptyMessage, null);
+          return React__default["default"].createElement(EmptyMessage, __assign({}, empty));
       }
       var transformedColumns = transformColumns(columns);
       var transformedData = transformData(data, transformer || DEFAULT_TRANSFORMER);
@@ -4042,21 +4066,11 @@
       onChange: PropTypes__default["default"].func
   };
 
-  var Document = /** @class */ (function (_super) {
-      __extends(Document, _super);
-      function Document() {
-          return _super !== null && _super.apply(this, arguments) || this;
-      }
-      /* eslint-disable class-methods-use-this */
-      Document.prototype.render = function () {
-          return (React__default["default"].createElement(NextDocument.Html, { lang: "en" },
-              React__default["default"].createElement(NextDocument.Head, null),
-              React__default["default"].createElement("body", null,
-                  React__default["default"].createElement(NextDocument.Main, null),
-                  React__default["default"].createElement(NextDocument.NextScript, null))));
-      };
-      return Document;
-  }(NextDocument__default["default"]));
+  var Document = function () { return (React__default["default"].createElement(document$1.Html, { lang: "en" },
+      React__default["default"].createElement(document$1.Head, null),
+      React__default["default"].createElement("body", null,
+          React__default["default"].createElement(document$1.Main, null),
+          React__default["default"].createElement(document$1.NextScript, null)))); };
 
   var styles$i = {"root":"FormLegend-module_root__TK1a-"};
 
@@ -4087,20 +4101,20 @@
   var styles$h = {"root":"FileInput-module_root__UvQj-","input":"FileInput-module_input__dBre-"};
 
   var FileInput = function (_a) {
-      var id = _a.id, hasError = _a.hasError, isDisabled = _a.isDisabled, name = _a.name, onChange = _a.onChange;
+      var id = _a.id, hasError = _a.hasError, isDisabled = _a.isDisabled, name = _a.name, onChange = _a.onChange, value = _a.value;
       var _b = React.useState(''), fileName = _b[0], setFileName = _b[1];
       var handleChange = function (event) {
           var target = event.target;
-          if (target.files.length) {
-              setFileName(target.files[0].name);
-          }
           var simpleEvent = {
-              target: { name: name, value: Array.from(target.files) }
+              target: { name: name, value: target.files[0] }
           };
           if (onChange) {
               onChange(simpleEvent);
           }
       };
+      React.useEffect(function () {
+          setFileName(value instanceof File ? value.name : '');
+      }, [value]);
       return (React__default["default"].createElement("div", { className: classNames__default["default"](styles$h.root, hasError && styles$h.rootHasError, isDisabled && styles$h.rootIsDisabled), "data-testid": "file-input-root" },
           React__default["default"].createElement(StaticTextInput, { icon: "upload", label: fileName, name: name, placeholder: "Choose file...", value: fileName }),
           React__default["default"].createElement("input", { className: styles$h.input, "data-testid": "file-input-input", id: id || "c_".concat(name), name: name, onChange: handleChange, type: "file" })));
@@ -4318,7 +4332,7 @@
        * Otherwise, return the existing array, and an empty string (for the new field, if the max is
        * Not reached).
        */
-      var stringifiedValue = value.map(function (item) { return (item || '').toString(); });
+      var stringifiedValue = value.map(function (item) { return item || ''; });
       return max && value.length >= max ? __spreadArray([], stringifiedValue, true) : __spreadArray(__spreadArray([], stringifiedValue, true), [''], false);
   };
   var getAction = function (onClick, values, index, max) {
@@ -4332,7 +4346,7 @@
       };
   };
   var FormRepeater = function (_a) {
-      var label = _a.label, max = _a.max, name = _a.name, onChange = _a.onChange, value = _a.value;
+      var label = _a.label, max = _a.max, name = _a.name, onChange = _a.onChange, render = _a.render, value = _a.value;
       var values = parseValues(value, max);
       var handleChange = function (event, index) {
           if (!onChange) {
@@ -4360,7 +4374,7 @@
               }
           });
       };
-      return (React__default["default"].createElement("div", { className: styles$b.root }, values.map(function (_item, index) { return (React__default["default"].createElement(FormField, { key: index, action: getAction(function () { return handleRemove(index); }, values, index, max), id: "c_".concat(name, "_").concat(index), label: index === 0 ? label : null, name: name, onChange: function (event) { return handleChange(event, index); }, value: values[index], isShallow: true })); })));
+      return (React__default["default"].createElement("div", { className: styles$b.root }, values.map(function (_item, index) { return (React__default["default"].createElement(FormField, { key: index, action: getAction(function () { return handleRemove(index); }, values, index, max), id: "c_".concat(name, "_").concat(index), label: index === 0 ? label : null, name: name, onChange: function (event) { return handleChange(event, index); }, render: render, value: values[index], isShallow: true })); })));
   };
   FormRepeater.propTypes = {
       name: PropTypes__default["default"].string.isRequired,
@@ -4540,6 +4554,7 @@
   var AUTH_DEFAULTS = {
       identifier: 'username',
       identifierLabel: 'Username',
+      loginUrl: 'tokens',
       tfa: false
   };
   var LoginForm = function (_a) {
@@ -4561,8 +4576,10 @@
           formData: formData,
           method: 'post',
           successMessage: false,
-          url: 'tokens',
-          onSubmitSuccess: function (response) { return utility.AuthService.login(response.data.token); }
+          url: auth.loginUrl,
+          onSubmitSuccess: function (response) {
+              return utility.AuthService.login(response.data.token);
+          }
       }), errors = _f.errors, isLoading = _f.isLoading, handleSubmit = _f.handleSubmit;
       var handleKeyDown = function (event) {
           if (event.key === 'Enter') {
@@ -4812,59 +4829,28 @@
       }).isRequired).isRequired
   };
 
-  var start = function () { return __awaiter(void 0, void 0, void 0, function () {
-      var response;
-      return __generator(this, function (_a) {
-          switch (_a.label) {
-              case 0:
-                  utility.EventService.publish('@build/status', 'PENDING');
-                  _a.label = 1;
-              case 1:
-                  _a.trys.push([1, 3, , 4]);
-                  return [4 /*yield*/, utility.ApiService.get('build')];
-              case 2:
-                  response = _a.sent();
-                  utility.StorageService.set('build_hash', response.data.hash);
-                  return [3 /*break*/, 4];
-              case 3:
-                  _a.sent();
-                  utility.EventService.publish('@build/status', 'ERROR');
-                  return [2 /*return*/];
-              case 4:
-                  _a.trys.push([4, 6, , 7]);
-                  return [4 /*yield*/, utility.ApiService.pollForResponse([
-                          'build/status',
-                          {
-                              hash: utility.StorageService.get('build_hash')
-                          },
-                      ])];
-              case 5:
-                  _a.sent();
-                  utility.EventService.publish('@build/status', 'SUCCESS');
-                  return [3 /*break*/, 7];
-              case 6:
-                  _a.sent();
-                  utility.EventService.publish('@build/status', 'ERROR');
-                  return [3 /*break*/, 7];
-              case 7:
-                  utility.StorageService.remove('build_hash');
-                  return [2 /*return*/];
-          }
-      });
-  }); };
-  var open = function () { return utility.EventService.publish('@build/open'); };
-  var BuildService = { start: start, open: open };
-
-  var useConnectedList = function () {
-      var _a = React.useState({ reloadList: function () { return null; } }), listFunctions = _a[0], setListFunctions = _a[1];
+  var useConnectedRepeater = function (component) {
+      var _a = React.useState({
+          reloadData: function () { return null; }
+      }), RepeaterFunctions = _a[0], setRepeaterFunctions = _a[1];
       return {
-          ConnectedList: React.useCallback(function (props) {
-              return React.createElement(ConnectedList, __assign(__assign({}, props), { setFunctions: function (fnc) { return setListFunctions(fnc); } }));
+          element: React.useCallback(function (props) {
+              return React.createElement(component, __assign(__assign({}, props), { setFunctions: function (fnc) { return setRepeaterFunctions(fnc); } }));
           }, []),
-          reloadList: listFunctions.reloadList
+          reloadData: RepeaterFunctions.reloadData
       };
   };
 
+  var useConnectedList = function () {
+      var _a = useConnectedRepeater(ConnectedList), element = _a.element, functions = __rest(_a, ["element"]);
+      return __assign({ ConnectedList: element }, functions);
+  };
+
+  var useConnectedTable = function () {
+      var _a = useConnectedRepeater(ConnectedList), element = _a.element, functions = __rest(_a, ["element"]);
+      return __assign({ ConnectedTable: element }, functions);
+  };
+
   var makeUrl = function (alias) {
       var query = FilterService.getUrlForFilters({ dl: '1', token: utility.AuthService.getToken() }, false);
       return "".concat(utility.ApiService.makeUrl(alias), "?").concat(query);
@@ -5028,7 +5014,6 @@
   exports.App = App;
   exports.AppContextProvider = AppContextProvider;
   exports.AutoSuggest = AutoSuggest;
-  exports.BuildService = BuildService;
   exports.Button = Button;
   exports.CalendarInput = CalendarInput;
   exports.CheckboxList = CheckboxList;
@@ -5086,6 +5071,8 @@
   exports.useAppContext = useAppContext;
   exports.useClickOutside = useClickOutside;
   exports.useConnectedList = useConnectedList;
+  exports.useConnectedRepeater = useConnectedRepeater;
+  exports.useConnectedTable = useConnectedTable;
   exports.useFilters = useFilters;
   exports.useForm = useForm;
   exports.useFormData = useFormData;