@commercetools-frontend/experimental-components 0.0.2 → 0.1.0

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

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

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

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

package/src/components/tooltip/tooltip.jsx

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

@@ -1,281 +0,0 @@
-/* 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);
-}