@spothero/ui 22.5.3 → 23.0.1

package/dist/components/Menu/Menu.stories.js

@@ -0,0 +1,169 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Complex = exports.Basic = void 0;
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _Menu = _interopRequireDefault(require("./Menu"));
+var _index = require("./index");
+var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
+var _react2 = require("@chakra-ui/react");
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _default = exports["default"] = {
+  title: 'v2/Menu',
+  component: {
+    Menu: _Menu["default"]
+  },
+  parameters: {
+    importedBy: 'Menu',
+    removeBaseHtmlClass: true,
+    chakraLink: 'https://v1.chakra-ui.com/docs/components/overlay/menu'
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+        options: ['basic', 'full']
+      }
+    }
+  }
+};
+var BasicMenuTemplate = function BasicMenuTemplate(props) {
+  return /*#__PURE__*/_react["default"].createElement(_Menu["default"], props, /*#__PURE__*/_react["default"].createElement(_index.MenuButton, null, "MenuItem"), /*#__PURE__*/_react["default"].createElement(_index.MenuList, null, /*#__PURE__*/_react["default"].createElement(_index.MenuOptionGroup, {
+    title: "Order",
+    type: "radio"
+  }, /*#__PURE__*/_react["default"].createElement(_index.MenuItemOption, {
+    value: "asc"
+  }, "Ascending"), /*#__PURE__*/_react["default"].createElement(_index.MenuItemOption, {
+    value: "desc"
+  }, "Descending")), /*#__PURE__*/_react["default"].createElement(_index.MenuDivider, null), /*#__PURE__*/_react["default"].createElement(_index.MenuOptionGroup, {
+    title: "Country",
+    type: "checkbox"
+  }, /*#__PURE__*/_react["default"].createElement(_index.MenuItemOption, {
+    value: "email"
+  }, "Email"), /*#__PURE__*/_react["default"].createElement(_index.MenuItemOption, {
+    value: "phone"
+  }, "Phone"), /*#__PURE__*/_react["default"].createElement(_index.MenuItemOption, {
+    value: "country"
+  }, "Country")), /*#__PURE__*/_react["default"].createElement(_index.MenuGroup, {
+    title: "Profile"
+  }, /*#__PURE__*/_react["default"].createElement(_index.MenuItem, null, "My Account"), /*#__PURE__*/_react["default"].createElement(_index.MenuItem, null, "Payments "))));
+};
+var ComplexMenuTemplate = function ComplexMenuTemplate(props) {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    variant: "body2",
+    marginBottom: 8
+  }, "NOTE: This is a fairly contrived example. Chakra's", ' ', /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    as: "code"
+  }, '<Menu />'), " (and child components) allow for the building of a complex menu using other components like", ' ', /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    as: "code"
+  }, '<Flex />'), ",", ' ', /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    as: "code"
+  }, '<Box />'), ",", ' ', /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    as: "code"
+  }, '<Text />'), ", etc. The example below is leveraging the ", /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    as: "code"
+  }, 'full'), " variant to allow for a more complex layout."), /*#__PURE__*/_react["default"].createElement(_Menu["default"], (0, _extends2["default"])({}, props, {
+    placement: "bottom"
+  }), /*#__PURE__*/_react["default"].createElement(_index.MenuButton, null, "Menu Button"), /*#__PURE__*/_react["default"].createElement(_index.MenuList, null, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_react2.Flex, {
+    gap: 4
+  }, /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    fontSize: "sm",
+    fontWeight: "semibold"
+  }, "102 S Ada St. Chicago, IL"), /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "102 S Ada St. - Self Park Garage")), /*#__PURE__*/_react["default"].createElement(_react2.Divider, {
+    marginY: 4
+  })), /*#__PURE__*/_react["default"].createElement(_react2.Flex, {
+    alignItems: "flex-start",
+    gap: 2.5
+  }, /*#__PURE__*/_react["default"].createElement(_index.MenuGroup, {
+    title: "Facility Management",
+    paddingX: 3.5
+  }, /*#__PURE__*/_react["default"].createElement(_index.MenuItem, null, /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Location Information"), /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Manage the details provided to drivers about a facility")), /*#__PURE__*/_react["default"].createElement(_index.MenuItem, null, /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Changelog"), /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Track changes made to your facilities")), /*#__PURE__*/_react["default"].createElement(_index.MenuItem, null, /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Email Recipients"), /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "View recipients of recurring operational emails"))), /*#__PURE__*/_react["default"].createElement(_react2.Box, {
+    height: 80
+  }, /*#__PURE__*/_react["default"].createElement(_react2.Divider, {
+    orientation: "vertical"
+  })), /*#__PURE__*/_react["default"].createElement(_index.MenuGroup, {
+    title: "Events",
+    paddingX: 3.5
+  }, /*#__PURE__*/_react["default"].createElement(_index.MenuItem, null, /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Event Schedule"), /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Manage upcoming event rates and track sales")), /*#__PURE__*/_react["default"].createElement(_index.MenuItem, null, /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Event Pricing Defaults"), /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Set rate and inventory rules for various types of events"))), /*#__PURE__*/_react["default"].createElement(_react2.Box, {
+    height: 80
+  }, /*#__PURE__*/_react["default"].createElement(_react2.Divider, {
+    orientation: "vertical"
+  })), /*#__PURE__*/_react["default"].createElement(_react2.Box, null, /*#__PURE__*/_react["default"].createElement(_index.MenuGroup, {
+    title: "Monthly",
+    paddingX: 3.5
+  }, /*#__PURE__*/_react["default"].createElement(_index.MenuItem, null, /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Monthly Rates"), /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Manage upcoming event rates and track sales")), /*#__PURE__*/_react["default"].createElement(_index.MenuItem, null, /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Monthly Inventory"), /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Manage total monthly inventory and track utilization"))), /*#__PURE__*/_react["default"].createElement(_index.MenuGroup, {
+    title: "Airport",
+    paddingX: 3.5
+  }, /*#__PURE__*/_react["default"].createElement(_index.MenuItem, null, /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Airport Rates"), /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Manage airport rates")), /*#__PURE__*/_react["default"].createElement(_index.MenuItem, null, /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Airport Inventory"), /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Manage total airport inventory and exceptions"))))))));
+};
+var Basic = exports.Basic = (0, _bind["default"])(BasicMenuTemplate).call(BasicMenuTemplate, {});
+Basic.args = {
+  variant: 'basic'
+};
+var Complex = exports.Complex = (0, _bind["default"])(ComplexMenuTemplate).call(ComplexMenuTemplate, {});
+Complex.argTypes = _objectSpread({}, (0, _disableArgs["default"])(['variant']));
+Complex.args = {
+  variant: 'full'
+};

package/dist/components/Menu/Menu.styles.js

@@ -0,0 +1,174 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
+var baseStyle = {
+  button: {
+    px: 8,
+    py: 3,
+    fontSize: 'base',
+    fontFamily: 'body',
+    lineHeight: 0.875,
+    fontWeight: 'semibold',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderRadius: 'base',
+    textTransform: 'capitalize',
+    transition: 'all normal ease',
+    _hover: {
+      bg: 'gray.50',
+      borderColor: 'gray.200'
+    },
+    _disabled: {
+      cursor: 'not-allowed',
+      opacity: 1,
+      bg: 'gray.200',
+      borderColor: 'gray.200',
+      color: 'gray.600'
+    },
+    _focus: {
+      zIndex: 1,
+      boxShadow: 'outline'
+    }
+  },
+  list: {
+    bg: 'white',
+    boxShadow: 'base',
+    padding: 6,
+    zIndex: 'layer1',
+    width: 64
+  },
+  item: {
+    paddingX: 2,
+    paddingY: 1.5,
+    _focus: {
+      zIndex: 1,
+      boxShadow: 'outline'
+    }
+  },
+  groupTitle: {
+    fontWeight: 'semibold',
+    color: 'gray.600',
+    padding: 2
+  },
+  command: {
+    // this will style the text defined by the command
+    // prop in the MenuItem and MenuItemOption components
+    opacity: '0.8',
+    fontFamily: 'mono',
+    fontSize: 'sm',
+    letterSpacing: 'tighter',
+    paddingL: 4
+  },
+  divider: {
+    marginY: 2,
+    borderColor: 'gray.200'
+  }
+};
+var variants = {
+  basic: {
+    button: {
+      bg: 'primary.default',
+      borderColor: 'primary.default',
+      color: 'white',
+      _hover: {
+        bg: 'primary.600',
+        borderColor: 'primary.600',
+        color: 'white',
+        _disabled: {
+          bg: 'gray.200',
+          borderColor: 'gray.200',
+          color: 'gray.600'
+        }
+      }
+    },
+    list: {
+      bg: 'white',
+      boxShadow: 'base',
+      zIndex: 'layer1',
+      borderColor: 'gray.100',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderRadius: 'base',
+      padding: 4,
+      width: 64
+    },
+    groupTitle: {
+      fontWeight: 'semibold',
+      fontSize: 'md',
+      color: 'gray.600',
+      padding: 2
+    },
+    item: {
+      fontWeight: 'semibold',
+      _hover: {
+        color: 'gray.600'
+      }
+    }
+  },
+  full: {
+    button: {
+      height: 8,
+      fontSize: 'sm',
+      fontWeight: 'semibold',
+      color: 'black',
+      borderColor: 'white',
+      backgroundColor: 'white',
+      borderRadius: 'base',
+      paddingX: 3,
+      paddingY: 'auto',
+      _hover: {
+        color: 'black',
+        backgroundColor: 'gray.50',
+        borderColor: 'gray.50'
+      },
+      _active: {
+        color: 'primary.default',
+        backgroundColor: 'gray.50',
+        borderColor: 'gray.50',
+        _hover: {
+          color: 'primary.600',
+          backgroundColor: 'gray.50',
+          borderColor: 'gray.50'
+        }
+      }
+    },
+    list: {
+      height: '30rem',
+      width: '100vw',
+      padding: 8,
+      backgroundColor: 'white'
+    },
+    groupTitle: {
+      fontSize: 'sm',
+      weight: 'normal',
+      color: 'gray.600'
+    },
+    item: {
+      display: 'block',
+      paddingX: 3.5,
+      paddingY: 2.5,
+      marginBottom: 2,
+      _last: {
+        marginBottom: 0
+      },
+      _hover: {
+        backgroundColor: 'gray.50'
+      },
+      _focus: {
+        boxShadow: 'none',
+        backgroundColor: 'gray.50'
+      }
+    }
+  }
+};
+var _default = exports["default"] = (0, _merge["default"])(_theme["default"].components.Menu, {
+  baseStyle: baseStyle,
+  variants: variants
+});

package/dist/components/Menu/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "MenuButton", {
+  enumerable: true,
+  get: function get() {
+    return _react.MenuButton;
+  }
+});
+_Object$defineProperty(exports, "MenuDivider", {
+  enumerable: true,
+  get: function get() {
+    return _react.MenuDivider;
+  }
+});
+_Object$defineProperty(exports, "MenuGroup", {
+  enumerable: true,
+  get: function get() {
+    return _react.MenuGroup;
+  }
+});
+_Object$defineProperty(exports, "MenuItem", {
+  enumerable: true,
+  get: function get() {
+    return _react.MenuItem;
+  }
+});
+_Object$defineProperty(exports, "MenuItemOption", {
+  enumerable: true,
+  get: function get() {
+    return _react.MenuItemOption;
+  }
+});
+_Object$defineProperty(exports, "MenuList", {
+  enumerable: true,
+  get: function get() {
+    return _react.MenuList;
+  }
+});
+_Object$defineProperty(exports, "MenuOptionGroup", {
+  enumerable: true,
+  get: function get() {
+    return _react.MenuOptionGroup;
+  }
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Menu["default"];
+  }
+});
+var _Menu = _interopRequireDefault(require("./Menu"));
+var _react = require("@chakra-ui/react");

package/dist/components/Modal/Modal.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@chakra-ui/react");
+var _header = _interopRequireDefault(require("./styles/header"));
+function _getRequireWildcardCache(e) { if ("function" != typeof _WeakMap) return null; var r = new _WeakMap(), t = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+/**
+ * @param {boolean} isMobile - Whether or not the Modal is opened in a mobile viewport
+ * @param {boolean} isOpen - Whether or not the Modal is open
+ * @param {React.ReactNode} children - The header text of the modal
+ * @param {()=>void} [onClose] - Callback invoked to close the Modal. Not required, but strongly suggested.
+ * @param {('sm'|'md'|'lg')} [size] - The size of the modal. If unspecified, uses "md" styles.
+ * @param {object} [contentStyling] - Style props to be passed into the modal content
+ * @param {object} [overlayProps] - Props to be passed into the ModalOverlay component. See: https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/modal/src/modal-overlay.tsx
+ * @param {boolean} [hasHeader] - Whether or not ModalHeader is a child. Will change the styling
+ * @param {boolean} [hasFooter] - Whether or not ModalFooter is a child. Will change the styling
+ * @param {React.ReactNode} [hideCloseButton] - Whether or not to show the close button
+ * @returns {React.ReactElement} - The Modal component
+ */
+var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+    isMobile = props.isMobile,
+    hideCloseButton = props.hideCloseButton,
+    hasHeader = props.hasHeader,
+    _props$contentStyling = props.contentStyling,
+    contentStyling = _props$contentStyling === void 0 ? {} : _props$contentStyling,
+    _props$overlayProps = props.overlayProps,
+    overlayProps = _props$overlayProps === void 0 ? {} : _props$overlayProps;
+  return /*#__PURE__*/_react["default"].createElement(_react2.Modal, (0, _extends2["default"])({
+    motionPreset: isMobile ? 'slideInBottom' : 'scale'
+  }, props, {
+    ref: ref
+  }), /*#__PURE__*/_react["default"].createElement(_react2.ModalOverlay, overlayProps), /*#__PURE__*/_react["default"].createElement(_react2.ModalContent, contentStyling, !hasHeader ? /*#__PURE__*/_react["default"].createElement(_react2.Box, (0, _header["default"])(props)) : null, hideCloseButton ? null : /*#__PURE__*/_react["default"].createElement(_react2.ModalCloseButton, null), children));
+});
+var _default = exports["default"] = Modal;