@spothero/ui 15.0.0-beta.2 → 15.0.0-beta.4

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@spothero/ui",
-  "version": "15.0.0-beta.2",
+  "version": "15.0.0-beta.4",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index.js",
-  "module": "v2/index.js",
   "repository": "https://github.com/spothero/fe-monorepo",
   "babel": {
     "presets": [
@@ -81,15 +80,15 @@
     "@babel/runtime-corejs3": "7.14.7",
     "@cypress/browserify-preprocessor": "3.0.1",
     "@jackfranklin/test-data-bot": "1.3.0",
-    "@spothero/babel-preset-spothero": "3.0.0",
-    "@spothero/browserslist-config": "2.0.0",
-    "@spothero/core": "5.0.0",
-    "@spothero/dex": "4.0.0",
-    "@spothero/eslint-config": "4.0.0",
-    "@spothero/icons": "4.2.0",
-    "@spothero/npm-publisher": "5.0.0",
-    "@spothero/prettier-config": "2.1.0",
-    "@spothero/stylelint-config": "4.0.0",
+    "@spothero/babel-preset-spothero": "*",
+    "@spothero/browserslist-config": "*",
+    "@spothero/core": "*",
+    "@spothero/dex": "*",
+    "@spothero/eslint-config": "*",
+    "@spothero/icons": "*",
+    "@spothero/npm-publisher": "*",
+    "@spothero/prettier-config": "*",
+    "@spothero/stylelint-config": "*",
     "@storybook/addon-actions": "6.3.13",
     "@storybook/addon-essentials": "6.3.13",
     "@storybook/addon-links": "6.3.13",
@@ -133,7 +132,7 @@
     "@chakra-ui/theme-tools": "1.3.6",
     "@emotion/react": "11.1.5",
     "@emotion/styled": "11.1.5",
-    "@spothero/utils": "10.1.0-beta.2",
+    "@spothero/utils": "*",
     "@storybook/addon-a11y": "6.3.4",
     "axe-core": "4.1.3",
     "chartist": "0.11.4",
@@ -154,5 +153,15 @@
     "ssr-window": "1.0.1",
     "transitionEnd": "1.0.2",
     "uuid": "3.3.3"
+  },
+  "peerDependencies": {
+    "classnames": "^2.2.6",
+    "lodash": "4.17.21",
+    "moment": "^2.27.0",
+    "prop-types": "^15.7.2",
+    "react": ">=16.0.0",
+    "react-dom": ">=16.0.0",
+    "react-redux": ">=7.0.0",
+    "redux": ">=4.0.0"
   }
 }

package/styles/Chart/Chart.jsx

@@ -4,7 +4,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Chartist from 'chartist';
-import {DOMUtils} from '@spothero/utils';
+import DOMUtils from '@spothero/utils/dom';
 
 export default class Chart extends Component {
     static propTypes = {

package/styles/DateTime/DatePicker.jsx

@@ -6,7 +6,7 @@ import {document} from 'ssr-window';
 import TetherComponent from 'react-tether';
 import omit from 'lodash/omit';
 import IconCalendar from '@spothero/icons/calendar';
-import {DOMUtils} from '@spothero/utils';
+import DOMUtils from '@spothero/utils/dom';
 import DatePickerCalendar from './DatePickerCalendar';
 import TextInput from '../TextInput/TextInput';
 import Portal from '../Portal/Portal';

package/styles/DateTime/DatePickerCalendar.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import moment from 'moment';
 import DayPicker, {DateUtils as DayPickerDateUtils} from 'react-day-picker';
-import {DateUtils} from '@spothero/utils';
+import DateUtils from '@spothero/utils/date';
 import DatePickerCalendarNavigation from './DatePickerCalendarNavigation';
 
 const DATE = new Date();

package/styles/DateTime/DatePickerCalendarWithRange.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import moment from 'moment';
 import DayPicker, {DateUtils as DayPickerDateUtils} from 'react-day-picker';
-import {DateUtils} from '@spothero/utils';
+import DateUtils from '@spothero/utils/date';
 import DatePickerCalendarNavigation from './DatePickerCalendarNavigation';
 
 const DATE = new Date();

package/styles/DateTime/DateTimeRangePicker.jsx

@@ -2,7 +2,8 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import uuidV4 from 'uuid/v4';
-import {DateUtils, TimeUtils} from '@spothero/utils';
+import DateUtils from '@spothero/utils/date';
+import TimeUtils from '@spothero/utils/time';
 import DateTimePicker from './DateTimePicker';
 
 const TOOLTIP_TYPES = ['date', 'time', 'none'];

package/styles/DateTime/TimePicker.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import moment from 'moment';
 import omit from 'lodash/omit';
 import IconClock from '@spothero/icons/clock';
-import {TimeUtils} from '@spothero/utils';
+import TimeUtils from '@spothero/utils/time';
 import Select from '../Select/Select';
 
 export default class TimePicker extends Component {

package/styles/ErrorBoundary/ErrorBoundary.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import React, {Component} from 'react';
-import {SentryUtils} from '@spothero/utils';
+import SentryUtils from '@spothero/utils/sentry';
 
 export default class ErrorBoundary extends Component {
     static propTypes = {

package/styles/Flyout/Flyout.jsx

@@ -3,7 +3,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import IconTimes from '@spothero/icons/times';
-import {DOMUtils} from '@spothero/utils';
+import DOMUtils from '@spothero/utils/dom';
 import Button from 'v1/components/Button/Button';
 import Portal from '../Portal/Portal';
 

package/styles/Form/Form.jsx

@@ -2,7 +2,8 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import serialize from 'form-serialize';
-import {DOMUtils, AnimationUtils} from '@spothero/utils';
+import AnimationUtils from '@spothero/utils/animation';
+import DOMUtils from '@spothero/utils/dom';
 
 export default class Form extends Component {
     static propTypes = {

package/styles/GooglePlacesSearchInput/GooglePlacesSearchInput.jsx

@@ -3,7 +3,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import IconSearch from '@spothero/icons/search';
-import {EnvironmentUtils} from '@spothero/utils';
+import EnvironmentUtils from '@spothero/utils/environment';
 import AutoSuggestInput from '../AutoSuggestInput/AutoSuggestInput';
 import TextInputPropTypes from '../TextInput/TextInputPropTypes';
 

package/styles/Notification/Notification.jsx

@@ -8,7 +8,7 @@ import IconExclamationCircle from '@spothero/icons/exclamation-circle';
 import IconExclamationTriangle from '@spothero/icons/exclamation-triangle';
 import IconHeroCar from '@spothero/icons/hero-car';
 import IconTimes from '@spothero/icons/times';
-import {DOMUtils} from '@spothero/utils';
+import DOMUtils from '@spothero/utils/dom';
 import Button from 'v1/components/Button/Button';
 import NotificationPropTypes from './NotificationPropTypes';
 

package/styles/Portal/Portal.jsx

@@ -5,7 +5,7 @@ import {createPortal} from 'react-dom';
 import PropTypes from 'prop-types';
 import {Provider} from 'react-redux';
 import {document} from 'ssr-window';
-import {DOMUtils} from '@spothero/utils';
+import DOMUtils from '@spothero/utils/dom';
 
 export default class Portal extends PureComponent {
     static propTypes = {

package/styles/RenderInBody/RenderInBody.jsx

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {unmountComponentAtNode, render as renderDOM} from 'react-dom';
 import {Provider} from 'react-redux';
-import {DOMUtils} from '@spothero/utils';
+import DOMUtils from '@spothero/utils/dom';
 
 export default class RenderInBody extends Component {
     static propTypes = {

package/styles/Select/Select.jsx

@@ -3,7 +3,7 @@ import React, {Component, cloneElement} from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import IconChevronDown from '@spothero/icons/chevron-down';
-import {DOMUtils} from '@spothero/utils';
+import DOMUtils from '@spothero/utils/dom';
 import Loader from 'v1/components/Loader/Loader';
 import omit from 'lodash/omit';
 // import {

package/styles/SelectControlled/SelectControlled.jsx

@@ -3,7 +3,7 @@ import React, {Component, cloneElement} from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import IconChevronDown from '@spothero/icons/chevron-down';
-import {DOMUtils} from '@spothero/utils';
+import DOMUtils from '@spothero/utils/dom';
 import Loader from 'v1/components/Loader/Loader';
 // import {
 //     SelectItemPropTypes,

package/styles/Tooltip/Tooltip.jsx

@@ -3,7 +3,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import IconTimes from '@spothero/icons/times';
-import {DOMUtils} from '@spothero/utils';
+import DOMUtils from '@spothero/utils/dom';
 import Button from 'v1/components/Button/Button';
 import Portal from '../Portal/Portal';
 

package/styles/v1/components/Image/Image.jsx

@@ -4,7 +4,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import LazyLoad from 'react-lazy-load';
-import {EnvironmentUtils} from '@spothero/utils';
+import EnvironmentUtils from '@spothero/utils/environment';
 import PulseLoader from '../../../PulseLoader/PulseLoader';
 
 export default class Image extends Component {

package/styles/v1/components/Modal/Modal.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import IconChevronLeft from '@spothero/icons/chevron-left';
 import IconTimes from '@spothero/icons/times';
-import {DOMUtils} from '@spothero/utils';
+import DOMUtils from '@spothero/utils/dom';
 import Button from 'v1/components/Button/Button';
 import Portal from '../../../Portal/Portal';
 

package/styles/v1/components/Modal/ModalContent.jsx

@@ -5,7 +5,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {document, window} from 'ssr-window';
-import {DOMUtils} from '@spothero/utils';
+import DOMUtils from '@spothero/utils/dom';
 
 export default class ModalContent extends Component {
     static propTypes = {

package/styles/v1/components/Modal/stories/Content.stories.js

@@ -3,7 +3,7 @@ import Button from 'v1/components/Button/Button';
 import Modal from '../Modal';
 import ModalContent from '../ModalContent';
 import ErrorBoundary from '../../../../ErrorBoundary/ErrorBoundary';
-import {DOMUtils} from '@spothero/utils';
+import DOMUtils from '@spothero/utils/dom';
 
 export default {
     component: Modal,

package/styles/v2/components/Image/Image.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Image as ChakraImage, Img as ChakraImg} from '@chakra-ui/react';
-import {EnvironmentUtils} from '@spothero/utils';
+import EnvironmentUtils from '@spothero/utils/environment';
 import template from 'lodash/template';
 
 const buildCloudinarySrc = ({

package/styles/v2/components/Modal/Modal.jsx

@@ -14,7 +14,7 @@ import {
 import headerStyles from './styles/header';
 
 /**
- * @param {boolean} isMobile - Whether or not the device is a mobile
+ * @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.
@@ -52,7 +52,7 @@ const Modal = forwardRef((props, ref) => {
 export default Modal;
 
 Modal.propTypes = {
-    /** Whether or not the device is a mobile */
+    /** Whether or not the Modal is opened in a mobile viewport */
     isMobile: PropTypes.bool.isRequired,
     /** Whether or not the Modal is open */
     isOpen: PropTypes.bool.isRequired,

package/styles/v2/components/Modal/Modal.stories.js

@@ -45,8 +45,7 @@ export default {
 
 export const Transactional = props => {
     const [open, setOpen] = useState(false);
-    const breakpoint = useBreakpointValue(styleProps.maxW);
-    const isMobile = breakpoint?.includes('base');
+    const isMobile = useBreakpointValue({base: true, tablet: false});
 
     return (
         <Box>
@@ -58,7 +57,6 @@ export const Transactional = props => {
 
             <Modal
                 {...props}
-                isMobile={isMobile}
                 footer={
                     <>
                         <Button
@@ -76,6 +74,7 @@ export const Transactional = props => {
                         </Button>
                     </>
                 }
+                isMobile={isMobile}
                 isOpen={open}
                 onClose={() => setOpen(false)}
             >
@@ -97,8 +96,7 @@ Transactional.args = {
 
 export const Passive = props => {
     const [open, setOpen] = useState(false);
-    const breakpoint = useBreakpointValue(styleProps.maxW);
-    const isMobile = breakpoint?.includes('base');
+    const isMobile = useBreakpointValue({base: true, tablet: false});
 
     return (
         <Box>
@@ -128,8 +126,7 @@ Passive.args = {
 export const TransactionalWithExpandingContent = props => {
     const [open, setOpen] = useState(false);
     const accordionRefs = [React.createRef(), React.createRef()];
-    const breakpoint = useBreakpointValue(styleProps.maxW);
-    const isMobile = breakpoint?.includes('base');
+    const isMobile = useBreakpointValue({base: true, tablet: false});
 
     const handleAccordionChange = index => {
         if (accordionRefs[index]) {