@commercetools-frontend/experimental-components 0.0.2

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

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import {
+  renderApp,
+  fireEvent,
+} from '@commercetools-frontend/application-shell/test-utils';
+import SearchInput from './search-input';
+
+const createTestProps = (custom) => ({
+  onSubmit: jest.fn(),
+  ...custom,
+});
+
+describe('<SearchInput />', () => {
+  it('should render with a default placeholder if non is provided', async () => {
+    const props = createTestProps();
+    const rendered = renderApp(<SearchInput {...props} />);
+    await rendered.findByPlaceholderText('Search');
+  });
+
+  it('should render with a provided placeholder', async () => {
+    const props = createTestProps({ placeholder: 'enter something...' });
+    const rendered = renderApp(<SearchInput {...props} />);
+    await rendered.findByPlaceholderText('enter something...');
+  });
+
+  it('should allow specifying a label', async () => {
+    const props = createTestProps({ label: 'My label...' });
+    const rendered = renderApp(<SearchInput {...props} />);
+    await rendered.findByLabelText('My label...');
+  });
+
+  it('should render with an initialValue', async () => {
+    const props = createTestProps({ initialValue: 'hello' });
+    const rendered = renderApp(<SearchInput {...props} />);
+    await rendered.findByDisplayValue('hello');
+  });
+
+  it('should override input value with a provided one', async () => {
+    const props = createTestProps();
+    let changeInitialValue;
+    class Component extends React.Component {
+      state = {
+        value: 'foo',
+      };
+
+      render() {
+        changeInitialValue = (value) => this.setState({ value });
+        return <SearchInput {...props} initialValue={this.state.value} />;
+      }
+    }
+    const rendered = renderApp(<Component />);
+    await rendered.findByDisplayValue('foo');
+
+    changeInitialValue('bar');
+
+    await rendered.findByDisplayValue('bar');
+  });
+
+  it('should submit on search icon click', async () => {
+    const props = createTestProps({
+      onSubmit: jest.fn(),
+      initialValue: 'foo',
+      isGranular: false,
+    });
+    const rendered = renderApp(<SearchInput {...props} />);
+    fireEvent.click(rendered.getByTestId('search-button'));
+
+    expect(props.onSubmit).toHaveBeenCalledWith('foo', undefined);
+  });
+
+  it('should submit on hitting Enter', async () => {
+    const props = createTestProps({
+      onSubmit: jest.fn(),
+      initialValue: 'foo',
+      isGranular: false,
+    });
+    const rendered = renderApp(<SearchInput {...props} />);
+    fireEvent.keyDown(rendered.getByDisplayValue('foo'), {
+      key: 'Enter',
+      keyCode: 13,
+    });
+
+    expect(props.onSubmit).toHaveBeenCalledWith('foo', undefined);
+  });
+
+  it('should submit on change when `shouldSubmitOnInputChange` was true', async () => {
+    let onSubmit;
+    const waitForSubmit = new Promise((resolve) => {
+      onSubmit = resolve;
+    });
+
+    const props = createTestProps({
+      onSubmit,
+      shouldSubmitOnInputChange: true,
+    });
+
+    const rendered = renderApp(<SearchInput {...props} />);
+    const input = await rendered.findByPlaceholderText('Search');
+    fireEvent.change(input, { target: { value: 'entered value' } });
+
+    const submittedValue = await waitForSubmit;
+    expect(submittedValue).toBe('entered value');
+  });
+
+  it('should clear input on submit if `shouldClearOnSubmit` was true', async () => {
+    const props = createTestProps({
+      initialValue: 'foo',
+      shouldClearOnSubmit: true,
+    });
+
+    const rendered = renderApp(<SearchInput {...props} />);
+
+    fireEvent.click(rendered.getByTestId('search-button'));
+    await rendered.findByDisplayValue('');
+  });
+});

package/src/fields/throttled-field/index.js

@@ -0,0 +1 @@
+export { default } from './throttled-field';

package/src/fields/throttled-field/throttled-field.jsx

@@ -0,0 +1,189 @@
+import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+import Textarea from 'react-textarea-autosize';
+import has from 'lodash.has';
+import classnames from 'classnames';
+import { AccessibleHidden } from '@commercetools-frontend/ui-kit';
+import { filterDataAttributes } from '../../internal-index';
+import styles from './throttled-field.module.css';
+
+class ThrottledField extends PureComponent {
+  static displayName = 'ThrottledField';
+
+  static propTypes = {
+    autoComplete: PropTypes.string,
+    onChange: PropTypes.func,
+    onBlurValue: PropTypes.func,
+    onEnter: PropTypes.func,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    // Arbitrary time to delay network request in milliseconds.
+    // Fast typists may not get UI feedback until they stop typing.
+    throttleMS: PropTypes.number,
+    isValid: PropTypes.bool,
+    isGranular: PropTypes.bool,
+    as: PropTypes.oneOf(['text', 'number', 'textarea', 'password']),
+    style: PropTypes.oneOf(['primary', 'secondary']),
+    disabled: PropTypes.bool,
+    name: PropTypes.string,
+    label: PropTypes.string,
+    placeholder: PropTypes.string,
+    autoSize: PropTypes.bool,
+    autoFocus: PropTypes.bool,
+    inputRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  };
+
+  static defaultProps = {
+    as: 'text',
+    style: 'secondary',
+    throttleMS: 300,
+    isValid: true,
+    disabled: false,
+    autoSize: true,
+    autoFocus: false,
+    label: 'Throttled field',
+  };
+
+  state = {
+    draftValue:
+      this.props.value || this.props.value === 0 ? this.props.value : '',
+  };
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!has(nextProps, 'value')) return;
+
+    if (!nextProps.value && nextProps.value !== 0) {
+      // let new value from props take precedence over pending updates
+      this.clearPendingUpdates();
+      this.setState({ draftValue: '' });
+    } else if (nextProps.value !== this.state.draftValue) {
+      // let new value from props take precedence over pending updates
+      this.clearPendingUpdates();
+      this.setState({ draftValue: nextProps.value });
+    }
+  }
+
+  componentWillUnmount() {
+    this.clearPendingUpdates();
+  }
+
+  clearPendingUpdates = () => {
+    clearTimeout(this.changeTimeout);
+    clearTimeout(this.blurTimeout);
+    this.changeTimeout = null;
+    this.blurTimeout = null;
+  };
+
+  handleChange = (event) => {
+    // The `SyntheticEvent` is pooled by default for perf reasons.
+    // See https://facebook.github.io/react/docs/events.html#event-pooling
+    // To access the event in an async way we need to persist it.
+    event.persist();
+    this.setState({ draftValue: event.target.value });
+
+    this.doDelayedUpdate(this.props.onChange, event, 'change');
+  };
+
+  handleEnter = (event) => {
+    if (event.keyCode !== 13) return;
+
+    if (this.changeTimeout) {
+      // Since there are still are some pending updates that are not sent to the
+      // parent yet we need to call the update here explicitly and clear the
+      // pending updates
+      this.props.onChange({ target: { value: this.state.draftValue } });
+      // we can savely clear the timeout and thus abort all pending changes
+      // because we just update the parent with the current state
+      clearTimeout(this.changeTimeout);
+      this.changeTimeout = null;
+    }
+    this.props.onEnter(this.state.draftValue);
+  };
+
+  handleBlur = (event) => {
+    // The `SyntheticEvent` is pooled by default for perf reasons.
+    // See https://facebook.github.io/react/docs/events.html#event-pooling
+    // To access the event in an async way we need to persist it.
+    if (this.props.onBlurValue) {
+      event.persist();
+      this.doDelayedUpdate(
+        (e) => this.props.onBlurValue(e.target.value),
+        event,
+        'blur'
+      );
+    }
+  };
+
+  doDelayedUpdate = (updateFunction, event, eventType) => {
+    const self = this;
+    // TODO: can't we just use one variable?
+    const timeoutKey = `${eventType}Timeout`;
+
+    clearTimeout(this[timeoutKey]);
+
+    this[timeoutKey] = setTimeout(() => {
+      updateFunction.call(self, event);
+      this[timeoutKey] = null;
+    }, this.props.throttleMS);
+  };
+
+  render() {
+    const commonProps = {
+      value: this.state.draftValue,
+      autoComplete: this.props.autoComplete,
+      onChange: this.handleChange,
+      onBlur: this.handleBlur,
+      disabled: this.props.disabled,
+      name: this.props.name,
+      placeholder: this.props.placeholder,
+      autoFocus: this.props.autoFocus,
+
+      ...(this.props.onEnter ? { onKeyDown: this.handleEnter } : {}),
+
+      ...filterDataAttributes(this.props),
+    };
+
+    const inputId = `throttled-field-${this.props.name}`;
+
+    return (
+      <>
+        <AccessibleHidden>
+          <label htmlFor={inputId}>{this.props.label}</label>
+        </AccessibleHidden>
+        {do {
+          if (this.props.as === 'textarea') {
+            <Textarea
+              {...commonProps}
+              id={inputId}
+              className={classnames(
+                styles.textarea,
+                styles[`textarea-${this.props.style}`],
+                {
+                  [styles.invalid]: !this.props.isValid,
+                  [styles.disabled]: this.props.disabled,
+                }
+              )}
+              rows={1}
+              maxRows={this.props.autoSize ? undefined : 1}
+              cacheMeasurements={true}
+            />;
+          } else {
+            <input
+              {...commonProps}
+              id={inputId}
+              ref={this.props.inputRef}
+              type={this.props.as}
+              className={classnames(styles[`input-${this.props.style}`], {
+                [styles.invalid]: !this.props.isValid,
+                [styles.disabled]: this.props.disabled,
+                [styles.granular]: this.props.isGranular,
+              })}
+            />;
+          }
+        }}
+      </>
+    );
+  }
+}
+
+export default ThrottledField;

package/src/fields/throttled-field/throttled-field.module.css

@@ -0,0 +1,75 @@
+.size {
+  width: 100%;
+  height: inherit;
+}
+
+.input-text {
+  transition: 0.2s ease;
+  border-radius: 6px;
+  border-style: solid;
+  border-width: 1px;
+  color: var(--color-solid);
+  font-weight: 500;
+  font-size: 1rem;
+  font-family: 'Open Sans', sans-serif !important;
+  padding: 7.5px 10px;
+  outline: none;
+  box-shadow: none;
+  appearance: none;
+}
+
+.input-secondary {
+  composes: input-text;
+  composes: size;
+  background-color: var(--color-neutral-95);
+  border-color: var(--color-surface);
+  width: 100%;
+}
+
+.input-primary {
+  composes: input-text;
+  composes: size;
+  border-color: var(--color-neutral);
+  background-color: var(--color-surface);
+}
+
+.textarea {
+  width: 100%;
+  min-height: 36px;
+  resize: vertical;
+}
+
+.textarea-primary {
+  composes: textarea;
+  composes: input-text;
+  border-color: var(--color-neutral);
+  background-color: var(--color-surface);
+}
+
+.textarea-secondary {
+  composes: textarea;
+  composes: input-text;
+  background-color: var(--color-neutral-95);
+  border-color: var(--color-surface);
+  width: 100%;
+}
+
+.invalid {
+  /* this needs !important because react-select has a :focus style that
+    stops the border colour being set unless the element is blurred */
+  border-color: var(--color-error) !important;
+  border: 1px solid;
+}
+
+.disabled {
+  cursor: not-allowed;
+  background-color: var(--color-accent-98);
+  color: var(--color-solid);
+  opacity: 1; /* fix for mobile safari */
+}
+
+.granular {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin-left: 0;
+}

package/src/fields/throttled-field/throttled-field.spec.js

@@ -0,0 +1,172 @@
+import { shallow } from 'enzyme';
+import Textarea from 'react-textarea-autosize';
+import ThrottledField from './throttled-field';
+
+const createTestProps = (props) => ({
+  onChange: jest.fn(),
+  onBlurValue: jest.fn(),
+  onEnter: jest.fn(),
+  value: undefined,
+  // Arbitrary time to delay network request in milliseconds.
+  // Fast typists may not get UI feedback until they stop typing.
+  throttleMS: 300,
+  isValid: true,
+  as: 'text',
+  style: 'secondary',
+  disabled: false,
+  name: undefined,
+  placeholder: undefined,
+  autoSize: true,
+  autoFocus: true,
+  ...props,
+});
+
+const supportedInputTypes = ['text', 'number', 'password'];
+
+describe('rendering', () => {
+  supportedInputTypes.forEach((type) => {
+    it(`render component as ${type} type`, () => {
+      const props = createTestProps({ as: type });
+      const wrapper = shallow(<ThrottledField {...props} />);
+
+      expect(wrapper.find('input').prop('type')).toBe(type);
+    });
+  });
+
+  describe('rendering as textarea type', () => {
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+      props = createTestProps({ as: 'textarea' });
+      wrapper = shallow(<ThrottledField {...props} />);
+    });
+
+    it('renders component as textarea type', () => {
+      expect(wrapper.find(Textarea)).toHaveLength(1);
+      expect(wrapper.find(Textarea).prop('rows')).toBe(1);
+    });
+
+    it('render component as textarea type with autosize', () => {
+      expect(wrapper.find(Textarea).prop('maxRows')).toBeUndefined();
+    });
+
+    it('render component as textarea type without autosize', () => {
+      wrapper.setProps({
+        autoSize: false,
+      });
+      expect(wrapper.find(Textarea).prop('maxRows')).toBe(1);
+    });
+  });
+
+  describe('managing state', () => {
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+      props = createTestProps({ value: undefined });
+      wrapper = shallow(<ThrottledField {...props} />);
+    });
+
+    it('does not change the state when empty value', () => {
+      wrapper.setProps({
+        // no `value` property
+      });
+      expect(wrapper.state('draftValue')).toBe('');
+
+      wrapper.setProps({
+        value: 'foo',
+      });
+      expect(wrapper.state('draftValue')).toBe('foo');
+
+      wrapper.setProps({
+        value: undefined,
+      });
+      expect(wrapper.state('draftValue')).toBe('');
+    });
+
+    it('dchanges the state when value', () => {
+      wrapper.setProps({
+        value: 'foo',
+      });
+      expect(wrapper.state('draftValue')).toBe('foo');
+    });
+  });
+});
+
+describe('callbacks', () => {
+  let props;
+  let wrapper;
+  beforeEach(() => {
+    props = createTestProps();
+    wrapper = shallow(<ThrottledField {...props} />);
+  });
+  describe('onEnter', () => {
+    beforeEach(() => {
+      wrapper.setState({ draftValue: 'bar' });
+      wrapper.instance().handleEnter({ keyCode: 13 });
+    });
+    describe('with changeTimeout', () => {
+      const originalClearTimeout = window.clearTimeout;
+      beforeEach(() => {
+        wrapper.instance().changeTimeout = 'timeout-id-1';
+        Object.defineProperty(window, 'clearTimeout', {
+          value: jest.fn(),
+          configurable: true,
+        });
+        wrapper.instance().handleEnter({ keyCode: 13 });
+      });
+      afterEach(() => {
+        Object.defineProperty(window, 'clearTimeout', {
+          value: originalClearTimeout,
+          configurable: true,
+        });
+      });
+      it('calls onChange', () => {
+        expect(props.onChange).toHaveBeenLastCalledWith({
+          target: { value: 'bar' },
+        });
+      });
+      it('clears the timeout', () => {
+        expect(window.clearTimeout).toHaveBeenLastCalledWith('timeout-id-1');
+      });
+    });
+    it('calls onEnter callback with argument', () => {
+      expect(props.onEnter).toHaveBeenLastCalledWith('bar');
+    });
+  });
+
+  it('calls onChange callback with argument', () => {
+    const mockEvent = {
+      target: { value: 'bar' },
+      persist: jest.fn(),
+    };
+    wrapper.find('input').simulate('change', mockEvent);
+    expect(wrapper.state('draftValue')).toBe('bar');
+    expect(mockEvent.persist).toHaveBeenCalled();
+
+    setTimeout(() => {
+      expect(props.onChange).toHaveBeenLastCalledWith(mockEvent);
+    }, props.throttleMS);
+  });
+
+  describe('when there is a pending update', () => {
+    beforeEach(() => {
+      wrapper.instance().changeTimeout = setTimeout(() => {}, 1000);
+      wrapper.instance().blurTimeout = setTimeout(() => {}, 1000);
+    });
+    describe('when the component receives new props', () => {
+      beforeEach(() => {
+        wrapper.instance().setState = jest.fn();
+        wrapper
+          .instance()
+          .UNSAFE_componentWillReceiveProps({ value: 'next-foo' });
+      });
+      it('should ignore the pending update', () => {
+        expect(wrapper.instance().setState).toHaveBeenCalledTimes(1);
+        expect(wrapper.instance().blurTimeout).toBe(null);
+        expect(wrapper.instance().changeTimeout).toBe(null);
+      });
+    });
+  });
+});

package/src/hocs/index.js

@@ -0,0 +1,9 @@
+export { default as injectDataTablePaginationState } from './inject-data-table-pagination-state';
+export { default as injectNotifications } from './inject-notifications';
+export { default as wrapDisplayName } from './wrap-display-name';
+export { default as withProps } from './with-props';
+export { default as withRedirectTo } from './with-redirect-to';
+export { default as injectModalState } from './inject-modal-state';
+export { default as injectToggleState } from './inject-toggle-state';
+export { default as injectStorage } from './inject-storage';
+export { getDisplayName, setDisplayName } from './utils';

package/src/hocs/inject-data-table-pagination-state/index.js

@@ -0,0 +1 @@
+export { default } from './inject-data-table-pagination-state';

package/src/hocs/inject-data-table-pagination-state/inject-data-table-pagination-state.jsx

@@ -0,0 +1,41 @@
+import {
+  usePaginationState,
+  useDataTableSortingState,
+} from '@commercetools-frontend/ui-kit';
+import wrapDisplayName from '../wrap-display-name';
+
+/**
+ *
+ * @param { page, perPage, tableSorting: { key, order } } initialValues
+ * @returns
+ */
+const injectDataTablePaginationState = (initialValues) => (Component) => {
+  const WithDataTablePaginationState = (props) => {
+    const { page, perPage } = usePaginationState({
+      page: initialValues?.page,
+      perPage: initialValues?.perPage,
+    });
+    const tableSorting = useDataTableSortingState({
+      key: initialValues?.tableSorting?.key,
+      order: initialValues?.tableSorting?.order,
+    });
+
+    return (
+      <Component
+        {...props}
+        dataTablePaginationState={{
+          page,
+          perPage,
+          tableSorting,
+        }}
+      />
+    );
+  };
+  WithDataTablePaginationState.displayName = wrapDisplayName(
+    WithDataTablePaginationState,
+    'WithDataTablePaginationState'
+  );
+  return WithDataTablePaginationState;
+};
+
+export default injectDataTablePaginationState;

package/src/hocs/inject-modal-state/index.js

@@ -0,0 +1 @@
+export { default } from './inject-modal-state';

package/src/hocs/inject-modal-state/inject-modal-state.jsx

@@ -0,0 +1,31 @@
+import { useModalState } from '@commercetools-frontend/application-components';
+import wrapDisplayName from '../wrap-display-name';
+
+const defaultOptions = {
+  propName: 'modalState',
+  isInitiallyOpen: false,
+};
+
+const injectModalState = (options) => (Component) => {
+  const mergedOptions = {
+    ...defaultOptions,
+    ...options,
+  };
+
+  const WithModalState = (props) => {
+    const modalState = useModalState(mergedOptions.isInitiallyOpen);
+
+    return (
+      <Component {...props} {...{ [mergedOptions.propName]: modalState }} />
+    );
+  };
+
+  WithModalState.displayName = wrapDisplayName(
+    WithModalState,
+    'WithModalState'
+  );
+
+  return WithModalState;
+};
+
+export default injectModalState;