@commercetools-frontend/experimental-components 0.0.2 → 0.1.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/hocs/utils/index.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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