@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

package/src/fields/numeric-format-input/numeric-format-input.spec.js

@@ -1,323 +0,0 @@
-import { shallow } from 'enzyme';
-import { NumericFormatInput, withPropsForMoney } from './numeric-format-input';
-
-const createTestProps = (props) => ({
-  value: 0.01,
-  formatNumber: jest.fn(),
-  onChangeValue: jest.fn(),
-  onFocus: jest.fn(),
-  onBlurValue: jest.fn(),
-  onInvalidValue: jest.fn(),
-  numberFormatType: 'number',
-  numberFormat: 'en',
-  placeholder: 'Custom Placeholder',
-  name: 'custom-name',
-  className: 'custom-class',
-  'data-testid': 'testable-input',
-  ...props,
-});
-
-describe('rendering', () => {
-  let props;
-  let wrapper;
-  beforeEach(() => {
-    props = createTestProps();
-    wrapper = shallow(<NumericFormatInput {...props} />);
-  });
-  it('should render a Cleave component', () => {
-    expect(wrapper).toRender('Cleave');
-  });
-  describe('props', () => {
-    let cleave;
-    beforeEach(() => {
-      cleave = wrapper.find('Cleave');
-    });
-    it('should pass placeholder', () => {
-      expect(cleave).toHaveProp('placeholder', 'Custom Placeholder');
-    });
-    it('should pass htmlRef', () => {
-      expect(cleave).toHaveProp('htmlRef', wrapper.instance().registerInputRef);
-    });
-    it('should pass options', () => {
-      expect(cleave.prop('options')).toEqual({
-        numeral: true,
-        numeralThousandsGroupStyle: 'thousand',
-        numeralDecimalMark: '.',
-        delimiter: ',',
-        numeralDecimalScale: 20,
-        numeralIntegerScale: 0,
-      });
-    });
-    it('should pass name', () => {
-      expect(cleave).toHaveProp('name', 'custom-name');
-    });
-    it('should pass className', () => {
-      expect(cleave).toHaveProp('className', 'custom-class');
-    });
-    it('should pass onChange', () => {
-      expect(cleave).toHaveProp('onChange', wrapper.instance().handleChange);
-    });
-    it('should pass onInit', () => {
-      expect(cleave).toHaveProp('onInit', wrapper.instance().handleInit);
-    });
-    it('should pass onBlur', () => {
-      expect(cleave).toHaveProp('onBlur', wrapper.instance().handleBlur);
-    });
-    it('should pass onFocus', () => {
-      expect(cleave).toHaveProp('onFocus', props.onFocus);
-    });
-    it('should pass data-* props', () => {
-      expect(cleave).toHaveProp('data-testid', 'testable-input');
-    });
-  });
-});
-
-describe('lifecycle', () => {
-  let props;
-  let wrapper;
-  beforeEach(() => {
-    props = createTestProps({ value: 100 });
-    wrapper = shallow(<NumericFormatInput {...props} />);
-  });
-  describe('componentWillReceiveProps', () => {
-    beforeEach(() => {
-      wrapper.instance().setValue = jest.fn();
-    });
-    it("should not update the value if it hasn't changed", () => {
-      wrapper.instance().UNSAFE_componentWillReceiveProps({ value: 100 });
-      expect(wrapper.instance().setValue).toHaveBeenCalledTimes(0);
-    });
-    it('should update the value if it has changed', () => {
-      wrapper.instance().UNSAFE_componentWillReceiveProps({ value: 99 });
-      expect(wrapper.instance().setValue).toHaveBeenCalledTimes(1);
-      expect(wrapper.instance().setValue).toHaveBeenCalledWith(99);
-    });
-  });
-  describe('setValue', () => {
-    beforeEach(() => {
-      wrapper.instance().owner = { setRawValue: jest.fn() };
-    });
-    it('should not update if the value is NaN', () => {
-      wrapper.instance().UNSAFE_componentWillReceiveProps({ value: NaN });
-      expect(wrapper.instance().owner.setRawValue).toHaveBeenCalledTimes(0);
-    });
-    it('should update if the value is undefined', () => {
-      wrapper.instance().UNSAFE_componentWillReceiveProps({ value: undefined });
-      expect(wrapper.instance().owner.setRawValue).toHaveBeenCalledTimes(1);
-    });
-    it('should update if the value is null', () => {
-      wrapper.instance().UNSAFE_componentWillReceiveProps({ value: null });
-      expect(wrapper.instance().owner.setRawValue).toHaveBeenCalledTimes(1);
-    });
-    it('should not update if the value is a string', () => {
-      wrapper.instance().UNSAFE_componentWillReceiveProps({ value: 'foo' });
-      expect(wrapper.instance().owner.setRawValue).toHaveBeenCalledTimes(0);
-    });
-  });
-});
-
-describe('interaction', () => {
-  let props;
-  let wrapper;
-  let owner;
-  beforeEach(() => {
-    owner = {
-      setRawValue: jest.fn(),
-    };
-    props = createTestProps({
-      formatNumber: () => 'formatted number',
-    });
-    wrapper = shallow(<NumericFormatInput {...props} />);
-    wrapper.instance().owner = owner;
-  });
-  describe('handleBlur', () => {
-    beforeEach(() => {
-      wrapper.instance().handleBlur();
-    });
-    it('should set the raw value to the formatted number', () => {
-      expect(owner.setRawValue).toHaveBeenLastCalledWith('formatted number');
-    });
-    it('should call onBlurValue', () => {
-      expect(props.onBlurValue).toHaveBeenCalledTimes(1);
-    });
-  });
-  describe('handleInit', () => {
-    beforeEach(() => {
-      wrapper.instance().handleInit(owner);
-    });
-    it('should set the raw value to the formatted number', () => {
-      expect(owner.setRawValue).toHaveBeenLastCalledWith('formatted number');
-    });
-  });
-  describe('handleChange', () => {
-    describe('new value', () => {
-      beforeEach(() => {
-        wrapper.instance().handleChange({ target: { rawValue: 11000.01 } });
-      });
-      it('should call onChangeValue', () => {
-        expect(props.onChangeValue).toHaveBeenLastCalledWith(11000.01);
-        expect(wrapper.instance().parsedValue).toBe(11000.01);
-      });
-    });
-    describe('same value', () => {
-      beforeEach(() => {
-        wrapper.instance().parsedValue = 11000.01;
-        wrapper.instance().handleChange({ target: { rawValue: 11000.01 } });
-      });
-      it("should not call onChangeValue if the value hasn't changed", () => {
-        expect(props.onChangeValue).toHaveBeenCalledTimes(0);
-      });
-    });
-  });
-});
-
-describe('withPropsForMoney', () => {
-  describe('money type', () => {
-    const onChangeValue = jest.fn();
-    const withProps = withPropsForMoney({
-      numberFormatType: 'money',
-      value: 100,
-      onChangeValue,
-    });
-    it('should divide the value by 100', () => {
-      expect(withProps).toEqual({
-        value: 1,
-        formatNumber: expect.any(Function),
-        onChangeValue: expect.any(Function),
-        numeralDecimalScale: 2,
-      });
-    });
-    describe('formatNumber', () => {
-      it('should fix the number to two decimals', () => {
-        expect(withProps.formatNumber(0)).toEqual('0.00');
-      });
-    });
-    describe('onChangeValue', () => {
-      it('should multiply the money by 100 to be cent', () => {
-        withProps.onChangeValue(0.1);
-        expect(onChangeValue).toHaveBeenLastCalledWith(10);
-      });
-      describe('when the value is 2.49', () => {
-        it('should cast the cent amount to int', () => {
-          withProps.onChangeValue(2.49);
-          expect(onChangeValue).toHaveBeenLastCalledWith(249);
-        });
-      });
-      describe('when the value is 2399.99', () => {
-        beforeEach(() => {
-          withProps.onChangeValue(2399.99);
-        });
-        it('should cast the cent amount to int', () => {
-          expect(onChangeValue).toHaveBeenLastCalledWith(239999);
-        });
-        // This test is added as a reference that this bug has re-occured
-        // We want to make sure that the centAmount value is rounded to the closest
-        // decimal value during conversion
-        // ref: https://sphere.atlassian.net/browse/MC-1595
-        // ref: https://github.com/commercetools/merchant-center-frontend/pull/770
-        it('should not floor the cent amount', () => {
-          expect(onChangeValue).not.toHaveBeenLastCalledWith(239998);
-        });
-      });
-    });
-  });
-  describe('number type', () => {
-    it('should not change any props', () => {
-      const withProps = withPropsForMoney({ numberFormatType: 'number' });
-      expect(withProps).toEqual({});
-    });
-  });
-});
-
-describe('onChangeValue', () => {
-  let props;
-  let wrapper;
-  beforeEach(() => {
-    props = createTestProps();
-    wrapper = shallow(<NumericFormatInput {...props} />);
-  });
-  describe('with invalid values', () => {
-    describe('with an empty value', () => {
-      beforeEach(() => {
-        const event = {
-          target: {
-            rawValue: '',
-          },
-        };
-        wrapper.instance().handleChange(event);
-      });
-      it('should call `onChangeValue`', () => {
-        expect(props.onChangeValue).toHaveBeenCalledTimes(1);
-      });
-      it('should call `onChangeValue` with `undefined`', () => {
-        expect(props.onChangeValue).toHaveBeenLastCalledWith(undefined);
-      });
-    });
-    describe('with a minus', () => {
-      beforeEach(() => {
-        const event = {
-          target: {
-            rawValue: '-',
-          },
-        };
-        wrapper.instance().handleChange(event);
-      });
-      it('should call `onChangeValue`', () => {
-        expect(props.onChangeValue).toHaveBeenCalledTimes(1);
-      });
-      it('should call `onChangeValue` with `undefined`', () => {
-        expect(props.onChangeValue).toHaveBeenLastCalledWith(undefined);
-      });
-    });
-    describe('with alphabetic characters', () => {
-      beforeEach(() => {
-        const event = {
-          target: {
-            rawValue: 'abcdefg',
-          },
-        };
-        wrapper.instance().handleChange(event);
-      });
-      it('should call `onChangeValue`', () => {
-        expect(props.onChangeValue).toHaveBeenCalledTimes(1);
-      });
-      it('should call `onChangeValue` with `undefined`', () => {
-        expect(props.onChangeValue).toHaveBeenLastCalledWith(undefined);
-      });
-    });
-  });
-  describe('with valid values', () => {
-    describe('with a number-ish value', () => {
-      beforeEach(() => {
-        const event = {
-          target: {
-            rawValue: '1450,30',
-          },
-        };
-        wrapper.instance().handleChange(event);
-      });
-      it('should call `onChangeValue`', () => {
-        expect(props.onChangeValue).toHaveBeenCalledTimes(1);
-      });
-      it('should call `onChangeValue` with `-1450`', () => {
-        expect(props.onChangeValue).toHaveBeenLastCalledWith(1450);
-      });
-    });
-    describe('with a negative value', () => {
-      beforeEach(() => {
-        const event = {
-          target: {
-            rawValue: '-999',
-          },
-        };
-        wrapper.instance().handleChange(event);
-      });
-      it('should call `onChangeValue`', () => {
-        expect(props.onChangeValue).toHaveBeenCalledTimes(1);
-      });
-      it('should call `onChangeValue` with `-999  `', () => {
-        expect(props.onChangeValue).toHaveBeenLastCalledWith(-999);
-      });
-    });
-  });
-});

package/src/fields/search-input/index.js

@@ -1 +0,0 @@
-export { default } from './search-input';

package/src/fields/search-input/messages.js

@@ -1,14 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  buttonLabel: {
-    id: 'SearchInput.buttonLabel',
-    description: 'Label for "Search" button.',
-    defaultMessage: 'Search',
-  },
-  placeholder: {
-    id: 'SearchInput.placeholder',
-    description: 'Placeholder for "Search" input field',
-    defaultMessage: 'Search',
-  },
-});

package/src/fields/search-input/search-input.jsx

@@ -1,202 +0,0 @@
-import {
-  CloseIcon,
-  SearchIcon,
-  SecondaryIconButton,
-} from '@commercetools-frontend/ui-kit';
-import classnames from 'classnames';
-import { deepEqual } from 'fast-equals';
-import flowRight from 'lodash.flowright';
-import PropTypes from 'prop-types';
-import { Component } from 'react';
-import { injectIntl } from 'react-intl';
-import requiredIf from 'react-required-if';
-import keepDisplayName from '../../components/keep-display-name';
-import withMouseOverState from '../../components/with-mouse-over-state';
-
-import ThrottledField from '../throttled-field';
-import messages from './messages';
-import styles from './search-input.module.css';
-
-export class SearchInput extends Component {
-  static displayName = 'SearchInput';
-
-  static propTypes = {
-    initialValue: PropTypes.string,
-    onSubmit: PropTypes.func.isRequired,
-    onReset: PropTypes.func.isRequired,
-    onBlur: PropTypes.func,
-    shouldSubmitOnInputChange: PropTypes.bool,
-    placeholder: PropTypes.string,
-    blockClassName: PropTypes.string,
-    containerClassName: PropTypes.string,
-    throttleMS: PropTypes.number,
-    onChange: PropTypes.func,
-    disabled: PropTypes.bool,
-    enableDisabledStyle: PropTypes.bool,
-    isGranular: PropTypes.bool,
-    shouldClearOnSubmit: PropTypes.bool,
-    inputRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-    iconColor: PropTypes.string,
-    testId: PropTypes.string,
-    label: PropTypes.string,
-    searchMode: requiredIf(PropTypes.string, (props) => props.isGranular),
-
-    // HoC
-    intl: PropTypes.shape({ formatMessage: PropTypes.func.isRequired })
-      .isRequired,
-    handleMouseOver: PropTypes.func.isRequired,
-    handleMouseOut: PropTypes.func.isRequired,
-    isMouseOver: PropTypes.bool.isRequired,
-  };
-
-  static defaultProps = {
-    throttleMS: 300,
-    onReset: () => null,
-    label: 'Search input',
-    onChange: () => null,
-  };
-
-  state = {
-    initialValue: this.props.initialValue,
-    text: this.props.initialValue || '',
-  };
-
-  shouldComponentUpdate(nextProps, nextState) {
-    // ignore state, since it is only use to keep track of the text in the child
-    // component, in order to have it ready when the submit button is pressed
-    return (
-      !deepEqual(this.props, nextProps, { strict: true }) ||
-      nextState.text !== this.state.text
-    );
-  }
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (prevState.initialValue !== nextProps.initialValue) {
-      return {
-        initialValue: nextProps.initialValue,
-        text: nextProps.initialValue || '',
-      };
-    }
-    return null;
-  }
-
-  handleInputChange = (event) => {
-    const {
-      target: { value },
-    } = event;
-    this.setState({ text: value }, () => {
-      if (this.props.shouldSubmitOnInputChange)
-        this.props.onSubmit(value, this.props.searchMode);
-      if (this.props.onChange) this.props.onChange(value);
-    });
-  };
-
-  handleEnter = (value) => {
-    this.setState({ text: this.props.shouldClearOnSubmit ? '' : value });
-    this.props.onSubmit(value, this.props.searchMode);
-  };
-
-  handleSubmit = () => {
-    this.props.onSubmit(this.state.text, this.props.searchMode);
-    this.props.shouldClearOnSubmit && this.setState({ text: '' });
-  };
-
-  handleClear = () => {
-    this.inputRef?.focus();
-    this.props.onChange(null);
-    this.props.onReset();
-    this.setState({ text: '' });
-  };
-
-  setInputRef = (inputRef) => {
-    this.inputRef = inputRef;
-  };
-
-  render() {
-    return (
-      <div
-        className={classnames(this.props.blockClassName, styles.block)}
-        data-track-component="Search"
-      >
-        <div
-          className={classnames(
-            this.props.containerClassName,
-            styles.container
-          )}
-        >
-          <div
-            className={classnames(styles['input-container'], {
-              [styles['input-container-hoverable']]: !this.props.disabled,
-              [styles['input-container-disabled']]:
-                this.props.disabled && this.props.enableDisabledStyle,
-              [styles['input-container-granular']]: this.props.isGranular,
-            })}
-          >
-            <ThrottledField
-              style="primary"
-              name="search-text"
-              data-testid={this.props.testId || 'search-input'}
-              value={this.state.text}
-              label={this.props.label}
-              placeholder={
-                this.props.placeholder ||
-                this.props.intl.formatMessage(messages.placeholder)
-              }
-              inputRef={this.props.inputRef || this.setInputRef}
-              data-track-component="Text"
-              data-track-event="change"
-              onChange={this.handleInputChange}
-              onEnter={this.handleEnter}
-              onBlurValue={this.props.onBlur}
-              throttleMS={this.props.throttleMS}
-              disabled={this.props.disabled}
-              isGranular={this.props.isGranular}
-            />
-          </div>
-          {this.state.text && (
-            <SecondaryIconButton
-              className={classnames(styles['clear-icon-container'], {
-                [styles['clear-icon-container-granular']]:
-                  this.props.isGranular,
-              })}
-              icon={<CloseIcon size="medium" />}
-              label="clear-button"
-              onClick={this.handleClear}
-            />
-          )}
-          <div
-            data-testid="search-button"
-            className={classnames(styles['search-icon-container'], {
-              [styles['search-icon-container-hoverable']]: !this.props.disabled,
-              [styles['search-icon-container-granular']]: this.props.isGranular,
-            })}
-            onClick={this.props.disabled ? null : this.handleSubmit}
-            label="search-button"
-            data-track-component="Button"
-            data-track-event="click"
-            onMouseOver={this.props.handleMouseOver}
-            onMouseOut={this.props.handleMouseOut}
-          >
-            <SearchIcon
-              color={
-                this.props.iconColor ||
-                (this.props.isMouseOver && !this.props.disabled)
-                  ? 'primary'
-                  : this.props.enableDisabledStyle
-                  ? 'neutral60'
-                  : 'solid'
-              }
-              size="big"
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default flowRight(
-  keepDisplayName(SearchInput),
-  withMouseOverState,
-  injectIntl
-)(SearchInput);

package/src/fields/search-input/search-input.module.css

@@ -1,75 +0,0 @@
-.block {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: flex-start;
-  width: 100%;
-  max-width: 800px;
-}
-
-.container {
-  position: relative;
-  flex-grow: 1;
-}
-
-.input-container {
-  height: var(--spacing-xl);
-}
-
-.input-container > input {
-  padding-right: calc(var(--spacing-xl) * 2);
-  border-color: var(--color-neutral-60);
-}
-
-.input-container-disabled > input {
-  border-color: var(--color-neutral);
-}
-
-.input-container-hoverable > input:hover {
-  border-color: var(--color-primary);
-}
-
-.input-container-granular {
-  composes: input-container;
-  border-color: var(--color-primary);
-  position: relative;
-  right: 6px;
-}
-
-.search-icon-container {
-  background-color: transparent;
-  border-color: transparent;
-  position: absolute;
-  right: 9px;
-  top: 5px;
-}
-
-.clear-icon-container {
-  background-color: transparent;
-  border-color: transparent;
-  position: absolute;
-  right: 36px;
-  top: 8px;
-  z-index: 2;
-}
-
-.clear-icon-container-granular {
-  composes: clear-icon-container;
-  right: 41px;
-}
-
-.search-icon-container-hoverable {
-  cursor: pointer;
-}
-
-.search-icon-container-granular {
-  right: 15px;
-}
-
-.hidden {
-  display: none !important;
-}
-
-.action {
-  flex-shrink: 1;
-  margin-left: var(--spacing-s);
-}