gogoclient 1.2.2

package/dist/theme/index.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _elements = require("./elements");
+var defaultFont = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
+var cokoTheme = {
+  /* Colors */
+  colorBackground: 'white',
+  colorBackgroundHue: '#F1F1F1',
+  // deprecate
+  colorFurniture: '#CCC',
+  // deprecate
+
+  colorPrimary: '#0B65CB',
+  colorSecondary: '#E7E7E7',
+  colorDisabled: '#595959',
+  colorBorder: '#AAA',
+  colorSuccess: '#008800',
+  colorError: '#FF2D1A',
+  colorWarning: '#ffc107',
+  colorText: '#111',
+  colorTextReverse: '#FFF',
+  colorTextPlaceholder: '#595959',
+  /* Text variables */
+
+  // fonts
+  fontInterface: defaultFont,
+  fontHeading: defaultFont,
+  fontReading: defaultFont,
+  fontWriting: defaultFont,
+  // deprecate
+
+  // font sizes
+  fontSizeBase: '16px',
+  fontSizeBaseSmall: '14px',
+  // rename to fontSizeSmall
+  fontSizeHeading1: '40px',
+  fontSizeHeading2: '36px',
+  fontSizeHeading3: '28px',
+  fontSizeHeading4: '24px',
+  fontSizeHeading5: '20px',
+  fontSizeHeading6: '16px',
+  // line heights
+  lineHeightBase: '24px',
+  lineHeightBaseSmall: '16px',
+  // rename to lineHeightSmall
+  lineHeightHeading1: '48px',
+  lineHeightHeading2: '40px',
+  lineHeightHeading3: '32px',
+  lineHeightHeading4: '32px',
+  lineHeightHeading5: '24px',
+  lineHeightHeading6: '24px',
+  /* Spacing */
+  gridUnit: '8px',
+  /* Border */
+  borderRadius: '0',
+  borderWidth: '1px',
+  // julien: not 0
+  borderStyle: 'solid',
+  // Does not exist
+  // $borderColor: var($colorFurniture);
+
+  /* Shadow (for tooltip) */
+  boxShadow: '0 2px 4px 0 rgba(51, 51, 51, 0.3)',
+  /* Transition */
+  transitionDuration: 0.2,
+  transitionTimingFunction: 'ease',
+  transitionDelay: '0',
+  /* Breakpoints */
+  // breakpoints: [480, 768, 1000, 1272],
+
+  // TO DO: Revisit the need for any of these
+  cssOverrides: {
+    Login: {
+      Logo: _elements.Logo
+    },
+    ui: {
+      Action: _elements.Action,
+      ActionGroup: _elements.ActionGroup,
+      AppBar: _elements.AppBar,
+      Button: _elements.Button,
+      Checkbox: _elements.Checkbox,
+      GlobalStyle: _elements.GlobalStyle,
+      Radio: _elements.Radio,
+      TextField: _elements.TextField,
+      Menu: _elements.Menu
+    }
+  }
+};
+var _default = exports["default"] = cokoTheme;

package/dist/toolkit/darkenLighten.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lighten = exports.darken = void 0;
+var _lodash = require("lodash");
+var _color = _interopRequireDefault(require("color"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/*
+  Functions to change the shade of a color.
+
+  Valid input for the Color function is defined at https://github.com/Qix-/color.
+
+  eg.
+  darken('#AAAAAA', 0.3)
+  lighten('#AAA', 0.7)
+  darken('rgb(255, 255, 255)', 0.2)
+
+  It will also accept a valid variable defined in your theme instead.
+
+  eg.
+  darken('colorPrimary', 0.3)
+  lighten('someProperty.customColor', 0.5)
+
+  Percent can be either a decimal point or an integer.
+
+  eg. these two functions will evaluate to the same thing
+  darken('colorPrimary', 0.5)
+  darken('colorPrimary', 50)
+*/
+
+var normalizePercent = function normalizePercent(num) {
+  return num >= 1 && num <= 100 ? num / 100 : num;
+};
+var darkenLighten = function darkenLighten(original, percent, props, dark) {
+  var color = (0, _lodash.get)(props.theme, original) || original;
+  var thisMuch = normalizePercent(percent);
+  var converted;
+  try {
+    converted = (0, _color["default"])(color);
+  } catch (_) {
+    converted = (0, _color["default"])('black');
+  }
+  if (dark) return converted.darken(thisMuch).string();
+  return converted.lighten(thisMuch).string();
+};
+var darken = exports.darken = function darken(original, percent) {
+  return function (props) {
+    return darkenLighten(original, percent, props, true);
+  };
+};
+var lighten = exports.lighten = function lighten(original, percent) {
+  return function (props) {
+    return darkenLighten(original, percent, props);
+  };
+};

package/dist/toolkit/headingScale.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+/*
+  The scaling function is designed to apply a scale in order to derive the font
+  sizes for all headings, given a base font size.
+
+  eg.
+  Given a base font size of 12 and a scale of 1.2, your heading font sizes are
+  as follows:
+
+  heading 1: 29.85984
+  heading 2: 24.8832
+  heading 3: 20.736
+  heading 4: 17.28
+  heading 5: 14.399999999999999
+  heading 6: 12
+
+  ** usage **
+  scale(12, 1.2, 4)   // evaluates to 17.28
+*/
+
+var headingScale = function headingScale(base, scale, heading) {
+  return base * Math.pow(scale, Math.abs(heading - 6));
+};
+var _default = exports["default"] = headingScale;

package/dist/toolkit/index.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "darken", {
+  enumerable: true,
+  get: function get() {
+    return _darkenLighten.darken;
+  }
+});
+Object.defineProperty(exports, "fadeIn", {
+  enumerable: true,
+  get: function get() {
+    return _fadeInOut.fadeIn;
+  }
+});
+Object.defineProperty(exports, "fadeOut", {
+  enumerable: true,
+  get: function get() {
+    return _fadeInOut.fadeOut;
+  }
+});
+Object.defineProperty(exports, "grid", {
+  enumerable: true,
+  get: function get() {
+    return _themeHelper.grid;
+  }
+});
+Object.defineProperty(exports, "headingScale", {
+  enumerable: true,
+  get: function get() {
+    return _headingScale["default"];
+  }
+});
+Object.defineProperty(exports, "lighten", {
+  enumerable: true,
+  get: function get() {
+    return _darkenLighten.lighten;
+  }
+});
+Object.defineProperty(exports, "media", {
+  enumerable: true,
+  get: function get() {
+    return _media["default"];
+  }
+});
+Object.defineProperty(exports, "override", {
+  enumerable: true,
+  get: function get() {
+    return _override["default"];
+  }
+});
+Object.defineProperty(exports, "rotate360", {
+  enumerable: true,
+  get: function get() {
+    return _rotate["default"];
+  }
+});
+Object.defineProperty(exports, "th", {
+  enumerable: true,
+  get: function get() {
+    return _themeHelper.th;
+  }
+});
+Object.defineProperty(exports, "validationColor", {
+  enumerable: true,
+  get: function get() {
+    return _themeHelper.validationColor;
+  }
+});
+var _darkenLighten = require("./darkenLighten");
+var _fadeInOut = require("./styles/fadeInOut");
+var _headingScale = _interopRequireDefault(require("./headingScale"));
+var _override = _interopRequireDefault(require("./override"));
+var _themeHelper = require("./themeHelper");
+var _rotate = _interopRequireDefault(require("./styles/rotate360"));
+var _media = _interopRequireDefault(require("./media"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/dist/toolkit/media.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _styledComponents = require("styled-components");
+var _themeHelper = require("./themeHelper");
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+var sizes = {
+  mobileUp: (0, _themeHelper.th)('breakpoints.0'),
+  tabletPortraitUp: (0, _themeHelper.th)('breakpoints.1'),
+  tabletLandscapeUp: (0, _themeHelper.th)('breakpoints.2'),
+  desktopUp: (0, _themeHelper.th)('breakpoints.3')
+};
+var media = Object.keys(sizes).reduce(function (acc, label) {
+  acc[label] = function () {
+    return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    @media (min-width: ", "px) {\n      ", ";\n    }\n  "])), sizes[label], _styledComponents.css.apply(void 0, arguments));
+  };
+  return acc;
+}, {});
+var _default = exports["default"] = (0, _styledComponents.withTheme)(media);

package/dist/toolkit/override.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _styledComponents = require("styled-components");
+var _lodash = require("lodash");
+var _themeHelper = require("./themeHelper");
+var _templateObject, _templateObject2;
+/*
+  Helper to write overrides for your styled components.
+
+  This is here so that you don't have to think about compatibility between this:
+
+  cssOverrides.ui.Button = css``
+
+  and this:
+
+  cssOverrides.ui.Button = {
+    Root: css``,
+    Input: css``
+  }
+
+  in your theme.
+
+  -------------------
+
+  Usage:
+
+  const Button = styled.div`
+    YOUR CSS HERE
+
+    ${override('ui.Button')};
+  `
+
+  Now both of the above scenarios will work.
+*/
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+/*
+  Will be using ui.Button as an example component override to explain the code.
+*/
+var override = function override(name) {
+  var overrideKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'cssOverrides';
+  return function (props) {
+    // Find (props.theme.cssOverrides.) ui.Button
+    var target = (0, _lodash.get)(props.theme[overrideKey], name);
+
+    // ui.Button is not there.
+    if (!target) return null;
+
+    // css`` functions from styled components come in as arrays
+    var isStyledCss = Array.isArray(target);
+    var hasRoot = (0, _lodash.has)(target, 'Root');
+
+    /*
+    ui.Button is there, but there is no ui.Button.Root or ui.Button: css``.
+     This also covers the case where you only target children of the component,
+    eg. if your override looks like ui.Button = { Icon: css`` }.
+    In this case, there would be no overrides for ui.Button, but only for
+    ui.Button.Icon, which would have its own override.
+    */
+    if (!isStyledCss && !hasRoot) return null;
+
+    // ui.Button.Root exists
+    if (hasRoot) {
+      return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        ", ";\n      "])), (0, _themeHelper.th)("".concat(overrideKey, ".").concat(name, ".Root")));
+    }
+
+    // ui.Button: css`` exists
+    return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      ", ";\n    "])), (0, _themeHelper.th)("".concat(overrideKey, ".").concat(name)));
+  };
+};
+var _default = exports["default"] = override;

package/dist/toolkit/styles/fadeInOut.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fadeOut = exports.fadeIn = void 0;
+var _styledComponents = require("styled-components");
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+var fadeIn = exports.fadeIn = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n"])));
+var fadeOut = exports.fadeOut = (0, _styledComponents.keyframes)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n"])));

package/dist/toolkit/styles/rotate360.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _styledComponents = require("styled-components");
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+var rotate360 = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var _default = exports["default"] = rotate360;

package/dist/toolkit/themeHelper.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validationColor = exports.th = exports.grid = void 0;
+var _lodash = require("lodash");
+/**
+ * Returns multiples of gridUnit.
+ *
+ * It lets you replace statements like this:
+ *    calc(${th('gridUnit')} * 4)
+ * to this:
+ *    ${grid(4)}
+ *
+ */
+var grid = exports.grid = function grid(value) {
+  return function (props) {
+    return "calc(".concat(props.theme.gridUnit, " * ").concat(value, ")");
+  };
+};
+
+/**
+ * A bit of syntactic sugar for styled-components. Lets you replace this:
+ *
+ * ${props => props.theme.colorPrimary}
+ *
+ * with this:
+ *
+ * ${th('colorPrimary')}
+ *
+ * This is called 'th' (theme helper) for historic reasons
+ */
+var th = exports.th = function th(name) {
+  return function (props) {
+    return (0, _lodash.get)(props.theme, name);
+  };
+};
+
+/**
+ * returns color from theme object, based on validation status
+ */
+var validationColor = exports.validationColor = function validationColor(_ref) {
+  var theme = _ref.theme,
+    _ref$validationStatus = _ref.validationStatus,
+    validationStatus = _ref$validationStatus === void 0 ? 'default' : _ref$validationStatus;
+  return {
+    error: theme.colorError,
+    success: theme.colorSuccess,
+    "default": theme.colorBorder,
+    warning: theme.colorWarning
+  }[validationStatus];
+};

package/dist/ui/_helpers/_helpers.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.randomPick = exports.randomBool = exports.randomArray = exports.noop = exports.createData = exports.Filler = exports.Background = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _faker = require("@faker-js/faker");
+var _lodash = require("lodash");
+var _templateObject, _templateObject2; // eslint-disable-next-line import/no-extraneous-dependencies
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+/**
+ * Wrap components around this to show what they will look like
+ * with the grey body background
+ */
+var Background = exports.Background = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  padding: 40px;\n"])), function (props) {
+  return props.theme.colorBody;
+});
+var StyledFiller = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 200px;\n  justify-content: center;\n  margin-bottom: 16px;\n  padding: 48px;\n  text-align: justify;\n\n  > div {\n    font-weight: bold;\n    text-align: center;\n  }\n"])), function (props) {
+  return props.theme.colorSecondary;
+});
+
+/**
+ * Just a block with some text in it
+ */
+var Filler = exports.Filler = function Filler() {
+  return /*#__PURE__*/_react["default"].createElement(StyledFiller, null, /*#__PURE__*/_react["default"].createElement("div", null, "Filler"), /*#__PURE__*/_react["default"].createElement("span", null, _faker.faker.lorem.sentences(10)));
+};
+
+/**
+ * Picks a random item from any given array
+ */
+var randomPick = exports.randomPick = function randomPick(array) {
+  return array[Math.floor(Math.random() * array.length)];
+};
+
+/**
+ * Picks n values randomly from given array
+ */
+var randomArray = exports.randomArray = function randomArray(array, n) {
+  var res = [];
+  while (res.length < n) {
+    var v = randomPick(array);
+    if (!res.includes(v)) res.push(v);
+  }
+  return res;
+};
+
+/**
+ * Randomly picks true or false
+ */
+var randomBool = exports.randomBool = function randomBool() {
+  return randomPick([true, false]);
+};
+
+/**
+ * Creates an array of length n of whatever the callback returns
+ */
+var createData = exports.createData = function createData(n, callback) {
+  return (0, _lodash.range)(n).map(callback);
+};
+
+/**
+ * Just an empty function to use as a placeholder for required functions
+ */
+
+var noop = exports.noop = function noop() {};

package/dist/ui/_helpers/cssSnippets.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.vertical = void 0;
+var _styledComponents = require("styled-components");
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+// eslint-disable-next-line import/prefer-default-export
+var vertical = exports.vertical = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));

package/dist/ui/_helpers/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useBreakpoint: true
+};
+Object.defineProperty(exports, "useBreakpoint", {
+  enumerable: true,
+  get: function get() {
+    return _useBreakpoint["default"];
+  }
+});
+var _helpers = require("./_helpers");
+Object.keys(_helpers).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _helpers[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _helpers[key];
+    }
+  });
+});
+var _cssSnippets = require("./cssSnippets");
+Object.keys(_cssSnippets).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _cssSnippets[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _cssSnippets[key];
+    }
+  });
+});
+var _useBreakpoint = _interopRequireDefault(require("./useBreakpoint"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/dist/ui/_helpers/useBreakpoint.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var useBreakpoint = function useBreakpoint(mediaQuery) {
+  var mediaQueryList = window.matchMedia(mediaQuery);
+  var _useState = (0, _react.useState)(mediaQueryList.matches),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMobile = _useState2[0],
+    setIsMobile = _useState2[1];
+  var matches = function matches(e) {
+    if (e.matches) {
+      setIsMobile(true);
+    } else {
+      setIsMobile(false);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    mediaQueryList.addEventListener('change', matches);
+    return function () {
+      return mediaQueryList.removeEventListener('change', matches);
+    };
+  }, []);
+  return isMobile;
+};
+var _default = exports["default"] = useBreakpoint;