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

package/components/Picker/components/List/index.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import styles from "./style";
-
-/**
- * The default button for the Picker component.
- * @returns {JSX} The button component.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const PickerList = ({
-  items,
-  onClose,
-  onSelect,
-  selectedIndex
-}) => /*#__PURE__*/_jsx("ul", {
-  className: "common__picker__list",
-  children: items.map((item, currentIndex) => /*#__PURE__*/_jsx("li", {
-    className: classNames({
-      [styles.active]: currentIndex === selectedIndex
-    }),
-    children: /*#__PURE__*/_jsx("button", {
-      className: styles.button,
-      disabled: item.disabled,
-      onClick: () => {
-        onSelect(item.value);
-        onClose();
-      },
-      type: "button",
-      children: item.label
-    })
-  }, item.value))
-});
-PickerList.defaultProps = {
-  onClose: () => {},
-  selectedIndex: null
-};
-export default PickerList;

package/components/Picker/components/List/style.js

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

package/components/Picker/components/Modal/index.js

@@ -1,76 +0,0 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import styles from "./style";
-
-/**
- * The picker modal.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-let PickerModal = /*#__PURE__*/function (_Component) {
-  /**
-   * The constructor.
-   * @param {Object} props The props.
-   */
-  function PickerModal(props) {
-    var _this;
-    _this = _Component.call(this, props) || this;
-    /**
-     * Closes the modal after the closing animations have finished.
-     */
-    _this.closeModal = () => {
-      _this.setState({
-        active: false
-      });
-      clearTimeout(_this.timeout);
-      _this.timeout = setTimeout(_this.props.onClose, styles.duration);
-    };
-    _this.timeout = null;
-    _this.state = {
-      active: true
-    };
-    return _this;
-  }
-
-  /**
-   * Update state when isOpen changes.
-   * @param {Object} nextProps The next component props.
-   */
-  _inheritsLoose(PickerModal, _Component);
-  var _proto = PickerModal.prototype;
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.isOpen !== nextProps.isOpen) {
-      this.setState({
-        active: nextProps.isOpen
-      });
-    }
-  };
-  /**
-   * Render all the things!
-   * @returns {JSX} The picker modal with the picker list inside.
-   */
-  _proto.render = function render() {
-    const backgroundClassName = classNames(styles.background.base, {
-      [styles.background.inactive]: !this.state.active
-    });
-    const containerClassName = classNames(styles.container.base, {
-      [styles.container.inactive]: !this.state.active
-    });
-    return this.props.isOpen ? /*#__PURE__*/_jsxs("div", {
-      className: `${styles.wrapper} common__picker__modal`,
-      children: [/*#__PURE__*/_jsx("div", {
-        "aria-hidden": true,
-        className: backgroundClassName,
-        onClick: this.closeModal
-      }), /*#__PURE__*/_jsx("div", {
-        className: containerClassName,
-        children: /*#__PURE__*/React.cloneElement(this.props.children, {
-          onClose: this.closeModal
-        })
-      })]
-    }) : null;
-  };
-  return PickerModal;
-}(Component);
-export default PickerModal;

package/components/Picker/components/Modal/style.js

@@ -1,78 +0,0 @@
-import { css } from 'glamor';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
-const fadeDuration = 150;
-const slideDuration = 150;
-const easing = 'cubic-bezier(0.25, 0.1, 0.25, 1)';
-const slideInPickerModal = css.keyframes({
-  '0%': {
-    transform: 'translateY(100%)'
-  },
-  '100%': {
-    transform: 'translateY(0)'
-  }
-});
-const slideOutPickerModal = css.keyframes({
-  '0%': {
-    transform: 'translateY(0)'
-  },
-  '100%': {
-    transform: 'translateY(100%)'
-  }
-});
-const fadeInPickerBackground = css.keyframes({
-  '0%': {
-    opacity: 0
-  },
-  '100%': {
-    opacity: 0.5
-  }
-});
-const fadeOutPickerBackground = css.keyframes({
-  '0%': {
-    opacity: 0.5
-  },
-  '100%': {
-    opacity: 0
-  }
-});
-const wrapper = css({
-  zIndex: 1000,
-  position: 'fixed',
-  top: 0,
-  bottom: 0,
-  left: 0,
-  right: 0
-}).toString();
-const background = {
-  base: css({
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    backgroundColor: 'black',
-    animation: `${fadeInPickerBackground} ${fadeDuration}ms 1 both`
-  }).toString(),
-  inactive: css({
-    animation: `${fadeOutPickerBackground} ${fadeDuration}ms 1 both`
-  }).toString()
-};
-const container = {
-  base: css({
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    backgroundColor: themeColors.light,
-    animation: `${slideInPickerModal} ${slideDuration}ms 1 both ${easing}`
-  }).toString(),
-  inactive: css({
-    animation: `${slideOutPickerModal} ${slideDuration}ms 1 both ${easing}`
-  }).toString()
-};
-export default {
-  background,
-  container,
-  wrapper,
-  duration: Math.max(slideDuration, fadeDuration)
-};

package/components/Picker/spec.js

@@ -1,88 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Picker from "./index";
-import PickerList from "./components/List";
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.mock('@shopgate/engage/components');
-jest.mock('@shopgate/engage/core');
-describe('<Picker />', () => {
-  let renderedElement;
-  let renderedInstance;
-  const mockItems = ['String only', {
-    value: 'Value only'
-  }, {
-    value: 'value',
-    label: 'Value and label'
-  }];
-  const mockOnChange = jest.fn();
-  const mockOnSelect = jest.fn();
-
-  /**
-   * The view component
-   * @param {Object} props The component props.
-   */
-  const renderComponent = props => {
-    renderedElement = mount(/*#__PURE__*/_jsx(Picker, {
-      ...props
-    }));
-    renderedInstance = renderedElement.find('Picker').instance();
-  };
-  beforeEach(() => {
-    renderComponent({
-      items: mockItems,
-      onChange: mockOnChange,
-      onSelect: mockOnSelect
-    });
-    renderedElement.update();
-  });
-  describe('Given the component was mounted to the DOM', () => {
-    it('should match snapshot', () => {
-      expect(renderedElement).toMatchSnapshot();
-    });
-    it('should have no selected value', () => {
-      expect(renderedInstance.selectedItem).toBe(null);
-    });
-    describe('Given picker component gets opened', () => {
-      beforeEach(() => {
-        renderedInstance.toggleOpenState(true);
-        renderedElement.update();
-      });
-      it('should have isOpen state', () => {
-        expect(renderedInstance.state.isOpen).toBe(true);
-      });
-      it('should render the picker list', () => {
-        expect(renderedElement.find(PickerList).length).toBe(1);
-      });
-      it('should render the picker items', () => {
-        expect(renderedElement.find('li button').length).toBe(mockItems.length);
-      });
-      describe('Given a item gets selected', () => {
-        jest.useFakeTimers();
-        beforeEach(() => {
-          jest.clearAllMocks();
-          renderedElement.find('li button').first().simulate('click');
-          jest.runAllTimers();
-        });
-        afterEach(() => {
-          jest.clearAllTimers();
-        });
-        it('should trigger onChange when the value changed', () => {
-          expect(mockOnChange).toHaveBeenCalledTimes(1);
-        });
-        it('should trigger onSelect when the value changed', () => {
-          expect(mockOnSelect).toHaveBeenCalledTimes(1);
-        });
-        it('should not trigger onChange when the value did not change, but trigger onSelect', () => {
-          renderedInstance.setState({
-            selectedIndex: 0
-          });
-          renderedInstance.toggleOpenState(true);
-          renderedElement.find('li button').first().simulate('click');
-          jest.runAllTimers();
-          expect(mockOnChange).toHaveBeenCalledTimes(1);
-          expect(mockOnSelect).toHaveBeenCalledTimes(2);
-        });
-      });
-    });
-  });
-});

package/components/ProductCharacteristics/connector.js

@@ -1,41 +0,0 @@
-import { connect } from 'react-redux';
-import { router } from '@shopgate/pwa-common/helpers/router';
-import isEqual from 'lodash/isEqual';
-import { getProductVariants } from '@shopgate/pwa-common-commerce/product/selectors/product';
-
-/**
- * Maps the contents of the state to the component props.
- * @param {Object} state The current application state.
- * @param {Object} props The component props.
- * @return {Object} The extended component props.
- */
-const mapStateToProps = (state, props) => ({
-  variants: getProductVariants(state, props)
-});
-
-/**
- * @return {Object}
- */
-const mapDispatchToProps = () => ({
-  navigate: productId => {
-    const route = router.getCurrentRoute();
-    router.update(route.id, {
-      productId
-    });
-  }
-});
-
-/**
- * @param {Object} next The next component props.
- * @param {Object} prev The previous component props.
- * @returns {boolean}
- */
-const areStatePropsEqual = (next, prev) => {
-  if (!prev.variants && next.variants || !isEqual(prev.variants, next.variants)) {
-    return false;
-  }
-  return true;
-};
-export default connect(mapStateToProps, mapDispatchToProps, null, {
-  areStatePropsEqual
-});

package/components/ProductCharacteristics/context.js

@@ -1,2 +0,0 @@
-import React from 'react';
-export default /*#__PURE__*/React.createContext();

package/components/ProductCharacteristics/helpers/index.js

@@ -1,162 +0,0 @@
-import "core-js/modules/es.array.reduce.js";
-import isMatch from 'lodash/isMatch';
-import appConfig from '@shopgate/pwa-common/helpers/config';
-const {
-  variantSelectionMode,
-  product: {
-    variantPreselect
-  } = {}
-} = appConfig;
-const preselectVariant = variantPreselect || parseInt(variantSelectionMode, 10) === 1;
-
-/**
- * Returns the index of a particular characteristic from a set of characteristics.
- * @param {Array} characteristics The characteristics of a product.
- * @param {number} characteristicId The id of the characteristic to find.
- * @return {number}
- */
-export function findSelectionIndex(characteristics, characteristicId) {
-  return characteristics.findIndex(char => char.id === characteristicId);
-}
-
-/**
- * Returns true if the characteristic at the given index is the next characteristic to be selected.
- * @param {Array} characteristics The characteristics of a product.
- * @param {number} index The index of the characteristic to check.
- * @return {boolean}
- */
-export function isCharacteristicEnabled(characteristics, index) {
-  if (index === 0) {
-    return true;
-  }
-  return !!Object.values(characteristics)[index - 1];
-}
-
-/**
- * Returns the selected value by characteristic ID.
- * @param {string} charId The characteristic ID.
- * @param {Object} characteristics The already selected characteristics.
- * @return {string|null}
- */
-export function getSelectedValue(charId, characteristics) {
-  return characteristics[charId] ? characteristics[charId] : null;
-}
-
-/**
- * Prepares the new state after a selection has been made.
- * @param {string} id The selection ID
- * @param {string} value The selection value.
- * @param {Object} selections The selections stored in the state.
- * @param {Array} characteristics The characteristics of a product.
- * @param {Array} products All available products.
- * @return {Object}
- */
-export function prepareState(id, value, selections, characteristics, products) {
-  const updateValid = !!characteristics.find(({
-    id: cId,
-    values
-  }) => {
-    if (cId !== id) {
-      return false;
-    }
-    return !!values.find(({
-      id: vId
-    }) => vId === value);
-  });
-  if (!updateValid) {
-    // Input parameters are invalid.
-    return selections;
-  }
-
-  // Merge the just changed value into the previous selection.
-  const currentSelection = {
-    ...selections,
-    [id]: value
-  };
-
-  /**
-   * Determine if there are products for the current user selection.
-   */
-  const matches = products.filter(product => isMatch(product.characteristics, currentSelection));
-  if (matches.length === 1) {
-    // Product found for the current selection.
-    return {
-      ...matches[0].characteristics
-    };
-  }
-  if (!selections[id]) {
-    // Changed value wasn't set before.
-    return currentSelection;
-  }
-
-  // Find the current index.
-  const index = findSelectionIndex(characteristics, id);
-
-  /**
-   * When the given index is the same as the complete set
-   * of characteristics then there is nothing to reset.
-   */
-  if (index === characteristics.length - 1) {
-    return currentSelection;
-  }
-
-  // Find the selections after the given index.
-  const after = characteristics.slice(index + 1);
-
-  // Delete the found selections.
-  after.forEach(item => {
-    delete currentSelection[item.id];
-  });
-  return currentSelection;
-}
-/**
- * Preselect characteristics for variant
- * or pre-select the first available product
- * @param {string} [variantId=null] The selected variant
- * @param {{products: Object[], characteristics: Object[]}} [variants=null] All possible variants.
- * @return {Object}
- */
-export function selectCharacteristics({
-  variantId,
-  variants = {}
-}) {
-  if (!variants || !variants.products || !variants.products.length) {
-    return {};
-  }
-  if (variantId) {
-    const variant = variants.products.find(product => product.id === variantId) || {};
-    return {
-      ...variant.characteristics
-    };
-  }
-  // If product has only 1 variant preselect no matter if "preselect" is chosen or not.
-  if (variants.products.length === 1) {
-    return {
-      ...variants.products[0].characteristics
-    };
-  }
-  // Pre-selection is off
-  if (!preselectVariant) {
-    return {};
-  }
-  // Find the first selectable product by characteristics
-  return variants.characteristics.reduce((acc, char) => {
-    // Find the first char value with selectable products
-    const firstVal = char.values.find(val => {
-      // eslint-disable-next-line extra-rules/no-single-line-objects
-      const source = {
-        ...acc,
-        [char.id]: val.id
-      };
-      return variants.products.filter(p => isMatch(p.characteristics, source)).length > 0;
-    });
-    if (!firstVal) {
-      return acc;
-    }
-    // eslint-disable-next-line extra-rules/no-single-line-objects
-    return {
-      ...acc,
-      [char.id]: firstVal.id
-    };
-  }, {});
-}

package/components/RangeSlider/components/Handle/index.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styles from "./style";
-
-/**
- * The range slider handle component.
- * @param {Object} props The component properties
- * @param {boolean} props.active Whether this handle is currently touched or was recently touched.
- * @param {number} props.index The index of the handle.
- * @param {Function} props.onTouchStart The touch start event callback.
- * @param {Object} props.classNames (Optional) An additional style classes for the handle.
- * @returns {JSX}
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const RangeSliderHandle = ({
-  active,
-  index,
-  onTouchStart,
-  classNames
-}) => /*#__PURE__*/_jsx("div", {
-  className: `${classNames.handleOuter || ''} ${styles}`,
-  style: {
-    zIndex: Number(active) || 0
-  },
-  onTouchStart: event => onTouchStart(event, index),
-  children: /*#__PURE__*/_jsx("div", {
-    className: classNames.handleInner || ''
-  })
-});
-RangeSliderHandle.defaultProps = {
-  active: false,
-  classNames: {}
-};
-export default RangeSliderHandle;

package/components/RangeSlider/components/Handle/style.js

@@ -1,14 +0,0 @@
-import { css } from 'glamor';
-export default css({
-  top: '50%',
-  position: 'absolute',
-  ':first-child': {
-    left: 0,
-    transform: 'translate(-50%, -50%)'
-  },
-  ':last-child': {
-    left: 'auto',
-    right: 0,
-    transform: 'translate(50%, -50%)'
-  }
-});

package/components/RangeSlider/helper.js

@@ -1,85 +0,0 @@
-/**
- * The linear easing callback.
- * @param {number} relativeValue The relative value between [0...1].
- * @param {number} resolution The resolution, must be a value between [0,1...1].
- * @returns {number} The interpolated value.
- */
-const easeLinear = (relativeValue, resolution) => {
-  const inverseResolution = 1.0 / resolution;
-  return relativeValue * inverseResolution / inverseResolution;
-};
-
-/**
- * Generates a linear easing callback.
- * @param {number} resolution The discrete step size.
- * @returns {Function} The generated callback.
- */
-export const generateLinearEasingCallback = (resolution = 0.1) => relativeValue => easeLinear(relativeValue, resolution);
-
-/**
- * The exponential easing callback.
- * @param {number} relativeValue The relative value between [0...1].
- * @param {number} factor The exponential scale factor.
- * @returns {number} The interpolated value.
- */
-const easeExponential = (relativeValue, factor) => relativeValue ** factor;
-
-/**
- * Generates an exponential easing callback.
- * @param {number} factor The exponential scale factor.
- * @returns {Function} The generated callback.
- */
-export const generateExponentialEasingCallback = (factor = 2.5) => relativeValue => easeExponential(relativeValue, factor);
-
-/**
- * Converts a range of [0...1] into a style object.
- * @param {number} min A value in interval [0...1]
- * @param {number} max A value in interval [0...1]
- * @param {number} transitionDuration The duration of the transition.
- * @returns {Object} The generated style object
- */
-export const getRangeStyle = (min, max, transitionDuration) => ({
-  left: `${Math.min(1, Math.max(0, min)) * 100}%`,
-  right: `${(1 - Math.min(1, Math.max(0, max))) * 100}%`,
-  transition: transitionDuration > 0 ? `left ${transitionDuration}ms, right ${transitionDuration}ms` : null
-});
-
-/**
- * Shortcut for retrieving x position of a touch event.
- * @param {TouchEvent} event The TouchEvent
- * @returns {number} The x position
- */
-export const getTouchPositionX = event => event.touches[0].pageX;
-
-/**
- * Converts a relative slider value into an absolute value.
- * A relative value is a value between [0...1] indicating the position
- * on the slider given its absolute width.
- * An absolute value is a value in screen space coordinates. This value must be
- * between [0...offsetWidth] of the range slider.
- * @param {number} value The actual value.
- * @param {number} min The minimum.
- * @param {number} max The maximum.
- * @param {boolean} allowRealValues Whether the value should be rounded to the nearest integer.
- * @returns {number} The converted absolute value.
- */
-export const getAbsoluteValue = (value, min, max, allowRealValues = false) => {
-  const result = min + (max - min) * value;
-  return Math.min(max, Math.max(min, allowRealValues ? result : Math.round(result)));
-};
-
-/**
- * Converts an absolute slider value into a relative value.
- * An absolute value is a value in screen space coordinates. This value must be
- * between [0...offsetWidth] of the price range slider.
- * A relative value is a value between [0...1] indicating the position
- * on the slider given its absolute width.
- * @param {number} value The actual value.
- * @param {number} min The minimum.
- * @param {number} max The maximum.
- * @returns {number} The converted relative value.
- */
-export const getRelativeValue = (value, min, max) => {
-  const result = (value - min) / (max - min);
-  return Math.min(1, Math.max(0, result));
-};

package/components/RangeSlider/style.js

@@ -1,14 +0,0 @@
-import { css } from 'glamor';
-const outerRange = css({
-  minHeight: 1,
-  position: 'relative'
-}).toString();
-const range = css({
-  left: 0,
-  right: 0,
-  position: 'absolute'
-}).toString();
-export default {
-  outerRange,
-  range
-};

package/components/Select/components/Item/style.js

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

package/components/Select/style.js

@@ -1,17 +0,0 @@
-import { css } from 'glamor';
-const container = css({
-  margin: 0,
-  padding: 0
-}).toString();
-const selectHandle = css({
-  float: 'right'
-}).toString();
-const items = css({
-  position: 'absolute',
-  width: '100%'
-}).toString();
-export default {
-  container,
-  selectHandle,
-  items
-};

package/components/SelectBox/components/Item/style.js

@@ -1,7 +0,0 @@
-import { css } from 'glamor';
-export const item = css({
-  cursor: 'pointer'
-}).toString();
-export const selected = css({
-  fontWeight: 500
-});