@shopgate/pwa-common 7.30.3 → 7.31.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/pwa-common",
-  "version": "7.30.3",
+  "version": "7.31.0-alpha.1",
   "description": "Common library for the Shopgate Connect PWA.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@redux-devtools/extension": "^3.3.0",
     "@sentry/browser": "6.0.1",
-    "@shopgate/pwa-benchmark": "7.30.3",
+    "@shopgate/pwa-benchmark": "7.31.0-alpha.1",
     "@virtuous/conductor": "~2.5.0",
     "@virtuous/react-conductor": "~2.5.0",
     "@virtuous/redux-persister": "1.1.0-beta.7",
@@ -40,7 +40,8 @@
     "swiper": "12.1.0"
   },
   "devDependencies": {
-    "@shopgate/pwa-core": "7.30.3",
+    "@shopgate/pwa-core": "7.31.0-alpha.1",
+    "@types/lodash": "^4.17.24",
     "@types/react-portal": "^3.0.9",
     "lodash": "^4.17.23",
     "prop-types": "~15.8.1",

package/selectors/client.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import { createSelector } from 'reselect';
 import MobileDetect from 'mobile-detect';
 import { hasSGJavaScriptBridge } from '@shopgate/pwa-core/helpers';

package/styles/reset/form.js

@@ -2,62 +2,57 @@
  * @deprecated used @shopgate/engage/styles instead
  */
 
-import { css } from 'glamor';
+import { injectGlobal } from '@shopgate/engage/styles';
 
 /**
  * 1. Correct the inability to style clickable types in iOS and Safari.
- */
-css.global('button, html [type="button"], [type="reset"], [type="submit"]', {
-  WebkitAppearance: 'button'
-});
-
-// since iOS 15 button has a default color of blue rgb(0, 122, 255);
-css.global('button', {
-  color: 'inherit'
-});
-
-/**
+ * since iOS 15 button has a default color of blue rgb(0, 122, 255);
+ *
  * 1. Change font properties to `inherit` in Safari.
  * 2. Correct the inability to style clickable types in iOS and Safari.
- */
-css.global('::-webkit-file-upload-button', {
-  font: 'inherit',
-  WebkitAppearance: 'button'
-});
-
-/**
+ *
  * Remove the inner padding and cancel buttons in Chrome and Safari for OS X.
  */
-css.global('::-webkit-search-cancel-button, ::-webkit-search-decoration', {
-  WebkitAppearance: 'none'
-});
-css.global('button, input, select, textarea', {
-  background: 'transparent',
-  border: 0,
-  fontSize: '1em',
-  margin: 0
-});
-css.global('input, select, textarea', {
-  fontFamily: 'inherit'
-});
-css.global('button, textarea', {
-  fontFamily: 'inherit',
-  lineHeight: 'inherit'
-});
-css.global('button', {
-  borderRadius: 0
-});
-css.global('button, label, [type="checkbox"], [type="radio"]', {
-  cursor: 'pointer'
-});
-css.global('label', {
-  display: 'inline-block'
-});
-css.global('textarea', {
-  minHeight: '5em',
-  maxWidth: '100%',
-  resize: 'none'
-});
-css.global('[type="search"]', {
-  WebkitAppearance: 'textfield'
+injectGlobal({
+  'button, html [type="button"], [type="reset"], [type="submit"]': {
+    WebkitAppearance: 'button'
+  },
+  button: {
+    color: 'inherit',
+    borderRadius: 0
+  },
+  '::-webkit-file-upload-button': {
+    font: 'inherit',
+    WebkitAppearance: 'button'
+  },
+  '::-webkit-search-cancel-button, ::-webkit-search-decoration': {
+    WebkitAppearance: 'none'
+  },
+  'button, input, select, textarea': {
+    background: 'transparent',
+    border: 0,
+    fontSize: '1em',
+    margin: 0
+  },
+  'input, select, textarea': {
+    fontFamily: 'inherit'
+  },
+  'button, textarea': {
+    fontFamily: 'inherit',
+    lineHeight: 'inherit'
+  },
+  'button, label, [type="checkbox"], [type="radio"]': {
+    cursor: 'pointer'
+  },
+  label: {
+    display: 'inline-block'
+  },
+  textarea: {
+    minHeight: '5em',
+    maxWidth: '100%',
+    resize: 'none'
+  },
+  '[type="search"]': {
+    WebkitAppearance: 'textfield'
+  }
 });

package/styles/reset/media.js

@@ -2,23 +2,25 @@
  * @deprecated used @shopgate/engage/styles/reset instead
  */
 
-import { css } from 'glamor';
-css.global('audio:not([controls])', {
-  display: 'none',
-  height: 0
-});
-css.global('figure', {
-  margin: 0
-});
-css.global('iframe', {
-  border: 0,
-  display: 'block',
-  width: '100%'
-});
-css.global('img, svg', {
-  display: 'block',
-  maxWidth: '100%'
-});
-css.global('progress', {
-  verticalAlign: 'baseline'
+import { injectGlobal } from '@shopgate/engage/styles';
+injectGlobal({
+  'audio:not([controls])': {
+    display: 'none',
+    height: 0
+  },
+  figure: {
+    margin: 0
+  },
+  iframe: {
+    border: 0,
+    display: 'block',
+    width: '100%'
+  },
+  'img, svg': {
+    display: 'block',
+    maxWidth: '100%'
+  },
+  progress: {
+    verticalAlign: 'baseline'
+  }
 });

package/styles/reset/root.js

@@ -2,34 +2,36 @@
  * @deprecated used @shopgate/engage/styles instead
  */
 
-import { css } from 'glamor';
+import { injectGlobal } from '@shopgate/engage/styles';
 import { themeConfig } from "../../helpers/config";
 const {
   typography
 } = themeConfig;
-css.global('*, *:before, *:after', {
-  boxSizing: 'border-box'
-});
-css.global('html, body', {
-  WebkitTapHighlightColor: 'transparent',
-  width: '100%',
-  height: '100%'
-});
-css.global('html', {
-  overflow: 'hidden',
-  MozOsxFontSmoothing: 'grayscale',
-  WebkitFontSmoothing: 'antialiased',
-  MsTextSizeAdjust: '100%',
-  WebkitTextSizeAdjust: '100%',
-  minHeight: '100%'
-});
-css.global('body', {
-  font: `${typography.rootSize}px/${typography.lineHeight} ${typography.family}`,
-  overflow: 'auto',
-  margin: 0,
-  WebkitOverflowScrolling: 'touch',
-  WebkitUserSelect: 'none'
-});
-css.global('[data-pattern]', {
-  height: '100% !important'
+injectGlobal({
+  '*, *:before, *:after': {
+    boxSizing: 'border-box'
+  },
+  'html, body': {
+    WebkitTapHighlightColor: 'transparent',
+    width: '100%',
+    height: '100%'
+  },
+  html: {
+    overflow: 'hidden',
+    MozOsxFontSmoothing: 'grayscale',
+    WebkitFontSmoothing: 'antialiased',
+    MsTextSizeAdjust: '100%',
+    WebkitTextSizeAdjust: '100%',
+    minHeight: '100%'
+  },
+  body: {
+    font: `${typography.rootSize}px/${typography.lineHeight} ${typography.family}`,
+    overflow: 'auto',
+    margin: 0,
+    WebkitOverflowScrolling: 'touch',
+    WebkitUserSelect: 'none'
+  },
+  '[data-pattern]': {
+    height: '100% !important'
+  }
 });

package/styles/reset/table.js

@@ -2,11 +2,13 @@
  * @deprecated used @shopgate/engage/styles instead
  */
 
-import { css } from 'glamor';
-css.global('table', {
-  borderCollapse: 'collapse',
-  minWidth: '100%'
-});
-css.global('td, th', {
-  verticalAlign: 'top'
+import { injectGlobal } from '@shopgate/engage/styles';
+injectGlobal({
+  table: {
+    borderCollapse: 'collapse',
+    minWidth: '100%'
+  },
+  'td, th': {
+    verticalAlign: 'top'
+  }
 });

package/styles/reset/typography.js

@@ -2,27 +2,29 @@
  * @deprecated used @shopgate/engage/styles instead
  */
 
-import { css } from 'glamor';
+import { injectGlobal } from '@shopgate/engage/styles';
 import { rem } from "../../helpers/style";
-css.global('a', {
-  color: 'inherit',
-  textDecoration: 'none',
-  WebkitTextDecorationSkip: 'objects'
-});
-css.global('a:hover, a:focus, a:active, [tabindex]', {
-  outline: 0
-});
-css.global('ol, ul', {
-  listStyle: 'none',
-  margin: 0,
-  paddingLeft: 0
-});
-css.global('b, strong', {
-  fontWeight: 700
-});
-css.global('small', {
-  fontSize: rem(13)
-});
-css.global('sub, sup', {
-  lineHeight: 0
+injectGlobal({
+  a: {
+    color: 'inherit',
+    textDecoration: 'none',
+    WebkitTextDecorationSkip: 'objects'
+  },
+  'a:hover, a:focus, a:active, [tabindex]': {
+    outline: 0
+  },
+  'ol, ul': {
+    listStyle: 'none',
+    margin: 0,
+    paddingLeft: 0
+  },
+  'b, strong': {
+    fontWeight: 700
+  },
+  small: {
+    fontSize: rem(13)
+  },
+  'sub, sup': {
+    lineHeight: 0
+  }
 });

package/subscriptions/error.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import after from 'lodash/after';
 import before from 'lodash/before';
 import over from 'lodash/over';

package/subscriptions/helpers/handleLinks.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import "core-js/modules/web.url.js";
 import "core-js/modules/web.url.to-json.js";
 import "core-js/modules/web.url-search-params.js";

package/subscriptions/router.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.string.replace.js";
 import "core-js/modules/web.url.js";
 import "core-js/modules/web.url.to-json.js";

package/tsconfig.build.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@shopgate/engage/tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "."
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": [
+    "dist",
+    "node_modules",
+    "**/*.spec.*",
+    "**/__tests__/**",
+    "**/__snapshots__/**",
+    "coverage"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@shopgate/engage/tsconfig.json",
+}

package/components/Backdrop/style.js

@@ -1,11 +0,0 @@
-import { css } from 'glamor';
-export default css({
-  position: 'fixed',
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-  // Prevents that content behind the backdrop is clickable
-  pointerEvents: 'all',
-  touchAction: 'none'
-});

package/components/Button/style.js

@@ -1,6 +0,0 @@
-import { css } from 'glamor';
-export default css({
-  ':focus': {
-    outline: 0
-  }
-}).toString();

package/components/Drawer/style.js

@@ -1,37 +0,0 @@
-import { css } from 'glamor';
-const duration = 150;
-const easing = 'ease';
-const slideInBaseDrawer = css.keyframes({
-  '0%': {
-    transform: 'translateY(100%)'
-  },
-  '100%': {
-    transform: 'translateY(0)'
-  }
-});
-const slideOutBaseDrawer = css.keyframes({
-  '0%': {
-    transform: 'translateY(0)'
-  },
-  '100%': {
-    transform: 'translateY(100%)'
-  }
-});
-const container = css({
-  position: 'fixed',
-  bottom: 0,
-  left: 0,
-  zIndex: 5
-}).toString();
-const animation = {
-  in: css({
-    animation: `${slideInBaseDrawer} ${duration}ms 1 forwards ${easing}`
-  }).toString(),
-  out: css({
-    animation: `${slideOutBaseDrawer} ${duration}ms 1 forwards ${easing}`
-  }).toString()
-};
-export default {
-  container,
-  animation
-};

package/components/Dropdown/style.js

@@ -1,4 +0,0 @@
-import { css } from 'glamor';
-export default css({
-  overflow: 'hidden'
-}).toString();

package/components/Grid/components/Item/style.js

@@ -1,23 +0,0 @@
-import { css } from 'glamor';
-
-/**
- * Creates a class name for the flex-grow property
- * @param {number} [value=0] The value for the flex-grow property
- * @return {string} The class name
- */
-const grow = (value = 0) => css({
-  flexGrow: value
-}).toString();
-
-/**
- * Creates a class name for the flex-shrink property
- * @param {number} [value=0] The value for the flex-shrink property
- * @return {string} The class name
- */
-const shrink = (value = 1) => css({
-  flexShrink: value
-}).toString();
-export default {
-  grow,
-  shrink
-};

package/components/Grid/style.js

@@ -1,14 +0,0 @@
-import { css } from 'glamor';
-
-/**
- * Creates a class name for the flex-wrap property
- * @param {boolean} [value=false] TRUE for 'wrap', FALSE for 'nowrap'
- * @return {string} The class name
- */
-export const wrap = (value = false) => css({
-  flexWrap: value ? 'wrap' : 'nowrap'
-}).toString();
-export default css({
-  display: 'flex',
-  minWidth: '100%'
-}).toString();

package/components/Icon/style.js

@@ -1,6 +0,0 @@
-import { css } from 'glamor';
-export default css({
-  fill: 'currentColor',
-  width: '1em',
-  height: '1em'
-}).toString();

package/components/Image/style.js

@@ -1,32 +0,0 @@
-import { css } from 'glamor';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
-
-/**
- * @param {string} [background=themeColors.placeholder] The background color.
- * @param {string} [paddingTop='100%'] The padding top value.
- * @returns {string} The compiled class names.
- */
-const container = (background = themeColors.placeholder, paddingTop = '100%') => css({
-  background,
-  position: 'relative',
-  zIndex: 0,
-  ':before': {
-    display: 'block',
-    content: '""',
-    width: '100%',
-    paddingTop
-  }
-}).toString();
-const image = css({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: '100%',
-  maxHeight: '100%',
-  WebkitTouchCallout: 'none',
-  fontSize: 0
-}).toString();
-export default {
-  container,
-  image
-};

package/components/Link/style.js

@@ -1,10 +0,0 @@
-import { css } from 'glamor';
-export default css({
-  padding: 0,
-  margin: 0,
-  border: 'none',
-  textAlign: 'left',
-  alignItems: 'stretch',
-  width: '100%',
-  cursor: 'pointer'
-}).toString();

package/components/List/components/Item/style.js

@@ -1,16 +0,0 @@
-import { css } from 'glamor';
-const item = css({
-  display: 'block',
-  position: 'relative'
-}).toString();
-const unselected = css({
-  zIndex: 1
-}).toString();
-const selected = css({
-  zIndex: 2
-}).toString();
-export default {
-  item,
-  selected,
-  unselected
-};

package/components/Modal/style.js

@@ -1,36 +0,0 @@
-import { css } from 'glamor';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
-const container = css({
-  position: 'fixed',
-  top: 0,
-  bottom: 0,
-  left: 0,
-  right: 0,
-  overflow: 'hidden',
-  zIndex: 2000
-}).toString();
-const layout = css({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-  height: '100%'
-}).toString();
-const content = css({
-  position: 'relative',
-  maxWidth: '100vw',
-  maxHeight: '100vh',
-  paddingTop: 'var(--safe-area-inset-top)',
-  paddingBottom: 'var(--safe-area-inset-bottom)',
-  overflowY: 'scroll',
-  [responsiveMediaQuery('>xs', {
-    webOnly: true
-  })]: {
-    overflowY: 'initial'
-  }
-}).toString();
-export default {
-  container,
-  layout,
-  content
-};

package/components/Picker/components/Button/index.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styles from "./style";
-
-/**
- * The default button for the Picker component.
- * @returns {JSX} The button component.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const PickerButton = ({
-  value,
-  label,
-  openList
-}) => {
-  if (value !== null) {
-    return /*#__PURE__*/_jsxs("button", {
-      className: styles.button,
-      onClick: openList,
-      type: "button",
-      children: [/*#__PURE__*/_jsx("span", {
-        className: styles.label,
-        children: label
-      }), /*#__PURE__*/_jsx("span", {
-        className: styles.value,
-        children: value
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsx("button", {
-    className: styles.button,
-    onClick: openList,
-    type: "button",
-    children: /*#__PURE__*/_jsx("span", {
-      className: styles.label,
-      children: label
-    })
-  });
-};
-PickerButton.defaultProps = {
-  value: null
-};
-export default PickerButton;

package/components/Picker/components/Button/style.js

@@ -1,19 +0,0 @@
-import { css } from 'glamor';
-const button = css({
-  display: 'block',
-  width: '100%',
-  textAlign: 'left',
-  padding: '10px 20px'
-}).toString();
-const label = css({
-  display: 'block'
-}).toString();
-const value = css({
-  display: 'block',
-  fontWeight: 'bold'
-}).toString();
-export default {
-  button,
-  label,
-  value
-};