@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

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

@@ -1,116 +0,0 @@
-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

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

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

@@ -1,189 +0,0 @@
-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

@@ -1,75 +0,0 @@
-.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

@@ -1,172 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

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

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

@@ -1,41 +0,0 @@
-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

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

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

@@ -1,31 +0,0 @@
-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;