@commercetools-frontend/experimental-components 0.0.2

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

@@ -0,0 +1,60 @@
+import {
+  render as rtlRender,
+  fireEvent,
+} from '@commercetools-frontend/application-shell/test-utils';
+import injectModalState from './inject-modal-state';
+
+jest.mock('@commercetools-frontend/sentry');
+
+/* eslint-disable react/prop-types */
+const BaseTestComponent = (props) => (
+  <>
+    <button onClick={props.modalState.openModal}>Open modal</button>
+    <button onClick={props.modalState.closeModal}>Close modal</button>
+    <h1>Modal is {props.modalState.isModalOpen ? 'open' : 'closed'}</h1>
+  </>
+);
+
+const render = (options) => {
+  const TestComponent = injectModalState(options)(BaseTestComponent);
+  const rendered = rtlRender(<TestComponent />);
+
+  const clickOpenModal = () =>
+    fireEvent.click(rendered.getByText(/Open modal/i));
+  const clickCloseModal = () =>
+    fireEvent.click(rendered.getByText(/Close modal/i));
+
+  return { ...rendered, clickOpenModal, clickCloseModal };
+};
+
+describe('when modal is closed by default', () => {
+  it('should show the modal', () => {
+    const rendered = render();
+
+    expect(rendered.queryByText(/Modal is open/i)).not.toBeInTheDocument();
+  });
+
+  it('should allow opening the modal', () => {
+    const rendered = render();
+
+    rendered.clickOpenModal();
+
+    expect(rendered.getByText(/Modal is open/i)).toBeInTheDocument();
+  });
+});
+
+describe('when modal is open by default', () => {
+  it('should show the modal', () => {
+    const rendered = render({ isInitiallyOpen: true });
+
+    expect(rendered.getByText(/Modal is open/i)).toBeInTheDocument();
+  });
+
+  it('should allow closing the modal', async () => {
+    const rendered = render({ isInitiallyOpen: true });
+
+    rendered.clickCloseModal();
+
+    await rendered.findByText(/Modal is closed/i);
+  });
+});

package/src/hocs/inject-notifications/README.md

@@ -0,0 +1,43 @@
+# @commercetools-shared/hocs/inject-notifications
+
+React Higher-Order-Component (HoC) to handle MC notifications. The HoC enhances a base component with a configurable `propName` which contains:
+
+```js
+{
+  showNotification: Function;
+  showApiErrorNotification: Function;
+  onActionError: Function;
+  hideAllPageNotifications: Function;
+}
+```
+
+both functions are based on the respective hooks `useShowNotification`, `useShowApiErrorNotification`, `useOnActionError` and `useHideAllPageNotifications`. Please consider using the hooks from `@commercetools-frontend/actions-global` when working with a Function Component. This component is mainly meant to be used with Class Components which can not directly use hooks. Overall, this should simplify dispatching notifications without having to worry about `connect` and the global actions.
+
+## Example
+
+```jsx
+const TestComponent = props => (
+  const showSuccesNotification = () =>
+    props.notifications.showNotification({
+      kind: 'success',
+      domain: DOMAINS.SIDE,
+      text: 'This is a success notification',
+    });
+
+  <button onClick={showSuccesNotification}>
+    Show success notification
+  </button>
+);
+TestComponent.propTypes = {
+  notifications: PropTypes.shape({
+    showNotification: PropTypes.func.isRequired,
+    showApiErrorNotification: PropTypes.func.isRequired,
+    onActionError: PropTypes.func.isRequired,
+    hideAllPageNotifications: PropTypes.func.isRequired,
+  })
+}
+
+injectNotifications()(
+  TestComponent
+);
+```

package/src/hocs/inject-notifications/index.js

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

package/src/hocs/inject-notifications/inject-notifications.jsx

@@ -0,0 +1,35 @@
+import {
+  useShowApiErrorNotification,
+  useShowNotification,
+  useOnActionError,
+  useHideAllPageNotifications,
+} from '@commercetools-frontend/actions-global';
+import { getDisplayName } from '../utils';
+
+const injectNotifications =
+  (propName = 'notifications') =>
+  (Component) => {
+    const WrappedComponent = (props) => {
+      const showNotification = useShowNotification();
+      const showApiErrorNotification = useShowApiErrorNotification();
+      const onActionError = useOnActionError();
+      const hideAllPageNotifications = useHideAllPageNotifications();
+
+      const notifications = {
+        showNotification,
+        showApiErrorNotification,
+        onActionError,
+        hideAllPageNotifications,
+      };
+
+      return <Component {...props} {...{ [propName]: notifications }} />;
+    };
+
+    WrappedComponent.displayName = `withNotifications(${getDisplayName(
+      Component
+    )}`;
+
+    return WrappedComponent;
+  };
+
+export default injectNotifications;

package/src/hocs/inject-notifications/inject-notifications.spec.js

@@ -0,0 +1,55 @@
+import { DOMAINS } from '@commercetools-frontend/constants';
+import {
+  screen,
+  renderAppWithRedux,
+  fireEvent,
+} from '@commercetools-frontend/application-shell/test-utils';
+import injectNotifications from './inject-notifications';
+
+jest.mock('@commercetools-frontend/sentry');
+
+const TestComponent = injectNotifications()((props) => {
+  const showNotification = () =>
+    props.notifications.showNotification({
+      kind: 'success',
+      domain: DOMAINS.SIDE,
+      text: 'This is a success notification',
+    });
+
+  const showApiErrorNotification = () =>
+    props.notifications.showApiErrorNotification({
+      errors: [
+        {
+          code: 'TestApiError',
+          message: 'This is a test Api error.',
+        },
+      ],
+    });
+
+  return (
+    <>
+      <button onClick={showNotification}>Show success notification</button>
+      <button onClick={showApiErrorNotification}>
+        Show Api error notification
+      </button>
+    </>
+  );
+});
+
+describe('when showing success notification', () => {
+  it('should show the message', async () => {
+    renderAppWithRedux(<TestComponent />);
+    fireEvent.click(screen.getByText(/Show success notification/i));
+
+    await screen.findByText(/This is a success notification/i);
+  });
+});
+
+describe('when showing error notification', () => {
+  it('should show the message', async () => {
+    renderAppWithRedux(<TestComponent />);
+    fireEvent.click(screen.getByText(/Show Api error notification/i));
+
+    await screen.findByText(/This is a test Api error./i);
+  });
+});

package/src/hocs/inject-storage/index.js

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

package/src/hocs/inject-storage/inject-storage.jsx

@@ -0,0 +1,45 @@
+import useStorage from '../../hooks/use-storage';
+import wrapDisplayName from '../wrap-display-name';
+
+const defaultOptions = {
+  propName: 'storage',
+  storageKey: '',
+  initalStorageValue: null,
+  storageType: 'local',
+};
+
+const injectStorage = (options) => (WrappedComponent) => {
+  /**
+   * NOTE:
+   *    Options are being merged by spreading as destructuring and defaulting in
+   *    argument position does not allow passing specification of option(s).
+   */
+  const mergedOptions = {
+    ...defaultOptions,
+    ...options,
+  };
+
+  const WithStorage = (props) => {
+    const [actualStorageValue, writeToStorage, readFromStorage] = useStorage(
+      mergedOptions.storageKey(props),
+      mergedOptions.initalStorageValue,
+      mergedOptions.options
+    );
+
+    const storageProp = {
+      [mergedOptions.propName]: {
+        actualStorageValue,
+        writeToStorage,
+        readFromStorage,
+      },
+    };
+
+    return <WrappedComponent {...props} {...storageProp} />;
+  };
+
+  WithStorage.displayName = wrapDisplayName(WrappedComponent, 'WithStorage');
+
+  return WithStorage;
+};
+
+export default injectStorage;

package/src/hocs/inject-storage/inject-storage.spec.js

@@ -0,0 +1,32 @@
+import {
+  renderAppWithRedux,
+  fireEvent,
+} from '@commercetools-frontend/application-shell/test-utils';
+import injectStorage from './inject-storage';
+
+const TestComponent = injectStorage({
+  storageKey: () => 'language',
+  initalStorageValue: null,
+  options: { storageType: 'session' },
+})((props) => {
+  const writeToStorage = () => props.storage.writeToStorage('English');
+
+  const dataFromStorage = props.storage.readFromStorage();
+
+  return (
+    <>
+      <button onClick={writeToStorage}>Write to storage</button>
+      {dataFromStorage && <p>language: {dataFromStorage}</p>}
+    </>
+  );
+});
+
+describe('when writing to storage', () => {
+  it('should show data from storage', async () => {
+    const rendered = renderAppWithRedux(<TestComponent />);
+
+    fireEvent.click(rendered.getByText(/Write to storage/i));
+
+    await rendered.findByText(/language: English/i);
+  });
+});

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

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

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

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

package/src/hocs/inject-toggle-state/inject-toggle-state.spec.js

@@ -0,0 +1,58 @@
+import {
+  render as rtlRender,
+  fireEvent,
+  screen,
+} from '@commercetools-frontend/application-shell/test-utils';
+import injectToggleState from './inject-toggle-state';
+
+jest.mock('@commercetools-frontend/sentry');
+
+/* eslint-disable react/prop-types */
+const BaseTestComponent = (props) => (
+  <>
+    <button onClick={props.toggleState[1]}>Toggle state</button>
+    <h1>Toggle is {props.toggleState[0] ? 'open' : 'closed'}</h1>
+  </>
+);
+
+const render = (options) => {
+  const TestComponent = injectToggleState(options)(BaseTestComponent);
+  rtlRender(<TestComponent />);
+
+  const clickToggleState = () =>
+    fireEvent.click(screen.getByText(/Toggle state/i));
+
+  return { clickToggleState };
+};
+
+describe('when toggle state is closed by default', () => {
+  it('should show closed toggle state', () => {
+    render();
+
+    expect(screen.getByText(/Toggle is closed/i)).toBeInTheDocument();
+  });
+
+  it('should allow toggling the state', () => {
+    const { clickToggleState } = render();
+
+    clickToggleState();
+
+    expect(screen.getByText(/Toggle is open/i)).toBeInTheDocument();
+  });
+});
+
+describe('when toggle state is open by default', () => {
+  it('should show open toggle state', () => {
+    render({ isInitiallyOpen: true });
+
+    expect(screen.getByText(/Toggle is open/i)).toBeInTheDocument();
+  });
+
+  it('should allow toggling the state', async () => {
+    const { clickToggleState } = render({ isInitiallyOpen: true });
+
+    clickToggleState();
+
+    await screen.findByText(/Toggle is closed/i);
+  });
+});

package/src/hocs/utils/get-display-name/get-display-name.js

@@ -0,0 +1,13 @@
+const getDisplayName = (Component) => {
+  if (typeof Component === 'string') {
+    return Component;
+  }
+
+  if (!Component) {
+    return undefined;
+  }
+
+  return Component.displayName || Component.name || 'Component';
+};
+
+export default getDisplayName;

package/src/hocs/utils/get-display-name/get-display-name.spec.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import getDisplayName from './get-display-name';
+
+describe('when React.Component', () => {
+  describe('with static property', () => {
+    class Component extends React.Component {
+      static displayName = 'CustomDisplayName';
+      render() {
+        return <div />;
+      }
+    }
+
+    it('should get the display name', () => {
+      expect(getDisplayName(Component)).toBe('CustomDisplayName');
+    });
+  });
+
+  describe('without static property', () => {
+    class Component extends React.Component {
+      render() {
+        return <div />;
+      }
+    }
+
+    it('should get the display name', () => {
+      expect(getDisplayName(Component)).toBe('Component');
+    });
+  });
+});
+
+describe('when Function Component', () => {
+  describe('with named function', () => {
+    function Component() {
+      return <div />;
+    }
+    it('should get the display name', () => {
+      expect(getDisplayName(Component)).toBe('Component');
+    });
+  });
+
+  describe('with unnamed function', () => {
+    it('should get the display name', () => {
+      expect(getDisplayName(() => <div />)).toBe('Component');
+    });
+  });
+});
+
+describe('when string', () => {
+  it('should get the display name', () => {
+    expect(getDisplayName('div')).toBe('div');
+  });
+});

package/src/hocs/utils/get-display-name/index.js

@@ -0,0 +1 @@
+export { default } from './get-display-name';

package/src/hocs/utils/index.js

@@ -0,0 +1,2 @@
+export { default as getDisplayName } from './get-display-name';
+export { default as setDisplayName } from './set-display-name';

package/src/hocs/utils/set-display-name/index.js

@@ -0,0 +1 @@
+export { default } from './set-display-name';

package/src/hocs/utils/set-display-name/set-display-name.js

@@ -0,0 +1,8 @@
+const setDisplayName = (nextDisplayName) => (Component) => {
+  // eslint-disable-next-line no-param-reassign
+  Component.displayName = nextDisplayName;
+
+  return Component;
+};
+
+export default setDisplayName;

package/src/hocs/utils/set-display-name/set-display-name.spec.js

@@ -0,0 +1,9 @@
+import setDisplayName from './set-display-name';
+
+describe('setDisplayName', () => {
+  it('should set the displayName', () => {
+    const BaseComponent = () => <div />;
+    const NewComponent = setDisplayName('Foo')(BaseComponent);
+    expect(NewComponent.displayName).toBe('Foo');
+  });
+});

package/src/hocs/with-props/index.js

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

package/src/hocs/with-props/with-props.jsx

@@ -0,0 +1,21 @@
+import wrapDisplayName from '../wrap-display-name';
+
+function isPropsMapper(mapProps) {
+  return typeof mapProps === 'function';
+}
+
+const withProps = (mapProps) => (Component) => {
+  const EnhancedWithProps = (ownProps) => {
+    const enhancedProps = isPropsMapper(mapProps)
+      ? { ...ownProps, ...mapProps(ownProps) }
+      : { ...ownProps, ...mapProps };
+
+    return <Component {...enhancedProps} />;
+  };
+
+  EnhancedWithProps.displayName = wrapDisplayName(Component, 'withProps');
+
+  return EnhancedWithProps;
+};
+
+export default withProps;

package/src/hocs/with-props/with-props.spec.js

@@ -0,0 +1,57 @@
+import { render } from '@commercetools-frontend/application-shell/test-utils';
+import withProps from './with-props';
+
+const createTestProps = (custom = {}) => ({
+  baseProp: 'base-prop-value',
+
+  ...custom,
+});
+
+const BaseComponent = (props) => (
+  <ul>
+    {Object.entries(props).map(([propName, propValue]) => (
+      <li key={propName}>{propValue}</li>
+    ))}
+  </ul>
+);
+
+describe('with `mapProps` being object', () => {
+  it('should have base props', () => {
+    const enhancedProps = {
+      enhancedProp: 'enhanced-prop-value',
+    };
+
+    const props = createTestProps();
+    const TestComponent = withProps(enhancedProps)(BaseComponent);
+
+    const rendered = render(<TestComponent {...props} />);
+
+    expect(rendered.getByText('base-prop-value')).toBeInTheDocument();
+  });
+
+  it('should have enhanced props', () => {
+    const enhancedProps = {
+      enhancedProp: 'enhanced-prop-value',
+    };
+    const props = createTestProps();
+    const TestComponent = withProps(enhancedProps)(BaseComponent);
+
+    const rendered = render(<TestComponent {...props} />);
+
+    expect(rendered.getByText('enhanced-prop-value')).toBeInTheDocument();
+  });
+});
+
+describe('with `mapProps` being function', () => {
+  it('should have enhanced props', () => {
+    const enhancedProps = {
+      b: 'b',
+    };
+    const props = createTestProps();
+    const TestComponent = withProps(() => enhancedProps)(BaseComponent);
+
+    const rendered = render(<TestComponent {...props} />);
+
+    expect(rendered.getByText('base-prop-value')).toBeInTheDocument();
+  });
+});

package/src/hocs/with-redirect-to/index.js

@@ -0,0 +1 @@
+export { default } from './with-redirect-to';

package/src/hocs/with-redirect-to/with-redirect-to.jsx

@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types';
+import { useEffect } from 'react';
+
+const useRedirectEffect = ({ goTo }) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(goTo, []);
+
+  return null;
+};
+
+const RedirectTo = (props) => {
+  useRedirectEffect({ goTo: props.goTo });
+
+  return null;
+};
+RedirectTo.propTypes = {
+  goTo: PropTypes.func.isRequired,
+};
+
+const defaultOptions = {
+  skip: () => false,
+};
+const withRedirectTo = (options) => (Component) => {
+  const mergedOptions = {
+    ...defaultOptions,
+    ...options,
+  };
+
+  const WithRedirectTo = (props) => {
+    if (!mergedOptions.skip(props)) {
+      return <RedirectTo goTo={options.selectGoTo(props)} />;
+    }
+
+    return <Component {...props} />;
+  };
+
+  WithRedirectTo.displayName = 'WithFirstStepRedirect';
+
+  return WithRedirectTo;
+};
+
+export default withRedirectTo;

package/src/hocs/with-redirect-to/with-redirect-to.spec.js

@@ -0,0 +1,77 @@
+import { render as rtlRender } from '@commercetools-frontend/application-shell/test-utils';
+import withRedirectTo from './with-redirect-to';
+
+const TestComponent = () => 'Test component';
+
+const render = ({ options, ownProps }) => {
+  const TestComponentWithPermissions = withRedirectTo(options)((props) => (
+    <TestComponent {...props} />
+  ));
+
+  return rtlRender(<TestComponentWithPermissions {...ownProps} />);
+};
+
+describe('when not skipping', () => {
+  describe('without skip option', () => {
+    const ownProps = {
+      goTo: jest.fn(),
+    };
+    const options = {
+      selectGoTo: () => ownProps.goTo,
+    };
+
+    it('should redirect', () => {
+      render({ options });
+
+      expect(ownProps.goTo).toHaveBeenCalled();
+    });
+
+    it('should not render the children', () => {
+      const rendered = render({ options });
+
+      expect(rendered.queryByText(/Test component/i)).not.toBeInTheDocument();
+    });
+  });
+  describe('with skip option', () => {
+    const ownProps = {
+      goTo: jest.fn(),
+    };
+    const options = {
+      selectGoTo: () => ownProps.goTo,
+      skip: () => false,
+    };
+
+    it('should redirect', () => {
+      render({ options });
+
+      expect(ownProps.goTo).toHaveBeenCalled();
+    });
+
+    it('should not render the children', () => {
+      const rendered = render({ options });
+
+      expect(rendered.queryByText(/Test component/i)).not.toBeInTheDocument();
+    });
+  });
+});
+describe('when skipping', () => {
+  const ownProps = {
+    goTo: jest.fn(),
+  };
+  const options = {
+    selectGoTo: () => ownProps.goTo,
+    skip: () => true,
+  };
+
+  it('should not redirect', () => {
+    render({ options });
+
+    expect(ownProps.goTo).not.toHaveBeenCalled();
+  });
+
+  it('should render the children', () => {
+    const rendered = render({ options });
+
+    expect(rendered.getByText(/Test component/i)).toBeInTheDocument();
+  });
+});

package/src/hocs/wrap-display-name/index.js

@@ -0,0 +1 @@
+export { default } from './wrap-display-name';