@commercetools-frontend/experimental-components 0.0.2

package/src/components/store-select-input/store-select-input.spec.js

@@ -0,0 +1,124 @@
+import { setupServer } from 'msw/node';
+import {
+  renderApp,
+  fireEvent,
+  screen,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { buildGraphqlList } from '@commercetools-test-data/core';
+import { Store } from '@commercetools-local/test-data';
+import { LocalizedString } from '@commercetools-test-data/commons';
+import StoreSelectInput from './store-select-input';
+import { useTotalNumberOfStoresFetcherHandlers as totalNumberOfStoresFetcherHandlers } from './hooks/use-total-number-of-stores-fetcher';
+import { storesListConnectorMockHandlers } from '../../internal-index';
+
+const createTestProps = (custom) => ({
+  projectKey: 'context-playground',
+  id: 'store-select-input-id',
+  name: 'store-select-input',
+  isClearable: true,
+  onChange: jest.fn(),
+  onError: jest.fn(),
+  ...custom,
+});
+
+const berlinStoreName = 'Berlin Store';
+const berlinStoreKey = 'berlin-store';
+const localizedBerlinStoreName = LocalizedString.presets
+  .empty()
+  .en(berlinStoreName);
+const brandenburgStoreKey = 'brandenburg-store';
+const localizedBrandenburgStoreName = LocalizedString.presets.empty();
+const berlinStore = Store.random()
+  .key(berlinStoreKey)
+  .name(localizedBerlinStoreName)
+  .distributionChannelsRef([]);
+const brandenburgStore = Store.random()
+  .key(brandenburgStoreKey)
+  .name(localizedBrandenburgStoreName)
+  .distributionChannelsRef([]);
+// stores list
+const germanStoresList = buildGraphqlList([berlinStore, brandenburgStore], {
+  name: 'Store',
+  total: 2,
+});
+const mockServer = setupServer(
+  totalNumberOfStoresFetcherHandlers.TotalNumberOfStores.all(2),
+  storesListConnectorMockHandlers.StoresList.all(germanStoresList)
+);
+
+afterEach(() => {
+  mockServer.resetHandlers();
+});
+beforeAll(() => {
+  mockServer.listen({ onUnhandledRequest: 'error' });
+});
+afterAll(() => {
+  mockServer.close();
+});
+
+const renderMe = (props) => {
+  const testProps = createTestProps(props);
+  return renderApp(
+    <>
+      <label htmlFor="store-select-input-id">Stores</label>
+      <StoreSelectInput {...testProps} />
+    </>
+  );
+};
+
+describe('rendering', () => {
+  describe('when there are no stores in the project', () => {
+    it('should render empty input', async () => {
+      mockServer.use(
+        totalNumberOfStoresFetcherHandlers.TotalNumberOfStores.all(0),
+        storesListConnectorMockHandlers.StoresList.all([])
+      );
+      renderMe();
+      const storeInput = await screen.findByLabelText('Stores');
+      // check the input's placeholder presence
+      await screen.findByText(/select or type a store key/i);
+      fireEvent.focus(storeInput);
+      fireEvent.keyDown(storeInput, { key: 'ArrowDown' });
+      await screen.findByText(/no options/i);
+    });
+  });
+  describe('when there are stores in the project', () => {
+    describe('when user has not yet typed search keyword', () => {
+      it('should render the input with all available options', async () => {
+        renderMe();
+        const storeInput = await screen.findByLabelText('Stores');
+        // check the input's placeholder presence
+        await screen.findByText(/select or type a store key/i);
+        fireEvent.focus(storeInput);
+        fireEvent.keyDown(storeInput, { key: 'ArrowDown' });
+        // check if all the available options are listed
+        await screen.findByText(berlinStoreName);
+        await screen.findByText('brandenburg-store (key)');
+      });
+    });
+    describe('when user types search keyword', () => {
+      it('should render the input with options matching user input', async () => {
+        renderMe();
+        const storeInput = await screen.findByLabelText('Stores');
+        // check the input's placeholder presence
+        await screen.findByText(/select or type a store key/i);
+        fireEvent.focus(storeInput);
+        fireEvent.keyDown(storeInput, { key: 'ArrowDown' });
+        // check if all the available options are listed
+        await screen.findByText(berlinStoreName);
+        await screen.findByText('brandenburg-store (key)');
+        // type a search keyword
+        fireEvent.change(storeInput, { target: { value: 'Berlin' } });
+        // check the input's placeholder absence
+        expect(
+          screen.queryByText(/select or type a store key/i)
+        ).not.toBeInTheDocument();
+        // check the filtered results
+        await screen.findByText(berlinStoreName);
+        expect(
+          screen.queryByText('brandenburg-store (key)')
+        ).not.toBeInTheDocument();
+      });
+    });
+  });
+});

package/src/components/store-select-input/utils.js

@@ -0,0 +1,40 @@
+import { LOWER_STORES_LIMIT } from './constants';
+import {
+  formatLocalizedString,
+  applyTransformedLocalizedFields,
+} from '@commercetools-frontend/l10n';
+
+// map store to options
+export const mapStoresToOptions = ({
+  store,
+  renderSelectInputOptionValuesByField,
+  dataLocale,
+}) => {
+  const convertedStore = applyTransformedLocalizedFields(store, [
+    { from: 'nameAllLocales', to: 'name' },
+  ]);
+  const localizedName = formatLocalizedString(convertedStore, {
+    key: 'name',
+    locale: dataLocale,
+    fallback: `${store.key} (key)`,
+  });
+  return {
+    label: localizedName,
+    value:
+      renderSelectInputOptionValuesByField === 'key' ? store.key : store.id,
+    key: store.key,
+    id: store.id,
+    productSelections: store.productSelections?.map(
+      (productSelectionRef) => productSelectionRef.productSelection.id
+    ),
+  };
+};
+
+// get the first 60 options
+export const getFirst60Options = (storesOptions, currentValues) => {
+  const currentValuesLength = Array.isArray(currentValues)
+    ? currentValues.length
+    : 1;
+
+  return storesOptions.slice(0, LOWER_STORES_LIMIT + currentValuesLength);
+};

package/src/components/tooltip/index.js

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

package/src/components/tooltip/tooltip.jsx

@@ -0,0 +1,192 @@
+import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+import requiredIf from 'react-required-if';
+import classnames from 'classnames';
+import isTouchDevice from 'is-touch-device';
+import styles from './tooltip.module.css';
+
+export class Tooltip extends PureComponent {
+  static displayName = 'Tooltip';
+
+  static propTypes = {
+    // Only useful when the parent components needs the control
+    // of the display of the component which requires trigger => `force`.
+    // So `display` is a required prop if the `trigger` is "force".
+    display: requiredIf(PropTypes.bool, (props) => props.trigger === 'force'),
+    position: PropTypes.oneOf(['top', 'top-right', 'bottom', 'left', 'right']),
+    type: PropTypes.oneOf(['warning', 'info', 'error']),
+    message: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    autohide: PropTypes.shape({
+      enabled: PropTypes.bool,
+      timeout: PropTypes.number,
+      onHide: PropTypes.func,
+    }),
+    trigger: PropTypes.oneOf([
+      'click',
+      'hover',
+      // Should the trigger be by force,
+      // We need the display prop.
+      // see the `displayPropValidator`
+      'force',
+    ]).isRequired,
+    children: PropTypes.node,
+    className: PropTypes.string,
+  };
+
+  static defaultProps = {
+    position: 'top',
+    type: 'warning',
+    trigger: 'force',
+    display: false,
+    autohide: { enabled: true, timeout: 5000, onHide: noop },
+  };
+
+  state = {
+    visible: this.props.trigger === 'force' ? this.props.display : false,
+  };
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { display, trigger, autohide } = nextProps;
+    const nextVisible = trigger === 'force' ? display : this.state.visible;
+
+    this.setState({ visible: nextVisible });
+
+    if (nextVisible && autohide.enabled) this.setupTimeout();
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillMount() {
+    this.lifetimeTimeout = null;
+  }
+
+  componentDidMount() {
+    if (this.props.autohide.enabled) setTimeout(this.setupTimeout);
+  }
+
+  componentWillUnmount() {
+    this.isUnmounting = true;
+    clearTimeout(this.lifetimeTimeout);
+  }
+
+  safelySetState = (...args) => {
+    if (!this.isUnmounting) this.setState(...args);
+  };
+
+  onMouseEnter = () => {
+    if (this.props.display && !isTouchDevice())
+      this.safelySetState({ visible: true });
+  };
+
+  onMouseLeave = () => {
+    if (this.props.display) this.safelySetState({ visible: false });
+  };
+
+  onClick = () => {
+    this.safelySetState({ visible: true });
+    this.setupTimeout();
+  };
+
+  show = () => {
+    this.safelySetState({ visible: true });
+
+    if (this.props.autohide.enabled) this.setupTimeout();
+  };
+
+  hide = () => {
+    this.safelySetState({ visible: false }, () => {
+      if (this.props.autohide.enabled && this.props.autohide.onHide)
+        this.props.autohide.onHide();
+    });
+  };
+
+  setupTimeout = () => {
+    const timeoutID = setTimeout(() => {
+      this.hide();
+      this.lifetimeTimeout = null;
+    }, this.props.autohide.timeout);
+    if (this.lifetimeTimeout) clearTimeout(this.lifetimeTimeout);
+
+    this.lifetimeTimeout = timeoutID;
+  };
+
+  renderTooltipTop = (tooltipClassName, message) => (
+    <div className={tooltipClassName}>
+      <div className={styles.body}>{message}</div>
+      <div className={styles['arrow-shadow-top']} />
+      <div className={styles['arrow-top-border']} />
+      <div className={styles['arrow-top']} />
+    </div>
+  );
+
+  renderTooltipTopRight = (tooltipClassName, message) => (
+    <div className={tooltipClassName}>
+      <div className={styles.body}>{message}</div>
+      <div className={styles['arrow-shadow-top-right']} />
+      <div className={styles['arrow-top-right-border']} />
+      <div className={styles['arrow-top-right']} />
+    </div>
+  );
+
+  renderTooltipRight = (tooltipClassName, message) => (
+    <div className={tooltipClassName}>
+      <div className={styles['arrow-right-border']} />
+      <div className={styles['arrow-right']} />
+      <div className={styles.body}>{message}</div>
+    </div>
+  );
+
+  renderTooltipBottom = (tooltipClassName, message) => (
+    <div className={tooltipClassName}>
+      <div className={styles['arrow-bottom-border']} />
+      <div className={styles['arrow-bottom']} />
+      <div className={styles.body}>{message}</div>
+    </div>
+  );
+
+  renderTooltipLeft = (tooltipClassName, message) => (
+    <div className={tooltipClassName}>
+      <div className={styles['arrow-left-border']} />
+      <div className={styles['arrow-left']} />
+      <div className={styles.body}>{message}</div>
+    </div>
+  );
+
+  render = () => {
+    const tooltipClassName = classnames(
+      styles.container,
+      styles[`container-${this.props.position}`],
+      styles[`${this.props.type}`],
+      { [styles.hide]: !this.state.visible }
+    );
+
+    const containerProps = {
+      hover: {
+        onMouseEnter: this.onMouseEnter,
+        onMouseLeave: this.onMouseLeave,
+      },
+      force: {},
+      click: { onClick: this.onClick },
+    };
+
+    let rendererFn = this.renderTooltipTop; // default position
+    if (this.props.position === 'top-right')
+      rendererFn = this.renderTooltipTopRight;
+    if (this.props.position === 'bottom') rendererFn = this.renderTooltipBottom;
+    if (this.props.position === 'left') rendererFn = this.renderTooltipLeft;
+    if (this.props.position === 'right') rendererFn = this.renderTooltipRight;
+    return (
+      <div
+        {...containerProps[this.props.trigger]}
+        className={classnames(this.props.className, styles.box)}
+      >
+        {rendererFn(tooltipClassName, this.props.message)}
+        {this.props.children}
+      </div>
+    );
+  };
+}
+
+export default Tooltip;
+
+function noop() {}

package/src/components/tooltip/tooltip.module.css

@@ -0,0 +1,281 @@
+/* STRUCTURE */
+
+.container {
+  box-sizing: content-box;
+  max-height: 150px;
+  opacity: 1;
+  visibility: visible;
+  position: absolute;
+  margin-left: auto;
+  margin-right: auto;
+  cursor: default;
+  pointer-events: none;
+  z-index: 99;
+}
+
+.box {
+  position: relative;
+}
+
+.body {
+  padding: 6px;
+  border-radius: 5px;
+  min-width: 100px;
+  background-color: var(--color-surface);
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 3px 3px 0 rgba(0, 0, 0, 0.24);
+  vertical-align: middle;
+  font-size: 0.857rem;
+}
+
+.tooltip-body {
+  background: red;
+}
+
+/* STATES */
+
+.container.hide {
+  opacity: 0.01;
+  visibility: hidden;
+}
+
+/* ARROW */
+
+.arrow-top-border {
+  border-top: solid 6px transparent;
+}
+
+.arrow-top-right-border {
+  border-top: solid 6px transparent;
+}
+
+.arrow-bottom-border {
+  border-bottom: solid 6px transparent;
+  transform: translateY(-6px);
+}
+
+.arrow-left-border {
+  border-left: solid 6px transparent;
+}
+
+.arrow-right-border {
+  border-right: solid 6px transparent;
+}
+
+/* ARROW POSITIONING */
+.arrow-top,
+.arrow-top-border,
+.arrow-shadow-top,
+.arrow-bottom,
+.arrow-bottom-border {
+  box-sizing: border-box;
+  height: 6px;
+  width: 12px;
+  margin-left: 30px;
+  margin-right: auto;
+  border-left: solid 6px transparent;
+  border-right: solid 6px transparent;
+  position: absolute;
+}
+
+.arrow-top-right,
+.arrow-top-right-border,
+.arrow-shadow-top-right {
+  box-sizing: border-box;
+  height: 6px;
+  width: 12px;
+  right: 30px;
+  border-left: solid 6px transparent;
+  border-right: solid 6px transparent;
+  position: absolute;
+}
+
+.arrow-left,
+.arrow-left-border {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 6px 0 6px 6px;
+  border-color: transparent transparent transparent var(--color-info);
+  position: absolute;
+  right: -5px;
+  top: calc(50% - 6px);
+}
+
+.arrow-right,
+.arrow-right-border {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 6px 6px 6px 0;
+  border-color: transparent var(--color-info) transparent transparent;
+  position: absolute;
+  left: -6px;
+  top: calc(50% - 6px);
+}
+
+.arrow-top {
+  border-top: solid 6px var(--color-info);
+  transform: translateY(-1.5px);
+}
+
+.arrow-top-right {
+  border-top: solid 6px var(--color-info);
+  transform: translateY(-1.5px);
+}
+
+.arrow-bottom {
+  border-bottom: solid 6px var(--color-primary);
+  transform: translateY(-6px);
+}
+
+.arrow-left {
+  border-left: solid 6px var(--color-info);
+  transform: translateX(-2px);
+}
+
+.arrow-right {
+  border-right: solid 6px var(--color-info);
+  transform: translateX(2px);
+}
+
+/* ARROW SHADOW */
+
+.arrow-shadow-top {
+  border-top: solid 6px rgba(176, 176, 176, 0.25);
+  transform: translate(2px, 2px);
+}
+
+.arrow-shadow-top-right {
+  border-top: solid 6px rgba(176, 176, 176, 0.25);
+  transform: translate(2px, 2px);
+}
+
+/* TOOLTIP TYPES */
+
+/* WARNING */
+
+.container.warning > .body {
+  border: solid 1px var(--color-warning);
+  color: var(--color-solid);
+}
+
+.container.warning > .arrow-top-border,
+.container.warning > .arrow-top-right-border {
+  border-top-color: var(--color-warning);
+}
+
+.container.warning > .arrow-top,
+.container.warning > .arrow-top-right {
+  border-top-color: var(--color-surface);
+}
+
+.container.warning > .arrow-bottom {
+  border-bottom-color: var(--color-surface);
+}
+
+.container.warning > .arrow-bottom-border {
+  border-bottom-color: var(--color-warning);
+}
+
+.container.warning > .arrow-left {
+  border-left-color: var(--color-surface);
+}
+
+.container.warning > .arrow-left-border {
+  border-left-color: var(--color-warning);
+}
+
+.container.warning > .arrow-right {
+  border-right-color: var(--color-surface);
+}
+
+.container.warning > .arrow-right-border {
+  border-right-color: var(--color-warning);
+}
+
+/* INFO */
+
+.container.info {
+  max-height: auto;
+  min-width: 100px;
+  white-space: nowrap;
+}
+
+.container.info > .body {
+  background-color: var(--color-surface);
+  border: solid 1px var(--color-primary);
+  color: var(--color-accent);
+  padding: 12px;
+  min-width: 100px;
+}
+
+.container.info > .arrow-left {
+  border-left-color: var(--color-surface);
+}
+
+.container.info > .arrow-left-border {
+  border-left-color: var(--color-primary);
+}
+
+.container.info > .arrow-right {
+  border-right-color: var(--color-surface);
+}
+
+.container.info > .arrow-right-border {
+  border-right-color: var(--color-primary);
+}
+
+.container.info > .arrow-top,
+.container.info > .arrow-top-right {
+  border-top-color: var(--color-surface);
+}
+
+.container.info > .arrow-top-border,
+.container.info > .arrow-top-right-border {
+  border-top-color: var(--color-primary);
+}
+
+/* ERROR */
+
+.container.error > .body {
+  background-color: var(--color-warning-95);
+  border: solid 1px var(--color-error);
+  color: var(--color-solid);
+}
+
+.container.error > .arrow-top-border,
+.container.error > .arrow-top-right-border {
+  border-top-color: var(--color-error);
+}
+
+.container.error > .arrow-top,
+.container.error > .arrow-top-right {
+  border-top-color: var(--color-warning-95);
+}
+
+.container.error > .arrow-bottom {
+  border-bottom-color: var(--color-warning-95);
+}
+
+.container.error > .arrow-bottom-border {
+  border-bottom-color: var(--color-error);
+}
+
+/* POSITIONS */
+
+.container-top {
+  transform: translateY(-100%) translateY(-3px);
+}
+
+.container-top-right {
+  transform: translate(0, calc(-100% - 10px));
+  right: 0;
+}
+
+.container-bottom {
+  top: calc(100% + 10px);
+}
+
+.container-left {
+  transform: translateX(-100%) translateX(-10px) translateY(-6px);
+}